/* Variables para modo nocturno */
:root {
  /* Transición suave entre modos */
  --transition-theme: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== FONDO PRINCIPAL ===== */
body {
  transition: var(--transition-theme);
}

html.dark-mode,
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
  background-image: none;
}

body.dark-mode::before {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

/* ===== MODALES Y CONTENEDORES GLASS ===== */
body.dark-mode .modal-content,
body.dark-mode .modal-filtros-flotante,
body.dark-mode .modal-overlay-content {
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.dark-mode .modal-header-filtros {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .modal-content h3,
body.dark-mode .modal-titulo-asignatura {
  color: #e0e0e0;
}

/* ===== SIDEBAR ===== */
body.dark-mode #sidebarPanel {
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  /* Mantener animación - NO sobrescribir transition */
}

body.dark-mode .sidebar-header {
  background: rgba(20, 20, 20, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .sidebar-header h3 {
  color: #e0e0e0;
}

/* ===== CONTENIDO DEL SIDEBAR ===== */
body.dark-mode .sidebar-content {
  background: rgba(20, 20, 20, 0.2);
}

body.dark-mode .sidebar-section-title {
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== BOTONES DE ACCIÓN DEL SIDEBAR ===== */
body.dark-mode .btn-generar-combinaciones,
body.dark-mode .btn-usar-horario {
  background: rgba(240, 240, 240, 0.9);
  color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .btn-generar-combinaciones:hover,
body.dark-mode .btn-usar-horario:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
}

/* ===== CARDS ===== */
body.dark-mode .schedule-card,
body.dark-mode .minihorario-card,
body.dark-mode .asignatura-seleccionada-item-sidebar {
  background: rgba(40, 40, 40, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e0e0e0;
}

body.dark-mode .schedule-card:hover,
body.dark-mode .minihorario-card:hover,
body.dark-mode .asignatura-seleccionada-item-sidebar:hover {
  background: rgba(50, 50, 50, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .schedule-card h3,
body.dark-mode .schedule-card span,
body.dark-mode .asignatura-seleccionada-nombre {
  color: #e0e0e0 !important;
}

/* ===== HEADER DE ASIGNATURAS EN SIDEBAR ===== */
body.dark-mode .asignatura-header {
  background: rgba(35, 35, 35, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .asignatura-header:hover {
  background: rgba(45, 45, 45, 0.7) !important;
}

/* Estado expandido */
body.dark-mode .asignatura-seleccionada-item-sidebar.is-expanded {
  background: rgba(45, 50, 60, 0.8) !important;
  border-color: rgba(100, 150, 243, 0.4) !important;
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.25) !important;
}

/* ===== TARJETAS DE FILTROS (CHECKBOXES) ===== */
body.dark-mode .filtro-checkbox {
  background: rgba(45, 45, 45, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark-mode .filtro-checkbox:hover {
  background: rgba(55, 55, 55, 0.7) !important;
  border-color: rgba(100, 150, 255, 0.4) !important;
}

body.dark-mode .filtro-option-label strong {
  color: #e0e0e0 !important;
}

body.dark-mode .filtro-option-label small {
  color: #b0b0b0 !important;
}

/* ===== SECCIONES DE FILTROS (CONTENEDORES) ===== */
body.dark-mode .filtro-section {
  background: rgba(35, 35, 35, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
}

body.dark-mode .filtro-titulo {
  color: #e0e0e0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

/* ===== TABLA DE HORARIOS ===== */
body.dark-mode table {
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode th,
body.dark-mode td {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode th {
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
}

body.dark-mode .time {
  background: rgba(40, 40, 40, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  color: #b0b0b0;
}

body.dark-mode .cell {
  background: rgba(25, 25, 25, 0.5);
}

body.dark-mode .cell:hover::before {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* ===== MINIHORARIOS ===== */
body.dark-mode .minihorario-header {
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .minihorario-header h4 {
  color: #e0e0e0;
}

body.dark-mode .mini-tabla thead th {
  background: rgba(40, 40, 40, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #b0b0b0;
}

body.dark-mode .mini-tabla tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .mini-celda {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .mini-celda.hora-col {
  color: #b0b0b0;
}

body.dark-mode .mini-celda.vacia {
  background: rgba(30, 30, 30, 0.3);
}

body.dark-mode .mini-asig-nombre,
body.dark-mode .mini-grupo-text {
  color: #e0e0e0;
}

/* Texto de grupo - CRÍTICO: cambiar de negro a blanco */
body.dark-mode .mini-grupo-text,
body.dark-mode .mini-celda.ocupada .mini-grupo-text,
body.dark-mode .mini-celda-content .mini-grupo-text {
  color: #ffffff !important;
  font-weight: 600;
}

/* Clase .mini-grupo también debe ser blanca */
body.dark-mode .mini-grupo {
  color: #ffffff !important;
  font-weight: 500;
}

/* Celdas ocupadas - asegurar contraste */
body.dark-mode .mini-celda.ocupada {
  /* Mantener colores de fondo de asignaturas pero asegurar texto visible */
}

body.dark-mode .mini-celda.ocupada .mini-asig-nombre {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tags de asignaturas en cada combinación */
body.dark-mode .mini-asignatura-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #d0d0d0 !important;
}

/* Barra de información al pie de cada combinación */
body.dark-mode .minihorario-info {
  background: rgba(30, 30, 30, 0.6) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .info-item {
  color: #b0b0b0 !important;
}

/* ===== TOOLTIPS DE MINIHORARIOS ===== */
body.dark-mode .mini-tooltip {
  background: rgba(40, 40, 40, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .tooltip-title {
  color: #e0e0e0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .tooltip-label {
  color: #b0b0b0 !important;
}

body.dark-mode .tooltip-value {
  color: #e0e0e0 !important;
}

/* Flecha del tooltip en dark mode */
body.dark-mode .mini-tooltip::after {
  border-top-color: rgba(40, 40, 40, 0.95) !important;
}

body.dark-mode .mini-tooltip::before {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===== INPUTS Y SELECTS ===== */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode select,
body.dark-mode .search-input,
body.dark-mode .sidebar-search-input,
body.dark-mode .modal-content input:not([type="checkbox"]):not([type="color"]):not([type="radio"]),
body.dark-mode .modal-content select {
  background: rgba(40, 40, 40, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

/* Checkboxes en dark-mode: solo el control nativo, sin fondo añadido */
body.dark-mode input[type="checkbox"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  accent-color: #6fa3f7;
}

/* Botón de ordenar en home */
body.dark-mode #sortBar select {
  background: rgba(40, 40, 40, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
}

body.dark-mode #sortBar select:hover {
  background: rgba(50, 50, 50, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode #sortBar select:focus {
  background: rgba(50, 50, 50, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

body.dark-mode input::placeholder,
body.dark-mode .sidebar-search-input::placeholder {
  color: #808080;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode .modal-content input:focus,
body.dark-mode .modal-content select:focus {
  background: rgba(50, 50, 50, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

/* ===== BOTONES ===== */
/* Botones primarios */
body.dark-mode .modal-content button,
body.dark-mode .btn-aplicar-filtros,
body.dark-mode .actions button {
  background: rgba(240, 240, 240, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .modal-content button:hover,
body.dark-mode .btn-aplicar-filtros:hover,
body.dark-mode .actions button:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
}

/* Botones secundarios */
body.dark-mode .btn-limpiar-filtros {
  background: rgba(60, 60, 60, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .btn-limpiar-filtros:hover {
  background: rgba(70, 70, 70, 0.8);
}

/* Botones de header */
body.dark-mode #app header button,
body.dark-mode #home header button {
  background: rgba(50, 50, 50, 0.9);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode #app header button:hover,
body.dark-mode #home header button:hover {
  background: rgba(60, 60, 60, 1);
}

/* Botón X */
body.dark-mode .close-btn,
body.dark-mode .btn-cerrar-modal-filtros,
body.dark-mode .btn-close-sidebar {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

body.dark-mode .close-btn:hover,
body.dark-mode .btn-cerrar-modal-filtros:hover,
body.dark-mode .btn-close-sidebar:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

body.dark-mode .close-btn:active,
body.dark-mode .btn-cerrar-modal-filtros:active,
body.dark-mode .btn-close-sidebar:active {
  background: rgba(255, 255, 255, 0.2);
}

/* ===== TOOLTIPS ===== */
body.dark-mode .mini-tooltip {
  background: rgba(40, 40, 40, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

body.dark-mode .tooltip-title,
body.dark-mode .tooltip-info {
  color: #e0e0e0;
}

body.dark-mode .tooltip-info {
  color: #b0b0b0;
}

/* ===== BADGES ===== */
body.dark-mode .badge-filtrado {
  background: rgba(230, 230, 230, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== OVERLAY ===== */
body.dark-mode .overlay,
body.dark-mode #sidebarOverlay,
body.dark-mode .modal {
  background: rgba(0, 0, 0, 0.7);
}

/* ===== CONTENEDORES DE FILTROS ===== */
body.dark-mode .asignatura-filtros {
  background: rgba(25, 25, 25, 0.4) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.dark-mode .asignatura-filtros::-webkit-scrollbar-track {
  background: rgba(40, 40, 40, 0.5) !important;
}

body.dark-mode .asignatura-filtros::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.6) !important;
}

body.dark-mode .asignatura-filtros::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 130, 130, 0.8) !important;
}

body.dark-mode .filtro-opciones::-webkit-scrollbar-track {
  background: rgba(40, 40, 40, 0.5) !important;
}

body.dark-mode .filtro-opciones::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.6) !important;
}

body.dark-mode .filtro-opciones::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 130, 130, 0.8) !important;
}

body.dark-mode .filtro-seccion h4 {
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .filtro-opcion label {
  color: #b0b0b0;
}

body.dark-mode .filtro-opcion input[type="checkbox"]:checked + label {
  color: #e0e0e0;
}

/* ===== ELEMENTOS ESPECIALES ===== */
body.dark-mode .aguinaldo-details,
body.dark-mode .aguinaldo-side {
  background: rgba(35, 35, 35, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.dark-mode .calendar-day {
  background: rgba(40, 40, 40, 0.5);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .calendar-day:hover:not(.calendar-day-disabled) {
  background: rgba(60, 60, 60, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== CHANGELOG PANEL ===== */
body.dark-mode .changelog-panel {
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  /* Mantener animación - NO sobrescribir transition */
}

body.dark-mode .changelog-header {
  background: rgba(20, 20, 20, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .changelog-header h2 {
  color: #e0e0e0;
}

body.dark-mode .changelog-header button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

body.dark-mode .changelog-header button:hover {
  background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .changelog-content {
  background: rgba(25, 25, 25, 0.3);
}

body.dark-mode .changelog-entry {
  background: rgba(40, 40, 40, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .changelog-entry h3 {
  color: #e0e0e0;
}

body.dark-mode .changelog-entry ul,
body.dark-mode .changelog-entry li {
  color: #b0b0b0;
}

body.dark-mode .changelog-entry .date {
  color: #b0b0b0;
}

/* ===== MINIHORARIOS CONTAINER ===== */
body.dark-mode #minihorariosContainer {
  background: rgba(20, 20, 20, 0.3);
}

body.dark-mode .combinaciones-info {
  background: rgba(35, 35, 35, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.dark-mode .combinaciones-info strong {
  color: #ffffff;
}

body.dark-mode .descartadas-info {
  background: rgba(60, 30, 30, 0.6);
  border: 1px solid rgba(255, 100, 100, 0.2);
  color: #e0b0b0;
}

/* ===== CONTROLES DEL SIDEBAR ===== */
body.dark-mode .max-combinaciones-control,
body.dark-mode .sidebar-controls {
  background: rgba(35, 35, 35, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .max-combinaciones-control label,
body.dark-mode .sidebar-controls label {
  color: #b0b0b0;
}

body.dark-mode .numero-combinaciones {
  background: rgba(50, 50, 50, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

/* ===== MENSAJE DE VACÍO ===== */
body.dark-mode .sidebar-empty-message,
body.dark-mode .no-combinaciones-message {
  background: rgba(40, 40, 40, 0.6) !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  color: #b0b0b0;
}

body.dark-mode .sidebar-empty-message p,
body.dark-mode .sidebar-empty-state h5 {
  color: #e0e0e0 !important;
}

body.dark-mode .sidebar-empty-message span,
body.dark-mode .sidebar-empty-state p {
  color: #b0b0b0 !important;
}

body.dark-mode .sidebar-empty-state {
  color: #b0b0b0;
}

body.dark-mode .sidebar-search-empty {
  color: #999;
}

/* ===== RESULTADOS DE BÚSQUEDA ===== */
body.dark-mode .sidebar-search-results {
  background: rgba(30, 30, 30, 0.5) !important;
}

body.dark-mode .sidebar-search-result-item {
  background: rgba(40, 40, 40, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .sidebar-search-result-item:hover {
  background: rgba(50, 50, 50, 0.8) !important;
}

body.dark-mode .sidebar-search-result-name {
  color: #e0e0e0 !important;
}

body.dark-mode .sidebar-search-result-info {
  color: #b0b0b0 !important;
}

/* ===== BOTONES DE DESCARTE ===== */
body.dark-mode .btn-descartar-combinacion {
  background: rgba(200, 50, 50, 0.8);
  border: 1px solid rgba(255, 100, 100, 0.3);
}

body.dark-mode .btn-descartar-combinacion:hover {
  background: rgba(220, 60, 60, 0.9);
}

/* ===== ICONOS DE BOTONES (EDITAR/ELIMINAR) ===== */
/* Invertir colores de iconos PNG en dark mode */
body.dark-mode .schedule-card button img,
body.dark-mode .card-actions button img,
body.dark-mode .actions button img {
  filter: invert(1) brightness(1.2);
  -webkit-filter: invert(1) brightness(1.2);
}

/* Si los iconos tienen fondo, removerlo */
body.dark-mode .schedule-card button img,
body.dark-mode .card-actions button img {
  background: transparent;
  mix-blend-mode: lighten;
}

/* Botones contenedores - cambiar background y color del border */
body.dark-mode .card-actions button,
body.dark-mode .schedule-card .actions button {
  background: rgba(30, 30, 30, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  outline: none !important;
  /* border-radius heredado de .card-actions button (4px) */
}

body.dark-mode .card-actions button:hover,
body.dark-mode .schedule-card .actions button:hover {
  background: rgba(40, 40, 40, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ===== BOTÓN DE MODO NOCTURNO ===== */
#themeToggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  
  /* Glass Morphism */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(255, 255, 255, 0.5) inset;
  
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#themeToggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 1px rgba(255, 255, 255, 0.5) inset;
}

#themeToggle:active {
  transform: scale(0.95) rotate(0deg);
}

/* Modo nocturno del botón */
body.dark-mode #themeToggle {
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 1px rgba(255, 255, 255, 0.2) inset;
}

body.dark-mode #themeToggle:hover {
  background: rgba(50, 50, 50, 0.9);
  transform: scale(1.1) rotate(15deg);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(255, 255, 255, 0.3) inset;
}

/* Iconos del botón */
#themeToggle svg {
  width: 28px;
  height: 28px;
  color: #1a1a1a;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode #themeToggle svg {
  color: #f0f0f0;
}

/* Animación de rotación del icono */
#themeToggle.rotating svg {
  transform: rotate(360deg);
}

/* ===== MODAL DE AGUINALDO ===== */
/* Icono de calendario - invertir en dark mode */
body.dark-mode #monthlyModal img[src*="calendar.png"] {
  filter: invert(1) brightness(1.2);
  -webkit-filter: invert(1) brightness(1.2);
}

/* ===== MODAL DE EXCLUSIÓN DE DÍAS ===== */
/* Leyenda del calendario - fondo oscuro */
body.dark-mode #excludeDaysModal .calendar-legend {
  background: rgba(40, 40, 40, 0.6) !important;
  color: #b0b0b0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Días festivos - mantener rojo visible en dark mode */
body.dark-mode .calendar-day-holiday {
  background: rgba(255, 100, 100, 0.3) !important;
  color: #ff6b6b !important;
  border: 1px solid #ff6b6b;
}

/* Días excluidos - mantener naranja visible en dark mode */
body.dark-mode .calendar-day-excluded {
  background: rgba(255, 165, 0, 0.3) !important;
  color: #ffa500 !important;
  border: 2px solid #ffa500 !important;
}

/* Días de Semana Santa - mantener morado visible en dark mode */
body.dark-mode .calendar-day-holyweek {
  background: rgba(186, 104, 200, 0.3) !important;
  color: #ba68c8 !important;
  border: 1px solid #ba68c8;
}

/* Cajas de leyenda - ajustar para dark mode */
body.dark-mode #excludeDaysModal .legend-box-festivos {
  background: rgba(255, 100, 100, 0.4) !important;
  border-color: #ff6b6b !important;
}

body.dark-mode #excludeDaysModal .legend-box-excluidos {
  background: rgba(255, 165, 0, 0.4) !important;
  border-color: #ffa500 !important;
}

body.dark-mode #excludeDaysModal .legend-box-holyweek {
  background: rgba(186, 104, 200, 0.4) !important;
  border-color: #ba68c8 !important;
}

/* Nota del calendario */
body.dark-mode #excludeDaysModal .calendar-note {
  color: #b0b0b0 !important;
}

/* Botón X del modal excludeDaysModal */
body.dark-mode #excludeDaysModal #backToAguinaldoBtn {
  color: #ffffff !important;
}

/* ===== MODAL DE DETALLE POR DÍA ===== */
/* Botón "Ver detalle por día" - más padding y texto blanco */
body.dark-mode #viewDailyDetailBtn {
  color: #ffffff !important;
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px;
  font-weight: 500;
}

body.dark-mode #viewDailyDetailBtn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Botón "Ver detalle por día" en modal aguinaldo (openDetailBtn) */
body.dark-mode #openDetailBtn {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode #openDetailBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Scrollbar del modal dailyDetailModal - oscuro */
body.dark-mode #dailyDetailModal .modal-content::-webkit-scrollbar {
  width: 12px;
}

body.dark-mode #dailyDetailModal .modal-content::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.5);
  border-radius: 6px;
}

body.dark-mode #dailyDetailModal .modal-content::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.6);
  border-radius: 6px;
}

body.dark-mode #dailyDetailModal .modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 120, 120, 0.8);
}

/* Botón X del modal dailyDetailModal */
body.dark-mode #dailyDetailModal #backToResultBtn {
  color: #ffffff !important;
}

/* Textos del modal dailyDetailModal */
body.dark-mode #dailyDetailModal h3,
body.dark-mode #dailyDetailModal p,
body.dark-mode #dailyDetailModal strong,
body.dark-mode #dailyDetailModal .modal-content {
  color: #e0e0e0 !important;
}

body.dark-mode #dailyDetailModal p strong {
  color: #ffffff !important;
}

/* trip-info y trip-count en modal dailyDetailModal */
body.dark-mode #dailyDetailModal .trip-info,
body.dark-mode #dailyDetailModal .trip-count,
body.dark-mode #monthlyDetailContent .trip-info,
body.dark-mode #monthlyDetailContent .trip-count,
body.dark-mode .monthly-detail-panel .trip-info,
body.dark-mode .monthly-detail-panel .trip-count {
  color: #e0e0e0 !important;
}

/* Marcador de "Hueco" - fondo oscuro */
body.dark-mode .gap-flag,
body.dark-mode #monthlyDetailContent .gap-flag {
  background: rgba(255, 80, 80, 0.2) !important;
  color: #ff6b6b !important;
  border: 1px solid rgba(255, 80, 80, 0.4);
}

/* ===== TRANSICIONES GLOBALES ===== */
/* Solo animar colores durante cambio de tema, NO todas las transiciones */
body.theme-transitioning * {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important,
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important,
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important,
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Restaurar transiciones originales después del cambio */
body:not(.theme-transitioning) #sidebarPanel,
body:not(.theme-transitioning) .sidebar-panel {
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.theme-transitioning) .changelog-panel {
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Restaurar animaciones de cards y elementos interactivos */
body:not(.theme-transitioning) .schedule-card,
body:not(.theme-transitioning) .minihorario-card,
body:not(.theme-transitioning) .asignatura-seleccionada-item-sidebar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.theme-transitioning) button,
body:not(.theme-transitioning) input,
body:not(.theme-transitioning) select {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.theme-transitioning) .filtro-checkbox {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== MODAL DE ASIGNATURA - COLOR PREVIEW ===== */
body.dark-mode #colorPreview {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode #colorPreview:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ===== MODAL DE ASIGNATURA - LABEL ROW ===== */
body.dark-mode .subject-label-row label {
  color: #e0e0e0 !important;
}

/* ===== TOOLTIP DE EXPORTACIÓN ===== */
body.dark-mode .export-tooltip-trigger {
  background: rgba(255, 255, 255, 0.15);
  color: #c0c0c0;
}

/* ===== EXPORT MODALS - DARK MODE ===== */
body.dark-mode .export-preview-container {
  background: rgba(20, 20, 20, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .export-preview-label {
  color: #808080;
}

body.dark-mode .export-section-label {
  color: #e0e0e0;
}

body.dark-mode .export-divider {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .export-pdf-subtitle {
  color: #808080;
}

body.dark-mode .export-pdf-preview-container {
  border-color: rgba(255, 255, 255, 0.1);
  background: #1e1e1e;
}

body.dark-mode .export-pdf-preview-table thead th {
  background: #2a2a2a;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
}

body.dark-mode .export-pdf-preview-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #d0d0d0;
}

body.dark-mode .export-pdf-preview-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* ===== HOME EMPTY STATE - DARK MODE ===== */
body.dark-mode .home-empty-svg {
  filter: invert(1) brightness(0.75);
}

body.dark-mode .home-empty-title {
  color: #e0e0e0;
}

body.dark-mode .home-empty-subtitle {
  color: #808080;
}

body.dark-mode .home-empty-btn {
  background: rgba(240, 240, 240, 0.9);
  color: #111;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .home-empty-btn:hover {
  background: #fff;
}

/* ===== ICONO FILTROS EN SIDEBAR - DARK MODE ===== */
body.dark-mode .icon-filtros {
  filter: invert(1);
}

/* ===== BOTÓN FILTROS HOVER - DARK MODE ===== */
body.dark-mode .btn-filtros-asignatura:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ===== BOTTOM SHEET ASIGNATURA - DARK MODE ===== */
@media (max-width: 768px) {
  body.dark-mode #subjectModal .modal-content {
    background: rgba(30, 30, 30, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ===== COLUMNA DE HORAS STICKY - DARK MODE MÓVIL ===== */
@media (max-width: 768px) {
  body.dark-mode .time {
    background: rgba(20, 20, 20, 0.97) !important;
    color: #e0e0e0;
  }

  body.dark-mode th:first-child {
    background: rgba(10, 10, 10, 0.95) !important;
  }
}

/* ===== INDICADOR SCROLL HORIZONTAL - DARK MODE ===== */
@media (max-width: 768px) {
  body.dark-mode #scrollIndicator {
    background: linear-gradient(to left, rgba(10, 10, 10, 0.88), transparent);
  }
}

/* Añade esto al final de dark-mode.css */

body.dark-mode #calendarGrid .calendar-day {
  background: #121212 !important; /* Fondo negro para días normales */
  color: #ffffff !important;      /* Texto blanco */
  border-color: #333333 !important;
}

body.dark-mode #calendarGrid .calendar-day:hover {
  background: #1f1f1f !important;
}

/* Mantenemos los colores de estado como pidió el usuario */
body.dark-mode #calendarGrid .calendar-day-holiday {
  background: #ffb5C0 !important;
  color: #d32f2f !important;
  border-color: #d32f2f !important;
}

body.dark-mode #calendarGrid .calendar-day-holyweek {
  background: #f3e5f5 !important;
  color: #7b1fa2 !important;
  border-color: #7b1fa2 !important;
}

body.dark-mode #calendarGrid .calendar-day-excluded {
  background: #fff9c4 !important;
  color: #f57f17 !important;
  border-color: #f57f17 !important;
}

/* Ajuste del encabezado de días en modo oscuro */
body.dark-mode .calendar-day-header {
  color: #aaaaaa !important;
}