/* ==========================================================================
   Zonas táctiles del teléfono
   Medido a 375px: 55 objetivos por debajo de 44x44, el 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.
   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.
     El `min-height` NO sobra: sin el, esta regla daba 12 + 17,5 + 12 = 41,5px y
     redondeaba a 42, dos por debajo del minimo, en 31 enlaces de la portada y el
     catalogo. Medido el 09-09-2026. Apoyarse en el relleno mas el interlineado
     deja el alto a merced del tamano de letra de cada area: `min-height` no. */
  .sf-producto__nombre a,
  .sf-entrada-tarjeta__titulo a {
    display: inline-block;
    padding-block: var(--sf-esp-3);
    min-height: var(--sf-alto-tactil);
  }

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

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

  /* Las flechas de las tiras que deslizan medían 32 de ancho. */
  .sf-marcas__flecha,
  .sf-carrusel__flecha {
    min-width: 44px;
  }

  /* Los iconos de la barra: el del carrito se quedaba en 22 de alto. */
  .sf-acceso {
    min-height: var(--sf-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. */
  .sf-pie__columna a,
  .sf-pie__legales-lista a {
    display: inline-block;
    padding-block: var(--sf-esp-3);
  }

  /* Los iconos de redes son cajas de 40: un dedo pide 44. */
  .sf-pie__redes a {
    min-width: 44px;
    min-height: 44px;
  }

  /* Las migas. Mismo caso que el nombre del producto: la regla existia y se
     quedaba en 38px, seis por debajo, porque 8 + 22 + 8 no llega. `.sf-pagina__migas`
     y `.sf-catalogo__migas` llevan ademas la clase `.woocommerce-breadcrumb`, asi
     que este selector las cubre a las cinco. */
  .sf-guia__migas a,
  .sf-blog__migas a,
  .woocommerce-breadcrumb a {
    display: inline-flex;
    align-items: center;
    padding-block: var(--sf-esp-2);
    min-height: var(--sf-alto-tactil);
  }

  /* 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: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

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

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

  .sf-carrito__quitar {
    min-width: 44px;
    min-height: 44px;
    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: 44px; }

  /* La categoría en la cabecera del artículo: es una acción que iba en una
     línea de texto y necesita objetivo táctil propio. */
  .sf-articulo__cabecera .sf-etiqueta {
    min-height: 44px;
    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.
     `woocommerce-form__label-for-checkbox` es la del «recordarme» del acceso,
     que no lleva la clase `.checkbox` y por eso se escapaba. */
  .woocommerce form .form-row label.checkbox,
  .woocommerce-form__label-for-checkbox,
  .sf-formulario label { min-height: 44px; display: inline-flex; align-items: center; }

  /* --- Los que aparecieron al medir la ficha, el checkout y mi cuenta -------
     El 09-09-2026 el inventario se hizo sobre cinco vistas y la ficha no estaba.
     Estos cinco salieron al medir las seis. */

  /* La lupa que abre la galería de la ficha: caja de 36. */
  .woocommerce-product-gallery__trigger {
    min-width: var(--sf-alto-tactil);
    min-height: var(--sf-alto-tactil);
  }

  /* El botón «Guardar» de la ficha medía 28 de alto.
     El selector lleva el ancestro a proposito: `ficha.css:699` declara
     `.sf-ficha__guardar .sf-favorito--texto { min-height: 0 }`, con
     especificidad (0,2,0), y le gana a un `.sf-favorito--texto` suelto por mas
     que esta hoja cargue despues. Se comprobo midiendo el estilo calculado, que
     daba `min-height: 0px` con la regla escrita y presente en el archivo.
     Tercera colision de cascada de este proyecto: el CSS que se lee correcto no
     prueba nada, hay que medir el computado. */
  .sf-ficha__guardar .sf-favorito--texto { min-height: var(--sf-alto-tactil); }

  /* «Haz clic aquí para introducir tu código de descuento», en el checkout.
     Con el cupón de bienvenida (ticket 3716) pasa a ser un enlace que la gente
     sí va a usar. */
  .showcoupon {
    display: inline-flex;
    align-items: center;
    min-height: var(--sf-alto-tactil);
  }

  /* «¿Olvidaste la contraseña?», que va en una línea de 18px. */
  .woocommerce-LostPassword a,
  .lost_password a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sf-alto-tactil);
  }

  /* El ojo de mostrar la contraseña, que WooCommerce pinta en 22x22. */
  .show-password-input {
    min-width: var(--sf-alto-tactil);
    min-height: var(--sf-alto-tactil);
  }

  /* El crédito del pie. Es el único enlace de esa línea y va en 18px de alto. */
  .sf-pie__credito a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sf-alto-tactil);
  }

  /* Los tres modelos de caña del ancla del hero, que van en flex y se quedaban
     en 35. */
  .sf-ancla__modelo a {
    min-height: var(--sf-alto-tactil);
    align-items: center;
  }

  /* Elegir como pagar, en el checkout.
     El radio mide 13px y su etiqueta 32: es el control mas critico del sitio y
     el mas dificil de acertar con el pulgar. La etiqueta lleva el area de toque,
     que es lo que ya se hace con las casillas: al tocarla se marca el radio.

     NO SE VE EN EL LOCAL. Ahi no hay pasarelas activas y la lista sale vacia:
     esto aparecio midiendo el staging, donde estan Webpay y la transferencia.
     Es el motivo de probar en el servidor y no solo en la maquina. */
  .wc_payment_methods label {
    display: flex;
    align-items: center;
    min-height: var(--sf-alto-tactil);
  }
}

/* ==========================================================================
   Carrito en el teléfono: RESUELTO EN `compra.css`, NO VA ACA

   Aca vivia una version movil de la tabla del carrito: `tr { display: block }`
   con las celdas en flex y la etiqueta sacada del `data-title`. Se escribio
   creyendo que la version movil se habia perdido al desencolar
   `woocommerce-smallscreen.css`.

   **No se habia perdido: `compra.css` ya la tenia**, con `tr.cart_item` en grid
   y areas `foto / datos / cantidad / total`. Las dos convivieron peleando y el
   resultado era un hibrido roto: `compra.css` ganaba en la fila por
   especificidad y fijaba una columna de 122,6px, mientras estas reglas le
   ponian `display: flex` y una etiqueta a las celdas. El control de cantidad,
   que mide 134px, no cabia en esa columna, se salia 96px e invadia la celda del
   total: quedaba «TOTAL» impreso encima del numero y el boton + sobre el precio.

   Medido el 09-09-2026 a 375px. Se saco entero: el layout de `compra.css` es el
   bueno y no necesita ayuda.

   LA LECCION, que sirve para todo el tema: antes de escribir una version movil
   de un componente, buscar si la hoja de su area ya tiene una. Dos
   implementaciones del mismo layout no se suman, se pelean, y la que pierde
   queda como codigo muerto que ademas hace creer que el problema esta resuelto.
   ========================================================================== */

/* ==========================================================================
   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(--sf-esp-4);
    border-bottom: 1px solid var(--sf-borde-sutil);
  }

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

  .woocommerce-orders-table td::before {
    content: attr(data-title);
    flex: none;
    font-size: var(--sf-etiqueta);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sf-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. */
  .sf-legal__indice a {
    display: block;
    min-height: 44px;
    padding-block: var(--sf-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(--sf-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) {
  .sf-receta__acciones { width: 100%; }

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