/* ==========================================================================
   NEMPlanner - Sistema de Temas Tenues Anti-Fatiga Visual (10 Temas Exactos)
   Aplica la tematización al 100% de la interfaz web (Header, Sidebar, Módulos, Tablas, Tarjetas, Modales)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Transiciones Suaves Globales (0.25s ease)
   -------------------------------------------------------------------------- */
html, body, 
.app-container, .app-header, .main-sidebar, .card, 
.panel, .modal-content, .btn, input, select, textarea,
.planner-table, .sheet-card, .desk-item, .stat-card,
header, main, footer, aside, section, article, nav, table, th, td,
.top-module-tabs, .month-tab, .sidebar-tab, .module-card,
.plan-analitico-container, .planner-container, .students-container,
.continuous-eval-card, .diary-entry-card, .cte-card, .reports-container {
  transition: background-color 0.25s ease, 
              color 0.25s ease, 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
}

/* ==========================================================================
   1. DEFINICIÓN DE LAS 10 PALETAS TENUES EXACTAS
   ========================================================================== */

/* 1. cielo-artico */
:root, [data-theme="cielo-artico"] {
  --theme-id: "cielo-artico";
  --bg-app: #EBF2FA;
  --bg-card: #F7FAFC;
  --accent: #5B86E5;
  --accent-soft: #DCE7FA;
  --text-main: #2D3748;
  --border: #D7E3F3;

  /* Variables globales de respaldo */
  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #4A73D1;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #E2EBF7;
  --text-body: #3A475C;
  --text-muted: #6B7C96;
  --text-subtle: #98A7BD;
}

/* 2. menta-relajante */
[data-theme="menta-relajante"] {
  --theme-id: "menta-relajante";
  --bg-app: #EAF5EE;
  --bg-card: #F6FBF8;
  --accent: #48BB78;
  --accent-soft: #D7EFE1;
  --text-main: #22543D;
  --border: #D1E7D9;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #38A169;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #E0F0E6;
  --text-body: #2B664B;
  --text-muted: #4E876B;
  --text-subtle: #8CB8A1;
}

/* 3. melocoton-calido */
[data-theme="melocoton-calido"] {
  --theme-id: "melocoton-calido";
  --bg-app: #FDF0EA;
  --bg-card: #FFF8F5;
  --accent: #E07A5F;
  --accent-soft: #F9E2D8;
  --text-main: #4A3B32;
  --border: #F3D9CD;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #CC654B;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #F7E5DC;
  --text-body: #5E4B40;
  --text-muted: #8E7467;
  --text-subtle: #BAA397;
}

/* 4. arena-desertica */
[data-theme="arena-desertica"] {
  --theme-id: "arena-desertica";
  --bg-app: #F5EFEB;
  --bg-card: #FAF6F2;
  --accent: #C48B71;
  --accent-soft: #EDE0D7;
  --text-main: #3D312A;
  --border: #E5D8CF;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #AF765C;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #EFE4DC;
  --text-body: #52433B;
  --text-muted: #827066;
  --text-subtle: #B09F96;
}

/* 5. lavanda-silvestre */
[data-theme="lavanda-silvestre"] {
  --theme-id: "lavanda-silvestre";
  --bg-app: #F0EEF8;
  --bg-card: #F8F7FD;
  --accent: #7F77C6;
  --accent-soft: #DFDDF2;
  --text-main: #2E274A;
  --border: #D8D4EE;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #6B62B3;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #E6E3F5;
  --text-body: #3F3761;
  --text-muted: #6C6294;
  --text-subtle: #9E96C4;
}

/* 6. salvia-niebla */
[data-theme="salvia-niebla"] {
  --theme-id: "salvia-niebla";
  --bg-app: #EAEFEA;
  --bg-card: #F4F7F4;
  --accent: #5B8266;
  --accent-soft: #D6E2D8;
  --text-main: #243328;
  --border: #CCD8CE;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #486E53;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #DEE6E0;
  --text-body: #35473A;
  --text-muted: #5D7564;
  --text-subtle: #8FA696;
}

/* 7. crema-manzanilla */
[data-theme="crema-manzanilla"] {
  --theme-id: "crema-manzanilla";
  --bg-app: #FAF4E6;
  --bg-card: #FCF9F0;
  --accent: #D4A346;
  --accent-soft: #F5E8C8;
  --text-main: #3F3520;
  --border: #EFE3C3;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #BE8E33;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #F7EDD5;
  --text-body: #54472D;
  --text-muted: #877450;
  --text-subtle: #B8A581;
}

/* 8. gris-nordico */
[data-theme="gris-nordico"] {
  --theme-id: "gris-nordico";
  --bg-app: #E9ECEF;
  --bg-card: #F4F6F8;
  --accent: #5C7C8D;
  --accent-soft: #D5DFE5;
  --text-main: #2B343B;
  --border: #CED7DD;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #496777;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #DEE5EA;
  --text-body: #3B464F;
  --text-muted: #647582;
  --text-subtle: #9DA9B5;
}

/* 9. rosa-palo-serena */
[data-theme="rosa-palo-serena"] {
  --theme-id: "rosa-palo-serena";
  --bg-app: #FBECEF;
  --bg-card: #FCF5F7;
  --accent: #C86D82;
  --accent-soft: #F7D4DD;
  --text-main: #452730;
  --border: #EFC4CE;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #B2586D;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #F7DEE4;
  --text-body: #593641;
  --text-muted: #8E5C69;
  --text-subtle: #BD8E9A;
}

/* 10. te-verde-bambu */
[data-theme="te-verde-bambu"] {
  --theme-id: "te-verde-bambu";
  --bg-app: #F1F5E8;
  --bg-card: #F8FAF2;
  --accent: #7AA05B;
  --accent-soft: #DDE8CF;
  --text-main: #2C3A20;
  --border: #D2DEC2;

  --bg-book: var(--bg-card);
  --bg-sidebar: var(--accent-soft);
  --paper-cream: var(--bg-card);
  --primary: var(--accent);
  --primary-hover: #678B48;
  --primary-light: var(--accent-soft);
  --border-dark: var(--text-main);
  --border-color: var(--border);
  --border-light: #E4EDD8;
  --text-body: #3B4D2C;
  --text-muted: #627A4E;
  --text-subtle: #94AA81;
}

/* ==========================================================================
   2. TRANSFORMACIÓN TOTAL DEL 100% DE COMPONENTES DEL SISTEMA
   ========================================================================== */

/* 2.1 Viewport, Canvas y Fondo Principal */
html, body, .app-container, main, #appMainContainer, .app-layout {
  background-color: var(--bg-app) !important;
  color: var(--text-main) !important;
}

/* 2.2 Encabezado Principal (.app-header) */
.app-header {
  background-color: var(--bg-card) !important;
  border-bottom: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
  padding-left: 56px !important; /* Espacio dedicado para que el botón FAB no traslape el logo */
}

.brand-title, .header-school-title, .header-group-sub {
  color: var(--text-main) !important;
}

#headerGroupCycleSelect, .btn-teacher-profile-pill {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.teacher-mini-name, .teacher-mini-role {
  color: var(--text-main) !important;
}

/* 2.3 Barras Laterales (.main-sidebar, .sidebar) y Pestañas */
.main-sidebar, .sidebar, .book-spiral-spine, .side-months-container {
  background-color: var(--accent-soft) !important;
  border-right: 1.5px solid var(--border) !important;
}

.month-tab-btn, .sidebar-nav-item, .nav-tab {
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.month-tab-btn.active, .sidebar-nav-item.active, .nav-tab.active {
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

/* 2.4 Tarjetas, Contenedores, Cuadernos y Secciones */
.card, .panel, .modal-content, .sheet-card, .desk-item, .stat-card,
.planner-table, .interactive-book-cover, .cover-bottom-login-card,
.module-header, .module-section, .form-card, .data-card,
.plan-analitico-card, .file-sheet-card, .diary-entry-card,
.croquis-canvas-container, .reports-summary-card, .cte-session-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* 2.5 Tablas de Planeación, Alumnos, Rúbricas y Asistencia */
table, .planner-table, .students-table, .eval-table, .reports-table {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

th, .table-header-cell, .planner-th {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
  font-weight: 700 !important;
}

td, .table-data-cell, .planner-td {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

tr:nth-child(even) td {
  background-color: var(--accent-soft) !important;
}

/* 2.6 Formularios, Inputs, Selects y Textareas */
input, select, textarea, .form-control {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* 2.7 Botones Principales y Secundarios */
.btn-primary, .btn-submit, .btn-action-main, .btn-save {
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

.btn-primary:hover, .btn-submit:hover, .btn-action-main:hover {
  background-color: var(--primary-hover) !important;
}

.btn-secondary, .btn-cancel, .btn-outline {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* 2.8 Encabezados y Texto General */
h1, h2, h3, h4, h5, h6, label, p, span, strong {
  color: var(--text-main);
}


/* ==========================================================================
   3. BOTÓN FLOTANTE FAB (top-4 left-4 z-50) & POPOVER ANTI-FATIGA
   ========================================================================== */

.fab-theme-wrapper {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 10000;
}

/* Botón Flotante Compacto (40x40px) */
.fab-theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-main);
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
  user-select: none;
}

.fab-theme-btn svg,
.fab-theme-btn i {
  width: 20px;
  height: 20px;
  stroke-width: 2px;
  color: var(--accent);
  transition: transform 250ms ease;
}

.fab-theme-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.fab-theme-btn:hover svg,
.fab-theme-btn:hover i {
  transform: rotate(20deg);
}

.fab-theme-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Tarjeta Popover Desplegable */
.fab-theme-dropdown {
  position: fixed;
  top: 3.6rem;
  left: 12px;
  width: 285px;
  max-height: 490px;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 36px -4px rgba(0, 0, 0, 0.14), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.fab-theme-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Encabezado del Popover: Título 'Temas Tenues' e Insignia 'Anti-Fatiga' */
.fab-theme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px 6px;
  border-bottom: 1.5px solid var(--border);
}

.fab-theme-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.fab-theme-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-main);
  background-color: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

/* Lista de las 10 Opciones */
.fab-theme-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 2px;
  max-height: 380px;
}

.fab-theme-options::-webkit-scrollbar {
  width: 5px;
}
.fab-theme-options::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 4px;
}

/* Botón de Opción Individual de Tema */
.theme-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background-color: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
}

.theme-option-btn:hover {
  background-color: var(--accent-soft);
  border-color: var(--border);
  transform: translateX(2px);
}

.theme-option-btn.active {
  background-color: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 700;
  color: var(--text-main);
}

.theme-option-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Círculo Dividido Verticalmente al 50% (Izquierda: --bg-app, Derecha: --accent) */
.theme-split-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  overflow: hidden;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  transition: transform 150ms ease;
}

.theme-option-btn:hover .theme-split-circle {
  transform: scale(1.1);
}

.theme-circle-half-left {
  width: 50%;
  height: 100%;
}

.theme-circle-half-right {
  width: 50%;
  height: 100%;
}

/* Marca de Verificación ✓ para el Tema Activo */
.theme-active-check {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 150ms ease, transform 150ms ease;
}

.theme-option-btn.active .theme-active-check {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   4. INTEGRACIÓN DE TEMAS DINÁMICOS EN EL 100% DE COMPONENTES Y BOTONES
   Asegura que todos los botones, marcos, fondos y paneles cambien al instante
   según el tema seleccionado por el usuario.
   ========================================================================== */

/* 4.1 Botones de Acción Principal e IA */
.btn-primary, .btn-submit, .btn-action-main, .btn-save,
.btn-gemini-auto, .btn-gen-dosif-doc-inner, .btn-gen-dosif-action,
.btn-step-nav, .btn-approve-step {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 14px var(--accent-soft) !important;
}

.btn-primary:hover, .btn-submit:hover, .btn-action-main:hover,
.btn-gemini-auto:hover, .btn-gen-dosif-doc-inner:hover,
.btn-step-nav:hover, .btn-approve-step:hover {
  background: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #FFFFFF !important;
}

/* 4.2 Botones Secundarios, De Pistas y Esquemas */
.btn-secondary, .btn-cancel, .btn-outline, .btn-pa-secondary,
.btn-pa-tip, .btn-pa-preset, .btn-step-prev {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

.btn-secondary:hover, .btn-cancel:hover, .btn-outline:hover,
.btn-pa-secondary:hover, .btn-pa-tip:hover, .btn-pa-preset:hover, .btn-step-prev:hover {
  background: var(--accent-soft) !important;
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* 4.3 Pestañas y Botones de Acción de Vista (.pa-action-btn) */
.pa-action-btn, .pa-view-tab-btn, .appearance-tab-btn {
  color: var(--text-main) !important;
  font-weight: 700 !important;
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
}

.pa-action-btn:hover, .pa-view-tab-btn:hover, .appearance-tab-btn:hover {
  color: var(--accent) !important;
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.pa-action-btn.active, .pa-view-tab-btn.active, .appearance-tab-btn.active {
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
  box-shadow: 0 3px 10px var(--accent-soft) !important;
}

.pa-action-btn.btn-ai-sparkle {
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

.pa-action-btn.locked, .pa-view-tab-btn.locked {
  opacity: 0.65 !important;
  background-color: var(--accent-soft) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* 4.4 Stepper y Burbujas de Pasos */
.pa-planes-stepper-bar, .pa-steps-horizontal-track {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.step-bubble-btn {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

.step-bubble-btn .step-bubble-num {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
}

.step-bubble-btn.active {
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

.step-bubble-btn.active .step-bubble-num {
  background-color: #FFFFFF !important;
  color: var(--accent) !important;
}

.plane-tab-card {
  background-color: var(--bg-card) !important;
  border: 2px solid var(--border) !important;
  color: var(--text-main) !important;
}

.plane-tab-card.active {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* 4.5 Cabeceras, Banners e Insignias */
.pa-header-banner, .module-header {
  background: var(--accent-soft) !important;
  background-color: var(--accent-soft) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

.pa-title-group h1, .pa-title-group h1 span, .module-title {
  color: var(--text-main) !important;
}

.pa-title-group h1 i, .pa-title-group h1 svg {
  color: var(--accent) !important;
}

.pa-subtitle-badge {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

/* 4.6 Tarjetas de Contenido, Hojas y Paneles */
.pa-step-content-card, .official-sep-doc-paper, .card, .panel,
.config-group-card, .diary-entry-card, .students-container,
.continuous-eval-card, .reports-summary-card {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

.step-card-header {
  border-bottom: 1.5px solid var(--border) !important;
}

.step-card-title-wrap h2, .step-card-title-wrap h2 i, .step-card-title-wrap h2 svg {
  color: var(--text-main) !important;
}

.step-card-desc {
  color: var(--text-muted) !important;
}

/* 4.7 Banners de Estado y Avisos */
.pa-edit-banner-notice {
  background-color: var(--accent-soft) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

/* 4.8 Modales y Paneles Flotantes */
.pa-tips-modal-card, .appearance-modal-card, .modal-content {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

.pa-tips-modal-header, .appearance-modal-header {
  background-color: var(--accent-soft) !important;
  border-bottom: 1.5px solid var(--border) !important;
}

/* 4.9 Tablas, Inputs y Selects */
table, .pa-matrix-table, .planner-table, .students-table, .eval-table, .reports-table {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

th, .pa-matrix-table th {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

td, .pa-matrix-table td {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

input, select, textarea, .pa-input-cell {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

input:focus, select:focus, textarea:focus, .pa-input-cell:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* 4.10 Módulo de Evaluación Continua y Formativa NEM (Adaptación al 100% de Temas Tenues) */
.eval-descriptive-header-card,
.continuous-eval-page-shell,
.evidences-matrix-tab-container,
.weekly-summary-tab-container,
.monthly-summary-tab-container,
.matrix-concentrado-tab-container,
.ai-evidence-planner-tab-container {
  color: var(--text-main) !important;
}

.eval-descriptive-header-card {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 4px 14px var(--accent-soft) !important;
}

.eval-descriptive-header-card .dh-title {
  color: var(--text-main) !important;
}

.eval-descriptive-header-card .dh-subtitle {
  color: var(--text-muted) !important;
}

.eval-descriptive-header-card .dh-avatar {
  background-color: var(--accent-soft) !important;
  border-color: var(--border) !important;
}

.eval-descriptive-header-card .dh-select {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

.dh-informative-term-badge {
  background-color: var(--accent-soft) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

.dh-informative-term-badge .term-highlight {
  color: var(--accent) !important;
}

.dh-informative-term-badge .term-range {
  color: var(--text-muted) !important;
}

.dh-weekly-evidences-titles-banner {
  background-color: var(--bg-main) !important;
  border-color: var(--border) !important;
}

.title-pill-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.title-pill-card .pill-title-name {
  color: var(--text-main) !important;
}

.eval-campos-filter-bar {
  border-top-color: var(--border) !important;
}

.btn-campo-pill {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

.btn-campo-pill:hover {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.btn-eval-nav-tab {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
  font-weight: 700 !important;
}

.btn-eval-nav-tab:hover {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.btn-eval-nav-tab.active {
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
  box-shadow: 0 3px 10px var(--accent-soft) !important;
}

.eval-evidence-concentrado-table {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.eval-evidence-concentrado-table th {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.eval-evidence-concentrado-table td {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.input-eval-score {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1.5px solid var(--border) !important;
}

.input-eval-score:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

.ev-card-item {
  background-color: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-main) !important;
}

.btn-sync-ai-evidences {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px var(--accent-soft) !important;
}

.btn-sync-ai-evidences:hover {
  background: var(--primary-hover) !important;
}