.bg-navy {
    background-color: var(--navy-banner);
}

.btn-navy {
    background-color: var(--navy-banner);
    color: var(--color-white) !important;
    border-color: var(--navy-banner) !important;
}
.btn-outline-navy {
    color: var(--navy-banner) !important;
    border-color: var(--navy-banner) !important;
}
}
.text-navy {
    color: var(--navy-banner) !important;
}

.btn-futurohoy {
    background: #376EB5;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 0.6rem;
    padding: 0.7rem 2.1rem;
    font-size: 1.04rem;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 6px rgba(55, 110, 181, 0.07);
    cursor: pointer;
    transition: background 0.18s, color 0.15s, box-shadow 0.18s;
    outline: none;
    margin: 0.25rem;
    display: inline-block;
}

    .btn-futurohoy:hover,
    .btn-futurohoy:focus {
        background: #23428D;
        color: #fff;
        box-shadow: 0 2px 10px rgba(55, 110, 181, 0.14);
    }

    .btn-futurohoy:active {
        background: #183368;
    }


.btn-futurohoy, .btn-clear {
    background: #376EB5;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 0.6rem;
    padding: 0.7rem 2.1rem;
    font-size: 1.04rem;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 6px rgba(55, 110, 181, 0.07);
    cursor: pointer;
    transition: background 0.18s, color 0.15s, box-shadow 0.18s;
    outline: none;
    margin: 0.25rem 0;
    display: inline-block;
}

    .btn-futurohoy:hover,
    .btn-clear:hover,
    .btn-futurohoy:focus {
        background: #23428D;
        color: #fff;
        box-shadow: 0 2px 10px rgba(55, 110, 181, 0.14);
    }


@media (max-width: 900px) {
    .productos-layout {
        flex-direction: column;
        gap: 0.6rem;
    }

    .sidebar-filtros {
        max-width: unset;
        width: 100%;
        margin-bottom: 1.2rem;
        position: static;
        top: unset;
    }

    .productos-listado {
        width: 100%;
    }
}


.btn-account-header {
    /* PROPIEDADES BASE DE BOOTSTRAP (.btn) */
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    /* PROPIEDADES DE ESTILO (.btn-outline-brand) */
    background: #fff;
    color: #003c84 !important;
    border: 1.5px solid #003c84;
    border-radius: 0.6rem;
    padding: 0.46em 1.15em;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    /* 🔑 SOLUCIÓN: QUITA LA LÍNEA DEL HIPERVÍNCULO (<a>) */
    text-decoration: none;
    /* Adaptación de display para centrar el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    /* PROPIEDAD DE ESPACIADO (.me-2) */
    margin-right: 0.5rem !important;
}

    /* ESTILO HOVER */
    .btn-account-header:hover {
        background: #003c84;
        color: #fff !important;
        text-decoration: none; /* Asegura que no aparezca al pasar el ratón */
    }

    /* AJUSTE FOCUS */
    .btn-account-header:focus,
    .btn-account-header:active:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(35, 66, 141, 0.5);
    }




.btn-user-panel-header {
    /* PROPIEDADES BASE DE BOOTSTRAP (.btn) */
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    /* PROPIEDADES DE ESTILO (.btn-outline-brand) */
    background: #fff;
    color: #23428D !important;
    border: 1.5px solid #23428D;
    border-radius: 0.6rem;
    padding: 0.46em 1.15em;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    /* 🔑 SOLUCIÓN: QUITA LA LÍNEA DEL HIPERVÍNCULO (<a>) */
    text-decoration: none;
    /* Adaptación de display para centrar el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    /* PROPIEDAD DE ESPACIADO (.me-2) */
    margin-right: 0.5rem !important;
}

    /* ESTILO HOVER */
    .btn-user-panel-header:hover {
        background: #23428D;
        color: #fff !important;
        text-decoration: none; /* Asegura que no aparezca al pasar el ratón */
    }

    /* AJUSTE FOCUS */
    .btn-user-panel-header:focus,
    .btn-user-panel-header:active:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(35, 66, 141, 0.5);
    }




    .btn-brand {
    background-color: #23428D;
    color: #fff !important;
    border-radius: 0.7rem;
    font-weight: 600;
    font-size: 1.07rem;
    padding: 0.8em 1.2em;
    transition: background 0.14s;
    border: none;
}

    .btn-brand:disabled, .btn-brand[disabled] {
        background: #b7bedc;
        color: #fff;
        cursor: not-allowed;
    }

    .btn-brand:hover:enabled {
        background: #456ae3;
    }

/* === Utilidades === */
.text-brand {
    color: #23428D !important;
}



.cart-btn {
    font-size: 1.2rem;
    padding: 0.60em 1.1em;
    border-radius: 0.6rem;
}


/* Duplicar las reglas de .btn-cart-header para CSS plano */
.btn-cart-header-logout {
    /* Estilos de .btn-cart-header (que incluye .btn-brand, .cart-btn, .me-2, etc.) */
    background-color: var(--navy-banner);
    color: #fff !important;
    border: none;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0.60em 1.1em;
    border-radius: 0.6rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    transition: background 0.14s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Margen Derecho (de .me-2) */
    margin-right: 0.5rem !important;
}

.btn-cart-header-login {
    /* Estilos de .btn-cart-header (que incluye .btn-brand, .cart-btn, .me-2, etc.) */
    background-color: #23428D;
    color: #fff !important;
    border: none;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0.60em 1.1em;
    border-radius: 0.6rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    transition: background 0.14s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Margen Derecho (de .me-2) */
}

    /* Estados */
    .btn-cart-header-logout:hover:enabled,
    .btn-cart-header-login:hover:enabled {
        background-color: var(--navy-light);
    }
/* ... y el resto de los estados si son necesarios ... */






/*FAVORITE*/


.favorite-btn-card {
    background: none;
    border: 1.5px solid #23428D;
    color: #23428D;
    cursor: pointer;
    transition: color 0.2s, background 0.15s;
}


.favorite-btn {
    background: none;
    border: 1.5px solid #23428D;
    color: #23428D;
    cursor: pointer;
    transition: color 0.2s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    padding: 0.60em 1.1em;
    border-radius: 0.6rem;
}

    .favorite-btn:hover {
        color: #F46D6D;
        background: #f9e4e4;
    }

    .favorite-btn:hover i {
    color: #F46D6D !important;
    transition: color 0.13s;
}

    .favorite-btn .fa-heart {
        transition: color 0.15s;
    }

    .favorite-btn .fa-heart:hover {
            color: #F46D6D !important;
    }


.btn-favorite-header 
{
    background: none;
    border: 1.5px solid #23428D;
    color: #23428D;
    cursor: pointer;
    transition: color 0.2s, background 0.15s;
}

    .btn-favorite-header:hover {
        color: #F46D6D;
        background: #f9e4e4;
    }

        .btn-favorite-header:hover i {
            color: #F46D6D !important;
            transition: color 0.13s;
        }

    .btn-favorite-header .fa-heart {
        transition: color 0.15s;
    }

        .btn-favorite-header .fa-heart:hover {
            color: #F46D6D !important;
        }






.btn-user-panel-header {
    /* Base de botón */
    display: inline-flex; /* d-flex */
    align-items: center; /* align-items-center */
    justify-content: center;
    position: relative; /* position-relative */
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    font-weight: 600;
    /* Apariencia (de .btn-brand y .cart-btn) */
    background-color: #23428D;
    color: #fff !important;
    border: none;
    border-radius: 0.6rem;
    font-size: 1.2rem; /* de .cart-btn */
    padding: 0.60em 1.1em;
    transition: background 0.14s;
}

    .btn-user-panel-header:disabled,
    .btn-user-panel-header[disabled] {
        background: #b7bedc;
        color: #fff;
        cursor: not-allowed;
    }

    .btn-user-panel-header:hover:enabled {
        background: #456ae3;
    }

    .btn-user-panel-header:focus,
    .btn-user-panel-header:active:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(35, 66, 141, 0.5);
    }








.btn-cat-mobile {
    /* Oculto por defecto */
    /* === Estilos base del botón (btn + btn-brand) === */
    align-items: center; /* d-flex + align-items-center */
    justify-content: center;
    position: relative; /* position-relative */
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    font-weight: 600;
    background-color: #003c81;
    color: #fff !important;
    border: none;
    border-radius: 0.7rem;
    font-size: 1.07rem;
    padding: 0.8em 1.2em;
    transition: background 0.14s;
}

.btn-cat-mobile-panel {
    /* Oculto por defecto */
    display: none !important;
 
}

    /* Estado deshabilitado */
    .btn-cat-mobile:disabled,
    .btn-cat-mobile[disabled] {
        background: #b7bedc;
        color: #fff;
        cursor: not-allowed;
    }

    /* Hover */
.btn-cat-mobile:hover:enabled {
    background: #1a2b48;
}

    /* Focus */
    .btn-cat-mobile:focus,
    .btn-cat-mobile:active:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(35, 66, 141, 0.5);
    }

/* Mostrar solo en móvil */
@media (max-width: 768px) {
    .btn-cat-mobile-panel {
        display: flex !important;

    }
    .btn-cat-mobile-logo {
        /* Oculto por defecto */
        display: none !important;
    }
}

 
/* Propiedades base para quitar el subrayado y mantener el color */
.btn-email-header,
.btn-wsp-header,
.btn-email-header a,
.btn-wsp-header a {
    /* Quita la línea de subrayado */
    text-decoration: none;
    /* Esto asegura que el texto dentro del enlace mantenga el color oscuro */
    color: inherit;
}

/* Propiedades combinadas de .contact-item y la negrita */
.btn-email-header,
.btn-wsp-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-dark); /* Color de texto del ítem */
    font-size: var(--font-size-base);
    padding: var(--spacing-1);
    /* **Nueva propiedad para la negrita** */
    font-weight: bold;
}

    /* Propiedades para el contenido del texto (span) */
    .btn-email-header span,
    .btn-wsp-header span {
        vertical-align: middle;
    }

    /* Propiedades para los iconos (i, svg) */
    .btn-email-header i,
    .btn-email-header svg,
    .btn-wsp-header i,
    .btn-wsp-header svg {
        width: 22px;
        height: 22px;
        color: var(--color-dark); /* Color del icono */
        font-size: 22px;
    }

        /* Propiedades específicas para el path dentro del SVG */
        .btn-email-header svg path,
        .btn-wsp-header svg path {
            stroke: var(--color-dark);
        }



.btn-submit-cart-drawer {
    /* Base del botón */
    display: inline-flex; /* flex para centrar contenido */
    align-items: center;
    justify-content: center;
    width: 100%; /* w-100 */
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    font-weight: 600;
    /* Apariencia del btn-brand */
    background-color: var(--navy-banner);
    color: #fff !important;
    border: none;
    border-radius: 0.7rem;
    font-size: 1.07rem;
    padding: 0.8em 1.2em;
    transition: background 0.14s;
}

    /* Hover */
    .btn-submit-cart-drawer:hover:enabled {
        background-color: var(--navy-light);
    }

    /* Focus */
    .btn-submit-cart-drawer:focus,
    .btn-submit-cart-drawer:active:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(35, 66, 141, 0.5);
    }

    /* Deshabilitado */
    .btn-submit-cart-drawer:disabled,
    .btn-submit-cart-drawer[disabled] {
        background: #b7bedc;
        color: #fff;
        cursor: not-allowed;
    }

.form-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}


.btn-submit-quote,
.btn-submit-applicant,
.btn-submit-req-pass,
.btn-submit-reset-pass,
.btn-submit-customer-quote {
    width: 100%;
    padding: var(--spacing-2);
    background-color: var(--navy-banner);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

    /* Hover */
    .btn-submit-quote:hover,
    .btn-submit-applicant:hover,
    .btn-submit-req-pass:hover,
    .btn-submit-reset-pass:hover,
    .btn-submit-customer-quote:hover:not(:disabled) {
        background-color: var(--navy-light);
    }

    /* Disabled */
    .btn-submit-quote:disabled,
    .btn-submit-applicant:disabled,
    .btn-submit-req-pass:disabled,
    .btn-submit-reset-pass:disabled,
    .btn-submit-customer-quote:disabled {
        background-color: var(--color-secondary);
        cursor: not-allowed;
    }

@media (min-width: 768px) {
    .btn-submit-quote,
    .btn-submit-applicant,
    .btn-submit-req-pass,
    .btn-submit-reset-pass,
    .btn-submit-customer-quote {
        max-width: 250px;
        align-self: flex-start;
    }
}


.btn-thanks{
    background-color: var(--navy-banner);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
    .btn-thanks:hover:not(:disabled) {
        background-color: var(--navy-light);
    }
    .btn-thanks:disabled {
        background-color: var(--color-secondary);
        cursor: not-allowed;
    }