/**
 * nibar-tactil.css — Lo que cambia cuando se opera con el dedo.
 *
 * ── Por qué existe ──────────────────────────────────────────────────────────
 * Nibar arranca con una Samsung SM-P620 (Galaxy Tab S6 Lite, 10,4"), no con
 * un computador. Medido con `herramientas/auditoria-tablet.mjs`, el punto de
 * venta tenía 24 blancos táctiles bajo 44 px y 17 textos bajo 12 px. Nada de
 * eso se ve en un monitor: se descubre midiendo.
 *
 * Los casos que más importaban, todos medidos, no supuestos:
 *
 *     «Abrir caja →»   77 × 15 px   ← así se abre el turno
 *     «×» (cerrar)     11 × 18 px   ← se falla y se toca lo que hay detrás
 *     «Mesa 1 / Libre»    10-11 px  ← la superficie principal del POS
 *
 * Un botón que se falla al tocar, en una caja, no es un problema de diseño:
 * es cobrar mal, o no poder cobrar. 44 px es el mínimo que usa la industria
 * (Apple y Google dan el mismo número) y sale del ancho real de un dedo.
 *
 * ── Por qué `pointer: coarse` y no un ancho de pantalla ─────────────────────
 * Porque lo que manda no es el tamaño de la pantalla sino CÓMO se toca. Un
 * monitor chico se sigue operando con mouse y no necesita nada de esto; una
 * tablet de 10,4" se opera con el dedo aunque tenga 1000 px de ancho. Con
 * `pointer: coarse` el computador del local queda exactamente como estaba
 * —que era el pedido: PC y tablet— y la tablet crece sola, sin una versión
 * aparte que haya que mantener en paralelo y que se desincronice.
 *
 * ── Cómo se comprueba ───────────────────────────────────────────────────────
 *     node herramientas/auditoria-tablet.mjs
 * Mide de nuevo y tiene que dar cero blancos chicos y cero desbordes. Si al
 * agrandar algo se rompe una grilla, el desborde aparece ahí.
 */

@media (pointer: coarse) {
  /* ── 1. Todo lo que se toca, tocable ──────────────────────────────────────
     44 px de lado. `min-width` incluido a propósito: las «×» de cerrar medían
     11 px de ancho, y solo con `min-height` habrían quedado altas y finitas,
     que se falla igual. Las casillas de verificación quedan fuera porque el
     navegador las dibuja a su manera y estirarlas las deforma. */
  button,
  [role='button'],
  a.boton,
  .btn,
  .tab,
  .chip,
  select,
  input[type='submit'],
  input[type='button'],
  /* Los de abajo NO son <button>: son <a> y <div> con onclick, que es la
     forma en que está escrita media aplicación. La auditoría los encontró
     uno por uno; la lista sale de ahí, no de suponer. */
  .nav-item,
  .btn-header,
  .mode-tab,
  .tab-btn,
  .tab-inv,
  .filtro-btn,
  .chip-filtro,
  /* «🏠 Inicio» de configuracion.html medía 83×34, y «📱 Carta digital» /
     «📄 Exportar PDF» de carta.html 125×34 y 130×34 — encontrado el
     28-sep-2026 corriendo la auditoría sobre las pantallas de la Prioridad B
     del tablero, no supuesto. */
  .btn-volver {
    min-height: 44px;
    min-width: 44px;
  }

  /* Un <a> suelto dentro de una barra de acciones o de una tarjeta también
     se toca. «Abrir caja →» medía 77 × 15 px — quince— y es el enlace con el
     que se abre el turno: si no se puede tocar, se vende sin turno y al
     cierre no hay contra qué cuadrar la caja. */
  .barra-acciones a,
  .card a,
  .panel a,
  .tarjeta a,
  #banner-sin-turno a,
  #banner-pedidos-viejos a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── 2. Campos de escritura ───────────────────────────────────────────────
     Los 16 px NO son estéticos: si la letra de un campo mide menos, Safari en
     iPad hace zoom solo al tocarlo y deja la pantalla corrida. El cajero
     termina peleando con el navegador en medio de una venta. */
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* ── 3. La grilla de mesas, que es donde vive el cajero ───────────────────
     Era el peor caso medido: «Mesa 1» a 11 px y «Libre» a 10 px. */
  .mesa-btn {
    min-height: 92px;
  }
  .mesa-icono {
    font-size: 26px;
  }
  .mesa-nombre,
  .mesa-total {
    font-size: 14px;
  }
  .mesa-estado {
    font-size: 13px;
    /* Subirle la opacidad además del tamaño: 10 px al 60 % es dos problemas
       encimados, y el tamaño solo arregla uno. */
    opacity: 0.8;
  }
  .mesa-seccion-titulo {
    font-size: 13px;
  }

  /* ── 4. Nada de texto por debajo de lo legible ────────────────────────────
     A 40 cm —la distancia real de una tablet en un mostrador— menos de 12 px
     obliga a acercarse. Se sube el piso sin tocar lo que ya estaba bien. */
  .ci-mods,
  .mod-precio-extra,
  label,
  .tenue,
  small,
  /* Rótulos de columna de la comandera («NUEVOS», «EN CURSO», «LISTOS») y el
     rol del usuario en la barra: estaban a 10 px. La comandera se mira de
     lejos, parada, mientras se cocina — es donde el texto chico peor cae. */
  .nav-user-rol,
  .contador-label,
  .card-titulo,
  .form-hint,
  /* Encontrados el 28-sep-2026, misma tanda que `.btn-volver` arriba: el pie
     de login.html («Nibar v2 — Sistema de gestión», 11,5 px), el estado
     Activo/Inactivo de cada usuario en usuarios.html (`.usuario-info .meta`,
     11,5 px), la marca «(tú)» junto al propio nombre (11,5 px — tenía el
     tamaño puesto a mano en el HTML, ahora es la clase `.vos-marca`) y la
     etiqueta ADMIN/CAJERO del rol (`.badge-rol`, 10,9 px — el
     `text-transform: uppercase` la hace ver más chica de lo que el número ya
     era). */
  .login-footer,
  .usuario-info .meta,
  .vos-marca,
  .badge-rol {
    font-size: 13px;
  }

  /* `.contador-label` («NUEVOS», «EN CURSO», «LISTOS») venía además al 60 %
     de opacidad. La comandera se mira de lejos y parado, mientras se cocina:
     es la pantalla donde el texto chico peor cae. */
  .contador-label {
    opacity: 0.85;
  }

  /* ── 5. Separación entre cosas que se tocan ───────────────────────────────
     Dos botones de 44 px pegados se siguen fallando: el dedo tapa los dos.
     Esto solo actúa donde ya hay una fila de botones declarada con flex. */
  .barra-acciones,
  .tabs,
  .filtros {
    gap: 10px;
  }

  /* ── 6. Que un toque no se lea como intención de seleccionar texto ────────
     Al tocar y arrastrar apenas sobre un botón, el navegador a veces empieza
     a seleccionar el texto de adentro y se pierde el toque. En una caja eso
     se siente como que la aplicación "no responde". */
  button,
  .mesa-btn,
  .tab,
  [role='button'] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── 7. Los estados de mouse no aplican ───────────────────────────────────
     En una pantalla táctil `:hover` se queda PEGADO después de tocar: el
     botón se ve resaltado como si el dedo siguiera encima. Confunde sobre
     cuál está seleccionado, que en una mesa es justo lo que no se puede
     confundir. Se deja el `:active`, que sí da respuesta al toque. */
  /* Las clases de estado quedan EXCLUIDAS a propósito. Esta hoja se carga
     después del <style> de pos.html con la misma especificidad, así que sin
     el `:not(...)` esta regla le ganaría a `.ocupada`, `.sucia` y
     `.seleccionada`: una mesa ocupada, mientras el hover quedara pegado,
     perdería su color y se vería libre. En una caja eso es servirle a una
     mesa que ya tiene cuenta abierta, o cobrarle dos veces. */
  .mesa-btn:hover:not(.ocupada):not(.sucia):not(.seleccionada) {
    border-color: var(--gris-claro);
  }
}