/* Control de Cobros — tema cyberpunk, mismo lenguaje visual que el panel OPL,
   GEO//LOCATOR PRO y el tablero de Gastos.

   Regla del sistema: el NEON va en el cromo (titulos, bordes, resplandores) y los
   DATOS llevan la paleta validada (--s1/--s2/--s3/--s0). Un gajo de torta nunca es
   neon: se valido con scripts/validate_palette.js sobre la superficie #0d1220 y
   pasa banda de luminosidad, contraste y separacion para daltonismo. */

:root {
  color-scheme: dark;
  --bg:#080b16; --card:#0d1220; --card2:#111a2e; --text:#e6edf7; --muted:#7c8aa6;
  --line:#1e2b45; --accent:#22d3ee; --magenta:#ff2fb9;
  --grid:rgba(34,211,238,.09);
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  /* Paleta de datos (validada dark sobre #0d1220) */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s0:#64748b;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Roboto Mono",monospace;
}

* { box-sizing:border-box; }

body {
  margin:0; color:var(--text); min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(130% 90% at 50% -12%, rgba(34,211,238,.10), transparent 55%);
  background-size:34px 34px, 34px 34px, 100% 100%;
  background-attachment:fixed;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
/* flex-wrap: con 5 enlaces el menú medía 436px y empujaba la página en un móvil
   de 390. Envuelve a una segunda línea en vez de desbordar. */
header {
  position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem 1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line);
  background:rgba(8,11,22,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
header h1 {
  margin:0; font-family:var(--mono); font-size:.95rem; letter-spacing:.04em;
  text-shadow:0 0 10px rgba(34,211,238,.5);
}
header h1 span { color:var(--accent); }
.rol { font-family:var(--mono); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--accent); border:1px solid var(--line);
  background:rgba(34,211,238,.08); border-radius:999px; padding:.2rem .55rem; }
nav { display:flex; flex-wrap:wrap; gap:.3rem; margin-left:auto; align-items:center; }
nav a {
  color:var(--muted); text-decoration:none; font-family:var(--mono); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.1em; padding:.4rem .7rem; border-radius:8px;
  border:1px solid transparent;
}
nav a:hover { color:var(--text); border-color:var(--line); }
nav a.on { color:var(--accent); border-color:var(--line); background:rgba(34,211,238,.08); }

main { max-width:1240px; margin:0 auto; padding:1.2rem 1.1rem 4rem; }
/* Las pantallas con tablas anchas necesitan mas: con el tope de 1240 la tabla del
   panel (12 columnas) sobresalia 171px y se veia "cortada", porque el scroll
   horizontal en tema oscuro es invisible. Las paginas de formulario siguen angostas:
   una zona de arrastre de 1560px de ancho se ve ridicula. */
main.ancho { max-width:1560px; }

h2 {
  font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--accent); margin:1.6rem 0 .7rem; text-shadow:0 0 8px rgba(34,211,238,.35);
}

/* ── Piezas ───────────────────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:.85rem .8rem; text-align:center; }
.stat .lbl { font-family:var(--mono); color:var(--muted); font-size:.62rem;
  text-transform:uppercase; letter-spacing:.12em; }
.stat .val { font-family:var(--mono); font-size:1.25rem; font-weight:700; margin-top:.35rem;
  font-variant-numeric:tabular-nums; }
.stat.alerta .val { color:var(--warn); }
.stat.mal .val { color:var(--bad); }

.filtros { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
/* flex-wrap + max-width: con 5 chips el grupo "tipo" medía 394px y desbordaba la
   pantalla de 390. Envuelve en dos líneas en vez de empujar la página. */
.grupo { display:flex; flex-wrap:wrap; max-width:100%; gap:.25rem; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:.2rem; }
.chip { border:0; background:transparent; color:var(--muted); font:inherit; font-size:.78rem;
  padding:.35rem .75rem; border-radius:999px; cursor:pointer; white-space:nowrap; }
.chip:hover { color:var(--text); }
.chip.on { background:var(--accent); color:#04293b; font-weight:600; }
.filtros input[type=date], .filtros input[type=search] {
  background:var(--card); border:1px solid var(--line); color:var(--text); font:inherit;
  font-size:.8rem; padding:.45rem .6rem; border-radius:8px; }
.filtros input[type=search] { min-width:190px; }
.filtros .sep { flex:1; }
.btn-limpiar { background:var(--card2); border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:.76rem; padding:.45rem .8rem; border-radius:8px; cursor:pointer; }
.btn-limpiar:hover { color:var(--text); border-color:var(--accent); }

/* ── Graficos ─────────────────────────────────────────────────────────── */
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:.7rem; }
.chart { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; }
.chart h3 .sub { color:var(--muted); font-weight:400; text-transform:none;
  letter-spacing:.02em; opacity:.8; }
.chart h3 { margin:0 0 .8rem; font-family:var(--mono); font-size:.68rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.14em; font-weight:600; }
.dona-wrap { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.leg { display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:140px; }
.leg button { display:flex; align-items:center; gap:.5rem; width:100%; background:transparent;
  border:0; border-radius:8px; padding:.32rem .4rem; color:inherit; font:inherit;
  font-size:.8rem; cursor:pointer; text-align:left; }
.leg button:hover { background:var(--card2); }
.leg button[aria-pressed="true"] { background:var(--card2); box-shadow:inset 2px 0 0 var(--accent); }
.leg .sw { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.leg .lc { flex:1; }
.leg .lm { font-family:var(--mono); color:var(--muted); font-size:.74rem;
  font-variant-numeric:tabular-nums; }

/* Barras horizontales (top patentes) */
/* Ahora se listan TODAS las patentes, no un top 8: si la flota crece, la tarjeta
   scrollea sola en vez de estirarse y descuadrar la fila de gráficos. */
.barras { display:flex; flex-direction:column; gap:.5rem; max-height:16rem; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#2c3d5e transparent; }
.barras::-webkit-scrollbar { width:9px; }
.barras::-webkit-scrollbar-thumb { background:#2c3d5e; border-radius:999px; }
.barra { display:grid; grid-template-columns:5.4rem 1fr auto; gap:.6rem; align-items:center; }
.barra .n { font-family:var(--mono); font-size:.78rem; }
/* display:block en los dos: son <span>, y un inline ignora height -> las barras
   se dibujaban con altura 0 y la grilla no mostraba nada. */
.barra .track { display:block; height:9px; background:var(--card2); border-radius:4px;
  overflow:hidden; }
.barra .fill { display:block; height:100%; border-radius:0 4px 4px 0; }  /* extremo 4px */
.barra .v { font-family:var(--mono); font-size:.74rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }

/* ── Tabla ────────────────────────────────────────────────────────────── */
.tabla-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px;
  background:var(--card); }
/* Barra de scroll VISIBLE: por defecto es un overlay que no se ve sobre fondo oscuro,
   y entonces una tabla que se sale parece rota en vez de deslizable. */
.tabla-wrap { scrollbar-width:thin; scrollbar-color:#2c3d5e transparent; }
.tabla-wrap::-webkit-scrollbar { height:11px; }
.tabla-wrap::-webkit-scrollbar-track { background:var(--card2); border-radius:999px; }
.tabla-wrap::-webkit-scrollbar-thumb { background:#2c3d5e; border-radius:999px; }
.tabla-wrap::-webkit-scrollbar-thumb:hover { background:var(--accent); }
table { border-collapse:collapse; width:100%; font-size:.82rem; }
th { position:sticky; top:0; background:var(--card2); font-family:var(--mono); font-size:.63rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600;
  text-align:left; padding:.6rem .42rem; white-space:nowrap; border-bottom:1px solid var(--line); }
td { padding:.45rem .42rem; border-bottom:1px solid rgba(30,43,69,.55); vertical-align:middle; }
tbody tr:hover { background:var(--card2); }
/* Cabeceras ordenables: la flecha aparece al ordenar, y una tenue al pasar el mouse
   para que se note que se puede hacer clic. */
th[data-ord] { cursor:pointer; user-select:none; }
th[data-ord]:hover { color:var(--text); }
th[data-ord]::after { content:'95'; opacity:0; margin-left:.3rem; font-size:.9em; }
th[data-ord]:hover::after { opacity:.35; }
th[data-ord].ord { color:var(--accent); }
th[data-ord].ord::after { content:'B2'; opacity:1; }
th[data-ord].ord.desc::after { content:'BC'; }
th[data-ord]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
td.num { font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
td.desc { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.org { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.76rem; color:var(--muted); }
.pat { font-family:var(--mono); font-size:.78rem; }
.tag { display:inline-flex; align-items:center; gap:.3rem; font-size:.66rem; padding:.14rem .45rem;
  border-radius:6px; border:1px solid var(--line); white-space:nowrap; }
.tag .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
td input, td select { background:var(--bg); border:1px solid var(--line); color:var(--text);
  font:inherit; font-size:.78rem; padding:.28rem .4rem; border-radius:6px; width:100%; }
td select { min-width:6.8rem; }   /* si no, la columna angosta lo recorta a "p v" */
/* Asignacion manual: el placeholder muestra lo que dedujo el sistema, en cursiva y
   apagado, para no confundirlo con un valor tecleado. */
td.pat select.asig { width:100%; min-width:7.2rem; font-family:var(--mono); font-size:.76rem; }
/* La opcion "↳ XXX" es lo deducido por el sistema, no algo elegido: se ve apagada. */
td.pat select.asig:has(option[value=""]:checked) { color:var(--muted); font-style:italic; }
td input:focus, td select:focus { outline:1px solid var(--accent); border-color:var(--accent); }
/* Bloqueado por rol: se ve el dato pero no invita a escribirlo. */
td input:disabled, td select:disabled { background:transparent; border-color:transparent;
  color:var(--muted); cursor:default; opacity:1; }
td.oc input { width:6.5rem; font-family:var(--mono); }
td.obs input { min-width:8.5rem; }
.guardado { animation:flash 1.1s ease-out; }
@keyframes flash { from { background:rgba(34,197,94,.28); } to { background:transparent; } }

.empty { color:var(--muted); font-size:.85rem; text-align:center; padding:2.2rem 0; }
.nota { color:var(--muted); font-size:.76rem; margin:.6rem 0 0; }

/* ── Subida ───────────────────────────────────────────────────────────── */
.drop { border:2px dashed var(--line); border-radius:14px; padding:2.8rem 1.5rem; text-align:center;
  cursor:pointer; background:var(--card); transition:border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--card2);
  box-shadow:0 0 26px rgba(34,211,238,.14) inset; }
.drop .icono { font-size:2.4rem; }
.drop .t { font-family:var(--mono); font-size:.92rem; margin-top:.6rem; }
.drop .s { color:var(--muted); font-size:.8rem; margin-top:.35rem; }
.drop .archivo { color:var(--accent); font-family:var(--mono); font-size:.86rem; margin-top:.6rem;
  word-break:break-all; }

.btn { display:block; width:100%; margin-top:1rem; padding:.85rem; border:0; border-radius:10px;
  background:var(--accent); color:#04293b; font:inherit; font-weight:700; font-size:.95rem;
  cursor:pointer; box-shadow:0 0 20px rgba(34,211,238,.35); }
.btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

.aviso { margin-top:1rem; border-radius:10px; padding:.85rem 1rem; font-size:.86rem;
  border:1px solid var(--line); background:var(--card); }
.aviso.ok { border-color:rgba(34,197,94,.55); }
.aviso.err { border-color:rgba(239,68,68,.6); }
.aviso ul { margin:.5rem 0 0; padding-left:1.1rem; }
.aviso li { margin:.15rem 0; }
.aviso b { font-family:var(--mono); }

/* ── Login ────────────────────────────────────────────────────────────── */
.login { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.login form { width:min(94vw,340px); background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:1.8rem 1.5rem; text-align:center;
  box-shadow:0 0 40px rgba(34,211,238,.09); }
.login h1 { font-family:var(--mono); font-size:1.05rem; margin:0 0 .3rem;
  text-shadow:0 0 12px rgba(34,211,238,.5); }
.login h1 span { color:var(--accent); }
.login p { color:var(--muted); font-size:.78rem; margin:0 0 1.4rem; }
.login input { width:100%; padding:.75rem; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font:inherit; font-family:var(--mono);
  font-size:1.15rem; text-align:center; letter-spacing:.3em; }
.login input:focus { outline:1px solid var(--accent); border-color:var(--accent); }
.login .err { color:var(--bad); font-size:.8rem; margin-top:.8rem; }

@media (max-width:640px) {
  header h1 { font-size:.8rem; }
  nav a { padding:.35rem .5rem; font-size:.66rem; }
  main { padding:.9rem .7rem 3rem; }
}

/* Aviso flotante de guardado (ver panel.html: la fila puede salir del filtro). */
#avisoGuardado { position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%) translateY(1rem);
  background:var(--card2); border:1px solid var(--ok); color:var(--text);
  font-family:var(--mono); font-size:.78rem; padding:.55rem 1rem; border-radius:999px;
  box-shadow:0 0 22px rgba(34,197,94,.25); opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s; z-index:20; }
#avisoGuardado.on { opacity:1; transform:translateX(-50%) translateY(0); }


/* Historial: el valor anterior se ve tachado y apagado, para leer de un vistazo
   "de esto -> a esto". */
td.ant { color:var(--muted); text-decoration:line-through; }

/* Daño declarado en andén: respaldo para objetar el cobro. Icono + tooltip, nunca
   solo color: es un estado, no una serie de datos. */
.dano { margin-left:.25rem; cursor:help; filter:drop-shadow(0 0 3px rgba(245,158,11,.6)); }

/* ── Barra de controles ───────────────────────────────────────────────── */
/* .btn es el boton grande de formulario (width:100%, pensado para el login). Dentro de
   una barra hay que desestirarlo o cada boton se come una fila entera: pasó al abrir
   el panel en produccion, con las flechas de dia ocupando todo el ancho. */
/* OJO con el nombre: .barra ya es cada fila del grafico de barras (linea 128). */
.controles { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.controles .btn { display:inline-flex; align-items:center; justify-content:center;
  width:auto; margin-top:0; padding:.5rem .9rem; font-size:.85rem;
  box-shadow:0 0 10px rgba(34,211,238,.18); }
.controles .flecha { padding:.5rem; font-size:1rem; line-height:1; min-width:2.4rem; }
.controles input[type=date], .controles input[type=month] {
  background:var(--card2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:.45rem .6rem; font:inherit; font-size:.9rem; }