/* ============================================ */
/* VARIABLES CSS: Colores principales del tema   */
/* Se usan en todo el archivo con var(--nombre)  */
/* ============================================ */
:root {
    --azul-principal: #1e3c72;      /* Azul oscuro - color principal */
    --azul-secundario: #2a5298;     /* Azul medio - degrade */
    --azul-claro: #4a6fa5;         /* Azul claro - iconos */
    --azul-fondo: #e8f4fd;         /* Azul muy claro - fondos destacados */
    --azul-fondo-claro: #f0f7ff;   /* Azul aún más claro - badges */
    --blanco: #ffffff;             /* Color blanco */
    --gris-fondo: #f5f5f5;         /* Gris claro - fondo página */
    --gris-texto: #333333;          /* Gris oscuro - texto principal */
    --gris-borde: #dee2e6;         /* Gris - bordes y separadores */
    --verde-play: #30d158;         /* Verde - botón play (timer) */
    --naranja-pausa: #ff9f0a;      /* Naranja - botón pausa (timer) */
}

/* ============================================ */
/* RESET: Estilos base para todos los elementos */
/* ============================================ */
* {
    margin: 0;          /* Elimina márgenes por defecto */
    padding: 0;         /* Elimina paddings por defecto */
    box-sizing: border-box; /* El padding se incluye en el ancho/alto */
}

/* ============================================ */
/* BODY: Estilos generales de la página         */
/* ============================================ */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía del sistema */
    font-size: 18px;       /* Tamaño de fuente base */
    line-height: 1.8;       /* Altura de línea para legibilidad */
    color: var(--gris-texto);          /* Color del texto */
    background-color: var(--gris-fondo); /* Fondo gris claro */
}

/* ============================================ */
/* LAYOUT: Contenedor principal flexbox         */
/* Combina sidebar + contenido lado a lado       */
/* ============================================ */
.layout {
    display: flex;             /* Activa flexbox */
    min-height: 100vh;        /* Ocupa toda la altura de la ventana */
}

/* ============================================ */
/* SIDEBAR: Menú lateral izquierdo              */
/* Fijo en pantalla, no se mueve al hacer scroll*/
/* ============================================ */
.sidebar {
    width: 300px;                         /* Ancho fijo del sidebar */
    background: linear-gradient(180deg, var(--azul-principal) 0%, var(--azul-secundario) 100%); /* Degradado azul vertical */
    color: var(--blanco);                 /* Texto blanco */
    padding: 25px;                        /* Espacio interno */
    position: fixed;                      /* Posición fija en la pantalla */
    height: 100vh;                        /* Ocupa toda la altura */
    overflow-y: auto;                     /* Scroll si el contenido excede */
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2); /* Sombra a la derecha */
    z-index: 100;                         /* Encima de otros elementos */
}

/* Encabezado del sidebar (logo + título del curso) */
.sidebar-header {
    text-align: center;           /* Texto centrado */
    padding-bottom: 20px;         /* Espacio debajo */
    border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Línea separadora */
    margin-bottom: 20px;         /* Espacio después */
}

/* Título "1º DAM" en el sidebar */
.sidebar-header h1 {
    font-size: 1.4em;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra del texto */
}

/* Subtítulo del sidebar */
.sidebar-header p {
    font-size: 0.9em;
    opacity: 0.8;            /* Texto ligeramente transparente */
}

/* Icono circular del sidebar (gorro graduación) */
.sidebar-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15); /* Fondo semi-transparente */
    border-radius: 50%;       /* Forma circular */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;     /* Centrado con espacio debajo */
}

.sidebar-icon i {
    font-size: 1.8em;         /* Tamaño del icono */
}

/* ============================================ */
/* TARJETA PRÓXIMO EXAMEN: Countdown en sidebar */
/* ============================================ */
.next-exam-card {
    background: rgba(255, 255, 255, 0.1);  /* Fondo semi-transparente */
    border-radius: 10px;                     /* Esquinas redondeadas */
    padding: 20px;                           /* Espacio interno */
    margin-bottom: 20px;                     /* Espacio debajo */
    backdrop-filter: blur(10px);            /* Efecto blur detrás */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil */
}

.next-exam-card h3 {
    font-size: 0.8em;
    text-transform: uppercase;     /* Texto en mayúsculas */
    letter-spacing: 1px;          /* Espaciado entre letras */
    opacity: 0.8;
    margin-bottom: 10px;
}

/* Título del próximo examen */
.next-exam-title {
    font-size: 1.1em;
    font-weight: 600;             /* Texto seminegrita */
    margin-bottom: 15px;
    line-height: 1.4;             /* Altura de línea compacta */
}

/* Grid para los 4 elementos del countdown */
.countdown-display {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 8px;                    /* Espacio entre celdas */
    text-align: center;         /* Texto centrado */
}

/* Cada celda del countdown (días, horas, min, seg) */
.countdown-item {
    background: rgba(0, 0, 0, 0.2); /* Fondo oscuro semi-transparente */
    border-radius: 8px;
    padding: 8px 4px;
}

/* Número grande del countdown */
.countdown-value {
    font-size: 1.3em;
    font-weight: 700;            /* Negrita */
    font-variant-numeric: tabular-nums; /* Números monoespaciados */
}

/* Etiqueta debajo del número (Días, Horas, etc.) */
.countdown-label {
    font-size: 0.65em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ============================================ */
/* ESTADÍSTICAS: Sección de datos numéricos      */
/* ============================================ */
.sidebar-stats {
    margin-bottom: 20px;
}

.sidebar-stats h3 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Cada fila de estadística */
.stat-row {
    display: flex;
    justify-content: space-between; /* Icono a izquierda, número a derecha */
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora */
}

.stat-row:last-child {
    border-bottom: none;       /* La última fila sin línea */
}

.stat-row i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Valor numérico de la estadística */
.stat-value {
    font-weight: 600;
}

/* ============================================ */
/* LEYENDA DE CATEGORÍAS: Colores por materia   */
/* ============================================ */
.category-legend h3 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Cada item de categoría (estilo de botón) */
.category-item {
    display: flex;
    align-items: center;    /* Punto e icono alineados */
    gap: 10px;              /* Espacio entre ellos */
    padding: 10px 12px;     /* Espacio interno */
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.1); /* Transparente */
    border: none;           /* Sin borde */
    border-radius: 8px;     /* Esquinas redondeadas */
    color: var(--blanco);   /* Texto blanco */
    width: 100%;            /* Ocupa todo el ancho */
    text-align: left;       /* Texto alineado a la izquierda */
    cursor: pointer;        /* Cursor de mano */
    margin-bottom: 6px;     /* Espacio entre botones */
    transition: all 0.3s;   /* Animación suave */
    font-family: inherit;   /* Hereda la fuente */
}

/* Hover: se aclara al pasar el ratón */
.category-item:hover {
    background: rgba(255, 255, 255, 0.2); /* Más claro */
}

/* Categoría activa: fondo blanco, texto azul */
.category-item.active {
    background: var(--blanco);
    color: var(--azul-principal);
}

/* Puntos de color que representan cada categoría */
.category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;       /* Forma circular */
    flex-shrink: 0;            /* No se encoge */
}

/* Contador de exámenes en cada categoría */
.category-count {
    margin-left: auto;         /* Empuja a la derecha */
    background: rgba(0, 0, 0, 0.2); /* Fondo oscuro */
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
}

/* Contador cuando está activo */
.category-item.active .category-count {
    background: var(--azul-fondo); /* Fondo azul claro */
    color: var(--azul-principal);
}

/* Colores específicos para cada categoría (coincide con las tarjetas) */
.category-dot.matematicas { background: #1e3c72; }      /* Azul oscuro */
.category-dot.historia { background: #e67e22; }         /* Naranja */
.category-dot.ciencias { background: #27ae60; }        /* Verde */
.category-dot.lengua { background: #c0392b; }          /* Rojo */
.category-dot.idiomas { background: #8e44ad; }         /* Morado */
.category-dot.sostenibilidad { background: #00b894; }  /* Turquesa */
.category-dot.ingles { background: #e84393; }          /* Rosa */
.category-dot.ipe { background: #fdcb6e; }            /* Amarillo */

/* ============================================ */
/* CALENDARIO: En sidebar                        */
/* ============================================ */
.sidebar-calendar {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-calendar h3 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Encabezado del calendario (mes y navegación) */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-header span {
    font-weight: 600;
    font-size: 0.85em;
}

.cal-nav {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--blanco);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cal-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Días de la semana */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 5px;
}

.calendar-weekdays span {
    text-align: center;
    font-size: 0.7em;
    font-weight: 600;
    opacity: 0.6;
    padding: 4px 0;
}

/* Cuadrícula de días */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

/* Cada día */
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.calendar-day:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Día actual */
.calendar-day.today {
    background: var(--blanco);
    color: var(--azul-principal);
    font-weight: 600;
}

/* Día con exámenes */
.calendar-day.has-exam {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.calendar-day.has-exam::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #30d158; /* Verde para indicar examen */
}

/* Día seleccionado */
.calendar-day.selected {
    background: var(--blanco);
    color: var(--azul-principal);
}

/* Día fuera del mes actual */
.calendar-day.other-month {
    opacity: 0.3;
}

/* ============================================ */
/* BOTONES DE FILTRO RÁPIDO: En sidebar         */
/* ============================================ */
.quick-filters {
    margin-top: 20px;
}

.quick-filters h3 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Estilo base de los botones de filtro */
.quick-filter-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;                     /* Ocupan todo el ancho */
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.1); /* Transparente */
    border: none;                     /* Sin borde */
    border-radius: 8px;
    color: var(--blanco);            /* Texto blanco */
    font-size: 0.9em;
    font-family: inherit;
    cursor: pointer;                 /* Cursor de mano */
    margin-bottom: 8px;
    transition: all 0.3s;           /* Animación suave */
}

/* Hover: se aclara al pasar el ratón */
.quick-filter-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Botón activo: fondo blanco, texto azul */
.quick-filter-btn.active {
    background: var(--blanco);
    color: var(--azul-principal);
}

/* Contador dentro del botón (número de exámenes) */
.quick-filter-btn .count {
    margin-left: auto;              /* Empuja a la derecha */
    background: rgba(0, 0, 0, 0.2); /* Fondo oscuro */
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
}

.quick-filter-btn.active .count {
    background: var(--azul-fondo);  /* Fondo azul claro */
    color: var(--azul-principal);
}

/* ============================================ */
/* CONTENIDO PRINCIPAL: Área derecha            */
/* Ocupa el espacio restante después del sidebar*/
/* ============================================ */
.main-content {
    flex: 1;                         /* Ocupa todo el espacio disponible */
    margin-left: 300px;             /* Espacio para el sidebar */
    padding: 30px;                  /* Espacio interno */
}

/* ============================================ */
/* ENCABEZADO PRINCIPAL: Título de la página    */
/* ============================================ */
.header {
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario)); /* Degradado azul diagonal */
    color: var(--blanco);
    padding: 25px 30px;
    text-align: center;
    margin-bottom: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Sombra suave */
}

.header h1 {
    font-size: 2em;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header p {
    font-size: 1.1em;
    opacity: 0.9;
}

/* ============================================ */
/* SECCIÓN DE BÚSQUEDA: Barra y filtros         */
/* ============================================ */
.search-section {
    background: var(--blanco);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.search-section h2 {
    color: var(--azul-principal);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--azul-secundario);
    font-size: 1.4em;
}

/* Contenedor de la caja de búsqueda */
.search-box {
    position: relative;           /* Para posicionar el icono */
    margin-bottom: 20px;
}

/* Icono de lupa dentro de la caja */
.search-box i {
    position: absolute;
    left: 15px;                 /* 15px desde la izquierda */
    top: 50%;                   /* Centrado vertical */
    transform: translateY(-50%); /* Ajuste fino del centrado */
    color: var(--azul-claro);   /* Color del icono */
}

/* Input de texto de búsqueda */
.search-box input {
    width: 100%;                 /* Ocupa todo el ancho */
    padding: 14px 14px 14px 45px; /* Espacio, icono a la izquierda */
    border: 2px solid var(--gris-borde); /* Borde gris */
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s;      /* Animación al enfocar */
}

/* Input enfocado: borde azul y sombra */
.search-box input:focus {
    outline: none;                           /* Elimina el borde azul del navegador */
    border-color: var(--azul-secundario);   /* Borde azul */
    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.15); /* Resplandor azul */
}

/* ============================================ */
/* BOTONES DE FILTRO: Por categoría             */
/* ============================================ */
.filters {
    display: flex;
    flex-wrap: wrap;            /* Saltan a siguiente línea si no caben */
    gap: 10px;                  /* Espacio entre botones */
}

/* Estilo base de los botones de filtro */
.filter-btn {
    padding: 10px 18px;
    border: 2px solid var(--azul-secundario); /* Borde azul */
    background: var(--blanco);                 /* Fondo blanco */
    color: var(--azul-secundario);            /* Texto azul */
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hover: fondo azul claro */
.filter-btn:hover {
    background: var(--azul-fondo);
}

/* Botón activo: fondo degradado azul, texto blanco */
.filter-btn.active {
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
    color: var(--blanco);
    border-color: transparent; /* Elimina el borde azul */
}

/* ============================================ */
/* CONTADOR DE RESULTADOS                        */
/* Muestra cuántos exámenes se están mostrando   */
/* ============================================ */
.results-counter {
    background: var(--azul-fondo-claro);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95em;
}

.results-counter span {
    color: var(--azul-claro);
}

.results-counter strong {
    color: var(--azul-principal);
}

/* ============================================ */
/* CUADRÍCULA DE TARJETAS: Grid de exámenes     */
/* ============================================ */
.cards-grid {
    display: grid;
    /* Columnas automáticas: mínimo 300px, se ajustan según el espacio */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;                      /* Espacio entre tarjetas */
}

/* ============================================ */
/* TARJETA DE EXAMEN: Cada tarjeta individual   */
/* ============================================ */
.card {
    background: var(--blanco);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;               /* El contenido no sale de los bordes */
    transition: all 0.3s ease;      /* Animación suave */
    border: 1px solid var(--gris-borde);
}

/* Hover: la tarjeta se eleva ligeramente */
.card:hover {
    transform: translateY(-5px);     /* Se mueve 5px hacia arriba */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada */
}

/* Barra de color en la parte superior de cada tarjeta */
.card-color-bar {
    height: 5px;                    /* Grosor de la barra */
}

/* Colores de las barras según la categoría */
.card-color-bar.azul { background: linear-gradient(90deg, var(--azul-principal), var(--azul-secundario)); }
.card-color-bar.verde { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.card-color-bar.naranja { background: linear-gradient(90deg, #e67e22, #f39c12); }
.card-color-bar.rojo { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.card-color-bar.morado { background: linear-gradient(90deg, #8e44ad, #9b59b6); }
.card-color-bar.turquesa { background: linear-gradient(90deg, #00b894, #00cec9); }
.card-color-bar.rosa { background: linear-gradient(90deg, #e84393, #fd79a8); }
.card-color-bar.amarillo { background: linear-gradient(90deg, #fdcb6e, #f9ca24); }

/* Contenido interior de la tarjeta */
.card-body {
    padding: 20px;
}

/* Fila superior: categoría + estado */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Badge de categoría (ej: "Base de Datos") */
.card-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--azul-secundario);
    background: var(--azul-fondo-claro);
    padding: 4px 12px;
    border-radius: 20px;            /* Completamente redondeado */
}

/* Badge de estado (Pendiente/Completado) */
.card-status {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Colores según el estado */
.card-status.pendiente {
    background: #fff3cd;   /* Amarillo claro */
    color: #856404;        /* Texto amarillo oscuro */
}

.card-status.completado {
    background: #d4edda;   /* Verde claro */
    color: #155724;        /* Texto verde oscuro */
}

/* Título del examen */
.card-title {
    font-size: 1.2em;
    color: var(--azul-principal);
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title i {
    color: var(--azul-claro);
}

/* Descripción del examen */
.card-desc {
    font-size: 0.95rem;
    color: var(--gris-texto);
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Pie de la tarjeta: fecha + botón */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--gris-borde);
}

/* Fecha con icono */
.card-date {
    font-size: 0.9rem;
    color: var(--gris-texto);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-date i {
    color: var(--azul-claro);
}

/* Botón "Acceder" */
.card-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
    color: var(--blanco);
    text-decoration: none;           /* Elimina el subrayado */
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hover: el botón se agranda ligeramente */
.card-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
}

/* ============================================ */
/* MENSAJE "SIN RESULTADOS"                       */
/* Aparece cuando la búsqueda no devuelve nada   */
/* ============================================ */
.no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--blanco);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: none;                   /* Oculto por defecto */
}

.no-results i {
    font-size: 3em;                  /* Icono grande */
    color: var(--gris-borde);       /* Color gris apagado */
    margin-bottom: 20px;
}

.no-results h3 {
    font-size: 1.4em;
    color: var(--azul-principal);
    margin-bottom: 10px;
}

.no-results p {
    color: var(--gris-texto);
}

/* ============================================ */
/* PIE DE PÁGINA                                 */
/* ============================================ */
.footer {
    text-align: center;
    padding: 30px;
    color: #666666;
    font-size: 1em;
    margin-top: 30px;
}

/* ============================================ */
/* BOTÓN MÓVIL: Menú hamburguesa                 */
/* Solo visible en pantallas < 900px            */
/* ============================================ */
.mobile-toggle {
    display: none;                   /* Oculto en escritorio */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 200;                   /* Por encima del sidebar */
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
    border: none;
    border-radius: 10px;
    color: var(--blanco);
    font-size: 1.2em;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ============================================ */
/* RESPONSIVE: Estilos para tablets              */
/* Pantallas entre 768px y 1024px              */
/* ============================================ */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Reducimos el ancho del sidebar */
    .sidebar {
        width: 260px;
    }

    /* El contenido se ajusta al sidebar más pequeño */
    .main-content {
        margin-left: 260px;
    }

    /* Las tarjetas muestran 2 columnas */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Reducimos el padding general */
    .main-content {
        padding: 20px;
    }

    /* Reducimos el header */
    .header {
        padding: 20px;
    }

    .header h1 {
        font-size: 1.8em;
    }

    /* Los filtros se muestran en 2 filas si es necesario */
    .filters {
        gap: 8px;
    }

    .filter-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* ============================================ */
/* RESPONSIVE: Estilos para móviles              */
/* Pantallas menores a 768px                    */
/* ============================================ */
@media (max-width: 768px) {
    /* El sidebar se oculta y se despliega desde la izquierda */
    .sidebar {
        width: 280px;                    /* Ancho del sidebar en móvil */
        transform: translateX(-100%);   /* Fuera de la pantalla */
        transition: transform 0.3s ease; /* Animación suave */
    }

    /* Cuando tiene la clase "open", se muestra */
    .sidebar.open {
        transform: translateX(0);
    }

    /* El contenido ocupa toda la pantalla */
    .main-content {
        margin-left: 0;
        padding: 15px;
        padding-top: 75px;              /* Espacio para el botón hamburguesa */
    }

    /* El botón hamburguesa se hace visible */
    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* El header se adapta */
    .header {
        padding: 15px;
    }

    .header h1 {
        font-size: 1.4em;              /* Título más pequeño */
    }

    .header p {
        font-size: 0.9em;              /* Subtítulo más pequeño */
    }

    /* La sección de búsqueda se adapta */
    .search-section {
        padding: 15px;
    }

    .search-section h2 {
        font-size: 1.2em;              /* Título más pequeño */
    }

    .search-box input {
        padding: 12px 12px 12px 40px;
        font-size: 0.95rem;
    }

    /* Los botones de filtro se reducen */
    .filters {
        gap: 6px;
    }

    .filter-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .filter-btn i {
        display: none;                  /* Ocultamos iconos para ahorrar espacio */
    }

    /* El contador de resultados se adapta */
    .results-counter {
        flex-direction: column;
        gap: 5px;
        text-align: center;
        padding: 10px 15px;
        font-size: 0.85rem;
    }

    /* Las tarjetas ocupan toda la anchura */
    .cards-grid {
        grid-template-columns: 1fr;     /* 1 columna */
        gap: 12px;
    }

    /* Las tarjetas se adaptan */
    .card {
        border-radius: 8px;
    }

    .card-body {
        padding: 15px;
    }

    .card-title {
        font-size: 1.05em;             /* Título más pequeño */
    }

    .card-desc {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* El footer de la tarjeta se apila verticalmente */
    .card-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .card-btn {
        width: 100%;                   /* Botón ocupa todo el ancho */
        justify-content: center;
    }

    /* El mensaje de sin resultados se adapta */
    .no-results {
        padding: 40px 15px;
    }

    .no-results i {
        font-size: 2.5em;
    }

    .no-results h3 {
        font-size: 1.2em;
    }

    /* El footer se adapta */
    .footer {
        padding: 20px 15px;
        font-size: 0.9rem;
    }

    /* El calendario se adapta en tablets */
    .sidebar-calendar {
        margin-top: 15px;
    }
}

/* ============================================ */
/* RESPONSIVE: Móviles muy pequeños             */
/* Pantallas menores a 480px                    */
/* ============================================ */
@media (max-width: 480px) {
    /* Reducimos más el contenido */
    .main-content {
        padding: 12px;
        padding-top: 70px;
    }

    /* El header aún más compacto */
    .header {
        padding: 12px;
    }

    .header h1 {
        font-size: 1.2em;
    }

    .header p {
        font-size: 0.85em;
    }

    /* Los botones de filtro como selectores simples */
    .filter-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
        border-radius: 6px;
    }

    /* Las tarjetas más compactas */
    .card-body {
        padding: 12px;
    }

    .card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .card-category {
        font-size: 0.7rem;
    }

    .card-status {
        font-size: 0.75rem;
    }

    .card-title {
        font-size: 1em;
    }

    .card-desc {
        font-size: 0.85rem;
    }

    .card-date {
        font-size: 0.8rem;
    }

    .card-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* El botón hamburguesa más pequeño */
    .mobile-toggle {
        width: 40px;
        height: 40px;
        top: 10px;
        left: 10px;
    }

    /* Sidebar ocupa más porcentaje */
    .sidebar {
        width: 85%;                    /* Ocupa el 85% del ancho */
    }
}

/* ============================================ */
/* RESPONSIVE: Mejoras de interacción táctil    */
/* Para dispositivos con pantalla táctil         */
/* ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Elimina efectos hover que no funcionan en táctil */
    .card:hover {
        transform: none;
    }

    .card-btn:hover {
        transform: none;
    }

    /* Añade feedback visual al tocar */
    .card:active,
    .filter-btn:active,
    .card-btn:active,
    .quick-filter-btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    /* Botones más grandes para facilitar el toque */
    .filter-btn {
        min-height: 40px;              /* Altura mínima para facilidad táctil */
    }

    .card-btn {
        min-height: 40px;
    }
}

/* ============================================ */
/* OVERLAY: Fondo oscuro para el menú móvil      */
/* Aparece detrás del sidebar cuando está abierto */
/* ============================================ */
.sidebar-overlay {
    display: none;                   /* Oculto por defecto */
    position: fixed;                /* Fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;                    /* Cubre toda la pantalla */
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Negro semi-transparente */
    z-index: 99;                    /* Debajo del sidebar */
}

/* Visible cuando tiene la clase "show" */
.sidebar-overlay.show {
    display: block;
}

/* ============================================ */
/* RESPONSIVE: Overlay para tablets              */
/* ============================================ */
@media (min-width: 768px) {
    .sidebar-overlay {
        display: none !important;    /* Oculto en tablets y escritorio */
    }
}

/* ============================================ */
/* RESPONSIVE: Overlay específico para móvil     */
/* ============================================ */
@media (max-width: 767px) {
    .sidebar-overlay.show {
        display: block;
        animation: fadeIn 0.3s ease; /* Animación de aparición */
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}