/* CIVD · Control de Inventario Valenzuela & Delarze
   Mismo sistema visual que la Calculadora SNVD y Prestamo: azul profundo de marca,
   tarjetas blancas con sombra suave, cabecera con degradado, splash propio con la sigla.
   El color PROPIO de CIVD es el VERDE (SN = rojo, PV = azul): splash, sigla e icono.
   Dentro de la app el verde tambien significa "encontrado", que es la buena noticia. */
:root{
  --tinta:#0d1b2a;
  --tinta-2:#1b3a5c;
  --acento:#1257c7;
  --acento-claro:#e8f0fe;
  --marca:#127a47;          /* verde CIVD */
  --marca-2:#0c5c35;
  --papel:#eef1f6;
  --card:#fff;
  --linea:#dde3ec;
  --linea-fuerte:#c3ccdb;
  --campo-borde:#8aafe6;
  --gris:#5a6b82;
  --gris-claro:#8695ab;
  --ok:#0a7d4a;
  --ok-bg:#e6f5ed;
  --mal:#c0362c;
  --mal-bg:#fdf0ee;
  --warn:#8a5200;
  --warn-bg:#fff6e3;
  --warn-borde:#f0b429;
  --radio:16px;
  --sombra:0 1px 2px rgba(13,27,42,.06), 0 4px 14px rgba(13,27,42,.06);
  --sombra-alta:0 2px 4px rgba(13,27,42,.08), 0 10px 28px rgba(13,27,42,.12);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;color:var(--tinta);
  background:
    radial-gradient(1100px 420px at 50% -160px, #dbe5f5 0%, rgba(219,229,245,0) 70%),
    var(--papel);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;padding-bottom:130px;
  font-variant-numeric:tabular-nums;
}

/* ---------- splash propio ---------- */
#splash{
  position:fixed;inset:0;z-index:50;background:var(--marca);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:opacity .35s ease;text-align:center;padding:24px;
}
#splash.yendose{opacity:0;pointer-events:none}
.sigla-grande{font-size:52px;font-weight:800;line-height:.95;letter-spacing:-1.5px;margin-bottom:18px}
#splash .nombre{font-size:20px;font-weight:700;letter-spacing:-.3px}
#splash .casa{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;
  color:rgba(255,255,255,.82);margin-top:4px}

/* ---------- que se ve segun la sesion (igual que la Calculadora) ---------- */
body.cargando > header, body.cargando > main, body.cargando > footer, body.cargando > #login,
body.sin-sesion > header, body.sin-sesion > main, body.sin-sesion > footer,
body.con-sesion > #login{display:none !important}

/* ---------- login ---------- */
#login{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:24px}
.caja-login{width:100%;max-width:360px;text-align:center;background:var(--card);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra-alta);padding:28px 22px 20px}
.caja-login .sigla{width:72px;height:72px;margin:0 auto 16px;border-radius:18px;background:var(--marca);color:#fff;
  font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1.05}
.caja-login h1{font-size:21px;margin:0 0 2px;letter-spacing:-.4px}
.caja-login .marca{margin:0 0 14px;font-size:12px;font-weight:700;color:var(--marca);
  text-transform:uppercase;letter-spacing:1.1px}
.caja-login .sub{margin:0 0 22px;font-size:13.5px;color:var(--gris)}
#gbtn{display:flex;justify-content:center;min-height:44px}
#login-estado{margin:14px 0 0;font-size:13px;color:var(--gris-claro)}
#login-error{margin-top:14px;text-align:left;font-size:13.5px;line-height:1.4;background:#fdecea;
  border:1px solid #f3b7b1;color:#8c241c;border-radius:12px;padding:10px 12px}

/* ---------- cabecera ---------- */
header{
  position:sticky;top:0;z-index:5;color:#fff;
  background:linear-gradient(135deg,var(--tinta) 0%,var(--tinta-2) 100%);
  padding:13px 16px;padding-top:max(13px,env(safe-area-inset-top));
  box-shadow:0 2px 14px rgba(13,27,42,.22);
}
.marca-mes{display:flex;align-items:center;gap:9px;min-width:0}
.marca-mes strong{font-size:19px;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:var(--marca);border:1px solid rgba(255,255,255,.18);padding:3px 9px;border-radius:99px}
.fila-yo{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.fila-yo #yo-nombre{flex:1;min-width:0;font-size:12.5px;color:rgba(255,255,255,.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-yo button{flex:none;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:9px;
  padding:6px 11px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer}

/* ---------- secciones ---------- */
main{padding:16px;max-width:620px;margin:0 auto}
section{background:var(--card);border-radius:var(--radio);padding:15px 15px 16px;margin-bottom:13px;
  box-shadow:var(--sombra);border:1px solid rgba(255,255,255,.9)}
h2{margin:0 0 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;
  color:var(--gris);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
h2::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--marca);flex:none;transform:translateY(1px)}
h2 .sub{text-transform:none;letter-spacing:0;font-weight:500;color:var(--gris-claro)}
.ayuda{margin:-4px 0 12px;font-size:13.5px;color:var(--gris)}

/* ---------- listas de autos / salas ---------- */
.lista{display:flex;flex-direction:column}
.fila{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linea);
  width:100%;text-align:left;font:inherit;color:inherit;background:none;border-left:0;border-right:0;border-bottom:0}
.lista > .fila:first-child{border-top:0;padding-top:2px}
button.fila{cursor:pointer}
.fila .info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.fila .t{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .s{font-size:13px;color:var(--gris)}
.fila .num{font-size:26px;font-weight:800;text-align:right;letter-spacing:-.5px;line-height:1}
.fila .num small{display:block;font-size:11px;font-weight:500;color:var(--gris-claro);letter-spacing:0}
/* elegir patentes de la foto: tarjetas que se prenden en azul, como las pills */
.fila.elegible{border:1.5px solid var(--linea);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:#fbfcfe}
.lista > .fila.elegible:first-child{padding-top:10px;border-top:1.5px solid var(--linea)}
.fila.elegible.sel{background:linear-gradient(160deg,var(--acento) 0%,#0e46a3 100%);border-color:#0e46a3;color:#fff;
  box-shadow:0 2px 5px rgba(18,87,199,.30), 0 6px 16px rgba(18,87,199,.22)}
.fila.elegible.sel .s{color:rgba(255,255,255,.8)}
.fila.elegible.sel .pat{border-color:#fff}

.pat{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700;font-size:14px;letter-spacing:.06em;
  border:2px solid var(--tinta);border-radius:6px;padding:1px 6px;white-space:nowrap;flex:none;background:#fff;color:var(--tinta)}
.estado{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:99px;padding:3px 9px}
.estado.encontrado{background:var(--ok-bg);color:var(--ok)}
.estado.en_otra{background:var(--warn-bg);color:var(--warn)}
.estado.marcado{background:var(--papel);color:var(--gris)}
.vacio{margin:0;font-size:14px;color:var(--gris-claro)}

/* ---------- el contador: EL dato de la pantalla ---------- */
.contador{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 18px;
  color:#fff;border:0;background:linear-gradient(135deg,var(--marca) 0%,var(--marca-2) 100%);
  box-shadow:0 2px 5px rgba(18,122,71,.25), 0 10px 26px rgba(18,122,71,.22)}
.contador .numero{font-size:96px;line-height:1;font-weight:800;letter-spacing:-3px}
.contador .lbl{font-size:17px;font-weight:650;margin-top:4px}
.contador .det{font-size:13px;color:rgba(255,255,255,.8);margin-top:4px}
.contador.cuadrada .numero{font-size:64px;letter-spacing:-1px}
.barra-av{align-self:stretch;height:8px;background:rgba(255,255,255,.22);border-radius:4px;overflow:hidden;margin-top:14px}
#av{height:8px;background:#fff;width:0;transition:width .3s}

/* ---------- avisos (mismo lenguaje que la Calculadora) ---------- */
#avisos,#ajenos{display:grid;gap:9px;margin-bottom:13px}
#avisos:empty,#ajenos:empty{display:none}
.aviso{background:var(--warn-bg);border-left:4px solid var(--warn-borde);color:#6b4200;padding:12px 14px;
  border-radius:0 12px 12px 0;font-size:14px;line-height:1.4;box-shadow:var(--sombra)}
.aviso.duro{background:var(--mal-bg);border-color:var(--mal);color:#8a2018}
.aviso.bien{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:650}
.aviso.instalar{background:var(--acento-claro);border-color:var(--acento);color:var(--tinta);
  display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
.fila-b{display:flex;gap:14px;align-items:center;margin-top:6px}
.nota{margin:12px 0 0;font-size:13.5px;line-height:1.4;padding:10px 12px;border-radius:0 10px 10px 0}
.nota.mal{color:#8a2018;background:var(--mal-bg);border-left:3px solid var(--mal)}

/* ---------- campos ---------- */
.buscar{width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1.5px solid var(--campo-borde);border-radius:12px;
  background:#fff;min-height:48px;color:var(--tinta);margin-bottom:12px;box-shadow:inset 0 1px 2px rgba(13,27,42,.07);
  -webkit-appearance:none;appearance:none}
.buscar::placeholder{color:#aab5c4}
.buscar:focus{outline:0;border-color:var(--acento);box-shadow:0 0 0 3px rgba(18,87,199,.16)}
.otra{display:flex;gap:8px;margin-top:4px}.otra .buscar{margin:0;text-transform:uppercase}
.btn-sec{flex:none;padding:11px 16px;border-radius:11px;border:1.5px solid var(--linea-fuerte);background:#fff;
  color:var(--acento);font:inherit;font-size:14.5px;font-weight:650;cursor:pointer}
.link{background:none;border:0;color:var(--acento);font:inherit;font-size:13px;font-weight:600;padding:0;cursor:pointer;text-align:left}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips:empty{display:none}
.chip{display:flex;align-items:center;gap:4px;background:var(--acento-claro);border-radius:99px;padding:4px 4px 4px 6px}
.chip button{border:0;background:none;font-size:20px;line-height:1;color:var(--gris);cursor:pointer;padding:0 6px}

/* ---------- foto ---------- */
section.foto{padding:0;overflow:hidden;background:#1c2733}
section.foto img{display:block;width:100%;max-height:42vh;object-fit:contain}
#prev-l{max-height:30vh}

/* ---------- pie fijo con la accion ---------- */
footer{position:fixed;left:0;right:0;bottom:0;z-index:6;
  background:linear-gradient(135deg,var(--tinta) 0%,var(--tinta-2) 100%);
  padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));
  box-shadow:0 -4px 24px rgba(13,27,42,.28);border-top:3px solid var(--marca);
  display:flex;flex-direction:column;gap:8px}
footer button{max-width:588px;width:100%;margin:0 auto}
.cta{appearance:none;border:0;border-radius:14px;background:var(--acento);color:#fff;font:inherit;font-size:19px;font-weight:700;
  min-height:60px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 2px 6px rgba(18,87,199,.35), 0 8px 20px rgba(18,87,199,.25)}
.cta:active{transform:scale(.99)}
.cta:disabled{opacity:.5;box-shadow:none}
.cta-sec{appearance:none;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font:inherit;
  font-size:15px;font-weight:600;min-height:42px;cursor:pointer}

/* ---------- dialogo "no esta aqui" ---------- */
dialog{border:0;border-radius:var(--radio);padding:20px;max-width:340px;width:90%;box-shadow:var(--sombra-alta);color:var(--tinta)}
dialog::backdrop{background:rgba(13,27,42,.5)}
dialog p{margin:0 0 4px;font-size:16px}
.motivos{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.motivos button{appearance:none;border:1.5px solid var(--linea);background:#fbfcfe;color:var(--tinta);font:inherit;
  font-size:15px;padding:11px 14px;border-radius:12px;min-height:46px;cursor:pointer;text-align:left}
dialog > .btn-sec{width:100%}

/* ---------- lectura automatica ---------- */
section.foto{position:relative}
.leyendo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(13,27,42,.55);color:#fff;font-size:18px;font-weight:700}
.rueda{width:26px;height:26px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.resultado{display:flex;flex-direction:column;gap:2px}
.resultado .ok-t{font-size:20px;font-weight:800;color:var(--ok);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.resultado .quedan{font-size:15px;font-weight:700;margin-top:6px}
.fila .corr{font-size:12px;color:var(--warn);font-weight:600}
.fila.otra .t::after{content:"";}
.remoto{font-size:12px;font-weight:700;color:var(--warn)}

/* ---------- reporte (escritorio) ---------- */
body.reporte{padding-bottom:40px}
main.ancho{max-width:1280px}
#sel-dia{margin-left:auto;font:inherit;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:5px 8px}
#sel-dia option{color:var(--tinta)}
.btn-hdr{flex:none;background:rgba(255,255,255,.12);color:#fff;border-radius:9px;padding:6px 11px;font-size:12.5px;
  font-weight:600;text-decoration:none}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:13px}
.kpi{background:var(--card);border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:2px}
.kpi b{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.1}
.kpi span{font-size:13px;color:var(--gris)}
.kpi.ok b{color:var(--ok)}.kpi.warn b{color:var(--warn)}.kpi.mal b{color:var(--mal)}
.dos-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:13px;align-items:start}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);
  padding:6px 8px;border-bottom:1.5px solid var(--linea-fuerte)}
.tabla td{padding:9px 8px;border-bottom:1px solid var(--linea)}
.tabla .n{text-align:right;font-variant-numeric:tabular-nums}
.tabla td.ok{color:var(--ok);font-weight:650}.tabla td.warn{color:var(--warn);font-weight:650}
.tabla td.mal{color:var(--mal);font-weight:800}.tabla td.gris{color:var(--gris-claro)}
.tabla tbody tr{cursor:pointer;transition:background .12s}
.tabla tbody tr:hover{background:var(--papel)}
.tabla tbody tr.activa{background:var(--acento-claro)}
.tabla tfoot td{font-weight:800;border-bottom:0;border-top:2px solid var(--tinta)}
.col-listas section{margin-bottom:13px}
.sobrantes h2::before{background:var(--mal)}
.pat.roja{border-color:var(--mal);color:var(--mal)}
.estado.pendiente{background:var(--mal-bg);color:var(--mal)}
.det-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.det-cab h2{margin:0;font-size:15px;text-transform:none;letter-spacing:0;color:var(--tinta)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{appearance:none;border:1.5px solid var(--linea);background:#fbfcfe;color:var(--tinta);font:inherit;font-size:13.5px;
  padding:7px 13px;border-radius:99px;cursor:pointer;font-weight:600}
.pill[aria-pressed="true"]{background:linear-gradient(160deg,var(--acento) 0%,#0e46a3 100%);border-color:#0e46a3;color:#fff}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:12px}
.tarj{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.tarj .img{height:150px;background:#c9d2db;display:flex;align-items:center;justify-content:center;color:var(--gris);font-size:12px}
.tarj .img.con-foto{background:#1c2733;cursor:zoom-in}
.tarj .img img{width:100%;height:100%;object-fit:cover}
.tarj-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px 0}
.tarj-info{display:flex;flex-direction:column;gap:1px;padding:6px 12px 12px;font-size:13px;color:var(--gris)}
.tarj-info b{font-size:14px;color:var(--tinta)}
dialog.d-foto{max-width:min(94vw,1100px);width:auto;padding:12px}
dialog.d-foto img{display:block;max-width:100%;max-height:78vh;border-radius:10px;margin:0 auto}
dialog.d-foto p{margin:10px 2px;font-size:14px;color:var(--gris)}
@media (max-width:900px){.dos-col{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- periodo del reporte ---------- */
section.periodo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 15px}
.fechas{display:flex;gap:10px;flex-wrap:wrap}
.fechas label{font-size:13px;color:var(--gris);display:flex;align-items:center;gap:6px;font-weight:600}
.fechas input{font:inherit;font-size:14px;padding:6px 8px;border:1.5px solid var(--campo-borde);border-radius:9px;color:var(--tinta);background:#fff}
section.periodo .ayuda{margin:0}
.historial{display:flex;flex-direction:column;margin:0 0 6px}
.historial:empty{display:none}
.hist{display:grid;grid-template-columns:80px 110px 160px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--linea);font-size:13.5px}
.hist:first-child{border-top:0}
.hist .gris{color:var(--gris)}