/* =============================================================================
   MENÚ PRINCIPAL — nxr_megamenu · hoja propia del tema
   =============================================================================

   POR QUÉ ESTO NO VIVE EN custom.css, que es donde iría por costumbre:
   PrestaShop sirve `assets/css/custom.css` SIN versión en la URL y con
   `Cache-Control: max-age=604800`. Un visitante que hubiera pasado por la web
   en los últimos 7 días se habría quedado con la copia vieja del fichero y
   habría visto el menú NUEVO con el CSS VIEJO: sin pastilla, con el panel a
   ancho completo y con la cabecera 20 px más alta por el sprite en el flujo.
   Funcionaría, pero se vería roto, y durante una semana.

   Un fichero NUEVO no lo tiene cacheado nadie. Se registra en
   `config/theme.yml` con `priority: 1100`, detrás del 1000 de custom.css, así
   que sigue ganando a lo que allí se declare.

   La regla que queda: al tocar el menú se toca ESTE fichero. Si algún día hace
   falta cambiar custom.css y que el cambio se vea el mismo día, hay que contar
   con esos 7 días de caché.
   ========================================================================== */

/* --- 1. Puente de tokens: --nxr-* del módulo → paleta Europa 3G ------------ */
/* El módulo nombra sus colores en abstracto (`--nxr-accent`, `--nxr-ink`…) para
   no casarse con ninguna marca. Aquí se les da valor UNA vez, apuntando a los
   `--europa-*` que declara el `:root` de `custom.css`: si mañana cambia un color
   de la marca, se cambia allí y el menú va detrás sin tocar este fichero. */
:root {
  --nxr-menubar-bg: transparent;      /* la franja va sobre el blanco del header */
  --nxr-menubar-fg: #484848;          /* el mismo gris de texto que ya usaba el menú */
  --nxr-ink: #484848;
  --nxr-ink-soft: #6b7280;
  --nxr-accent: var(--europa-primary);        /* el azul manda en hover y foco */
  --nxr-accent-dark: var(--europa-primary);
  --nxr-accent-contrast: var(--europa-white);
  --nxr-surface: var(--europa-white);
  --nxr-surface-alt: #f6f7f9;
  --nxr-line: #e6e6e6;                /* el mismo borde que ya lleva #header */
  --nxr-radius: 10px;
  /* Cápsula REAL, no un radio a ojo. Con los 20px de antes el dibujo salía bien
     de casualidad: la pastilla medía 40 px de alto y 20 es justo la mitad. Al
     adelgazarla a 30 px el radio se satura solo en 15 y sigue cerrando, pero a
     la siguiente vez que alguien toque el `padding` deja de cuadrar sin avisar.
     Con 999px el borde es semicircular mida lo que mida. */
  --nxr-radius-pill: 999px;
  --nxr-shadow-lg: 0 12px 32px rgb(23 18 25 / 12%);
}

/* --- 2. La franja ---------------------------------------------------------- */
/* Pegada al blanco del header, sin fondo propio ni borde: el borde inferior ya
   lo pone `#header`. Se conserva el alto de 45 px que tenía la franja de
   iqitmegamenu para que la cabecera no cambie de altura al hacer el cambio. */
.e3g-mm .nxr-mm-bar {
  /* Centrada, como estaba: el `float: none` + `text-align: center` de
     iqitmegamenu se traduce aquí a un `justify-content`. */
  justify-content: center;
  /* NUNCA en dos líneas: pase lo que pase con los anchos, las pestañas se
     quedan en una fila. */
  flex-wrap: nowrap;
  gap: 2px;
  min-height: 45px;
}

/* La pastilla es FINA: 30 px de alto, no los 45 de la franja.
   Antes ocupaba la franja ENTERA y la barra parecía una fila de botones
   pegados compitiendo con la cabecera. Ahora la pastilla flota centrada y el
   resto es aire.

   ⚠️ EL `padding` SOLO NO ADELGAZA NADA. La pastilla medía 45 px porque el
   módulo estira: `.nxr-mm-bar` es flex con `align-items: stretch` y
   `.nxr-mm-tab-link` lleva `height: 100%`, así que el <a> se comía el alto del
   <li> midiera lo que midiera el relleno. Bajar el padding sin las dos reglas
   de abajo mueve el texto dentro de la pastilla y deja la pastilla igual de
   gorda — parece que el cambio "no se aplica" y no es la caché.

   Se adelgaza el <a>, NO el <li>: el <li> sigue estirado a 45 px porque es él
   quien ancla el panel (`top: 100%` en el punto 5). Si se encogiera el <li>, el
   panel subiría 7,5 px y se metería dentro de la franja. Los 7,5 px que quedan
   entre la pastilla y el panel son <li>, o sea zona hoverable: el `mouseleave`
   del punto 5 sigue estando a salvo. */
.e3g-mm .nxr-mm-tab {
  display: flex;
  align-items: center;
}

.e3g-mm .nxr-mm-tab-link {
  display: inline-flex;
  align-items: center;
  height: auto;         /* deshace el `height: 100%` del módulo (ver arriba) */
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--nxr-radius-pill);
}

/* Hover / foco / abierta: pastilla AZUL con el texto en blanco.
   No es una invención: es exactamente el gesto que ya hacía el CTA «Reservar
   reparación» al pasar el ratón (amarillo → azul), así que la franja entera
   responde igual. Y el amarillo se queda para el CTA y sólo para él: usarlo
   también en el hover pondría dos pastillas amarillas en la misma fila y el
   CTA dejaría de distinguirse. */
.e3g-mm .nxr-mm-tab-link:hover,
.e3g-mm .nxr-mm-tab-link:focus-visible,
.e3g-mm .nxr-mm-tab.is-open .nxr-mm-tab-link {
  background: var(--europa-primary);
  color: var(--europa-white);
}

/* Con la pastilla, el subrayado que trae el módulo sobra: se solapan. */
.e3g-mm .nxr-mm-tab-link::after {
  display: none;
}

/* --- 3. CTA «Reservar reparación» ----------------------------------------- */
/* La pastilla amarilla que ya tenía la pestaña 35 de iqitmegamenu, con el mismo
   par de colores y el mismo hover. La clase la pone `megamenu.tpl` del tema
   mirando la URL, no el rótulo: el rótulo lo cambia cualquiera desde el back
   office y la pastilla se caería sin avisar. */
.e3g-mm .nxr-mm-tab-link.e3g-mm-tab--cta {
  background: var(--europa-accent);
  color: var(--europa-dark);
}

.e3g-mm .nxr-mm-tab-link.e3g-mm-tab--cta:hover,
.e3g-mm .nxr-mm-tab-link.e3g-mm-tab--cta:focus-visible {
  background: var(--europa-primary);
  color: var(--europa-white);
}

/* --- 4. Iconos y flecha de las pestañas ----------------------------------- */
/* El marcado lo pone la copia de `megamenu.tpl` en
   themes/warehousechild/modules/nxr_megamenu/; el sprite, su `_iconos.tpl`. */

/* ⚠️ EL SPRITE VA FUERA DEL FLUJO, o la franja crece ~24 px.
   Es un `<svg width="0" height="0">`, pero un SVG sigue siendo un elemento
   INLINE: aunque no ocupe ancho ni alto, genera una LÍNEA en lo alto de
   `.nxr-mm`. En Madrid eso engordó la cabecera de 48 a 72 px y costó tres
   rondas de diagnóstico, porque el síntoma es de ALTO y lo que se estaba
   midiendo eran anchos.
   NO vale `display: none`: hay motores que dejan de resolver los `<use>` que
   apuntan a un sprite oculto así. */
.e3g-mm-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.e3g-mm-tab-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  /* Apagado sobre el blanco de la franja: el rótulo manda, el icono acompaña. */
  color: var(--nxr-ink-soft);
}

/* Al abrir o pasar el ratón el icono deja el gris y sigue al texto dentro de la
   pastilla: la pestaña entera responde como una pieza. */
.e3g-mm .nxr-mm-tab-link:hover .e3g-mm-tab-icon,
.e3g-mm .nxr-mm-tab-link:focus-visible .e3g-mm-tab-icon,
.e3g-mm .nxr-mm-tab.is-open .e3g-mm-tab-icon,
.e3g-mm .nxr-mm-tab-link.e3g-mm-tab--cta .e3g-mm-tab-icon {
  color: inherit;
}

.e3g-mm-tab-caret {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  margin-left: -0.1rem;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.e3g-mm .nxr-mm-tab.is-open .e3g-mm-tab-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* --- 5. Panel desplegable, anclado a su pestaña --------------------------- */
/* El módulo fuerza `position: static` en la pestaña para que el panel salga a
   ancho completo. Aquí se invierte, y SÓLO para la pestaña: a ancho completo,
   «Consolas» era una losa blanca de 1.370 px con siete enlaces a un lado y la
   pestaña encendida lejísimos, sin relación visual con lo que la abrió.

   ⚠️ SIN HUECO VERTICAL entre pestaña y panel. `megamenu.js` cierra en el
   `mouseleave` del <li> y sin retardo; funciona porque el panel es
   descendiente del <li> y `mouseleave` respeta el árbol DOM, no la caja. Un
   `margin-top` sería zona no-hoverable: al cruzarla el ratón sale del <li> y el
   panel se cierra en la cara del usuario. La separación visual la da la punta,
   que es un pseudo-elemento decorativo, no un hueco real.
   Y no lo detecta ninguna captura: el menú se ve perfecto y no se puede usar. */
@media (min-width: 1200px) {
  .e3g-mm .nxr-mm-tab {
    position: relative;
  }

  .e3g-mm .nxr-mm-panel {
    left: 0;
    right: auto;
    top: 100%;
    width: auto;
    border: 1px solid var(--nxr-line);
    border-radius: var(--nxr-radius);
    overflow: visible;
  }

  /* El módulo mete un `.container` de Bootstrap dentro del panel, dimensionado
     para la banda a ancho completo. En un panel que mide lo que pide su
     contenido hay que neutralizarlo. */
  .e3g-mm .nxr-mm-panel > .container {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 1.25rem;
  }

  /* Punta hacia la pestaña. Pseudo-elemento: no añade marcado y no participa en
     el hover (ver el aviso de arriba). */
  .e3g-mm .nxr-mm-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1.5rem;
    width: 11px;
    height: 11px;
    background: var(--nxr-surface);
    border-left: 1px solid var(--nxr-line);
    border-top: 1px solid var(--nxr-line);
    transform: rotate(45deg);
  }

  /* Ancho por columna, FIJO: el panel es `position: absolute` y si no, su ancho
     sería el que le diera la gana al contenido. 186 px salen de medir: el
     rótulo más largo del menú es «Reparar Microsoft Surface», 165 px a 14 px en
     Figtree. Si algún día entra uno más largo, hay que volver a medir — no se
     parte solo, se sale. */
  .e3g-mm .e3g-mm-panel__body {
    --e3g-mm-col: 186px;
    --e3g-mm-gap: 2rem;
  }

  .e3g-mm .e3g-mm-cols--1 { width: var(--e3g-mm-col); }
  .e3g-mm .e3g-mm-cols--2 { width: calc(2 * var(--e3g-mm-col) + var(--e3g-mm-gap)); }
  .e3g-mm .e3g-mm-cols--3 { width: calc(3 * var(--e3g-mm-col) + 2 * var(--e3g-mm-gap)); }

  /* Se mantiene `column-count` y no se pasa a grid: el flujo por columnas
     (rellenar la primera de arriba abajo y luego la segunda) es el orden de
     lectura que ya tenía el menú. Estos selectores ganan al `column-count: 3`
     que el módulo aplica entre 1200 y 1400 px. */
  .e3g-mm .e3g-mm-cols--1 .nxr-mm-cols { column-count: 1; }
  .e3g-mm .e3g-mm-cols--2 .nxr-mm-cols { column-count: 2; }
  .e3g-mm .e3g-mm-cols--3 .nxr-mm-cols { column-count: 3; }
  .e3g-mm .nxr-mm-cols { column-gap: var(--e3g-mm-gap); }

  /* Cabecera del panel: «Ver todas las tablets →» si la pestaña enlaza a su
     categoría, o el rótulo a secas si es inerte (Móviles). */
  .e3g-mm .e3g-mm-panel__head {
    padding-block: 1rem 0.75rem;
    border-bottom: 1px solid var(--nxr-line);
    margin-bottom: 0.75rem;
  }

  /* `nowrap` para que la cabecera no se parta NUNCA, y con ella el ancho del
     panel pasa a ser el del más ancho de sus dos contenidos: las columnas o la
     frase. El panel es `position: absolute` con `width: auto`, así que se
     ajusta al contenido. La frase más larga —«VER TODOS LOS PORTÁTILES →», 202
     px— cabe de sobra en el panel de 3 columnas (622 px), pero la regla se deja
     puesta: si un día alguien escribe una frase larga en un panel estrecho, el
     panel se ensancha en vez de partirla en dos líneas. */
  .e3g-mm .e3g-mm-panel__all,
  .e3g-mm .e3g-mm-panel__title {
    display: inline-block;
    color: var(--europa-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }

  .e3g-mm .e3g-mm-panel__all:hover,
  .e3g-mm .e3g-mm-panel__all:focus-visible {
    text-decoration: underline;
  }

  /* El módulo da al <ul> `padding: 1.5rem 0`. Con cabecera propia, el de arriba
     sobra. */
  .e3g-mm .nxr-mm-cols {
    padding-block: 0 1.25rem;
  }
}

/* --- 6. Móvil -------------------------------------------------------------- */
/* La hamburguesa que se VE es la de `mobile-header-2.tpl`, no la del módulo: en
   Warehouse el menú se pinta dentro de `#desktop-header`, que se apaga por
   debajo de lg, así que la del módulo nunca llega a verse. `megamenu.js` enlaza
   todas las `.nxr-mm-burger` del documento y las dos abren el mismo panel.

   El offcanvas y el backdrop los mueve el JS a <body> al arrancar, por lo mismo:
   un `position: fixed` dentro de un ancestro con `display: none` no se pinta. */

/* La hamburguesa de la cabecera móvil CONSERVA el botón de Warehouse (icono
   SVG arriba, rótulo «Menú» debajo) y sólo le añade la clase `.nxr-mm-burger`
   para que el JS del módulo la enlace. Se mantiene el botón del tema y no el
   dibujo del módulo porque los otros tres de esa fila —buscar, cuenta,
   carrito— son ése: cambiar sólo uno rompería la fila.

   ⚠️ HAY QUE DESHACER LOS ESTILOS DE HAMBURGUESA DEL MÓDULO, y sobre todo el de
   los <span>. El módulo dibuja las tres barras pintando los `<span>` hijos como
   rectángulos de 22×2 px; aquí el `<span>` es la ETIQUETA del botón, así que
   sin esto la palabra «Menú» desaparece convertida en una rayita. */
#mobile-header .nxr-mm-burger {
  display: block;
  width: 100%;
  height: auto;
  gap: 0;
  color: inherit;
  font: inherit;
}

#mobile-header .nxr-mm-burger span {
  display: inline;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  transform: none;
  opacity: 1;
}

/* El offcanvas, con la piel de la casa. El resto (posición, transición,
   acordeón) ya lo trae el módulo desde los tokens de arriba. */
.nxr-mm-offcanvas {
  font-family: inherit;
}

.nxr-mm-accordion > li > a,
.nxr-mm-acc-toggle {
  font-size: 0.95rem;
}

/* El CTA también en el acordeón: es la misma pastilla, con aire alrededor para
   que no toque los bordes de la lista. */
.nxr-mm-accordion > li > a.e3g-mm-acc-cta {
  display: block;
  /* `width: auto` es OBLIGATORIO, no cosmético: la regla del módulo para las
     entradas del acordeón lleva `width: 100%`, y con los márgenes laterales de
     aquí la pastilla medía 300 + 32 px y se salía del panel por la derecha,
     con barra de scroll horizontal incluida. */
  width: auto;
  margin: 0.6rem 1rem;
  padding: 0.6rem 1rem;
  min-height: 0;
  border-radius: var(--nxr-radius-pill);
  background: var(--europa-accent);
  color: var(--europa-dark);
  text-align: center;
}

.nxr-mm-accordion > li > a.e3g-mm-acc-cta:hover,
.nxr-mm-accordion > li > a.e3g-mm-acc-cta:focus-visible {
  background: var(--europa-primary);
  color: var(--europa-white);
}