/* ==========================================================
   INTRANET MUNICIPAL DE ANGOL — SISTEMA DE DISEÑO v2
   Ilustre Municipalidad de Angol
   Paleta: Azul institucional + superficies claras
   ========================================================== */

/* =========================================================
   1. VARIABLES / DESIGN TOKENS
   ========================================================= */
:root {
  /* ── Azul institucional (color primario) ── */
  --brand:        #2563EB;   /* Azul corporativo principal */
  --brand-dark:   #1D4ED8;   /* Hover / estado activo */
  --brand-hover:  #1E40AF;   /* Estado presionado */
  --brand-light:  #EFF6FF;   /* Fondo azul muy claro (hover suave) */
  --brand-mid:    #60A5FA;   /* Azul claro para acentos en fondos oscuros */

  /* ── Azul naval profundo — alineado con el login ── */
  --navy:         #0f2647;   /* Mismo navy que el panel del login */
  --navy-deep:    #0a1f3d;   /* Versión más oscura — igual al fondo del login */
  --navy-accent:  #1a3a6b;   /* Acento intermedio — extremo del gradiente login */
  --navy-border:  rgba(255,255,255,.09);
  --navy-text:    #CBD5E1;
  --navy-muted:   #94A3B8;
  --navy-hover:   rgba(255,255,255,.10);
  --navy-active:  rgba(37,99,235,.50);

  /* ── Teal como acento secundario (NO dominante) ── */
  --teal:         #0F766E;
  --teal-light:   #F0FDFA;

  /* ── Alias de compatibilidad (código existente usa --menu-*) ── */
  --menu-bg:      var(--navy);
  --menu-bg-2:    var(--navy-deep);
  --menu-border:  var(--navy-border);
  --menu-text:    var(--navy-text);
  --menu-muted:   var(--navy-muted);
  --menu-hover:   var(--navy-hover);
  --menu-active:  var(--navy-active);

  /* ── Blue secundario (info, enlaces secundarios) ── */
  --blue:         #0284C7;
  --blue-light:   #E0F2FE;

  /* ── Fondos / superficies ── */
  --bg:           #f0f5fa;   /* Azul frío muy suave — alineado con el login */
  --surface:      #FFFFFF;
  --surface-2:    #F8FAFC;
  --border:       #E2E8F0;
  --border-2:     #CBD5E1;

  /* ── Tipografía ── */
  --text:         #1E293B;
  --text-muted:   #64748B;
  --text-light:   #94A3B8;

  /* ── Estados semánticos ── */
  --success:      #16A34A;
  --success-bg:   #F0FDF4;
  --warning:      #D97706;
  --warning-bg:   #FFFBEB;
  --danger:       #DC2626;
  --danger-bg:    #FEF2F2;
  --info:         #0284C7;
  --info-bg:      #E0F2FE;

  /* ── Layout ── */
  --rail-w:       72px;
  --menu-w:       268px;
  --header-h:     62px;
  --footer-h:     48px;

  /* ── Tipografía ── */
  --font:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Radios de borde ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ── Sombras (ajustadas al navy más profundo) ── */
  --shadow-xs: 0 1px 2px rgba(15,38,71,.05);
  --shadow-sm: 0 1px 3px rgba(15,38,71,.10), 0 1px 2px rgba(15,38,71,.06);
  --shadow:    0 4px 6px rgba(15,38,71,.08), 0 2px 4px rgba(15,38,71,.05);
  --shadow-md: 0 10px 15px rgba(15,38,71,.11), 0 4px 6px rgba(15,38,71,.06);
  --shadow-lg: 0 20px 25px rgba(15,38,71,.15), 0 8px 10px rgba(15,38,71,.07);

  /* ── Transiciones ── */
  --tr:      .2s ease;
  --tr-fast: .13s ease;

  /* ── Gaps de contenido ── */
  --content-gap-x: 16px;
  --content-gap-y: 16px;
}

/* =========================================================
   2. BASE GLOBAL
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--brand-dark);
  text-decoration: none;
  transition: color var(--tr-fast);
}
a:hover { color: var(--brand-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* =========================================================
   3. SIDEBAR
   ========================================================= */
.sidebar {
  position: fixed;
  z-index: 1100;
  top: 0;
  left: 0;
  width: var(--rail-w);
  height: 100%;
  /* Sin padding-top: la cabecera SIGMA (sticky, position:0) ocupa ese
     espacio. Un padding-top aquí rompe el umbral de sticky de sus hijos
     (el logo queda "flotando" a mitad de scroll en vez de fijo arriba). */
  overflow-x: hidden;
  overflow-y: auto;
  /* ── Mismo tono base que el footer ── */
  background: #1e293b;
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 2px 0 16px rgba(0,0,0,.25);
  transition: width .22s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}

.sidebar:hover {
  width: var(--menu-w);
  box-shadow: 3px 0 24px rgba(0,0,0,.30);
  transition: width .22s cubic-bezier(.4,0,.2,1) 280ms;
}

.sidebar::before,
.sidebar::after { display: none; }

body.menu-pinned .sidebar {
  width: var(--menu-w);
  box-shadow: 3px 0 24px rgba(0,0,0,.30);
}

/* =========================================================
   4. HEADER
   ========================================================= */
#header,
header {
  position: fixed;
  z-index: 999;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--header-h);
  /* ── Mismo tono que el sidebar y el footer ── */
  background: #1e293b;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 8px rgba(0,0,0,.25);
  padding: 0;
}

/* Sin pseudo-elementos adicionales */
#header::before, header::before,
#header::after,  header::after  { display: none; }

#header .header-content,
header .header-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px 0 calc(var(--rail-w) + 16px);
  transition: padding-left var(--tr);
}

body.menu-pinned #header .header-content,
body.menu-pinned header .header-content {
  padding-left: calc(var(--menu-w) + 16px);
}

/* Brand en header: ocultar nombre en pantallas pequeñas */
@media (max-width: 600px) {
  .header-brand span { display: none; }
}

#header .info-menu,
header .info-menu,
#header .header-right,
header .header-right {
  margin-left: auto;
}

/* Nombre del sistema en el header */
.header-sys-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.90);
  letter-spacing: .4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-sys-name::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--brand);
  border-radius: var(--r-full);
  opacity: .85;
}

/* Fecha en el header */
.header-date {
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid rgba(255,255,255,.06);
  padding-left: 14px;
}

.header-date strong {
  color: #94a3b8;
  font-weight: 500;
}

.header-date::before { display: none; }

/* Logo badge en header */
#header > .logo,
header > .logo {
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 4px 14px rgba(37,99,235,.30);
}

/* =========================================================
   5. CONTENIDO (PAGE)
   ========================================================= */
.page,
.main-content {
  margin-left: calc(var(--rail-w) + 8px) !important;
  padding-top: calc(var(--header-h) + var(--content-gap-y)) !important;
  padding-right: var(--content-gap-x) !important;
  padding-bottom: 72px !important;
  padding-left: var(--content-gap-x) !important;
  box-sizing: border-box;
  min-width: 0;
}

body.menu-pinned .page,
body.menu-pinned .main-content {
  margin-left: calc(var(--menu-w) + 8px) !important;
}
body.menu-pinned .site-footer {
  left: var(--menu-w);
}
/* Footer sigue al sidebar cuando se expande por hover */
body:not(.menu-pinned):has(.sidebar:hover) .site-footer {
  left: var(--menu-w);
  transition: left .22s cubic-bezier(.4,0,.2,1) 280ms;
}

.page > .row,
.main-content > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page .container,
.page .container-fluid,
.main-content .container,
.main-content .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   6. MENÚ — ESTRUCTURA
   ========================================================= */
.sidebar ul {
  list-style: none;
  margin: 4px 8px;
  padding: 0;
}

.sidebar ul li {
  position: relative;
  margin-bottom: 2px;
}

/* Colores de acento por ítem — paleta institucional corporativa
   Usa "nth-child of S" (Chrome 111+) para ignorar li.menu-section.
   La paleta se repite en ciclos de 24 (An+B) en vez de listar posiciones
   fijas: así cualquier módulo agregado después del ítem 24 también recibe
   color, en vez de quedar sin --accent asignado (antes se cortaba ahí). */
.sidebar > ul > li:nth-child(24n+1  of li:not(.menu-section)) { --accent: #60A5FA; }  /* Azul claro */
.sidebar > ul > li:nth-child(24n+2  of li:not(.menu-section)) { --accent: #818CF8; }  /* Índigo */
.sidebar > ul > li:nth-child(24n+3  of li:not(.menu-section)) { --accent: #34D399; }  /* Esmeralda */
.sidebar > ul > li:nth-child(24n+4  of li:not(.menu-section)) { --accent: #6EE7B7; }  /* Menta */
.sidebar > ul > li:nth-child(24n+5  of li:not(.menu-section)) { --accent: #2DD4BF; }  /* Teal */
.sidebar > ul > li:nth-child(24n+6  of li:not(.menu-section)) { --accent: #5EEAD4; }  /* Teal suave */
.sidebar > ul > li:nth-child(24n+7  of li:not(.menu-section)) { --accent: #4ADE80; }  /* Verde */
.sidebar > ul > li:nth-child(24n+8  of li:not(.menu-section)) { --accent: #38BDF8; }  /* Cielo */
.sidebar > ul > li:nth-child(24n+9  of li:not(.menu-section)) { --accent: #7DD3FC; }  /* Celeste */
.sidebar > ul > li:nth-child(24n+10 of li:not(.menu-section)) { --accent: #FBBF24; }  /* Ámbar */
.sidebar > ul > li:nth-child(24n+11 of li:not(.menu-section)) { --accent: #FCD34D; }  /* Ámbar claro */
.sidebar > ul > li:nth-child(24n+12 of li:not(.menu-section)) { --accent: #A78BFA; }  /* Violeta */
.sidebar > ul > li:nth-child(24n+13 of li:not(.menu-section)) { --accent: #C4B5FD; }  /* Lavanda */
.sidebar > ul > li:nth-child(24n+14 of li:not(.menu-section)) { --accent: #93C5FD; }  /* Azul pastel */
.sidebar > ul > li:nth-child(24n+15 of li:not(.menu-section)) { --accent: #F9A8D4; }  /* Rosa suave */
.sidebar > ul > li:nth-child(24n+16 of li:not(.menu-section)) { --accent: #FCA5A5; }  /* Salmón */
.sidebar > ul > li:nth-child(24n+17 of li:not(.menu-section)) { --accent: #FB923C; }  /* Naranja */
.sidebar > ul > li:nth-child(24n+18 of li:not(.menu-section)) { --accent: #F472B6; }  /* Rosa */
.sidebar > ul > li:nth-child(24n+19 of li:not(.menu-section)) { --accent: #A3E635; }  /* Lima */
.sidebar > ul > li:nth-child(24n+20 of li:not(.menu-section)) { --accent: #D8B4FE; }  /* Violeta med */
.sidebar > ul > li:nth-child(24n+21 of li:not(.menu-section)) { --accent: #67E8F9; }  /* Cian */
.sidebar > ul > li:nth-child(24n+22 of li:not(.menu-section)) { --accent: #86EFAC; }  /* Verde claro */
.sidebar > ul > li:nth-child(24n+23 of li:not(.menu-section)) { --accent: #FDE68A; }  /* Amarillo */
.sidebar > ul > li:nth-child(24n+24 of li:not(.menu-section)) { --accent: #A5F3FC; }  /* Cian claro */

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — DISEÑO FOOTER-STYLE v5
   Mismo lenguaje visual del footer: #1e293b, bordes sutiles,
   acento azul sólido, texto slate, sin glassmorphism
   ═══════════════════════════════════════════════════════════ */

/* ── Ítem base ── */
.sidebar ul li a,
ul.submenu li a {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 8px;
  color: #94a3b8;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background .12s, color .12s;
}

.sidebar > ul > li > a::before { display: none; }

/* ── Indicador lateral activo ── */
.sidebar > ul > li { position: relative; }

.sidebar > ul > li.active::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #2563eb);
  transition: height var(--tr);
  z-index: 2;
}

/* ── Hover: sutil como footer ── */
.sidebar ul li:hover > a {
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
}

/* ── Activo: azul suave + texto blanco ── */
.sidebar ul li.active > a {
  background: rgba(37,99,235,.18);
  color: #fff;
  border-left: none;
}

.sidebar ul li.active > a span {
  font-weight: 600;
  color: #fff;
}

/* ── Iconos: 34×34, accent color sin box shadows ── */
.sidebar ul li a i,
.sidebar ul li a .bi {
  grid-column: 1;
  width: 34px; min-width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--accent, #60a5fa);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .12s, color .12s;
}

/* Hover icon */
.sidebar ul li:hover > a i,
.sidebar ul li:hover > a .bi {
  background: rgba(255,255,255,.09);
  color: var(--accent, #93c5fd);
  border-color: rgba(255,255,255,.10);
}

/* Active icon: color sólido limpio */
.sidebar ul li.active > a i,
.sidebar ul li.active > a .bi {
  background: var(--accent, #2563eb);
  border-color: transparent;
  color: #fff;
}

/* ── Texto del menú ── */
.sidebar ul li a span {
  grid-column: 2;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--tr), transform var(--tr);
}

.sidebar:hover ul li a span,
body.menu-pinned .sidebar ul li a span {
  opacity: 1;
  transform: translateX(0);
}

/* ── Rail (colapsado) ── */
body:not(.menu-pinned) .sidebar:not(:hover) ul li a {
  grid-template-columns: 36px 0px;
  column-gap: 0;
  padding-left: 11px;
  padding-right: 11px;
}

body:not(.menu-pinned) .sidebar:not(:hover) ul li a span {
  opacity: 0; width: 0; overflow: hidden; transform: translateX(-4px);
}

body:not(.menu-pinned) .sidebar:not(:hover) > ul > li.active::after {
  height: 20px;
}

/* ── Separador HR ── */
.sidebar hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 4px 10px;
}

/* ── Etiquetas de sección — visibles, estilo footer ── */
.sidebar li.menu-section {
  list-style: none;
  padding: 0 10px;
  margin: 10px 0 3px;
  pointer-events: none;
  height: auto;
  background: none;
  border: none;
}
.sidebar li.menu-section span {
  display: none !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #475569;
  padding-left: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ── Tooltip modo rail ─────────────────────────────────── */
#rail-tip {
  position: fixed;
  left: calc(var(--rail-w) + 12px);
  top: 0;
  background: #0f172a;
  color: #e2e8f0;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translateX(-4px) translateY(-50%);
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}
#rail-tip.show {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
}
#rail-tip::before {
  content: '';
  position: absolute;
  right: 100%; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #0f172a;
}

/* =========================================================
   7. SUBMENÚ
   ========================================================= */
ul.submenu {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0 0 0 12px;
  padding: 0 0 0 10px;
  border-left: 1px solid rgba(255,255,255,.06);
  transition: max-height .28s ease, opacity .2s ease, margin .2s ease;
}

.sidebar li.open > ul.submenu {
  max-height: 1200px;
  opacity: 1;
  margin-bottom: 4px;
  margin-top: 2px;
}

body:not(.menu-pinned) .sidebar:not(:hover) li.open > ul.submenu {
  max-height: 0;
  opacity: 0;
}

ul.submenu li { margin-bottom: 1px; }

ul.submenu li a {
  grid-template-columns: 20px minmax(0,1fr) !important;
  column-gap: 8px !important;
  min-height: 34px;
  padding: 5px 8px 5px 14px;
  border-radius: var(--r-xs);
  font-size: 12.5px;
  color: #94A3B8;
}

ul.submenu li a::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(255,255,255,.20);
  transform: translateY(-50%);
}

ul.submenu li a:hover {
  background: rgba(255,255,255,.07);
  color: #E2E8F0;
}

ul.submenu li a i,
ul.submenu li a .bi {
  grid-column: 1 !important;
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 13px;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
}

ul.submenu li a span {
  grid-column: 2 !important;
  min-width: 0;
  opacity: 1;
  transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   8. PERFIL DROPDOWN
   ========================================================= */
.info-menu {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Cada ítem del menú derecho: igual que los ft-item del footer */
.info-menu > li {
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255,255,255,.06);
  padding: 0 10px;
}

.info-menu li.profile { position: relative; }

/* Avatar pill — limpio, sin gradiente */
.profile a.toggle {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .12s;
}

.profile a.toggle:hover { opacity: .8; }

.info-menu li.profile a img,
.profile-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
}

.dropdown-toggle::after { display: none; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 2000;
  display: none;
  min-width: 185px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.dropdown-menu.show { display: block; }

.dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text);
  transition: background var(--tr-fast);
}

.dropdown-menu li a:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
  text-decoration: none;
}

.dropdown-menu li a i,
.dropdown-menu li a .bi {
  font-size: 15px;
  color: var(--brand);
  width: 18px;
}

/* =========================================================
   9. COMPONENTES
   ========================================================= */

/* ── 9.1 CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid rgba(226,232,240,.75);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 4px rgba(15,38,71,.06), 0 6px 20px rgba(15,38,71,.05);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow var(--tr), transform var(--tr);
}

.card:hover {
  box-shadow: 0 4px 16px rgba(15,38,71,.10), 0 12px 32px rgba(15,38,71,.07);
}

.card-header {
  background: linear-gradient(135deg, var(--navy-deep, #0a1f3d) 0%, var(--navy, #0f2647) 55%, var(--navy-accent, #1a3a6b) 100%) !important;
  border-bottom: none;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .05px;
  position: relative;
}

/* Sin franja — el gradiente ya da profundidad */
.card-header::before { display: none; }

.card-header .bi,
.card-header i {
  color: rgba(255,255,255,.85);
  font-size: 16px;
}

/* Variante clara para formularios/info */
.card-header.card-header-light {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-bottom: 1.5px solid var(--border);
}
.card-header.card-header-light .bi,
.card-header.card-header-light i { color: var(--brand); }

/* Fix de contraste: .card-header tiene color:#fff por defecto (pensado para fondos
   oscuros/degradados). Si una página le agrega un fondo claro de Bootstrap sin
   ajustar el texto, queda blanco-sobre-claro e ilegible — sobre todo en modo claro,
   donde no hay ningún color de página oscuro detrás que lo compense. */
.card-header.bg-transparent,
.card-header.bg-light,
.card-header.bg-white,
.card-header.bg-warning,
.card-header[class*="bg-warning-subtle"],
.card-header[class*="bg-opacity-10"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.card-header.bg-transparent .bi,
.card-header.bg-light .bi,
.card-header.bg-white .bi,
.card-header.bg-warning .bi,
.card-header[class*="bg-warning-subtle"] .bi,
.card-header[class*="bg-opacity-10"] .bi {
  color: var(--brand) !important;
}

/* Mismo problema de contraste: Summernote reutiliza .card-header para su
   barra de herramientas (note-toolbar), que es clara por defecto — sus
   íconos (note-icon-*, no llevan clase .bi) quedaban blanco-sobre-claro. */
.note-toolbar.card-header {
  color: var(--text) !important;
}
.note-toolbar.card-header .bi,
.note-toolbar.card-header i {
  color: var(--brand) !important;
}

/* Variantes de color */
.card-header.card-header-success {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%) !important;
}
.card-header.card-header-warning {
  background: linear-gradient(135deg, #78350f 0%, #d97706 100%) !important;
}
.card-header.card-header-danger {
  background: linear-gradient(135deg, #7f1d1d 0%, #ef4444 100%) !important;
}
.card-header.card-header-purple {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%) !important;
}
.card-header.card-header-teal {
  background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%) !important;
}

.card-body { padding: 20px; }

.card-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.card-header.d-flex { gap: 10px; }

/* ── 9.2 TABLAS ── */
.table {
  font-size: 13.5px;
  color: var(--text);
  border-color: var(--border);
}

/* Cabecera azul institucional */
.table > thead {
  background: linear-gradient(135deg, var(--navy, #0f2647) 0%, var(--navy-deep, #0a1f3d) 100%) !important;
}

.table > thead > tr > th {
  background-color: transparent !important;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .75px;
  color: rgba(255,255,255,.85);
  border-bottom: none !important;
  border-color: rgba(255,255,255,.10) !important;
  padding: 12px 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.table > thead > tr > th + th {
  border-left: 1px solid rgba(255,255,255,.08) !important;
}

/* Filas tbody */
.table > tbody > tr > td {
  padding: 10px 14px;
  vertical-align: middle;
  border-color: var(--border);
}

/* table-bordered: solo líneas horizontales */
.table-bordered {
  border: none !important;
}
.table-bordered > :not(caption) > * {
  border-width: 0 !important;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0 !important;
  border-color: var(--border) !important;
}
.table-bordered > thead > tr > * {
  border-color: rgba(255,255,255,.10) !important;
}

/* Franjas alternas */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(37,99,235,.03);
}

/* Hover de fila */
.table > tbody > tr:hover > td {
  background: #f0f6ff;
  transition: background var(--tr-fast);
}

/* table-dark override → gradiente navy */
.table-dark > thead,
.table-dark {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-accent) 100%) !important;
}
.table-dark > thead > tr > th,
.table-dark th {
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
}

/* Separadores tbody más suaves */
.table > tbody > tr > td {
  border-color: rgba(226,232,240,.6);
}
.table > tbody > tr:last-child > td { border-bottom: none; }

/* Contenedor responsive */
.table-responsive {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 8px rgba(30,58,95,.07);
}

.table-responsive .table { margin-bottom: 0; }

.table > thead + tbody > tr:first-child > td { border-top: none; }
.table > tbody > tr:last-child > td          { border-bottom: none; }

/* Scrollbar horizontal de tabla */
.table-responsive::-webkit-scrollbar { height: 5px; }
.table-responsive::-webkit-scrollbar-track { background: var(--surface-2); }
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 3px;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ── 9.3 BOTONES ── */
.btn {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--r-sm);
  padding: 7px 16px;
  transition: all var(--tr-fast);
  border-width: 1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

.btn-sm {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-xs);
}

.btn-group .btn-sm { border-radius: 0; }
.btn-group .btn-sm:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.btn-group .btn-sm:last-child  { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.btn-group .btn-sm:only-child  { border-radius: var(--r-xs); }

td > a.btn-sm,
td > a.btn { margin: 1px 2px; }

.btn-lg {
  font-size: 15px;
  padding: 10px 22px;
  border-radius: var(--r-md);
}

/* Azul institucional — botón primario (estilo login) */
.btn-primary {
  background: linear-gradient(135deg, #1d4ed8, var(--brand));
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37,99,235,.28);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--brand-hover), var(--brand-dark));
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.38);
  transform: translateY(-1px);
}
.btn-primary:active {
  background: linear-gradient(135deg, var(--brand-hover), #1d4ed8);
  border-color: var(--brand-hover);
  color: #fff;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}

/* Info: azul cielo */
.btn-info {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn-info:hover,
.btn-info:focus {
  background: #0369A1;
  border-color: #0369A1;
  color: #fff;
  box-shadow: 0 4px 12px rgba(2,132,199,.28);
}

/* Secundario */
.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: #E2E8F0;
  border-color: #94A3B8;
  color: var(--text);
}

/* Éxito */
.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.btn-success:hover {
  background: #15803D;
  border-color: #15803D;
  color: #fff;
  box-shadow: 0 4px 12px rgba(22,163,74,.28);
}

/* Peligro */
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
  box-shadow: 0 4px 12px rgba(220,38,38,.28);
}

/* Advertencia */
.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: #fff;
}
.btn-warning:hover {
  background: #B45309;
  border-color: #B45309;
  color: #fff;
}

/* Outline primario */
.btn-outline-primary {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Outline success */
.btn-outline-success {
  border-color: var(--success);
  color: var(--success);
  background: transparent;
}
.btn-outline-success:hover {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* Outline secondary */
.btn-outline-secondary {
  border-color: var(--border-2);
  color: var(--text-muted);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}

/* Outline danger */
.btn-outline-danger {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}
.btn-outline-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* ── 9.4 FORMULARIOS ── */
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  display: block;
}

.mb-3 > strong:first-child,
.form-group > strong:first-child {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.form-control,
.form-select {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
  background: #ffffff;
  color: var(--text);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: #94a3b8;
}

.form-control::placeholder { color: #cbd5e1; }

.form-control:disabled,
.form-select:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .7;
}

textarea.form-control { min-height: 90px; resize: vertical; }

.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .form-control:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.input-group-text {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-muted);
  font-size: 13.5px;
}

/* Checkboxes y radios */
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  border-color: var(--brand);
}

/* ── 9.5 BADGES ── */
.badge {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge.bg-success   { background: var(--success)   !important; }
.badge.bg-danger    { background: var(--danger)     !important; }
.badge.bg-warning   { background: var(--warning)    !important; color: #fff !important; }
.badge.bg-info      { background: var(--info)        !important; color: #fff !important; }
.badge.bg-primary   { background: var(--brand)      !important; }
.badge.bg-secondary { background: var(--text-muted) !important; }

/* Badges de estado con tono suave */
.badge-status-active {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(22,163,74,.25);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  display: inline-block;
}

.badge-status-inactive {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(220,38,38,.20);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  display: inline-block;
}

/* ── 9.6 ALERTAS ── */
.alert {
  border: 0;
  border-left: 4px solid;
  border-radius: var(--r-md);
  font-size: 13.5px;
  padding: 12px 16px;
}

.alert-success {
  background: var(--success-bg);
  border-left-color: var(--success);
  color: #14532D;
}

.alert-danger {
  background: var(--danger-bg);
  border-left-color: var(--danger);
  color: #7F1D1D;
}

.alert-warning {
  background: var(--warning-bg);
  border-left-color: var(--warning);
  color: #78350F;
}

.alert-info {
  background: var(--info-bg);
  border-left-color: var(--info);
  color: #0C4A6E;
}

/* ── 9.7 STAT BOXES (panel-box / panel-icon) ── */
.panel-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(30,58,95,.10), 0 1px 4px rgba(30,58,95,.06);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
  transition: box-shadow var(--tr), transform var(--tr);
}

.panel-box:hover {
  box-shadow: 0 8px 28px rgba(30,58,95,.14), 0 2px 8px rgba(30,58,95,.07);
  transform: translateY(-3px);
}

.panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  min-width: 90px;
  padding: 20px;
  border-radius: 0;
}

.panel-icon i,
.panel-icon .bi {
  font-size: 36px;
  color: #fff;
  line-height: 1;
}

.panel-value {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-value h2 {
  font-size: 38px;
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.5px;
}

.panel-value p,
.panel-value small {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin: 0;
}

/* Colores de iconos stat */
.bg-green    { background: #16A34A !important; }
.bg-blue     { background: var(--brand) !important; }
.bg-blue2    { background: #1D4ED8 !important; }
.bg-red      { background: var(--danger) !important; }
.bg-yellow   { background: var(--warning) !important; }
.bg-purple   { background: #7C3AED !important; }
.bg-teal     { background: var(--teal) !important; }
.bg-maroon   { background: #9F1239 !important; }
.bg-fuchsia  { background: #A21CAF !important; }
.bg-navy2    { background: var(--navy) !important; }
.bg-lighten-1{ background: #475569 !important; }

/* ── 9.8 BREADCRUMB / TÍTULO DE PÁGINA ── */
.page-header,
.page-title {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.page-title h1,
.page-title h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-title h1 .bi,
.page-title h2 .bi { color: var(--brand); }

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--text-light); }

/* ── 9.9 IMPRESIÓN ── */
.btn-print,
a[onclick*="print"],
button[onclick*="print"] {
  background: #fff;
  color: var(--text-muted);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr-fast);
}

.btn-print:hover,
a[onclick*="print"]:hover {
  background: var(--surface-2);
  border-color: var(--brand);
  color: var(--brand);
}

/* ── 9.10 UTILIDADES ── */
.text-brand   { color: var(--brand)  !important; }
.bg-brand     { background: var(--brand) !important; color: #fff; }
.border-brand { border-color: var(--brand) !important; }

.text-teal    { color: var(--teal) !important; }
.bg-teal-util { background: var(--teal) !important; color: #fff; }

.box,
.card,
.table-responsive { margin-top: 6px; }

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* ── 9.11 DIVISORES Y SECCIONES DE FORMULARIO ── */
.section-divider {
  border: 0;
  border-top: 2px solid var(--border);
  margin: 24px 0 20px;
  position: relative;
}

/* Subtítulos dentro de cards */
.card-body h5,
.card-body h6 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--brand);
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

td.text-center .btn-group,
td.text-center > a.btn { display: inline-flex; }

/* =========================================================
   10. RESPONSIVE
   ========================================================= */

/* ── Tablet/iPad landscape (1024px) ── */
@media (max-width: 1024px) {
  .page, .main-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ── Tablet/iPad portrait (991px) ── */
@media (max-width: 991px) {
  .header-date   { display: none; }
  .header-sys-name { display: none; }

  /* Tablas: scroll horizontal obligatorio en tablet */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Modales: centrado y máximo ancho */
  .modal-dialog:not(.modal-fullscreen-lg-down) { max-width: min(92vw, 680px); }

  /* Botones de acción: no se cortan */
  .acciones-wrap { gap: 3px !important; }
  .acciones-wrap .btn { padding: .25rem .45rem !important; font-size: .78rem !important; }

  /* Cards home: máximo 3 por fila */
  .mod-group .row .col-6 { flex: 0 0 auto; width: 50%; }
}

/* ── Móvil (767px) ── */
@media (max-width: 767px) {
  .sidebar {
    width: min(88vw, 280px);
    transform: translateX(-100%);
    transition: transform var(--tr);
  }

  .sidebar:hover { width: min(88vw, 280px); }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  /* Botón hamburguesa visible en móvil */
  .btn-hamburger { display: flex !important; }

  #header,
  header {
    left: 0;
    width: 100%;
    padding: 0;
  }

  #header .header-content,
  header .header-content {
    padding: 0 12px;
  }

  .page,
  .main-content {
    margin-left: 0 !important;
    padding: calc(var(--header-h) + 12px) 12px 72px !important;
  }

  .sidebar ul li a {
    grid-template-columns: 32px minmax(0,1fr) !important;
    column-gap: 10px !important;
  }

  .sidebar ul li a span {
    opacity: 1 !important;
    width: auto !important;
    transform: none !important;
  }

  .sidebar li.open > ul.submenu,
  .sidebar li.active > ul.submenu { display: block; }

  .card-body { padding: 14px; }

  .table > thead > tr > th,
  .table > tbody > tr > td { padding: 6px 8px; font-size: .82rem; }

  /* Textos de tabla: no romper palabras largas */
  .table td { word-break: break-word; }

  /* Formularios: una columna en móvil */
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"] { width: 100% !important; }

  /* Modales: pantalla completa en móvil */
  .modal-dialog:not(.modal-fullscreen-sm-down) {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100vh;
    align-items: flex-end;
  }
  .modal-content {
    border-radius: 16px 16px 0 0;
  }

  /* Botones: no se cortan */
  .btn { white-space: normal; }
  .acciones-wrap { flex-wrap: wrap; gap: 3px !important; }

  /* app-cards en 2 columnas cómodas */
  .app-card { min-height: 100px; }

  /* Ocultar textos no esenciales en tabla */
  .hide-mobile { display: none !important; }

  /* Card headers: texto más pequeño */
  .card-header h5, .card-header h6 { font-size: .92rem; }

  /* Footer: solo icono en móvil */
  .footer-center { display: none; }
}

/* ── Móvil pequeño (480px) ── */
@media (max-width: 480px) {
  .page, .main-content {
    padding: calc(var(--header-h) + 8px) 8px 68px !important;
  }

  .card-body { padding: 10px; }

  .btn-sm { padding: .2rem .4rem !important; font-size: .75rem !important; }

  /* Tabs horizontales: scroll en móvil pequeño */
  .nav-tabs, .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex-shrink: 0; }

  /* KPI cards: 2 por fila */
  .kpi-card { min-width: 0; }
}

/* =========================================================
   DARK MODE — [data-theme="dark"]
   Activado vía localStorage('intranet-theme') = 'dark'
   ========================================================= */

/* ── Transiciones suaves al cambiar tema (sólo post-carga) ── */
.theme-ready,
.theme-ready .card,
.theme-ready .mod-card,
.theme-ready .manual-card,
.theme-ready .kpi-card,
.theme-ready .table,
.theme-ready .form-control,
.theme-ready .form-select,
.theme-ready .input-group-text,
.theme-ready .modal-content,
.theme-ready .dropdown-menu,
.theme-ready .alert,
.theme-ready .page-header,
.theme-ready .site-footer {
  transition: background-color .22s ease, border-color .22s ease,
              color .18s ease, box-shadow .22s ease !important;
}

/* ── Variables CSS ── */
[data-theme="dark"] {
  --bg:         #0d1117;
  --surface:    #161b22;
  --surface-2:  #1e2530;
  --border:     rgba(255,255,255,.08);
  --border-2:   rgba(255,255,255,.14);
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --brand-light: rgba(37,99,235,.16);
  --blue-light:  rgba(2,132,199,.16);
  --teal-light:  rgba(15,118,110,.16);
  --success-bg:  rgba(22,163,74,.16);
  --warning-bg:  rgba(217,119,6,.16);
  --danger-bg:   rgba(220,38,38,.16);
  --info-bg:     rgba(2,132,199,.16);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --shadow:    0 4px 6px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.28);
  --shadow-md: 0 10px 15px rgba(0,0,0,.45), 0 4px 6px rgba(0,0,0,.32);
  color-scheme: dark;
}

/* ── Body ── */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

/* ── Sidebar dark mode — aún más oscuro que en light ── */
[data-theme="dark"] .sidebar {
  background: #0d1117;
  border-right-color: rgba(255,255,255,.04);
}
[data-theme="dark"] .sidebar ul li.active > a {
  background: rgba(37,99,235,.20);
}
[data-theme="dark"] .sidebar ul li:hover > a {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .sidebar li.menu-section span {
  color: #475569;
  border-bottom-color: rgba(255,255,255,.04);
}

/* ── Headings ── */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text); }

[data-theme="dark"] .text-muted    { color: var(--text-muted) !important; }
[data-theme="dark"] .text-dark     { color: var(--text)       !important; }
[data-theme="dark"] hr             { border-color: var(--border); opacity: 1; }

/* ── Cards ── */
[data-theme="dark"] .card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .card:hover {
  border-color: var(--border-2);
  box-shadow: 0 4px 18px rgba(0,0,0,.42);
}
[data-theme="dark"] .card-header {
  background: linear-gradient(135deg, #0a1625 0%, #0f2240 55%, #152d52 100%);
  border-color: rgba(255,255,255,.06);
  color: #fff;
}
[data-theme="dark"] .card-header.card-header-light {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .card-footer {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .card-body h5,
[data-theme="dark"] .card-body h6 { color: var(--text); }

/* ── Tablas ── */
[data-theme="dark"] .table {
  --bs-table-bg: var(--surface);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .table > thead > tr > th {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
[data-theme="dark"] .table > tbody > tr > td {
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .table > tbody > tr:hover > td,
[data-theme="dark"] .table > tbody > tr:hover > th {
  background: rgba(255,255,255,.04) !important;
  color: var(--text);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255,255,255,.03);
  color: var(--text);
}
[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--border); }
[data-theme="dark"] .table-responsive { border-color: var(--border); }

/* ── Formularios ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(37,99,235,.22);
}
[data-theme="dark"] .form-control:hover:not(:focus):not(:disabled),
[data-theme="dark"] .form-select:hover:not(:focus):not(:disabled) {
  border-color: rgba(255,255,255,.22);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-light); }
[data-theme="dark"] .input-group-text {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-muted);
}
[data-theme="dark"] .form-label,
[data-theme="dark"] label { color: var(--text); }
[data-theme="dark"] .form-text  { color: var(--text-muted); }
[data-theme="dark"] .form-check-input {
  background-color: var(--surface-2);
  border-color: var(--border-2);
}

/* ── Dropdowns ── */
[data-theme="dark"] .dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] .dropdown-menu li a,
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-menu li a:hover,
[data-theme="dark"] .dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
[data-theme="dark"] .dropdown-divider { border-color: var(--border); }

/* ── Alertas ── */
[data-theme="dark"] .alert { border-color: var(--border); }
[data-theme="dark"] .alert-success { background: var(--success-bg); color: #86efac; }
[data-theme="dark"] .alert-danger  { background: var(--danger-bg);  color: #fca5a5; }
[data-theme="dark"] .alert-warning { background: var(--warning-bg); color: #fde68a; }
[data-theme="dark"] .alert-info    { background: var(--info-bg);    color: #7dd3fc; }

/* ── Modales ── */
[data-theme="dark"] .modal-content {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .modal-header {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .modal-footer {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── Paginación ── */
[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .pagination li a {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="dark"] .pagination .page-link:hover,
[data-theme="dark"] .pagination li a:hover {
  background: var(--surface-2);
  color: var(--text);
}
[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination li.active a {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
[data-theme="dark"] .pagination .page-item.disabled .page-link,
[data-theme="dark"] .pagination li.disabled a {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-light);
}

/* ── List groups ── */
[data-theme="dark"] .list-group-item {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .list-group-item:hover { background: var(--surface-2); }

/* ── Nav tabs ── */
[data-theme="dark"] .nav-tabs { border-color: var(--border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--text-muted); }
[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--text);
  border-color: var(--border) var(--border) transparent;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--surface);
  border-color: var(--border) var(--border) var(--surface);
  color: var(--text);
}

/* ── Page header / title ── */
[data-theme="dark"] .page-header,
[data-theme="dark"] .page-title { border-color: var(--border); }
[data-theme="dark"] .page-title h1,
[data-theme="dark"] .page-title h2 { color: var(--text); }

/* ── Footer ── */
/* [dark footer: ahora definido en bloque §15 footer] */

/* ── Scrollbars ── */
[data-theme="dark"] { scrollbar-color: rgba(255,255,255,.16) transparent; }
[data-theme="dark"] ::-webkit-scrollbar-track  { background: var(--surface-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.16); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

/* ══ HOME ══════════════════════════════════════════════════ */

/* Banner hero */
[data-theme="dark"] .home-hero {
  background: linear-gradient(135deg, #090e1a 0%, #0d1f40 55%, #0e2a52 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* KPI strip */
[data-theme="dark"] .kpi-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .kpi-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  color: var(--text);
}
[data-theme="dark"] .kpi-lbl { color: var(--text-muted); }

/* Mod-cards */
[data-theme="dark"] .mod-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .mod-card:hover {
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] .mc-name  { color: var(--text); }
[data-theme="dark"] .mc-desc  { color: var(--text-muted); }
[data-theme="dark"] .mc-links { border-top-color: var(--border); }
[data-theme="dark"] .mc-icon  {
  background: color-mix(in srgb, var(--mc-bg, #eff6ff) 18%, rgba(255,255,255,.05));
}
[data-theme="dark"] .mc-link  {
  background: color-mix(in srgb, var(--mc-bg, #eff6ff) 14%, rgba(255,255,255,.04));
}

/* Manual-cards */
[data-theme="dark"] .manual-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .manual-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
[data-theme="dark"] .manual-card .mn-name  { color: var(--text); }
[data-theme="dark"] .manual-card .mn-pdf   {
  border-left-color: var(--border);
  color: var(--text-light);
}
[data-theme="dark"] .manual-card .mn-pdf:hover { background: var(--danger-bg); color: #fca5a5; }
[data-theme="dark"] .manual-card .mn-icon  {
  background: color-mix(in srgb, var(--mn-bg, #eff6ff) 20%, rgba(255,255,255,.05));
}

/* Group headers */
[data-theme="dark"] .mod-group-line {
  background: linear-gradient(90deg, var(--border-2) 0%, transparent 100%);
}
[data-theme="dark"] .mod-group-tag {
  background: color-mix(in srgb, var(--gtag-bg, #f1f5f9) 16%, rgba(255,255,255,.06));
  color: color-mix(in srgb, var(--gtag-c, #475569) 80%, #fff 20%) !important;
}

/* ══ NOTIFICACIONES DROPDOWN ══════════════════════════════ */
[data-theme="dark"] #notif-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] #notif-dropdown .d-flex.border-bottom,
[data-theme="dark"] #notif-dropdown .border-top {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] #notif-lista { background: var(--surface) !important; }
[data-theme="dark"] #notif-lista a {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
}

/* ── table-light override ── */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table-light > thead > tr > th,
[data-theme="dark"] .table-light > tbody > tr > td,
[data-theme="dark"] .table > thead.table-light > tr > th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* ── table-warning dark ── */
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] tr.table-warning > td {
  --bs-table-bg: rgba(217,119,6,.18) !important;
  background-color: rgba(217,119,6,.18) !important;
  color: #fde68a !important;
  border-color: rgba(217,119,6,.25) !important;
}

/* ── Inputs de fecha/hora ── */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
  color-scheme: dark;
}

/* ── Modal backdrop menos agresivo ── */
[data-theme="dark"] .modal-backdrop {
  opacity: .55 !important;
}

/* ── estilo.css overrides (form-container y campos) ── */
[data-theme="dark"] .form-container {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .form-container h1,
[data-theme="dark"] .form-container h2 {
  color: var(--text);
  border-bottom-color: var(--brand);
}

/* ── Chip "Jefe Directo" y similares con fondo claro ── */
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"] {
  background: rgba(2,132,199,.12) !important;
  border-color: rgba(2,132,199,.25) !important;
  color: var(--text) !important;
}
[data-theme="dark"] [style*="background:#fff"] {
  background: var(--surface-2) !important;
}
[data-theme="dark"] [style*="background: #fff"] {
  background: var(--surface-2) !important;
}
[data-theme="dark"] [style*="background:#f8fafc"] {
  background: var(--surface-2) !important;
}
[data-theme="dark"] [style*="background: #f8fafc"] {
  background: var(--surface-2) !important;
}
[data-theme="dark"] [style*="background:#f1f5f9"] {
  background: var(--surface-2) !important;
}

/* ── Dropdowns autocomplete inline ── */
[data-theme="dark"] [id$="_dropdown"],
[data-theme="dark"] .autocomplete-results {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── table-bordered dark ── */
[data-theme="dark"] .table-bordered {
  border-color: var(--border);
}

/* ── bg-white class ── */
[data-theme="dark"] .bg-white {
  background: var(--surface) !important;
}
[data-theme="dark"] .text-dark {
  color: var(--text) !important;
}

@media print {
  .sidebar,
  #header,
  header,
  footer,
  .site-footer,
  .btn-print { display: none !important; }

  .page,
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* =========================================================
   11. PAGINACIÓN (compatible BS3 + BS5)
   ========================================================= */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.pagination li a,
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(30,58,95,.07);
  transition: all var(--tr-fast);
}

.pagination li a:hover,
.pagination .page-link:hover {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand-dark);
}

.pagination li.active a,
.pagination .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  cursor: default;
  box-shadow: 0 2px 6px rgba(37,99,235,.28);
}

.pagination li.disabled a,
.pagination .page-item.disabled .page-link {
  color: var(--text-light);
  background: var(--surface-2);
  border-color: var(--border);
  pointer-events: none;
  box-shadow: none;
}

/* =========================================================
   12. TABLE HOVER
   ========================================================= */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
  background-color: rgba(37,99,235,.05) !important;
  transition: background-color var(--tr-fast);
}

/* =========================================================
   13. ACTIVE — PÁGINA ACTUAL
   ========================================================= */
.sidebar ul li.active > a {
  background: var(--navy-active);
  color: #fff;
}

.sidebar ul li.active > a::before {
  transform: scaleY(1);
  opacity: 1;
}

/* =========================================================
   14. FOCUS VISIBLE — ACCESIBILIDAD
   ========================================================= */
.sidebar ul li a:focus-visible,
ul.submenu li a:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37,99,235,.20);
}

.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================
   15. FOOTER — CLARO Y LIMPIO
   ========================================================= */
:root { --footer-h: 42px; }

/* ══════════════════════════════════════════════════════
   §15  FOOTER — Barra de estado estilo IDE
   ══════════════════════════════════════════════════════ */
:root { --footer-h: 28px; }

.site-footer {
  position: fixed;
  left: var(--rail-w); right: 0; bottom: 0;
  width: auto;
  height: var(--footer-h);
  z-index: 1020;
  transition: left .22s cubic-bezier(.4,0,.2,1);
  background: #1e293b;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 11.5px;
  user-select: none;
}

/* ── Bloque marca (izquierda) ── */
.footer-left {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 14px;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .3px;
  white-space: nowrap;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: 22px;
}
.footer-left i { font-size: 13px; opacity: .9; }

/* ── Bloque módulo actual (segunda flecha encadenada) ── */
.footer-module {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 16px 0 22px;
  background: #1e3a5f;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .2px;
  white-space: nowrap;
  flex-shrink: 0;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  margin-left: -10px;
}
.footer-module i { font-size: 12px; opacity: .8; }
.footer-module .fm-txt { display: inline; }
[data-theme="dark"] .footer-module { background: #1e3a5f; }

/* ── Separador flexible ── */
.footer-center {
  flex: 1;
  background: #1e293b;
}

/* ── Ítems de la derecha ── */
.footer-right {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  margin-left: auto;
}

.ft-item {
  display: flex;
  align-items: center;
  gap: .32rem;
  padding: 0 12px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,.06);
  transition: background .12s, color .12s;
  cursor: default;
}
.ft-item:hover { background: rgba(255,255,255,.05); color: #e2e8f0; }
.ft-item i { font-size: 12px; opacity: .65; }

/* Ítem destacado: dev */
.ft-item.ft-dev {
  color: #7dd3fc;
  border-left-color: rgba(125,211,252,.15);
}
.ft-item.ft-dev i { opacity: .85; }
.ft-item.ft-dev:hover { background: rgba(125,211,252,.06); color: #bae6fd; }

/* Ítem año */
.ft-item.ft-year {
  color: #475569;
  font-size: 10.5px;
  padding: 0 10px;
}
.ft-item.ft-year:hover { background: none; color: #64748b; }

/* ── Dark mode: ya es oscuro, solo ajuste leve ── */
[data-theme="dark"] .site-footer  { background: #0d1117; }
[data-theme="dark"] .footer-left  { background: #1d4ed8; }
[data-theme="dark"] .footer-center { background: #0d1117; }
[data-theme="dark"] .ft-item      { border-left-color: rgba(255,255,255,.04); }

/* ── Responsive ── */
/* En móvil el sidebar se oculta → footer va full width */
@media (max-width: 767px) {
  .site-footer {
    left: 0 !important;
    transition: none;
  }
}
@media (max-width: 860px) {
  .ft-item.ft-muni { display: none; }
}
@media (max-width: 560px) {
  .ft-item.ft-unit { display: none; }
  .ft-item.ft-year { display: none; }
  .footer-module .fm-txt { display: none; }
  .footer-module { padding: 0 12px 0 18px; }
}
@media (max-width: 380px) {
  .footer-left span.fl-txt { display: none; }
  .footer-left { padding: 0 10px 0 10px; clip-path: none; }
}

/* =========================================================
   16. SIDEBAR ID ALIAS
   ========================================================= */
#sidebar-nav {
  list-style: none;
  margin: 0 6px;
  padding: 4px 0 0 0;   /* 4 px de respiro entre la franja y el primer ítem */
}

/* =========================================================
   17. DROPDOWN EN HEADER (fondo azul naval)
   ========================================================= */
#header .dropdown-menu,
header .dropdown-menu {
  background: var(--navy);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 28px rgba(10,31,61,.42), 0 2px 8px rgba(0,0,0,.18);
}

#header .dropdown-menu li a,
header .dropdown-menu li a {
  color: #CBD5E1;
}

#header .dropdown-menu li a:hover,
header .dropdown-menu li a:hover {
  background: rgba(37,99,235,.28);
  color: #fff;
}

#header .dropdown-menu li a i,
#header .dropdown-menu li a .bi,
header .dropdown-menu li a i,
header .dropdown-menu li a .bi {
  color: var(--brand-mid);
}

/* =========================================================
   18. TEXTURA DE FONDO — ZONA DE CONTENIDO
   ========================================================= */
body {
  background-image:
    radial-gradient(ellipse at 8% 12%, rgba(37,99,235,.07) 0%, transparent 40%),
    radial-gradient(ellipse at 92% 88%, rgba(15,38,71,.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.04) 0%, transparent 55%);
  background-attachment: fixed;
}

/* Cards con sombra más pronunciada para separarse del fondo */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 12px rgba(15,38,71,.09), 0 1px 4px rgba(15,38,71,.06);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow var(--tr), transform var(--tr);
}

.card:hover {
  box-shadow: 0 6px 24px rgba(15,38,71,.13), 0 2px 8px rgba(15,38,71,.07);
  transform: translateY(-1px);
}

/* =========================================================
   19. MODALES — REFINAMIENTO BOOTSTRAP 5
   ========================================================= */
.modal-header {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-bottom: none;
  border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
  padding: 15px 20px;
}

.modal-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title .bi,
.modal-title i { color: var(--brand-mid); }

.modal-header .btn-close {
  filter: invert(1) brightness(2);
  opacity: .7;
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-content {
  border: none;
  border-radius: var(--r-md);
  box-shadow: 0 25px 60px rgba(10,31,61,.25), 0 8px 20px rgba(10,31,61,.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-body { padding: 20px; }

/* Scrollable modals — asegura que el body haga scroll dentro del dialog */
.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin, .5rem) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Cuando hay un <form> directo dentro de .modal-content
   (patrón común en este proyecto), lo hacemos flex pass-through
   para que el scroll de modal-dialog-scrollable funcione */
.modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}

.modal-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px);
  padding: 12px 20px;
  gap: 8px;
}

/* Backdrop más sofisticado */
.modal-backdrop.show { opacity: .4; }

/* =========================================================
   20. APP CARDS — PANTALLA PRINCIPAL (home.php)
   Mueve el <style> inline del home.php aquí.
   ========================================================= */

/* Logo del home */
.home-logo {
  max-width: 190px;
  width: 38%;
  filter: drop-shadow(0 4px 12px rgba(30,58,95,.12));
}

.home-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 0;
  letter-spacing: .01em;
}

/* Tarjeta de módulo institucional */
.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.5rem 1rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  text-decoration: none;
  color: var(--brand-dark);
  transition: background var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr), border-top-color var(--tr);
  height: 100%;
  min-height: 118px;
  box-shadow: 0 2px 8px rgba(15,38,71,.08), 0 1px 3px rgba(15,38,71,.05);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Destello sutil arriba-izquierda */
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(37,99,235,.04) 0%, transparent 100%);
  pointer-events: none;
}

.app-card i {
  font-size: 2rem;
  line-height: 1;
  color: var(--brand);
  transition: color var(--tr), transform var(--tr);
}

.app-card span {
  font-size: .77rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--text);
  transition: color var(--tr);
}

/* Hover: degradado azul institucional */
.app-card:hover {
  background: linear-gradient(135deg, var(--navy) 0%, var(--brand) 100%);
  color: #fff;
  border-color: var(--brand-dark);
  border-top-color: #60a5fa;
  box-shadow: 0 10px 28px rgba(37,99,235,.30);
  transform: translateY(-4px);
  text-decoration: none;
}

.app-card:hover::before { background: none; }

.app-card:hover i {
  color: #fff !important;
  transform: scale(1.12);
}
.app-card:hover span { color: rgba(255,255,255,.92) !important; }

/* Estado activo/presionado */
.app-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.22);
}

/* =========================================================
   21. FORM-CONTAINER (usado en formularios OIRS / externos)
   ========================================================= */
.form-container {
  background: var(--surface);
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
}

.form-container h1,
.form-container h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand);
}

/* =========================================================
   22. UTILIDADES ADICIONALES
   ========================================================= */

/* Celda de observaciones — texto largo con scroll */
.obs-cell {
  max-height: 110px;
  overflow-y: auto;
  font-size: .82rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

/* Imagen miniatura en tablas */
.thumb {
  max-height: 80px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
  display: block;
}

/* Aporte-item dentro de celdas de aportes */
.aporte-item {
  border-top: 1px dashed var(--border);
  padding: 4px 0;
  line-height: 1.3;
}
.aporte-item:first-child { border-top: none; padding-top: 0; }

/* Badge de cuenta (número en card-header) */
.badge.rounded-pill { border-radius: var(--r-full) !important; }

/* Separador de sección con etiqueta */
.divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-muted);
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Tooltip-like chips en tablas */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* =========================================================
   23. ESTADOS DE CALENDARIO (lista meeting, actividades)
   ========================================================= */
.estado-pendiente   { background-color: #FEF08A; color: #713F12; }
.estado-confirmado  { background-color: #BBF7D0; color: #14532D; }
.estado-cancelado   { background-color: #FECACA; color: #7F1D1D; }
.estado-aprobado    { background-color: #A7F3D0 !important; color: #064E3B !important; }
.estado-rechazado   { background-color: #FCA5A5 !important; color: #7F1D1D !important; }

.estado-pendiente:hover,
.estado-confirmado:hover,
.estado-cancelado:hover {
  background-color: var(--brand-light);
  color: var(--brand-dark);
}

/* =========================================================
   24. ACCESIBILIDAD — REDUCE-MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   25. TOAST GLOBAL — estilo "Sileo" (resorte + ícono en círculo)
   ========================================================= */
#toast-stack {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  z-index: 99998; display: flex; flex-direction: column;
  gap: .6rem; pointer-events: none; max-width: 400px;
}
.toast-item {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border-radius: 18px;
  padding: .7rem 1rem .7rem .7rem;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,.25), 0 2px 8px rgba(15,23,42,.08);
  pointer-events: all; border: 1px solid rgba(15,23,42,.06);
  transform-origin: 100% 50%;
  animation: toast-in .55s cubic-bezier(.21,1.36,.4,1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.toast-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(15,23,42,.3), 0 2px 8px rgba(15,23,42,.1);
}
.toast-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  flex-shrink: 0; animation: toast-icon-pop .45s cubic-bezier(.34,1.56,.64,1) .08s backwards;
}
.toast-icon { font-size: 1.05rem; line-height: 1; }
.t-success .toast-icon-wrap { background: #16a34a1a; }
.t-danger  .toast-icon-wrap { background: #dc26261a; }
.t-warning .toast-icon-wrap { background: #d977061a; }
.t-info    .toast-icon-wrap { background: #0891b21a; }
.t-success .toast-icon { color: #16a34a; }
.t-danger  .toast-icon { color: #dc2626; }
.t-warning .toast-icon { color: #d97706; }
.t-info    .toast-icon { color: #0891b2; }
.toast-msg { font-size: .83rem; color: #1e293b; line-height: 1.45; flex: 1; font-weight: 500; }
.toast-close {
  background: none; border: none; padding: .15rem; line-height: 1;
  font-size: 1rem; color: #94a3b8; cursor: pointer; flex-shrink: 0;
  border-radius: 50%; transition: background .15s ease, color .15s ease;
}
.toast-close:hover { color: #475569; background: rgba(15,23,42,.06); }
@keyframes toast-in {
  0%   { opacity: 0; transform: translateX(46px) scale(.9); }
  60%  { opacity: 1; transform: translateX(-6px) scale(1.015); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-icon-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes toast-out {
  0%   { opacity: 1; transform: translateX(0) scale(1); max-height: 80px; }
  100% { opacity: 0; transform: translateX(46px) scale(.92); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
}
[data-theme="dark"] .toast-item { background: #1e2530; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .toast-msg  { color: #e2e8f0; }
[data-theme="dark"] .toast-close:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .t-success .toast-icon-wrap { background: #16a34a2e; }
[data-theme="dark"] .t-danger  .toast-icon-wrap { background: #dc26262e; }
[data-theme="dark"] .t-warning .toast-icon-wrap { background: #d977062e; }
[data-theme="dark"] .t-info    .toast-icon-wrap { background: #0891b22e; }

/* ── Paneles de notificaciones del header (campana general/derivación/reuniones) ── */
.notif-panel-bg     { background: #fff; }
.notif-row-title     { color: #1e293b; }
.notif-row-msg       { color: #64748b; }
.notif-row-time      { color: #94a3b8; }
.notif-row-unread    { background: #eff6ff; animation: notif-row-pulse 1.8s ease-in-out infinite; }
[data-theme="dark"] .notif-panel-bg  { background: var(--surface) !important; }
[data-theme="dark"] .notif-row       { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .notif-row:hover { background: var(--surface-2) !important; }
[data-theme="dark"] .notif-row-unread { background: var(--surface-2) !important; }
[data-theme="dark"] .notif-row-title  { color: var(--text); }
[data-theme="dark"] .notif-row-msg    { color: var(--text-light); }
[data-theme="dark"] .notif-row-time   { color: var(--text-muted); }

/* Parpadeo suave de las tarjetas no leídas y el contador de la campana —
   para que una notificación pendiente sea visualmente obvia sin depender
   solo del color de fondo. */
@keyframes notif-row-pulse {
  0%, 100% { background-color: #eff6ff; }
  50%      { background-color: #bfdbfe; }
}
[data-theme="dark"] .notif-row-unread { animation: notif-row-pulse-dark 1.8s ease-in-out infinite; }
@keyframes notif-row-pulse-dark {
  0%, 100% { background-color: var(--surface-2); }
  50%      { background-color: var(--surface-3, #2a3441); }
}
#notif-badge, #derivacion-notif-badge, #reunion-notif-badge {
  animation: notif-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes notif-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%      { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}

/* =========================================================
   26. BUSCADOR GLOBAL (Ctrl+K)
   ========================================================= */
#gk-overlay {
  position: fixed; inset: 0; z-index: 99997;
  background: rgba(10,20,40,.62); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 8vh;
}
#gk-overlay.show { display: flex; }
#gk-box {
  background: #fff; border-radius: 16px;
  width: min(600px, 92vw); max-height: 72vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden;
  animation: gk-in .18s ease;
}
@keyframes gk-in { from { opacity:0; transform:scale(.96) translateY(-12px); } to { opacity:1; transform:none; } }
#gk-input-wrap {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid #e9ecef; flex-shrink: 0;
}
#gk-input-wrap > i { font-size: 1.1rem; color: #94a3b8; flex-shrink: 0; }
#gk-q {
  border: none; outline: none; font-size: 1rem;
  width: 100%; background: transparent; color: #0f172a;
}
#gk-results { overflow-y: auto; flex: 1; padding: .4rem 0; }
.gk-group {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #94a3b8; padding: .55rem 1.1rem .2rem;
}
.gk-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1.1rem; cursor: pointer; text-decoration: none;
  color: inherit; transition: background .1s;
}
.gk-item:hover, .gk-item.gk-active {
  background: #eff6ff; text-decoration: none; color: inherit;
}
.gk-item i { width: 20px; text-align: center; color: #2563eb; font-size: .9rem; flex-shrink: 0; }
.gk-item-name { font-size: .875rem; font-weight: 600; color: #0f172a; }
.gk-item-desc { font-size: .72rem; color: #94a3b8; margin-top: .05rem; }
.gk-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  padding: .5rem 1.1rem; border-top: 1px solid #f1f5f9;
  font-size: .7rem; color: #94a3b8; flex-shrink: 0;
}
.gk-footer kbd {
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 4px; padding: .1em .4em; font-family: inherit;
  font-size: .7rem; color: #64748b;
}
#gk-empty { text-align: center; padding: 2.5rem 1rem; color: #94a3b8; font-size: .85rem; }
[data-theme="dark"] #gk-box        { background: #1a2230; }
[data-theme="dark"] #gk-q          { color: #e2e8f0; }
[data-theme="dark"] #gk-input-wrap { border-color: #334155; }
[data-theme="dark"] .gk-footer     { border-color: #334155; }
[data-theme="dark"] .gk-item:hover, [data-theme="dark"] .gk-item.gk-active { background: #0d1b2a; }
[data-theme="dark"] .gk-item-name  { color: #e2e8f0; }
[data-theme="dark"] .gk-footer kbd { background: #0d1117; border-color: #334155; color: #94a3b8; }

/* =========================================================
   27. BREADCRUMBS DE PÁGINA
   ========================================================= */
.page-breadcrumb {
  padding: .2rem 0 .6rem;
}
.page-breadcrumb .breadcrumb {
  margin: 0; background: none; padding: 0; font-size: .78rem;
}
.page-breadcrumb .breadcrumb-item a {
  color: #2563eb; text-decoration: none;
}
.page-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.page-breadcrumb .breadcrumb-item.active  { color: #64748b; }
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #cbd5e1; }
[data-theme="dark"] .page-breadcrumb .breadcrumb-item.active { color: #94a3b8; }
[data-theme="dark"] .page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #475569; }

/* =========================================================
   28. SKELETON LOADER
   ========================================================= */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  display: block;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-line          { height: .85rem; margin-bottom: .4rem; }
.sk-line.sk-w-75  { width: 75%; }
.sk-line.sk-w-50  { width: 50%; }
.sk-line.sk-w-33  { width: 33%; }
.sk-line.sk-sm    { height: .65rem; }
.sk-line.sk-lg    { height: 1.1rem; }
.sk-box           { height: 80px; }
.sk-box.sk-tall   { height: 160px; }
.sk-avatar        { width: 46px; height: 46px; border-radius: 50%; }
.sk-badge         { height: 1.4rem; width: 5rem; border-radius: 20px; display: inline-block; }
.sk-btn           { height: 2rem; width: 7rem; border-radius: 8px; }
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1a2535 25%, #242f3e 50%, #1a2535 75%);
  background-size: 200% 100%;
}

/* =========================================================
   29. TABLAS LISTADO — clases compartidas entre módulos
   ========================================================= */

/* Celda de observación con scroll interno */
.obs-cell {
  max-height: 110px;
  overflow-y: auto;
  font-size: .82rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Botón de acción compacto dentro de tablas */
.btn-acc { padding: .2rem .45rem; font-size: .78rem; }

/* Columnas estándar de tablas listado */
.col-id       { width: 50px;  text-align: center; }
.col-acc      { width: 90px;  text-align: center; white-space: nowrap; }
.col-estado   { width: 110px; text-align: center; }
.col-fecha    { width: 110px; white-space: nowrap; }
.col-rut      { width: 110px; white-space: nowrap; }
.col-nombre   { min-width: 140px; }
.col-dir      { min-width: 130px; }
.col-fono     { width: 100px; white-space: nowrap; }
.col-correo   { min-width: 130px; }
.col-tipo     { min-width: 100px; }
.col-monto    { width: 110px; text-align: right; white-space: nowrap; }

/* Encabezados y celdas de tablas listado */
.tabla-listado thead th { font-size: .8rem; white-space: nowrap; vertical-align: middle; }
.tabla-listado tbody td { vertical-align: middle; font-size: .83rem; }

/* Imagen miniatura en listados (ej: foto reclamo OIRS) */
.foto-miniatura {
  max-width: 70px;
  max-height: 70px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
}

/* =========================================================
   30. MODAL ADVERTENCIA DE SESIÓN
   ========================================================= */

/* =========================================================
   31. FIX MOD-CARD HEIGHT EN COLUMNAS BOOTSTRAP
   Evita que las tarjetas se estiren al 100% del alto de la
   columna cuando las columnas adyacentes son más altas.
   Páginas que quieran igualar alturas usan .h-100 explícito
   (Bootstrap lo aplica con !important y prevalece sobre esto).
   flex-fill en admin_sistema.php tampoco se ve afectado.
   ========================================================= */
.row > [class*="col"] > .mod-card:not(.h-100):not(.flex-fill) {
    height: auto;
}
@keyframes swm-in { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:scale(1); } }

[data-theme="dark"] #session-warn-modal > div  { background: #1e2530; }
[data-theme="dark"] #session-warn-modal h4     { color: #e2e8f0; }
[data-theme="dark"] #session-warn-modal p      { color: #94a3b8; }
[data-theme="dark"] #swm-continue              { background: #2563eb; }
[data-theme="dark"] #session-warn-modal a      { background: #0d1117; color: #94a3b8; }