/* movil.css — que el ERP se pueda usar caminando un almacen, con una mano.
 *
 * POR QUE EXISTE (21-ago-2026): nueve pantallas desplegadas tenian CERO reglas @media, y dos
 * de ellas son las del viaje a Panama: la verificacion de inventario se usa con el telefono
 * en la mano frente a las cajas, y el importador es por donde entran los Excel de Jose.
 *
 * POR QUE UNA HOJA Y NO NUEVE BLOQUES: escribir lo mismo en nueve archivos es deuda el dia
 * uno -- la decima pantalla nace mal y nadie se entera. Esto lo enlaza topbar.php, que ya era
 * el auto-loader de branding.css, asi que entra en todas las pantallas internas de golpe.
 * El login (index.php) no incluye topbar y la enlaza aparte.
 *
 * ALCANCE: solo lo transversal de pagina. El cajon de navegacion vive en topbar.php, junto a
 * su marcado; separados se puede revertir uno sin tumbar el otro.
 *
 * TODO va dentro de @media (max-width:768px). Ese numero NO es libre: es el que usa el ERP
 * del que este repo es fork, para que lo que se porte de alla entre sin
 * traducir. Y 768 y no 600, porque los telefonos grandes de hoy renderizan a ~600-700px CSS
 * y con 600 se quedaban FUERA del media query, con layout de escritorio. Leccion que ya
 * costo un pase completo alla. topbar.php se alineo al mismo corte. Escritorio no se toca.
 *
 * ⚠️ CADA SELECTOR DE AQUI SE CONTO CONTRA LO QUE SE DESPLIEGA ANTES DE ESCRIBIRLO.
 * La primera version traia .grid-2, .grid-3, .kpi-grid, .cards-grid, .form-grid, .f-row,
 * .kebab-item y .modal-content: CERO usos las ocho. Reglas muertas que se ven exactamente
 * igual que reglas que funcionan, y habrian dejado decir "ya es responsive" sin serlo.
 * Si se agrega una regla nueva aqui, se cuenta primero:
 *     grep -l 'class="[^"]*\bLACLASE\b' $(archivos del manifiesto)
 */

@media (max-width: 768px) {

  /* ── 1. Nada de scroll lateral ──────────────────────────────────────────────
   * La pagina no se corre de lado; lo ancho se desliza DENTRO de si mismo. Una
   * pagina que se mueve en horizontal se lee como "se descompuso".
   * max-width y no overflow-x:hidden en body: hidden rompe position:sticky y ademas
   * TAPA lo que sobra en vez de dejar llegar a ello. */
  html, body { max-width: 100%; }

  /* Las tablas se vuelven su propio contenedor deslizable. Sin esto empujan la pagina
   * entera y el encabezado se pierde fuera de pantalla.
   * A quien le pega: inventory_verification.php tiene TRES tablas sin contenedor, y es
   * la pantalla del conteo del 24. (importar_catalogo.php ya resolvio la suya con un
   * overflow-x propio; esta regla no le estorba.)
   * display:block es lo que habilita overflow en una <table>. El precio es que las
   * columnas dejan de repartirse solas, y en un telefono eso se prefiere. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre, code { overflow-x: auto; }

  /* ── 2. Que el dedo acierte ─────────────────────────────────────────────────
   * 44px es el minimo de Apple, 48dp el de Material. En un almacen la mano viene
   * ocupada o con guante, asi que se toma el piso mas alto de los dos.
   * min-height y no height: un boton de dos renglones tiene que crecer, no recortarse.
   * Usos contados en lo desplegado: btn-o 32 · btn-v 26 · btn-act 15 · btn-p 3 · btn-s 2 */
  button,
  input[type="submit"],
  input[type="button"],
  select,
  .btn-v, .btn-o, .btn-act, .btn-p, .btn-s {
    min-height: 44px;
  }

  /* Los de solo icono son los que mas se fallan: angostos y pegados. */
  .btn-act { min-width: 44px; }

  /* Separacion entre objetivos. Pegados, el dedo aprieta el de junto -- y en estas
   * pantallas el de junto puede ser eliminar. */
  .btn-act + .btn-act,
  .btn-o + .btn-o,
  .btn-v + .btn-o,
  .btn-o + .btn-v { margin-left: 8px; }

  /* ── 3. Que iOS no haga zoom solo ───────────────────────────────────────────
   * Safari hace zoom al enfocar un campo con letra menor a 16px, y al hacerlo descuadra
   * la pagina y ya no vuelve. Lo que reporta la gente es "se me movio todo", no "la
   * letra estaba chica", y por eso cuesta tanto diagnosticarlo. */
  input, select, textarea { font-size: 16px; }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { min-height: 44px; }

  /* Casillas y radios al reves: son demasiado chicos por default. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* ── 4. Modales ─────────────────────────────────────────────────────────────
   * .modal-box ya nacio bien (width:100%, max-width:600px, max-height:90vh). Lo unico
   * que estorba es el relleno del velo: 20px por lado se comen 40px de los 390 que hay.
   * Usos contados: .modal-overlay 3, todos en inventory_verification.php. */
  .modal-overlay { padding: 10px !important; }

  /* ── 5. Filtros y barras de herramientas ────────────────────────────────────
   * Usos contados: sect-hdr 6 · toolbar 3 · f-sel 3 · filters 1 */
  .filters, .toolbar, .sect-hdr { flex-wrap: wrap; gap: 8px; }
  .f-sel { flex: 1 1 100%; }

  /* ── 6. Portado del ERP hermano ──────────────────────────────────────────────
   * branding.css del ERP del que este repo es fork (su PRD #33), en produccion desde el 20-jul. simon-demo es
   * un fork de ese ERP pero se separo ANTES de ese pase, asi que estas reglas ya
   * estaban probadas un mes en manos de gente real y aqui faltaban.
   * Se portan SOLO los selectores que existen aqui. De los 21 que trae aquel, trece no
   * aparecen en SMN (.kpi-3, .sem-grid, .stat-strip, .responsive-cards, .be-header...)
   * y quedan fuera: portarlos seria repetir el error de las reglas muertas.
   *
   * POR QUE !important AQUI, y no en el resto de la hoja: products.php:1280 trae
   *     <div class="kpi-row" style="grid-template-columns:repeat(4,1fr)">
   * Un estilo EN LINEA le gana a cualquier hoja, sin importar especificidad ni media
   * query. Por eso la regla que ya existia en products.php (@media 768 -> 2 columnas,
   * linea 1228) nunca gano, y en un telefono salian CUATRO columnas apretadas con los
   * rotulos partidos a media palabra. !important es lo unico que vence un style inline.
   * Usos contados: kpi 37 · kpi-card 8 · kpi-value 8 · kval 4 · kpi-row 2 · kgrid 1 */
  .kpi-row, .kgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; }

  /* .kpi-card nace con overflow:hidden (products.php:1115), que recorta el valor. */
  .kpi-card, .kpi { overflow: visible !important; min-width: 0 !important; }

  /* .kpi-value nace con white-space:nowrap y text-overflow:ellipsis (1121): en una
   * tarjeta angosta la cifra sale con puntos suspensivos. Un KPI cortado no es un KPI. */
  .kpi-value, .kval { font-size: clamp(15px, 4.6vw, 21px) !important; overflow-wrap: anywhere; }

  /* Contenedores de scroll que ya existen en el fork. */
  .tscroll, .tsc { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* NO se toca el anillo de foco ni el tamano de letra del cuerpo. Quitar el foco deja
   * sin rastro a quien navega por teclado -- pasa mas de lo que parece en una tablet con
   * teclado. Y bajarle al cuerpo por debajo de 16px es justo lo que el punto 3 evita. */
}