:root { --acento:#F26B1D; --acento-osc:#D2560D; --acento-suave:#FFF1E8; --fondo:#F6F7F9; --tarjeta:#fff; --texto:#1C2230; --texto-2:#5B6475; --linea:#E4E7EC; --ok:#16A34A; --alerta:#DC2626; --radio:14px; --sombra:0 2px 10px rgba(20,30,50,.07); }
html[data-tema="verde"]{--acento:#1FA84A;--acento-osc:#168038;--acento-suave:#E7F7EC} html[data-tema="morado"]{--acento:#7C3AED;--acento-osc:#5F22CC;--acento-suave:#F1EAFE} html[data-tema="celeste"]{--acento:#00B4EC;--acento-osc:#0090C2;--acento-suave:#E2F7FE} html[data-tema="marino"]{--acento:#041535;--acento-osc:#020A24;--acento-suave:#E8ECF5}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} [hidden]{display:none !important} html,body{margin:0;min-height:100%}
body{font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto)}
button{font:inherit;color:inherit;background:var(--tarjeta);border:0;border-radius:12px;cursor:pointer} button:active{transform:translateY(1px)} button:disabled{opacity:.45;cursor:default}
input,select{font:inherit;padding:.6em .8em;border:1px solid var(--linea);border-radius:10px;background:#fff;width:100%}
.muted{color:var(--texto-2)} .error{color:var(--alerta);min-height:1.2em;font-size:.9em} .flex1{flex:1}
header.cab{display:flex;align-items:center;gap:.8em;padding:.6em 1.2em;background:var(--tarjeta);box-shadow:var(--sombra);position:sticky;top:0;z-index:2}
header.cab .marca{display:flex;align-items:center;gap:.6em;font-weight:700;white-space:nowrap} header.cab .marca img{height:2.2em;border-radius:8px}
header.cab .poweredby{display:flex;align-items:center;gap:.4em;padding-left:.8em;border-left:1px solid var(--linea);color:var(--texto-2)} .poweredby small{font-size:.7em;line-height:1;white-space:nowrap} .poweredby img{height:2em}
.pill{display:inline-block;padding:.3em .8em;border-radius:999px;background:var(--acento-suave);color:var(--acento-osc);font-weight:600;font-size:.85em;white-space:nowrap} .pill.gris{background:#EEF0F4;color:var(--texto-2)} .pill.ok{background:#E7F7EC;color:#0F7A33} .pill.mal{background:#FDECEC;color:#B91C1C}
.btn{padding:.6em 1.1em;background:#F1F3F6;font-weight:700;white-space:nowrap} .btn.primario{background:var(--acento);color:#fff} .btn.primario:active{background:var(--acento-osc)} .btn.chico{padding:.35em .7em;font-size:.85em} .btn.peligro{color:var(--alerta)}
main.pagina{max-width:1100px;margin:0 auto;padding:1.2em}
h1{font-size:1.5em;margin:.2em 0 .2em} h2{font-size:1.1em;margin:1.2em 0 .5em} .sub{font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2);margin:1em 0 .5em}
.tarjeta{background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);padding:1em 1.2em}
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8em}
.ficha{position:relative;text-align:left;padding:1em;border-radius:var(--radio);box-shadow:var(--sombra);min-height:7.4em;display:flex;flex-direction:column;gap:.35em;border-left:6px solid var(--acento)}
.ficha .ico{font-size:1.7em;line-height:1} .ficha .nom{font-weight:700;font-size:1.02em} .ficha .mod{font-size:.75em;color:var(--texto-2)}
.ficha.off{border-left-color:var(--linea);background:#FAFBFC;color:var(--texto-2);box-shadow:none;cursor:default} .ficha.off .motivo{font-size:.75em;color:#B91C1C;font-weight:600} .ficha.off .ico{filter:grayscale(1);opacity:.5}
.fila{display:flex;align-items:center;gap:.8em;padding:.7em 0;border-bottom:1px solid var(--linea)} .fila:last-child{border-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:.35em} .chip{padding:.25em .6em;border-radius:999px;background:var(--acento-suave);color:var(--acento-osc);font-size:.78em;font-weight:700} .chip.gris{background:#EEF0F4;color:var(--texto-2)}
.modal{border:0;border-radius:20px;padding:1.4em 1.6em;width:min(92vw,460px);box-shadow:0 20px 60px rgba(0,0,0,.25)} .modal::backdrop{background:rgba(20,30,50,.45)} .modal h2{margin:0 0 .4em;font-size:1.25em} .modal label{display:block;margin:.6em 0;font-weight:600;font-size:.9em} .modal input{margin-top:.3em} .modal-botones{display:flex;gap:.6em;justify-content:flex-end;margin-top:1em}
.codigo-grande{font-size:3.2em;font-weight:800;letter-spacing:.18em;text-align:center;font-variant-numeric:tabular-nums;margin:.2em 0;color:var(--acento-osc)}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;max-width:320px;margin:.6em auto} .teclado button{height:3em;font-size:1.2em;font-weight:700;background:var(--fondo);border:1px solid var(--linea)} .teclado button.fn{font-size:.85em;background:#EEF0F4} .teclado button.ok{background:var(--acento);color:#fff;border-color:transparent}
.puntos{display:flex;justify-content:center;gap:.6em;height:1.6em;margin:.5em 0} .puntos i{width:.95em;height:.95em;border-radius:50%;background:var(--linea)} .puntos i.on{background:var(--acento)}
.check{display:flex;align-items:flex-start;gap:.6em;padding:.5em 0;border-bottom:1px solid var(--linea)} .check input{width:auto;margin-top:.3em} .check.off{opacity:.55}
.tabs{display:flex;gap:.4em;margin:.6em 0 1em} .tabs button{flex:1;padding:.6em;background:var(--fondo);border:1px solid var(--linea);font-weight:700} .tabs button.activa{background:var(--acento);color:#fff;border-color:transparent}
.switch{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.8em 0;border-bottom:1px solid var(--linea)} .switch:last-child{border-bottom:0} .switch .nombre{font-weight:700} .switch .desc{font-size:.8em;color:var(--texto-2)} .switch .ctl{display:flex;align-items:center;gap:.6em;white-space:nowrap} .switch input[type=number]{width:5.5em;padding:.4em .5em}
.sw{position:relative;width:3em;height:1.7em;appearance:none;background:#D6DAE1;border-radius:999px;cursor:pointer;transition:.2s;margin:0;padding:0;border:0} .sw::after{content:"";position:absolute;top:.15em;left:.15em;width:1.4em;height:1.4em;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .sw:checked{background:var(--ok)} .sw:checked::after{left:1.45em}
.centro{max-width:520px;margin:5vh auto;padding:0 1em} .centro .tarjeta{padding:1.6em 1.8em}
.vincular-logo{text-align:center;margin-bottom:.8em} .vincular-logo img{height:84px}
#aviso{position:fixed;left:50%;bottom:1.2em;transform:translateX(-50%) translateY(20px);background:#1C2230;color:#fff;padding:.7em 1.2em;border-radius:12px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:20} #aviso.on{opacity:1;transform:translateX(-50%)}
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8em;margin:.6em 0 1em} .kpi{background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);padding:.8em 1em} .kpi b{display:block;font-size:1.5em} .kpi span{font-size:.8em;color:var(--texto-2)}

/* ── Celular (vertical) ── */
html,body{overflow-x:hidden;max-width:100vw}
@media (max-width:700px){
  header.cab{flex-wrap:wrap;gap:.5em .6em;padding:.6em .8em}
  header.cab .marca{flex:1 1 100%;min-width:0;white-space:normal;font-size:1em}
  header.cab .marca img{height:1.8em}
  header.cab .poweredby{display:none}
  header.cab .flex1{display:none}
  header.cab .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  header.cab .btn{padding:.5em .8em;font-size:.85em}
  main.pagina{padding:.9em}
  h1{font-size:1.25em}
  .fichas{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em} .ficha{min-width:0}
  .ficha{padding:.8em;min-height:6.4em} .ficha .ico{font-size:1.5em} .ficha .nom{font-size:.95em}
  .fila{flex-wrap:wrap;gap:.5em} .fila>div:first-child{min-width:0!important;flex:1 1 100%}
  .resumen{grid-template-columns:repeat(3,1fr);gap:.5em} .kpi{padding:.6em .7em} .kpi b{font-size:1.2em} .kpi span{font-size:.72em}
  .modal{width:min(96vw,460px);padding:1.1em 1.1em}
  .codigo-grande{font-size:2.4em;letter-spacing:.12em}
  .centro{margin:2vh auto} .centro .tarjeta{padding:1.2em 1.1em} .vincular-logo img{height:64px}
  .switch{flex-wrap:wrap} .switch .ctl{flex-wrap:wrap}
}