/* EMPEZAR (15-oct, DIS-A-1015-1 y el sí de Daniel): el alta de un cliente directo, con tres puertas. La línea de la maqueta: papel, un azul (#000DFC, la única señal
   de acción), títulos con serifa, etiquetas en mono. Texto de 12 px o más, objetivos de 24 px o más (aquí, 44), y el color nunca solo: cada estado va escrito. */
:root{--fondo:#EEF1F7;--panel:#FFFFFF;--panel-2:#F5F7FB;--linea:#E3E7F0;--linea-2:#CDD3E2;--tx:#141A33;--tx-2:#4B5575;--tx-3:#5F6A8A;--acento:#000DFC;--acento-2:#E8EAFF;--acento-osc:#0F08AD;
  --ok:#0B7A52;--ok-2:#E3F4EC;--aviso:#9A5C00;--aviso-2:#FFF4DE;
  --f-cuerpo:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;--f-titulo:'DM Serif Display',Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--fondo);color:var(--tx);font-family:var(--f-cuerpo);font-size:14px;line-height:1.5}
a{color:var(--acento)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cabecera */
.em-bar{display:flex;align-items:center;gap:16px;padding:12px 32px;background:var(--panel);border-bottom:1px solid var(--linea);flex-wrap:wrap}
.em-marca{display:inline-flex;align-items:center;min-height:32px;font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--acento-osc);text-decoration:none}
.em-donde{color:var(--tx-2);font-size:13px}
.em-maq{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.em-maq label{font-family:var(--f-mono);font-size:12px;color:var(--tx-3)}
.em-maq select{min-height:32px;padding:4px 8px;border:1px dashed var(--linea-2);border-radius:8px;background:var(--panel);font-size:13px;max-width:300px}
.em-ej{font-family:var(--f-mono);font-size:12px;color:var(--tx-3);border:1px dashed var(--linea-2);border-radius:6px;padding:3px 8px}

/* la cuenta en que estás y «Tus cuentas en este navegador» (17-oct, UTI-DIR-A-1017-9): como en el centro de cuentas, con el prefijo de esta capa */
.em-bar{position:relative}
.em-cuentas{display:flex;align-items:center;gap:10px}
.em-cuentas:empty{display:none}
@media (max-width:1600px){.em-maq label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.em-cchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 14px;border:1px solid var(--tx-2);border-radius:999px;background:var(--panel-2);font-size:13px;color:var(--tx)}
.em-cchip small{color:var(--tx-2);font-size:12px}
.em-av{flex:none;width:40px;height:40px;border-radius:999px;border:0;background:var(--acento);color:#FFFFFF;font-weight:600;font-size:16px;display:inline-grid;place-items:center}
button.em-av{cursor:pointer}
button.em-av[aria-expanded=true]{box-shadow:0 0 0 3px var(--acento-2)}
.em-av.trabajo{background:var(--tx);border-radius:10px}
.em-av.peq{width:32px;height:32px;font-size:14px}
.em-av.peq.trabajo{border-radius:8px}
.em-pop{position:absolute;right:32px;top:calc(100% + 6px);width:360px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--linea);border-radius:14px;box-shadow:0 18px 48px rgba(20,26,51,.18);padding:12px;z-index:20;display:flex;flex-direction:column;gap:2px}
.em-pop h2{margin:8px 10px 4px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.em-pop-it{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:10px;border:0;background:none;text-align:left;text-decoration:none;color:var(--tx);cursor:pointer;width:100%;font-size:14px}
.em-pop-it:hover{background:var(--acento-2)}
.em-pop-it[aria-current]{background:var(--panel-2)}
.em-pop-it b{display:block;font-weight:600}
.em-pop-it small{display:block;color:var(--tx-2);font-size:12px}
.em-pop-ico{flex:none;width:32px;height:32px;display:inline-grid;place-items:center;border-radius:8px;background:var(--panel-2);color:var(--tx-2)}
.em-pop-nota{margin:6px 10px 4px;font-size:12px;color:var(--tx-2)}
.em-aqui{margin-left:auto;flex:none;font-family:var(--f-mono);font-size:12px;padding:2px 8px;border-radius:6px;background:var(--acento-2);color:var(--acento);white-space:nowrap}
.em-cus{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:560px}
.em-cus li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linea);border-radius:12px}
.em-cus b{display:block;font-weight:600}
.em-cus small{display:block;color:var(--tx-2);font-size:13px}
.em-fijo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;background:var(--panel-2)}
.em-fijo .em-mono{font-family:var(--f-mono);font-size:13px;color:var(--tx-2)}
.em-sim[aria-pressed=true]{border-style:solid;border-color:var(--acento);color:var(--acento);background:var(--acento-2)}
a.em-volver{text-decoration:none}

/* página */
.em{max-width:1160px;margin:0 auto;padding:36px 32px 64px}
.em-eti{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.em-h1{margin:6px 0 6px;font-family:var(--f-titulo);font-weight:400;font-size:44px;line-height:1.08;letter-spacing:-.01em}
.em-h1:focus{outline:none}
.em-sub{margin:0;color:var(--tx-2);font-size:16px;max-width:70ch}
.em-sub b{color:var(--tx)}
.em-h2{margin:0 0 6px;font-family:var(--f-titulo);font-weight:400;font-size:26px;line-height:1.15}
.em-h3{margin:0 0 4px;font-size:15px;font-weight:600}
.em-p{margin:0;color:var(--tx-2);font-size:14px;max-width:72ch}
.em-peq{font-size:12px;color:var(--tx-3)}
.em-caja{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:22px 24px}
.em-pila{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.em-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:960px){.em-dos{grid-template-columns:1fr}}
.em-volver{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 0;margin-bottom:12px;border:0;background:none;color:var(--acento);cursor:pointer;font-size:14px}
.em-volver:hover{text-decoration:underline}

/* el paso de cada puerta: «Factura · paso 2 de 3», escrito y con una barra que no es la única pista */
.em-pasos{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.em-pasos ol{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.em-pasos li{width:40px;height:6px;border-radius:999px;background:var(--linea-2)}
.em-pasos li.hecho{background:var(--acento)}
.em-pasos li.ahora{background:var(--acento);box-shadow:0 0 0 2px var(--acento-2)}

/* botones */
.em-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 20px;border-radius:10px;border:1px solid var(--acento);background:var(--acento);color:#FFFFFF;font-weight:500;font-size:15px;cursor:pointer;text-decoration:none}
.em-btn:hover{background:var(--acento-osc);border-color:var(--acento-osc)}
.em-btn[disabled],.em-btn[aria-disabled=true]{background:var(--linea-2);border-color:var(--linea-2);color:var(--tx-2);cursor:not-allowed}
.em-btn.sec{background:var(--panel);color:var(--acento);border-color:var(--linea-2)}
.em-btn.sec:hover{border-color:var(--acento);background:var(--acento-2)}
.em-btn.sec[aria-disabled=true]{background:var(--panel-2);color:var(--tx-3);border-color:var(--linea)}
.em-btn.peq{min-height:36px;padding:6px 14px;font-size:14px}
label.em-btn:focus-within{outline:2px solid var(--acento);outline-offset:2px}
.em-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.em-g{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#FFFFFF;color:var(--acento);font-weight:700;font-size:14px}

/* lo que sólo existe en la maqueta: nota de diseño y botones de simular */
.em-nd{margin-top:28px;padding:12px 16px;border:1px dashed var(--linea-2);border-radius:10px;background:transparent;font-size:12px;color:var(--tx-3);max-width:96ch}
.em-nd b{font-family:var(--f-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-2);margin-right:6px}
.em-nd p{margin:4px 0 0}
.em-sim{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border:1px dashed var(--tx-3);border-radius:8px;background:var(--panel);color:var(--tx-2);font-family:var(--f-mono);font-size:12px;cursor:pointer}
.em-sim:hover{border-color:var(--acento);color:var(--acento)}

/* entrar */
.em-entrar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;min-height:calc(100vh - 220px)}
@media (max-width:960px){.em-entrar{grid-template-columns:1fr}}
.em-entrar .em-h1{font-size:52px}
.em-login{display:flex;flex-direction:column;gap:14px;padding:28px}
.em-login .em-btn{width:100%}

/* las tres puertas */
.em-puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
@media (max-width:1000px){.em-puertas{grid-template-columns:1fr}}
.em-puerta{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:24px}
.em-puerta.primera{border:2px solid var(--acento);padding:23px}
.em-puerta-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.em-puerta .em-ico{width:48px;height:48px;border-radius:12px;background:var(--acento-2);color:var(--acento);display:grid;place-items:center}
.em-puerta .em-ico svg{width:26px;height:26px}
.em-puerta .em-h2{margin:0}
.em-puerta dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:13px}
.em-puerta dt{font-family:var(--f-mono);font-size:12px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.em-puerta dd{margin:0;color:var(--tx-2)}
.em-puerta .em-btn{margin-top:auto}
.em-puerta .em-logo{height:22px;width:auto;align-self:flex-start}
.em-insignia{align-self:flex-start;font-family:var(--f-mono);font-size:12px;color:var(--acento);background:var(--acento-2);border-radius:6px;padding:2px 8px}
.em-mas{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--linea);border-radius:12px;background:var(--panel-2);font-size:14px;color:var(--tx-2)}

/* subir la factura */
.em-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:240px;padding:28px;border:2px dashed var(--linea-2);border-radius:16px;background:var(--panel);text-align:center}
.em-drop.encima{border-color:var(--acento);background:var(--acento-2)}
.em-drop .em-ico{width:56px;height:56px;color:var(--acento)}
.em-drop p{margin:0}
.em-leyendo{display:flex;align-items:center;gap:14px;font-size:16px}
.em-rueda{width:28px;height:28px;border-radius:999px;border:3px solid var(--acento-2);border-top-color:var(--acento);animation:em-gira 1s linear infinite}
@keyframes em-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.em-rueda{animation:none;border-top-color:var(--acento-2);border-right-color:var(--acento)}}

/* lo que leemos: campo, valor y «Corregir» */
.em-campos{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-items:start}
@media (max-width:900px){.em-campos{grid-template-columns:1fr}}
.em-campo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea)}
.em-campo dt{grid-column:1/-1;font-family:var(--f-mono);font-size:12px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em}
.em-campo dd{margin:0;font-size:15px;min-width:0;overflow-wrap:anywhere}
.em-campo .em-mono{font-family:var(--f-mono);font-size:14px}
.em-campo input{width:100%;min-height:40px;padding:6px 10px;border:1px solid var(--acento);border-radius:8px;background:#FFFFFF}
.em-corr{min-height:32px;padding:4px 10px;border:1px solid var(--linea-2);border-radius:8px;background:var(--panel);color:var(--acento);font-size:13px;cursor:pointer}
.em-corr:hover{border-color:var(--acento)}
.em-marca-dec{display:inline-block;margin-left:8px;font-family:var(--f-mono);font-size:12px;color:var(--aviso);background:var(--aviso-2);border-radius:6px;padding:1px 6px}
.em-edita{display:flex;gap:8px;grid-column:1/-1}

/* elegir: radios grandes, cada opción con su texto */
.em-opciones{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0}
.em-opciones legend{font-weight:600;font-size:15px;margin-bottom:8px;padding:0}
.em-opcion{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--linea-2);border-radius:12px;background:var(--panel);cursor:pointer}
.em-opcion:hover{border-color:var(--acento)}
.em-opcion input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--acento);flex:none}
.em-opcion b{display:block;font-weight:600}
.em-opcion small{display:block;color:var(--tx-2);font-size:13px;margin-top:2px}
.em-opcion.marcada{border:2px solid var(--acento);padding:13px 15px;background:var(--acento-2)}
.em-fila-op{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.em-explica{margin-top:12px;padding:12px 14px;border-left:3px solid var(--acento);background:var(--panel-2);border-radius:0 8px 8px 0;font-size:14px;color:var(--tx-2)}

/* formularios */
.em-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
@media (max-width:900px){.em-form{grid-template-columns:1fr}}
.em-form label,.em-lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tx-2)}
.em-form input,.em-form select,.em-in{min-height:44px;padding:8px 12px;border:1px solid var(--linea-2);border-radius:10px;background:#FFFFFF;font-size:15px;color:var(--tx)}
.em-form input:focus,.em-in:focus{border-color:var(--acento)}
.em-err{color:#B3261E;font-size:13px}

/* DATADIS: pasos numerados, los textos legales tal cual */
.em-paso{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:20px 22px}
.em-paso>h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:17px;font-weight:600;font-family:var(--f-cuerpo)}
.em-n{flex:none;width:28px;height:28px;border-radius:999px;background:var(--acento-2);color:var(--acento);display:inline-grid;place-items:center;font-size:14px;font-weight:600}
.em-legal{border:1px solid var(--linea);border-radius:10px;padding:14px 16px;background:var(--panel-2);font-size:13px;color:var(--tx-2);display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.em-legal p{margin:0}
.em-legal h3{margin:0;font-size:13px;font-weight:600;color:var(--tx)}
.em-chk{display:flex;align-items:center;gap:10px;min-height:32px;font-size:14px;cursor:pointer}
.em-chk input{width:18px;height:18px;accent-color:var(--acento)}
.em-cab-dd{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.em-cab-dd img{flex:none;height:40px;width:auto}

/* la espera: una línea de tiempo con su estado escrito */
.em-tiempo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.em-tiempo li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--linea)}
.em-tiempo li:last-child{border-bottom:0}
.em-punto{width:24px;height:24px;border-radius:999px;border:2px solid var(--linea-2);background:var(--panel);display:grid;place-items:center;font-size:13px;color:#FFFFFF}
.em-tiempo li.hecho .em-punto{background:var(--ok);border-color:var(--ok)}
.em-tiempo li.curso .em-punto{border-color:var(--acento);background:var(--acento-2)}
.em-estado{font-family:var(--f-mono);font-size:12px;padding:2px 8px;border-radius:6px;background:var(--panel-2);color:var(--tx-2);white-space:nowrap}
.em-tiempo li.hecho .em-estado{background:var(--ok-2);color:var(--ok)}
.em-tiempo li.curso .em-estado{background:var(--acento-2);color:var(--acento)}
.em-tiempo b{display:block;font-weight:600}
.em-tiempo small{display:block;color:var(--tx-2);font-size:13px}

/* tarjetas de «mientras tanto» y de lo siguiente */
.em-tarjeta{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:20px 22px}
.em-tarjeta.urge{border:2px solid var(--acento);padding:19px 21px}
.em-tarjeta .em-btn{align-self:flex-start;margin-top:6px}

/* el mapa de ejemplo (esquema, sin ortofoto): una parcela sin dibujo hasta que es tuya */
.em-mapa{display:block;width:100%;height:auto;border:1px solid var(--linea);border-radius:12px;background:#F3F5F0}
.em-mapa .calle{fill:#FFFFFF;stroke:#D7DCE6}
.em-mapa .manz{fill:#E6EAE0;stroke:#C9CFBF}
.em-mapa .parc{fill:#E6EAE0;stroke:#B5BCA8;stroke-width:1.5}
.em-mapa .parc.cand{fill:#FFFFFF;stroke:var(--acento);stroke-width:2;stroke-dasharray:6 4;cursor:pointer}
.em-mapa .parc.elegida{fill:var(--acento-2);stroke:var(--acento);stroke-width:3;stroke-dasharray:none}
.em-mapa text{font-family:var(--f-cuerpo);font-size:13px;fill:var(--tx-2)}
.em-mapa .eti{font-family:var(--f-mono);font-size:13px;fill:var(--acento);font-weight:600}
.em-mapa .alfiler{fill:var(--acento)}
.em-atrib{font-size:12px;color:var(--tx-3);margin-top:6px}

/* suministros y fincas */
.em-sums{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.em-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:16px 20px}
.em-sum.fuera{background:var(--panel-2);border-style:dashed}
.em-sum.fuera .em-sum-dir{text-decoration:line-through;color:var(--tx-3)}
.em-sum-dir{font-weight:600;font-size:15px}
.em-sum-det{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--tx-2)}
.em-sum-det .em-mono{font-family:var(--f-mono)}
.em-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--linea-2);border-radius:10px;overflow:hidden}
.em-seg button{min-height:40px;padding:6px 14px;border:0;background:var(--panel);font-size:14px;cursor:pointer;color:var(--tx-2)}
.em-seg button+button{border-left:1px solid var(--linea-2)}
.em-seg button[aria-pressed=true]{background:var(--acento);color:#FFFFFF}
.em-fincas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.em-finca{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:18px 20px}
.em-finca .em-mono{font-family:var(--f-mono);font-size:13px;color:var(--tx-2)}
.em-hecho{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ok)}
.em-hecho::before{content:'✓';display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--ok);color:#FFFFFF;font-size:13px}
.em-pend{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--aviso)}

/* el peldaño (CONS-2.13): dónde estás, qué ves con el siguiente y qué no te podemos prometer */
.em-pel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
@media (max-width:900px){.em-pel{grid-template-columns:1fr 1fr}}
.em-pel li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--linea);border-radius:12px;background:var(--panel)}
.em-pel li.hecho{background:var(--panel-2)}
.em-pel li.aqui{border:2px solid var(--acento);padding:13px 15px}
.em-pel .est{font-family:var(--f-mono);font-size:12px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em}
.em-pel li.aqui .est{color:var(--acento)}
.em-pel li.hecho .est{color:var(--ok)}
.em-pel b{font-size:15px}
.em-pel small{color:var(--tx-2);font-size:13px}
.em-nopro{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--aviso-2);color:#5C3A00;font-size:14px}
.em-nopro b{color:#5C3A00}

/* la ventana de DATADIS, simulada */
.em-velo{position:fixed;inset:0;background:rgba(20,26,51,.45);display:grid;place-items:center;padding:24px;z-index:10}
.em-ventana{width:min(560px,100%);background:var(--panel);border-radius:16px;padding:24px 26px;box-shadow:0 18px 48px rgba(20,26,51,.25);display:flex;flex-direction:column;gap:12px}
.em-ventana .em-barra-v{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;color:var(--tx-3);border-bottom:1px solid var(--linea);padding-bottom:10px}