/* ==========================================================================
   Zonas táctiles del teléfono
   Medido a 375px: 55 objetivos por debajo del mínimo que se toca sin fallar. La
   mayoría eran enlaces de texto, que heredan el alto de su línea y se quedan en
   20px. El relleno va en el enlace y no en su contenedor, o el área tocable no
   crece.

   La medida sale de `--zfc-alto-tactil` y NO de un número escrito en cada
   regla. Estaba a mano 21 veces con el valor 44, mientras el token decía 48: el
   sitio prometía una cosa y entregaba otra un 8% más chica, y subir el token no
   habría hecho nada. Ese 8% es justo el margen que necesita un pulgar con menos
   puntería.
   Solo en pantallas chicas: en escritorio el puntero es preciso y estas alturas
   estirarían bloques ya revisados.
   ========================================================================== */

@media (max-width: 899px) {

  /* El nombre del producto es lo que se toca cuando la foto ya se vio. */
  .zfc-producto__nombre a,
  .zfc-entrada-tarjeta__titulo a {
    display: inline-block;
    padding-block: var(--zfc-esp-3);
  }

  /* «Ver todo el catálogo», «Ver todas las marcas», «Ver todos los artículos». */
  .zfc-enlace-acento {
    min-height: var(--zfc-alto-tactil);
    padding-block: var(--zfc-esp-3);
  }

  /* Las pestañas de «Explora por marca» y la categoría de una entrada. */
  .zfc-explora__pestana,
  .zfc-entrada-tarjeta__tema {
    min-height: var(--zfc-alto-tactil);
    display: inline-flex;
    align-items: center;
  }

  /* Las flechas de las tiras que deslizan medían 32 de ancho. */
  .zfc-marcas__flecha,
  .zfc-carrusel__flecha {
    min-width: var(--zfc-alto-tactil);
  }

  /* Los iconos de la barra: el del carrito se quedaba en 22 de alto. */
  .zfc-acceso {
    min-height: var(--zfc-alto-tactil);
    justify-content: center;
  }

  /* Los enlaces del pie, que van en lista y se tocan con el pulgar. Los
     legales van aparte, en su propia tira bajo el pie. */
  .zfc-pie__columna a,
  .zfc-pie__legales-lista a {
    display: inline-block;
    padding-block: var(--zfc-esp-3);
  }

  /* Los iconos de redes son cajas de 40: un dedo pide 44. */
  .zfc-pie__redes a {
    min-width: var(--zfc-alto-tactil);
    min-height: var(--zfc-alto-tactil);
  }

  /* Las migas, que en las tres plantillas que las llevan van en una línea de
     17px de alto. */
  .zfc-guia__migas a,
  .zfc-blog__migas a,
  .woocommerce-breadcrumb a {
    display: inline-block;
    padding-block: var(--zfc-esp-2);
  }

  /* La paginación del catálogo: números de 27 de ancho.
     Los selectores van con la clase repetida para ganarle a las reglas de cada
     área, que se escribieron pensando en el puntero. Es eso o `!important`, y
     el tema evita el `!important` en todo lo que no sea pelear con el JS de
     WooCommerce. */
  .woocommerce-pagination a.page-numbers.page-numbers,
  .woocommerce-pagination span.page-numbers.page-numbers {
    min-width: var(--zfc-alto-tactil);
    min-height: var(--zfc-alto-tactil);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Los botones chicos del sistema (`--zfc-boton-s`, 40px) suben al mínimo
     táctil. Se arregla acá y cae en todo el sitio. */
  .zfc-boton.zfc-boton,
  .button.button,
  .woocommerce a.button.button,
  .woocommerce button.button.button,
  .woocommerce input.button.button { min-height: var(--zfc-alto-tactil); }

  /* El carrito: el nombre del marco, el aspa de quitar y el campo de cantidad. */
  .zfc-carrito__nombre a {
    display: inline-block;
    padding-block: var(--zfc-esp-3);
  }

  .zfc-carrito__quitar {
    min-width: var(--zfc-alto-tactil);
    min-height: var(--zfc-alto-tactil);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .quantity input.qty,
  input.input-text,
  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="tel"] { min-height: var(--zfc-alto-tactil); }

  /* El disparador del modal de calibres y la categoría en la cabecera del
     artículo: los dos son acciones que iban en una línea de texto. */
  .zfc-calibres__disparador,
  .zfc-articulo__cabecera .zfc-etiqueta {
    min-height: var(--zfc-alto-tactil);
    display: inline-flex;
    align-items: center;
  }

  /* Las casillas de los formularios miden 13px. No se pueden agrandar sin
     deformarlas, pero su etiqueta sí puede llevar el área de toque.

     SOLO las de casilla y radio, que es para lo que se escribió esto: ahí la
     etiqueta ES la zona que se toca. Aplicada a toda etiqueta, inflaba a 52px
     cada rótulo que va ENCIMA de su campo, donde lo que se toca es el campo:
     eran tres dedos de blanco entre el nombre y la casilla, y sumaba más de
     medio metro de alto al checkout sin que nadie ganara nada. */
  .woocommerce form .form-row label.checkbox,
  .zfc-formulario .zfc-opcion label,
  .zfc-formulario label.checkbox,
  .zfc-formulario label:has(input[type="checkbox"]),
  .zfc-formulario label:has(input[type="radio"]) {
    min-height: var(--zfc-alto-tactil);
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Carrito en el teléfono
   La tabla del carrito desbordaba 39px a 375: cuatro columnas no caben. La
   versión móvil de esa tabla la trae `woocommerce-smallscreen.css`, que el tema
   desencola a propósito porque arma sus grillas con CSS grid. Al desencolarla
   se fue también esto, y no se había notado.
   ========================================================================== */

@media (max-width: 699px) {
  .zfc-carrito__tabla thead { display: none; }

  .zfc-carrito__tabla,
  .zfc-carrito__tabla tbody,
  .zfc-carrito__tabla tr,
  .zfc-carrito__tabla td { display: block; width: auto; }

  .zfc-carrito__tabla tr.woocommerce-cart-form__cart-item {
    padding-block: var(--zfc-esp-4);
    border-bottom: 1px solid var(--zfc-borde-sutil);
  }

  .zfc-carrito__tabla td {
    padding: 0;
    border: 0;
  }

  /* La celda del producto vuelve a ser de dos columnas.
     `.zfc-carrito__producto` ES el `td`, no un hijo suyo, asi que la regla
     generica de arriba (`td { display: block }`) le mataba el `display: flex`
     que le pone `compra.css`. Consecuencia: la foto quedaba sola arriba y todo
     el texto colgando debajo, y de paso el `width: 80px` de `.zfc-carrito__foto`
     se volvia inerte, porque un `span` en linea ignora el ancho. Con dos marcos
     habia que recorrer casi 700px para llegar al boton de pagar.

     Va en grid y no en flex para que la columna de la foto sea una medida y no
     dependa de que el span conserve su `flex: none`. */
  .zfc-carrito__tabla td.zfc-carrito__producto {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--zfc-esp-4);
    align-items: start;
  }

  /* El recuadro blanco es el mismo criterio de la tarjeta del catalogo: los
     packshots del cliente vienen sobre blanco y el carrito va sobre marfil. */
  .zfc-carrito__tabla .zfc-carrito__foto {
    display: block;
    width: 96px;
  }

  /* SIN espacio entre `table.cart` y `.zfc-carrito__tabla`: son el MISMO
     elemento, la tabla lleva las dos clases. Escrito con espacio el selector
     pide una tabla dentro de otra y no casa con nada, que es lo que pasaba: la
     foto se quedaba en los 80px de `compra.css`, cuya regla vale (0,3,2). Esta
     vale (0,4,2) y gana. */
  .woocommerce table.cart.zfc-carrito__tabla .zfc-carrito__foto img {
    width: 96px;
    background: var(--zfc-superficie-base);
  }

  /* Cantidad y total quedan como pie de la tarjeta, separados del producto. */
  .zfc-carrito__tabla tr.woocommerce-cart-form__cart-item td.product-quantity {
    margin-top: var(--zfc-esp-4);
    padding-top: var(--zfc-esp-3);
    border-top: 1px solid var(--zfc-borde-sutil);
  }

  /* Cantidad y total pasan a una fila bajo el producto, con su etiqueta
     delante: sin la cabecera de la tabla, un número suelto no se entiende.
     El texto sale del `data-title` que ya trae la plantilla. */
  .zfc-carrito__tabla td.product-quantity,
  .zfc-carrito__tabla td.product-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zfc-esp-3);
    margin-top: var(--zfc-esp-3);
    text-align: left;
  }

  .zfc-carrito__tabla td.product-quantity::before,
  .zfc-carrito__tabla td.product-subtotal::before {
    content: attr(data-title);
    font-size: var(--zfc-etiqueta);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--zfc-texto-secundario);
  }

  .zfc-carrito__tabla td.actions { padding-top: var(--zfc-esp-4); }
}

/* ==========================================================================
   Las tablas de Mi cuenta en el teléfono
   Mismo caso que el carrito: su versión móvil venía en
   `woocommerce-smallscreen.css`, que el tema desencola. Sin ella, cinco
   columnas se reparten 375px y cada celda se parte en tres líneas.
   Las plantillas ya traen `data-title` en cada celda, así que la etiqueta sale
   de ahí: sin la cabecera de la tabla, un dato suelto no se entiende.
   ========================================================================== */

@media (max-width: 699px) {
  .woocommerce-orders-table thead { display: none; }

  .woocommerce-orders-table,
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td { display: block; width: auto; }

  .woocommerce-orders-table tr {
    padding-block: var(--zfc-esp-4);
    border-bottom: 1px solid var(--zfc-borde-sutil);
  }

  .woocommerce-orders-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zfc-esp-3);
    padding: var(--zfc-esp-1) 0;
    border: 0;
    text-align: right;
  }

  .woocommerce-orders-table td::before {
    content: attr(data-title);
    flex: none;
    font-size: var(--zfc-etiqueta);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--zfc-texto-secundario);
  }

  /* El índice de las páginas legales es navegación, no prosa: se toca para
     saltar a la sección. Sin relleno los enlaces se quedan en el alto de su
     línea, 20px, y quedan cuatro objetivos por debajo del mínimo. */
  .zfc-legal__indice a {
    display: block;
    min-height: var(--zfc-alto-tactil);
    padding-block: var(--zfc-esp-2);
  }

  /* La celda de acciones no lleva etiqueta: el botón ya dice lo que hace. */
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before,
  .woocommerce-orders-table td:last-child::before { content: none; }

  .woocommerce-orders-table td:last-child {
    justify-content: flex-end;
    padding-top: var(--zfc-esp-3);
  }
}

/* La banda de la receta del catálogo: sus dos botones sumaban 481px de ancho
   en una pantalla de 375 y empujaban la página entera. */
@media (max-width: 599px) {
  .zfc-receta__acciones { width: 100%; }

  .zfc-receta__acciones .zfc-boton {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- Segunda ronda del responsive, 31-08-2026 (ticket 3536) ---------------
   La primera ronda, del 20-08, midió desborde horizontal y objetivos táctiles
   sobre 12 páginas. Esta recorre las 22 vistas del sitio y cierra lo que quedó,
   más lo que aparecio despues: el recordatorio de sesion del checkout es nuevo,
   entro al abrir el registro de clientes (decision 37).

   Antes de tocar nada se descartaron tres falsos positivos, que estan anotados
   para que nadie los vuelva a «arreglar»:

     - la trampa para robots de los formularios mide 112x20, pero va dentro de
       `.zfc-solo-lectores`, recortada a 1x1: agrandarla rompe el antispam;
     - `.zfc-barra-pedido` parece salirse de su formulario, y es `position:
       fixed` ocupando la ventana entera;
     - los radios de 13px de la cotizacion van envueltos en su `<label>`, que es
       la zona que de verdad se toca. */
@media (max-width: 899px) {

  /* El campo del cupón medía 180px fijos dentro de una caja de 134: se salía
     46px y el botón de aplicar caía fuera de la vista. Con `flex` reparte. */
  .zfc-cupon__cuerpo { flex-wrap: nowrap; }

  .zfc-cupon input.input-text.input-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: var(--zfc-alto-tactil);
  }

  .woocommerce .zfc-cupon .button,
  .zfc-cupon .button {
    flex: 0 0 auto;
    min-height: var(--zfc-alto-tactil);
  }

  /* El disparador del cupón es un `summary`, o sea el control que abre el
     bloque, y medía 24px de alto. */
  .zfc-cupon__disparador {
    min-height: var(--zfc-alto-tactil);
    display: inline-flex;
    align-items: center;
  }

  /* «Haz clic aquí para acceder», el recordatorio de sesión del checkout. Es un
     enlace de 17px de alto en medio de un aviso, y es la puerta para quien ya
     tiene cuenta: la primera cosa que se toca en esa pantalla. */
  .woocommerce-form-login-toggle a.showlogin,
  a.showlogin.showlogin {
    display: inline-block;
    min-height: var(--zfc-alto-tactil);
    padding-block: var(--zfc-esp-3);
  }

  /* El botón que abre el probador en la ficha. Medía 26px de alto, y es la
     acción que el cliente vino a mostrar. Se queda con la forma de enlace de
     acento que pide el diseño: lo que crece es la zona que se toca. */
  .zfc-ficha__probador.zfc-ficha__probador {
    min-height: var(--zfc-alto-tactil);
    margin-bottom: var(--zfc-esp-4);
  }

  /* La foto del producto en la tabla del carrito: 40px de alto, y es el enlace
     con el que se vuelve a la ficha para comprobar que es el marco correcto. */
  .woocommerce table.cart td.product-thumbnail a,
  .zfc-carrito__foto a { display: block; min-height: var(--zfc-alto-tactil); }

  /* El paso «Carrito» del indicador del checkout es el unico que enlaza, y es
     por donde se vuelve a corregir lo que se esta comprando. Medía 26px. */
  .zfc-pasos__paso a,
  .zfc-pasos a {
    display: inline-flex;
    align-items: center;
    min-height: var(--zfc-alto-tactil);
  }

  /* «¿Olvidaste la contraseña?». La ronda anterior lo dejó como enlace dentro
     de una línea de texto, y no lo es: ocupa su propio párrafo y es la salida
     de quien no puede entrar. */
  .woocommerce-LostPassword a,
  p.lost_password a {
    display: inline-block;
    min-height: var(--zfc-alto-tactil);
    padding-block: var(--zfc-esp-3);
  }
}

/* Los datos bancarios de la confirmación salían a 11,4px, por debajo del mínimo
   del sistema. Es la pantalla donde hay que copiar un número de cuenta a mano,
   así que es justo donde el cuerpo chico cuesta caro. WooCommerce los pinta con
   su propia lista y su tamaño gana por especificidad. */
.woocommerce ul.wc-bacs-bank-details li,
.wc-bacs-bank-details li {
  font-size: var(--zfc-cuerpo-s);
  line-height: 1.6;
}

/* «(incluye $X Impuestos)», que WooCommerce pinta bajo el total desde que se
   encendió el IVA (decisión 36). Sale a 11,7px, por debajo del mínimo de 12 del
   sistema, y es la línea que explica de dónde sale el número que se paga. */
.woocommerce small.includes_tax,
small.includes_tax,
small.includes_tax .amount { font-size: var(--zfc-cuerpo-s); }

/* Las migas quedaban en 42px, dos por debajo del mínimo. La regla de más arriba
   les da aire vertical, pero con `--zfc-esp-2` no alcanzaba. */
@media (max-width: 899px) {
  .zfc-guia__migas a,
  .zfc-blog__migas a,
  .woocommerce-breadcrumb a { min-height: var(--zfc-alto-tactil); }
}

/* Aquí vivía el parche que subía las barras fijas por encima del WhatsApp, con
   la clase repetida para ganar especificidad y encerrado bajo 899px.

   Se retiró el 02-09-2026 porque lo resuelve la escala de capas de
   `tokens.css`: el WhatsApp es `--zfc-capa-flotante` (50) y las barras son
   `--zfc-capa-barra-fija` (60), en todos los anchos y sin depender del orden en
   que se encolan las hojas. El parche además solo arreglaba media pelea: dejaba
   las barras empatadas en 60 con el menú móvil, el modal y el cajón de filtros,
   que es el defecto que vino a cerrar esta escala. */