/*
 * Cabecera fluida entre 992 y 1440 px.
 *
 * Problema que resuelve: los seis elementos del menu principal necesitan
 * 833 px (633 px de texto mas cinco huecos de 40 px) y el hueco disponible
 * es de 790 px a 1345 px, 645 px a 1200 px y 497 px a 992 px, asi que
 * "Contacto" y "Blog" caian a una segunda fila. La barra superior tenia el
 * mismo problema: el telefono y los iconos sociales no encogian y el icono
 * de YouTube se descolgaba.
 *
 * Se carga con una etiqueta <link> propia en head.tpl, despues del CSS del
 * tema, para no depender del combinado de PrestaShop (CCC).
 */

/* Barra superior: telefono e iconos sociales encogen con la pantalla. */
/*
 * Telefono e iconos de la barra superior: una sola regla, sin media query.
 *
 * Antes estaba partido en dos tramos (992-1439 y 769-991) y fuera de ellos
 * mandaba el tamano del tema. Se han visto capturas con el telefono
 * renderizado enorme y partido en varias lineas, que no he podido
 * reproducir a ningun ancho; sea cual sea la causa (extension del
 * navegador, zoom, CSS a medio cargar), con esta formula el tamano queda
 * acotado entre 9,5 y 14 px SIEMPRE, y el nowrap impide que se parta.
 *
 * `1vw` da 14 px a partir de 1400 px de ancho, que es el tamano original
 * del tema, y va bajando hasta el suelo de 9,5 px en pantallas pequenas.
 */
.box-top-header .text-header h2 {
  font-size: clamp(9.5px, 1vw, 14px) !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}
.box-top-header .text-header h2 img {
  width: clamp(18px, 1.35vw + 4px, 30px) !important;
  height: auto !important;
}

/* Menu principal: primero se cierra el hueco entre elementos y, ya en la
   parte baja del tramo, baja la letra de 12 a 11 px. Nunca se parte. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .menu-float .leo-megamenu .navbar-nav > li > a,
  .leo-megamenu .navbar-nav > li > a {
    font-size: clamp(11px, 1vw - 1px, 12px);
    white-space: nowrap;
  }
  .menu-float .leo-megamenu .navbar-nav > li + .nav-item {
    margin-left: clamp(6px, 13.5vw - 157px, 40px);
  }
}

/* Por debajo de 1200 px ni con letra de 9 px caben los seis elementos en
   una fila, asi que se adelanta el menu de hamburguesa que el tema ya trae
   (hasta ahora aparecia a partir de 991 px). El :not() deja que el propio
   Bootstrap lo abra al pulsarlo. */
@media (max-width: 1199px) {
  .leo-top-menu.collapse.navbar-toggleable-md:not(.show):not(.in) {
    display: none !important;
  }
  .navbar-toggler.hidden-lg-up {
    display: block !important;
  }
}

/*
 * Buscador: encoge progresivamente y acaba en lupa.
 *
 * Ojo con la cascada: hay un <style> incrustado dentro de la propia columna
 * de la cabecera (bloque ApHtml) que fija el buscador abierto a 230 px y
 * oculta la lupa con !important a partir de 992 px. Ese bloque va despues
 * de esta hoja, asi que aqui se le gana por especificidad anteponiendo
 * .header-top a sus mismos selectores.
 */

/*
 * De 1440 a 1200 px la caja baja de 230 a 150 px de forma continua.
 * La anchura va sobre el bloque del buscador, no sobre la columna: el
 * carrito comparte esa columna, asi que estrecharla dejaba el buscador en
 * 71 px. Y hace falta flex/min-width ademas del width porque es un item
 * flexible y, sin fijarlo, se seguia comprimiendo.
 */
@media (min-width: 1200px) and (max-width: 1439px) {
  .header-top .box-bottom-header .right-bottom-header {
    flex: 0 0 auto !important;
    max-width: none !important;
  }
  .header-top .box-bottom-header .right-bottom-header #leo_search_block_top {
    flex: 0 0 auto !important;
    width: clamp(150px, 33.33vw - 250px, 230px) !important;
    min-width: clamp(150px, 33.33vw - 250px, 230px) !important;
    max-width: clamp(150px, 33.33vw - 250px, 230px) !important;
  }
  .header-top .box-bottom-header .right-bottom-header #leo_search_block_top #leosearchtopbox {
    width: 100% !important;
    max-width: none !important;
  }
}

/*
 * Por debajo de 1200 px queda solo la lupa y el formulario se despliega.
 *
 * El formulario NO se oculta con display:none: el tema lo abre con
 * jQuery.slideDown() y añade la clase `open` en el callback, asi que un
 * display:none !important congelaria la animacion y nunca llegaria a
 * abrirse. Se oculta con visibility/opacity, que no estorba al slide.
 */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-top .box-bottom-header .right-bottom-header {
    flex: 0 0 auto !important;
    max-width: none !important;
  }
  .header-top .box-bottom-header .right-bottom-header #leo_search_block_top {
    width: auto !important;
    max-width: none !important;
    position: relative !important;
  }
  .header-top .box-bottom-header .right-bottom-header #leo_search_block_top .icon-open-search {
    display: block !important;
  }
  .header-top .box-bottom-header .right-bottom-header #leo_search_block_top #leosearchtopbox {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1002;
    display: block !important;
    width: min(320px, 100vw - 70px) !important;
    max-width: calc(100vw - 70px) !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .header-top .box-bottom-header .right-bottom-header #leo_search_block_top.open #leosearchtopbox {
    visibility: visible;
    opacity: 1;
  }
}

/*
 * Cabecera de la app movil: clara en vez de azul oscuro.
 *
 * El logotipo de la tienda es granate y azul marino sobre fondo transparente,
 * asi que sobre el azul oscuro de la cabecera apenas se distinguia. Se pasa a
 * un degradado claro, que ademas enlaza con el banner de debajo, y los iconos
 * pasan a azul marino para mantener el contraste.
 *
 * Van los dos identificadores porque el modulo usa uno u otro segun la pagina:
 * `app-mobile-header` en la portada y `pme-mobile-header` en el resto.
 */
#app-mobile-header,
#pme-mobile-header {
  background: linear-gradient(135deg, #ffffff 0%, #f3f8fd 55%, #e7f0fa 100%) !important;
  box-shadow: 0 1px 8px rgba(10, 26, 51, .14) !important;
  border-bottom: 1px solid rgba(15, 42, 82, .10) !important;
}

#app-mobile-header .amh-icon-btn,
#app-mobile-header .pme-icon-btn,
#pme-mobile-header .amh-icon-btn,
#pme-mobile-header .pme-icon-btn {
  background: rgba(15, 42, 82, .07) !important;
  color: #0f2a52 !important;
}

#app-mobile-header .amh-logo,
#app-mobile-header .pme-logo,
#pme-mobile-header .amh-logo,
#pme-mobile-header .pme-logo {
  color: #0f2a52 !important;
}

/*
 * Red de seguridad: ocultar la cabecera original del tema en movil siempre
 * que la app movil este activa.
 *
 * Cada plantilla trae su propio CSS que la oculta (app-mobile.css para la
 * portada, app-mobile-category.css, app-mobile-product.css) y
 * app-mobile-shared.css cubre el resto, pero ese ultimo se desactiva a si
 * mismo en las paginas con clase `page-index`, `page-category` o
 * `page-product`. El hueco: una vista que lleve una de esas clases pero NO
 * use su plantilla, como la pagina de "producto no disponible", que sale con
 * `body.page-product` sin cargar app-mobile-product.css. Ahi se colaba la
 * cabecera de escritorio entera: logotipo gigante y telefono en rojo.
 *
 * Esta regla no depende de la plantilla, solo de que el modulo haya marcado
 * la pagina con `pme-app`, asi que tapa cualquier vista que se escape. No se
 * toca el pie: el chat de panteraai vive dentro y un display:none en un
 * ancestro apagaria tambien sus descendientes con position:fixed.
 */
@media (max-width: 768px) {
  html.pme-mobile-enabled body.pme-app #header,
  html.pme-mobile-enabled body.pme-app .header-nav {
    display: none !important;
  }
}

/*
 * Franja de tablet, 769 a 991 px: tierra de nadie.
 *
 * Por debajo de 769 px manda la app movil (su CSS es `max-width: 768px`) y
 * por encima de 991 px manda la cabecera de escritorio. En medio no actuaba
 * ninguno de los dos: la app movil no se activa, asi que salia la cabecera
 * del tema a tamano completo — 341 px de alto, el telefono a 20 px partido
 * en dos lineas y el logotipo a 400 px de ancho.
 *
 * Se compacta a una sola fila: logotipo, menu de hamburguesa, buscador y
 * carrito. Queda en unos 147 px.
 */
@media (min-width: 769px) and (max-width: 991px) {
  .header-top .box-bottom-header {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .header-top .box-bottom-header .left-bottom-header {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 190px !important;
  }
  .header-top .box-bottom-header .left-bottom-header img {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
  }
  .header-top .box-bottom-header .center-bottom-header {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .header-top .box-bottom-header .right-bottom-header {
    flex: 1 1 auto !important;
    max-width: none !important;
  }
}

/*
 * Boton flotante de WhatsApp (modulo corewhatsapp) visible tambien en movil.
 *
 * Hay un <style> incrustado dentro del pie que oculta en movil, con
 * !important, `div.fixed:has(img[src*="corewhatsapp"])` y cualquier enlace
 * a whatsapp://, wa.me o api.whatsapp.com. Su comentario explica el motivo:
 * evitar que el icono suelto duplicase el boton de WhatsApp que ya hay
 * dentro del chat. La propietaria pide ahora que se vea, asi que se hace la
 * excepcion solo para este boton, con mas especificidad que aquella regla.
 *
 * Se deja intacto el resto: los demas accesos directos de WhatsApp siguen
 * ocultos en movil como estaban.
 */
@media (max-width: 768px) {
  /* Se usa el id y no la clase a proposito: la regla que hay que ganar es
     `body.page-index.app-mobile-ready a[href*="wa.me"]`, con tres clases.
     Un solo id pesa mas que cualquier numero de clases, asi que con
     `#pantera-wa` basta y no hay que encadenar selectores fragiles. */
  #pantera-wa,
  #pantera-wa a[href*="wa.me"] {
    display: block !important;
  }
}

/*
 * Resto de accesos a WhatsApp, visibles tambien en movil.
 *
 * Las mismas dos reglas que ocultaban el boton flotante tapaban tambien:
 *
 *  - la zona de clic de WhatsApp del banner (`.spb__zona--wa`), que ocupa
 *    la mitad izquierda del banner. Con `display:none` tocar ahi no hacia
 *    nada en el movil;
 *  - las dos entradas de WhatsApp de dentro del chat de panteraai (el
 *    enlace de la pestana y la tarjeta `panteraai-grip__card--wa`).
 *
 * Se restauran con su `display` original: `block` para la zona del banner y
 * `flex` para las del chat. De nuevo por id, que pesa mas que las tres
 * clases de `body.page-index.app-mobile-ready a[href*="wa.me"]`.
 *
 * Queda fuera a proposito el banner promocional de WhatsApp de la portada
 * de escritorio: su fila entera ya esta oculta en movil.
 */
@media (max-width: 768px) {
  #app-mobile-shell .spb__zona--wa {
    display: block !important;
  }
  #panteraai-widget a[href*="wa.me"],
  #panteraai-widget a[href*="api.whatsapp.com"],
  #panteraai-widget .panteraai-grip__card--wa {
    display: flex !important;
  }
}