/* =============================================================================
   Europa 3G · Páginas de tienda — CAPA BASE
   =============================================================================

   Primitivas compartidas por las ~25 páginas nativas de PrestaShop (ficha,
   listados, carrito, checkout, acceso, «Mi cuenta», CMS y errores). Las hojas
   por familia (`product.css`, `cart.css`, `account.css`…) cargan DESPUÉS de
   ésta y sólo resuelven lo que es propio de su página: si algo se repite en dos
   familias, su sitio es este fichero.

   Se registra en `config/theme.yml` con priority 1100, o sea después de
   `custom.css` (1000), que es quien declara los tokens. Aquí no hay ni un
   hexadecimal: todo sale de `--nxr-*`.

   Igual que `custom.css`, este fichero va FUERA de `@layer`, así que gana a
   cualquier regla de Hummingbird sin necesidad de `!important` ni de selectores
   inflados. La excepción conocida —y no hay forma de saltársela desde CSS— son
   las utilidades de Bootstrap (`.ms-auto`, `.order-2`…), que llevan
   `!important` dentro de `@layer utilities`: para quitarle una utilidad a un
   elemento hay que copiar su plantilla al tema child y cambiar las clases ahí.

   ESCALA DE RADIOS (la decide `NXR_THEME_RADIUS`, hoy 8 px, en NEXIR → Theme):

     --nxr-radius-lg   16 px   superficies con área: paneles, tarjetas, modales,
                               tablas enmarcadas, mapas, cajas de resumen
     --nxr-radius       8 px   controles y piezas de interfaz: botones, campos,
                               selects, alertas, celdas de paginación
     --nxr-radius-sm    4 px   sólo piezas diminutas dentro de otra ya redondeada
                               (chips de un filtro activo, anillo de foco)
     --nxr-radius-pill         badges, contadores y avatares circulares

   La regla práctica: **16 px lo que contiene, 8 px lo contenido**. Un panel de
   16 px con campos de 8 px dentro se lee como una jerarquía; los dos al mismo
   radio, como un error de maquetación.
   ========================================================================== */

/* =============================================================================
   1. NORMALIZACIÓN DE RADIOS DE HUMMINGBIRD
   -----------------------------------------------------------------------------
   El puente a Bootstrap de `custom.css` ya reapunta `--bs-border-radius` y
   compañía a los tokens nexir, y con eso quedan resueltos los ~50 sitios donde
   Hummingbird escribe `border-radius: var(--bs-border-radius)`. Pero hay una
   veintena que trae el valor COMPILADO a mano, y ésos el puente no los alcanza:
   se quedaban en 4 px mientras el resto de la tienda iba a 8.

   La lista de abajo es exactamente esa: se obtuvo grepeando `theme.css` por
   valores literales (`4px`, `.25rem`, `.5rem`), no de memoria. Si se actualiza
   Hummingbird conviene rehacer el grep.

   Fuera quedan a propósito los `border-radius: 50%` (radios, spinners, tiradores
   del slider de precio): son círculos, no esquinas redondeadas, y ahí el 50 %
   es el valor correcto.
   ========================================================================== */

/* Campos de texto y sus adornos. Es la regla que más se nota de todo el
   fichero: son los inputs de TODOS los formularios de la tienda —búsqueda,
   registro, direcciones, cupones, contacto—. */
.form-control,
.form-control-sm,
.form-control-lg,
.input-group-text,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  border-radius: var(--nxr-radius);
}

/* Desplegables (país, provincia, orden del listado, cantidad por página). */
.form-select,
.form-select-sm,
.form-select-lg {
  border-radius: var(--nxr-radius);
}

/* En un `.input-group` Bootstrap recuadra los lados interiores para que las
   piezas encajen; al subir el radio hay que repetirlo, o el grupo vuelve a
   dibujar la esquina de en medio. Pasa en el buscador de la cabecera y en el
   selector de cantidad de la ficha. */
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Grupos de botones (el selector +/− de cantidad). */
.btn-group,
.btn-group-vertical {
  border-radius: var(--nxr-radius);
}

/* La aspa de cerrar de modales y alertas. */
.btn-close {
  border-radius: var(--nxr-radius);
}

/* Slider de precio de la búsqueda por facetas (noUiSlider). La barra es una
   línea de 8 px de alto: con 8 px de radio los extremos quedan redondos, que es
   lo que se busca, y el tirador sigue siendo un círculo por su propia regla. */
.noUi-target,
.noUi-connects {
  border-radius: var(--nxr-radius-pill);
}

.noui-tooltip {
  border-radius: var(--nxr-radius-sm);
}

/* =============================================================================
   2. PANEL — la superficie compartida de las páginas de tienda
   -----------------------------------------------------------------------------
   Hummingbird no tiene una caja de contenido propia: cada página nativa apila
   `<section>` y `<div class="card">` sueltos, y varias no envuelven nada, así
   que el contenido va a pelo sobre el fondo blanco de la página.

   `.e3g-panel` es esa caja, y la usan todas las familias: el resumen del
   carrito, cada paso del checkout, las tarjetas de «Mi cuenta», el formulario
   de acceso, el bloque de una dirección, la caja de un pedido. Al ser una sola
   pieza, las 25 páginas comparten borde, radio, sombra y ritmo interior sin que
   nadie tenga que acordarse de los valores.

   Es deliberadamente PLANA: borde de 1 px y sin sombra en reposo. La tienda es
   blanca sobre blanco y la única jerarquía disponible es la línea; repartir
   sombras por todas partes convierte cualquier página en una pila de cajas
   flotando. La sombra se reserva para lo que de verdad se levanta del plano
   (`.e3g-panel--raised`: el resumen del pedido, el modal).
   ========================================================================== */
.e3g-panel {
  background: var(--nxr-surface);
  border: 1px solid var(--nxr-line);
  border-radius: var(--nxr-radius-lg);
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .e3g-panel {
    padding: 1.5rem;
  }
}

/* Variante que sí se levanta: caja de totales del carrito, resumen del pedido
   en el checkout. Una por página como mucho — si hay dos, ninguna destaca. */
.e3g-panel--raised {
  box-shadow: var(--nxr-shadow);
}

/* Variante en plata para lo secundario (avisos, «¿y ahora qué?», el bloque de
   ayuda al pie de un formulario). Sin borde: el propio fondo ya la separa. */
.e3g-panel--muted {
  background: var(--nxr-surface-alt);
  border-color: transparent;
}

/* Variante de acento, para UNA sola pieza por página (el total a pagar, la
   confirmación de un pedido). El texto va al token de contraste, nunca a
   blanco: con el lima daría 1,18:1. */
.e3g-panel--accent {
  background: var(--nxr-accent);
  border-color: transparent;
  color: var(--nxr-accent-contrast);
}

/* Hummingbird fija `--bs-heading-color` en h1..h6 con más especificidad que el
   `color` del contenedor, así que un encabezado dentro del panel de acento
   saldría gris marengo en vez de tinta. Misma trampa que documentó el port de
   las landings; se resuelve heredando. */
.e3g-panel--accent h1,
.e3g-panel--accent h2,
.e3g-panel--accent h3,
.e3g-panel--accent h4,
.e3g-panel--accent h5,
.e3g-panel--accent h6 {
  color: inherit;
}

/* Cabecera del panel. El separador es opcional: se pone cuando el panel tiene
   cuerpo largo (una tabla, una lista de pedidos) y se omite cuando son cuatro
   líneas, donde la línea sobra. */
.e3g-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.e3g-panel__head--ruled {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--nxr-line);
}

/* Título de panel. No es `.section-title` (1,5 rem): un panel vive dentro de
   una página que ya tiene su H1, y su título es un tercer nivel. */
.e3g-panel__title {
  margin: 0;
  font-family: var(--nxr-font-heading);
  font-size: var(--e3g-text-18);
  font-weight: var(--nxr-heading-weight);
  letter-spacing: var(--nxr-heading-tracking);
  line-height: 1.3;
  color: var(--nxr-ink);
}

.e3g-panel__subtitle {
  margin: 0.15rem 0 0;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
}

/* El último hijo del panel no arrastra el margen inferior del párrafo o de la
   tabla: si no, el panel queda con más aire abajo que arriba. */
.e3g-panel > :last-child {
  margin-bottom: 0;
}

/* Rejilla de paneles. La usan «Mi cuenta» (enlaces), direcciones y el listado
   de pedidos: mismo hueco en las tres, para que las tres se lean como la misma
   sección de la tienda. */
.e3g-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

/* =============================================================================
   3. FORMULARIOS
   -----------------------------------------------------------------------------
   Hummingbird deja los formularios en el Bootstrap de serie: etiqueta gris
   pequeña, campo de 4 px (ya corregido arriba), foco azul y errores en un rojo
   que no es el de la marca. Aquí se les da la voz del tema.
   ========================================================================== */
.form-label,
.form-control-label {
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Un campo es una caja clara con línea de plata; al enfocarlo se marca con el
   acento. El halo va en `--nxr-accent` con alfa porque ahí SÍ funciona como
   fondo/superficie (es un área, no una línea de texto), y el borde sube a
   `--nxr-accent-dark` —tinta— para que el foco se vea también en monocromo y
   para quien no distinga el lima. */
.form-control,
.form-select {
  border-color: var(--nxr-line);
  color: var(--nxr-ink);
  background-color: var(--nxr-surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nxr-accent-dark);
  box-shadow: 0 0 0 3px rgb(var(--nxr-accent-rgb) / 45%);
}

.form-control::placeholder {
  color: var(--nxr-ink-soft);
  opacity: 1;
}

/* Texto de ayuda bajo el campo. */
.form-text,
.form-control-comment {
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
}

/* Casillas y radios: el marcado va en el acento con la palomita en tinta, que
   es el par de la paleta. Bootstrap dibuja la palomita con un SVG blanco
   incrustado en `--bs-form-check-bg-image`; sobre lima blanco da 1,18:1, así
   que se sustituye por uno en tinta. */
.form-check-input:checked {
  background-color: var(--nxr-accent);
  border-color: var(--nxr-accent-dark);
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23212529'/%3e%3c/svg%3e");
}

.form-check-input:focus {
  border-color: var(--nxr-accent-dark);
  box-shadow: 0 0 0 3px rgb(var(--nxr-accent-rgb) / 45%);
}

/* Errores de validación. PrestaShop pinta los suyos en `.js-invalid-feedback`
   y en `<ul class="alert-danger">` dentro del propio grupo del campo; los dos
   caminos acaban aquí. */
.form-control.is-invalid,
.form-select.is-invalid,
.has-error .form-control,
.has-error .form-select {
  border-color: var(--nxr-sale);
}

.form-control.is-invalid:focus,
.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgb(225 29 72 / 20%);
}

.invalid-feedback,
.js-invalid-feedback,
.help-block ul.alert-danger,
.form-group .alert-danger {
  color: var(--nxr-sale);
  font-size: var(--e3g-text-14);
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.35rem;
  list-style: none;
}

/* Pie de formulario: los botones a la derecha en escritorio y a ancho completo
   en móvil, que es donde se pulsan de verdad. */
.e3g-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.e3g-form-actions > .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .e3g-form-actions {
    justify-content: flex-end;
    align-items: center;
  }

  .e3g-form-actions > .btn {
    width: auto;
  }

  /* El enlace de escape («volver», «cancelar») se va al otro extremo: no es una
     acción hermana del botón principal y no debe leerse como tal. */
  .e3g-form-actions > .e3g-form-actions__aside {
    margin-inline-end: auto;
  }
}

/* El asterisco de campo obligatorio no se pinta en rojo de error: no hay ningún
   error todavía. Va en tinta suave, y la leyenda lo explica una vez. */
.form-label .required,
.required-label {
  color: var(--nxr-ink-soft);
  font-weight: 400;
}

/* La leyenda que explica el asterisco. Un formulario que marca campos con «*» y
   no dice en ninguna parte qué significa incumple WCAG 3.3.2, y Hummingbird no
   la trae en ninguno de sus formularios. Va DELANTE de los campos, no al pie:
   una leyenda que se lee después de rellenar el formulario no sirve de nada.
   La pinta la plantilla de cada familia; aquí sólo su voz. */
.e3g-required-note {
  margin: 0 0 1rem;
  color: var(--nxr-ink-soft);
  font-size: var(--e3g-text-14);
}

/* =============================================================================
   4. TABLAS DE DATOS
   -----------------------------------------------------------------------------
   Detalle de pedido, facturas por abono, cupones, direcciones. Un `<table>` no
   se puede redondear por sí mismo (las celdas desbordan la esquina), así que se
   envuelve en `.e3g-table-wrap`, que además le da el scroll horizontal en móvil
   —sin él, una tabla de 5 columnas ensancha la PÁGINA entera—.
   ========================================================================== */
.e3g-table-wrap {
  border: 1px solid var(--nxr-line);
  border-radius: var(--nxr-radius-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.e3g-table-wrap > .table {
  margin: 0;
  --bs-table-bg: transparent;
}

.e3g-table-wrap > .table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
  border-bottom-color: var(--nxr-line);
}

.e3g-table-wrap > .table > thead {
  background: var(--nxr-surface-alt);
}

.e3g-table-wrap > .table > thead th {
  color: var(--nxr-ink);
  font-size: var(--e3g-text-14);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La última fila no dibuja línea: la del contenedor ya está ahí y se sumaban. */
.e3g-table-wrap > .table > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

/* Los importes se leen en columna, alineados a la derecha y con cifras de ancho
   fijo para que las unidades caigan una debajo de otra. */
.e3g-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =============================================================================
   5. AVISOS Y ESTADOS VACÍOS
   ========================================================================== */
.alert {
  border-radius: var(--nxr-radius);
  border-width: 1px;
}

/* El aviso informativo va en plata, no en el azul de Bootstrap: es el único
   color frío que quedaría en toda la tienda. */
.alert-info {
  background: var(--nxr-surface-alt);
  border-color: var(--nxr-line);
  color: var(--nxr-ink);
}

.alert-success {
  background: color-mix(in srgb, var(--nxr-success) 8%, var(--nxr-surface));
  border-color: color-mix(in srgb, var(--nxr-success) 30%, var(--nxr-surface));
  color: var(--nxr-success);
}

.alert-danger {
  background: color-mix(in srgb, var(--nxr-sale) 8%, var(--nxr-surface));
  border-color: color-mix(in srgb, var(--nxr-sale) 30%, var(--nxr-surface));
  color: var(--nxr-sale);
}

.alert-warning {
  background: color-mix(in srgb, var(--nxr-warning) 10%, var(--nxr-surface));
  border-color: color-mix(in srgb, var(--nxr-warning) 32%, var(--nxr-surface));
  color: var(--nxr-warning);
}

/* Estado vacío: carrito sin productos, pedidos sin historial, búsqueda sin
   resultados, 404. Siempre la misma forma —icono, frase, salida— para que la
   tienda no invente una página distinta cada vez que no hay nada que enseñar.
   La SALIDA es obligatoria: un estado vacío sin enlace es un callejón. */
.e3g-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.e3g-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--nxr-radius-pill);
  background: var(--nxr-surface-alt);
  color: var(--nxr-ink);
}

.e3g-empty__icon svg {
  width: 28px;
  height: 28px;
}

.e3g-empty__title {
  margin: 0;
  font-size: var(--e3g-text-20);
  font-weight: var(--nxr-heading-weight);
  color: var(--nxr-ink);
}

.e3g-empty__text {
  margin: 0;
  max-width: 42ch;
  color: var(--nxr-ink-soft);
}

/* Las salidas del estado vacío. Suelen ser dos —la principal y una alternativa—
   y en móvil se apilan a ancho completo, que es donde se pulsan. Vive aquí y no
   en la hoja de cada familia porque el estado vacío sale en seis páginas
   distintas (búsqueda sin resultados, carrito, cupones, abonos, historial, 404)
   y las seis lo resuelven igual. */
.e3g-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 24rem;
}

.e3g-empty__actions > .btn {
  flex: 1 1 100%;
}

@media (min-width: 576px) {
  .e3g-empty__actions > .btn {
    flex: 0 1 auto;
  }
}

/* =============================================================================
   6. PAGINACIÓN
   -----------------------------------------------------------------------------
   La comparten listado de categoría, búsqueda, historial de pedidos y el blog.
   ========================================================================== */
.pagination {
  --bs-pagination-border-radius: var(--nxr-radius);
  --bs-pagination-color: var(--nxr-ink);
  --bs-pagination-border-color: var(--nxr-line);
  --bs-pagination-hover-color: var(--nxr-ink);
  --bs-pagination-hover-bg: var(--nxr-surface-alt);
  --bs-pagination-hover-border-color: var(--nxr-line);
  --bs-pagination-active-bg: var(--nxr-accent);
  --bs-pagination-active-border-color: var(--nxr-accent);
  --bs-pagination-active-color: var(--nxr-accent-contrast);
  --bs-pagination-disabled-color: var(--nxr-ink-soft);
  --bs-pagination-disabled-border-color: var(--nxr-line);
  gap: 0.35rem;
}

/* Con `gap` las celdas dejan de ser una tira pegada, así que cada una redondea
   sus cuatro esquinas: Bootstrap sólo redondea la primera y la última. */
.pagination .page-link {
  border-radius: var(--nxr-radius);
  font-weight: 600;
}

/* =============================================================================
   7. CABECERA DE PÁGINA
   -----------------------------------------------------------------------------
   El H1 que `page.tpl` pinta en `page_header_container`. Lo comparten todas las
   páginas de tienda salvo las que traen hero propio (home, landings, quiénes
   somos), que lo vacían con `{block name='page_header_container'}{/block}`.
   ========================================================================== */
.page-header h1,
.page-header .h1 {
  margin: 0;
  font-size: var(--e3g-type-page);
  line-height: 1.2;
}

.e3g-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

.e3g-page-head__lead {
  margin: 0;
  color: var(--nxr-ink-soft);
}

/* Separación entre bloques dentro del cuerpo de una página de tienda. Es el
   mismo ritmo que usa la home para sus secciones, a media escala: una página de
   cuenta no necesita el aire de una portada. */
.e3g-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.e3g-stack--loose {
  gap: 2rem;
}