/* ══════════════════════════════════════════════════════════════════════════
   tap.css · QUIÉN es .tap y quién es .tap-area en Ilya HACCP
   Se enlaza DESPUÉS de ios.css. 6-sep-2026.

   ── POR QUÉ ESTE FICHERO Y NO CLASES EN EL HTML ──────────────────────────
   `ios.css` (canónico) define las dos opciones y dice «elige por pantalla»:
     · OPCIÓN A `.tap`      → el control CRECE hasta 44x44.
     · OPCIÓN B `.tap-area` → el control se ve igual y se TOCA en 44x44.
   Lo normal sería escribir la clase en cada botón. Aquí no se hace, y por dos
   razones medidas:
     1. Son 308 controles en 12 páginas. Marcarlos a mano es garantía de que
        alguno se queda fuera — y el que se queda fuera no lo nota nadie.
     2. 🔴 Los botones `.mini` de las listas los ESCRIBE EL JS al pintar cada
        ficha. Una clase en el HTML no les llega, y el botón que nazca mañana
        nacería fallando otra vez.
   Diciendo aquí qué familia es cada opción, queda cubierto lo que hay y lo que
   venga. La GEOMETRÍA sigue siendo la del canónico; esto solo reparte.
   ⚠️ Si el canónico cambia los 44px, hay que traerlos también aquí.

   ── EL REPARTO, y por qué cada uno ───────────────────────────────────────
   · `.chipbtn` (cabecera, 34-36px) → B. NO puede crecer: medido a 375, la fila
     de 8 chips de la portada ocupa 316 de 331 px. A 44px serían 8x44+7x5 = 387.
     **No caben**: 44px en una sola fila es imposible en un móvil de 375.
   · `.mini` (acciones de cada ficha, 33.5px de alto) → B. Crecer descuadraría
     la densidad de la lista, que es donde se trabaja.
   · `.btn` (formularios y diálogos, 38px de alto) → A. Ahí sí hay sitio.

   🔴 Y LO QUE NO SE PUEDE PROMETER, dicho claro: en la fila de la cabecera los
   chips están a 5px, así que dos zonas de 44 se solapan 5px. Cada chip se queda
   con ~39px efectivos de ancho (44 de alto), no 44. Es lo máximo que cabe. La
   regla `.tap-area + .tap-area{margin-left:6px}` del canónico NO se usa aquí a
   propósito: sumaría 42px a una fila que solo tiene 15 libres y la desbordaría.
   📏 Referencia honesta: 44x44 es Apple HIG y WCAG 2.5.5 (AAA). El mínimo AA es
   WCAG 2.5.8, **24x24**, y eso lo cumplen los 308 controles hoy.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🖨️🔴 `screen and` NO es decorativo (3-nov-2026). Un `@media` SIN tipo de medio vale
   para `all`, o sea TAMBIEN para `print`, y este bloque lleva `min-height:44px` y los
   `::after` de 44x44. Es el MISMO defecto que `ios.css` cerró el 8-oct (ver su linea
   115) y estaba en el fichero de al lado, que enlazan 14 de mis 15 paginas.
   ⚖️ LATENTE, no vivo, y se caracteriza igual que el otro: al imprimir `pointer: coarse`
   es FALSO, asi que el bloque no mordia. 👉 Pero eso es la CONDICION salvandolo, no el
   fichero estando bien: se declara el medio en vez de confiar en que la condicion siga
   siendo falsa. ⬜ El limite, dicho y no rellenado: medido en Chromium; en WebKit no
   esta medido, y esta PWA se usa en iPhone. */
@media screen and (pointer: coarse) {

  /* OPCIÓN B — se ve igual, se toca en 44x44 */
  /* Las flechas de mes del informe (30x30 dentro de una píldora) tampoco pueden
     crecer sin deformar la píldora, así que van con la opción B. */
  .chipbtn, .mini, .per-nav button { position: relative; }
  .chipbtn::after, .mini::after, .per-nav button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* no pinta nada: solo amplía el objetivo del dedo */
  }

  /* OPCIÓN A — el control crece */
  .btn { min-height: 44px; }

  /* 🔑 LAS CASILLAS: el objetivo NO es la casilla de 16px, es su ETIQUETA — y eso
     se comprueba PULSANDO, no leyendo el CSS. Pulsada lejos de la casilla, la
     etiqueta la cambia: ✅. Lo que sí fallaba era el ALTO, 32px de 44. Las cuatro
     familias son flex con align-items:center, así que crecer solo las centra.
     `.task` (partes de limpieza), `.check` (plagas), `.chk` (recepción), `.conf`
     (la confirmación de la guía, que es la que firma el trabajador). */
  label.task, label.check, label.chk, label.conf { min-height: 44px; }

  /* ── LOS BOTONES DE DENTRO DE LOS FORMULARIOS ────────────────────────────
     No salen en la pantalla de reposo: hay que ABRIR el formulario para verlos,
     y ahí es donde se rellena el registro. Medidos con el modal abierto.

     🔴 `.rm` NO puede llevar la opción B, y es el caso que más importa entender:
     a ≤640px ocupa la fila entera (281px de ancho) y solo mide 30 de alto. Una
     zona invisible de 44 la haría solaparse 7px con el campo de arriba y con el
     de abajo — o sea, **el botón de BORRAR robándole el toque a un campo**. Como
     está en su propia fila, aquí sí se puede crecer. Lleva `height:30px` fijo,
     así que hay que soltarlo antes de que `min-height` sirva de algo.

     `.sig-clear` tampoco: está pegado al lienzo de la FIRMA, y una zona invisible
     encima del lienzo se tragaría los trazos del dedo. */
  .rm { height: auto !important; min-height: 44px; }
  .add-lin, .sig-clear, .btn-demo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* La × de cerrar el modal sí es opción B: crecer le sumaría 20px de alto a la
     cabecera del formulario, y lo único que hay a su lado es el título. */
  .modal-x { position: relative; }
  .modal-x::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
}