/* ════════════════════════════════════════════════════════════════════
   INTRANET DIRECTORIO AMSAC - STYLESHEET UNIFICADO
   ────────────────────────────────────────────────────────────────────
   Versión: 2.3 (Teal soft + Modo Oscuro)
   ÍNDICE:
     1.  VARIABLES Y TOKENS
     2.  BASE Y TIPOGRAFÍA
     3.  UTILIDADES DE COLOR (Google Palette)
     4.  NAVBAR
     5.  CARDS
     6.  BOTONES
     7.  BADGES
     8.  FORMULARIOS
     9.  TABLAS
     10. ALERTAS
     11. DROPDOWN
     12. BREADCRUMB
     13. ICONOS
     14. VISTA DIRECTORIO (M3)
     15. PAGINACIÓN M3
     16. ANIMACIONES
     17. ARCHIVOS Y DASHBOARD
     18. ESTADOS DE REUNIÓN
     19. SCROLLBAR
     20. ACCESIBILIDAD
     21. RESPONSIVE
     22. PRINT
     23. MODO OSCURO (DARK MODE M3)
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════ 1. VARIABLES Y TOKENS ════════════════ */
:root {
    /* Material Design 3 - Vista Directorio (Light Defaults) */
    --m3-sys-light-primary: #0b57d0;
    --m3-sys-light-on-primary: #ffffff;
    --m3-sys-light-primary-container: #d3e3fd;
    --m3-sys-light-on-primary-container: #041e49;
    --m3-sys-light-secondary-container: #cce8e1;
    --m3-sys-light-on-secondary-container: #0a3a30;
    --m3-sys-light-surface: #fbfbff;
    --m3-sys-light-surface-container: #f3f4f9;
    --m3-sys-light-surface-container-high: #eceeef;
    --m3-sys-light-outline: #74777f;
    --m3-sys-light-outline-variant: #c4c6d0;

    /* Bootstrap Theme */
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #212529;

    /* Google Grey */
    --grey-50: #fafafa;   --grey-100: #f5f5f5;  --grey-200: #eeeeee;
    --grey-300: #e0e0e0;  --grey-400: #bdbdbd;  --grey-500: #9e9e9e;
    --grey-600: #757575;  --grey-700: #616161;  --grey-800: #424242;
    --grey-900: #212121;

    /* Google Blue */
    --blue-50: #e3f2fd;   --blue-100: #bbdefb;  --blue-200: #90caf9;
    --blue-300: #64b5f6;  --blue-400: #42a5f5;  --blue-500: #2196f3;
    --blue-600: #1e88e5;  --blue-700: #1976d2;  --blue-800: #1565c0;
    --blue-900: #0d47a1;

    /* Google Green */
    --green-50: #e8f5e8;  --green-100: #c8e6c9; --green-200: #a5d6a7;
    --green-300: #81c784; --green-400: #66bb6a; --green-500: #4caf50;
    --green-600: #43a047; --green-700: #388e3c; --green-800: #2e7d32;
    --green-900: #1b5e20;

    /* Google Red */
    --red-50: #ffebee;    --red-100: #ffcdd2;   --red-200: #ef9a9a;
    --red-300: #e57373;   --red-400: #ef5350;   --red-500: #f44336;
    --red-600: #e53935;   --red-700: #d32f2f;   --red-800: #c62828;
    --red-900: #b71c1c;

    /* Google Orange */
    --orange-50: #fff3e0; --orange-100: #ffe0b2; --orange-200: #ffcc80;
    --orange-300: #ffb74d;--orange-400: #ffa726; --orange-500: #ff9800;
    --orange-600: #fb8c00;--orange-700: #f57c00; --orange-800: #ef6c00;
    --orange-900: #e65100;

    /* Shadows */
    --shadow-1: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --shadow-2: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
    --shadow-3: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    --shadow-4: 0 2px 3px 0 rgba(60,64,67,0.3), 0 6px 10px 4px rgba(60,64,67,0.15);
    --shadow-5: 0 4px 4px 0 rgba(60,64,67,0.3), 0 8px 12px 6px rgba(60,64,67,0.15);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}


/* ════════════════ 2. BASE Y TIPOGRAFÍA ════════════════ */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #202124;
    background-color: #f8f9fa;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Google Sans', 'Roboto', sans-serif;
    font-weight: 500;
    color: #1f1f1f;
}


/* ════════════════ 3. UTILIDADES DE COLOR (Google Palette) ════════════════ */
/* Backgrounds */
.bg-grey-50  { background-color: var(--grey-50)  !important; }
.bg-grey-100 { background-color: var(--grey-100) !important; }
.bg-grey-200 { background-color: var(--grey-200) !important; }
.bg-grey-300 { background-color: var(--grey-300) !important; }
.bg-grey-400 { background-color: var(--grey-400) !important; }
.bg-grey-500 { background-color: var(--grey-500) !important; }
.bg-grey-600 { background-color: var(--grey-600) !important; }
.bg-grey-700 { background-color: var(--grey-700) !important; }
.bg-grey-800 { background-color: var(--grey-800) !important; }
.bg-grey-900 { background-color: var(--grey-900) !important; }

.bg-green-50  { background-color: var(--green-50)  !important; }
.bg-green-100 { background-color: var(--green-100) !important; }
.bg-green-200 { background-color: var(--green-200) !important; }
.bg-green-300 { background-color: var(--green-300) !important; }
.bg-green-400 { background-color: var(--green-400) !important; }
.bg-green-500 { background-color: var(--green-500) !important; }
.bg-green-600 { background-color: var(--green-600) !important; }
.bg-green-700 { background-color: var(--green-700) !important; }
.bg-green-800 { background-color: var(--green-800) !important; }
.bg-green-900 { background-color: var(--green-900) !important; }

.bg-blue-50  { background-color: var(--blue-50)  !important; }
.bg-blue-100 { background-color: var(--blue-100) !important; }
.bg-blue-200 { background-color: var(--blue-200) !important; }
.bg-blue-300 { background-color: var(--blue-300) !important; }
.bg-blue-400 { background-color: var(--blue-400) !important; }
.bg-blue-500 { background-color: var(--blue-500) !important; }
.bg-blue-600 { background-color: var(--blue-600) !important; }
.bg-blue-700 { background-color: var(--blue-700) !important; }
.bg-blue-800 { background-color: var(--blue-800) !important; }
.bg-blue-900 { background-color: var(--blue-900) !important; }

.bg-orange-50  { background-color: var(--orange-50)  !important; }
.bg-orange-100 { background-color: var(--orange-100) !important; }
.bg-orange-200 { background-color: var(--orange-200) !important; }
.bg-orange-300 { background-color: var(--orange-300) !important; }
.bg-orange-400 { background-color: var(--orange-400) !important; }
.bg-orange-500 { background-color: var(--orange-500) !important; }
.bg-orange-600 { background-color: var(--orange-600) !important; }
.bg-orange-700 { background-color: var(--orange-700) !important; }
.bg-orange-800 { background-color: var(--orange-800) !important; }
.bg-orange-900 { background-color: var(--orange-900) !important; }

/* Texts */
.text-grey-50  { color: var(--grey-50)  !important; }
.text-grey-100 { color: var(--grey-100) !important; }
.text-grey-200 { color: var(--grey-200) !important; }
.text-grey-300 { color: var(--grey-300) !important; }
.text-grey-400 { color: var(--grey-400) !important; }
.text-grey-500 { color: var(--grey-500) !important; }
.text-grey-600 { color: var(--grey-600) !important; }
.text-grey-700 { color: var(--grey-700) !important; }
.text-grey-800 { color: var(--grey-800) !important; }
.text-grey-900 { color: var(--grey-900) !important; }

.text-green-50  { color: var(--green-50)  !important; }
.text-green-100 { color: var(--green-100) !important; }
.text-green-200 { color: var(--green-200) !important; }
.text-green-300 { color: var(--green-300) !important; }
.text-green-400 { color: var(--green-400) !important; }
.text-green-500 { color: var(--green-500) !important; }
.text-green-600 { color: var(--green-600) !important; }
.text-green-700 { color: var(--green-700) !important; }
.text-green-800 { color: var(--green-800) !important; }
.text-green-900 { color: var(--green-900) !important; }

.text-blue-50  { color: var(--blue-50)  !important; }
.text-blue-100 { color: var(--blue-100) !important; }
.text-blue-200 { color: var(--blue-200) !important; }
.text-blue-300 { color: var(--blue-300) !important; }
.text-blue-400 { color: var(--blue-400) !important; }
.text-blue-500 { color: var(--blue-500) !important; }
.text-blue-600 { color: var(--blue-600) !important; }
.text-blue-700 { color: var(--blue-700) !important; }
.text-blue-800 { color: var(--blue-800) !important; }
.text-blue-900 { color: var(--blue-900) !important; }

.text-orange-50  { color: var(--orange-50)  !important; }
.text-orange-100 { color: var(--orange-100) !important; }
.text-orange-200 { color: var(--orange-200) !important; }
.text-orange-300 { color: var(--orange-300) !important; }
.text-orange-400 { color: var(--orange-400) !important; }
.text-orange-500 { color: var(--orange-500) !important; }
.text-orange-600 { color: var(--orange-600) !important; }
.text-orange-700 { color: var(--orange-700) !important; }
.text-orange-800 { color: var(--orange-800) !important; }
.text-orange-900 { color: var(--orange-900) !important; }


/* ════════════════ 4. NAVBAR ════════════════ */
.navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--grey-200) !important;
    position: relative;
    z-index: 1000;
}
.navbar-brand {
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--grey-900) !important;
}
.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--grey-700) !important;
    border-radius: var(--radius-lg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 4px;
}
.navbar-nav .nav-link:hover {
    background-color: var(--grey-100) !important;
    color: var(--grey-900) !important;
}
.navbar-nav .nav-link.active {
    background-color: var(--blue-50) !important;
    color: var(--blue-700) !important;
}


/* ════════════════ 5. CARDS ════════════════ */
.card {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-1) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
}
.card:hover {
    box-shadow: var(--shadow-2) !important;
    transform: translateY(-2px);
}
.card-header {
    background-color: var(--grey-50) !important;
    border-bottom: 1px solid var(--grey-200) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-weight: 500;
    font-family: 'Google Sans', sans-serif;
}
.card-header.bg-primary {
    background-color: var(--blue-600) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}


/* ════════════════ 6. BOTONES ════════════════ */
.btn {
    font-weight: 500;
    border-radius: var(--radius-lg);
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0.25px;
    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.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.btn:active:before { width: 300px; height: 300px; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }

.btn-primary           { background-color: var(--blue-600) !important; color: white !important; }
.btn-primary:hover     { background-color: var(--blue-700) !important; box-shadow: var(--shadow-2); }

.btn-outline-primary       { border: 2px solid var(--blue-600) !important; color: var(--blue-600) !important; background-color: transparent !important; }
.btn-outline-primary:hover { background-color: var(--blue-50) !important; border-color: var(--blue-700) !important; color: var(--blue-700) !important; }

.btn-success         { background-color: var(--green-600) !important; color: white !important; }
.btn-success:hover   { background-color: var(--green-700) !important; box-shadow: var(--shadow-2); }
.btn-danger          { background-color: var(--red-600)   !important; color: white !important; }
.btn-danger:hover    { background-color: var(--red-700)   !important; box-shadow: var(--shadow-2); }
.btn-warning         { background-color: var(--orange-600)!important; color: white !important; }
.btn-warning:hover   { background-color: var(--orange-700)!important; box-shadow: var(--shadow-2); }

/* Botón M3 - estilo píldora */
.btn-m3-primary {
    background-color: var(--m3-sys-light-primary);
    color: var(--m3-sys-light-on-primary);
    border-radius: 100px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.btn-m3-primary:hover {
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15);
    background-color: #0842a0;
    color: white;
}


/* ════════════════ 7. BADGES ════════════════ */
.badge {
    padding: 0.375rem 0.75rem !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    border-radius: var(--radius-md) !important;
    letter-spacing: 0.25px;
}
.badge.bg-grey-100   { background-color: var(--grey-100)   !important; color: var(--grey-700)   !important; }
.badge.bg-green-100  { background-color: var(--green-100)  !important; color: var(--green-700)  !important; }
.badge.bg-blue-100   { background-color: var(--blue-100)   !important; color: var(--blue-700)   !important; }
.badge.bg-orange-100 { background-color: var(--orange-100) !important; color: var(--orange-700) !important; }

/* Badge tonal M3 */
.badge-m3-tonal {
    background-color: var(--m3-sys-light-primary-container);
    color: var(--m3-sys-light-on-primary-container);
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 500;
    font-size: 0.8rem;
    border: none;
    display: inline-flex;
    align-items: center;
}


/* ════════════════ 8. FORMULARIOS ════════════════ */
.form-control,
.form-select {
    border: 2px solid var(--grey-300) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 16px !important;
    font-weight: 400;
    transition: all 0.2s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--blue-500) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
    outline: none !important;
}


/* ════════════════ 9. TABLAS ════════════════ */
.table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.table thead th {
    background-color: var(--grey-50) !important;
    border-bottom: 2px solid var(--grey-200) !important;
    font-weight: 500;
    font-family: 'Google Sans', sans-serif;
    color: var(--grey-700);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table tbody tr { transition: background-color 0.2s ease; }
.table tbody tr:hover { background-color: var(--grey-50) !important; }
.table td {
    border-bottom: 1px solid var(--grey-100) !important;
    vertical-align: middle;
}
.table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.05); }


/* ════════════════ 10. ALERTAS ════════════════ */
.alert {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    border-left: 4px solid !important;
    box-shadow: var(--shadow-1) !important;
}
.alert-success { background-color: var(--green-50)  !important; border-left-color: var(--green-500)  !important; color: var(--green-800)  !important; }
.alert-danger  { background-color: var(--red-50)    !important; border-left-color: var(--red-500)    !important; color: var(--red-800)    !important; }
.alert-warning { background-color: var(--orange-50) !important; border-left-color: var(--orange-500) !important; color: var(--orange-800) !important; }
.alert-info    { background-color: var(--blue-50)   !important; border-left-color: var(--blue-500)   !important; color: var(--blue-800)   !important; }


/* ════════════════ 11. DROPDOWN ════════════════ */
.dropdown-menu {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-4) !important;
    padding: 8px !important;
    background-color: white !important;
    z-index: 9999;
    position: absolute;
    color: var(--grey-900) !important;
}
.dropdown-item {
    border-radius: var(--radius-md) !important;
    padding: 8px 16px !important;
    font-weight: 400;
    color: var(--grey-700) !important;
    transition: all 0.2s ease;
    background-color: transparent !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--grey-100) !important;
    color: var(--grey-900) !important;
}


/* ════════════════ 12. BREADCRUMB ════════════════ */
.breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    color: var(--grey-500) !important;
    font-weight: 400;
}
.breadcrumb-item a {
    color: var(--blue-600) !important;
    text-decoration: none;
    font-weight: 400;
}
.breadcrumb-item a:hover {
    color: var(--blue-700) !important;
    text-decoration: underline;
}


/* ════════════════ 13. ICONOS ════════════════ */
.material-icons {
    vertical-align: middle;
    font-size: 20px;
}


/* ════════════════ 14. VISTA DIRECTORIO (M3 ULTRA MODERNO) ════════════════ */
/* Encabezado */
.vista-header h1 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: 0;
    color: #1f1f1f;
}
.vista-header .subtitulo {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: #444746;
}

/* Buscador M3 (Estilo Píldora Ultra Moderno) */
.search-card-m3 {
    background-color: var(--m3-sys-light-surface-container-high);
    border-radius: 100px;
    padding: 8px 12px;
    border: none;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.search-card-m3:focus-within {
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px);
}
.search-input-wrapper-m3 {
    position: relative;
    display: flex;
    align-items: center;
}
.search-input-wrapper-m3 input {
    background-color: transparent !important;
    border: none !important;
    height: 56px;
    padding-left: 56px !important;
    padding-right: 64px !important;
    font-size: 1.1rem;
    box-shadow: none !important;
    color: #1f1f1f;
}
.search-input-wrapper-m3 input:focus {
    box-shadow: none !important;
    outline: none !important;
}
.search-input-wrapper-m3 input::placeholder {
    color: #74777f;
    opacity: 1;
}
.search-input-wrapper-m3 .search-icon-left {
    position: absolute;
    left: 20px;
    font-size: 24px;
    color: #444746;
    pointer-events: none;
}

/* Botón flotante dentro del input */
.btn-search-m3-floating {
    position: absolute;
    right: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--m3-sys-light-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;
}
.btn-search-m3-floating:hover {
    background-color: #0842a0;
    box-shadow: 0 2px 8px rgba(11, 87, 208, 0.4);
    transform: scale(1.05);
}
.btn-search-m3-floating:active {
    transform: scale(0.95);
}

/* Filtros M3 */
.form-select-m3 {
    background-color: white !important;
    border: 1px solid var(--m3-sys-light-outline-variant) !important;
    border-radius: 100px !important;
    height: 56px;
    color: #1f1f1f;
    cursor: pointer;
    font-weight: 500;
    padding-left: 20px !important;
}
.form-select-m3:focus {
    border-color: var(--m3-sys-light-primary) !important;
    box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.2) !important;
}

/* Tarjetas M3 (Outlined Card) */
.meeting-card-m3 {
    background-color: var(--m3-sys-light-surface);
    border: 1px solid var(--m3-sys-light-outline-variant) !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}
.meeting-card-m3:hover {
    background-color: var(--m3-sys-light-surface-container);
    transform: translateY(-2px);
}
.meeting-card-m3 .card-title {
    font-size: 1.25rem;
    color: #1f1f1f;
    line-height: 1.3;
}

/* Contenedor de Documentos Tonales */
.doc-container-m3 {
    background-color: var(--m3-sys-light-secondary-container);
    color: var(--m3-sys-light-on-secondary-container);
    border-radius: 16px;
    padding: 12px 16px;
}
.doc-container-m3 .material-symbols-rounded {
    color: var(--m3-sys-light-on-secondary-container);
}


/* ════════════════ 15. PAGINACIÓN M3 ════════════════ */
.pagination-wrapper {
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pagination-google {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 100px;
    overflow: hidden;
    background: var(--m3-sys-light-surface-container-high);
}
.pagination-google .page-item {
    list-style: none;
}
.pagination-google .page-link {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #444746;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}
.pagination-google .page-link:hover {
    background: var(--m3-sys-light-surface-container);
    color: #1f1f1f;
}
.pagination-google .page-item.active .page-link {
    background: var(--m3-sys-light-primary-container);
    color: var(--m3-sys-light-on-primary-container);
    font-weight: 600;
}
.pagination-google .page-item.dots .page-link {
    cursor: default;
}
.pagination-google .page-item:first-child .page-link {
    padding-left: 20px;
}
.pagination-google .page-item:last-child .page-link {
    padding-right: 20px;
}
.pagination-google .page-link .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}

/* Paginación Bootstrap clásica (fallback) */
.pagination .page-link {
    border: none !important;
    color: var(--blue-600) !important;
    border-radius: var(--radius-md) !important;
    margin: 0 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.pagination .page-link:hover {
    background: var(--blue-50) !important;
    color: var(--blue-700) !important;
}
.pagination .page-item.active .page-link {
    background: var(--blue-600) !important;
    color: white !important;
    box-shadow: var(--shadow-2);
}


/* ════════════════ 16. ANIMACIONES ════════════════ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.fade-in  { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.slide-in { animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Mensaje sin resultados AJAX */
#mensaje-sin-resultados {
    animation: fadeIn 0.3s ease;
}


/* ════════════════ 17. ARCHIVOS Y DASHBOARD ════════════════ */
.archivo-item {
    transition: all 0.2s ease;
}
.archivo-item:hover {
    background-color: rgba(13, 110, 253, 0.05);
    transform: translateX(5px);
}
.dashboard-card {
    transition: all 0.3s ease;
}
.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
}


/* ════════════════ 18. ESTADOS DE REUNIÓN ════════════════ */
.estado-reunion-realizada { background-color: var(--secondary-color); }
.estado-reunion-hoy       { background-color: var(--success-color); }
.estado-reunion-proxima   { background-color: var(--primary-color); }


/* ════════════════ 19. SCROLLBAR ════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--grey-100);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--grey-400);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--grey-500);
}


/* ════════════════ 20. ACCESIBILIDAD ════════════════ */
.btn:focus,
.form-control:focus,
.form-select:focus,
.navbar-nav .nav-link:focus {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

/* Spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--dark-color);
    border-radius: 0.5rem;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--dark-color);
}


/* ════════════════ 21. RESPONSIVE ════════════════ */
@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .card { margin-bottom: 16px; }
    .card-body { padding: 1rem; }
    .btn {
        padding: 8px 16px;
        font-size: 0.875rem;
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8125rem;
    }
    .material-icons { font-size: 18px; }
}


/* ════════════════ 22. PRINT ════════════════ */
@media print {
    .navbar,
    .btn,
    footer {
        display: none !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid var(--grey-300) !important;
    }
}


/* ════════════════ 23. MODO OSCURO (DARK MODE M3) ════════════════ */

/* Detectar si el usuario activó el modo oscuro mediante Bootstrap 5 o clase directa */
html[data-bs-theme="dark"],
[data-bs-theme="dark"], 
body.dark-mode,
.dark-mode {

    /* 1. Inversión de Paleta M3 (Tonos pastel oscuros anti-fatiga) */
    --m3-sys-light-primary: #a8c7fa; 
    --m3-sys-light-on-primary: #062e6f;
    --m3-sys-light-primary-container: #004a77;
    --m3-sys-light-on-primary-container: #c2e7ff;
    
    --m3-sys-light-secondary-container: #1f4a40;
    --m3-sys-light-on-secondary-container: #cce8e1;
    
    --m3-sys-light-surface: #1e1f22;
    --m3-sys-light-surface-container: #2b2d31;
    --m3-sys-light-surface-container-high: #333537;
    
    --m3-sys-light-outline-variant: #5c5f61;

    /* 2. Inversión de Grises Base */
    --grey-50: #1e1f22;
    --grey-100: #2b2d31;
    --grey-200: #333537;
    --light-color: #212529;
}

/* 3. Ajustes de Fondo y Textos Globales en Modo Oscuro */
[data-bs-theme="dark"] body, 
body.dark-mode {
    background-color: #131416 !important;
    color: #e3e3e3 !important;
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, 
[data-bs-theme="dark"] .vista-header h1, [data-bs-theme="dark"] .card-title,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, 
body.dark-mode .vista-header h1, body.dark-mode .card-title {
    color: #e3e3e3 !important;
}

[data-bs-theme="dark"] .vista-header .subtitulo,
body.dark-mode .vista-header .subtitulo {
    color: #c4c7c5 !important;
}

/* 4. Tarjetas y Formularios M3 en Oscuro */
[data-bs-theme="dark"] .card, 
body.dark-mode .card {
    background-color: var(--m3-sys-light-surface) !important;
}

[data-bs-theme="dark"] .search-card-m3,
body.dark-mode .search-card-m3 {
    background-color: var(--m3-sys-light-surface-container-high) !important;
}

[data-bs-theme="dark"] .search-input-wrapper-m3 input,
[data-bs-theme="dark"] .form-select-m3,
body.dark-mode .search-input-wrapper-m3 input,
body.dark-mode .form-select-m3 {
    color: #e3e3e3 !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .search-input-wrapper-m3 input::placeholder,
body.dark-mode .search-input-wrapper-m3 input::placeholder {
    color: #8e918f !important;
}

[data-bs-theme="dark"] .search-icon-left,
body.dark-mode .search-icon-left {
    color: #c4c7c5 !important;
}

[data-bs-theme="dark"] .form-select-m3,
body.dark-mode .form-select-m3 {
    background-color: var(--m3-sys-light-surface-container-high) !important;
    border-color: var(--m3-sys-light-outline-variant) !important;
}

/* 5. Dropdowns y Paginación en Oscuro */
[data-bs-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
    background-color: #2b2d31 !important;
    border: 1px solid #444746 !important;
}

[data-bs-theme="dark"] .dropdown-item,
body.dark-mode .dropdown-item {
    color: #e3e3e3 !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
body.dark-mode .dropdown-item:hover {
    background-color: #333537 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .pagination-google,
body.dark-mode .pagination-google {
    background-color: var(--m3-sys-light-surface-container-high) !important;
}

[data-bs-theme="dark"] .pagination-google .page-link,
body.dark-mode .pagination-google .page-link {
    color: #e3e3e3 !important;
}

[data-bs-theme="dark"] .pagination-google .page-link:hover,
body.dark-mode .pagination-google .page-link:hover {
    background-color: var(--m3-sys-light-surface) !important;
    color: white !important;
}

/* 6. Textos secundarios en Tarjetas */
[data-bs-theme="dark"] .text-muted,
body.dark-mode .text-muted {
    color: #c4c7c5 !important;
}

/* 7. Modal de "No se encontraron reuniones" */
[data-bs-theme="dark"] #mensaje-sin-resultados .text-dark,
body.dark-mode #mensaje-sin-resultados .text-dark {
    color: #e3e3e3 !important;
}

/* ════════════════════════════════════════════════════════════════════
   SECCIONES ADICIONALES — v2.4
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════ 24. CALENDARIO FULLCALENDAR (M3) ════════════════ */
#calendar {
    font-family: 'Roboto', sans-serif;
}

/* Toolbar */
#calendar .fc-toolbar {
    padding: 0.5rem 0 1rem;
    margin-bottom: 0.5rem;
}
#calendar .fc-toolbar-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    color: #1f1f1f;
    text-transform: capitalize;
}

/* Botones M3 píldora */
.fc .fc-button {
    border-radius: 100px !important;
    border: 1px solid var(--m3-sys-light-outline-variant) !important;
    background: var(--m3-sys-light-surface) !important;
    color: #1f1f1f !important;
    font-weight: 500;
    padding: 0.4rem 1rem !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}
.fc .fc-button:hover {
    background: var(--m3-sys-light-surface-container) !important;
    transform: translateY(-1px);
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--m3-sys-light-primary) !important;
    color: white !important;
    border-color: var(--m3-sys-light-primary) !important;
}

/* Grupos de botones */
.fc .fc-button-group .fc-button:first-child { border-radius: 100px 0 0 100px !important; }
.fc .fc-button-group .fc-button:last-child  { border-radius: 0 100px 100px 0 !important; }
.fc .fc-button-group .fc-button:not(:first-child):not(:last-child) { border-radius: 0 !important; }

/* Días de la semana */
.fc .fc-col-header-cell {
    padding: 0.65rem 0;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--m3-sys-light-primary);
    background: var(--m3-sys-light-surface-container);
    border: none !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Celdas de días */
.fc .fc-daygrid-day {
    background: var(--m3-sys-light-surface);
    border: 1px solid var(--m3-sys-light-outline-variant) !important;
    transition: background 0.2s ease;
}
.fc .fc-daygrid-day:hover {
    background: var(--m3-sys-light-surface-container);
}
.fc .fc-daygrid-day-number {
    padding: 0.5rem;
    font-weight: 500;
    color: #1f1f1f;
    text-decoration: none;
}

/* Día actual */
.fc .fc-day-today {
    background: var(--m3-sys-light-primary-container) !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--m3-sys-light-primary);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem;
}

/* Eventos (píldoras M3) */
#calendar .fc-daygrid-event {
    border-radius: 100px;
    padding: 3px 10px;
    font-weight: 500;
    border: none;
    margin: 2px 3px;
    font-size: 0.75rem;
    transition: all 0.18s ease;
    cursor: pointer;
}
#calendar .fc-daygrid-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Colores de eventos M3 */
.fc-daygrid-event.bg-hoy {
    background: var(--m3-sys-light-primary);
    color: white;
}
.fc-daygrid-event.bg-proxima {
    background: var(--m3-sys-light-secondary-container);
    color: var(--m3-sys-light-on-secondary-container);
}
.fc-daygrid-event.bg-realizada {
    background: var(--grey-200);
    color: var(--grey-700);
}

/* Más eventos */
.fc .fc-daygrid-more-link {
    color: var(--m3-sys-light-primary);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--m3-sys-light-primary-container);
}
.fc .fc-daygrid-more-link:hover {
    background: var(--m3-sys-light-secondary-container);
    text-decoration: none;
}

/* Vista de lista (móvil) */
.fc .fc-list-event:hover td {
    background-color: var(--m3-sys-light-surface-container);
    cursor: pointer;
}
.fc .fc-list-event-title a {
    color: #1f1f1f;
    text-decoration: none;
    font-weight: 500;
}
.fc .fc-list-day-cushion {
    background: var(--m3-sys-light-primary-container) !important;
    padding: 0.5rem 1rem;
}
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    color: var(--m3-sys-light-on-primary-container);
    font-weight: 700;
}
.fc-list-event.bg-hoy td       { border-left: 4px solid var(--m3-sys-light-primary) !important; }
.fc-list-event.bg-proxima td   { border-left: 4px solid #5e9b87 !important; }
.fc-list-event.bg-realizada td { border-left: 4px solid var(--grey-500) !important; }

/* Tooltip M3 */
.fc-event-tooltip .tooltip-inner {
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    max-width: 260px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    white-space: normal;
    text-align: left;
}
.fc-event-tooltip .tooltip-arrow::before {
    border-top-color: #1e293b;
}

/* Calendario responsive */
@media (max-width: 767px) {
    #calendar .fc-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .fc .fc-col-header-cell { padding: 0.4rem 0; font-size: 0.72rem; }
    #calendar .fc-daygrid-event { font-size: 0.7rem; padding: 2px 6px; }
}

/* Calendario en modo oscuro */
[data-bs-theme="dark"] #calendar .fc-toolbar-title,
body.dark-mode #calendar .fc-toolbar-title {
    color: #e3e3e3;
}
[data-bs-theme="dark"] .fc .fc-button,
body.dark-mode .fc .fc-button {
    background: var(--m3-sys-light-surface-container) !important;
    color: #e3e3e3 !important;
    border-color: var(--m3-sys-light-outline-variant) !important;
}
[data-bs-theme="dark"] .fc .fc-daygrid-day-number,
body.dark-mode .fc .fc-daygrid-day-number {
    color: #e3e3e3 !important;
}
[data-bs-theme="dark"] .fc-daygrid-event.bg-realizada,
body.dark-mode .fc-daygrid-event.bg-realizada {
    background: var(--grey-200) !important;
    color: #c4c7c5 !important;
}
[data-bs-theme="dark"] .fc .fc-list-event-title a,
body.dark-mode .fc .fc-list-event-title a {
    color: #e3e3e3 !important;
}


/* ════════════════ 25. PÁGINA ACCESO DENEGADO ════════════════ */
.acceso-wrap-m3 {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.acceso-icon-lock {
    font-size: 72px;
    color: var(--red-600);
}

.btn-m3-outlined {
    background-color: transparent;
    color: var(--m3-sys-light-primary);
    border: 1px solid var(--m3-sys-light-outline-variant);
    border-radius: 100px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-m3-outlined:hover {
    background-color: var(--m3-sys-light-surface-container);
    color: var(--m3-sys-light-primary);
    border-color: var(--m3-sys-light-primary);
}

.btn-m3-danger {
    background-color: var(--red-600);
    color: white;
    border-radius: 100px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-m3-danger:hover {
    background-color: var(--red-700);
    color: white;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.35);
}

/* ════════════════ 26. FIX: ÍCONOS DE NAVEGACIÓN FULLCALENDAR ════════════════ */

/* Resetear el ícono nativo y usar Material Symbols */
.fc .fc-button .fc-icon {
    font-family: 'Material Symbols Rounded' !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-wrap: normal !important;
    white-space: nowrap !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Botón anterior */
.fc .fc-prev-button .fc-icon {
    content: none !important;
}
.fc .fc-prev-button .fc-icon::before {
    content: "chevron_left" !important;
}

/* Botón siguiente */
.fc .fc-next-button .fc-icon {
    content: none !important;
}
.fc .fc-next-button .fc-icon::before {
    content: "chevron_right" !important;
}

/* Ocultar el ícono original SVG/font de FullCalendar */
.fc .fc-icon-chevron-left::before,
.fc .fc-icon-chevron-right::before {
    content: none !important;
}