/**
 * Nombre: portada-colores-dinamicos.css
 * Proposito: Sobrescribir colores hardcodeados de la portada con variables CSS dinamicas
 * Autor: BtoAldas
 * Fecha: 2026-01-11
 * 
 * IMPORTANTE: Este archivo DEBE cargarse DESPUES de style.css y onepage-widgets.css
 * para poder sobrescribir los colores hardcodeados con las variables dinamicas.
 * 
 * Las variables --color-principal, --color-secundario-1, --color-secundario-2 
 * son cargadas desde la base de datos via colores-institucionales.php
 */

/* ========================================
   SECCION 1: Boton Ingresar (fxt-btn-fill)
   ======================================== */
.fxt-btn-fill {
    /* Color de fondo del boton - antes era #00aaa7 */
    background-color: var(--color-secundario-1, #00AAA7);
    /* Borde del boton - antes era #0b213e */
    border-color: var(--color-principal, #384152);
}

.fxt-btn-fill.fxt-btn-layout1:hover {
    /* Color hover - antes era #bad00c */
    background-color: var(--color-secundario-2, #BAD00C);
    border-color: var(--color-secundario-2, #BAD00C);
}

/* ========================================
   SECCION 2: Titulos de secciones
   ======================================== */
.section-title {
    /* Titulo principal de cada seccion */
    color: var(--color-principal, #384152);
}

/* Linea decorativa debajo del titulo */
.section-title::after {
    /* Gradiente con colores institucionales */
    background: linear-gradient(90deg, 
        var(--color-secundario-1, #00AAA7), 
        var(--color-secundario-2, #BAD00C)
    );
}

/* ========================================
   SECCION 3: Iconos y elementos destacados
   ======================================== */
.widget-icon {
    /* Icono principal de cada widget */
    color: var(--color-secundario-1, #00AAA7);
}

.widget-title {
    color: var(--color-principal, #384152);
}

.feature-icon {
    color: var(--color-secundario-1, #00AAA7);
}

.feature-content h3 {
    color: var(--color-principal, #384152);
}

/* ========================================
   SECCION 4: FAQ (Preguntas frecuentes)
   ======================================== */
.faq-question h3 {
    color: var(--color-principal, #384152);
}

.faq-toggle {
    color: var(--color-secundario-1, #00AAA7);
}

/* ========================================
   SECCION 5: Tarjetas de contacto
   ======================================== */
.contact-icon {
    color: var(--color-secundario-1, #00AAA7);
}

.contact-card h3 {
    color: var(--color-principal, #384152);
}

.contact-card a {
    color: var(--color-secundario-1, #00AAA7);
}

.contact-card a:hover {
    color: var(--color-secundario-2, #BAD00C);
}

/* ========================================
   SECCION 6: Timeline (linea de tiempo)
   ======================================== */
.timeline::before {
    /* Linea vertical del timeline */
    background: linear-gradient(to bottom, 
        var(--color-secundario-1, #00AAA7), 
        var(--color-secundario-2, #BAD00C)
    );
}

.timeline-content::before {
    /* Triangulo apuntador */
    border-right-color: var(--color-secundario-1, #00AAA7);
}

.timeline-item::before {
    /* Circulo del timeline */
    background: var(--color-secundario-1, #00AAA7);
    border-color: var(--color-secundario-1, #00AAA7);
}

.timeline-year {
    background: var(--color-principal, #384152);
    color: var(--color-texto-claro, #FFFFFF);
}

/* ========================================
   SECCION 7: Estadisticas y KPIs
   ======================================== */
.stat-number {
    color: var(--color-secundario-1, #00AAA7);
}

.stat-label {
    color: var(--color-principal, #384152);
}

/* Borde decorativo en tarjetas de estadisticas */
.stat-card {
    border-top: 4px solid var(--color-secundario-1, #00AAA7);
}

.stat-card:hover {
    border-top-color: var(--color-secundario-2, #BAD00C);
}

/* ========================================
   SECCION 8: Botones y enlaces generales
   ======================================== */
.btn-primary-custom {
    background: var(--color-secundario-1, #00AAA7);
    border-color: var(--color-secundario-1, #00AAA7);
    color: var(--color-texto-claro, #FFFFFF);
}

.btn-primary-custom:hover {
    background: var(--color-principal, #384152);
    border-color: var(--color-principal, #384152);
}

.btn-secondary-custom {
    background: var(--color-secundario-2, #BAD00C);
    border-color: var(--color-secundario-2, #BAD00C);
    color: var(--color-texto-oscuro, #1E1E1E);
}

.btn-secondary-custom:hover {
    background: var(--color-secundario-1, #00AAA7);
    border-color: var(--color-secundario-1, #00AAA7);
    color: var(--color-texto-claro, #FFFFFF);
}

/* ========================================
   SECCION 9: Encabezados y textos destacados
   ======================================== */
.highlight-text {
    color: var(--color-secundario-1, #00AAA7);
}

.highlight-box {
    background: var(--color-principal, #384152);
    color: var(--color-texto-claro, #FFFFFF);
}

/* ========================================
   SECCION 10: Navegacion interna (anclas)
   ======================================== */
.nav-anchor {
    color: var(--color-secundario-1, #00AAA7);
}

.nav-anchor:hover,
.nav-anchor.active {
    color: var(--color-principal, #384152);
}

/* ========================================
   SECCION 11: Cards de caracteristicas
   ======================================== */
.widget-card {
    border-top: 3px solid transparent;
    transition: all 0.3s ease;
}

.widget-card:hover {
    border-top-color: var(--color-secundario-1, #00AAA7);
}

/* Feature items */
.feature-item:hover {
    background: linear-gradient(135deg, 
        rgba(var(--rgb-secundario-1, 0, 170, 167), 0.05), 
        rgba(var(--rgb-secundario-2, 186, 208, 12), 0.05)
    );
    border-left: 3px solid var(--color-secundario-1, #00AAA7);
}

/* ========================================
   SECCION 12: Footer de portada
   ======================================== */
.footer-portada {
    background: var(--color-principal, #384152);
    color: var(--color-texto-claro, #FFFFFF);
}

.footer-portada a {
    color: var(--color-secundario-2, #BAD00C);
}

.footer-portada a:hover {
    color: var(--color-secundario-1, #00AAA7);
}

/* ========================================
   SECCION 13: Iconos sobre fondos oscuros
   Regla critica del AGENTS.md
   ======================================== */
.bg-principal .material-icons,
.bg-turquesa .material-icons,
[style*="background:"] .material-icons,
.fxt-btn-fill .material-icons,
.btn-primary-custom .material-icons {
    color: var(--color-texto-claro, #FFFFFF) !important;
}

/* ========================================
   SECCION 14: Scrollbar personalizada
   ======================================== */
.onepage-container::-webkit-scrollbar-thumb {
    background: var(--color-secundario-1, #00AAA7);
}

.onepage-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-principal, #384152);
}