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

.btn-orange{
    background-color: var(--color-orange);
    color:white;
}
    .btn-orange:hover {
        background-color: var(--color-orange-hover);
        color: white;
    }
.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-clear:hover{
        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: #1f533e;
    border: 1.5px solid #1f533e;
    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: linear-gradient(180deg, #2a6a50 0%, #1f533e 100%);
        color: #ffffff;
        text-decoration: none; /* Asegura que no aparezca al pasar el ratón */
        border: 1.5px solid #ffffff;
    }

    /* 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: linear-gradient(180deg, #1f4d3a 0%, #163c2d 100%);
    color: #163c2d !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: linear-gradient(180deg, #1f4d3a 0%, #163c2d 100%);
    color: #f9fafb;
    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-user-panel-header,
.btn-cart-header-login {
    /* Estilos de .btn-cart-header (que incluye .btn-brand, .cart-btn, .me-2, etc.) */
    background: linear-gradient(180deg, #1f4d3a 0%, #163c2d 100%);
    color: #f9fafb;
    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-user-panel-header,
    .btn-cart-header-logout:hover:enabled,
    .btn-cart-header-login:hover:enabled {
        background: linear-gradient(180deg, #2a6a50 0%, #1f533e 100%);
        color: #ffffff;
    }
/* ... 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 #163c2d;
    color: #163c2d;
    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 {
        color: #163c2d !important;
        transition: color 0.15s;
    }

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


.favorite-btn-card .p-btn-fav .fas .fa-heart {
    color: #163c2d;
}

.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: linear-gradient(180deg, #2a6a50 0%, #1f533e 100%);
    }

    .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: linear-gradient(180deg, #1f4d3a 0%, #163c2d 100%);
    color: #f9fafb;
    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: linear-gradient(180deg, #2a6a50 0%, #1f533e 100%) !important;
        color: #ffffff;
    }

    /* 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,
.contact-item,
.contact-item a,
.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 */
    .contact-item,
    .btn-email-header,
    .btn-wsp-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-1);
        font-weight: var(--font-weight-bold);
        color: var(--color-white); /* El centro de la letra será blanco */

        font-size: var(--font-size-base);
        padding: var(--spacing-1);
        /* **Nueva propiedad para la negrita** */
        font-weight: bold;
    }

        .btn-email-header:hover,
        .btn-wsp-header:hover {
            color: yellow;
            font-weight: var(--font-weight-bold);
            color: var(--color-white); /* El centro de la letra será blanco */
            /* Efecto Neón: Núcleo blanco + Resplandor amarillo */
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px rgba(255, 255, 0, 0.8), /* Amarillo vibrante cerca */
            0 0 40px rgba(255, 255, 0, 0.4), /* Amarillo sutil lejos */
            0 0 60px rgba(255, 255, 0, 0.2); /* Aura final */
        }

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

    /* Propiedades para los iconos (i, svg) */
            .contact-item i,
            .contact-item svg,
            .btn-email-header i,
            .btn-email-header svg,
            .btn-wsp-header i,
            .btn-wsp-header svg {
                width: 22px;
                height: 22px;
                color: var(--color-white); /* 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: linear-gradient(180deg, #1f4d3a 0%, #163c2d 100%);
    color: #f9fafb;
    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: var(--color-green-hide);
        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(--color-green);
    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(--color-green-hover);
    }

    /* 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{
    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;
    }