:root {
    /* Colores Light Mode - OciannClass (#020b47) */
    --primary: #020b47;
    --primary-dark: #010824;
    --primary-light: #0f3d8c;
    --secondary: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    
    --bg-primary: #fdfdfd;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-input: #f9fafb;
    --bg-table: #e2e8f0;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    --text-white: #ffffff;
    
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-hover: #cbd5e1;
    --border-focus: #1e3a8a;
    
    --shadow-focus: 0 0 0 4px rgba(2, 11, 71, 0.12);
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme - OciannClass (#020b47) */
[data-theme="dark"] {
    /* --- COLOR PRINCIPAL OciannClass --- */
    --primary: #020b47;
    --primary-dark: #010824;
    --primary-light: #0f3d8c;
    --secondary: #94a3b8;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    
    /* --- FONDOS (La clave del diseño - Paleta Slate) --- */
    --bg-primary: #0f172a;    /* Slate 900: Fondo principal */
    --bg-secondary: #1e293b;  /* Slate 800: Para Sidebar, Header y Cards */
    --bg-tertiary: #334155;   /* Slate 700: Para hovers y separadores */
    --bg-card: #1e293b;       /* Igual al sidebar */
    --bg-input: #0f172a;      /* El input debe ser más oscuro que la card */
    --bg-table: #132036;      /* Un poco más claro para mejor lectura */
    
    /* --- TEXTOS --- */
    --text-primary: #f8fafc;   /* Slate 50: Blanco casi puro */
    --text-secondary: #cbd5e1; /* Slate 300: Gris azulado claro */
    --text-tertiary: #94a3b8;  /* Slate 400 */
    --text-muted: #64748b;     /* Slate 500: Para textos secundarios */
    --text-inverse: #0f172a;
    --text-white: #ffffff;
    
    /* --- BORDES --- */
    --border-color: #334155;   /* Slate 700: Borde sutil */
    --border-light: #1e293b;
    --border-hover: #475569;   /* Slate 600 */
    --border-focus: #0f3d8c;
    
    /* --- SOMBRAS --- */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 4px rgba(2, 11, 71, 0.35);
}

/* Deep Dark - OciannClass */
[data-theme-variant="deep-dark"] {
    --primary: #020b47;
    --primary-dark: #010824;
    --primary-light: #0f3d8c;

    --bg-primary: #020617;
    --bg-secondary: #0f172a;
    --bg-tertiary: #1e293b;
    --bg-card: #0f172a;
    --bg-input: #020617;
    --bg-table: #0b1220;

    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #64748b;

    --border-color: #1e293b;
    --border-light: #0f172a;
    --border-hover: #334155;
    --border-focus: #0f3d8c;

    --shadow-focus: 0 0 0 4px rgba(2, 11, 71, 0.35);
}

/* Tema Claude - Paleta Arena/Cálida */
[data-theme="claude"] {
    --primary: #d97706;
    --primary-dark: #b45309;
    --primary-light: #f59e0b;
    --secondary: #6b7280;
    
    --bg-primary: #f5f5f0;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ebebe0;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-table: #e5e5d1;
    
    --text-primary: #171717;
    --text-secondary: #4e4e4e;
    --text-tertiary: #6b7280;
    --text-muted: #808080;
    --text-inverse: #ffffff;
    
    --border-color: #d1d1c2;
    --border-light: #e5e5d1;
    --border-hover: #b4b4a0;
    --border-focus: #d97706;
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Claude Oscuro - Paleta cálida en oscuro */
[data-theme-variant="claude-dark"] {
    --primary: #d97757;
    --primary-dark: #c46648;
    --primary-light: #e08a6f;
    --secondary: #a3a3a3;

    --bg-primary: #171717;
    --bg-secondary: #212121;
    --bg-tertiary: #2a2a2a;
    --bg-card: #212121;
    --bg-input: #171717;
    --bg-table: #262626;

    --text-primary: #e3e3e3;
    --text-secondary: #b4b4b4;
    --text-tertiary: #8a8a8a;
    --text-muted: #737373;
    --text-inverse: #171717;

    --border-color: #333333;
    --border-light: #262626;
    --border-hover: #404040;
    --border-focus: #d97757;

    --shadow-focus: 0 0 0 4px rgba(217, 119, 87, 0.18);
}

/* Aurora - Verde/agua */
[data-theme-variant="aurora"] {
    --primary: #22c55e;
    --primary-dark: #16a34a;
    --primary-light: #4ade80;

    --bg-primary: #071a17;
    --bg-secondary: #0d2420;
    --bg-tertiary: #12312c;
    --bg-card: #0d2420;
    --bg-input: #071a17;
    --bg-table: #0b2d25;

    --text-primary: #e6fffb;
    --text-secondary: #a7f3d0;
    --text-tertiary: #7dd3fc;
    --text-muted: #7dd3fc;
    --text-inverse: #071a17;

    --border-color: #14443d;
    --border-light: #0d2420;
    --border-hover: #1a3d36;
    --border-focus: #22c55e;

    --shadow-focus: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

/* Cobalt - Azul frío */
[data-theme-variant="cobalt"] {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;

    --bg-primary: #f1f7ff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8f0ff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-table: #dbeafe;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --text-inverse: #ffffff;

    --border-color: #dbeafe;
    --border-light: #e8f0ff;
    --border-hover: #bfdbfe;
    --border-focus: #2563eb;

    --shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

/* Rose - Rosa suave */
[data-theme-variant="rose"] {
    --primary: #ec4899;
    --primary-dark: #db2777;
    --primary-light: #f472b6;

    --bg-primary: #fff1f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ffe4e6;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-table: #fecdd3;

    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;

    --border-color: #fecdd3;
    --border-light: #ffe4e6;
    --border-hover: #fda4af;
    --border-focus: #ec4899;

    --shadow-focus: 0 0 0 4px rgba(236, 72, 153, 0.16);
}

/* Utilidad: ocultar (estado inicial; el JS muestra con element.style.display) */
.u-hidden {
    display: none;
}

#periodInfo,
.period-section-inline {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: var(--transition);
    overflow-x: hidden;
}

/* Scrollbar personalizada - Estilo Cotidiano */
html, body { 
    scrollbar-width: thin; 
    scrollbar-color: rgba(6,182,212,0.35) transparent; 
    scrollbar-gutter: stable; 
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(8,145,178,.55), rgba(6,182,212,.45));
    border-radius: 10px;
    border: 2px solid rgba(30,41,59,0.35);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(8,145,178,.75), rgba(6,182,212,.65));
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    border-color: rgba(255,255,255,0.7);
}

/* Layout Principal */
.app-container {
    min-height: 100vh; /* fallback */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

/* Con dashboard-layout (sidebar + navbar): ocupar toda la pantalla, 100% del viewport */
html:has(.dashboard-layout) {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    scrollbar-gutter: auto; /* no reservar espacio; así body puede ser 100vw */
}
body:has(.dashboard-layout) {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100vw;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.app-container:has(.dashboard-layout) {
    width: 100%;
    min-width: 100vw;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* Layout y main al 100% del espacio disponible (anular margin-left del layout base) */
.app-container:has(.dashboard-layout) .dashboard-layout {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    margin-left: 0; /* anular calc(-50vw + 50%) del .dashboard-layout en dashboard.css */
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.app-container:has(.dashboard-layout) .dashboard-main {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    margin-left: 256px; /* sidebar abierto */
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Cuando el sidebar está colapsado (72px), usar ese espacio para el contenido */
.app-container:has(.dashboard-layout) .dashboard-layout:has(.dashboard-sidebar.app-sidebar.collapsed) .dashboard-main {
    margin-left: 72px;
}
/* Al hacer hover sobre el sidebar colapsado se expande a 256px; mantener margen acorde */
.app-container:has(.dashboard-layout) .dashboard-layout:has(.dashboard-sidebar.app-sidebar.collapsed:hover) .dashboard-main {
    margin-left: 256px;
}
/* Sidebar y navbar fijos: heredados de dashboard.css (.app-container) */
.app-container:has(.dashboard-layout) .dashboard-main .main-content {
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
}
.app-container:has(.dashboard-layout) .content-grid.content-grid--main-only {
    max-width: none;
    width: 100%;
}

/* Header - Oculto ya que el logo está integrado en controls-box */
.app-header {
    display: none;
}

.header-content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-title-section {
    flex-shrink: 0;
}

/* Brand Logo Styling */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.brand-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.brand-icon-svg:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.brand-icon-svg svg {
    color: var(--text-tertiary);
}

.brand-icon {
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.brand-highlight {
    color: #020b47;
}
[data-theme="dark"] .brand-highlight,
[data-theme-variant="deep-dark"] .brand-highlight {
    color: #7c9fd4;
}

.brand-module {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* E1 Brand (como Dashboard) */
.e1-brand-chip{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 14px;
    background: rgba(2, 11, 71, 0.08);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .e1-brand-chip{
    background: rgba(2, 11, 71, 0.25);
    border-color: rgba(255,255,255,0.10);
}
.e1-brand-emblem{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    position: relative;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .e1-brand-emblem{
    box-shadow: 0 2px 14px rgba(16, 185, 129, 0.22);
}
.e1-brand-emblem-main{
    position: relative;
    display:inline-block;
    line-height: 1;
    font-size: 0;
}
.e1-brand-emblem-main::before{
    content: 'E';
    position: relative;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -1px;
}
.e1-brand-emblem-main::after{
    content: '1';
    position: absolute;
    top: -2px;
    right: -9px;
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1;
}
.e1-brand-label{
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
}
.e1-brand-chip--sm{
    padding: 0;
    border-radius: 0;
    gap: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.controls-brand .e1-brand-chip--sm{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.e1-brand-chip--sm .e1-brand-emblem{ width: 34px; height: 34px; }

/* Ocultar emblema del brand chip (solo etiqueta visible) */
.attendance-area .e1-brand-emblem {
    display: none !important;
}

.e1-brand-chip--sm .e1-brand-emblem-main::before{ font-size: 1.05rem; }
.e1-brand-chip--sm .e1-brand-emblem-main::after{ top: -1px; right: -7px; font-size: 0.58rem; }
.e1-brand-chip--sm .e1-brand-label{
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text-secondary);
}
@media (max-width: 640px){
    .e1-brand-chip--sm .e1-brand-label{ display:none; }
    .e1-brand-chip--sm{ padding-right: 0; }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
}

/* ========================================
   BARRA UNIFICADA: PERÍODO + SELECCIÓN
   ======================================== */
/* .unified-header-bar removed */

/* Sección del Período Inline */
.period-section-inline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    justify-content: center;
    flex: 1 1 auto;
}

.period-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--success);
}

.period-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

.period-info {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

/* Controls Box estilo Dashboard */
.attendance-header {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 30;
}
.controls-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-left: auto; /* push to right */
    margin-right: 0;
    position: relative;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    
    /* Pre-reserva un espacio mínimo para que la barra no crezca desde cero */
    min-width: 140px; 
    
    /* Animación de entrada suave */
    animation: controls-box-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: translateY(-5px);
}

#calendarBtn i { color: var(--primary) !important; }
#summaryBtn i { color: var(--warning) !important; }
#calendarBtn:hover { background: rgba(8, 145, 178, 0.1); }
#summaryBtn:hover { background: rgba(245, 158, 11, 0.1); }

@keyframes controls-box-entrance {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.controls-box:hover {
    border-color: var(--success);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18);
    transform: translateY(-2px);
}

[data-theme="dark"] .controls-box:hover {
    border-color: var(--success);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.14);
}

/* Logo dentro del controls-box */
.controls-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    border-right: 2px solid var(--border-color);
    margin-right: 8px;
    transition: border-color 0.3s ease;
}

.controls-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-icon-svg-sm {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.brand-icon-svg-sm svg {
    width: 100%;
    height: 100%;
}

.controls-brand-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.controls-brand-name .brand-highlight {
    color: #020b47;
    background: none;
    -webkit-text-fill-color: initial;
}
[data-theme="dark"] .controls-brand-name .brand-highlight,
[data-theme-variant="deep-dark"] .controls-brand-name .brand-highlight {
    color: #7c9fd4;
}

.controls-brand-module {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    
    /* Animación de entrada para evitar saltos bruscos */
    animation: control-btn-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes control-btn-entrance {
    from { 
        opacity: 0; 
        transform: scale(0.8) translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* Staggered entrance for items in the box */
.controls-box > *:nth-child(1) { animation-delay: 0.05s; }
.controls-box > *:nth-child(2) { animation-delay: 0.1s; }
.controls-box > *:nth-child(3) { animation-delay: 0.15s; }
.controls-box > *:nth-child(4) { animation-delay: 0.2s; }
.controls-box > *:nth-child(5) { animation-delay: 0.25s; }
.controls-box > *:nth-child(6) { animation-delay: 0.3s; }

.control-btn:hover {
    background: var(--primary);
    color: white;
}

.control-btn i {
    font-size: 1.1rem;
}

.control-btn .control-btn-text {
    display: inline;
}

/* Estado activo para modo por materia */
.control-btn.active {
    background: var(--primary);
    color: white;
}

/* Botón de salir/volver en rojo */
.control-btn-danger {
    color: var(--danger, #ef4444);
}

.control-btn-danger:hover {
    background: var(--danger, #ef4444);
    color: white;
}

/* Wrapper y dropdown de tema (selector de tema en asistencia) */
.attendance-theme-wrapper {
    position: relative;
    display: inline-flex;
}
.attendance-theme-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    z-index: 10002;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .attendance-theme-dropdown,
[data-theme-variant="deep-dark"] .attendance-theme-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}
.attendance-theme-dropdown .theme-option.active {
    background: rgba(2, 11, 71, 0.15);
    border-color: var(--primary, #020b47);
    color: var(--primary, #020b47);
    font-weight: 600;
}

/* Divisor vertical */
.divider-vertical {
    width: 2px;
    height: 2.5rem;
    background: var(--border-color);
    flex-shrink: 0;
    margin: 0 1.5rem;
    border-radius: 2px;
}

/* Sección de Selección */
.selection-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

/* Contenedor de selectores (grado, sección, materia) - va primero en PC */
.selectors-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    order: 1; /* Primero en PC */
    transition: all 0.4s ease;
}

/* Controls-box va al final en PC (derecha) */
.selection-section .controls-box {
    order: 2; /* Segundo en PC */
    margin-left: auto;
}

/* Selectores estilo moderno como en la imagen de ejemplo */
.selection-section .grade-selector-wrapper {
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: left center;
    max-width: 300px;
}

.selection-section .grade-selector {
    min-width: 170px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.selection-section .grade-selector:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#institutionSelector {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
}
#institutionSelector:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
}
#institutionSelector .grade-selector-value {
    font-size: 0.8rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-section .grade-selector-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selection-section .grade-selector-label {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    line-height: 1;
}

.selection-section .grade-selector-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.selection-section .grade-selector-icon {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.selection-section .grade-selector.active .grade-selector-icon {
    transform: rotate(180deg);
}

.header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

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

.header-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.125rem 0 0 0;
}

/* Grade Selector Mejorado */
.grade-selector-wrapper {
    position: relative;
    flex-shrink: 0;
}

.grade-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem; /* Increased padding */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    min-width: 180px; /* Increased min-width */
    max-width: 240px; /* Increased max-width */
}

.grade-selector:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
}

.grade-selector-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grade-selector-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.grade-selector-icon {
    margin-left: auto;
    color: var(--text-tertiary);
    transition: var(--transition);
}

.grade-selector.active .grade-selector-icon {
    transform: rotate(180deg);
}

/* Dropdown para selección de grado */
.grade-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
    z-index: 1002;
    max-height: 300px;
    overflow-y: auto;
}

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

.grade-option {
    padding: 0.6rem 0.875rem; /* Reduced padding to make it look smaller relative to button */
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem; /* Slightly smaller font */
}

.grade-option:last-child {
    border-bottom: none;
}

.grade-option:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.grade-option.selected {
    background: var(--primary);
    color: var(--text-inverse);
}

/* Header Layout */
.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Header Actions - Compacto e integrado */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
}

/* Botones de acción del header */
.header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header-action-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-1px);
}

.header-action-btn i {
    font-size: 0.875rem;
}

.header-action-btn .action-btn-text {
    display: inline;
}

/* Botones de icono solo */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.header-icon-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-1px);
}

/* Estado activo para modo por materia */
.header-action-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Botones Mejorados */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--primary);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--danger);
    color: var(--text-inverse);
}

.btn-danger:hover {
    background: #dc2626; /* Un poco más oscuro que var(--danger) */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-success {
    background: var(--success);
    color: var(--text-inverse);
}

.btn-success:hover {
    background: #059669; /* Un poco más oscuro que var(--success) */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-ghost:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-icon {
    padding: 0.625rem;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

/* Estilos para action-btn (compatible con minutas) */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light, #0f3d8c));
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.action-btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.action-btn.btn-secondary {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.action-btn.btn-secondary:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
}

.theme-icon {
    font-size: 1.25rem;
    transition: var(--transition);
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 2rem clamp(1rem, 3vw, 2.5rem);
    max-width: 100%;
    margin: 0;
    width: 100%;
}

/* Period Banner - LEGACY (mantenido por compatibilidad) */
.period-indicator {
    display: none;
}

/* Grid Layout Mejorado - Aprovechando más espacio */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

.content-grid--main-only {
    grid-template-columns: 1fr;
    max-width: 100%;
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Cards Mejoradas */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Calendar Card específico */
.calendar-card .card-body {
    padding: 1.25rem;
}

/* Collapsible calendar for mobile */
@media (max-width: 1024px) {
    #calendarBody.collapsed {
        display: none;
    }
    
    /* Rotar icono cuando está expandido */
    #calendarToggleBtn[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

    /* Textos del botón centrados en móvil */
    .calendar-toggle-left {
        flex: 1;
        justify-content: center;
    }
    .calendar-toggle-texts {
        align-items: center;
        text-align: center;
    }

    /* Calendario más compacto/minimal en móvil */
    .calendar-card .card-body { padding: 0.9rem; }
    .calendar-period-badge { padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
    .calendar-header { margin-bottom: 0.6rem; }
    .calendar-month-year { font-size: 1rem; }
    .calendar-nav { width: 1.6rem; height: 1.6rem; padding: 0.25rem; }
    .calendar-day-header { padding: 0.55rem 0.2rem; font-size: 0.65rem; }
    .calendar-day { min-height: 2.05rem; padding: 0.5rem 0.2rem; font-size: 0.82rem; }
}

/* Subtítulo del calendario: se reemplaza por un indicador flotante en móvil */
.calendar-toggle-subtitle { display: none; }

/* Fecha actual centrada debajo del calendario en móvil */
.mobile-date-display {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-date-display {
        display: block;
        text-align: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        margin-top: 0.25rem;
        padding: 0;
        background: transparent;
        border-radius: 0;
        border: none;
    }
}

/* Botón toggle del calendario */
.calendar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--success), #059669);
    border: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-toggle-left {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.calendar-toggle-texts {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
    line-height: 1.05;
}

.calendar-toggle-title {
    font-weight: 800;
    letter-spacing: 0.2px;
}

.calendar-toggle-subtitle {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-toggle-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.calendar-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
}

/* Ocultar el toggle en desktop */
@media (min-width: 1025px) {
    .calendar-toggle-btn .toggle-icon {
        display: none;
    }
    .calendar-toggle-btn {
        cursor: default;
        pointer-events: none;
        justify-content: center;
    }
    .calendar-toggle-left {
        justify-content: center;
    }
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.card-header span {
    font-size: 1rem;
}

.card-body {
    padding: 1.25rem;
}

/* Calendario Minimalista */
.calendar-container {
    text-align: center;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 0.25rem;
}

.calendar-nav {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.calendar-nav:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.calendar-month-year {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: transparent;
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
}

.calendar-day-header {
    padding: 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    background: transparent;
    text-align: center;
}

.calendar-day {
    background: transparent;
    padding: 0.625rem 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.calendar-day:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
}

.calendar-day.other-month {
    color: var(--text-tertiary);
    opacity: 0.4;
}

.calendar-day.today {
    background: var(--primary);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.calendar-day.today:hover {
    background: var(--primary-dark);
}

.calendar-day.selected:not(.today) {
    background: var(--bg-tertiary);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--primary);
}

.calendar-day.has-attendance::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--success);
    border-radius: 50%;
}

/* ========================================
   PERÍODO BADGE EN CALENDARIO
   ======================================== */
.calendar-period-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.calendar-period-badge:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%);
    border-color: rgba(16, 185, 129, 0.35);
}

.period-indicator-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

@keyframes pulse-glow {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.15);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
    }
}

.period-indicator-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success);
    letter-spacing: -0.01em;
}

[data-theme="dark"] .calendar-period-badge {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-color: rgba(52, 211, 153, 0.25);
}

/* Summary Card - Resumen del día con mejor estética */
.summary-card {
    background: var(--bg-card);
}

.summary-card .card-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

/* ========================================
   QUICK STATS - RESUMEN CON MEJOR CONTRASTE
   ======================================== */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-bottom: 0;
}

.stat-item {
    background: var(--bg-secondary);
    padding: 1rem 0.75rem;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
    opacity: 0.8;
}

/* Colores específicos para cada stat */
.stat-item.stat-present::before {
    background: linear-gradient(90deg, var(--success), #34d399);
}
.stat-item.stat-present .stat-value,
.stat-item.stat-present .stat-icon {
    color: var(--success);
}

.stat-item.stat-absent::before {
    background: linear-gradient(90deg, var(--danger), #f87171);
}
.stat-item.stat-absent .stat-value,
.stat-item.stat-absent .stat-icon {
    color: var(--danger);
}

.stat-item.stat-late::before {
    background: linear-gradient(90deg, var(--warning), #fbbf24);
}
.stat-item.stat-late .stat-value,
.stat-item.stat-late .stat-icon {
    color: var(--warning);
}

.stat-item.stat-pending::before {
    background: linear-gradient(90deg, var(--secondary), #94a3b8);
}
.stat-item.stat-pending .stat-value,
.stat-item.stat-pending .stat-icon {
    color: var(--secondary);
}

.stat-item.stat-total::before {
    background: linear-gradient(90deg, var(--primary), #0f3d8c);
}
.stat-item.stat-total .stat-value,
.stat-item.stat-total .stat-icon {
    color: var(--primary);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Main Attendance Area */
.attendance-area {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.attendance-header {
    padding: 1.5rem 2rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    min-height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.attendance-date {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.attendance-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
}

/* Quick Actions Bar - Unified & Aesthetic */
.quick-actions-bar {
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.unified-tools-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-dropdown-panel {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 1001;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    width: 380px;
    max-width: calc(100vw - 2rem);
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default; /* Evitar el cursor pointer del padre */
}

/* Flecha decorativa arriba del dropdown */
.calendar-dropdown-panel::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--border-color);
}

.calendar-dropdown-panel.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.calendar-dropdown-content {
    width: 100%;
}

/* Empty State SVG */
.empty-state-svg {
    color: var(--primary);
    opacity: 0.8;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 1024px) {
    .quick-actions-bar {
        padding: 0.75rem 0.5rem;
    }
}

.unified-tools-box {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 10px 24px;
    gap: 1rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    width: 100%;
    max-width: none; /* Aprovecha el 100% */
    animation: slide-up-fade 0.5s ease-out;
}

@keyframes slide-up-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tools-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.5rem;
    position: relative; /* Importante para los dropdowns internos */
}

.tools-group.clickable {
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.tools-group.clickable:hover {
    background: var(--bg-secondary);
}

.tools-icon {
    font-size: 1.1rem;
    color: var(--text-tertiary);
}

.tools-icon.primary { color: var(--primary); }

.tools-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color);
    margin: 0 0.5rem;
}

.tool-btn-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tool-btn-pill:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tool-btn-pill.present {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.tool-btn-pill.present:hover {
    background: var(--success);
    color: white;
}

.tool-btn-pill.justified {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.2);
    color: var(--info);
}

.tool-btn-pill.justified:hover {
    background: var(--info);
    color: white;
}

.date-text-minimal {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.date-tools-group {
    min-width: 300px;
    justify-content: center;
}

.search-tools-group {
    flex: 1;
    min-width: 200px;
    max-width: 450px;
    background: var(--bg-input); /* Fondo contrastado para modo oscuro */
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 6px 16px !important;
    margin-left: auto;
    transition: all 0.3s ease;
}

.search-tools-group:focus-within {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
    max-width: 550px;
}

.search-icon {
    font-size: 0.95rem;
    color: var(--text-tertiary);
}

.search-input-minimal {
    border: none;
    background: transparent !important;
    outline: none;
    color: var(--text-primary);
    font-size: 1rem;
    width: 100%;
    padding: 6px 0;
}

/* Fix for dark theme search input styles when typing/autofilling */
.search-input-minimal:-webkit-autofill,
.search-input-minimal:-webkit-autofill:hover, 
.search-input-minimal:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.search-input-minimal::placeholder {
    color: var(--text-muted);
}


.quick-action-btn.justified {
    display: none;
}

.quick-action-btn.justified:hover,
.quick-action-btn.clear,
.quick-action-btn.clear:hover {
    display: none;
}

/* Quick Actions Bar - Responsive Mobile */
@media (max-width: 768px) {
    .quick-actions-bar {
        flex-direction: column;
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
    
    .quick-actions-left {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .quick-actions-right {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .quick-action-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
    
    .quick-action-btn i {
        font-size: 0.875rem;
    }
    
    .search-input {
        width: 100%;
        max-width: 100%;
    }
    
    .student-count-badge {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .quick-actions-left {
        gap: 0.375rem;
    }
    
    .quick-action-btn {
        padding: 0.5rem 0.625rem;
        font-size: 0.7rem;
    }
    
    /* Ocultar texto en botones muy pequeños, solo iconos */
    .quick-action-btn span:not(.visually-hidden) {
        display: inline;
    }
}

/* Students Table */
.students-container {
    /* Evitar barra horizontal temporal que provoca saltos */
    overflow-x: hidden;
    /* Evitar anclaje de scroll durante animaciones/render */
    overflow-anchor: none;
    /* Reservar el espacio del scroll vertical para evitar reflows sin comprimir el borde derecho */
    scrollbar-gutter: stable;
    /* Espacio extra a la derecha para que 'Rendimiento' no quede pegado */
    padding-right: 20px;
    min-height: 400px; /* Evita saltos de layout al cambiar de grado/sección */
    transition: min-height 0.4s ease;
}

.students-table {
    width: 100%;
    border-collapse: collapse;
    /* Mantener el ancho estable de columnas y evitar expansiones temporales */
    table-layout: fixed;
}

.students-table th {
    padding: 1rem 2rem;
    text-align: left;
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 5;
}

.students-table td {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    background: transparent;
}

/* Alternar colores de fila sutilmente */
.students-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .students-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

/* Columnas fijas solo en Desktop para evitar problemas en móvil */
@media (min-width: 1101px) {
    /* Nombres de estudiantes - máximo espacio */
    .students-table td:nth-child(1), 
    .students-table th:nth-child(1) { 
        width: 380px;
        min-width: 380px;
    }
    
    /* Estado actual - compacto */
    .students-table td.status-col, 
    .students-table th.status-col { 
        width: 160px;
        min-width: 160px;
    }
    
    /* Acciones rápidas - espacio suficiente */
    .students-table td.actions-col, 
    .students-table th.actions-col { 
        width: 200px;
        min-width: 200px;
    }
    
    /* Hora - muy compacto */
    .students-table td:nth-child(4), 
    .students-table th:nth-child(4) { 
        width: 100px;
        min-width: 100px;
    }
    
    /* Justificación - espacio flexible */
    .students-table td:nth-child(5), 
    .students-table th:nth-child(5) { 
        width: auto;
        min-width: 180px;
    }
    
    /* Rendimiento - alineado a derecha */
    .rendimiento-col { 
        min-width: 170px !important; 
        width: 170px !important;
        text-align: right;
        padding-left: 1rem !important;
        padding-right: 2rem !important;
    }
}

@media (max-width: 1100px) {
    .content-grid {
        grid-template-columns: 280px 1fr;
        gap: 1rem;
    }
    /* Asistencia usa solo una columna: mantener 1fr y no dejar hueco de sidebar */
    .content-grid.content-grid--main-only {
        grid-template-columns: 1fr;
    }
    .main-content {
        padding: 1rem;
    }
    .selection-section {
        display: flex; /* Asegurar flex */
        flex-direction: column !important;
        align-items: stretch;
        gap: 1rem;
    }
    .selection-section .selectors-row {
        width: 100%;
        justify-content: flex-start;
        order: 2 !important; /* Grado abajo */
    }
    .selection-section .controls-box {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        order: 1 !important; /* Controles arriba */
    }
    .students-table th:nth-child(2),
    .students-table td:nth-child(2) { /* Estado */
        min-width:140px;
    }
    .attendance-controls { 
        display: flex !important;
        flex-wrap: nowrap !important; 
        gap: 6px !important; 
        width: 100% !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    .control-group { display: contents !important; } /* En tablet/móvil volvemos a una sola línea */
    .attendance-btn { 
        width: 32px !important; 
        height: 32px !important; 
        flex: 0 0 auto !important; 
    }
    .attendance-btn i, .attendance-btn svg { font-size: 0.82rem !important; }
    
    .students-table td.actions-col {
        width: 190px !important;
        min-width: 190px !important;
    }
}

@media (max-width: 900px) {
    /* Mobile: tarjetas compactas y expandibles (menos altura por estudiante) */
    .students-table thead { display: none; }
    .students-table, .students-table tbody { display:block; width:100%; }
    .students-table tr {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            "student"
            "status"
            "actions"
            "time"
            "justification"
            "mep";
        gap: 12px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        margin-bottom: 0.75rem;
        padding: 1.25rem;
        background: var(--bg-card);
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        justify-items: center; /* Centrar todos los elementos en la columna */
    }
    
    .students-table tr:active {
        transform: scale(0.98);
    }

    .students-table td {
        display: block;
        width: 100% !important; /* Forzar ancho completo en modo tarjeta */
        border: none;
        padding: 0;
    }
    .students-table td::before { display: none !important; }

    .students-table td:nth-child(1){ grid-area: student; margin-bottom: 4px; width: 100% !important; }
    .students-table td:nth-child(2){ 
        grid-area: status; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important;
        margin: 0.5rem 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .students-table td:nth-child(3){ 
        grid-area: actions; 
        display: flex !important; 
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        padding: 1.25rem 0 0.5rem !important;
        border-top: 1px solid var(--border-color);
        margin: 8px 0 0 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .students-table td:nth-child(4){ grid-area: time; width: 100% !important; }
    .students-table td:nth-child(5){ grid-area: justification; width: 100% !important; }
    .students-table td:nth-child(6){ 
        grid-area: mep; 
        width: 100% !important; 
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Collapsed por defecto: solo Estudiante + Estado + Acciones */
    .students-table tr[data-mobile-expanded="0"] td:nth-child(4),
    .students-table tr[data-mobile-expanded="0"] td:nth-child(5),
    .students-table tr[data-mobile-expanded="0"] td:nth-child(6) { display:none; }
    .students-table tr[data-mobile-expanded="0"] .last-attendance,
    .students-table tr[data-mobile-expanded="0"] .student-tags-inline { display:none; }

    /* Etiquetas de detalles solo cuando está expandido */
    .students-table tr[data-mobile-expanded="1"] td:nth-child(4)::before,
    .students-table tr[data-mobile-expanded="1"] td:nth-child(5)::before,
    .students-table tr[data-mobile-expanded="1"] td:nth-child(6)::before{
        display:block;
        font-weight: 800;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-tertiary);
        margin-bottom: 6px;
        text-align: center;
    }
    .students-table tr[data-mobile-expanded="1"] td:nth-child(4)::before{ content:'Hora'; }
    .students-table tr[data-mobile-expanded="1"] td:nth-child(5)::before{ content:'Justificación'; }
    .students-table tr[data-mobile-expanded="1"] td:nth-child(6)::before{ content:'Rendimiento'; }

    .student-info { 
        display: flex !important;
        width: 100% !important;
        gap: 1rem; 
        align-items: center; 
        cursor: pointer; 
    }
    .student-details { flex: 1; min-width: 0; }
    .student-name { 
        font-size: 1rem; 
        font-weight: 800; 
        color: var(--text-primary); 
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .student-avatar { width: 2.75rem; height: 2.75rem; font-size: 1rem; border-radius: 14px; box-shadow: var(--shadow-sm); flex-shrink: 0; }
    .student-id { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; font-weight: 500; }
    .last-attendance { font-size: 0.75rem; margin-top: 6px; padding: 4px 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; display: inline-block; font-weight: 500; }

    .attendance-status {
        height: auto;
        min-height: 34px;
        padding: 0.3rem 0.7rem;
        min-width: auto;
        max-width: 130px;
        font-size: 0.75rem;
        font-weight: 700;
        display: inline-flex !important;
        align-items: center;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        letter-spacing: -0.01em;
        margin: 0 auto !important;
        white-space: nowrap;
    }

    .attendance-controls {
        display: flex !important;
        flex-wrap: nowrap !important; 
        gap: 6px !important; 
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .control-group { display: contents !important; } 
    .attendance-btn { 
        width: 32px !important; 
        height: 32px !important; 
        border-radius: 8px; 
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        flex: 0 0 auto !important;
    }
    .attendance-btn.absent, .attendance-btn.edit, .attendance-btn.clear-individual {
        width: 32px;
        height: 32px;
        opacity: 0.9;
    }
    .attendance-btn i, .attendance-btn svg { font-size: 0.9rem; }
    .attendance-btn.absent i, .attendance-btn.edit i, .attendance-btn.clear-individual i { font-size: 0.85rem; }
    .attendance-btn.active {
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
        z-index: 1;
    }

    /* Ajustes de detalles */
    .time-cell { font-size: 0.9rem; padding: 0.6rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; }
    .justification-cell {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.9rem;
        color: var(--text-secondary);
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        line-height: 1.6;
    }
    .mep-stats { flex-direction: row; gap: 0.65rem; justify-content: space-between; align-items: center; width: 100%; }
    .mep-percentage { font-size: 1.05rem; }

    .mobile-row-toggle { 
        display: inline-flex; 
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        color: var(--text-secondary);
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .students-table tr[data-mobile-expanded="1"] .mobile-row-toggle {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        transform: rotate(180deg);
    }

    /* Reorganizar header para móvil: controls-box arriba, selectores debajo */
    .attendance-header .selection-section {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    /* Controls-box (barra unificada) arriba en móvil */
    .attendance-header .controls-box,
    .selection-section .controls-box {
        order: 1 !important;
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
    
    /* Contenedor de selectores debajo de controls-box en móvil */
    .attendance-header .selectors-row,
    .selectors-row {
        order: 2 !important;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Selectores con tamaño fijo para evitar que se expandan solos */
    .attendance-header .selectors-row .grade-selector-wrapper {
        flex: 0 0 calc(50% - 0.25rem);
        min-width: 140px;
        max-width: calc(50% - 0.25rem);
    }
    
    .grade-selector {
        min-width: 0 !important;
        width: 100%;
        max-width: 100% !important;
    }
    
    /* Selector de materia ocupa todo el ancho si está visible */
    .attendance-header .selectors-row #subjectSelectorWrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Grade multi-apply checkboxes */
.grades-checkboxes { display:flex; flex-wrap:wrap; gap:0.5rem; background:var(--bg-secondary); padding:0.75rem; border:1px solid var(--border-color); border-radius:var(--radius-md); max-height:180px; overflow:auto; }
.grades-checkboxes label { font-size:0.75rem; background:var(--bg-card); border:1px solid var(--border-color); padding:0.35rem 0.6rem; border-radius:var(--radius-full); cursor:pointer; display:flex; align-items:center; gap:0.35rem; transition:var(--transition); }
.grades-checkboxes label:hover { border-color:var(--primary); color:var(--primary); }
.grades-checkboxes input { accent-color: var(--primary); }
.form-hint { font-size:0.85rem; color:var(--text-tertiary); margin-top:0.4rem; }
.multi-apply-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; gap:0.75rem; flex-wrap:wrap; }
.btn-select-all { display:inline-flex; align-items:center; gap:0.4rem; background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary)); border:1px solid var(--border-color); color:var(--text-secondary); font-size:0.65rem; padding:0.45rem 0.85rem; border-radius:var(--radius-full); cursor:pointer; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; transition:var(--transition); position:relative; overflow:hidden; }
.btn-select-all::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 70%); opacity:0; transition:var(--transition); }
.btn-select-all:hover::after { opacity:1; }
.btn-select-all:hover { border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 3px rgba(6,182,212,0.15); }
.btn-select-all:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.btn-select-all-icon { font-size:0.9rem; line-height:1; }
.btn-select-all.active { background:var(--primary); color:var(--text-inverse); border-color:var(--primary); box-shadow:0 4px 10px -2px rgba(0,0,0,0.25); }
.btn-select-all.active .btn-select-all-icon { animation:pulse-scale 0.6s ease; }
@keyframes pulse-scale { 0%{ transform:scale(1);} 50%{ transform:scale(1.3);} 100%{ transform:scale(1);} }

.students-table tbody tr {
    transition: var(--transition);
}

/* Animación suave y refinada al cambiar de grado */
.students-table tbody.rendering {
    opacity: 0;
    transform: translateY(-12px) scale(0.99);
    transition: none; /* Instantáneo al empezar a renderizar */
}

.students-table tbody {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación escalonada para las filas al aparecer */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.students-table tbody:not(.rendering) tr {
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.students-table tbody:not(.rendering) tr:nth-child(1) { animation-delay: 0.03s; }
.students-table tbody:not(.rendering) tr:nth-child(2) { animation-delay: 0.06s; }
.students-table tbody:not(.rendering) tr:nth-child(3) { animation-delay: 0.09s; }
.students-table tbody:not(.rendering) tr:nth-child(4) { animation-delay: 0.12s; }
.students-table tbody:not(.rendering) tr:nth-child(5) { animation-delay: 0.15s; }
.students-table tbody:not(.rendering) tr:nth-child(6) { animation-delay: 0.18s; }
.students-table tbody:not(.rendering) tr:nth-child(7) { animation-delay: 0.21s; }
.students-table tbody:not(.rendering) tr:nth-child(8) { animation-delay: 0.24s; }
.students-table tbody:not(.rendering) tr:nth-child(9) { animation-delay: 0.27s; }
.students-table tbody:not(.rendering) tr:nth-child(10) { animation-delay: 0.30s; }
/* Para más filas, el delay se mantiene para que no sea infinito */
.students-table tbody:not(.rendering) tr:nth-child(n+11) { animation-delay: 0.33s; }

.students-table tbody tr {
    transition: background-color 0.2s ease;
}

.students-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Student Info Cell */
.student-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Indicador flotante de fecha (solo móvil) */
.mobile-date-chip { display: none; }
@media (max-width: 900px) {
    .mobile-date-chip {
        position: fixed;
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 50%;
        transform: translateX(-50%);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        max-width: calc(100vw - 24px);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .mobile-date-chip.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-date-chip-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(15, 23, 42, 0.72);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: var(--text-primary);
        box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        cursor: pointer;
        max-width: 100%;
    }

    [data-theme="light"] .mobile-date-chip-btn {
        background: rgba(241, 245, 249, 0.92);
        border-color: rgba(15, 23, 42, 0.08);
        color: #0f172a;
    }

    .mobile-date-chip-text {
        font-weight: 900;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 68vw;
    }

    .mobile-date-chip-action {
        font-weight: 900;
        font-size: 0.75rem;
        opacity: 0.9;
        padding-left: 10px;
        border-left: 1px solid rgba(255,255,255,0.12);
    }

    [data-theme="light"] .mobile-date-chip-action {
        border-left-color: rgba(15,23,42,0.12);
    }
}

/* Toggle de fila (solo visible en móvil) */
.mobile-row-toggle{
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    transition: var(--transition);
}
[data-theme="light"] .mobile-row-toggle{
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.mobile-row-toggle:hover{
    border-color: rgba(6,182,212,0.55);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.students-table tr[data-mobile-expanded="1"] .mobile-row-toggle i{
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}
.mobile-row-toggle i{ transition: transform 0.2s ease; }

@media (max-width: 900px) {
    .mobile-row-toggle { display: inline-flex; }
}

.student-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colores variados para avatares como en el diseño de ejemplo */
.student-avatar.avatar-purple { background: linear-gradient(135deg, #0e7490, #06b6d4); }
.student-avatar.avatar-green { background: linear-gradient(135deg, #10b981, #059669); }
.student-avatar.avatar-blue { background: linear-gradient(135deg, #020b47, #1e3a8a); }
.student-avatar.avatar-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.student-avatar.avatar-pink { background: linear-gradient(135deg, #ec4899, #db2777); }
.student-avatar.avatar-teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.student-avatar.avatar-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
.student-avatar.avatar-indigo { background: linear-gradient(135deg, #0891b2, #22d3ee); }

.student-details {
    min-width: 0;
    flex: 1;
}

.student-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.student-id {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.last-attendance {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Attendance Status Badge */
.attendance-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    white-space: nowrap;
    line-height: 1.3;
    min-width: 90px;
    justify-content: center;
    transition: all 0.4s ease-out;
}

.students-table tr {
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.students-table tr.row-changed {
    animation: rowHighlight 0.6s ease-out;
}

@keyframes rowHighlight {
    0% { background-color: transparent; }
    30% { background-color: rgba(2, 11, 71, 0.15); }
    100% { background-color: transparent; }
}

.attendance-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-present {
    background: #10b981;
    color: white;
}
.status-present .status-dot { background: white; }

.status-late-justified {
    background: #f59e0b;
    color: white;
}
.status-late-justified .status-dot { background: white; }

.status-late-unjustified {
    background: #ef4444;
    color: white;
}
.status-late-unjustified .status-dot { background: white; }

.status-absent-justified {
    background: #3b82f6;
    color: white;
}
.status-absent-justified .status-dot { background: white; }

.status-absent-unjustified {
    background: #ef4444;
    color: white;
}
.status-absent-unjustified .status-dot { background: white; }

.status-not-marked {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-not-marked .status-dot { background: #f59e0b; }

/* Clickable status badge (for configuring absent lessons) */
.clickable-status {
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.clickable-status:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.clickable-status:active {
    transform: scale(0.97);
}

/* Sub-badge for lesson count inside status */
.lesson-count-sub {
    display: inline;
    font-size: 0.7em;
    font-weight: 500;
    opacity: 0.9;
    margin-left: 0.15em;
}
.lesson-count-sub::before {
    content: '\b7\a0';
}

/* Lesson Config Modal - button grid */
.lesson-config-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.lesson-num-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.lesson-num-btn:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 79, 70, 229), 0.08);
    color: var(--primary);
    transform: scale(1.08);
}
.lesson-num-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 79, 70, 229), 0.35);
}

/* Quick Justify + Lesson Config modal compact overrides */
.lesson-config-modal-content,
.quick-justify-modal-content {
    border-radius: 20px;
}
.lesson-config-modal-content .modal-header,
.quick-justify-modal-content .modal-header {
    border-bottom: 1px solid var(--border-color);
}

/* Attendance Controls */
.attendance-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

/* Forzar una sola fila en cualquier pantalla pequeña que use las tarjetas de móvil */
@media (max-width: 1100px) {
    .control-group { 
        display: contents !important; 
    }
}

.attendance-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.attendance-btn.present {
    border-color: transparent;
}
.attendance-btn.present:hover {
    background: var(--success);
    color: white;
    border-color: var(--success);
}
.attendance-btn.present.active {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.attendance-btn.justified {
    border-color: transparent;
}
.attendance-btn.justified:hover {
    background: var(--info);
    color: white;
    border-color: var(--info);
}
.attendance-btn.justified.active {
    background: var(--info);
    color: white;
}

/* Botón Tardía Justificada - Amarillo/Ámbar con borde distintivo */
.attendance-btn.late-justified {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
}
.attendance-btn.late-justified:hover {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.attendance-btn.late-justified.active {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* Botón Tardía Injustificada - Naranja/Rojo con borde distintivo */
.attendance-btn.late-unjustified {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.08);
}
.attendance-btn.late-unjustified:hover {
    background: #f97316;
    color: white;
    border-color: #f97316;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.attendance-btn.late-unjustified.active {
    background: #f97316;
    color: white;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.attendance-btn.absent {
    border-color: transparent;
}
.attendance-btn.absent:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}
.attendance-btn.absent.active {
    background: var(--danger);
    color: white;
}

.attendance-btn.edit {
    background: var(--primary);
    color: white;
    border-color: transparent;
}
.attendance-btn.edit:hover {
    background: var(--primary-dark);
}

.attendance-btn.clear-individual {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.2);
}
.attendance-btn.clear-individual:hover {
    background: #6b7280;
    color: white;
}

.attendance-btn.whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: #15803d;
    border-color: rgba(37, 211, 102, 0.25);
}
.attendance-btn.whatsapp:hover {
    background: #25D366;
    color: #0b1220;
    border-color: #25D366;
}

/* MEP Stats - Diseño con barra de progreso */
.mep-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    min-width: 100px;
}

.mep-percentage {
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
}

.mep-percentage.excellent { color: #10b981; }
.mep-percentage.good { color: #3b82f6; }
.mep-percentage.warning { color: #f59e0b; }
.mep-percentage.danger { color: #ef4444; }

.mep-grade {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.mep-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}

[data-theme="light"] .mep-progress-bar {
    background: rgba(0, 0, 0, 0.1);
}

.mep-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s ease-out, background 0.4s ease;
}

.mep-progress-fill.excellent { background: linear-gradient(90deg, #10b981, #34d399); }
.mep-progress-fill.good { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.mep-progress-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.mep-progress-fill.danger { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Loading State */
.loading-state {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-tertiary);
    animation: fadeIn 0.4s ease-out;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-tertiary);
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.empty-description {
    font-size: 0.875rem;
}


/* Modal Mejorado con Glassmorphism */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal.show {
    display: flex;
    animation: fadeInModal 0.2s ease-out;
}

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

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: slideUpModal 0.25s ease-out;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Efecto de brillo superior usando variable del tema */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, 
        var(--primary) 0%, 
        transparent 100%);
    opacity: 0.05;
    pointer-events: none;
    border-radius: 24px 24px 0 0;
}

@keyframes slideUpModal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.modal-close {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--bg-secondary);
    border-radius: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.25rem;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body p {
    line-height: 1.7;
    color: var(--text-secondary);
}

.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: var(--bg-secondary);
}

/* Estilos mejorados para modal de confirmación */
.confirm-modal-enhanced .modal-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    gap: 1rem;
}

.confirm-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary);
    border: 2px solid var(--border-color);
}

.confirm-modal-message {
    font-size: 1.1rem;
    text-align: center;
    padding: 1rem 0;
    color: var(--text-primary);
    line-height: 1.6;
}

.confirm-modal-details {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.confirm-modal-enhanced .modal-footer {
    padding: 1.5rem 2rem 2rem;
}

.confirm-modal-enhanced .btn {
    min-width: 140px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

/* ========================================
   WhatsApp Modal (Asistencia)
   ======================================== */
.modal-content.modal-content--whatsapp {
    max-width: 1050px;
}

.btn.btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #0b1220;
}

.btn.btn-whatsapp:hover {
    filter: brightness(0.98);
}

.wa-modal-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 0.9fr);
    gap: 1.25rem;
    align-items: stretch;
}

.wa-modal-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wa-modal-right {
    min-height: 420px;
}

.wa-student-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.wa-student-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.wa-student-name {
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.wa-student-meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.wa-section {
    padding: 0.9rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.wa-section-title {
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.wa-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.wa-actions-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
}

.wa-save-status {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--success);
}

.wa-check {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 0.55rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.wa-check input {
    width: 16px;
    height: 16px;
}

.wa-check--clean {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.25);
}

.wa-check--edit {
    background: rgba(37, 211, 102, 0.08);
    border-color: rgba(37, 211, 102, 0.2);
}

.wa-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

.wa-editor-actions .btn {
    height: 34px;
    padding: 0 0.9rem;
}

.wa-counter {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    display: flex;
    justify-content: flex-end;
}

/* Preview estilo WhatsApp */
.wa-chat {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.wa-chat-header {
    background: #075E54;
    color: #ffffff;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wa-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.wa-chat-title {
    font-weight: 900;
    line-height: 1.15;
}

.wa-chat-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 2px;
}

.wa-chat-actions {
    margin-left: auto;
    display: flex;
    gap: 0.9rem;
    opacity: 0.9;
}

.wa-chat-body {
    background:
        radial-gradient(circle at 20% 10%, rgba(37, 211, 102, 0.08), transparent 40%),
        radial-gradient(circle at 85% 40%, rgba(6, 182, 212, 0.08), transparent 45%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.05));
    padding: 1rem;
    overflow: auto;
    flex: 1;
}

.wa-chat-date {
    width: fit-content;
    margin: 0 auto 0.85rem auto;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.75rem;
    font-weight: 800;
}

[data-theme="dark"] .wa-chat-date {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
}

.wa-bubble {
    max-width: 92%;
    border-radius: 16px;
    padding: 0.75rem 0.85rem;
    line-height: 1.45;
    position: relative;
}

.wa-bubble--out {
    margin-left: auto;
    background: #DCF8C6;
    color: #0b1220;
    border-top-right-radius: 6px;
}

[data-theme="dark"] .wa-bubble--out {
    background: rgba(37, 211, 102, 0.22);
    color: rgba(255, 255, 255, 0.92);
}

.wa-bubble-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    font-weight: 600;
}

.wa-bubble-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 800;
}

@media (max-width: 900px) {
    .wa-modal-grid {
        grid-template-columns: 1fr;
    }

    .wa-modal-right {
        min-height: 380px;
    }

    .wa-two-col {
        grid-template-columns: 1fr;
    }
}

/* Form Elements */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-card);
}

/* Input de búsqueda estilizado */
.search-input {
    width: 220px;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-input:focus {
    background: var(--bg-card);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
    outline: none;
}

/* Time cell placeholder */
.time-cell {
    font-family: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.time-placeholder {
    color: var(--text-tertiary);
    opacity: 0.5;
    letter-spacing: 1px;
}

/* Justification cell */
.justification-cell {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* Last attendance badge */
.last-attendance {
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    opacity: 0.85;
}

.last-status-badge {
    font-size: 0.65rem;
}

/* Success Message */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
    z-index: 2000;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-icon {
    font-size: 1.25rem;
}

.toast.success {
    border-color: var(--success);
}

.toast.success .toast-icon {
    color: var(--success);
}

.toast.error {
    border-color: var(--danger);
}

.toast.error .toast-icon {
    color: var(--danger);
}

/* Motivation Modal */
.motivation-modal {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--text-inverse);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1500;
    max-width: 400px;
    text-align: center;
}

.motivation-modal.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.motivation-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.motivation-text {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ========================================
AJUSTE PERSONALIZADO BOTÓN VOLVER
======================================== */
a.btn-icon[href="dashboard.html"] {
    /* Mantenemos los ajustes de tamaño */
    width: 5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: auto; /* Esto empuja el botón lejos de los otros */
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content {
        padding: 1rem 0.75rem; /* Reducir padding lateral para ganar espacio */
    }

    .content-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        align-items: stretch; /* Asegurar que sidebar y contenido ocupen todo el ancho */
        gap: 1rem;
    }
    
    /* Mover el sidebar ARRIBA en móvil (solo calendario) */
    .sidebar {
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .attendance-area {
        order: 2;
        width: 100% !important;
    }
    
    /* Mostrar calendario en móvil */
    .sidebar .calendar-card {
        display: block;
        width: 100%;
        border-radius: var(--radius-lg);
    }
    
    .calendar-container {
        width: 100%;
        padding: 0;
    }
    
    .calendar-grid {
        width: 100%;
        gap: 4px; /* Un poco más de espacio entre días */
    }
    
    .calendar-day-header {
        padding: 1rem 0.2rem;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-secondary);
    }
    
    .calendar-day {
        min-height: 4.5rem; /* Días aún más altos para tablets */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        border-radius: var(--radius-md);
    }

    /* Ocultar summary dentro del sidebar en móvil; lo movemos al final via JS */
    .sidebar .summary-card { display: none; }

    /* Mostrar y estilizar cuando el summary se ubica al final en móvil */
    .attendance-area .summary-card { 
        display: block !important;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .quick-stats {
        grid-template-columns: repeat(2, 1fr); /* Mantener 2 columnas para aprovechar espacio */
        gap: 0.8rem; /* Aumentar espaciado */
        margin-bottom: 1.5rem;
    }
    
    .stat-item {
        padding: 1rem; /* Aumentar padding considerablemente */
        min-height: 4rem; /* Altura mínima más grande */
    }
    
    .stat-value {
        font-size: 2rem; /* Números más grandes y visibles */
        font-weight: 800;
        margin-bottom: 0.25rem;
    }
    
    .stat-label {
        font-size: 0.8rem; /* Texto más legible */
        font-weight: 600;
    }

    /* Mejoras de compactación para el calendario en tablets/móviles */
    .calendar-card .card-body { 
        padding: 1.25rem; 
    }
    
    .calendar-header {
        margin-bottom: 1.25rem;
    }
    
    .calendar-month-year {
        font-size: 1.4rem; /* Texto más grande para el mes */
        font-weight: 800;
    }
}

@media (max-width: 768px) {
    /* Selection bar responsive */
    .selection-bar {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }
    
    .selection-bar-title {
        border-right: none;
        padding-right: 0;
        width: 100%;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .selection-bar-controls {
        width: 100%;
        justify-content: flex-start;
    }
    
    .selection-bar .grade-selector {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    /* Barra unificada responsive */
    .unified-header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }
    
    .period-section {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }
    
    .divider-vertical {
        display: none;
    }
    
    /* Period section inline for mobile */
    .period-section-inline {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-color);
        margin-top: 0.5rem;
    }
    
    .period-section-inline .period-badge {
        flex-shrink: 0;
    }
    
    .period-section-inline .period-info {
        font-size: 0.8rem;
        white-space: normal;
        line-height: 1.3;
    }
    
    .selection-section {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .selection-section .grade-selector {
        flex: 1;
        min-width: 0;
    }
    
    /* Resetear el posicionamiento absoluto en móvil */
    .header-left {
        position: static;
        transform: none;
        left: auto;
        display: none;
    }
    
    /* Ajustar título para móvil */
    .header-title {
        font-size: 1.2rem; /* Reducir tamaño */
        text-align: center; /* Centrar */
    }
    
    .header-subtitle {
        font-size: 0.8rem; /* Más pequeño */
        text-align: center; /* Centrar */
    }
    
    /* Brand logo mobile */
    .brand-logo {
        gap: 0.5rem;
    }
    
    .brand-icon-svg {
        width: 36px;
        height: 36px;
    }
    
    .brand-icon-svg svg {
        width: 30px;
        height: 30px;
    }
    
    .brand-icon {
        font-size: 1.5rem;
    }
    
    .brand-name {
        font-size: 1.15rem;
    }
    
    .brand-module {
        font-size: 0.6rem;
    }
    
    /* Controls box compacto en móvil */
    .controls-box {
        padding: 6px 10px;
        gap: 6px;
    }
    
    .controls-brand {
        padding-right: 8px;
        margin-right: 4px;
        gap: 6px;
    }
    
    .brand-icon-svg-sm {
        width: 26px;
        height: 26px;
    }
    
    .controls-brand-name {
        font-size: 1rem;
    }
    
    .control-btn {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
    }
    
    .control-btn .control-btn-text {
        display: none;
    }
    
    .control-btn i {
        font-size: 1rem;
    }
    
    /* Selector de grado optimizado para móvil */
    .grade-selector {
        min-width: auto; /* Quitar min-width fijo */
        width: 100%; /* Ocupar todo el ancho disponible */
        padding: 0.75rem 1rem; /* Más padding para touch */
        font-size: 0.9rem; /* Texto más pequeño */
    }
    
    .grade-selector-label {
        font-size: 0.7rem; /* Más pequeño */
    }
    
    .grade-selector-value {
        font-size: 0.9rem; /* Más pequeño */
        white-space: nowrap; /* Evitar saltos de línea */
        overflow: hidden;
        text-overflow: ellipsis; /* Puntos suspensivos si es muy largo */
    }
    
    /* Botones de acción en la parte superior */
    .header-actions {
        justify-content: space-between; /* Distribuir espacios */
        order: 1; /* Colocar primero */
        margin: 0; /* Resetear margen */
        flex-shrink: 0; /* No permitir que se reduzca */
        
        /* Reglas adicionales para móvil */
        grid-column: 3 / 4;
        justify-self: end;
    }
    
    /* Optimizar botones para móvil */
    .btn {
        padding: 0.5rem 0.75rem; /* Reducir padding */
        font-size: 0.8rem; /* Texto más pequeño */
    }
    
    .btn-ghost {
        padding: 0.5rem; /* Botones más compactos */
    }
    
    /* Botón volver más pequeño */
    a.btn-icon[href="dashboard.html"] {
        width: 2.5rem; /* Reducir de 5rem */
        height: 2.25rem; /* Reducir altura */
        font-size: 1.2rem; /* Reducir icono */
        margin-left: 0; /* Quitar margin automático */
    }
    
    /* Theme toggle más pequeño */
    .theme-toggle {
        width: 2.25rem;
        height: 2.25rem;
    }
    
    .theme-icon {
        font-size: 1rem;
    }
    
    /* Dropdown del selector más ancho */
    .grade-dropdown {
        left: 0;
        right: 0; /* Ocupar todo el ancho */
        max-height: 200px; /* Limitar altura */
    }
    
    /* Main content con menos padding */
    .main-content {
        padding: 1rem 0.75rem;
    }
    
    /* Period indicator más compacto */
    .period-indicator {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .period-banner-title {
        font-size: 0.7rem;
    }
    
    .period-banner-info {
        font-size: 1rem;
    }

    /* Mejoras específicas para calendario en móviles - APROVECHANDO MEJOR EL ESPACIO */
    .calendar-container {
        overflow-x: hidden; /* No necesario scroll horizontal */
    }
    
    .calendar-grid {
        width: 100%; /* Usar todo el ancho disponible */
        min-width: auto; /* Quitar limitación de ancho mínimo */
        gap: 3px; /* Aumentar espaciado entre celdas para mejor visualización */
    }
    
    .calendar-day-header {
        padding: 0.8rem 0.3rem; /* AUMENTAR padding considerablemente */
        font-size: 0.8rem; /* Aumentar tamaño de texto */
        font-weight: 700; /* Hacer más bold */
    }
    
    .calendar-day {
        padding: 0.8rem 0.3rem; /* AUMENTAR padding considerablemente */
        min-height: 3.2rem; /* AUMENTAR altura mínima significativamente */
        font-size: 1rem; /* Aumentar tamaño de texto */
        font-weight: 600; /* Hacer más bold */
    }
    
    /* Maximizar el uso del espacio en móvil */
    .sidebar {
        width: 100%; /* Ocupar todo el ancho disponible */
        max-width: 100%; /* Sin límite de ancho máximo */
    }
    
    .card-body {
        padding: 1rem; /* Aumentar padding del contenedor */
    }
    
    /* Navegación del calendario más grande */
    .calendar-nav {
        width: 2.5rem; /* Aumentar tamaño */
        height: 2.5rem; /* Aumentar tamaño */
        font-size: 1.2rem; /* Aumentar icono */
        font-weight: bold;
    }
    
    .calendar-month-year {
        font-size: 1.2rem; /* Aumentar tamaño del título del mes */
        font-weight: 700; /* Hacer más bold */
    }
    
    /* Período badge en calendario para móvil */
    .calendar-period-badge {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.875rem;
    }
    
    .period-indicator-dot {
        width: 7px;
        height: 7px;
    }
    
    .period-indicator-text {
        font-size: 0.75rem;
    }
    
    /* Quick stats mejoradas para móvil */
    .quick-stats {
        gap: 0.75rem;
    }
    
    .stat-item {
        padding: 0.875rem 0.625rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
    
    /* Aprovechar mejor el espacio de las cards */
    .card {
        margin-bottom: 1rem; /* Espaciado entre cards */
    }
    
    .card-header {
        padding: 1rem 1.2rem; /* Aumentar padding */
        font-size: 1rem; /* Aumentar tamaño de texto */
    }
}

/* Para pantallas muy pequeñas (móviles en orientación vertical) */
@media (max-width: 480px) {
    .calendar-day {
        padding: 0.7rem 0.2rem; /* Mantener tamaño usable pero ajustado */
        min-height: 2.8rem; /* Altura mínima adecuada para touch */
        font-size: 0.9rem; /* Texto legible */
        font-weight: 600;
    }
    
    .calendar-day-header {
        padding: 0.7rem 0.2rem;
        font-size: 0.75rem;
        font-weight: 700;
    }
    
    .calendar-grid {
        width: 100%; /* Usar todo el ancho */
        gap: 2px; /* Espaciado mínimo pero visible */
    }

    .app-header {
        padding: 0.75rem 0.75rem;
    }
    
    .header-title {
        font-size: 1.1rem;
    }
    
    .header-title-icon {
        font-size: 1.3rem;
    }
    
    .header-subtitle {
        font-size: 0.75rem;
    }
    
    /* Brand logo very small screens */
    .brand-icon-svg {
        width: 32px;
        height: 32px;
    }
    
    .brand-icon-svg svg {
        width: 26px;
        height: 26px;
    }
    
    .brand-icon {
        font-size: 1.3rem;
    }
    
    .brand-name {
        font-size: 1rem;
    }
    
    .brand-module {
        font-size: 0.55rem;
        letter-spacing: 0.05em;
    }
    
    /* Period info very small screens */
    .period-section-inline .period-info {
        font-size: 0.7rem;
    }
    
    /* Selection bar pantallas pequeñas */
    .selection-bar {
        padding: 0.875rem;
    }
    
    .selection-bar-title {
        font-size: 0.85rem;
        gap: 0.5rem;
    }
    
    .selection-bar .grade-selector {
        padding: 0.625rem 0.875rem;
    }
    
    .selection-bar .grade-selector-value {
        font-size: 0.95rem;
    }
    
    .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
    
    /* Ocultar texto de botones y mostrar solo iconos */
    .btn-ghost span:not(:first-child) {
        display: none;
    }
    
    a.btn-icon[href="dashboard.html"] {
        width: 2.25rem;
        height: 2rem;
        font-size: 1.1rem;
    }
    
    /* Estadísticas optimizadas para pantallas muy pequeñas */
    .quick-stats {
        grid-template-columns: repeat(2, 1fr); /* Mantener 2 columnas */
        gap: 0.6rem;
    }
    
    .stat-item {
        padding: 0.8rem;
        min-height: 3.5rem;
    }
    
    .stat-value {
        font-size: 1.6rem; /* Números grandes pero que quepan */
        font-weight: 800;
    }
    
    .stat-label {
        font-size: 0.7rem;
        font-weight: 600;
    }
    
    /* Navegación del calendario optimizada para muy pequeño */
    .calendar-nav {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.1rem;
    }
    
    .calendar-month-year {
        font-size: 1.1rem;
        font-weight: 700;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .app-header,
    .quick-actions-bar,
    .btn,
    .theme-toggle {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
    }
}

/* Ajustes específicos de compactación para pantallas más estrechas */
@media (max-width: 780px) {
    .attendance-status { font-size: 0.7rem; padding: 0.35rem 0.6rem; min-width: 80px; }
    .attendance-controls { gap: 0.25rem; }
    .attendance-btn { padding: 0.3rem 0.5rem; font-size: 0.65rem; }
}

@media (max-width: 600px) {
    .attendance-status { font-size: 0.65rem; padding: 0.3rem 0.5rem; min-width: 70px; }
    .attendance-btn { min-width: 34px; }
    .lesson-count-sub { font-size: 0.55rem; }
}

/* Ajustes para el header en diferentes tamaños de pantalla */
@media (max-width: 1400px) {
    .header-content {
        gap: 1rem;
    }
    
    .selection-section .grade-selector {
        min-width: 120px;
    }
    
    .period-info {
        font-size: 0.8125rem;
    }
}

@media (max-width: 1200px) {
    .app-header {
        padding: 1rem;
    }
    
    .header-title {
        font-size: 1.1rem;
    }
    
    .header-title-icon {
        font-size: 1.3rem;
    }
    
    .header-subtitle {
        font-size: 0.7rem;
    }
    
    /* Ocultar texto en controls-box en pantallas medianas */
    .control-btn .control-btn-text {
        display: none;
    }
    
    .control-btn {
        padding: 0;
    }
    
    .header-actions {
        gap: 0.5rem;
    }
    
    .action-btn span {
        display: none;
    }
    
    .action-btn i {
        margin: 0;
    }
    
    .unified-header-bar {
        gap: 1rem;
    }
    
    .selection-section .grade-selector {
        min-width: 110px;
        padding: 0.35rem 0.625rem;
    }
}

@media (max-width: 900px) {
    .header-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    
    .header-title-section {
        flex: 1;
    }
    
    .header-actions {
        flex-shrink: 0;
    }
}

/* === MEJORAS DE LEGIBILIDAD Y MOVIL PARA MODALES === */
@media (max-width: 640px) {
    .modal-content {
        max-width: 95%;
        margin: 10px;
        max-height: 95vh;
    }

    .modal-footer {
        flex-direction: column-reverse;
        padding: 1.25rem;
        gap: 0.75rem;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem;
        font-size: 1.1rem;
        height: auto;
        white-space: normal;
        text-align: center;
    }

    /* Ocultar botones flotantes cuando el modal está abierto para evitar solapamiento */
    body:has(.modal.show) #aiChatButton {
        display: none !important;
    }
}

/* Animaciones más suaves para filtros colapsables (Secciones) */
#sectionSelectorWrapper, #subjectSelectorWrapper {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s ease;
    transform-origin: left center;
    max-width: 300px;
    opacity: 1;
}

.filter-hidden {
    opacity: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    transform: scale(0.95) translateX(-10px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border: none !important;
}


/* Modal Specifics */
#calendarModal .modal-content {
    max-width: 450px;
}

/* Evita que botones flotantes queden encima del overlay del modal */
body:has(.modal.show) #supportTopBtn,
body:has(.modal.show) #feedbackFloatingBtn,
body:has(.modal.show) #aiChatButton {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#summaryModal .modal-content {
    max-width: 600px;
}

#summaryModal .quick-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 1rem;
}

#summaryModal .stat-item {
    margin: 0 !important;
    padding: 1.5rem !important;
    background: var(--bg-secondary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

#summaryModal .stat-item:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Header with count badge */
.header-with-count {
    display: flex;
    align-items: center;
    gap: 10px;
}

.count-pill {
    background: rgba(8, 145, 178, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid rgba(8, 145, 178, 0.2);
    min-width: 24px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}

/* Center content-grid content */
.content-grid--main-only {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.attendance-area {
    width: 100%;
}

/* Responsive adjustments for Unified Tools Box */
@media (max-width: 1024px) {
    .content-grid--main-only {
        padding: 0 0.25rem;
    }

    .quick-actions-bar {
        padding: 0.5rem;
    }

    .unified-tools-box {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: 16px;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    
    .tools-divider {
        display: none;
    }

    .date-tools-group {
        min-width: 0;
        width: 100%;
    }
    
    .tools-group {
        width: 100%;
        justify-content: space-between;
        padding: 0;
    }

    .tools-group.clickable {
        justify-content: center;
        gap: 0.5rem;
        padding: 0.4rem;
    }

    .search-tools-group {
        order: -1;
        width: 100% !important;
        max-width: none;
        margin: 0 0 0.25rem 0;
        padding: 8px 12px !important;
        display: flex;
        justify-content: flex-start;
    }
    
    .search-input-minimal {
        text-align: left;
        flex: 1;
    }

    .tool-btn-pill {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Ocultar texto en botones muy pequeños para que quepan en una fila */
    .tool-btn-pill span {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .attendance-header {
        padding: 0.75rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .controls-box {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        padding: 6px 10px;
        box-sizing: border-box;
    }

    .selectors-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

    .selection-section .grade-selector-wrapper {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    .selection-section .grade-selector {
        width: 100%;
        box-sizing: border-box;
    }

    .tool-btn-pill span {
        display: none; /* Iconos solos en móvil muy pequeño */
    }
    
    .tool-btn-pill {
        padding: 0.8rem;
        min-width: 0;
    }
}

.tools-icon.success { color: var(--success); }
.tools-icon.info { color: var(--info); }
.tools-icon.warning { color: var(--warning); }

/* Floating Date Label for Mobile */
.floating-date-label {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--primary);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
}

.floating-date-label.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.floating-date-label i {
    font-size: 0.9rem;
}

@media (min-width: 769px) {
    .floating-date-label {
        display: none !important;
    }
}