@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  --wp-blue: #0033a0;
  --wp-blue-hover: #00267a;
  --wp-darkblue: #001a54;
  --wp-brightblue: #024AAD;
  --wp-blue-light: #edf3ff;
  --wp-coral: #E05138;
  --wp-coral-hover: #c73f27;
  --wp-coral-light: #fff2f0;
  --wp-bg: #F4F7FB;
  --wp-card: #FFFFFF;
  --wp-border: #E2E8F0;
  --wp-text: #1E293B;
  --wp-muted: #64748B;
}

/* Base Body Font & Sizing */
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--wp-bg);
  color: var(--wp-text);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.font-brand, .font-brand-title {
  font-family: 'Days One', 'Montserrat', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #edf2f7;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wp-blue);
}

/* Paneles y Tarjetas (Default: Light Mode Oficial Waterproof) */
.glass-panel {
  background-color: #ffffff;
  border: 1px solid var(--wp-border);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

.glass-panel-interactive {
  background-color: #ffffff;
  border: 1px solid var(--wp-border);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-panel-interactive:hover {
  border-color: var(--wp-blue);
  box-shadow: 0 10px 25px -5px rgba(0, 51, 160, 0.12);
  transform: translateY(-1px);
}

/* =========================================================================
   MODO CLARO (LIGHT THEME) — ESTILO OFICIAL WATERPROOF PROTOTIPO
   ========================================================================= */
body.theme-light {
  background-color: #F4F7FB !important;
  color: #1E293B !important;
}

body.theme-light header {
  background-color: #0033a0 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #E05138 !important;
}

body.theme-light header .text-white {
  color: #ffffff !important;
}

body.theme-light nav.desktop-nav {
  background-color: #00267a !important;
  border-bottom: 1px solid rgba(224, 81, 56, 0.3) !important;
}

body.theme-light nav.desktop-nav .nav-tab {
  color: rgba(255, 255, 255, 0.8) !important;
  border-bottom: 3px solid transparent !important;
}

body.theme-light nav.desktop-nav .nav-tab.active-tab {
  color: #ffffff !important;
  border-bottom: 3px solid #E05138 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-light nav.desktop-nav .nav-tab.active-tab i {
  color: #E05138 !important;
}

/* Mobile Bottom Nav en Modo Claro */
body.theme-light nav.mobile-nav {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-top-color: #e2e8f0 !important;
}
body.theme-light nav.mobile-nav .nav-tab {
  color: #64748b !important;
}
body.theme-light nav.mobile-nav .nav-tab.active-tab {
  color: #E05138 !important;
}

/* Tarjetas y Contenedores en Modo Claro */
body.theme-light .glass-panel,
body.theme-light .glass-panel-interactive {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.theme-light .bg-slate-900,
body.theme-light .bg-slate-900\/90,
body.theme-light .bg-slate-900\/80,
body.theme-light .bg-slate-900\/60,
body.theme-light .bg-slate-900\/50,
body.theme-light .bg-slate-900\/40 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.theme-light .bg-slate-950,
body.theme-light .bg-slate-950\/90,
body.theme-light .bg-slate-950\/60,
body.theme-light .bg-slate-950\/50 {
  background-color: #f8fafc !important;
}

body.theme-light .bg-slate-800,
body.theme-light .bg-slate-800\/80,
body.theme-light .bg-slate-800\/60,
body.theme-light .bg-slate-800\/50 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

body.theme-light .border-slate-800,
body.theme-light .border-slate-800\/90,
body.theme-light .border-slate-800\/80,
body.theme-light .border-slate-800\/60,
body.theme-light .border-slate-700,
body.theme-light .border-slate-700\/80,
body.theme-light .border-slate-700\/60 {
  border-color: #e2e8f0 !important;
}

body.theme-light .divide-slate-800\/60 > * + * {
  border-color: #e2e8f0 !important;
}

/* Títulos y Textos en Modo Claro */
body.theme-light h2.font-brand-title,
body.theme-light h3.font-brand-title,
body.theme-light .card-title {
  color: #0033a0 !important;
}

body.theme-light .text-slate-100,
body.theme-light .text-slate-200 {
  color: #1e293b !important;
}

body.theme-light .text-slate-300,
body.theme-light .text-slate-400 {
  color: #475569 !important;
}

body.theme-light .text-slate-500 {
  color: #64748b !important;
}

/* =========================================================================
   BOTONES CORPORATIVOS WATERPROOF (CORAL & AZUL) — INMUNES A CONTRASTES
   ========================================================================= */
.btn-wp-coral,
button.btn-wp-coral,
body.theme-light .btn-wp-coral,
body.theme-light button.btn-wp-coral,
body.theme-dark .btn-wp-coral,
body.theme-dark button.btn-wp-coral,
html.dark .btn-wp-coral,
html.dark button.btn-wp-coral {
  background-color: #E05138 !important;
  color: #ffffff !important;
  border-color: #E05138 !important;
}

.btn-wp-coral:hover,
button.btn-wp-coral:hover,
body.theme-light .btn-wp-coral:hover,
body.theme-light button.btn-wp-coral:hover,
body.theme-dark .btn-wp-coral:hover,
body.theme-dark button.btn-wp-coral:hover,
html.dark .btn-wp-coral:hover,
html.dark button.btn-wp-coral:hover {
  background-color: #c9402a !important;
  color: #ffffff !important;
}

.btn-wp-coral *,
body.theme-light .btn-wp-coral *,
body.theme-dark .btn-wp-coral * {
  color: #ffffff !important;
}

.btn-wp-blue,
button.btn-wp-blue,
body.theme-light .btn-wp-blue,
body.theme-light button.btn-wp-blue,
body.theme-dark .btn-wp-blue,
body.theme-dark button.btn-wp-blue,
html.dark .btn-wp-blue,
html.dark button.btn-wp-blue {
  background-color: #0033a0 !important;
  color: #ffffff !important;
  border-color: #0033a0 !important;
}

.btn-wp-blue:hover,
button.btn-wp-blue:hover,
body.theme-light .btn-wp-blue:hover,
body.theme-light button.btn-wp-blue:hover,
body.theme-dark .btn-wp-blue:hover,
body.theme-dark button.btn-wp-blue:hover,
html.dark .btn-wp-blue:hover,
html.dark button.btn-wp-blue:hover {
  background-color: #002575 !important;
  color: #ffffff !important;
}

.btn-wp-blue *,
body.theme-light .btn-wp-blue *,
body.theme-dark .btn-wp-blue * {
  color: #ffffff !important;
}

/* Excepciones de Texto Blanco dentro de Botones, Badges o Hero Banners */
body.theme-light .btn-wp-coral,
body.theme-light .btn-wp-blue,
body.theme-light .bg-wp-coral,
body.theme-light .bg-wp-blue,
body.theme-light .bg-emerald-600,
body.theme-light .bg-emerald-500,
body.theme-light .bg-sky-600,
body.theme-light header .text-white,
body.theme-light nav.desktop-nav .text-white,
body.theme-light .hero-banner .text-white,
body.theme-light .hero-banner h2,
body.theme-light .hero-banner p,
body.theme-light .hero-banner span,
body.theme-light #btnExitImpersonation,
body.theme-light #btnCloseMatrixModalBtn,
body.theme-light .btn-dark,
body.theme-light #rezagadosBulkBar,
body.theme-light #rezagadosBulkBar *,
body.theme-light #historyBulkBar,
body.theme-light #historyBulkBar * {
  color: #ffffff !important;
}

/* Botones con fondo oscuro intencional en Modo Claro */
body.theme-light #btnExitImpersonation,
body.theme-light #btnCloseMatrixModalBtn,
body.theme-light .btn-dark,
body.theme-light button.bg-slate-950,
body.theme-light button.bg-slate-900 {
  background-color: #0f172a !important;
  color: #ffffff !important;
}
body.theme-light #btnExitImpersonation:hover,
body.theme-light #btnCloseMatrixModalBtn:hover,
body.theme-light .btn-dark:hover,
body.theme-light button.bg-slate-950:hover,
body.theme-light button.bg-slate-900:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* Botones claros en Modo Claro nunca deben tener texto blanco */
body.theme-light button.bg-white:not(.bg-wp-blue):not(.bg-wp-coral):not(.bg-emerald-600):not(.bg-sky-600):not(.btn-quick-eval-student),
body.theme-light button.bg-slate-100,
body.theme-light button.bg-slate-200,
body.theme-light button.bg-slate-50,
body.theme-light button.border-slate-300,
body.theme-light button.border-slate-200 {
  color: #1e293b !important;
}
body.theme-light button.bg-white:not(.bg-wp-blue):not(.bg-wp-coral):not(.bg-emerald-600):not(.bg-sky-600):not(.btn-quick-eval-student) span,
body.theme-light button.bg-slate-100 span,
body.theme-light button.bg-slate-200 span,
body.theme-light button.bg-slate-50 span,
body.theme-light button.border-slate-300 span,
body.theme-light button.border-slate-200 span {
  color: #1e293b !important;
}

/* Selector de Sede en Header (Visible sobre fondo azul corporativo en cualquier tema) */
header select#sedeSelect,
body.theme-light header select#sedeSelect,
body.theme-dark header select#sedeSelect {
  background-color: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  font-weight: 700 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Opciones del selector desplegable de Sede (Fondo blanco y texto azul corporativo legible) */
header select#sedeSelect option,
body.theme-light header select#sedeSelect option,
body.theme-dark header select#sedeSelect option {
  background-color: #ffffff !important;
  color: #0033a0 !important;
  font-weight: 600 !important;
}

/* Header Móvil Compacto y Ajuste Automático sin Desbordes */
@media (max-width: 639px) {
  header {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  header select#sedeSelect {
    font-size: 11px !important;
    padding-left: 6px !important;
    padding-right: 20px !important;
    height: 32px !important;
    max-width: 125px !important;
  }
  header #sedeSelectContainer {
    max-width: 125px !important;
    flex-shrink: 1 !important;
  }
  header #btnThemeToggle {
    width: 32px !important;
    height: 32px !important;
  }
  header #btnUserMenu {
    padding: 3px 6px !important;
    height: 32px !important;
  }
}

/* Inputs, Selects y Formularios en Modo Claro */
body.theme-light select:not(header select),
body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="search"],
body.theme-light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

body.theme-light select:not(header select):focus,
body.theme-light input[type="text"]:focus,
body.theme-light input[type="email"]:focus,
body.theme-light input[type="password"]:focus,
body.theme-light input[type="number"]:focus,
body.theme-light input[type="search"]:focus,
body.theme-light textarea:focus {
  background-color: #ffffff !important;
  border-color: #0033a0 !important;
  outline: none !important;
}

body.theme-light select:not(header select) option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

body.theme-light ::placeholder {
  color: #94a3b8 !important;
}

/* Tablas en Modo Claro */
body.theme-light table thead th {
  background-color: #edf3ff !important;
  color: #0033a0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-light table tbody tr:hover {
  background-color: #f8fafc !important;
}

body.theme-light table tbody td {
  color: #334155 !important;
}

body.theme-light table tbody .text-white:not(.bg-wp-blue):not(.bg-wp-blue *):not(.bg-wp-coral):not(.bg-wp-coral *),
body.theme-light table tbody span.text-white:not(.bg-wp-blue):not(.bg-wp-blue *):not(.bg-wp-coral):not(.bg-wp-coral *),
body.theme-light .glass-panel .text-white:not(button):not(button *):not(.bg-wp-blue):not(.bg-wp-blue *):not(.bg-wp-coral):not(.bg-wp-coral *):not(.hero-banner *):not([id^="funnelRate"]):not(.funnel-rate-badge):not(.bg-sky-600):not(.bg-indigo-600):not(.bg-emerald-600),
body.theme-light #linkJackrabbitModal .text-white:not(button):not(button *):not(.bg-wp-blue):not(.bg-wp-blue *),
body.theme-light #evaluationDetailModal .text-white:not(button):not(button *):not(.bg-wp-blue):not(.bg-wp-blue *),
body.theme-light #subskillsModal .text-white:not(button):not(button *):not(.bg-wp-blue):not(.bg-wp-blue *) {
  color: #0f172a !important;
}

/* Badges y Botones Corporativos Waterproof en Fondo Azul (Siempre Blanco Nítido) */
body.theme-light span.bg-wp-blue,
body.theme-light span.bg-wp-blue *,
body.theme-light .glass-panel span.bg-wp-blue,
body.theme-light .glass-panel span.bg-wp-blue *,
body.theme-light .glass-panel-interactive span.bg-wp-blue,
body.theme-light .glass-panel-interactive span.bg-wp-blue *,
body.theme-light .level-list-item span.bg-wp-blue,
body.theme-light .level-list-item span.bg-wp-blue *,
body.theme-light .btn-wp-blue,
body.theme-light .btn-wp-blue * {
  color: #ffffff !important;
}

/* Badges de Porcentaje del Embudo y Badges Sólidos (Siempre Blanco Nítido) */
.funnel-rate-badge,
[id^="funnelRate"],
body.theme-light .funnel-rate-badge,
body.theme-light [id^="funnelRate"],
body.theme-light .glass-panel span.bg-sky-600,
body.theme-light .glass-panel span.bg-indigo-600,
body.theme-light .glass-panel span.bg-emerald-600,
body.theme-light .glass-panel span.bg-sky-700,
body.theme-light .glass-panel span.bg-indigo-700,
body.theme-light .glass-panel span.bg-emerald-700,
body.theme-dark .funnel-rate-badge,
body.theme-dark [id^="funnelRate"] {
  color: #ffffff !important;
}

/* Botón e Ícono de Modo Claro / Oscuro (Header Siempre Nítido y Visible) */
#btnThemeToggle {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
#btnThemeToggle:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
}
body.theme-light #btnThemeToggle i,
body.theme-light #themeToggleIcon,
#btnThemeToggle .fa-moon {
  color: #ffffff !important;
}
body.theme-dark #btnThemeToggle i,
body.theme-dark #themeToggleIcon,
#btnThemeToggle .fa-sun {
  color: #fde047 !important; /* Amarillo sol radiante */
}

/* Chevron de Nivel en Vista Lista Desglosada */
.level-chevron {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}
.level-chevron.rotate-90 {
  transform: rotate(90deg);
}

/* Semáforos y Filas Rezagados en Modo Claro */
body.theme-light .rezagados-row-negro {
  background-color: rgba(30, 41, 59, 0.04) !important;
  border-left: 4px solid #334155 !important;
}
body.theme-light .rezagados-row-rojo {
  background-color: rgba(220, 38, 38, 0.05) !important;
  border-left: 4px solid #ef4444 !important;
}
body.theme-light .rezagados-row-naranja {
  background-color: rgba(249, 115, 22, 0.05) !important;
  border-left: 4px solid #f97316 !important;
}
body.theme-light .rezagados-row-amarillo {
  background-color: rgba(234, 179, 8, 0.06) !important;
  border-left: 4px solid #eab308 !important;
}
body.theme-light .rezagados-row-verde {
  background-color: rgba(22, 163, 74, 0.05) !important;
  border-left: 4px solid #22c55e !important;
}

/* Alto Contraste para Semáforos y Tarjetas KPI de Rezagados en Modo Claro */
body.theme-light #rezagadosKpiGrid .kpi-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
body.theme-light #kpiTotalStudents {
  color: #0033a0 !important;
}
body.theme-light #kpiNegroCount {
  color: #0f172a !important;
}
body.theme-light #kpiRojoCount {
  color: #b91c1c !important;
}
body.theme-light #kpiNaranjaCount {
  color: #c2410c !important;
}
body.theme-light #kpiAmarilloCount {
  color: #a16207 !important;
}
body.theme-light #kpiListosCount {
  color: #15803d !important;
}

/* Modales en Modo Claro */
body.theme-light .fixed.inset-0.bg-slate-950\/90,
body.theme-light .fixed.inset-0.bg-slate-950\/80 {
  background-color: rgba(0, 26, 84, 0.75) !important;
}
body.theme-light #loginModal .glass-panel,
body.theme-light #mediaModal .glass-panel,
body.theme-light #linkJackrabbitModal .glass-panel,
body.theme-light #evaluationDetailModal .glass-panel,
body.theme-light #subskillsModal,
body.theme-light #impersonateModal > div,
body.theme-light #matrixCellModal > div,
body.theme-light #modalUnsavedChanges > div {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
body.theme-light #subskillsModal .bg-slate-900,
body.theme-light #evaluationDetailModal .bg-slate-900,
body.theme-light #linkJackrabbitModal .bg-slate-900,
body.theme-light #matrixCellModal .bg-slate-900,
body.theme-light #modalUnsavedChanges .bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Comparativa Expectativa vs Realidad en Modo Claro */
body.theme-light .bg-gradient-to-br.from-indigo-950\/40 {
  background: #f0f7ff !important;
  border-color: #bfdbfe !important;
}

/* =========================================================================
   MODO OSCURO (DARK THEME) — WATERPROOF NAVY NOCTURNO
   ========================================================================= */
body.theme-dark {
  background-color: #001233 !important;
  color: #f1f5f9 !important;
}

body.theme-dark ::-webkit-scrollbar-track {
  background: #001233;
}
body.theme-dark ::-webkit-scrollbar-thumb {
  background: #1e3a5f;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

body.theme-dark header {
  background-color: #001a54 !important;
  border-bottom: 2px solid #E05138 !important;
}

body.theme-dark nav.desktop-nav {
  background-color: #001233 !important;
  border-bottom: 1px solid rgba(224, 81, 56, 0.3) !important;
}

body.theme-dark nav.desktop-nav .nav-tab.active-tab {
  border-bottom: 3px solid #E05138 !important;
  color: #ffffff !important;
}
body.theme-dark nav.desktop-nav .nav-tab.active-tab i {
  color: #E05138 !important;
}

body.theme-dark nav.mobile-nav {
  background-color: rgba(0, 26, 84, 0.96) !important;
  border-top-color: #1e3a5f !important;
}

body.theme-dark .glass-panel,
body.theme-dark .glass-panel-interactive {
  background-color: #0c1e34 !important;
  border-color: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark .glass-panel-interactive:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 25px -4px rgba(2, 132, 199, 0.25) !important;
}

body.theme-dark table thead th {
  background-color: #0c1e34 !important;
  color: #38bdf8 !important;
  border-bottom: 1px solid #1e3a5f !important;
}

body.theme-dark table tbody tr:hover {
  background-color: rgba(12, 30, 52, 0.8) !important;
}

body.theme-dark select,
html.dark select,
body.theme-dark input[type="text"],
html.dark input[type="text"],
body.theme-dark input[type="email"],
html.dark input[type="email"],
body.theme-dark input[type="password"],
html.dark input[type="password"],
body.theme-dark input[type="number"],
html.dark input[type="number"],
body.theme-dark input[type="search"],
html.dark input[type="search"],
body.theme-dark textarea,
html.dark textarea {
  background-color: #071526 !important;
  border-color: #1e3a5f !important;
  color: #f1f5f9 !important;
}

body.theme-dark select option,
html.dark select option {
  background-color: #071526 !important;
  color: #f1f5f9 !important;
}

/* Modales y Contenedores en Modo Oscuro */
body.theme-dark #loginModal .glass-panel,
html.dark #loginModal .glass-panel,
body.theme-dark #mediaModal .glass-panel,
html.dark #mediaModal .glass-panel,
body.theme-dark #linkJackrabbitModal .glass-panel,
html.dark #linkJackrabbitModal .glass-panel,
body.theme-dark #evaluationDetailModal .glass-panel,
html.dark #evaluationDetailModal .glass-panel,
body.theme-dark #subskillsModal,
html.dark #subskillsModal,
body.theme-dark #impersonateModal > div,
html.dark #impersonateModal > div,
body.theme-dark #matrixCellModal > div,
html.dark #matrixCellModal > div,
body.theme-dark #modalUnsavedChanges > div,
html.dark #modalUnsavedChanges > div {
  background-color: #0c1e34 !important;
  border-color: #1e3a5f !important;
  color: #f1f5f9 !important;
}

body.theme-dark #subskillsModal .bg-slate-900,
html.dark #subskillsModal .bg-slate-900,
body.theme-dark #evaluationDetailModal .bg-slate-900,
html.dark #evaluationDetailModal .bg-slate-900,
body.theme-dark #linkJackrabbitModal .bg-slate-900,
html.dark #linkJackrabbitModal .bg-slate-900,
body.theme-dark #matrixCellModal .bg-slate-900,
html.dark #matrixCellModal .bg-slate-900,
body.theme-dark #modalUnsavedChanges .bg-slate-900,
html.dark #modalUnsavedChanges .bg-slate-900 {
  background-color: #071526 !important;
  border-color: #1e3a5f !important;
}

/* KPI Chips Dimming & Active States */
.kpi-chip-active {
  box-shadow: 0 0 0 2px #0284c7, 0 8px 20px -3px rgba(2, 132, 199, 0.3) !important;
  transform: scale(1.04) !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 10 !important;
}

body.theme-light .kpi-chip-active {
  box-shadow: 0 0 0 2px #0033a0, 0 8px 20px -3px rgba(0, 51, 160, 0.25) !important;
}

.kpi-chip-dimmed {
  opacity: 0.35 !important;
  filter: grayscale(40%) !important;
  transform: scale(0.96) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Matrix Cell Interactive Styling */
.matrix-cell-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.matrix-cell-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px -2px rgba(0, 51, 160, 0.15);
}
body.theme-dark .matrix-cell-btn:hover {
  box-shadow: 0 6px 16px -2px rgba(56, 189, 248, 0.2);
}

/* Semáforo Negro Dot - Inmune a overrides de tema claro */
.dot-semaforo-negro {
  background-color: #000000 !important;
}
body.theme-dark .dot-semaforo-negro,
html.dark .dot-semaforo-negro,
.dark .dot-semaforo-negro {
  background-color: #f1f5f9 !important;
  box-shadow: 0 0 0 1px #475569 !important;
}

/* Subventana / Marco con scroll y Sticky Headers & Footers */
.table-viewport-frame {
  max-height: clamp(380px, 68vh, 720px);
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.table-viewport-frame table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-viewport-frame thead th {
  position: sticky;
  top: 0;
  z-index: 20;
}

.table-viewport-frame tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 20;
}

.table-viewport-frame thead th.sticky-corner-left {
  left: 0;
  top: 0;
  z-index: 30;
}

.table-viewport-frame tfoot td.sticky-corner-left {
  left: 0;
  bottom: 0;
  z-index: 30;
}

/* Chips interactivos del modal de matriz */
.modal-chip-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.modal-chip-btn:hover {
  transform: scale(1.05);
}
.modal-chip-btn.chip-active {
  box-shadow: 0 0 0 2px #0284c7, 0 4px 12px -2px rgba(2, 132, 199, 0.35) !important;
  transform: scale(1.05);
  filter: none !important;
  opacity: 1 !important;
}
body.theme-light .modal-chip-btn.chip-active {
  box-shadow: 0 0 0 2px #0033a0, 0 4px 12px -2px rgba(0, 51, 160, 0.3) !important;
}
.modal-chip-btn.chip-dimmed {
  opacity: 0.4 !important;
  filter: grayscale(40%) !important;
  transform: scale(0.96) !important;
}