:root{
  --fondo:#F6F8FB;--tarjeta:#FFFFFF;--texto:#1B2533;--suave:#5F6B7A;--medio:#46505E;--borde:#D3DAE4;--linea:#E1E6EE;
  --azul:#2F5B8C;--azul-osc:#234670;--noche:#1F3A5C;--noche2:#2E4D73;--claro:#D6E4F2;--claro2:#C9D6E6;--tenue:#93A9C6;
  --amarillo:#FBE7A1;--boton:#2F5B8C;--boton-hover:#234670;--error:#A32D2D;--error-fondo:#FBEAEA;--ok:#234670;--ok-fondo:#EAF1F8;--nota:#EFF2F7;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fondo:#0F1724;--tarjeta:#172234;--texto:#EEF2F8;--suave:#A9B6C7;--medio:#C3CDDA;--borde:#33435A;--linea:#26344A;
  --azul:#7FA8D9;--azul-osc:#A9C6EA;--noche:#0B1A2E;--noche2:#1B3354;--ok:#BFD5F0;--ok-fondo:#1B3354;--error:#F2A7A7;--error-fondo:#3A1E24;--nota:#1F2B3E;--boton:#3E6C9E;--boton-hover:#2F5B8C;
}}
:root[data-theme="dark"]{
  --fondo:#0F1724;--tarjeta:#172234;--texto:#EEF2F8;--suave:#A9B6C7;--medio:#C3CDDA;--borde:#33435A;--linea:#26344A;
  --azul:#7FA8D9;--azul-osc:#A9C6EA;--noche:#0B1A2E;--noche2:#1B3354;--ok:#BFD5F0;--ok-fondo:#1B3354;--error:#F2A7A7;--error-fondo:#3A1E24;--nota:#1F2B3E;--boton:#3E6C9E;--boton-hover:#2F5B8C;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:"Figtree","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--azul)}a:hover{color:var(--azul-osc)}
.envoltura{display:flex;flex-wrap:wrap;min-height:100%}
.marca{flex:1 1 420px;background:var(--noche);color:#FFFFFF;padding:48px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.logo{display:flex;align-items:center;gap:10px;color:#FFFFFF;text-decoration:none}
.logo-e{width:40px;height:40px;border-radius:12px;background:var(--amarillo);color:#1F3A5C;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.logo-txt{display:flex;flex-direction:column;line-height:1.15}.logo-txt b{font-size:20px;font-weight:800}.logo-txt span{font-size:12px;color:var(--claro2)}
.marca h1{margin:0;font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-.02em;max-width:14em}
.ventajas{display:flex;flex-direction:column;gap:14px}
.ventaja{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--claro)}
.ventaja strong{color:#FFFFFF}
.ventaja i{width:32px;height:32px;flex-shrink:0;border-radius:10px;background:var(--noche2);display:flex;align-items:center;justify-content:center}
.pie{font-size:13px;color:var(--tenue)}.pie a{color:var(--claro2)}
.lado{flex:1 1 420px;display:flex;align-items:center;justify-content:center;padding:40px clamp(20px,5vw,72px)}
.caja{width:100%;max-width:420px}
.vista{display:none;flex-direction:column;gap:18px}.vista.activa{display:flex}
.titulo h2{margin:0 0 6px;font-size:28px;font-weight:800;letter-spacing:-.01em}.titulo p{margin:0;font-size:15px;color:var(--suave);line-height:1.5}
label{font-size:14px;font-weight:600;margin-bottom:-10px}
input{height:52px;border-radius:12px;border:1px solid var(--borde);background:var(--tarjeta);color:var(--texto);padding:0 14px;font:inherit;font-size:16px;width:100%}
input:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.con-boton{position:relative}.con-boton input{padding-right:96px}
.ver{position:absolute;right:6px;top:6px;height:40px;padding:0 12px;border:none;background:transparent;color:var(--azul);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.codigo{font-size:24px;letter-spacing:.3em;text-align:center}
.btn{height:54px;border-radius:12px;border:none;background:var(--boton);color:#FFFFFF;font:inherit;font-size:16px;font-weight:700;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;text-decoration:none}
.btn:hover{background:var(--boton-hover);color:#FFFFFF}
.btn2{height:50px;border-radius:12px;border:1px solid var(--borde);background:var(--tarjeta);color:var(--texto);font:inherit;font-size:15px;font-weight:600;cursor:pointer;width:100%}
.enlace{background:none;border:none;padding:0;color:var(--azul);font:inherit;font-size:15px;font-weight:600;cursor:pointer;align-self:flex-start;min-height:32px}
.error{font-size:14px;color:var(--error);background:var(--error-fondo);border-radius:10px;padding:10px 12px;line-height:1.45}
.ok{font-size:15px;color:var(--ok);background:var(--ok-fondo);border-radius:12px;padding:14px;line-height:1.5}
.oculto-total{display:none!important}
.nota{font-size:12px;color:var(--medio);background:var(--nota);border-radius:8px;padding:6px 10px;align-self:flex-start}
.demo{border:1px dashed var(--borde);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--medio)}
.separa{border-top:1px solid var(--linea);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.separa span{font-size:15px;color:var(--medio)}.chica{font-size:14px!important;color:var(--suave)!important}
.rol{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;border:1px solid var(--linea);background:var(--tarjeta);text-decoration:none;color:var(--texto)}
.rol:hover{border-color:var(--azul);color:var(--texto)}
.rol i{width:48px;height:48px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center}
.rol b{display:block;font-size:17px}.rol small{display:block;font-size:14px;color:var(--suave)}
.casilla{display:flex;align-items:flex-start;gap:12px;border:none;background:transparent;padding:0;cursor:pointer;font:inherit;font-size:14px;color:var(--texto);text-align:left;line-height:1.5}
.cuadro{width:24px;height:24px;flex-shrink:0;border-radius:6px;border:2px solid var(--borde);background:var(--tarjeta);display:flex;align-items:center;justify-content:center}
.casilla[aria-pressed="true"] .cuadro{border-color:var(--boton);background:var(--boton)}
.casilla[aria-pressed="false"] .cuadro svg{display:none}
.sub{font-size:13px;color:var(--suave);margin-top:-10px}
[hidden]{display:none!important}
@media (max-width:860px){
  .marca{flex-basis:100%;padding:24px 20px;gap:12px}
  .ventajas,.pie{display:none}
  .marca h1{font-size:24px}
  .lado{align-items:flex-start;padding:28px 20px 40px}
}

.btn[disabled]{opacity:.7;cursor:progress}
.cargando{display:flex;align-items:center;justify-content:center;min-height:100%;padding:40px;color:var(--suave);font-size:16px}
/* Página de inicio provisional */
.inicio{max-width:720px;margin:0 auto;padding:28px clamp(16px,4vw,32px) 48px;display:flex;flex-direction:column;gap:18px}
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.barra .logo{color:var(--texto)}.barra .logo-txt span{color:var(--suave)}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px}
.tarjeta h2{margin:0;font-size:20px;font-weight:800}
.tarjeta p{margin:0;font-size:15px;line-height:1.55;color:var(--medio)}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cifra{background:var(--fondo);border:1px solid var(--linea);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.cifra b{font-size:24px;font-weight:800}.cifra span{font-size:13px;color:var(--suave)}
.roles-cambio{display:flex;background:var(--nota);border-radius:12px;padding:4px;gap:4px}
.roles-cambio button{flex:1;height:44px;border:none;border-radius:9px;background:transparent;color:var(--texto);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.roles-cambio button[aria-pressed="true"]{background:var(--tarjeta);font-weight:800;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.etiqueta{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 10px;border-radius:10px;background:var(--ok-fondo);color:var(--ok)}
.etiqueta.alerta{background:#FFF4CF;color:#6B5410}
.btn-salir{height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--borde);background:var(--tarjeta);color:var(--texto);font:inherit;font-size:14px;font-weight:600;cursor:pointer}