:root {
       /* VARIABLES BASE (Heredadas de Pagina 2) */
       --bg-color: #F0F4FA;
       --sidebar-bg: #FFFFFF;
       --card-bg: #FFFFFF;
       --text-color: #1e2125;
       --text-muted: #8A92A6;
       --icon-color: #8A92A6;
       --active-icon-bg: #E5EDF9;
       --border-color: #E2E8F0;
       --shadow-color: rgba(149, 157, 165, 0.1);

       /* VARIABLES EXTRA (Heredadas de Pagina 1 y adaptadas) */
       --glass-bg: rgba(255, 255, 255, 0.65);
       /* Vidrio Claro */
       --glass-border: rgba(255, 255, 255, 0.4);
       --accent-blue: #5e81ac;
       --card-radius: 20px;

       --border-radius-lg: 1.25rem;
       --border-radius-md: 0.75rem;
   }

   /* MODO OSCURO */
   [data-theme="dark"] {
       --bg-color: #121828;
       --sidebar-bg: #1c2333;
       --card-bg: #1c2333;
       /* Fondo sólido para widgets */
       --text-color: #ffffff;
       --text-muted: #a0aec0;
       --icon-color: #8A92A6;
       --active-icon-bg: #2d364b;
       --border-color: #2d364b;
       --shadow-color: rgba(0, 0, 0, 0.3);

       /* Adaptación Glassmorphism a Oscuro */
       --glass-bg: rgba(28, 35, 51, 0.75);
       /* Vidrio Oscuro */
       --glass-border: rgba(255, 255, 255, 0.05);
   }

   body {
       background-color: var(--bg-color);
       font-family: 'Inter', sans-serif;
       /* Inter para la UI general */
       color: var(--text-color);
       height: 100vh;
       overflow: hidden;
       /* Evitar scroll en body, usar scroll interno */
       transition: background-color 0.3s, color 0.3s;
   }

   .sidebar {
       position: fixed;
       top: 50%;
       transform: translateY(-50%);
       left: 20px;
       width: 72px;
       height: auto;
       background-color: var(--sidebar-bg);
       border-radius: var(--border-radius-lg);
       box-shadow: 0 10px 40px var(--shadow-color);
       padding: 16px 0;
       z-index: 100;
       transition: background-color 0.3s;
   }

   .sidebar .nav {
       gap: 0.5rem;
   }

   .sidebar .nav-link {
       color: var(--icon-color);
       font-size: 1.5rem;
       width: 50px;
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: var(--border-radius-md);
       transition: all 0.2s ease-in-out;
   }

   .sidebar .nav-link.active,
   .sidebar .nav-link:hover {
       background-color: var(--active-icon-bg);
       color: var(--text-color);
   }

   /* --- 2. LAYOUT PRINCIPAL --- */
   .main-content {
       margin-left: 110px;
       /* Espacio para sidebar */
       padding: 24px 30px 24px 0;
       /* Padding derecho e inferior */
       height: 100vh;
       display: flex;
       flex-direction: column;
   }

   /* --- 3. HEADER (Estilo Pagina 2) --- */
   header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 25px;
   }

   .header-title {
       font-weight: 700;
       font-size: 1.5rem;
   }

   .search-wrapper .form-control {
       padding-left: 2.5rem;
       border-radius: 50px;
       background-color: var(--sidebar-bg);
       /* Usa el color del sidebar/card */
       border: 1px solid var(--border-color);
       color: var(--text-color);
       box-shadow: 0 4px 15px var(--shadow-color);
       height: 44px;
       width: 280px;
   }

   .search-wrapper .bi-search {
       position: absolute;
       left: 1rem;
       top: 50%;
       transform: translateY(-50%);
       color: var(--text-muted);
   }

   .action-btn {
       width: 44px;
       height: 44px;
       background-color: var(--sidebar-bg);
       border: 1px solid var(--border-color);
       box-shadow: 0 4px 15px var(--shadow-color);
       border-radius: 50%;
       color: var(--text-color);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: 0.3s;
       position: relative;
   }

   .action-btn:hover {
       background-color: var(--active-icon-bg);
   }

   .notifications-popup {
       position: absolute;
       top: calc(100% + 15px);
       /* Se posiciona debajo del header con un margen */
       right: 0;
       width: 360px;

       background-color: var(--card-bg);
       border: 1px solid var(--border-color);
       border-radius: var(--border-radius-lg);
       box-shadow: 0 10px 40px var(--shadow-color);
       z-index: 1000;

       /* Lógica de la animación */
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px) scale(0.95);
       transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
   }

   .notifications-popup.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(0) scale(1);
   }

   .popup-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1rem;
       border-bottom: 1px solid var(--border-color);
   }

   .notifications-list {
       list-style: none;
       padding: 0;
       margin: 0;
       max-height: 300px;
       overflow-y: auto;
   }

   .notifications-list li {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
   }

   .notifications-list li:not(:last-child) {
       border-bottom: 1px solid var(--border-color);
   }

   .notification-icon-wrapper {
       width: 36px;
       height: 36px;
       flex-shrink: 0;
       background-color: var(--active-icon-bg);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.1rem;
   }

   .notification-text {
       flex-grow: 1;
   }

   .notification-time {
       font-size: 0.75rem;
       color: var(--text-muted);
       flex-shrink: 0;
   }

   .notification-icon {
       position: relative;
       /* Necesario para posicionar el punto */
   }

   .notification-badge {
       position: absolute;
       top: 8px;
       right: 8px;
       width: 8px;
       height: 8px;
       background-color: #e53e3e;
       /* Rojo intenso */
       border-radius: 50%;
       border: 1px solid var(--card-bg);
       transform: scale(0);
       opacity: 0;
       transition: transform 0.2s ease, opacity 0.2s ease;
   }

   /* Cuando hay notificaciones, el punto se muestra */
   .notification-icon.has-notifications .notification-badge {
       transform: scale(1);
       opacity: 1;
   }

   /* Mensaje para cuando no hay notificaciones */
   .empty-notifications-message {
       padding: 2rem 1rem;
       text-align: center;
       color: var(--text-muted);
       font-size: 0.9rem;
       pointer-events: none;
       /* Para que no se pueda hacer clic en él */
   }

   .search-wrapper .form-control {
       padding-left: 2.5rem;
       border-radius: 50px;
       background-color: var(--card-bg);
       border: none;
       color: var(--text-color);
       box-shadow: 0 4px 15px var(--shadow-color);
       height: 44px;
       width: 280px;
       transition: background-color 0.3s, box-shadow 0.3s;
   }

   .search-wrapper .form-control::placeholder {
       color: var(--text-muted);
   }

   .search-wrapper .bi-search {
       top: 50%;
       left: 1rem;
       transform: translateY(-50%);
       color: var(--text-muted);
       z-index: 2;
   }

   .theme-toggle-btn,
   .notification-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
       background-color: var(--card-bg);
       border: none;
       box-shadow: 0 4px 15px var(--shadow-color);
       border-radius: 50%;
       color: var(--text-color);
       font-size: 1.1rem;
       text-decoration: none;
       cursor: pointer;
       transition: background-color 0.3s, box-shadow 0.3s;
   }

   .theme-toggle-btn .icon-moon {
       display: none;
   }

   [data-theme="dark"] .theme-toggle-btn .icon-moon {
       display: inline-block;
   }

   [data-theme="dark"] .theme-toggle-btn .icon-sun {
       display: none;
   }

   .profile-pic {
       width: 44px;
       height: 44px;
       object-fit: cover;
       border-radius: 50%;
   }


   .content-scroll-area {
       flex-grow: 1;
       overflow-y: auto;
       /* Scroll interno */
       overflow-x: hidden;
       padding-right: 10px;
       /* Espacio para scrollbar */
   }

   /* Scrollbar bonito */
   .content-scroll-area::-webkit-scrollbar {
       width: 6px;
   }

   .content-scroll-area::-webkit-scrollbar-thumb {
       background: var(--border-color);
       border-radius: 10px;
   }

   .glass-panel {
       background: var(--glass-bg);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid var(--glass-border);
       border-radius: var(--card-radius);
       padding: 25px;
       margin-bottom: 20px;
       /* Sombra suave */
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
   }

   /* Tipografía específica del contenido (Poppins) */
   .dashboard-font {
       font-family: 'Poppins', sans-serif;
   }

   /* Tarjetas de Clases */
   .class-card {
       border-radius: 20px;
       padding: 25px;
       color: white;
       position: relative;
       overflow: hidden;
       transition: transform 0.3s ease;
       height: 100%;
       border: none;
   }

   .class-card:hover {
       transform: translateY(-5px);
   }

   .card-blue {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }

   .card-purple {
       background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
   }

   .card-pink {
       background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
   }

   .card-pink h5,
   .card-pink p,
   .card-pink div {
       color: #2c3e50 !important;
   }

   /* Texto oscuro para tarjeta clara */

   .avatar-group {
       display: flex;
       margin-top: 15px;
   }

   .avatar-group img,
   .avatar-group .plus-avatar {
       width: 35px;
       height: 35px;
       border-radius: 50%;
       border: 2px solid white;
       margin-left: -10px;
   }

   .avatar-group img:first-child {
       margin-left: 0;
   }

   .plus-avatar {
       background: white;
       color: #667eea;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 10px;
       font-weight: bold;
   }

   /* Tabla de Lecciones */
   .lessons-table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0 10px;
   }

   .lessons-table th {
       color: var(--text-muted);
       font-weight: 500;
       border: none;
       text-align: left;
       padding-left: 15px;
   }

   .table-row-glass {
       background: var(--sidebar-bg);
       /* En vez de glass puro, usamos el fondo de tarjeta del tema */
       transition: 0.2s;
   }

   .table-row-glass td {
       padding: 15px 20px;
       border: none;
       color: var(--text-color);
       vertical-align: middle;
   }

   .table-row-glass td:first-child {
       border-radius: 15px 0 0 15px;
   }

   .table-row-glass td:last-child {
       border-radius: 0 15px 15px 0;
   }

   .table-row-glass:hover {
       /* transform: scale(1.01);  <-- BORRA O COMENTA ESTA LÍNEA */
       transform: translateY(-3px);
       /* <-- AÑADE ESTA (Se mueve hacia arriba) */
       box-shadow: 0 5px 15px var(--shadow-color);
       z-index: 1;
       /* Asegura que la sombra se vea bien */
       position: relative;
   }

   /* --- 5. BARRA DERECHA (Widgets Pagina 1) --- */
   .right-column {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }

   .widget-card {
       background: var(--sidebar-bg);
       border: 1px solid var(--border-color);
       border-radius: 24px;
       padding: 20px;
       box-shadow: var(--shadow-soft);
   }

   /* Reloj */
   .clock-face {
       font-size: 2.5rem;
       font-weight: 600;
       color: var(--text-color);
   }

   .clock-date {
       color: var(--text-muted);
       font-size: 0.9rem;
   }

   /* Calendario Mini */
   .calendar-days {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       gap: 5px;
       text-align: center;
       font-size: 0.8rem;
   }

   .day-name {
       color: var(--text-muted);
       font-weight: 600;
       margin-bottom: 10px;
   }

   .day-num {
       padding: 8px 0;
       border-radius: 10px;
       cursor: pointer;
       color: var(--text-color);
   }

   .day-num:hover {
       background: var(--active-icon-bg);
   }

   .day-num.active {
       background: var(--text-color);
       color: var(--bg-color);
   }

   /* Todo List */
   .todo-item {
       background: var(--bg-color);
       /* Ligeramente diferente al fondo de la tarjeta */
       padding: 15px;
       border-radius: 15px;
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       gap: 10px;
       border-left: 4px solid var(--accent-blue);
       color: var(--text-color);
   }


   /* ================================================= */
   /* ESTILOS PÁGINA CALENDARIO             */
   /* ================================================= */

   /* Forzamos que los paneles ocupen el 100% de la altura disponible */
   .glass-panel.h-100 {
       height: 100% !important;
       display: flex;
       flex-direction: column;
   }

   /* Ajuste para la fila principal */
   .row.h-100 {
       min-height: 0;
       /* Necesario para que flexbox funcione bien en Firefox/otros */
   }

   .content-scroll-area {
       /* Altura total de la pantalla MENOS el header (~85px) y un margen abajo */
       height: calc(100vh - 100px);
       display: flex;
       flex-direction: column;
       padding-bottom: 25px;
       /* Un pequeño respiro abajo */
       overflow: hidden;
       /* Asegura que no salga barra de scroll */
   }

   /* --- 2. BARRA DE FILTROS SUPERIOR --- */
   .filter-chip {
       background: white;
       border: 1px solid var(--border-color);
       padding: 6px 14px;
       border-radius: 50px;
       font-size: 0.85rem;
       color: var(--text-muted);
       cursor: pointer;
       transition: all 0.2s ease;
       display: flex;
       align-items: center;
       gap: 6px;
       white-space: nowrap;
       /* Evita que el texto salte de línea */
   }

   .filter-chip:hover,
   .filter-chip.active {
       background: var(--active-icon-bg);
       color: var(--accent-blue);
       border-color: var(--accent-blue);
       font-weight: 600;
   }


   /* --- 3. REJILLA DEL CALENDARIO --- */

   /* Cabecera de días (LUN, MAR...) */
   .calendar-grid-header {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       text-align: center;
       gap: 8px;
       font-weight: 600;
       color: var(--text-muted);
       font-size: 0.85rem;
       margin-bottom: 10px;
   }

   /* Cuerpo del calendario */
   .calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       /* Divide el espacio vertical en 5 filas iguales */
       grid-template-rows: repeat(5, 1fr);
       gap: 8px;
       flex-grow: 1;
       /* Se estira para ocupar todo el espacio sobrante */
       margin-top: 5px;
   }

   /* Celdas de los días */
   .cal-day {
       width: 100%;
       height: 100%;
       /* Llena la celda del grid */
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       border-radius: 12px;
       cursor: pointer;
       position: relative;
       font-weight: 500;
       transition: all 0.2s ease;
       color: var(--text-color);
       background-color: transparent;
       /* Por defecto */
   }

   .cal-day:hover {
       background-color: var(--active-icon-bg);
   }

   /* Días de otros meses */
   .cal-day.muted {
       color: var(--text-muted);
       opacity: 0.4;
   }

   /* --- 4. INDICADORES DE EVENTOS --- */

   /* Puntito rojo para días con evento */
   .cal-day.has-event::after {
       content: '';
       width: 5px;
       height: 5px;
       background-color: #ff7675;
       /* Rojo suave */
       border-radius: 50%;
       position: absolute;
       bottom: 15%;
       /* Posición relativa */
   }

   /* Día Seleccionado (Estilo sólido oscuro) */
   .cal-day.selected {
       background-color: #2c3e50;
       color: white;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       transform: scale(1.05);
       /* Efecto pop ligero */
       z-index: 1;
       /* Para que quede por encima si crece */
   }

   /* El puntito cambia a blanco en el día seleccionado */
   .cal-day.selected::after {
       background-color: white;
   }


   /* --- 5. PANEL DE DETALLES (DERECHA) --- */

   /* Contenedor flexible para distribuir contenido */
   .event-details-panel {
       height: 100%;
       display: flex;
       flex-direction: column;
   }

   /* Caja pequeña para iconos (reloj, persona...) */
   .icon-box-sm {
       width: 38px;
       height: 38px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   /* Animación hover para el botón de recordatorio */
   .hover-scale {
       transition: transform 0.2s, box-shadow 0.2s;
   }

   .hover-scale:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   /* Asegurar que el botón se quede abajo */
   .mt-auto {
       margin-top: auto !important;
   }




   /* ================================================= */
   /* ESTILOS PÁGINA HORARIOS (VISUAL) */
   /* ================================================= */

   /* --- Contenedor Principal del Grid --- */
   .schedule-container {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   /* Cabecera de días (LUN, MAR...) */
   .schedule-header {
       display: grid;
       /* 1 columna hora (60px) + 5 días (iguales) */
       grid-template-columns: 60px repeat(5, 1fr);
       gap: 10px;
       margin-bottom: 10px;
       text-align: center;
   }

   .day-label {
       font-weight: 700;
       color: var(--text-muted);
       font-size: 0.85rem;
       letter-spacing: 1px;
       text-transform: uppercase;
   }

   /* Cuerpo del Horario */
   .schedule-grid {
       display: grid;
       grid-template-columns: 60px repeat(5, 1fr);
       grid-auto-rows: 1fr;
       /* Todas las filas de clase miden lo mismo */
       gap: 10px;
       flex-grow: 1;
       /* Ocupa todo el alto disponible */
       overflow-y: auto;
       /* Scroll interno solo si es necesario en pantallas muy bajitas */
       padding-right: 5px;
   }

   /* Columna de Hora */
   .time-slot {
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-muted);
       border-right: 1px solid var(--border-color);
   }

   /* Bloque de Asignatura (Card) */
   .class-card {
       background-color: white;
       border: 1px solid var(--border-color);
       border-radius: 12px;
       padding: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       cursor: pointer;
       transition: all 0.2s ease;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
       min-height: 80px;
       /* Altura mínima para que respire */
   }

   .class-card span {
       font-weight: 600;
       font-size: 0.9rem;
       color: var(--text-color);
   }

   .class-card small {
       font-size: 0.7rem;
       color: var(--text-muted);
       margin-top: 4px;
   }

   /* Hover Effect */
   .class-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   }

   /* ESTADO SELECCIONADO (El que simula el click) */
   .class-card.selected {
       background-color: #ff7675;
       /* Color "Salmon" corporativo */
       border-color: #ff7675;
       box-shadow: 0 8px 20px rgba(255, 118, 117, 0.3);
       transform: scale(1.02);
       z-index: 2;
   }

   .class-card.selected span,
   .class-card.selected small {
       color: white !important;
   }

   /* Fila de Recreo */
   .break-row {
       grid-column: 1 / -1;
       /* Ocupa todo el ancho */
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: rgba(0, 0, 0, 0.02);
       border-radius: 50px;
       padding: 5px;
       margin: 5px 0;
       color: var(--text-muted);
       font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 1px;
   }

   /* --- Panel Derecho (Detalles) --- */
   .detail-header-bg {
       background: var(--active-icon-bg);
       /* Fondo suave arriba */
       padding: 30px;
       border-bottom: 1px solid var(--border-color);
   }

   .detail-info-item {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 15px;
       background-color: white;
       border: 1px solid var(--border-color);
       border-radius: 12px;
   }

   .icon-square {
       width: 45px;
       height: 45px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
   }



   /* ================================================= */
   /* ESTILOS PÁGINA CALIFICACIONES (VISUAL) */
   /* ================================================= */

   /* --- Tabla de Notas Moderna --- */
   .grades-table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0 8px;
       /* Separación entre filas */
   }

   .grades-table th {
       color: var(--text-muted);
       font-size: 0.75rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       padding: 0 15px 10px 15px;
       border: none;
   }

   .grade-row td {
       background-color: white;
       padding: 15px;
       vertical-align: middle;
       border-top: 1px solid var(--border-color);
       border-bottom: 1px solid var(--border-color);
       transition: all 0.2s ease;
       cursor: pointer;
   }

   /* Bordes redondeados para las filas */
   .grade-row td:first-child {
       border-left: 1px solid var(--border-color);
       border-top-left-radius: 12px;
       border-bottom-left-radius: 12px;
   }

   .grade-row td:last-child {
       border-right: 1px solid var(--border-color);
       border-top-right-radius: 12px;
       border-bottom-right-radius: 12px;
   }

   /* Hover */
   .grade-row:hover td {
       background-color: var(--active-icon-bg);
       transform: translateY(-2px);
       border-color: var(--accent-blue);
   }

   /* FILA SELECCIONADA (Simulación visual) */
   .grade-row.selected td {
       background-color: #ff7675;
       /* Color corporativo */
       color: white !important;
       border-color: #ff7675;
   }

   .grade-row.selected .text-muted {
       color: rgba(255, 255, 255, 0.8) !important;
   }

   .grade-row.selected .icon-box-sm {
       background-color: rgba(255, 255, 255, 0.2) !important;
       color: white !important;
   }

   /* Badges de Nota */
   .grade-badge {
       padding: 6px 12px;
       border-radius: 8px;
       font-weight: 700;
       font-size: 0.9rem;
       display: inline-block;
       min-width: 60px;
       text-align: center;
   }

   .grade-excellent {
       background-color: #d1fae5;
       color: #065f46;
   }

   /* Verde */
   .grade-average {
       background-color: #fef3c7;
       color: #92400e;
   }

   /* Amarillo */
   .grade-fail {
       background-color: #fee2e2;
       color: #b91c1c;
   }

   /* Rojo */

   /* Ajuste visual cuando está seleccionado */
   .grade-row.selected .grade-badge {
       background-color: white;
       color: #ff7675;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   }

   /* --- Panel Derecho (Detalle Nota) --- */
   .score-circle-container {
       display: flex;
       justify-content: center;
       padding: 20px 0;
   }

   .score-big {
       font-size: 4rem;
       font-weight: 800;
       line-height: 1;
       color: var(--text-color);
   }

   .score-total {
       font-size: 1.5rem;
       color: var(--text-muted);
       font-weight: 500;
   }

   .feedback-box {
       background-color: var(--active-icon-bg);
       border-radius: 12px;
       padding: 15px;
       border-left: 4px solid var(--accent-blue);
   }


   /* ================================================= */
   /* ESTILOS PÁGINA MATERIALES (VISUAL) */
   /* ================================================= */

   /* ================================================= */
   /* ESTILOS PÁGINA MATERIALES (VISUAL) */
   /* ================================================= */

   /* --- Columna Izquierda: Filtros y Lista --- */

   /* Contenedor de filtros compactos */
   .filters-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
       margin-bottom: 15px;
   }

   .form-select-sm {
       border-radius: 8px;
       border-color: var(--border-color);
       font-size: 0.85rem;
       color: var(--text-color);
       background-color: white;
   }

   /* Lista de Archivos */
   .materials-list {
       overflow-y: auto;
       /* Scroll interno solo para la lista */
       padding-right: 5px;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .material-item {
       background-color: white;
       border: 1px solid var(--border-color);
       border-radius: 12px;
       padding: 12px;
       display: flex;
       align-items: center;
       gap: 15px;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .material-item:hover {
       transform: translateX(4px);
       border-color: var(--accent-blue);
   }

   /* Icono del archivo */
   .file-icon-box {
       width: 45px;
       height: 45px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.4rem;
       flex-shrink: 0;
   }

   .icon-pdf {
       background-color: #fee2e2;
       color: #dc2626;
   }

   .icon-code {
       background-color: #e0e7ff;
       color: #4f46e5;
   }

   .icon-book {
       background-color: #dbeafe;
       color: #2563eb;
   }

   /* Estado Seleccionado */
   .material-item.selected {
       background-color: var(--active-icon-bg);
       border-color: var(--accent-blue);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   }

   .material-item.selected .file-icon-box {
       background-color: var(--accent-blue);
       color: white;
   }

   /* --- Columna Derecha: Previsualización --- */

   .preview-container {
       height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       position: relative;
   }

   /* Efecto Libro/Documento */
   .book-cover {
       max-height: 350px;
       width: auto;
       max-width: 100%;
       border-radius: 8px;
       box-shadow:
           5px 5px 15px rgba(0, 0, 0, 0.15),
           1px 1px 0px rgba(255, 255, 255, 0.5) inset;
       /* Brillo borde */
       transition: transform 0.3s ease;
       object-fit: cover;
   }

   .book-cover:hover {
       transform: scale(1.02) translateY(-5px);
       box-shadow: 10px 15px 25px rgba(0, 0, 0, 0.2);
   }

   .preview-meta {
       margin-top: 20px;
       width: 100%;
   }

   .meta-tag {
       background-color: #ff7675;
       color: white;
       padding: 4px 10px;
       border-radius: 4px;
       font-size: 0.7rem;
       text-transform: uppercase;
       font-weight: 700;
       letter-spacing: 1px;
       display: inline-block;
       margin-bottom: 10px;
   }



   /* ================================================= */
   /* ESTILOS PÁGINA MENSAJES (CHAT) */
   /* ================================================= */

   /* --- Columna Izquierda: Lista de Contactos --- */
   .chat-search-bar {
       margin-bottom: 15px;
   }

   .contacts-list {
       overflow-y: auto;
       /* Scroll interno para la lista */
       padding-right: 5px;
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .contact-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px;
       border-radius: 12px;
       cursor: pointer;
       transition: all 0.2s ease;
       border: 1px solid transparent;
   }

   .contact-item:hover {
       background-color: var(--bg-color);
   }

   /* Contacto Seleccionado */
   .contact-item.active {
       background-color: var(--active-icon-bg);
       border-color: var(--border-color);
   }

   .avatar-md {
       width: 45px;
       height: 45px;
       border-radius: 50%;
       object-fit: cover;
   }

   /* Indicador de estado (online) */
   .avatar-wrapper {
       position: relative;
   }

   .status-indicator {
       position: absolute;
       bottom: 0;
       right: 0;
       width: 12px;
       height: 12px;
       background-color: #22c55e;
       /* Verde */
       border: 2px solid white;
       border-radius: 50%;
   }

   /* --- Columna Derecha: Ventana de Chat --- */
   .chat-window {
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .chat-header {
       padding: 15px 20px;
       border-bottom: 1px solid var(--border-color);
       display: flex;
       align-items: center;
       justify-content: space-between;
       background-color: rgba(255, 255, 255, 0.5);
   }

   .chat-messages-area {
       flex-grow: 1;
       padding: 20px;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
       gap: 15px;
       background-color: #f8fafc;
       /* Fondo muy sutil para el área de mensajes */
   }

   /* Burbujas de Mensaje */
   .message-bubble {
       max-width: 70%;
       padding: 12px 16px;
       border-radius: 18px;
       font-size: 0.9rem;
       line-height: 1.5;
       position: relative;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }

   /* Mensaje Recibido (Izquierda) */
   .message-received {
       align-self: flex-start;
       background-color: white;
       color: var(--text-color);
       border-bottom-left-radius: 4px;
       /* Efecto "pico" */
   }

   /* Mensaje Enviado (Derecha) */
   .message-sent {
       align-self: flex-end;
       background-color: #3b82f6;
       /* Azul moderno (o usa var(--accent-blue)) */
       color: white;
       border-bottom-right-radius: 4px;
       /* Efecto "pico" */
   }

   .message-time {
       font-size: 0.65rem;
       opacity: 0.7;
       margin-top: 4px;
       display: block;
       text-align: right;
   }

   /* Separador de Fecha */
   .chat-date-divider {
       text-align: center;
       margin: 10px 0;
   }

   .chat-date-divider span {
       background-color: #e2e8f0;
       color: var(--text-muted);
       padding: 4px 12px;
       border-radius: 20px;
       font-size: 0.75rem;
       font-weight: 600;
   }

   /* Área de Input */
   .chat-input-area {
       padding: 15px;
       background-color: white;
       border-top: 1px solid var(--border-color);
   }

   .chat-input-wrapper {
       display: flex;
       align-items: center;
       background-color: var(--bg-color);
       border-radius: 50px;
       padding: 5px 15px;
       border: 1px solid var(--border-color);
   }

   .chat-input {
       border: none;
       background: transparent;
       flex-grow: 1;
       padding: 10px;
       outline: none;
       font-size: 0.9rem;
   }

   .btn-icon-chat {
       color: var(--text-muted);
       font-size: 1.2rem;
       padding: 5px;
       cursor: pointer;
       transition: color 0.2s;
   }

   .btn-icon-chat:hover {
       color: var(--accent-blue);
   }

   .btn-send {
       color: #3b82f6;
   }





   /* ================================================= */
   /* ESTILOS PÁGINA INSCRIPCIÓN */
   /* ================================================= */

   /* --- Columna Izquierda: Filtros y Lista --- */

   .filters-container {
       background-color: #f8fafc;
       border-radius: 12px;
       padding: 15px;
       margin-bottom: 20px;
       border: 1px solid var(--border-color);
   }

   .filter-label {
       font-size: 0.75rem;
       font-weight: 700;
       color: var(--text-muted);
       margin-bottom: 4px;
       display: block;
   }

   /* Checkboxes de Días (Estilo Botón) */
   .day-selector {
       display: flex;
       justify-content: space-between;
       gap: 5px;
   }

   .day-checkbox {
       display: none;
       /* Ocultar el input real */
   }

   .day-label-box {
       width: 30px;
       height: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-muted);
       cursor: pointer;
       background-color: white;
       transition: all 0.2s;
   }

   /* Cuando el checkbox está marcado */
   .day-checkbox:checked+.day-label-box {
       background-color: var(--text-color);
       color: white;
       border-color: var(--text-color);
   }

   /* Lista de Cursos */
   .course-list {
       overflow-y: auto;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding-right: 5px;
   }

   .course-card {
       background: white;
       border: 1px solid var(--border-color);
       border-radius: 12px;
       padding: 15px;
       cursor: pointer;
       transition: all 0.2s ease;
       border-left: 4px solid transparent;
   }

   .course-card:hover {
       transform: translateX(2px);
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   }

   .course-card.active {
       border-color: var(--accent-blue);
       /* Borde completo suave */
       border-left-color: var(--accent-blue);
       /* Borde izquierdo grueso */
       background-color: var(--active-icon-bg);
   }

   /* --- Columna Derecha: Detalle Curso --- */

   .course-hero {
       padding: 30px;
       background: linear-gradient(135deg, var(--bg-color) 0%, #ffffff 100%);
       border-bottom: 1px solid var(--border-color);
   }

   .info-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
       margin-bottom: 20px;
   }

   .info-item label {
       font-size: 0.7rem;
       text-transform: uppercase;
       color: var(--text-muted);
       font-weight: 700;
       display: block;
       margin-bottom: 4px;
   }

   .info-item p {
       font-weight: 600;
       color: var(--text-color);
       margin: 0;
       font-size: 0.95rem;
   }

   /* Barra de Plazas (Progress bar) */
   .seats-progress {
       height: 8px;
       background-color: #e2e8f0;
       border-radius: 4px;
       overflow: hidden;
       margin-top: 5px;
   }

   .seats-bar {
       height: 100%;
       background-color: var(--accent-blue);
       border-radius: 4px;
   }

   /* Alerta de Conflicto */
   .conflict-alert {
       border-radius: 10px;
       padding: 12px;
       font-size: 0.9rem;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .conflict-none {
       background-color: #d1fae5;
       color: #065f46;
       border: 1px solid #a7f3d0;
   }



   /* ================================================= */
   /* ESTILOS PÁGINA AJUSTES */
   /* ================================================= */

   /* --- Tarjetas de Sección --- */
   .settings-section-title {
       font-size: 0.75rem;
       font-weight: 800;
       letter-spacing: 1px;
       text-transform: uppercase;
       color: var(--text-muted);
       margin-bottom: 15px;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   /* --- Perfil Grande --- */
   .profile-large-header {
       display: flex;
       align-items: center;
       gap: 20px;
       padding-bottom: 20px;
       border-bottom: 1px solid var(--border-color);
       margin-bottom: 20px;
   }

   .avatar-xl {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       object-fit: cover;
       border: 3px solid white;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }

   /* --- Lista de Sesiones --- */
   .session-item {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 15px;
       background-color: #f8fafc;
       border-radius: 12px;
       border: 1px solid transparent;
       transition: 0.2s;
   }

   .session-item:hover {
       border-color: var(--border-color);
       background-color: white;
   }

   .device-icon {
       font-size: 1.5rem;
       color: var(--text-muted);
   }

   /* --- Toggles Modernos (Switches) --- */
   .form-check-input:checked {
       background-color: var(--accent-blue);
       border-color: var(--accent-blue);
   }

   .setting-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 0;
       border-bottom: 1px solid var(--border-color);
   }

   .setting-row:last-child {
       border-bottom: none;
   }

   /* --- Checkboxes de Privacidad --- */
   .privacy-option {
       background-color: white;
       border: 1px solid var(--border-color);
       padding: 15px;
       border-radius: 10px;
       cursor: pointer;
       transition: 0.2s;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .privacy-option:hover {
       border-color: var(--accent-blue);
       background-color: var(--active-icon-bg);
   }

   /* Cuando el checkbox dentro está marcado */
   .privacy-check:checked+label {
       font-weight: 600;
       color: var(--accent-blue);
   }

   /* --- Botones de Acción Footer --- */
   .settings-actions {
       margin-top: auto;
       padding-top: 20px;
       display: flex;
       gap: 15px;
       justify-content: flex-end;
   }