/* ─────────────────────────────────────────────────────────────────────────────
   Tema compartido: tokens de color de los modos oscuro y claro, y los
   componentes que se repiten en todas las páginas (menú lateral, pie de
   usuario, notificaciones, foco, menú en móvil).

   Se enlaza DESPUÉS del CSS de cada página, así que lo de aquí manda.

   Contraste: cada color de texto está comprobado contra los cuatro fondos de su
   tema (bg, surface, surface-2, surface-3) y pasa WCAG AA (≥ 4,5:1). Si se
   cambia uno, hay que volver a medirlo: un gris que «se ve bien» en un monitor
   suele quedarse en 2:1, que es lo que tenía `--c-text-3` antes (#484f58).

   El tema lo pone /tema.js en <html data-theme="…"> antes de pintar.
   ───────────────────────────────────────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0d1117;
  --c-surface: #161b22;
  --c-surface-2: #1c2330;
  --c-surface-3: #212936;
  --c-sidebar: #0d1117;
  --c-hover: rgba(255,255,255,.04);
  --c-border: rgba(255,255,255,.08);
  --c-border-md: rgba(255,255,255,.14);
  --c-overlay: rgba(1,4,9,.7);

  --c-text-1: #e6edf3;
  --c-text-2: #a4aebb;
  --c-text-3: #8590a0;

  /* Acentos usados como TEXTO o borde: brillantes, para leerse sobre oscuro. */
  --c-sky: #38bdf8;
  --c-sky-dim: #0ea5e9;
  --c-teal: #2dd4bf;
  --c-green: #4ade80;
  --c-amber: #fbbf24;
  --c-rose: #fb7185;
  --c-violet: #a78bfa;
  --c-red: #fb8f8f;
  --c-orange: #fb923c;
  --c-blue: #7ab4fb;
  --c-cyan: #22d3ee;
  --c-pink: #f472b6;
  --c-emerald: #34d399;
  --c-success: #3fb950;
  --c-warning: #e3b341;
  --c-danger: #ff7b72;

  /* Fondos SÓLIDOS con texto blanco encima (botones, barras, pastillas):
     tonos 700, que dan ≥ 5:1 con blanco en los dos temas. */
  --c-primary: #0369a1;
  --c-primary-hover: #075985;
  --c-on-primary: #ffffff;
  --c-solid-green: #15803d;
  --c-solid-blue: #1d4ed8;
  --c-solid-violet: #6d28d9;
  --c-solid-red: #b91c1c;
  --c-solid-amber: #b45309;
  --c-solid-gray: #475569;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.7);
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --focus: 0 0 0 3px rgba(56,189,248,.55);
}

:root[data-theme="light"] {
  color-scheme: light;

  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-surface-2: #f1f4f8;
  --c-surface-3: #e6ebf1;
  --c-sidebar: #ffffff;
  --c-hover: rgba(15,23,42,.04);
  --c-border: rgba(15,23,42,.10);
  --c-border-md: rgba(15,23,42,.18);
  --c-overlay: rgba(15,23,42,.45);

  --c-text-1: #0f172a;
  --c-text-2: #3f4b5c;
  --c-text-3: #556170;

  /* Los mismos acentos, oscurecidos hasta pasar AA sobre blanco y grises. */
  --c-sky: #0369a1;
  --c-sky-dim: #0369a1;
  --c-teal: #115e59;
  --c-green: #166534;
  --c-amber: #854d0e;
  --c-rose: #be123c;
  --c-violet: #5b21b6;
  --c-red: #991b1b;
  --c-orange: #9a3412;
  --c-blue: #1d4ed8;
  --c-cyan: #155e75;
  --c-pink: #9d174d;
  --c-emerald: #065f46;
  --c-success: #166534;
  --c-warning: #854d0e;
  --c-danger: #b91c1c;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.08);
  --shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --shadow-lg: 0 20px 48px rgba(15,23,42,.18);
  --focus: 0 0 0 3px rgba(3,105,161,.45);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body { background: var(--c-bg); color: var(--c-text-1); }

/* Foco visible para teclado en todo lo que se pulsa. `:focus-visible` no
   aparece al hacer clic con el ratón, así que no estorba. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

button:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; }

/* Casillas y radios con el color del tema, no el azul del navegador. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-sky-dim); }

/* ── Menú lateral ─────────────────────────────────────────────────────────── */

.sidebar { background: var(--c-sidebar); }
.nav-section-label { color: var(--c-text-3); }
.nav-item { color: var(--c-text-2); }
.nav-item:hover { background: var(--c-hover); color: var(--c-text-1); }
.nav-item.active { color: var(--c-sky); }

/* Pie de usuario: nombre arriba, y debajo una fila con las acciones
   (notificaciones, tema, cerrar sesión). Antes la campana se metía entre el
   nombre y «Cerrar sesión» y se montaba encima del texto. */
.sidebar-user { align-items: flex-start; }
.su-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-name { flex-basis: 100%; max-width: none; }
.su-logout {
  margin-left: auto; padding: 4px 6px; border-radius: var(--r-sm);
  color: var(--c-text-2); font-size: .72rem;
}
.su-logout:hover { color: var(--c-rose); background: var(--c-hover); }

.icono-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px solid var(--c-border-md);
  color: var(--c-text-1); font-size: .9rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.icono-btn:hover { background: var(--c-surface-3); border-color: var(--c-sky); }
.icono-btn svg { width: 16px; height: 16px; }

/* Interruptor de tema para las páginas sin menú lateral (login, acta). */
.tema-flotante { position: fixed; top: 12px; right: 12px; z-index: 50; }
.topbar .tema-flotante, .topbar-actions .tema-flotante { position: static; }

/* ── Notificaciones ───────────────────────────────────────────────────────── */

#notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-badge {
  display: none; position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--c-solid-red); color: #fff;
  font-size: .62rem; font-weight: 700; align-items: center; justify-content: center; line-height: 1;
}
/* Se abre HACIA ARRIBA: la campana vive al pie del menú, y abriéndose hacia
   abajo el panel quedaba fuera de la pantalla. Es `fixed` y no `absolute`
   porque el menú tiene scroll: dentro de él, el panel se recortaba en su borde. */
.notif-panel {
  display: none; position: fixed; bottom: 104px; left: 12px; width: 310px;
  max-height: 60vh; overflow-y: auto; z-index: 9999;
  background: var(--c-surface); border: 1px solid var(--c-border-md);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.notif-panel.abierto { display: block; }
.notif-panel-titulo {
  padding: 10px 14px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
  font-weight: 600; font-size: .83rem; color: var(--c-text-1);
}
.notif-vacio { padding: 20px; text-align: center; color: var(--c-text-2); font-size: .83rem; }
.notif-item {
  padding: 11px 14px; border-bottom: 1px solid var(--c-border); cursor: pointer;
  background: var(--c-surface); transition: background .15s ease;
}
.notif-item:hover { background: var(--c-hover); }
.notif-item.no-leida { background: rgba(245,158,11,.12); }
.notif-msg { font-size: .82rem; color: var(--c-text-1); line-height: 1.4; }
.notif-fecha { font-size: .72rem; color: var(--c-text-2); margin-top: 4px; }

.notif-overlay {
  position: fixed; inset: 0; z-index: 99999; background: var(--c-overlay);
  display: flex; align-items: center; justify-content: center; animation: notif-fade .2s ease;
}
@keyframes notif-fade { from { opacity: 0; } to { opacity: 1; } }
.notif-modal {
  width: min(440px, 92vw); overflow: hidden; border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-border-md); box-shadow: var(--shadow-lg);
}
.notif-modal-cab {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--c-solid-amber); color: #fff; font-weight: 700; font-size: .95rem;
}
.notif-modal-lista { max-height: 340px; overflow-y: auto; }
.notif-modal-item { padding: 13px 18px; border-bottom: 1px solid var(--c-border); }
.notif-modal-acciones { display: flex; gap: 8px; margin-top: 10px; }
.notif-modal-acciones button {
  flex: 1; padding: 8px 0; border-radius: var(--r-sm); cursor: pointer;
  font-weight: 600; font-size: .8rem; font-family: inherit; transition: filter .15s ease;
}
.notif-modal-acciones button:hover { filter: brightness(1.08); }
.notif-btn-descartar { background: transparent; color: var(--c-danger); border: 1.5px solid var(--c-danger); }
.notif-btn-continuar { background: var(--c-solid-amber); color: #fff; border: none; }

/* ── Menú en pantallas estrechas ──────────────────────────────────────────── */

.menu-movil { display: none; }
.menu-fondo { display: none; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 1000; height: 100vh;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
  }
  html.menu-abierto .sidebar { transform: none; }
  html.menu-abierto .menu-fondo {
    display: block; position: fixed; inset: 0; z-index: 999; background: var(--c-overlay);
  }
  .menu-movil { display: inline-flex; flex-shrink: 0; margin-right: 10px; }
  .topbar { padding-left: 14px !important; padding-right: 14px !important; height: auto !important; min-height: 58px; flex-wrap: wrap; gap: 8px; }
  .topbar-sub { display: none; }
  .content, .main, .page-content { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── Menú plegable en escritorio ──────────────────────────────────────────────
   El botón junto al logo encoge el menú a una columna de iconos y lo vuelve a
   abrir. La clase `menu-colapsado` va en <html> y la pone /tema.js antes de
   pintar, igual que el tema, para que no salte al cambiar de página.
   En pantallas estrechas no aplica: allí el menú se esconde entero (☰). */

.sidebar-logo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-plegar { flex-shrink: 0; }
.menu-plegar svg { transition: transform .2s ease; }

@media (min-width: 901px) {
  .sidebar { transition: width .2s ease; overflow-x: hidden; }

  html.menu-colapsado .sidebar { width: 68px; }
  html.menu-colapsado .menu-plegar svg { transform: rotate(180deg); }

  html.menu-colapsado .sidebar-logo { flex-direction: column; padding: 14px 0 10px; gap: 8px; }
  html.menu-colapsado .brand-name { display: none; }

  /* Etiquetas de sección: se quedan como una raya fina que separa grupos. */
  html.menu-colapsado .nav-section-label {
    font-size: 0; padding: 0; margin: 10px 18px; height: 1px; background: var(--c-border-md);
  }

  /* El texto del enlace es un nodo suelto tras el icono: se anula el tamaño de
     letra del enlace y se le devuelve solo al icono. */
  html.menu-colapsado .nav-item { font-size: 0; gap: 0; justify-content: center; padding: 9px 0; }
  html.menu-colapsado .nav-item .ni { font-size: 17px; width: auto; text-align: center; }

  html.menu-colapsado .sidebar-user { flex-direction: column; align-items: center; padding: 10px 0; gap: 6px; }
  html.menu-colapsado .su-info { flex-direction: column; align-items: center; flex: none; }
  html.menu-colapsado .su-name, html.menu-colapsado .su-avatar { display: none; }
  html.menu-colapsado .su-logout { margin-left: 0; font-size: 0; padding: 6px; }
  html.menu-colapsado .su-logout::before { content: '⏻'; font-size: 15px; line-height: 1; }
  html.menu-colapsado .notif-panel { left: 80px; bottom: 12px; }
}

@media (max-width: 900px) {
  .menu-plegar { display: none; }
}