/* ============================================================
   sstt.css — CAPA COMPARTIDA (Ronda SSTT)
   Enlazado por index / lectura / panel / admin / dossier ANTES
   de su propio <style>. Solo contiene reglas idénticas y sin
   riesgo de colisión entre páginas. Todo lo específico (y los
   overrides necesarios para conservar el aspecto) vive en el
   <style> de cada página, que gana por cascada al ir después.
   NO incluye: .btn / .card / .who / .toast / .muted / .loading
   (index y dossier reutilizan esos nombres con otro significado).
   ============================================================ */

/* Fuentes (estaba repetido en index/lectura/panel/admin) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Space+Mono:wght@700&display=swap');

/* Tokens canónicos (set completo de lectura/panel/admin).
   --r:12px como base (panel/admin); lectura override a 14px.
   index hereda el superset (aditivo: sus 4 tokens coinciden).
   dossier mantiene su :root propio (line/line2 invertidos + --thead). */
:root{
  /* Sistema de marca Trazika (alineado con la landing): fondo claro,
     acento turquesa, líneas suaves, sombra de tarjeta. --brand navy se
     mantiene. Tokens nuevos (--accent/--accent2/--brand2/--soft/--shadow)
     son aditivos; los gestion-pages heredan sin redefinir. */
  --bg:#f4f8fb;--soft:#f4f8fb;--surface:#ffffff;--ink:#0c1b2a;--ink2:#46586a;--line:#e2e8f0;--line2:#cdd7e0;
  --brand:#0b3d63;--brand2:#0e5a8a;--accent:#13b3a6;--accent2:#0ea5a0;
  --action:#1466c4;--go:#1f9d57;--go-ink:#fff;--warn:#b45309;--danger:#c01919;--sanit:#8a1f7a;--r:12px;
  --shadow:0 10px 30px rgba(11,61,99,.10);
}

/* Utilidad tipográfica (idéntica en lectura/panel/admin; index y
   dossier no usan class="mono", así que es inocua para ellos). */
.mono{font-family:'Space Mono',monospace}

/* ============================================================
   COMPONENTES DE PÁGINAS DE GESTIÓN (panel / admin / superadmin)
   Idénticas en ≥2 de esas páginas. Selectores que NO existen en
   index / lectura / dossier (sin <header>, sin <main>, y sin
   class="tabs|tab|panel|bar|toast|logout|home-link|grid|btn-*"),
   por lo que NO colisionan con ellas. Cada página puede añadir
   overrides en su <style> (gana por cascada al ir después).
   NO se centralizan (regresión / invariante): .btn .card .who
   .loading .muted (index/lectura/dossier reutilizan esos nombres
   con otro significado o sin definir la regla). ============= */

/* Cabecera (el elemento <header> solo existe en panel/admin/superadmin).
   header{} se deja page-local porque difiere (admin sin gap/flex-wrap). */
header h1{font-size:18px;font-weight:900}
header .sub{font-size:12px;color:#cfe4f7}
.logout{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer}
.home-link{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none}

/* Pestañas (marca Trazika): barra navy, pastilla inactiva translúcida
   bien legible, activa en turquesa de acento con sombra → inequívoca. */
.tabs{display:flex;gap:6px;background:var(--brand);padding:0 16px 12px;flex-wrap:wrap}
.tab{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.30);color:#eaf4fc;font-weight:700;font-size:14px;cursor:pointer;transition:.12s}
.tab:hover{background:rgba(255,255,255,.22)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(19,179,166,.40)}

/* Layout de paneles + barra de título de sección */
.panel{display:none}
.panel.active{display:block}
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.bar h2{font-size:20px}

/* Botones (variantes; .btn a secas se queda page-local).
   Primario = degradado turquesa de la landing; añadir = verde; ghost = blanco. */
.btn-save{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none}
.btn-add{background:var(--go);color:#fff;border:none}
.btn-ghost{background:#fff;color:var(--brand);border:1.5px solid var(--line2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent2)}

/* Rejilla de formularios (admin + superadmin; la línea
   .grid input/select/textarea difiere y queda page-local) */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.grid label{font-size:12px;font-weight:700;color:var(--ink2);display:block;margin-bottom:3px}
.grid .full{grid-column:1 / -1}

/* Toast (idéntico en panel/admin/superadmin) */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:11px;font-weight:700;opacity:0;transition:.3s;z-index:200;pointer-events:none}
.toast.show{opacity:1}
.toast.err{background:var(--danger)}