/* ═══════════════════════════════════════════════════════════════════════════
   CAPA COMÚN — la geometría de la tienda, compartida por TODOS los temas.

   POR QUÉ EXISTE
   Cada tema es un CSS completo e independiente. Está bien para la piel
   (colores, tipografías, bordes, radios), pero la ESTRUCTURA acabó copiada
   cinco veces: `base` y `mediterraneo` eran idénticos byte a byte, y el
   bloque del menú desplegable estaba pegado igual en cuatro. Con eso,
   arreglar el móvil significaba arreglarlo cinco veces — y la quinta se
   olvida siempre.

   Aquí vive lo que no debe depender del tema: cabecera, menú, cajón móvil,
   carrito y checkout en pantalla pequeña.

   CÓMO SE CARGA
   DESPUÉS del tema, a propósito (ver layout.php). Casi todo lo de este
   fichero vive dentro de `@media`, así que en escritorio apenas toca nada y
   el aspecto de cada tema se queda como estaba; en móvil gana, que es justo
   lo que hace falta porque en móvil los cinco estaban rotos igual.

   REGLA AL AÑADIR AQUÍ
   Si es COLOR, TIPOGRAFÍA o ADORNO → va en el tema.
   Si es DÓNDE SE COLOCA algo o CÓMO SE COMPORTA al estrechar → va aquí.

   Variables que puede redefinir un tema (en su `:root`):
     --cab-lado    margen lateral de la cabecera        (por defecto 1–2 rem)
     --cab-pad-v   alto del aire de la barra superior   (por defecto .85rem)
     --cajon-fondo fondo del cajón de menú en móvil     (por defecto --t-fondo)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nada se sale de la pantalla por una imagen: `base` y `mediterraneo` no lo
   declaraban y una foto de producto grande abría barra horizontal. */
img, video, iframe { max-width: 100%; }

/* Oculto a la vista pero NO al teclado ni al lector de pantalla.
   ⚠ Las casillas del menú lo usan en vez de `hidden`: con `hidden` dejan de
   recibir foco y el menú se vuelve imposible de abrir sin ratón. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ══ CABECERA ══════════════════════════════════════════════════════════════
   Dos filas apiladas: la barra (☰ · marca · buscador · acciones) y la banda
   del menú. El tema sigue poniendo el fondo, el borde inferior y las fuentes;
   de aquí en adelante la COLOCACIÓN es de este fichero.

   ⚠ `padding: 0` pisa el `padding: 1rem 2rem` de los temas. El aire vertical
   pasa a `.cab-barra` y el lateral a `--cab-lado`, porque la banda del menú
   tiene que poder llegar de lado a lado y el cajón de móvil colocarse solo. */
.cabecera {
  display: block;
  padding: 0;
  --cab-lado-usado: var(--cab-lado, clamp(1rem, 4vw, 2rem));
}

.cab-barra {
  display: flex; align-items: center; gap: 1.25rem;
  padding: var(--cab-pad-v, .85rem) var(--cab-lado-usado);
}

.marca { flex: 0 0 auto; }
.cab-barra .buscador { flex: 1 1 260px; min-width: 0; }
.cab-barra .acciones { margin-left: auto; flex: 0 0 auto; }

/* El icono del carrito solo sale en móvil; en escritorio manda la palabra. */
.carrito-icono { display: none; }
.carrito-enlace { display: inline-flex; align-items: center; gap: .35rem; }

/* ── hamburguesa y cerrar: fuera de móvil no existen ── */
.cab-hamburguesa, .cab-cerrar, .cab-velo { display: none; }

.cab-hamburguesa, .cab-cerrar {
  cursor: pointer; align-items: center; justify-content: center;
  /* 44 px es el mínimo de zona táctil que recomienda Apple y mide Google en
     PageSpeed; por debajo de eso la gente falla el toque y se va. */
  width: 44px; height: 44px; margin-left: -10px; flex: 0 0 auto;
  border-radius: 8px; color: inherit;
}
.cab-hamburguesa span {
  display: block; position: relative; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.cab-hamburguesa span::before, .cab-hamburguesa span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.cab-hamburguesa span::before { top: -6px; }
.cab-hamburguesa span::after  { top: 6px; }
/* el foco se ve: la casilla está oculta, así que el aviso lo da su etiqueta */
.cab-conmutador:focus-visible ~ .cab-barra .cab-hamburguesa,
.sub-conmutador:focus-visible + .sub-flecha { outline: 2px solid currentColor; outline-offset: 2px; }

/* ══ BANDA DEL MENÚ (escritorio) ═══════════════════════════════════════════
   El menú tenía que caber en la MISMA fila que el logo, el buscador y el
   carrito. Con seis categorías envolvía y empujaba el carrito a una tercera
   línea. En su propia banda cabe siempre y es donde lo busca la gente. */
.menu-tienda {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .1rem var(--cab-lado-usado) .55rem;
}
.menu-tienda .menu-paginas { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.menu-tienda .idiomas { margin-left: auto; flex: 0 0 auto; }

/* ── desplegable de categorías ──
   Se abre al pasar por encima, al tabular dentro (`:focus-within`) y al
   pulsar la flecha (la casilla). Los tres caminos, sin una línea de JS. */
.menu-desplegable { position: relative; display: inline-flex; align-items: center; gap: .1rem; }
.sub-flecha { cursor: pointer; font-size: .7em; line-height: 1; padding: .35rem .2rem; color: inherit; opacity: .75; }

.submenu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 200px;
  max-width: min(300px, calc(100vw - 2rem));
  background: var(--t-fondo, #fff);
  border: 1px solid rgba(120, 120, 120, .22);
  border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 0, 0, .13);
  padding: .35rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s, transform .13s, visibility .13s;
}
/* puente invisible: sin él, el ratón cruza el hueco entre el enlace y el
   panel, el `:hover` se pierde y el desplegable se cierra en la cara */
.submenu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.menu-desplegable:hover > .submenu,
.menu-desplegable:focus-within > .submenu,
.sub-conmutador:checked ~ .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { padding: .5rem 1rem; font-size: .875rem; white-space: normal; text-decoration: none; color: inherit; }
.submenu a:hover { background: rgba(120, 120, 120, .1); }

/**
 * ⚠ QUIÉN ABRE HACIA LA IZQUIERDA LO DECIDE JS, NO EL SELECTOR.
 *
 * Primero se hizo con `:nth-last-child(1 y 2)`, dando por hecho que las dos
 * últimas categorías son las de la derecha. **Medido en shop.detapasbox.com:
 * con UNA sola categoría, esa también es la última — y su desplegable de
 * 200 px se colocaba en x = −92, fuera de la pantalla por la izquierda.**
 * Un menú entero invisible.
 *
 * CSS no sabe dónde cae un elemento en la ventana, así que esa parte la mide
 * `layout.php` y pone la clase. Por defecto abre a la derecha, que es el caso
 * normal: si el script no cargara, el menú sigue abriéndose (con `:hover`,
 * teclado o la flecha) y como mucho se sale un poco por el borde.
 */
.menu-desplegable.abre-izquierda > .submenu { left: auto; right: 0; }

/* ── disposiciones de la cabecera ──
   ⚠ Los temas las declaraban sobre `.cabecera` (`flex-direction:column`…), y
   ahora `.cabecera` es un bloque con dos filas dentro: aquellas reglas se
   quedaron inertes. La disposición es cosa de `.cab-barra`.
   Solo en escritorio: en móvil manda siempre la barra compacta, porque una
   cabecera «centrada» en 375 px es otra vez tres filas apiladas. */
@media (min-width: 861px) {
  .cabecera.disp-centrada .cab-barra { flex-direction: column; text-align: center; gap: .9rem; }
  .cabecera.disp-centrada .cab-barra .buscador { flex: 0 1 auto; width: 100%; max-width: 560px; margin: 0 auto; }
  .cabecera.disp-centrada .cab-barra .acciones { margin: 0 auto; }
  .cabecera.disp-centrada .menu-tienda { justify-content: center; }
  .cabecera.disp-centrada .menu-tienda .idiomas { margin-left: 1.5rem; }
  .cabecera.disp-minima .cab-barra .buscador { flex: 0 1 280px; }
}

/* ══ MÓVIL ═════════════════════════════════════════════════════════════════
   Medido antes de tocar nada, en shop.detapasbox.com a 375 px: la cabecera
   ocupaba 238 px de alto y los submenús salían desplegados. */
@media (max-width: 860px) {

  .cab-barra { gap: .6rem; flex-wrap: wrap; }
  .cab-hamburguesa { display: inline-flex; }

  /* la marca ocupa el hueco del centro y se recorta antes que desbordar */
  .marca { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marca span { font-size: 1.05rem; }

  /* El buscador baja a su propia línea: con el logo y el carrito al lado no
     le quedan ni 100 px, y un buscador de 100 px no lo usa nadie. */
  .cab-barra .buscador { order: 5; flex: 1 0 100%; max-width: none; }

  .cab-barra .acciones { gap: .8rem; }
  .carrito-texto { display: none; }
  .carrito-icono { display: inline; font-size: 1.2rem; line-height: 1; }

  /* ── el cajón ──
     Sale de la izquierda al pulsar ☰. Es `position:fixed`, así que ocupa la
     ventana entera aunque la cabecera esté pegada arriba. */
  .menu-tienda {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: min(320px, 86vw);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 3.2rem 1.1rem 2rem;
    background: var(--cajon-fondo, var(--t-fondo, #fff));
    box-shadow: 0 0 44px rgba(0, 0, 0, .22);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-102%);
    transition: transform .22s ease;
    border-top: 0;
  }
  .cab-conmutador:checked ~ .menu-tienda { transform: none; }

  .cab-velo {
    display: block; position: fixed; inset: 0; z-index: 99;
    background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
  }
  .cab-conmutador:checked ~ .cab-velo { opacity: 1; visibility: visible; }

  .cab-cerrar { display: inline-flex; position: absolute; top: .5rem; right: .5rem; font-size: 1.1rem; margin: 0; }

  /* con el cajón abierto la web de detrás no se mueve; si no, al arrastrar
     dentro del menú se desplaza la página y se pierde el sitio */
  body:has(.cab-conmutador:checked) { overflow: hidden; }

  .menu-tienda .menu-paginas { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-tienda .menu-paginas > a,
  .menu-desplegable > .menu-enlace {
    display: block; padding: .8rem .2rem; font-size: 1rem;
    border-bottom: 1px solid rgba(120, 120, 120, .16);
  }

  /* ⚠ AQUÍ ESTABA EL DESASTRE. El CSS anterior volvía el submenú
     `position:static; opacity:1; visibility:visible` para que se viera en
     móvil — o sea, TODAS las subcategorías de TODAS las categorías salían
     desplegadas a la vez, una lista interminable antes de llegar a la tienda.
     Ahora está plegado y lo abre la flecha. */
  .menu-desplegable {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-bottom: 1px solid rgba(120, 120, 120, .16);
  }
  .menu-desplegable > .menu-enlace { border-bottom: 0; }
  .sub-flecha {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; font-size: .9rem; opacity: .6;
    transition: transform .18s;
  }
  .sub-conmutador:checked + .sub-flecha { transform: rotate(180deg); opacity: 1; }

  .submenu {
    position: static; grid-column: 1 / -1;
    display: none; opacity: 1; visibility: visible; transform: none;
    min-width: 0; max-width: none;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 .5rem .9rem;
  }
  .submenu::before { display: none; }
  .menu-desplegable:hover > .submenu,
  .menu-desplegable:focus-within > .submenu { display: none; }
  .sub-conmutador:checked ~ .submenu { display: flex; }
  .submenu a { padding: .6rem .2rem; font-size: .9rem; opacity: .85; }

  /* la última entrada no lleva raya: la de los idiomas ya separa, y dos
     rayas seguidas con un hueco en medio parecen un fallo de maquetación */
  .menu-tienda .menu-paginas > :last-child,
  .menu-tienda .menu-paginas > :last-child > .menu-enlace { border-bottom: 0; }

  .menu-tienda .idiomas { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(120, 120, 120, .16); }
}

/* ══ CARRITO EN MÓVIL ══════════════════════════════════════════════════════
   Medido: la tabla ocupaba 531 px dentro de un contenedor de 375. El importe
   y la ✕ de quitar quedaban FUERA de la pantalla, sin barra de desplazamiento
   que los alcanzara: en un móvil no se podía borrar una línea del carrito.

   Cada fila pasa a ser una ficha. Las etiquetas de columna las pone el CSS
   desde `data-etiqueta`, que escribe la plantilla. */
@media (max-width: 760px) {
  .tabla-carrito { display: block; width: 100%; border: 0; }
  .tabla-carrito thead { display: none; }
  .tabla-carrito tbody { display: block; }

  .tabla-carrito tr {
    display: block; position: relative;
    padding: 1rem 2.6rem 1rem 0;
    border-bottom: 1px solid rgba(120, 120, 120, .2);
  }
  .tabla-carrito tr::after { content: ''; display: block; clear: both; }
  .tabla-carrito td { display: block; border: 0; padding: .12rem 0; text-align: left; }

  .tabla-carrito .celda-foto { float: left; width: 68px; margin: 0 .9rem .4rem 0; padding: 0; }
  .tabla-carrito .celda-foto img { width: 68px; height: 68px; object-fit: cover; display: block; }

  /* el nombre del producto no lleva etiqueta: se lee solo */
  .tabla-carrito td[data-etiqueta]::before {
    content: attr(data-etiqueta) ": ";
    opacity: .65; font-size: .8em;
  }

  .tabla-carrito .celda-nombre { font-weight: 600; padding-bottom: .3rem; }

  .form-cantidad { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
  .form-cantidad input { width: 4rem; padding: .45rem .5rem; }
  .form-cantidad button { padding: .45rem .7rem; font-size: .8rem; }

  /* la ✕ va a la esquina, siempre alcanzable con el pulgar */
  .tabla-carrito .celda-quitar { position: absolute; top: .7rem; right: 0; padding: 0; }
  .tabla-carrito .celda-quitar::before { content: none; }
  .tabla-carrito .celda-quitar button { width: 40px; height: 40px; font-size: 1rem; }

  .totales { max-width: none; }
  .acciones-carrito { justify-content: stretch; flex-direction: column; align-items: stretch; gap: .8rem; }
  .acciones-carrito > * { text-align: center; }
  .acciones-carrito .boton-principal { order: -1; padding: .9rem 1.2rem; }
  .acciones-carrito .form-vaciar button { width: 100%; }
}

/* ══ CHECKOUT EN MÓVIL ═════════════════════════════════════════════════════
   El resumen sube POR ENCIMA del formulario. En el orden del HTML va después
   —que es lo correcto en escritorio, donde se ve a la derecha—, pero en un
   móvil eso obliga a rellenar diez campos a ciegas y solo entonces enterarse
   de cuánto suma el envío. */
@media (max-width: 820px) {
  .checkout { grid-template-columns: 1fr; gap: 1.6rem; }
  .checkout-resumen { order: -1; }
}
@media (max-width: 560px) {
  .fila-doble { grid-template-columns: 1fr; }
  .checkout-form .boton-principal.grande { width: 100%; text-align: center; }
}

/* ⚠ 16 px como mínimo en TODO campo de formulario. Por debajo, Safari en
   iPhone hace zoom automático al tocarlo y deja la página torcida y con
   barra horizontal — el usuario cree que la web se ha roto. No es estética:
   es la causa nº1 de checkouts abandonados en iOS. */
@media (max-width: 860px) {
  /* ⚠ `!important`, y con motivo. Los temas afinan el tamaño con selectores
     más específicos (`.campo input { font-size: .95rem }` = 15,2 px medidos
     en gourmet), así que una regla sobre `input` a secas pierde siempre. Aquí
     no hay matiz de diseño que valer: por debajo de 16 px Safari hace zoom y
     el checkout se rompe. Es un mínimo, no una preferencia. */
  /* Los botones NO entran: no provocan el zoom (solo lo hacen los campos que
     reciben el cursor) y forzarles 16 px reventaría los botones pequeños. */
  input, select, textarea { font-size: max(16px, 1rem) !important; }
  .contenido { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* Cualquier tabla que se cuele en una página libre se desplaza dentro de su
   caja en vez de estirar el documento entero. */
@media (max-width: 760px) {
  .texto-legal table, .sec-cuerpo table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ══ VISOR DE IMÁGENES ═════════════════════════════════════════════════════
   Una foto de producto al tamaño de su columna no deja leer una etiqueta ni
   ver el detalle de un tejido, y eso es parte de decidir la compra. Hasta el
   01/08/2026 no había forma de ampliarla: pulsarla no hacía nada.

   `<dialog>` nativo — el fondo, la tecla Escape y la trampa de foco los pone
   el navegador. Va en la capa común porque es estructura: cualquier tema lo
   hereda sin escribir una línea. */
[data-zoom] { cursor: zoom-in; }

#visor {
  border: 0; padding: 0; background: transparent;
  max-width: 96vw; max-height: 96vh;
  overflow: visible;
  /* ⚠ `inset:0; margin:auto` A MANO. El navegador centra los <dialog> justo
     con eso, pero los temas abren con `* { margin: 0 }` y se lo comen: el
     visor salía pegado a la esquina superior izquierda. */
  inset: 0; margin: auto;
  /* se ajusta a la foto en vez de reservar un ancho fijo, así la ✕ queda
     siempre pegada a la esquina de la imagen y no flotando en el vacío */
  width: fit-content;
}
#visor::backdrop { background: rgba(0, 0, 0, .84); }
#visor img {
  display: block; margin: 0 auto;
  /* ⚠ Las fotos del catálogo son de 400×400. Enseñarlas a pantalla completa
     las dejaría borrosas, así que se amplían hasta 720 px como mucho: se ve
     bastante más grande que en la ficha y todavía nítido.
     Si algún día PRODUCTOS guarda originales grandes, subir este tope. */
  /* `width` y no `max-width`: con `max-width` una foto de 400 px se enseña a
     400 px y el visor no se nota. Se amplía a 640 (1,6× sobre el original del
     catálogo), que se ve claramente más grande y todavía nítido. */
  width: min(640px, 96vw); height: auto; max-height: 92vh;
  object-fit: contain; border-radius: 6px; background: #fff;
  cursor: default;   /* dentro de la foto no se cierra */
}
.visor-cerrar {
  position: absolute; top: -2.6rem; right: 0;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .26); }
/* en móvil no hay hueco por encima: la ✕ se mete dentro, arriba a la derecha */
@media (max-width: 640px) {
  .visor-cerrar { top: .5rem; right: .5rem; background: rgba(0, 0, 0, .55); }
}

/* ══ FRANJA A TODO EL ANCHO ════════════════════════════════════════════════
   `ancho = completo` en cualquier bloque. La franja sale de la columna de
   contenido y llega de borde a borde; lo de dentro sigue centrado, que es lo
   que se espera de un hero o de una franja de color.

   ⚠ `overflow-x: clip` en el body, y tiene que ser `clip` y NO `hidden`:
   `hidden` convierte el body en contenedor de desplazamiento y **la cabecera
   fija deja de pegarse**. `clip` recorta sin crear ese contenedor.
   Hace falta porque `50vw` incluye el ancho de la barra de desplazamiento: sin
   recortar, aparece una barra horizontal de unos 15 px en escritorio. */
body { overflow-x: clip; }

.franja.ancho-completo {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* el contenido vuelve a su columna: franja ancha, texto legible */
.franja.ancho-completo > * {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
/* …salvo el hero, que ya trae su propio relleno y quiere la foto entera */
.franja.ancho-completo > .sec-hero {
  max-width: none; padding-inline: 0;
}

/* Alineación del bloque (campo común `alineacion`). `izquierda` no genera
   clase: es el valor por defecto y así el HTML no lleva nada de más. */
.franja.texto-centro  { text-align: center; }
.franja.texto-derecha { text-align: right; }
/* lo que va centrado con márgenes automáticos tiene que seguir centrado */
.franja.texto-centro .sec-cuerpo,
.franja.texto-derecha .sec-cuerpo { margin-inline: auto; }

/* Tamaño del texto del bloque (campo común `tamano`). Escala corta: el tipo
   de letra es del tema, esto solo da o quita peso a una franja. */
.franja.tam-pequeno { font-size: .9em; }
.franja.tam-grande  { font-size: 1.18em; }