/*
 * Identidad visual: señalización carretera.
 *  - Verde de señal informativa (#0F6B4F) como acento de navegación.
 *  - Asfalto (#1E272C) en la barra lateral; franjas de color por área como "carriles".
 *  - Semáforo (verde/ámbar/rojo) reservado EXCLUSIVAMENTE para estado contra meta.
 *  - Tipografía DIN (Bahnschrift en Windows) para cifras y títulos, como en los letreros.
 * Sin fuentes externas: la CSP solo permite recursos propios.
 */
:root {
  --asphalt: #1e272c;
  --asphalt-2: #2a363c;
  --lane: #e9eef0;
  --paper: #f4f6f5;
  --surface: #ffffff;
  --ink: #172026;
  --ink-2: #4b5a62;
  --line: #d5dde0;
  --sign: #0f6b4f;
  --sign-ink: #ffffff;
  --ok: #1d8a52;
  --warn: #c98a07;
  --bad: #c23b2e;
  --focus: #f2b705;
  --radius-s: 4px;
  --radius-m: 8px;
  --font-din: Bahnschrift, "DIN Alternate", "DIN 2014", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-din); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.75rem; max-width: 72ch; }
a { color: var(--sign); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-family: var(--font-din); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  background: var(--asphalt);
  color: var(--lane);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  font-family: var(--font-din); font-size: 1.1rem; font-weight: 600;
}
.brand-plate {
  background: var(--sign); color: var(--sign-ink);
  border: 2px solid #fff; border-radius: 6px;
  padding: 2px 8px; font-size: 0.95rem;
}
.nav { list-style: none; margin: 0; padding: 4px 0 16px; }
.nav-group { padding: 14px 18px 6px; color: #9fb0b7; font-size: 0.8rem; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; color: var(--lane); text-decoration: none;
  border-left: 4px solid transparent;
}
.nav a:hover { background: var(--asphalt-2); }
.nav a[aria-current="page"] { background: var(--asphalt-2); border-left-color: var(--lane-color, var(--sign)); }
.lane-dot { width: 4px; height: 16px; border-radius: 2px; background: var(--lane-color, #9fb0b7); flex: none; }
.side-foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--asphalt-2); font-size: 0.85rem; }
.side-foot button { margin-top: 8px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px;
  padding: 20px 28px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.content { padding: 24px 28px 48px; display: grid; gap: 24px; }

/* ---------- controles ---------- */
.btn {
  font: 600 0.9rem var(--font-ui);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--ink-2); }
.btn-primary { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.btn-primary:hover { background: #0b583f; border-color: #0b583f; }
.btn-danger { color: var(--bad); }
.btn-ghost { background: transparent; border-color: transparent; color: inherit; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { padding: 4px 9px; font-size: 0.8rem; }

label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
input, select, textarea {
  font: 0.95rem var(--font-ui); color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
  min-height: 38px; width: 100%;
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }
.field-error { color: var(--bad); font-weight: 500; font-size: 0.8rem; }
.req::after { content: " *"; color: var(--bad); }
.range { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.range label { min-width: 150px; }

/* ---------- paneles ---------- */
/* min-width:0 evita que tablas anchas desborden la cuadrícula; el scroll queda dentro de .table-wrap */
.panel, [role="tabpanel"], .content > div { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- KPI: placas tipo señal, el estado se lee en la franja izquierda ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: var(--radius-s); padding: 14px 16px 12px;
  display: grid; gap: 2px;
}
.kpi[data-status="ok"] { border-left-color: var(--ok); }
.kpi[data-status="warn"] { border-left-color: var(--warn); }
.kpi[data-status="bad"] { border-left-color: var(--bad); }
.kpi-label { font-size: 0.85rem; color: var(--ink-2); }
.kpi-value { font-family: var(--font-din); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--ink-2); }
.trend-good { color: var(--ok); font-weight: 600; }
.trend-bad { color: var(--bad); font-weight: 600; }

/* ---------- dashboard ---------- */
.areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.area-tile {
  display: grid; gap: 10px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-top: 5px solid var(--lane-color, var(--sign));
  border-radius: var(--radius-s); color: inherit; text-decoration: none;
}
.area-tile:hover { border-color: var(--ink-2); border-top-color: var(--lane-color); }
.area-tile dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 0.9rem; }
.area-tile dt { color: var(--ink-2); }
.area-tile dd { margin: 0; font-family: var(--font-din); font-variant-numeric: tabular-nums; text-align: right; }
.light { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--line); }
.light[data-status="ok"] { background: var(--ok); }
.light[data-status="warn"] { background: var(--warn); }
.light[data-status="bad"] { background: var(--bad); }

/* Áreas de oportunidad: letrero preventivo */
.alerts { border: 2px solid var(--warn); background: #fff9ea; }
.alerts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.alerts li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ---------- gráficas ---------- */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.chart-box { position: relative; height: 280px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tabs button {
  font: 600 0.9rem var(--font-ui); background: none; border: 0; padding: 10px 14px; cursor: pointer;
  color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sign); }

/* ---------- tablas ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
th { font-weight: 600; color: var(--ink-2); background: #f7f9f9; position: sticky; top: 0; }
td.num, th.num { text-align: right; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.78rem; background: var(--lane); }
.pill-ok { background: #ddf2e6; color: #135c37; }
.pill-bad { background: #f8dfdc; color: #8c2219; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* ---------- formularios ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.draft-note { font-size: 0.82rem; color: var(--ink-2); }

/* ---------- importación ---------- */
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius-m); padding: 26px; text-align: center; background: #fbfcfc;
}
.dropzone.drag { border-color: var(--sign); background: #eef7f3; }
.summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.summary div { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; }
.summary b { display: block; font-family: var(--font-din); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.summary .s-new b { color: var(--ok); }
.summary .s-dup b { color: var(--warn); }
.summary .s-err b { color: var(--bad); }

/* ---------- matriz de permisos ---------- */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix input { width: 18px; height: 18px; min-height: 0; }

/* ---------- login ---------- */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    linear-gradient(90deg, transparent 49.6%, #f2b70533 49.6%, #f2b70533 50.4%, transparent 50.4%) center / 100% 60px,
    var(--asphalt);
}
.auth-card { width: min(400px, 100%); background: var(--surface); border-radius: var(--radius-m); padding: 28px; display: grid; gap: 14px; }
.auth-card .brand { padding: 0 0 6px; color: var(--ink); }

/* ---------- modal ---------- */
dialog { border: 0; border-radius: var(--radius-m); padding: 0; width: min(680px, calc(100% - 32px)); max-height: 90vh; }
dialog::backdrop { background: rgba(30, 39, 44, 0.55); }
.dialog-body { padding: 22px; display: grid; gap: 12px; overflow-y: auto; max-height: 80vh; }

/* ---------- avisos ---------- */
.net-banner { position: sticky; top: 0; z-index: 20; padding: 8px 16px; background: var(--warn); color: #1e1500; font-weight: 600; text-align: center; }
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 420px;
  background: var(--asphalt); color: #fff; padding: 12px 16px; border-radius: var(--radius-s);
  border-left: 5px solid var(--sign);
}
.toast[data-kind="error"] { border-left-color: var(--bad); }
.empty { padding: 28px; text-align: center; color: var(--ink-2); }
.notice { padding: 12px 14px; border-radius: var(--radius-s); background: #fff9ea; border: 1px solid #ecd28f; }
.notice-error { background: #fbeceb; border-color: #e7b3ad; }

/* ---------- responsive ---------- */
.topbar .menu-toggle { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 30; transform: translateX(-100%); transition: transform 0.2s; }
  .side.open { transform: none; }
  .topbar .menu-toggle { display: inline-flex; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .kpi-value { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}