/* 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); }
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; }

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 { 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) */
.barras { display:flex; flex-direction:column; gap:.5rem; }
.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); }
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 .55rem; white-space:nowrap; border-bottom:1px solid var(--line); }
td { padding:.45rem .55rem; border-bottom:1px solid rgba(30,43,69,.55); vertical-align:middle; }
tbody tr:hover { background:var(--card2); }
td.num { font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
td.desc { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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" */
td input:focus, td select:focus { outline:1px solid var(--accent); border-color:var(--accent); }
td.oc input { width:7.5rem; font-family:var(--mono); }
td.obs input { min-width:11rem; }
.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; }
}