/* Planilla de Ruta — capa visual
   Movil primero. La pantalla de marcacion manda: botones grandes, un toque,
   nada que se pueda tocar por error con el bus en movimiento. */

:root{
  --paper:#F5F4F1; --surface:#FFFFFF; --surface-2:#FAF9F6;
  --ink:#191C21; --ink-2:#3D424A; --muted:#6C7076;
  --line:#DFDDD7; --line-2:#EBE9E4;
  --amber:#E8A906; --amber-ink:#7A5300; --amber-soft:#FBF0D2;
  --ok:#2C6E4E; --ok-soft:#E3F0E8;
  --warn:#B4700C; --warn-soft:#FAEEDA;
  --crit:#A83A2E; --crit-soft:#F7E4E1;
  --info:#2A5B8C; --info-soft:#E2ECF5;
  --sombra:0 1px 2px rgba(25,28,33,.05), 0 8px 24px -16px rgba(25,28,33,.3);
  --r:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --paper:#15171B; --surface:#1D2026; --surface-2:#22262C;
    --ink:#E8E8E6; --ink-2:#C2C4C7; --muted:#93969B;
    --line:#2E323A; --line-2:#272B32;
    --amber:#F5BC2E; --amber-ink:#F5BC2E; --amber-soft:#2C2410;
    --ok:#6FBF92; --ok-soft:#1B2E24;
    --warn:#E0A64A; --warn-soft:#2E2417;
    --crit:#E28579; --crit-soft:#301E1B;
    --info:#7FB0DC; --info-soft:#18232E;
    --sombra:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, system-ui, sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:"Archivo", system-ui, sans-serif; margin:0; letter-spacing:-.015em; text-wrap:balance}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--amber-ink)}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:var(--r)}
[hidden]{display:none !important}

/* ------------------------------------------------------------ estructura */
.app{min-height:100dvh; display:flex; flex-direction:column}
.contenido{flex:1; padding:16px; max-width:1180px; width:100%; margin:0 auto}
@media (min-width:900px){ .contenido{padding:24px 28px} }

.barra{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); padding:10px 16px;
  display:flex; align-items:center; gap:12px; min-height:56px;
}
.barra .titulo{font-family:"Archivo"; font-weight:600; font-size:17px; line-height:1.2; flex:1; min-width:0}
.barra .titulo small{display:block; font-family:"IBM Plex Sans"; font-weight:400; font-size:12px; color:var(--muted)}
.franja{height:5px; background:repeating-linear-gradient(115deg, var(--amber) 0 14px, var(--ink) 14px 28px)}

.volver{
  background:none; border:0; padding:8px; margin-left:-8px; cursor:pointer;
  color:var(--ink); display:flex; align-items:center; font-size:22px; line-height:1;
}

/* ------------------------------------------------------------ navegacion */
nav.tabs{
  position:sticky; bottom:0; z-index:40; display:flex; background:var(--surface);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
nav.tabs a{
  flex:1; text-align:center; padding:9px 2px 8px; font-size:10.5px; text-decoration:none;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:"Archivo"; font-weight:500; letter-spacing:.02em;
}
nav.tabs a i{font-style:normal; font-size:19px; line-height:1}
nav.tabs a.on{color:var(--amber-ink)}
nav.tabs a.on i{filter:drop-shadow(0 0 0 currentColor)}
@media (min-width:900px){
  nav.tabs{
    position:fixed; left:0; top:0; bottom:0; width:196px; flex-direction:column;
    border-top:0; border-right:1px solid var(--line); padding-top:64px; gap:1px;
  }
  nav.tabs a{flex:none; flex-direction:row; justify-content:flex-start; gap:11px;
    padding:9px 18px; font-size:13.5px; text-align:left; border-left:2px solid transparent}
  nav.tabs a.on{background:var(--surface-2); border-left-color:var(--amber)}
  /* El hueco de la barra lateral va como padding del contenedor: con
     margin-left en los hijos, su width:100% se sumaba y desbordaba a lo ancho. */
  .app.con-nav{padding-left:196px}
}

/* ------------------------------------------------------------ componentes */
.tarjeta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px}
.tarjeta + .tarjeta{margin-top:12px}
.pila{display:flex; flex-direction:column; gap:12px}
.fila{display:flex; align-items:center; gap:10px}
.fila.entre{justify-content:space-between}
.crece{flex:1; min-width:0}
.rejilla{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:700px){ .rejilla.dos{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .rejilla.tres{grid-template-columns:repeat(3,1fr)} }

.et{font-family:"Archivo"; font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.dato{font-family:"Archivo"; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.tenue{color:var(--muted); font-size:13.5px}
.sec{margin:26px 0 12px; display:flex; align-items:baseline; gap:10px}
.sec h2{font-size:19px; font-weight:600}
.sec .tenue{font-size:13px}

.chip{display:inline-flex; align-items:center; gap:5px; font-family:"Archivo"; font-size:10.5px;
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px;
  border-radius:2px; white-space:nowrap}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.crit{background:var(--crit-soft); color:var(--crit)}
.chip.info{background:var(--info-soft); color:var(--info)}
.chip.amb{background:var(--amber-soft); color:var(--amber-ink)}
.chip.gris{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}

/* ------------------------------------------------------------ botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 16px; font-family:"Archivo"; font-weight:600;
  font-size:14.5px; cursor:pointer; min-height:44px; text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.principal{background:var(--amber); border-color:var(--amber); color:#1A1405}
.btn.principal:hover{filter:brightness(1.05)}
.btn.grande{width:100%; min-height:56px; font-size:17px}
.btn.chico{min-height:36px; padding:6px 11px; font-size:13px}
.btn.peligro{color:var(--crit); border-color:var(--crit)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-fila{display:flex; gap:8px; flex-wrap:wrap}

/* ------------------------------------------------------------ formularios */
label.campo{display:block; margin-bottom:12px}
label.campo > span{display:block; font-family:"Archivo"; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
input,select,textarea{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:11px 12px; min-height:46px; font-size:16px;
}
input:focus,select:focus,textarea:focus{border-color:var(--amber); outline:none}
textarea{min-height:80px; resize:vertical}
.campos-2{display:grid; gap:0 12px; grid-template-columns:1fr}
@media (min-width:600px){ .campos-2{grid-template-columns:1fr 1fr} }

/* ------------------------------------------------------------ tablas */
.tabla-cont{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sombra)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14px}
th{font-family:"Archivo"; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 13px;
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:10px 13px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:top}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums; text-align:right}
th.num{text-align:right}
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover{background:var(--surface-2)}

/* ------------------------------------------------------------ login */
.login{min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding:24px; max-width:420px; margin:0 auto}
.login .marca{text-align:center; margin-bottom:26px}
.login .marca .bus{font-size:40px; line-height:1}
.login .marca h1{font-size:27px; margin-top:8px}
.login .marca p{color:var(--muted); font-size:14px; margin:5px 0 0}
.selector{display:flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:3px; margin-bottom:18px}
.selector button{flex:1; background:none; border:0; padding:10px; border-radius:2px;
  font-family:"Archivo"; font-weight:600; font-size:14px; color:var(--muted); cursor:pointer}
.selector button.on{background:var(--surface); color:var(--ink); box-shadow:var(--sombra)}
.pin{letter-spacing:.6em; text-align:center; font-size:26px !important; font-family:"IBM Plex Mono"}

/* ------------------------------------------------- marcacion (lo importante) */
.progreso{position:sticky; top:56px; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--line); padding:10px 16px}
.progreso .cuenta{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.progreso .n{font-family:"Archivo"; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}
.progreso .barra-p{height:5px; background:var(--line-2); border-radius:3px; margin-top:7px; overflow:hidden}
.progreso .barra-p i{display:block; height:100%; background:var(--amber); transition:width .25s ease}

.ninos{display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-bottom:88px}
.nino{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sombra); display:flex; align-items:stretch; overflow:hidden;
  transition:border-color .15s ease;
}
.nino .orden{width:34px; flex:none; background:var(--surface-2); display:flex;
  align-items:center; justify-content:center; font-family:"Archivo"; font-weight:700;
  font-size:13px; color:var(--muted); border-right:1px solid var(--line-2)}
.nino .info{flex:1; min-width:0; padding:11px 12px; cursor:pointer}
.nino .nom{font-family:"Archivo"; font-weight:600; font-size:15.5px; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nino .sub{font-size:12.5px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nino .accion{flex:none; display:flex; align-items:center; padding:8px 10px 8px 0}
.nino .marcar{
  min-width:96px; min-height:48px; border-radius:var(--r); border:1.5px solid var(--line);
  background:var(--surface-2); font-family:"Archivo"; font-weight:700; font-size:13px;
  color:var(--muted); cursor:pointer; padding:4px 8px; line-height:1.15;
}
.nino.marcado-ok{border-color:var(--ok)}
.nino.marcado-ok .marcar{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.nino.marcado-warn{border-color:var(--warn)}
.nino.marcado-warn .marcar{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.nino.marcado-crit{border-color:var(--crit)}
.nino.marcado-crit .marcar{background:var(--crit-soft); border-color:var(--crit); color:var(--crit)}
.nino .alerta{display:inline-block; margin-top:3px; font-size:11px; color:var(--crit); font-weight:600}

.pie-fijo{
  position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surface);
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:9px;
}
@media (min-width:900px){ .app.con-nav .pie-fijo{left:196px} }

/* ------------------------------------------------------------ hoja modal */
.velo{position:fixed; inset:0; background:rgba(10,12,15,.5); z-index:60;
  display:flex; align-items:flex-end; justify-content:center; animation:aparecer .15s ease}
@media (min-width:700px){ .velo{align-items:center} }
.hoja{background:var(--surface); width:100%; max-width:560px; max-height:88dvh; overflow-y:auto;
  border-radius:14px 14px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  animation:subir .2s cubic-bezier(.2,.8,.3,1)}
@media (min-width:700px){ .hoja{border-radius:var(--r); max-height:84dvh} }
.hoja h3{font-size:19px; margin-bottom:4px}
.hoja .cerrar{position:absolute; right:14px; top:14px}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes subir{from{transform:translateY(24px); opacity:.4}to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .velo,.hoja{animation:none} }

.opciones{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.opcion{display:flex; align-items:center; gap:12px; padding:14px; border:1.5px solid var(--line);
  border-radius:var(--r); background:var(--surface); cursor:pointer; text-align:left; width:100%;
  font-family:"Archivo"; font-weight:600; font-size:15.5px; min-height:56px}
.opcion:hover{background:var(--surface-2)}
.opcion .punto{width:12px; height:12px; border-radius:50%; flex:none}
.opcion.ok .punto{background:var(--ok)}     .opcion.ok:hover{border-color:var(--ok)}
.opcion.info .punto{background:var(--info)} .opcion.info:hover{border-color:var(--info)}
.opcion.warn .punto{background:var(--warn)} .opcion.warn:hover{border-color:var(--warn)}
.opcion.crit .punto{background:var(--crit)} .opcion.crit:hover{border-color:var(--crit)}
.opcion small{display:block; font-family:"IBM Plex Sans"; font-weight:400; font-size:12.5px; color:var(--muted)}

/* ------------------------------------------------------------ avisos */
.aviso{border-radius:var(--r); padding:12px 14px; font-size:14px; display:flex; gap:10px; align-items:flex-start}
.aviso.err{background:var(--crit-soft); color:var(--crit)}
.aviso.bien{background:var(--ok-soft); color:var(--ok)}
.aviso.ojo{background:var(--warn-soft); color:var(--warn)}
.aviso.dato{background:var(--info-soft); color:var(--info)}

.sin-senal{background:var(--warn-soft); color:var(--warn); font-family:"Archivo"; font-weight:600;
  font-size:12.5px; padding:7px 16px; text-align:center; letter-spacing:.02em}

.brindis{position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:80;
  background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:100px;
  font-size:14px; font-weight:500; box-shadow:0 8px 28px -8px rgba(0,0,0,.5); max-width:88vw}

.vacio{text-align:center; padding:44px 20px; color:var(--muted)}
.vacio .icono{font-size:38px; opacity:.5}
.vacio p{margin:10px 0 0; font-size:14.5px}

.cargando{text-align:center; padding:40px; color:var(--muted); font-size:14px}