/* ============================================================================
   kg-gov · interfaz de administración — hoja de estilo única (sin build, sin CDN)
   Arquitectura de dos capas: PRIMITIVAS (paleta cruda) -> SEMÁNTICAS (propósito).
   Los componentes SOLO consumen tokens semánticos, nunca primitivas ni hex.
   ========================================================================== */

/* ---------------------------------------------------------------- CAPA 1: primitivas */
:root {
  /* Neutrales: pizarra (slate) */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;
  /* Marca / acción: índigo */
  --indigo-100:#e0e7ff; --indigo-300:#a5b4fc; --indigo-400:#818cf8;
  --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca;
  /* Estado permitir: esmeralda */
  --emerald-100:#d1fae5; --emerald-300:#6ee7b7; --emerald-500:#10b981; --emerald-700:#047857;
  /* Estado denegar: rosa/rojo */
  --rose-100:#ffe4e6; --rose-300:#fda4af; --rose-500:#f43f5e; --rose-700:#be123c;
  /* Estado restringir / confidencial: ámbar */
  --amber-100:#fef3c7; --amber-300:#fcd34d; --amber-500:#f59e0b; --amber-700:#b45309;
  /* Interno: cielo (azul) */
  --sky-100:#e0f2fe; --sky-300:#7dd3fc; --sky-500:#0ea5e9; --sky-700:#0369a1;

  /* Espaciado modular base 4px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;

  /* Radios concéntricos */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px;

  /* Tipografía nativa del sistema (cero solicitudes de red) */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  color-scheme: light dark;
}

/* ---------------------------------------------------------------- CAPA 2: semánticas (claro) */
:root {
  --bg-base:var(--slate-50);
  --bg-surface:#ffffff;
  --bg-surface-hover:var(--slate-50);
  --bg-inset:var(--slate-100);
  --text-primary:var(--slate-900);
  --text-secondary:var(--slate-600);
  --text-muted:var(--slate-400);
  --border-subtle:var(--slate-200);
  --border-strong:var(--slate-300);
  --action-primary:var(--indigo-600);
  --action-primary-hover:var(--indigo-700);
  --action-primary-text:#ffffff;
  --focus-ring:var(--indigo-500);

  /* Estado ABAC */
  --status-allow-bg:var(--emerald-100);   --status-allow-text:var(--emerald-700);
  --status-deny-bg:var(--rose-100);        --status-deny-text:var(--rose-700);
  --status-restrict-bg:var(--amber-100);   --status-restrict-text:var(--amber-700);

  /* Sensibilidad del hecho */
  --sens-publico-bg:var(--slate-100);       --sens-publico-text:var(--slate-600);
  --sens-interno-bg:var(--sky-100);         --sens-interno-text:var(--sky-700);
  --sens-confidencial-bg:var(--amber-100);  --sens-confidencial-text:var(--amber-700);
  --sens-restringido-bg:var(--rose-100);    --sens-restringido-text:var(--rose-700);

  /* Atributo (badges de reglas ABAC) */
  --attr-bg:var(--indigo-100); --attr-text:var(--indigo-700);

  /* Sombra: SOLO para material flotante (dropdown/modal/tooltip) */
  --shadow-float:0 4px 12px rgba(15,23,42,.12),0 1px 3px rgba(15,23,42,.08);
}

/* ---- Oscuro: solo se re-mapean tokens semánticos (los componentes no cambian) ---- */
/* auto (preferencia del SO), salvo que el usuario haya forzado claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base:var(--slate-950);
    --bg-surface:var(--slate-900);
    --bg-surface-hover:var(--slate-800);
    --bg-inset:var(--slate-800);
    --text-primary:var(--slate-100);
    --text-secondary:var(--slate-400);
    --text-muted:var(--slate-500);
    --border-subtle:var(--slate-800);
    --border-strong:var(--slate-700);
    --action-primary:var(--indigo-600);
    --action-primary-hover:var(--indigo-500);
    --action-primary-text:#ffffff;
    --focus-ring:var(--indigo-400);
    --status-allow-bg:rgba(16,185,129,.15);  --status-allow-text:var(--emerald-300);
    --status-deny-bg:rgba(244,63,94,.18);     --status-deny-text:var(--rose-300);
    --status-restrict-bg:rgba(245,158,11,.16);--status-restrict-text:var(--amber-300);
    --sens-publico-bg:rgba(148,163,184,.15);  --sens-publico-text:var(--slate-300);
    --sens-interno-bg:rgba(56,189,248,.15);   --sens-interno-text:var(--sky-300);
    --sens-confidencial-bg:rgba(245,158,11,.16);--sens-confidencial-text:var(--amber-300);
    --sens-restringido-bg:rgba(244,63,94,.18);--sens-restringido-text:var(--rose-300);
    --attr-bg:rgba(99,102,241,.20); --attr-text:var(--indigo-300);
    --shadow-float:0 4px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
/* forzado explícito por el usuario (misma jerarquía que la media query) */
:root[data-theme="dark"] {
  --bg-base:var(--slate-950);
  --bg-surface:var(--slate-900);
  --bg-surface-hover:var(--slate-800);
  --bg-inset:var(--slate-800);
  --text-primary:var(--slate-100);
  --text-secondary:var(--slate-400);
  --text-muted:var(--slate-500);
  --border-subtle:var(--slate-800);
  --border-strong:var(--slate-700);
  --action-primary:var(--indigo-600);
  --action-primary-hover:var(--indigo-500);
  --action-primary-text:#ffffff;
  --focus-ring:var(--indigo-400);
  --status-allow-bg:rgba(16,185,129,.15);  --status-allow-text:var(--emerald-300);
  --status-deny-bg:rgba(244,63,94,.18);     --status-deny-text:var(--rose-300);
  --status-restrict-bg:rgba(245,158,11,.16);--status-restrict-text:var(--amber-300);
  --sens-publico-bg:rgba(148,163,184,.15);  --sens-publico-text:var(--slate-300);
  --sens-interno-bg:rgba(56,189,248,.15);   --sens-interno-text:var(--sky-300);
  --sens-confidencial-bg:rgba(245,158,11,.16);--sens-confidencial-text:var(--amber-300);
  --sens-restringido-bg:rgba(244,63,94,.18);--sens-restringido-text:var(--rose-300);
  --attr-bg:rgba(99,102,241,.20); --attr-text:var(--indigo-300);
  --shadow-float:0 4px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------------------------------------------------------------- reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--action-primary); }
h1,h2,h3 { line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

/* Números tabulares con cero rasgado (alineación perfecta + anti-confusión O/0) */
.tabular-nums { font-variant-numeric: tabular-nums slashed-zero; }

/* ---------------------------------------------------------------- layout: sidebar + contenido */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px; flex: 0 0 260px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  font-weight: 600; letter-spacing: -.02em; font-size: .95rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.sidebar__brand .brand__name > span { color: var(--text-muted); font-weight: 500; }
/* T5: logo + wordmark travel together, so the brand stays ONE flex child and the burger keeps
   its place at the far end (the container is space-between). */
.brand__mark { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.brand__logo { display: block; border-radius: 5px; flex: 0 0 auto; }
/* Toggle del menú (truco CSS del checkbox, sin JS): el botón solo se ve en móvil. */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; font-size: 1.25rem; line-height: 1;
  padding: 2px var(--space-2); border-radius: var(--radius-md);
  color: var(--text-secondary); user-select: none; }
.nav-burger:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); }
.nav a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: .875rem;
}
.nav a:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.nav a.is-active { background: var(--attr-bg); color: var(--attr-text); }
.sidebar__foot {
  margin-top: auto; padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: .8125rem; color: var(--text-secondary);
}
.sidebar__foot .kv { display: flex; justify-content: space-between; gap: var(--space-2); }
.sidebar__foot .kv strong { color: var(--text-primary); font-weight: 600; }

.content { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; padding: var(--space-6) var(--space-8); }
.content-narrow { max-width: 560px; margin: 0 auto; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head p { color: var(--text-secondary); font-size: .875rem; }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* ---------------------------------------------------------------- superficies planas (borde 1px, sin sombra) */
.panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.panel__head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.panel__head h2 { font-size: 1rem; }
.panel__body { padding: var(--space-5); }

.callout { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--action-primary); background: var(--bg-inset); border-radius: var(--radius-md); font-size: .875rem; }
.callout--warn { border-left-color: var(--status-restrict-text); }
.callout strong { font-weight: 600; }

.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); font-size: .875rem; }

/* ---------------------------------------------------------------- formularios */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > label { font-size: .75rem; color: var(--text-secondary); font-weight: 500; }
input, select, textarea {
  font: inherit; font-size: .875rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--text-primary);
}
input[type=file] { padding: var(--space-1) var(--space-2); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.filters { display: flex; gap: var(--space-4); align-items: end; flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin-bottom: var(--space-5); }

/* ---------------------------------------------------------------- botones */
.btn { display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-weight: 500; font-size: .875rem; white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--action-primary);
  color: var(--action-primary-text); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--action-primary-hover); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: .8125rem; }
/* Destructive action (T2 purge). It was being written in templates without existing here, so an
   irreversible button rendered IDENTICAL to an ordinary one — the opposite of what a destructive
   control should do. Consumes the deny semantics the badges already use, so light and dark come
   for free. Colour is not the only signal: the label says what it does, and the purge additionally
   requires typing the tenant id. */
.btn--danger { background: var(--status-deny-text); color: var(--bg-surface); }
.btn--danger:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------- tablas densas */
.table-wrap { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-inset); color: var(--text-secondary);
  text-align: left; font-weight: 600; white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong);
}
.table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-surface-hover); }
/* texto cualitativo -> izquierda (por defecto); números/fechas/IDs -> derecha, tabulares */
.table .num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.table .mono { font-family: var(--font-mono); font-size: .78rem; }
.table .id { font-family: var(--font-mono); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }

/* ---------------------------------------------------------------- badges (fondo tenue + texto oscuro del mismo matiz + forma + texto) */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--space-2);
  border-radius: var(--radius-sm); font-size: .72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge--allow { background: var(--status-allow-bg); color: var(--status-allow-text); }
.badge--deny { background: var(--status-deny-bg); color: var(--status-deny-text); }
.badge--restrict { background: var(--status-restrict-bg); color: var(--status-restrict-text); }
.badge--publico { background: var(--sens-publico-bg); color: var(--sens-publico-text); }
.badge--interno { background: var(--sens-interno-bg); color: var(--sens-interno-text); }
.badge--confidencial { background: var(--sens-confidencial-bg); color: var(--sens-confidencial-text); }
.badge--restringido { background: var(--sens-restringido-bg); color: var(--sens-restringido-text); }
.badge--neutral { background: var(--bg-inset); color: var(--text-secondary); }
.badge--attr { background: var(--attr-bg); color: var(--attr-text); font-family: var(--font-mono); }
.badge--attr::before { display: none; }
/* Redundancia de FORMA (no solo color): denegar/restringido -> cuadrado; restringir/confidencial -> rombo */
.badge--deny::before, .badge--restringido::before { border-radius: 1px; }
.badge--restrict::before, .badge--confidencial::before { border-radius: 1px; transform: rotate(45deg); }

/* ---------------------------------------------------------------- reglas ABAC (macro recursiva) */
.regla { border-left: 2px solid var(--border-strong); padding-left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.regla__op { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; }
.regla__hijos { display: flex; flex-direction: column; gap: var(--space-2); }
.regla__cond { display: flex; flex-direction: row; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.regla__cmp { font-family: var(--font-mono); font-size: .75rem; color: var(--text-secondary); }
.regla__val { font-family: var(--font-mono); font-size: .78rem; color: var(--text-primary); }

/* ---------------------------------------------------------------- timeline (::before nodo, ::after conector) */
.timeline { list-style: none; position: relative; padding-left: var(--space-6); }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-1); }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) + 4px); top: 3px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--action-primary); border: 2px solid var(--bg-surface); z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: calc(-1 * var(--space-6) + 8px); top: 13px; bottom: -3px; width: 2px; background: var(--border-subtle); }
.timeline li:last-child::after { display: none; }
.timeline li.node--restrict::before { background: var(--status-restrict-text); }
.timeline__meta { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums slashed-zero; }
.timeline__body { margin-top: 2px; }

/* ---------------------------------------------------------------- utilidades mínimas */
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.small { font-size: .72rem; }
.italic { font-style: italic; }
.cell-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums slashed-zero; }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.mt-2 { margin-top: var(--space-2); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { border-color: var(--border-strong); background: var(--bg-surface-hover); }
.card-link h3 { color: var(--text-primary); margin-bottom: var(--space-1); }
.card-link p { color: var(--text-secondary); font-size: .8125rem; }

/* ---------------------------------------------------------------- nav: subsecciones (Administración) */
.nav__group { padding: var(--space-4) var(--space-3) var(--space-1); font-size: .68rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* ---------------------------------------------------------------- drawer lateral (SSR, sin JS) */
.drawer__overlay { position: fixed; inset: 0; background: rgba(2,6,23,.4); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; z-index: 41; height: 100vh; width: min(480px, 94vw);
  background: var(--bg-surface); border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-float); display: flex; flex-direction: column; overflow-y: auto; }
.drawer__head { position: sticky; top: 0; background: var(--bg-surface); z-index: 1;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.drawer__head h2 { font-size: 1.05rem; }
.drawer__close { color: var(--text-muted); text-decoration: none; font-size: 1rem; line-height: 1; }
.drawer__close:hover { color: var(--text-primary); }
.drawer__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.drawer__sec { display: flex; flex-direction: column; gap: var(--space-2); }
.drawer__sec > h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.kvlist { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); font-size: .82rem; align-items: baseline; }
.kvlist dt { color: var(--text-secondary); }
.kvlist dd { color: var(--text-primary); }

/* fila clicable (abre el drawer) */
.rowlink { color: var(--action-primary); text-decoration: none; font-weight: 600; }
.rowlink:hover { text-decoration: underline; }

/* chips de conteo del preview de acceso efectivo */
.count-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.count { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px var(--space-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: .78rem; }
.count strong { font-variant-numeric: tabular-nums slashed-zero; }
.delta-pos { color: var(--status-allow-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-neg { color: var(--status-deny-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* grupo de checkboxes (departamentos) */
.checks { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-primary); font-weight: 500; }
.checks input { width: auto; }

@media (max-width: 640px) { .drawer { width: 100vw; } }

/* ---------------------------------------------------------------- responsive (móvil/tablet) */
@media (max-width: 820px) {
  /* la barra lateral pasa a ser una cabecera apilada, no fija */
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .sidebar__brand { border-bottom: none; padding: var(--space-4) var(--space-4) var(--space-2); }
  /* nav horizontal con scroll si no cabe */
  .nav-burger { display: inline-flex; }
  /* menú colapsado por defecto; el ☰ (checkbox) lo despliega */
  .nav, .sidebar__foot { display: none; }
  .nav-toggle:checked ~ .nav { display: flex; flex-direction: row; flex-wrap: wrap;
    gap: var(--space-1); padding: 0 var(--space-3) var(--space-2); }
  .nav-toggle:checked ~ .sidebar__foot { display: flex; margin-top: 0;
    border-top: 1px solid var(--border-subtle); flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .nav a { padding: var(--space-2); }
  .nav__group { width: 100%; padding: var(--space-2) var(--space-1) 0; }

  .content { height: auto; padding: var(--space-4); }
  .content-narrow { max-width: 100%; }
  .page-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  h1 { font-size: 1.25rem; }

  /* filtros y formularios apilados a ancho completo */
  .filters { flex-direction: column; align-items: stretch; }
  .filters .field, .filters .btn { width: 100%; }
  .field input, .field select, .field textarea { width: 100%; }
  .checks { gap: var(--space-2); }

  /* drawer y detalle a ancho completo */
  .drawer { width: 100vw; }
  .kvlist { grid-template-columns: 1fr; gap: 0 0; }
  .kvlist dt { margin-top: var(--space-2); font-size: .72rem; }
  .grid-cards { grid-template-columns: 1fr; }
}