/* App de inspectores · Zona Colonial
   Colores del semáforo iguales a los del tablero madre. Fondo claro de alto contraste para leer al sol. */
:root{
  --marino:#12202F;
  --azul:#3B599F;
  --rojo:#C0392B;
  --ambar:#FBC13F;
  --verde:#6CAC5E;
  --gris:#8B96A3;
  --fondo:#EEF1F4;
  --hoja:#FFFFFF;
  --texto:#12202F;
  --suave:#56657A;
  --linea:#D6DDE5;
  --rojo-fondo:#FBE7E4;
  --ambar-fondo:#FFF4D6;
  --verde-fondo:#E6F2E2;
  --ambar-texto:#7A5600;
  --enfoque:#3B599F;
  --sombra:0 1px 2px rgba(18,32,47,.08), 0 4px 14px rgba(18,32,47,.06);
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --base:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#0E1823;
    --hoja:#17283A;
    --texto:#EAF0F6;
    --suave:#A3B1C2;
    --linea:#2A3D52;
    --rojo-fondo:#3A1C1A;
    --ambar-fondo:#3A3018;
    --verde-fondo:#1D3320;
    --ambar-texto:#FBC13F;
    --enfoque:#8FB0F0;
    --sombra:none;
    color-scheme:dark;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:16px/1.45 var(--base);
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
}
button, input, select, textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--enfoque); outline-offset:2px; }
[hidden]{ display:none !important; }
svg{ width:24px; height:24px; }

/* ---------- barra superior ---------- */
.barra{
  background:var(--marino); color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 16px 14px;
}
.barra-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hola{ margin:0; font:600 22px/1.15 var(--cond); letter-spacing:.2px; }
.corte{ margin:2px 0 0; font-size:13px; color:#B9C7D6; }
.btn-icono{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; flex:none;
}
.btn-icono.girando svg{ animation:girar .9s linear infinite; }
.barra-botones{ display:flex; gap:8px; }
/* pantalla de entrada con clave */
.entrada{ max-width:420px; margin:28px auto 0; }
.entrada h2{ font-size:26px; margin-bottom:6px; }
.entrada p{ color:var(--suave); margin:0 0 18px; }
.entrada input{
  width:100%; height:56px; border-radius:12px; border:2px solid var(--linea); background:var(--hoja);
  padding:0 14px; font:600 20px/1 var(--base); letter-spacing:.5px; text-transform:uppercase;
}
.entrada input:focus{ border-color:var(--azul); }
.entrada .ayuda{ font-size:14px; margin-top:14px; }
/* registro de entradas */
.reg{ background:var(--hoja); border:1px solid var(--linea); border-left:5px solid var(--verde); border-radius:10px; padding:10px 12px; }
.reg.fallo{ border-left-color:var(--rojo); }
.reg .cab{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--suave); }
.reg b{ display:block; margin:2px 0; overflow-wrap:anywhere; }
.reg span.det{ font-size:14px; color:var(--suave); overflow-wrap:anywhere; }
@keyframes girar{ to{ transform:rotate(360deg); } }
.selector{ display:flex; align-items:center; gap:10px; margin-top:12px; font-size:14px; color:#B9C7D6; }
.selector select{
  flex:1; min-width:0; height:42px; border-radius:10px; border:0; padding:0 12px;
  background:#22364C; color:#fff; font-weight:600;
}
.prueba{ margin:10px 0 0; font-size:12.5px; background:#22364C; color:#FBC13F; border-radius:8px; padding:6px 10px; }

main{ padding:16px; max-width:640px; margin:0 auto; outline:none; }
h2{ font:700 21px/1.2 var(--cond); margin:24px 0 10px; letter-spacing:.2px; }
h2:first-child{ margin-top:4px; }
.nota{ color:var(--suave); font-size:14px; margin:-4px 0 12px; }

/* ---------- semáforo de Inicio (lo memorable de la app) ---------- */
.semaforo{
  background:var(--marino); border-radius:18px; padding:10px; display:grid; gap:8px;
  box-shadow:var(--sombra);
}
.franja{
  display:flex; align-items:center; gap:14px; border-radius:12px; padding:10px 16px 10px 12px;
  border:0; width:100%; text-align:left; cursor:pointer; color:var(--marino);
}
.franja .luz{ width:20px; height:20px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 3px rgba(255,255,255,.55); }
.franja .num{ font:700 52px/1 var(--cond); min-width:64px; font-variant-numeric:tabular-nums; }
.franja .txt{ font-weight:600; font-size:17px; line-height:1.2; }
.franja .txt small{ display:block; font-weight:500; font-size:13.5px; opacity:.8; }
.franja.rojo{ background:var(--rojo); color:#fff; }
.franja.rojo .luz{ background:#fff; box-shadow:none; opacity:.9; }
.franja.ambar{ background:var(--ambar); }
.franja.ambar .luz{ background:var(--marino); box-shadow:none; opacity:.85; }
.franja.verde{ background:var(--verde); color:#0F2A0B; }
.franja.verde .luz{ background:#fff; box-shadow:none; opacity:.9; }
.franja.cero{ filter:saturate(.25); opacity:.55; }
.semaforo-pie{ color:#B9C7D6; font-size:13px; padding:2px 6px 4px; }

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.dato{
  background:var(--hoja); border-radius:14px; padding:12px 14px; border:1px solid var(--linea);
  text-align:left; cursor:pointer; width:100%;
}
.dato b{ display:block; font:700 34px/1 var(--cond); font-variant-numeric:tabular-nums; }
.dato span{ font-size:14px; color:var(--suave); }
.dato.par b{ color:var(--rojo); }

/* ---------- listas de trabajos ---------- */
.lista{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.item{
  display:grid; grid-template-columns:6px 1fr auto; gap:0 12px; align-items:stretch;
  background:var(--hoja); border-radius:12px; border:1px solid var(--linea);
  padding:0; width:100%; text-align:left; cursor:pointer; overflow:hidden; box-shadow:var(--sombra);
}
.item .borde{ background:var(--gris); }
.item.rojo .borde{ background:var(--rojo); }
.item.ambar .borde{ background:var(--ambar); }
.item.verde .borde{ background:var(--verde); }
.item.azul .borde{ background:var(--azul); }
.item .cuerpo{ padding:11px 0; min-width:0; }
.item .titulo, .item .sub{ display:block; }
.item .titulo{ font-weight:600; font-size:16px; line-height:1.25; overflow-wrap:anywhere; }
.item .sub{ font-size:13.5px; color:var(--suave); margin-top:2px; overflow-wrap:anywhere; }
/* semáforo de maniobra / TP en palabras, en su propia línea */
.plazo{
  display:block; text-align:center; border-radius:10px; padding:5px 9px; min-width:96px;
  font-size:13.5px; font-weight:700; line-height:1.15; background:var(--linea); color:var(--texto);
}
.plazo small{ display:block; font-size:11.5px; font-weight:600; opacity:.85; }
.plazo.rojo{ background:var(--rojo-fondo); color:var(--rojo); }
.plazo.ambar{ background:var(--ambar-fondo); color:var(--ambar-texto); }
.plazo.verde{ background:var(--verde-fondo); color:#3E7A31; }
@media (prefers-color-scheme: dark){ .plazo.rojo{ color:#FF9C90; } .plazo.verde{ color:#9BD48C; } }
.pill{ white-space:normal; }
.item .lado{ padding:11px 12px 11px 0; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; text-align:right; }
.dias{ font:700 20px/1 var(--cond); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dias small{ display:block; font:500 12px/1.2 var(--base); color:var(--suave); }
.item.rojo .dias{ color:var(--rojo); }
.item.ambar .dias{ color:var(--ambar-texto); }

.pill{
  display:inline-block; font-size:12.5px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap;
  background:var(--linea); color:var(--texto);
}
.pill.rojo{ background:var(--rojo-fondo); color:var(--rojo); }
.pill.ambar{ background:var(--ambar-fondo); color:var(--ambar-texto); }
.pill.verde{ background:var(--verde-fondo); color:#3E7A31; }
@media (prefers-color-scheme: dark){ .pill.verde{ color:#9BD48C; } .pill.rojo{ color:#FF9C90; } }
.pill.reportado{ background:var(--azul); color:#fff; }

.vacio{
  background:var(--hoja); border:1px dashed var(--linea); border-radius:12px; padding:18px; color:var(--suave);
  font-size:15px; text-align:center;
}
.mas{ margin-top:10px; width:100%; height:44px; border-radius:10px; border:1px solid var(--linea); background:transparent; font-weight:600; cursor:pointer; }

/* ---------- buscador y filtros ---------- */
.buscar{ position:relative; margin-bottom:10px; }
.buscar svg{ position:absolute; left:12px; top:12px; width:22px; height:22px; color:var(--suave); fill:none; stroke:currentColor; stroke-width:2; }
.buscar input{
  width:100%; height:48px; border-radius:12px; border:1px solid var(--linea); background:var(--hoja);
  padding:0 14px 0 42px; font-size:16px;
}
.chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
.chip{
  flex:none; height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--linea); background:var(--hoja);
  font-weight:600; font-size:14.5px; cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--marino); color:#fff; border-color:var(--marino); }
@media (prefers-color-scheme: dark){ .chip[aria-pressed="true"]{ background:#EAF0F6; color:#12202F; border-color:#EAF0F6; } }
.chip b{ font-variant-numeric:tabular-nums; margin-left:4px; opacity:.75; }

/* pestañas Maniobras | TP */
.segmento{ display:grid; grid-template-columns:1fr 1fr; background:var(--linea); border-radius:12px; padding:4px; margin-bottom:6px; }
.segmento button{ height:42px; border:0; border-radius:9px; background:transparent; font-weight:700; font-size:16px; cursor:pointer; }
.segmento button[aria-selected="true"]{ background:var(--hoja); box-shadow:var(--sombra); }

/* grupos por semáforo */
.grupo{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; margin:14px 0 8px; }
.grupo i{ width:12px; height:12px; border-radius:50%; background:var(--gris); }
.grupo.rojo i{ background:var(--rojo); } .grupo.ambar i{ background:var(--ambar); } .grupo.verde i{ background:var(--verde); }
.grupo span{ color:var(--suave); font-weight:500; }

/* ---------- barra inferior ---------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  display:flex; background:var(--hoja); border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{
  flex:1; min-width:0; border:0; background:transparent; cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 9px; color:var(--suave);
  font-size:12px; font-weight:600; line-height:1.1;
}
.tabs svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
.tabs button[aria-current="page"]{ color:var(--azul); }
@media (prefers-color-scheme: dark){ .tabs button[aria-current="page"]{ color:#8FB0F0; } }
.tabs button[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:currentColor;
}
.badge{
  position:absolute; top:4px; left:calc(50% + 6px); min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:var(--rojo); color:#fff; font-size:12px; line-height:20px; text-align:center;
}
.btn-icono svg, .hoja-cerrar svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* ---------- hoja inferior (detalle y reporte) ---------- */
.hoja-fondo{ position:fixed; inset:0; background:rgba(10,18,28,.5); z-index:9; }
.hoja{
  position:fixed; left:0; right:0; bottom:0; z-index:10; max-height:92vh; overflow-y:auto;
  background:var(--hoja); border-radius:20px 20px 0 0; padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  max-width:640px; margin:0 auto; animation:subir .22s ease-out;
}
@keyframes subir{ from{ transform:translateY(40px); } }
@media (prefers-reduced-motion: reduce){ .hoja{ animation:none; } .btn-icono.girando svg{ animation:none; } }
.hoja-asa{ width:44px; height:5px; border-radius:3px; background:var(--linea); margin:0 auto 6px; }
.hoja-cerrar{
  position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:50%; border:0;
  background:transparent; color:var(--suave); display:grid; place-items:center; cursor:pointer;
}
.hoja h3{ font:700 24px/1.15 var(--cond); margin:8px 48px 4px 0; overflow-wrap:anywhere; }
.hoja .sub{ color:var(--suave); font-size:14.5px; margin:0 0 12px; }
.ficha{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:14px 0; font-size:15px; }
.ficha dt{ color:var(--suave); }
.ficha dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.texto-largo{ background:var(--fondo); border-radius:10px; padding:10px 12px; font-size:15px; margin:6px 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.etq{ font-size:14px; color:var(--suave); margin:14px 0 4px; font-weight:600; }

/* formulario de reporte */
.pregunta{ font:700 20px/1.2 var(--cond); margin:18px 0 10px; }
.opciones{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opcion{
  height:54px; border-radius:12px; border:2px solid var(--linea); background:transparent; font-weight:700; font-size:17px; cursor:pointer;
}
.opcion[aria-pressed="true"]{ border-color:var(--azul); background:var(--azul); color:#fff; }
.campo{ display:block; margin-top:14px; }
.campo span{ display:block; font-weight:600; font-size:15px; margin-bottom:6px; }
.campo span em{ font-style:normal; font-weight:500; color:var(--suave); }
.campo input, .campo textarea{
  width:100%; border-radius:10px; border:1px solid var(--linea); background:var(--fondo); padding:12px; font-size:16px;
}
.campo input{ height:50px; }
.campo textarea{ min-height:96px; resize:vertical; }
.error{ color:var(--rojo); font-weight:600; font-size:14.5px; margin:10px 0 0; }
@media (prefers-color-scheme: dark){ .error{ color:#FF9C90; } }
.btn{
  display:block; width:100%; height:54px; border-radius:12px; border:0; margin-top:18px;
  background:var(--marino); color:#fff; font-weight:700; font-size:17px; cursor:pointer;
}
@media (prefers-color-scheme: dark){ .btn{ background:#EAF0F6; color:#12202F; } }
.btn:disabled{ opacity:.5; }
.btn.secundario{ background:transparent; color:var(--texto); border:1px solid var(--linea); }
.reporte-hecho{ background:var(--fondo); border-left:4px solid var(--azul); border-radius:8px; padding:10px 12px; margin:12px 0; font-size:15px; }

/* reportes recibidos */
.rep{ background:var(--hoja); border:1px solid var(--linea); border-radius:12px; padding:12px 14px; }
.rep .cab{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--suave); }
.rep .que{ font-weight:600; margin:4px 0 2px; overflow-wrap:anywhere; }
.rep p{ margin:4px 0 0; font-size:14.5px; overflow-wrap:anywhere; }

.aviso-toast{
  position:fixed; left:16px; right:16px; bottom:calc(86px + env(safe-area-inset-bottom)); z-index:20;
  background:var(--marino); color:#fff; border-radius:12px; padding:13px 16px; font-weight:600; text-align:center;
  max-width:480px; margin:0 auto; box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.carga{ text-align:center; color:var(--suave); padding:40px 0; }