/* css/style.css - Sistema de Diseño Premium | Navy & White Institucional */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* =====================
   VARIABLES DE DISEÑO
   ===================== */
:root {
    --primary:       #2563eb;   /* Azul institucional (Antes Navy) */
    --primary-dark:  #1d4ed8;   /* Azul oscuro para hovers */
    --primary-light: #60a5fa;   /* Azul claro */
    --navy-deep:     #0f172a;   /* Guardado para fondos oscuros */
    --accent:        #ef4444;   /* Rojo vibrante */
    --bg-body:       #f1f5f9;
    --card-bg:       #ffffff;
    --text-main:     #1e293b;
    --text-muted:    #64748b;
    --shadow-sm:  0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-md:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06);
    --shadow-lg:  0 25px 50px -12px rgba(0,0,0,0.12);
    --radius-lg:  40px;
    --radius-md:  20px;
    --radius-sm:  12px;
    --success:    #16a34a;
    --danger:     #b91c1c;
}

/* =====================
   RESET & BASE
   ===================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    overflow-x: hidden;
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(96, 165, 250, 0.12) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: var(--text-main);
    line-height: 1.6;
}

a, a:link, a:visited {
    text-decoration: none;
    color: inherit;
}

/* --- NUEVA NAVBAR UNIFICADA (BLUE PREMIUM) --- */
.portal-nav {
    background: var(--primary);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.12), 0 12px 30px rgba(0,0,0,0.07);
    color: white;
}

.nav-container {
    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    cursor: pointer;
    transition: opacity 0.2s;
}
.nav-brand:hover { opacity: 0.9; }
.nav-brand img { 
    height: 48px !important; 
    width: auto !important;
    display: block;
    filter: none !important; 
    object-fit: contain;
}
.brand-text { border-left: 1px solid rgba(255,255,255,0.2); padding-left: 1rem; line-height: 1.1; }
.brand-title { display: block; font-weight: 900; font-size: 1.05rem; }
.brand-sub { font-size: 0.7rem; color: rgba(255,255,255,0.7); font-weight: 500; text-transform: uppercase; }

.nav-menu { display: flex; gap: 2rem; align-items: center; }
.nav-link { 
    color: white; 
    font-weight: 700; 
    font-size: 0.9rem; 
    transition: color 0.2s;
    opacity: 0.85;
}
.nav-link:hover { opacity: 1; color: var(--primary-light); }

.nav-user { display: flex; align-items: center; gap: 1.25rem; }
.user-info { text-align: right; line-height: 1.2; }
.user-name { display: block; font-weight: 800; font-size: 0.9rem; }
.user-role { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; }
.user-avatar { 
    width: 38px; height: 38px; border-radius: 50%; 
    background: rgba(255,255,255,0.15); 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1rem; border: 1px solid rgba(255,255,255,0.2);
}

.btn-logout {
    padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); color: white;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 50px;
    font-weight: 700; cursor: pointer; font-size: 0.75rem;
    transition: all 0.2s;
}
.btn-logout:hover { background: #ef4444; border-color: #ef4444; }

/* =====================
   LAYOUT PRINCIPAL 3 COLUMNAS
   ===================== */
.main-layout {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 2rem;
    max-width: 1700px;
    margin: 2.5rem auto;
    padding: 0 2rem;
    align-items: start;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
}

/* --- PREMIUM SCROLLBAR PARA COLUMNAS LATERALES (ASIDE) GLOBALES --- */
aside {
    position: sticky !important;
    top: 110px !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(37, 99, 235, 0.2) transparent !important;
    padding-right: 6px !important;
    padding-top: 4px !important; /* Evita que el primer elemento (Volver al Inicio) quede recortado por el overflow */
}
aside::-webkit-scrollbar {
    width: 4px !important;
}
aside::-webkit-scrollbar-track {
    background: transparent !important;
}
aside::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.2) !important;
    border-radius: 10px !important;
}

/* =====================
   CARDS
   ===================== */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.3s ease;
}

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

.card-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.card-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* =====================
   MENÚ ITEMS SIDEBAR
   ===================== */
.menu-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    color: var(--text-main);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.menu-item:hover {
    background: #f8fafc;
    color: var(--primary-light);
    transform: translateX(6px);
}

.menu-item span { font-size: 1.1rem; width: 28px; text-align: center; }

/* =====================
   COMPOSER (BARRA DE CREACIÓN)
   ===================== */
.composer-card {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.composer-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.composer-avatar {
    width: 48px;
    height: 48px;
    background: var(--bg-body);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.composer-placeholder {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1.05rem;
}

/* =====================
   NOTICIAS (MURO PREMIUM)
   ===================== */
.news-post {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 
        0 15px 35px -5px rgba(15, 23, 42, 0.15), 
        0 8px 16px -6px rgba(15, 23, 42, 0.10);
    border: 2.5px solid #2563eb;
    border-left: 8px solid #2563eb;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    overflow: hidden;
}

.news-post:hover {
    box-shadow: 
        0 25px 45px -10px rgba(37, 99, 235, 0.28), 
        0 15px 25px -8px rgba(15, 23, 42, 0.15);
    transform: translateY(-6px) translateX(8px);
    border-color: #ef4444;
    border-left-color: #ef4444;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    
    /* Cabecera Estructurada con Fondo Suave (Diferenciado del menú) */
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 1.5rem 3rem;
    margin: -3rem -3rem 2rem -3rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
}

.post-tag {
    display: inline-block;
    padding: 5px 14px;
    background: var(--primary);
    color: white;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: auto;
    max-width: max-content;
}

.post-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0.75rem 0;
    line-height: 1.2;
}

.post-content {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
}

/* =====================
   BOTONES
   ===================== */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: #fee2e2;
    color: var(--accent);
}
.btn-danger:hover { background: #fecaca; }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
}
.btn-ghost:hover {
    background: #f8fafc;
    color: var(--primary);
}

/* =====================
   UTILIDADES
   ===================== */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

.animate-fade {
    animation: fadeInUp 0.4s ease-out;
}

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

/* =====================
   FORMULARIOS
   ===================== */
.input, .ann-input, .ann-textarea {
    width: 100%;
    padding: 0.85rem 1.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    background: #f8fafc;
    transition: border-color 0.2s;
    outline: none;
}
.input:focus, .ann-input:focus, .ann-textarea:focus {
    border-color: var(--primary-light);
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.ann-textarea { resize: vertical; min-height: 120px; }

.label, .ann-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group, .ann-form-group { margin-bottom: 1.5rem; }

/* Adjuntos */
.attachment-bar {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}
.attach-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: white;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.attach-btn:hover {
    background: #f1f5f9;
    color: var(--primary);
    border-color: var(--primary-light);
}

/* =====================
   MODALES
   ===================== */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    width: 100%;
}

/* Custom scrollbar and constraints for premium modals */
.modal-content-scrollable {
    max-height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.modal-header-shrink-disabled {
    flex-shrink: 0 !important;
}

.modal-form-scrollable {
    overflow-y: auto !important;
    flex: 1 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(37, 99, 235, 0.3) transparent !important;
}
.modal-form-scrollable::-webkit-scrollbar {
    width: 6px !important;
}
.modal-form-scrollable::-webkit-scrollbar-track {
    background: transparent !important;
}
.modal-form-scrollable::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.3) !important;
    border-radius: 10px !important;
}

.confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.confirm-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 3rem;
    max-width: 480px;
    width: 95%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

/* =====================
   COMENTARIOS
   ===================== */
.comment-bubble {
    background: #f8fafc;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
}

.reply-container {
    padding-left: 2rem;
    margin-top: 0.5rem;
}

.btn-reply-small {
    background: none;
    border: none;
    color: var(--primary-light);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 0.3rem;
}

/* Botones de acción en noticias */
.btn-action-news {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.btn-action-news:hover { background: #f1f5f9; border-color: var(--primary-light); }
.btn-action-news.btn-delete:hover { background: #fee2e2; border-color: #fecaca; }

/* =====================
   CALENDARIO (MODALES DE RESERVA)
   ===================== */
.day-column { display: flex; flex-direction: column; gap: 8px; }

.day-header {
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.day-header.today { background: var(--primary); color: white; }
.day-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.day-number { font-size: 1.3rem; font-weight: 800; }

.cell {
    min-height: 75px;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.cell.available { background: #f0fdf4; border-color: #bbf7d0; }
.cell.full      { background: #fef2f2; border-color: #fecaca; cursor: not-allowed; }
.cell.past      { background: #f8fafc; opacity: 0.55; cursor: not-allowed; }
.cell.medium    { background: #fffbeb; border-color: #fde68a; }
.cell:hover:not(.past):not(.full) { transform: scale(1.03); box-shadow: var(--shadow-md); }

.res-count { font-size: 0.8rem; font-weight: 800; }
.availability-text { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }

/* Botones de carrusel en detalle de noticia */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.7);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 5;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-btn:hover { background: var(--primary-light); }
.carousel-btn.prev { left: 15px; }
.carousel-btn.next { right: 15px; }

/* Layout detalle de noticia en modal */
.detail-layout {
    display: grid;
    grid-template-columns: 40% 1fr;
    height: auto;
    min-height: 320px;
    max-height: 85vh;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Evitar que fotos se achiquen demasiado cuando el texto es corto */
.detail-layout.has-media {
    min-height: 520px;
}

.detail-media {
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.detail-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2.5rem 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.3) transparent;
}
.detail-scroll::-webkit-scrollbar {
    width: 6px;
}
.detail-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.detail-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(37, 99, 235, 0.3);
    border-radius: 10px;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 1400px) {
    .main-layout { grid-template-columns: 280px 1fr 280px; }
}

@media (max-width: 1100px) {
    .main-layout { grid-template-columns: 1fr; }
    .sidebar-section { position: static; }
}

/* =====================
   SPINNER DE CARGA EN BOTONES
   ===================== */
.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: btn-spin 0.6s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

.btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

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

/* ==========================================================================
   SOBREESCRITURA DE ESTILOS DE MENÚ LATERAL (COMPACTACIÓN DE SIDEBAR - OPCIÓN A)
   ========================================================================== */
.portal-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 20px !important;
    padding: 1.1rem 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02) !important;
}

.portal-card-title {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 0.75rem !important;
    padding: 0 0.5rem !important;
    background: none !important;
    border-bottom: none !important;
}

.portal-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.28rem 0.75rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    margin-bottom: 0.08rem !important;
    text-decoration: none !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-menu-item > span:first-child {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 24px !important; /* Ancho fijo para alinear el texto de forma impecable */
    height: 24px !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.portal-menu-item .menu-text-fit {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Colores Distintivos por Sección del Menú Lateral */

/* --- Regla base ACTIVO: resalta sin desplazar --- */
.portal-menu-item.active {
    transform: none !important; /* Sin desplazamiento horizontal */
    font-weight: 700 !important;
}

/* Sección 1: Gestión de Reservas (Azul) */
aside .portal-card:nth-of-type(1) {
    border-left: 4px solid #3b82f6 !important;
}
aside .portal-card:nth-of-type(1) .portal-card-title {
    color: #3b82f6 !important;
}
aside .portal-card:nth-of-type(1) .portal-menu-item:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #3b82f6 !important;
    border-left-color: #3b82f6 !important;
    transform: translateX(4px) !important;
}
aside .portal-card:nth-of-type(1) .portal-menu-item.active {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
    border-left-color: #3b82f6 !important;
    transform: none !important;
}

/* Sección 2: Soporte Técnico (Naranja) */
aside .portal-card:nth-of-type(2) {
    border-left: 4px solid #f97316 !important;
}
aside .portal-card:nth-of-type(2) .portal-card-title {
    color: #f97316 !important;
}
aside .portal-card:nth-of-type(2) .portal-menu-item:hover {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #f97316 !important;
    border-left-color: #f97316 !important;
    transform: translateX(4px) !important;
}
aside .portal-card:nth-of-type(2) .portal-menu-item.active {
    background: rgba(249, 115, 22, 0.12) !important;
    color: #f97316 !important;
    border-left-color: #f97316 !important;
    transform: none !important;
}

/* Sección 3: Calendario Escolar (Verde) */
aside .portal-card:nth-of-type(3) {
    border-left: 4px solid #10b981 !important;
}
aside .portal-card:nth-of-type(3) .portal-card-title {
    color: #10b981 !important;
}
aside .portal-card:nth-of-type(3) .portal-menu-item:hover {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
    border-left-color: #10b981 !important;
    transform: translateX(4px) !important;
}
aside .portal-card:nth-of-type(3) .portal-menu-item.active {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border-left-color: #10b981 !important;
    transform: none !important;
}

/* Sección 4: Plataformas / Quick Links (Púrpura) */
aside .portal-card:nth-of-type(4) {
    border-left: 4px solid #8b5cf6 !important;
}
aside .portal-card:nth-of-type(4) .portal-card-title {
    color: #8b5cf6 !important;
}
aside .portal-card:nth-of-type(4) .portal-menu-item:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #8b5cf6 !important;
    border-left-color: #8b5cf6 !important;
    transform: translateX(4px) !important;
}
aside .portal-card:nth-of-type(4) .portal-menu-item.active {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #8b5cf6 !important;
    border-left-color: #8b5cf6 !important;
    transform: none !important;
}

/* Botón Destacado: Volver al Inicio */
a[href="portal.html"].portal-menu-item {
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, 0.12) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    padding: 0.6rem 1rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 4px solid var(--primary) !important;
    width: auto !important;
    text-transform: uppercase;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px;
}
a[href="portal.html"].portal-menu-item:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.25) !important;
    /* Sin transform: el botón es el primer elemento del aside con overflow-y:auto,
       translateY(-2px) lo haría subir fuera del área visible y quedaría recortado */
}
a[href="portal.html"].portal-menu-item span {
    color: inherit !important;
}

.sidebar-event-item:hover {
    background: #f1f5f9 !important;
    cursor: pointer;
}

/* ==========================================================================
   SOBREESCRITURA DE ESTILOS DE TIPOGRAFÍA (DISEÑO MÁS COMPACTO Y ADULTO)
   ========================================================================== */
.page-title {
    font-size: 1.6rem !important; /* Igual que en calendario-escolar */
    font-weight: 800 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.5rem !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.page-desc {
    font-size: 0.95rem !important; /* Texto más profesional y compacto */
    margin-bottom: 2rem !important;
    line-height: 1.5 !important;
}

.form-label {
    font-size: 0.75rem !important; /* Reducido de 0.85rem */
    letter-spacing: 0.5px !important;
}

.form-input, .form-textarea, select {
    font-size: 0.9rem !important; /* Reducido de 1rem */
    padding: 0.75rem 1rem !important; /* Campos de entrada menos masivos */
}

.btn-submit {
    font-size: 0.9rem !important;
    padding: 0.75rem 1.5rem !important;
}

.content-card {
    padding: 2.5rem !important; /* Reducido de 3rem para aprovechar espacio */
}

/* =====================
   CALENDARIO DE RESERVAS Y CRA (PREMIUM BOLD)
   ===================== */
.calendar-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    border: 2.5px solid #2563eb !important;
    border-left: 8px solid #2563eb !important;
    box-shadow: 
        0 15px 35px -5px rgba(15, 23, 42, 0.15), 
        0 8px 16px -6px rgba(15, 23, 42, 0.10) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.calendar-wrapper:hover {
    box-shadow: 
        0 25px 45px -10px rgba(37, 99, 235, 0.28), 
        0 15px 25px -8px rgba(15, 23, 42, 0.15) !important;
    transform: translateY(-4px) translateX(4px) !important;
    border-color: #ef4444 !important;
    border-left-color: #ef4444 !important;
}

/* Ocultar botón de hamburguesa por defecto en escritorio */
.hamburger-btn {
    display: none;
}

/* ==========================================================================
   SISTEMA DE DISEÑO RESPONSIVO MÓVIL PREMIUM (< 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* Ocultar aside de la grilla principal del escritorio */
    .main-layout > aside {
        display: none !important;
    }

    /* Grilla de layout a 1 columna pura */
    .main-layout {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
        margin-top: 90px !important;
        gap: 1.5rem !important;
    }

    /* Optimización de Espacios en Contenedores */
    .content-card {
        padding: 1.5rem !important;
        border-radius: 24px !important;
    }

    /* Reducir navbar a tamaño compacto en móvil (Con alta especificidad contra overrides inline) */
    html body nav.portal-nav {
        padding: 0.5rem 1.25rem !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
    }
    html body nav.portal-nav div.nav-container {
        justify-content: space-between !important;
    }
    html body nav.portal-nav div.nav-container div.nav-brand img {
        height: 38px !important;
    }
    html body nav.portal-nav div.nav-container div.nav-brand div.brand-text span.brand-title {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
    }
    html body nav.portal-nav div.nav-container div.nav-brand div.brand-text span.brand-sub {
        font-size: 0.58rem !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Mostrar contenedor nav-user pero ocultar información personal y botón de cerrar sesión de escritorio */
    html body nav.portal-nav div.nav-container div.nav-user {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    html body nav.portal-nav div.nav-container div.nav-user > .user-info,
    html body nav.portal-nav div.nav-container div.nav-user > .user-avatar,
    html body nav.portal-nav div.nav-container div.nav-user > #navAvatar,
    html body nav.portal-nav div.nav-container div.nav-user > .btn-logout {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       BOTÓN HAMBURGUESA PREMIUM ANIMADO
       ---------------------------------------------------------------------- */
    html body .hamburger-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10000000; /* Siempre sobre todo */
    }
    .hamburger-btn span {
        width: 100%;
        height: 3px;
        background-color: white;
        border-radius: 4px;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        transform-origin: left center;
    }
    .hamburger-btn.active span:nth-child(1) {
        transform: rotate(45deg) translateY(-2.5px) translateX(1px);
    }
    .hamburger-btn.active span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(2.5px) translateX(1px);
    }

    /* ----------------------------------------------------------------------
       CAJÓN LATERAL MÓVIL (MOBILE DRAWER)
       ---------------------------------------------------------------------- */
    .mobile-drawer {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        height: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15);
        z-index: 9999999;
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        border-left: 1px solid rgba(226, 232, 240, 0.8);
    }
    .mobile-drawer.active {
        transform: translateX(-320px);
    }
    
    /* Overlay translúcido de fondo */
    .drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9999998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    body.drawer-open {
        overflow: hidden !important;
    }

    /* Estilos internos del drawer */
    .drawer-header-brand {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }
    
    /* Adaptar el aside clonado dentro del drawer */
    .mobile-drawer aside {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    .mobile-drawer .portal-card {
        border-radius: 20px !important;
        padding: 1.25rem 1rem !important;
        margin-bottom: 1.25rem !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    }

    /* ----------------------------------------------------------------------
       CALENDARIOS COMPATIBLES MÓVILES (HORIZONTAL SWIPE)
       ---------------------------------------------------------------------- */
    .calendar-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px !important;
    }
    .grid-container, .calendar-grid {
        min-width: 750px !important; /* Mantiene legibilidad sin encoger celdas */
    }

    /* Micro-badge indicador de deslizamiento */
    .page-title::after {
        content: "↔ Desliza la tabla";
        display: inline-block;
        font-size: 0.65rem;
        background: #eff6ff;
        color: #2563eb;
        padding: 4px 8px;
        border-radius: 12px;
        font-weight: 800;
        margin-left: 10px;
        vertical-align: middle;
        border: 1px solid #dbeafe;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ----------------------------------------------------------------------
       AJUSTES DE DROPDOWN DE NOTIFICACIONES EN MÓVILES
       ---------------------------------------------------------------------- */
    html body #notifDropdown {
        width: auto !important;
    }
    @media (max-width: 360px) {
        html body #notifDropdown {
            width: auto !important;
        }
    }
}

/* ============================================================
   ANTI-FLASH DE CONTENIDO ADMIN
   Oculta los ítems de menú reservados para administradores
   desde el primer render del DOM, ANTES de que auth.js
   verifique permisos. auth.js los elimina definitivamente
   cuando el usuario no tiene acceso, y los re-crea
   dinámicamente cuando sí tiene. Esto evita el parpadeo
   de "flash of admin content" para docentes sin permisos.
   ============================================================ */
.admin-only,
.tablet-admin-only {
    display: none !important;
}

/* ============================================================
   MEJORAS MOVILES TRANSVERSALES
   Mantiene la experiencia de escritorio y corrige pantallas chicas.
   ============================================================ */
@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        background-attachment: scroll !important;
    }

    html body nav.portal-nav {
        min-height: 64px !important;
        padding: 0.45rem 0.85rem !important;
    }

    html body nav.portal-nav .nav-container {
        min-width: 0 !important;
        gap: 0.75rem !important;
    }

    html body nav.portal-nav .nav-brand {
        min-width: 0 !important;
        gap: 0.65rem !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }

    html body nav.portal-nav .nav-brand img {
        height: 36px !important;
        flex: 0 0 auto !important;
    }

    html body nav.portal-nav .brand-text {
        min-width: 0 !important;
        padding-left: 0.65rem !important;
        overflow: hidden !important;
    }

    html body nav.portal-nav .brand-title,
    html body nav.portal-nav .brand-sub {
        display: block !important;
        max-width: 58vw !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body nav.portal-nav .nav-user {
        flex: 0 0 auto !important;
        gap: 0.65rem !important;
    }

    .main-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin: 82px 0 1.25rem !important;
        padding: 0 0.85rem !important;
        gap: 1rem !important;
    }

    .main-layout > main {
        min-width: 0 !important;
        width: 100% !important;
    }

    .content-card,
    .portal-card,
    .card,
    .users-list-card {
        border-radius: 18px !important;
        padding: 1rem !important;
    }

    .page-title {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .page-title::after {
        display: none !important;
        content: none !important;
    }

    .page-desc {
        font-size: 0.88rem !important;
        margin-bottom: 1rem !important;
    }

    .control-bar,
    [class*="control-bar"] {
        position: static !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.8rem !important;
        border-radius: 18px !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .control-bar > div,
    [class*="control-bar"] > div {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    #currentDateRange {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    .calendar-wrapper {
        position: relative !important;
        margin-left: -0.15rem !important;
        margin-right: -0.15rem !important;
        border-radius: 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
        border-left-width: 4px !important;
    }

    .calendar-wrapper:hover {
        transform: none !important;
    }

    .calendar-wrapper::before {
        content: "Desliza horizontalmente";
        position: sticky;
        left: 0.75rem;
        top: 0.6rem;
        z-index: 5;
        display: inline-flex;
        width: max-content;
        margin: 0.65rem 0 0 0.65rem;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        border: 1px solid #dbeafe;
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .grid-container,
    .calendar-grid,
    .tablet-grid {
        min-width: 680px !important;
    }

    .grid-container {
        grid-auto-rows: 72px !important;
    }

    .grid-header,
    .time-cell,
    .res-cell,
    .cell {
        padding: 0.55rem !important;
    }

    .date-label {
        font-size: 1.05rem !important;
    }

    .cell-status,
    .res-cell.available .cell-status,
    .res-cell.partial .cell-status,
    .res-cell.full .cell-status,
    .res-cell.past .cell-status {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
    }

    .cell-info,
    .availability-text {
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
    }

    .modal,
    .confirm-overlay,
    .pcal-modal-overlay {
        padding: 0.6rem !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .modal-content,
    .confirm-card,
    .pcal-modal-card,
    .modal-content-scrollable {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 1.2rem) !important;
        border-radius: 18px !important;
        overflow-y: auto !important;
        margin: 0 auto !important;
    }

    .modal-header-shrink-disabled,
    .modal-content [style*="padding: 2rem"],
    .modal-content [style*="padding: 2.5rem"],
    .confirm-card {
        padding: 1rem !important;
    }

    .modal-form-scrollable,
    form[style*="padding"] {
        padding: 1rem !important;
    }

    .modal [style*="grid-template-columns"],
    .confirm-card [style*="grid-template-columns"],
    .content-card [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .btn,
    button,
    input,
    select,
    textarea {
        max-width: 100% !important;
    }

    .btn {
        justify-content: center !important;
        min-height: 42px !important;
    }

    .admin-grid,
    .modules-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .users-list-card {
        max-height: 45vh !important;
    }

    .user-item-card,
    .module-card {
        border-radius: 16px !important;
        padding: 0.85rem !important;
        gap: 0.75rem !important;
    }

    .module-info,
    .module-text-wrap {
        min-width: 0 !important;
    }

    .switch-toggle {
        flex: 0 0 auto !important;
    }

    #newsList {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .news-post {
        min-height: 0 !important;
        border-radius: 18px !important;
        padding: 1rem !important;
        transform: none !important;
    }

    .news-post:hover {
        transform: none !important;
    }

    .detail-media {
        height: 220px !important;
    }

    .detail-scroll {
        padding: 1rem !important;
    }

    .mention-dropdown {
        width: min(92vw, 320px) !important;
        left: 0 !important;
        right: auto !important;
    }

    table,
    .tp-table {
        min-width: 620px !important;
    }

    #tp-table-wrapper,
    [id$="TableWrapper"],
    [class*="table-wrapper"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 420px) {
    html body nav.portal-nav .brand-title {
        max-width: 50vw !important;
        font-size: 0.78rem !important;
    }

    html body nav.portal-nav .brand-sub {
        max-width: 50vw !important;
        font-size: 0.54rem !important;
    }

    .main-layout {
        padding: 0 0.65rem !important;
    }

    .mobile-drawer {
        width: min(88vw, 320px) !important;
        right: min(-88vw, -320px) !important;
    }

    .mobile-drawer.active {
        transform: translateX(min(-88vw, -320px)) !important;
    }

    .grid-container,
    .calendar-grid,
    .tablet-grid {
        min-width: 640px !important;
    }
}