/* =============================================================
   IMEX El Zorro - ajustes del diseno 2027 (se carga despues de Comun/css/design-2027.css)
   El diseno comun trae la pildora, el pie, los listados, el carrito, etc. Aqui solo va lo propio
   de IMEX: su paleta (azul #009DE0 y amarillo #FFDD20 de acento) y el aviso de "solo profesionales"
   de la franja superior. --colorCorporativo lo define personalizacion.css.
   ============================================================= */
:root {
    --h27-ink: #0f2533;
    --h27-muted: #5a6d79;
    --h27-line: rgba(15, 37, 51, .10);
    --h27-tint: #e8f5fc;
    --h27-shadow: 0 10px 30px rgba(0, 70, 110, .12);
    /* El diseno comun usa este tono en degradados y hovers; sin definirlo cae a un verde azulado (#1c7881) */
    --colorCorporativoOscuro: #0077ab;
    --imex-acento: #ffdd20;
}

body {
    background: #f3f7fa;
}

/* ---------- Aviso de la franja superior ----------
   Ocupa el hueco de las redes de la base. En la cabecera anterior iba en amarillo sobre la franja azul; sobre el
   cristal claro el amarillo no se lee, asi que va en tinta con el icono en azul de marca. */
.h27-topbar-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 600;
    color: var(--h27-ink);
}

.h27-topbar-aviso i {
    color: var(--colorCorporativo);
}

.h27-topbar-aviso span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En movil la franja solo deja sitio para Mi cuenta / idioma (como las redes de la base, que se ocultan);
   el aviso pasa a una linea propia encima, en letra pequena */
@media (max-width: 991px) {
    .h27-topbar {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .h27-topbar-aviso {
        flex: 0 0 100%;
        justify-content: center;
        font-size: 11px;
    }

    .h27-topbar-aviso span {
        white-space: normal;
        text-align: center;
    }

    /* El comun limita la franja a 56 px (una linea). Con el aviso encima hacen falta dos filas; si no, Mi cuenta se
       montaba sobre el boton del menu. Al plegarse con el scroll (h27-compact) sigue cerrandose a 0. */
    html:not(.h27-compact) .h27-topbar {
        max-height: 120px;
    }
}

/* ---------- Menu de la pildora ----------
   style.css separa cada entrada con 50 px de margen. IMEX tiene seis entradas (una mas que la base) y con ese margen
   el menu ocupaba ~1000 px a 1440: la pildora se salia de la pantalla y el telefono y el carrito quedaban fuera. */
.h27-menu .main-menu nav > ul > li {
    margin-right: 2px;
}

/* ---------- Carrusel principal de la portada ----------
   style.css coloca las flechas de todos los .ht-slick-slider 58 px por encima (pensado para los carruseles de
   articulos, que llevan titulo). En el carrusel principal quedaban detras de la cabecera fija; van a los lados. */
.hero-slider-wrapper .ht-slick-slider .slick-arrow {
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255, 255, 255, .85);
}

.hero-slider-wrapper .ht-slick-slider .slick-arrow.slick-prev {
    left: 14px;
    right: auto;
}

.hero-slider-wrapper .ht-slick-slider .slick-arrow.slick-next {
    right: 14px;
}

/* Panel de marca del login: style.css lo termina en un azul fijo (#0d3b5c); aqui en el azul de IMEX hacia la tinta */
.login-panel-brand {
    background: linear-gradient(145deg, var(--colorCorporativo) 0%, var(--h27-ink) 100%);
}

/* Pie: tarjeta en azul marino (el comun la trae en verde azulado). El logo del pie es oscuro, asi que va sobre una placa clara */
.footer-area {
    background: linear-gradient(160deg, #0f2533 0%, #091a25 100%);
}

.footer-area .footer-logo img {
    background: #fff;
    padding: 8px 14px;
    box-sizing: content-box;
    border-radius: 12px;
}

/* ---------- Carrito (desplegable de la cabecera y resumen de Mi carrito) ----------
   modern-cart.css termina el recuadro Total en un azul fijo (#2196f3) y las sombras traian el tinte del color por
   defecto (#299BA5); aqui en el azul de IMEX hacia su tono oscuro. */
.summary-total {
    background: linear-gradient(90deg, var(--colorCorporativo) 0%, var(--colorCorporativoOscuro) 100%);
    box-shadow: 0 2px 8px rgba(0, 119, 171, 0.18);
}

.modern-cart-counter {
    box-shadow: 0 2px 8px rgba(0, 119, 171, 0.15);
}

/* Boton "Filtros" del movil: style.css lo fija en gris #6c757d para todos los clientes */
.btn-filtros-mobile {
    background: var(--h27-ink);
    border-color: var(--h27-ink);
}

.btn-filtros-mobile:hover {
    background: var(--colorCorporativoOscuro);
    border-color: var(--colorCorporativoOscuro);
}