/**
 * Nombre: login-colores-dinamicos.css
 * Proposito: Sobrescribir colores hardcodeados en style-login.css con variables dinamicas
 * Autor: BtoAldas
 * Fecha: 2026-01-11
 * 
 * IMPORTANTE: Este archivo DEBE cargarse DESPUES de style-login.css
 * para poder sobrescribir los colores hardcodeados con las variables dinamicas.
 * 
 * Los colores originales hardcodeados son:
 * - #00AAA7 (turquesa) -> var(--color-secundario-1)
 * - #BAD00C (verde lima) -> var(--color-secundario-2)
 * - #384152 (azul oscuro) -> var(--color-principal)
 */

/* ========================================
   SECCION 1: Boton de login (fxt-btn-fill)
   Lineas 13200-13209 de style-login.css
   CORRECCION: Usar contraste dinamico para texto e iconos
   ======================================== */
.fxt-template-layout29 .fxt-btn-fill {
    /* Fondo: secundario-1 (azul slate en paleta gubernamental) */
    background-color: var(--color-secundario-1, #2d4a6f);
    /* Texto: contraste dinamico sobre secundario-1 */
    color: var(--color-texto-sobre-secundario-1, #FFFFFF) !important;
}

.fxt-template-layout29 .fxt-btn-fill:hover {
    /* Hover: color principal (azul navy) */
    background-color: var(--color-principal, #1e3a5f);
    /* Texto: contraste dinamico sobre principal */
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

.fxt-template-layout29 .fxt-btn-fill:active {
    /* Active: principal hover */
    background-color: var(--color-principal-hover, #2d4a6f);
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

/* ========================================
   SECCION 2: Page switcher tabs
   Lineas 13048-13072 de style-login.css
   CORRECCION: Usar contraste dinamico para texto
   ======================================== */
.fxt-template-layout29 .fxt-page-switcher .switcher-text1 {
    /* Fondo inactivo - secundario-2 (gris neutro en paleta gubernamental) */
    background-color: var(--color-secundario-2, #4a5568);
    /* Texto: contraste dinamico sobre secundario-2 */
    color: var(--color-texto-sobre-secundario-2, #FFFFFF) !important;
}

.fxt-template-layout29 .fxt-page-switcher .switcher-text1.active {
    /* Fondo activo - secundario-1 (azul slate en paleta gubernamental) */
    background-color: var(--color-secundario-1, #2d4a6f);
    /* Texto: contraste dinamico sobre secundario-1 */
    color: var(--color-texto-sobre-secundario-1, #FFFFFF) !important;
}

.fxt-template-layout29 .fxt-page-switcher .switcher-text1:hover {
    /* Hover: color principal (azul navy) */
    background-color: var(--color-principal, #1e3a5f);
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

/* ========================================
   SECCION 3: Textos y enlaces
   ======================================== */
.fxt-template-layout29 .switcher-text2 a {
    color: var(--color-secundario-1-seguro, #00AAA7);
}

.fxt-template-layout29 .switcher-text2 a:hover {
    color: var(--color-secundario-2-seguro, #BAD00C);
}

/* ========================================
   SECCION 4: Borde inferior de inputs
   ======================================== */
.fxt-template-layout29 .fxt-form .form-control:focus {
    border-bottom-color: var(--color-secundario-1-seguro, #00AAA7);
}

/* ========================================
   SECCION 5: Checkbox personalizado
   ======================================== */
.fxt-template-layout29 .fxt-checkbox-box input:checked + .checkmark {
    background-color: var(--color-secundario-1, #00AAA7);
    border-color: var(--color-secundario-1-seguro, #00AAA7);
}

/* ========================================
   SECCION 6: Links de acciones
   ======================================== */
.fxt-template-layout29 .fxt-form a {
    color: var(--color-secundario-1-seguro, #00AAA7);
}

.fxt-template-layout29 .fxt-form a:hover {
    color: var(--color-secundario-2-seguro, #BAD00C);
}

/* ========================================
   SECCION 7: Titulos y encabezados
   ======================================== */
.fxt-template-layout29 .fxt-form h2 {
    color: var(--color-principal-seguro, #384152);
}

/* ========================================
   SECCION 8: Barra mobile page switcher
   CORRECCION: Usar contraste dinamico para texto
   ======================================== */
.fxt-mobile-page-switcher a {
    /* Estado normal: secundario-2 (gris neutro) */
    background: var(--color-secundario-2, #4a5568);
    border-color: var(--color-secundario-2-seguro, #4a5568);
    color: var(--color-texto-sobre-secundario-2, #FFFFFF) !important;
}

.fxt-mobile-page-switcher a.active {
    /* Estado activo: secundario-1 (azul slate) */
    background: var(--color-secundario-1, #2d4a6f);
    border-color: var(--color-secundario-1-seguro, #2d4a6f);
    color: var(--color-texto-sobre-secundario-1, #FFFFFF) !important;
}

.fxt-mobile-page-switcher a:hover {
    /* Hover: principal (azul navy) */
    background: var(--color-principal, #1e3a5f);
    border-color: var(--color-principal-seguro, #1e3a5f);
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

.fxt-mobile-page-switcher a.secundary {
    /* Enlace secundario: diferente tono */
    background: var(--color-principal, #1e3a5f);
    border-color: var(--color-principal-seguro, #1e3a5f);
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

.fxt-mobile-page-switcher a.secundary:hover {
    background: var(--color-secundario-1, #2d4a6f);
    border-color: var(--color-secundario-1-seguro, #2d4a6f);
    color: var(--color-texto-sobre-secundario-1, #FFFFFF) !important;
}