/* =============================================
   Variables de Tema y Animaciones Globales
   ============================================= */

/* --- ESTADO INICIAL Y FINAL DE LOS TEMAS --- */
:root {
    /* Tema Oscuro (Inicial) */
    --primary-color-dark: #00E5FF;
    --dark-bg-dark: #0d1117;
    --card-bg-dark: rgba(22, 27, 34, 0.85);
    --light-text-dark: #e0e0e0;
    --border-color-dark: rgba(0, 229, 255, 0.3);
    
    /* Tema Claro (Final) */
    --primary-color-light: #007bff;
    --light-bg-light: #f8f9fa;
    --card-bg-light: #ffffff;
    --dark-text-light: #343a40;
    --border-color-light: #dee2e6;
}

/* --- KEYFRAMES PARA LA TRANSICIÓN (Esto no cambia) --- */
@keyframes theme-bg-transition {
    0%, 60% { background-color: var(--dark-bg-dark); }
    100% { background-color: var(--light-bg-light); }
}
@keyframes theme-text-transition {
    0%, 60% { color: var(--light-text-dark); }
    100% { color: var(--dark-text-light); }
}
@keyframes theme-primary-transition {
    0%, 60% { color: var(--primary-color-dark); text-shadow: 0 0 8px var(--primary-color-dark); }
    100% { color: var(--primary-color-light); text-shadow: none; }
}
@keyframes theme-card-transition {
    0%, 60% {
        background-color: var(--card-bg-dark);
        border-color: var(--border-color-dark);
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
    }
    100% {
        background-color: var(--card-bg-light);
        border-color: var(--border-color-light);
        border-top-color: var(--primary-color-light);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.08);
    }
}
@keyframes theme-navbar-transition {
    0%, 60% { background-color: rgba(13, 17, 23, 0.8); }
    100% { background-color: rgba(255, 255, 255, 0.85); }
}
@keyframes theme-table-header-transition {
    0%, 60% { background-color: rgba(0, 229, 255, 0.1); }
    100% { background-color: #f8f9fa; }
}
@keyframes border-color-anim {
    0%, 60% { background-color: var(--primary-color-dark); box-shadow: 0 0 10px var(--primary-color-dark); }
    100% { background-color: var(--primary-color-light); box-shadow: none; }
}

/* =============================================
   Estilos Base y Tipografía
   ============================================= */
body {
    font-family: 'Montserrat', sans-serif;
    padding-top: 65px;
    background-color: var(--light-bg-light);
    color: var(--dark-text-light);
}

/* =============================================
   Barra de Navegación (Navbar)
   ============================================= */
.navbar {
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.85);
}
.navbar-brand img { height: 60px; }
@media (max-width: 991.98px) { .navbar-brand img { height: 50px; } }

.nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--dark-text-light);
}
.navbar .navbar-nav .nav-link.active {
    color: var(--primary-color-light);
}
.nav-link:hover {
    color: var(--primary-color-light);
}

.dropdown-menu {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background-color: var(--card-bg-light);
    border-color: var(--border-color-light);
}
.dropdown-item { color: var(--dark-text-light); }
@media (min-width: 992px) { .dropdown:hover .dropdown-menu { display: block; margin-top: 0; } }

/* =============================================
   Sección Principal (Hero)
   ============================================= */
.hero {
    position: relative; height: 85vh; color: white; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
}
#hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; }
.hero-content { position: relative; z-index: 2; padding: 20px; text-align: center; }
.hero h1, .hero h2 { text-shadow: 0 0 15px var(--primary-color-dark), 2px 2px 5px rgba(0,0,0,0.8); }
.hero h1 { font-size: 2.8rem; font-weight: 700; }
.hero h2 { font-size: 2rem; font-weight: 600; }

/* =============================================
   Estilos de Componentes (Títulos, Tarjetas)
   ============================================= */
.section-title, .info-card .card-title { font-weight: 700; color: var(--primary-color-light); }
.section-title { text-align: center; margin-bottom: 40px; position: relative; padding-bottom: 15px; }
.section-title::after {
    content: ''; position: absolute; width: 80px; height: 3px;
    bottom: 0; left: 50%; transform: translateX(-50%);
    background-color: var(--primary-color-light);
}

.main-section { background-color: var(--light-bg-light); }

.info-card {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
    height: 100%;
    background-color: var(--card-bg-light);
    border: 1px solid var(--border-color-light);
    border-top: 3px solid var(--primary-color-light);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.08);
}

.info-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
.info-card .card-body { padding: 25px; }
.info-card .card-title { font-weight: 600; }

.info-card .list-group-item, #normativa .list-group-item {
    border-bottom: 1px solid var(--border-color-light);
    background-color: transparent !important;
}
#normativa .info-card {
    border-top: 1px solid var(--border-color-light);
}

.info-card a { text-decoration: none; font-weight: 500; color: var(--dark-text-light); }
.info-card a:hover { color: var(--primary-color-light); }

/* =============================================
   Tablas Personalizadas
   ============================================= */
.custom-table-container, .pdf-container {
    border-radius: 12px; overflow: hidden;
    background-color: var(--card-bg-light);
    border: 1px solid var(--border-color-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.custom-table { width: 100%; margin-bottom: 2rem; }
.custom-table:last-of-type { margin-bottom: 0; }
.custom-table th, .custom-table td { 
    padding: 12px 15px; 
    text-align: left; 
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color-light);
    background-color: transparent !important;
}
.custom-table thead th {
    font-weight: 600; background-color: #f8f9fa; color: var(--primary-color-light);
}
.custom-table tbody tr:hover { background-color: rgba(0, 123, 255, 0.05); }
.custom-table a { font-weight: bold; color: var(--primary-color-light); }
.custom-table a:hover { text-decoration: underline; }

/* =============================================
   Vista de Detalle
   ============================================= */
#table-view-container h3 { 
    padding: 2rem 0 1rem 0; /* Aumentado el padding superior para que no quede pegado a la barra sticky */
    margin-bottom: 0;
    color: var(--primary-color-light);
}
#table-view-container h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-text-light);
    padding: 1.5rem 0 0.5rem 0;
    margin: 0;
    border-bottom: none;
}

#detail-view-container { display: none; padding-top: 3rem; padding-bottom: 3rem; }

/* CAMBIO: Contenedor para las barras de opciones "pegajosas" */
#sticky-nav-container {
    position: -webkit-sticky; /* Para compatibilidad */
    position: sticky;
    top: 65px; /* Altura de la barra de navegación principal */
    z-index: 1020;
    background-color: var(--light-bg-light);
    padding-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin: 0 -12px; /* Compensa el padding del contenedor de Bootstrap */
    padding: 0 12px 1.5rem 12px;
}

#detail-options {
    padding: 1rem; border-radius: 8px; margin-bottom: 1rem; text-align: center;
    background-color: var(--card-bg-light); border: 1px solid var(--border-color-light);
}
.detail-option-btn {
    text-decoration: none; padding: 0.5rem 1rem; margin: 0 0.5rem; border-radius: 5px;
    transition: all 0.3s ease; border: 1px solid transparent; color: var(--dark-text-light);
}
.detail-option-btn:hover { color: var(--primary-color-light); background-color: rgba(0, 123, 255, 0.1); }
.detail-option-btn.active {
    color: #ffffff; background-color: var(--primary-color-light); font-weight: bold;
    box-shadow: 0 0 10px var(--primary-color-light);
}

/* CAMBIO: Barra de años con scroll horizontal */
/* CAMBIO: Barra de años con scroll horizontal */
#year-options {
    display: flex;
    flex-wrap: nowrap; /* Evita que los botones salten a la siguiente línea */
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    padding: 0.75rem 0.5rem; /* Añadido un poco de padding lateral */
    justify-content: flex-start; /* Alinea los botones al inicio */
}

/* Estilos opcionales para una barra de scroll más delgada y moderna */
#year-options::-webkit-scrollbar {
    height: 8px; /* Altura de la barra de scroll */
}

#year-options::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del riel */
    border-radius: 10px;
}

#year-options::-webkit-scrollbar-thumb {
    background: #ccc; /* Color de la barra */
    border-radius: 10px;
}

#year-options::-webkit-scrollbar-thumb:hover {
    background: #999; /* Color de la barra al pasar el cursor */
}

.year-option-btn {
    flex-shrink: 0; /* Evita que los botones se encojan */
    background-color: #ffffff;
    border: 1px solid var(--primary-color-light) !important;
    color: var(--primary-color-light) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin: 0 5px;
    white-space: nowrap; /* Evita que el texto del botón se parta */
}
.year-option-btn:hover {
    background-color: var(--primary-color-light);
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}
/* Fin de Navegación por Años */

#pdf-viewer { width: 100%; height: 80vh; border: none; }

#back-to-main-btn {
    background-color: transparent; border: 1px solid var(--primary-color-light);
    color: var(--primary-color-light); transition: all 0.3s ease;
}
#back-to-main-btn:hover {
    background-color: var(--primary-color-light); color: var(--card-bg-light);
    box-shadow: 0 0 10px var(--primary-color-light);
}

/* =============================================
   Lógica de la Animación Inicial
   ============================================= */
.initial-animation { animation: theme-bg-transition 2.5s forwards, theme-text-transition 2.5s forwards; }
.initial-animation .navbar { animation: theme-navbar-transition 2.5s forwards; }
.initial-animation .nav-link { animation: theme-text-transition 2.5s forwards; }
.initial-animation .nav-link.active { animation: theme-primary-transition 2.5s forwards; }
.initial-animation .dropdown-menu { animation: theme-card-transition 2.5s forwards; }
.initial-animation .dropdown-item { animation: theme-text-transition 2.5s forwards; }
.initial-animation .section-title, .initial-animation .info-card .card-title { animation: theme-primary-transition 2.5s forwards; }
.initial-animation .section-title::after { animation: border-color-anim 2.5s forwards; }
.initial-animation .main-section { animation: theme-bg-transition 2.5s forwards; }
.initial-animation .info-card { animation: theme-card-transition 2.5s forwards; }
.initial-animation .info-card .list-group-item, .initial-animation .custom-table th, .initial-animation .custom-table td, .initial-animation #normativa .list-group-item {
     border-color: transparent; animation: theme-card-transition 2.5s forwards;
}
.initial-animation .info-card a { animation: theme-text-transition 2.5s forwards; }
.initial-animation .custom-table-container, .initial-animation .pdf-container { animation: theme-card-transition 2.5s forwards; }
.initial-animation .custom-table thead th { animation: theme-table-header-transition 2.5s forwards, theme-primary-transition 2.5s forwards; }
.initial-animation .custom-table a { animation: theme-primary-transition 2.5s forwards; }
.initial-animation #table-view-container h3 { animation: theme-primary-transition 2.5s forwards; }
.initial-animation #table-view-container h4 { animation: theme-text-transition 2.5s forwards; }
.initial-animation #detail-options { animation: theme-card-transition 2.5s forwards; }
.initial-animation .detail-option-btn { animation: theme-text-transition 2.5s forwards; }
.initial-animation #back-to-main-btn { animation: theme-primary-transition 2.5s forwards; }

/* =============================================
   Pie de Página (Footer)
   ============================================= 
footer {
    background-color: #0d1117; color: #e0e0e0; padding: 40px 0 20px;
    border-top: 1px solid var(--border-color-dark);
}
footer h5 { color: var(--primary-color-dark); }
footer a, footer li, footer p { color: #adb5bd; }
footer a:hover { color: white; }
.copyright { border-top: 1px solid #333; }*/

/* =============================================
   Pie de Página (Footer)
   ============================================= */
.footer-dark {
    background-color: #212529; /* Fondo oscuro permanente */
    color: #f8f9fa;
    padding: 40px 0 20px;
    border-top: 1px solid #343a40;
}

.footer-dark h5 {
    color: #0dcaf0; /* Color cian para los títulos */
}

.footer-dark p,
.footer-dark li {
    color: #adb5bd;
}

.footer-dark ul {
    list-style: none;
    padding-left: 0;
}

.footer-dark a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-dark a:hover {
    color: #f8f9fa;
}

.footer-dark .copyright {
    border-top: 1px solid #343a40;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    text-align: center;
}

.footer-dark .copyright p {
    color: #6c757d;
}