/* ═══════════════════════════════════════════════════════════════════
   TELEFONO — todo lo que aplica por debajo de 640px
   ═══════════════════════════════════════════════════════════════════

   Este archivo no puede afectar al escritorio ni al iPad, y no por
   cuidado al editarlo: TODO su contenido vive dentro de una sola
   @media (max-width: 640px), y un navegador que no cumple esa
   condicion ni siquiera lee lo de dentro. El iPad en vertical mide
   768px y en horizontal 1024, asi que nunca entra aqui. Esa fue
   justamente la razon de que la app se sintiera bien en iPad y mal en
   iPhone: la unica consulta movil del proyecto estaba en 640px, el
   iPad jamas la activaba y el iPhone siempre.

   Se carga EL ULTIMO de todas las hojas a proposito. Asi gana los
   empates de especificidad por orden de aparicion y no hace falta
   !important para sobrescribir a app.css o cost-report.css. La unica
   excepcion esta marcada abajo, y es porque el original ya traia
   !important.

   Regla de mantenimiento: aqui NO se edita nada de otros archivos.
   Solo se agregan reglas. Si algo se ve mal en telefono, la
   correccion va aqui dentro; nunca se toca la regla original, que es
   la que sirve al escritorio.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── 1 · El zoom de Safari al enfocar un campo ────────────────────
     iOS acerca la pantalla automaticamente cuando enfocas un campo
     cuya letra mide menos de 16px, y despues NO vuelve solo: hay que
     pellizcar para regresar. Contando cuarenta articulos son cuarenta
     saltos de pantalla.

     16px es el umbral exacto de Safari, no una preferencia de diseno.
     Un pixel menos y el zoom vuelve.

     La regla generica va primero porque tambien cubre un caso que no
     se ve en el CSS: un <input> sin font-size declarado NO hereda el
     del padre, usa el del navegador, que ronda los 13px. Es decir,
     habia campos disparando el zoom sin que ninguna regla lo
     confesara. Debajo van los que si tienen tamano propio, uno por
     uno, porque su especificidad le gana a la generica. */
  input,
  select,
  textarea            { font-size: 16px; }

  #vendorSearchInput  { font-size: 16px; }
  .scan-toolbar select{ font-size: 16px; }
  .ac-row select      { font-size: 16px; }
  .lb-url input       { font-size: 16px; }
  .cr-card-input input{ font-size: 16px; }

  /* Este es un <select> real de 12px con opacity:0 encima del chip de
     locacion. Es invisible, asi que subirlo a 16 no cambia nada de lo
     que se ve — pero si evita el zoom, porque Safari mira el campo
     que enfocas, no si se ve o no. */
  .bs-loc-select      { font-size: 16px; }

  /* El unico !important del archivo: el original tambien lo trae
     (cost-report.css:613) y sin el no habria forma de ganarle. */
  .cr-cat-input.sm input { font-size: 16px !important; }


  /* ── 2 · Los paneles laterales se apilan ──────────────────────────
     Los tres paneles miden 240-246px fijos con flex-shrink:0, y la
     tabla de al lado esta limitada a calc(100% - 256px). En una
     pantalla de 390px eso deja 134px para la tabla: un tercio del
     ancho para la columna que importa, y dos tercios para el resumen.

     En columna el reparto desaparece: cada bloque toma el ancho
     completo. Las alturas fijas tambien se sueltan, porque apiladas
     se suman — 440 + 460 dejarian la pantalla llena de vacio antes de
     llegar al contenido. */

  /* Ordering */
  .vsp-layout                     { flex-direction: column; }
  .vsp-layout .vendor-table-shell { max-width: none; }
  .vsp-panel {
    width: auto;
    padding: 14px;
    /* El resumen sube por encima de la tabla. Es lo que dice cuanto
       llevas por proveedor, y decide si sigues o mandas la orden: en
       vertical, debajo de una tabla larga no se ve nunca. */
    order: -1;
  }

  /* Inventory */
  .inv-layout                    { flex-direction: column; }
  .inv-layout > .tablewrap       { width: 100%; }
  .inv-layout .inv-item-panel,
  .inv-item-panel {
    width: auto;
    height: auto;
    /* En escritorio va pegado al hacer scroll (sticky, top 80px). En
       columna eso lo dejaria flotando sobre la tabla. */
    position: static;
    align-self: auto;
    /* Con altura fija recortaba lo que sobraba; con altura automatica
       recortaria contenido real. */
    overflow: visible;
    order: -1;
  }

  /* Cost Report */
  .cr-layout { grid-template-columns: minmax(0, 1fr); }
  .cr-main,
  .cr-side   { height: auto; }
  /* Con altura automatica el scroll interno sobra: que la pagina
     entera se desplace. Dos areas de scroll anidadas en un telefono
     son una trampa — el dedo nunca sabe cual va a mover. */
  .cr-main-scroll { overflow-y: visible; }


  /* ── 3 · Order History ────────────────────────────────────────────
     No era un problema de tablas: el historial ya son tarjetas. La
     rejilla estaba escrita a mano en repeat(3,1fr) y el archivo
     order-history.css no tiene ni una media query, asi que en un
     telefono metia tres tarjetas en 390px — 117px cada una para un
     importe a 20px, la insignia del PO y dos botones de 34px. */
  .oh-card-grid { grid-template-columns: 1fr; }

  /* Los filtros son muchos y ya vienen con flex-wrap, pero apretados.
     Un poco menos de relleno y caben en dos lineas en vez de cuatro. */
  .oh-filter-chip { padding: 7px 13px; }

  /* La fila de vista previa mete meta + hora + acciones en una linea.
     Que la hora y los botones bajen en vez de aplastar el nombre. */
  .oh-prev-row  { flex-wrap: wrap; }
  .oh-prev-time { margin-left: 0; }


  /* ── 4 · Columnas de las tablas ───────────────────────────────────
     Se esconden por NOMBRE de clase, nunca por posicion. En Inventory
     la posicion no es fiable: al filtrar por proveedor la celda de
     VENDOR no se oculta, se deja de generar, y la fila pasa de ocho
     celdas a siete. Un :nth-child(4) seria ON HAND con filtro y
     VENDOR sin el — escondiendo la columna equivocada la mitad del
     tiempo. Por eso el HTML lleva clases col-* desde ahora.

     Nada de esto pierde informacion: en Inventory el registro
     completo esta en el panel de detalle, que en telefono quedo
     encima de la tabla. Se toca la fila y ahi esta todo. */

  /* Inventory: quedan ITEM, ON HAND y TO ORDER */
  .col-code,
  .col-vendor,
  .col-avg,
  .col-value    { display: none; }

  /* Ordering es mas conservador a proposito: aqui NO hay panel por
     articulo, solo el resumen por proveedor. On hand es el contexto
     con el que decides cuanto pedir, asi que se queda. Vendor sobra
     porque la tabla ya viene agrupada y el encabezado de seccion lo
     dice. Suggested se deduce de las otras dos. */
  .col-sugg     { display: none; }

  /* Los estados vacios abarcan colspan 7 y 8. El navegador lo recorta
     solo al haber menos columnas, pero dejarlo explicito centra bien
     el mensaje en vez de dejarlo corrido a la izquierda. */
  #inventoryBody td[colspan],
  #vendorBody    td[colspan] { text-align: center; }


  /* ── 5 · Anchos, con table-layout:fixed de por medio ──────────────
     #vendorExportArea table lleva table-layout:fixed. Bajo ese
     algoritmo el CONTENIDO NO INFLUYE en el ancho: mandan los anchos
     declarados, y las columnas que no declaran ninguno se reparten el
     sobrante EN PARTES IGUALES.

     Ese fue el error del intento anterior. Declare onhand y toorder y
     deje ITEM, la insignia y FINAL ORDER sin declarar, asi que ITEM se
     llevo un tercio de lo que quedaba — unos 23px — y solo cabia la
     primera letra. Con este algoritmo hay que declarar TODAS o
     ninguna.

     En porcentajes a proposito: la tabla es width:100%, asi que el
     reparto sale igual en un iPhone SE que en un Pro Max, sin tener
     que adivinar el ancho util. ITEM es la unica sin declarar, y por
     eso se queda con todo el resto: es el dato que identifica la
     fila y merece el sobrante, no una porcion igual. */
     Pero antes que nada: la tabla estaba forzada a 720px de ancho
     DENTRO de la propia media query de telefono (app.css:1989, y
     duplicado en fixes.css:674). Con eso no habia porcentaje que
     valiera — la tabla medía 720px en una pantalla de 390 y el scroll
     lateral era inevitable. Ese min-width era el scroll. */
  #vendorExportArea table,
  .history-items table { min-width: 0; }

  /* La insignia del precio se va. Es una columna entera para un icono
     que en escritorio sale gratis y aqui cuesta ~55px del nombre. */
  #vendorExportArea .badgecell,
  #vendorExportArea .badgehead { display: none; }

  /* Y aqui estaba el fallo del intento anterior. La tabla tiene un
     <colgroup>, y bajo table-layout:fixed los <col> MANDAN sobre los
     anchos declarados en las celdas. Los porcentajes que puse en los
     <td> nunca entraron en juego.

     Peor: al ocultar VENDOR y la insignia con display:none esas
     columnas dejan de existir, y las que quedan se corren a las
     posiciones 1..4 heredando anchos que no son suyos:

       ITEM     <- vendor-col  11%
       ON HAND  <- badge-col    5%
       TO ORDER <- item-col    34%   <- la gigante de la captura
       FINAL    <- onhand-col  10%

     Medido en pantalla: 22.7 / 9.1 / 68.3%. Predicho por esta
     hipotesis: 22.0 / 10.0 / 68.0%. Es esto.

     La solucion no es afinar porcentajes, es dejar UN solo sistema al
     mando. Se neutraliza el colgroup y se pasa a table-layout:auto,
     que reparte por contenido: ITEM tiene con diferencia el texto mas
     largo, asi que se queda con el sobrante sin que nadie se lo
     asigne. Ademas sigue siendo correcto si algun dia se anade o se
     quita una columna, cosa que con anchos fijos no pasaba.

     El selector lleva [class] para empatar en especificidad con
     `#vendorExportArea col.vendor-col` (1,1,1); cargando despues,
     gana. La segunda linea hace lo mismo con la variante
     .vendor-hidden, que es (1,2,1). */
  #vendorExportArea col[class],
  #vendorExportArea.vendor-hidden col[class] { width: auto; }
  #vendorExportArea table { table-layout: auto; }

  /* Con reparto por contenido estos anchos son sugerencias, no
     imposiciones: el navegador los respeta mientras el contenido
     quepa. Sirven para que las numericas no se estiren mas de lo que
     necesitan uno o dos digitos, y todo lo demas caiga en ITEM. */
  #vendorExportArea .col-onhand,
  #vendorExportArea .col-toorder { width: 52px; }
  #vendorExportArea .col-final   { width: 78px; }

  /* El relleno de 10px por lado son 20px por columna que salen del
     texto. A 5px se recuperan 50px de ancho util en cinco columnas,
     que es un tercio de lo que acaba midiendo ITEM. */
  #vendorExportArea th,
  #vendorExportArea td { padding: 8px 5px; }

  /* El nombre completo importa mas que la altura de la fila: que
     envuelva en dos lineas en vez de cortarse con puntos suspensivos.
     Lleva el prefijo del id porque la regla original que pone nowrap
     tambien lo lleva (app.css:75) y sin el no habria forma de ganarle. */
  #vendorExportArea td.col-item {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }

  /* Input y boton Auto en vertical. En horizontal la columna no baja
     de 80 + 52 + gap, y esos 140px salian del nombre del articulo.
     Apilados, la columna mide lo que mida el input. */
  #vendorExportArea .rowactions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 4px;
  }
  /* min-width le gana a width por mucho !important que lleve el width.
     Habia que atacar el min-width, no el ancho. */
  #vendorExportArea .rowactions input {
    width: 100%;
    min-width: 0;
  }
  #vendorExportArea .rowactions button {
    min-width: 0;
    padding: 3px 4px;
    font-size: 10px;
  }


  /* ── 6 · Pantalla de entrada ──────────────────────────────────────
     auth.css tampoco tenia ni una media query. El #authCard es un
     panel partido en dos en horizontal, y el lado de la marca son
     220px FIJOS con flex-shrink:0. Las cuentas en 390px:

       390 - 56 (relleno del overlay)      = 334 de tarjeta
       334 - 220 (marca)                   = 114 de formulario
       114 -  72 (relleno del cuerpo)      =  42 de campo util

     42px. Por eso no se podia escribir el correo.

     En vertical la marca deja de competir por el ancho y pasa a
     ocupar solo su altura. */
  #authOverlay { padding: 24px 14px; }
  #authCard    { width: 100%; flex-direction: column; }

  #authCardBrand {
    flex: 0 0 auto;
    padding: 22px 16px;
  }

  /* Los dos paneles se unian por el centro quitando el borde que se
     tocaba: la marca sin borde derecho y el cuerpo sin izquierdo. Al
     girar a vertical los lados que se tocan son otros, asi que hay que
     devolver los verticales y quitar los horizontales.

     Se toca STYLE y WIDTH pero nunca COLOR: el color del borde lo
     ponen dos reglas distintas segun el tema (auth.css lo define para
     oscuro y body.light lo redefine). Sin nombrarlo, cada tema
     conserva el suyo y esto sigue funcionando en claro y en oscuro. */
  #authCardBrand {
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-style: none;
  }
  #authCardBody {
    border-left-style: solid;
    border-left-width: 1px;
    border-top-style: none;
    padding: 24px 20px;
  }

  /* Dos columnas en 300px no son dos columnas. */
  .auth-grid-2 { grid-template-columns: 1fr; }

  /* El paso 1 de este archivo NO llegaba aqui: la regla generica es
     `input` (0,0,1) y `.auth-field input` es (0,2,1), asi que ganaba
     los 14px y Safari seguia acercando la pantalla justo al escribir
     el correo. Con la misma especificidad y cargando despues, gana
     esta. */
  .auth-field input,
  .auth-field select,
  .auth-field textarea { font-size: 16px; }

}