/* Fuentes */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.ttf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.ttf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Italic.ttf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.ttf') format('opentype');
}

/* Variables */
:root {
    --font: 'Lato', 'Montserrat', sans-serif;
    --fontColor: #666;
    --principal: rgb(151,14,72);
    --principalClaro: rgb(194,153,92);
    --negro: rgb(0,0,5);
    --SecundarioClaro: rgb(239,237,234);
    --SecundarioOscuro: rgb(226,222,215);
    --blanco: white;
    --grisOscuro: #AAA;
    --girsClaro: #EEE;

    --verde: #66BB5A;
    --naranja: #FFA725;
    --amarillo: #FFCA27;
    --rojo: #FF7043;

    /* Sobrescribir colores */
    --bs-primary: var(--principal) !important;
    --bs-primary-rgb: 151, 14, 72 !important;

    --bs-info: var(--fontColor) !important;
    --bs-info-rgb: 102, 102, 102 !important;

    --bs-secondary: var(--principalClaro) !important;
    --bs-secondary-rgb: 194, 153, 92 !important;
    
}
/* PRIMARY */
    .text-primary {
        color: var(--principal) !important;
    }

    .bg-primary {
        background-color: var(--principal) !important;
    }

    .btn-primary {
        background-color: var(--principal) !important;
        border-color: var(--principal) !important;
        color: white !important;
    }

    .btn-primary:hover {
        background-color: var(--principalClaro) !important;
        border-color: var(--principalClaro) !important;
    }

    .btn-outline-primary {
        background-color: transparent !important;
        color: var(--principal) !important;
        border-color: var(--principal) !important;
    }

    .btn-outline-primary:hover {
        background-color: var(--principal) !important;
        border-color: var(--principal) !important;
        color: var(--blanco) !important;
    }

    /* 3. Ajuste para el Navbar si usas navbar-light */
    .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .nav-link:hover {
        color: var(--principal) !important;
    }

/* INFO */

    /* Texto */
    .text-info {
        color: var(--fontColor) !important;
    }

    /* Fondos */
    .bg-info {
        background-color: var(--fontColor) !important;
    }

    /* Botones Info (Estructura completa para estados hover/focus) */
    .btn-info {
        background-color: var(--fontColor) !important;
        border-color: var(--fontColor) !important;
        color: white !important; /* Texto blanco sobre el dorado */
    }

    .btn-info:hover, .btn-info:focus, .btn-info:active {
        background-color: var(--principalClaro) !important; /* Un tono un poco más oscuro para el hover */
        border-color: var(--principalClaro) !important;
        color: white !important;
    }

    /* Botones Outline Info (Los que usas en el modal de correo) */
    .btn-outline-info {
        color: var(--fontColor) !important;
        border-color: var(--fontColor) !important;
    }

    .btn-outline-info:hover {
        background-color: var(--principalClaro) !important;
        border-color: var(--principalClaro) !important;
        color: white !important;
    }

    /* Badges (Etiquetas pequeñas) */
    .badge.bg-info {
        background-color: var(--fontColor) !important;
        color: white !important;
    }

/* SECONDARY */

    /* Texto */
    .text-secondary {
        color: var(--principalClaro) !important;
    }

    /* Fondos */
    .bg-secondary {
        background-color: var(--principalClaro) !important;
    }

    /* Botones Info (Estructura completa para estados hover/focus) */
    .btn-secondary {
        background-color: var(--principalClaro) !important;
        border-color: var(--principalClaro) !important;
        color: white !important; /* Texto blanco sobre el gris */
    }

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
        background-color: rgb(150, 150, 150) !important; /* Un tono un poco más oscuro para el hover */
        border-color: rgb(150, 150, 150) !important;
        color: white !important;
    }

    /* Botones Outline Info (Los que usas en el modal de correo) */
    .btn-outline-secondary {
        color: var(--principalClaro) !important;
        border-color: var(--principalClaro) !important;
    }

    .btn-outline-secondary:hover {
        background-color: var(--principalClaro) !important;
        border-color: var(--principalClaro) !important;
        color: var(--blanco) !important;
    }

    /* Badges (Etiquetas pequeñas) */
    .badge.bg-secondary {
        background-color: var(--principalClaro) !important;
        color: white !important;
    }

    /* estilos general */

    .patron{
    background-size: auto;
    background-image: url('../img/patron_150px150.png') !important;
    background-repeat: repeat;
}

    .alert-info {
        background-color: var(--principalClaro) !important;
        color: white !important;
        border-color: var(--principalClaro) !important;
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--principalClaro) !important;
        color: white !important;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem rgba(194, 153, 92, 0.5) !important;
    }