/* web/frontend/css/legible_controles.css — CAPA DE LEGIBILIDAD, parte 2.

   SEGUNDA MITAD de css/legible.css: allá está cómo se LEE (escala de tamaño,
   mapa de contraste, no truncar); acá cómo se TOCA y qué se destaca (blancos de
   toque, el dato importante, nunca-sólo-color, y que nada se salga a 380px).
   Están separados sólo para respetar el límite de 200 líneas por archivo: son
   UNA capa, cuelgan de la MISMA clase `legible` y se cargan siempre juntos
   (index.html y login.html). El porqué completo está en la cabecera de
   legible.css — conviene leer ese archivo primero.

   SÓLO EN CELULAR (Sol, 2026-08-09): igual que legible.css, TODO cuelga de
   `max-width: 767px`. En escritorio no agranda ni cambia los blancos de toque.

   ════════ 4 · BLANCOS DE TOQUE ≥48px ════════
   Si toca el botón de al lado por error, pierde confianza en la app. */

@media (max-width: 767px) {

.legible button,
.legible select,
.legible summary,
.legible a.submenu-item,
.legible input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  min-height: 48px;
}

.legible button,
.legible summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Un hijo `block` DENTRO de un botón estaba pensado para ocupar su renglón: el
   aviso "Sol te pidió que revises 3 productos" + "Tocá acá para contarlos →"
   son dos líneas APILADAS. Al volver flex el botón quedaban lado a lado, en dos
   columnas angostas. Ocupando la fila entera vuelven a apilarse. */
.legible button > .block { flex-basis: 100%; }

/* Los botones-fila (menú, tarjetas) alinean a la izquierda, no al centro. */
#sidebar.legible button,
.legible .inv-panel summary,
.legible button.w-full { justify-content: flex-start; }

.legible a.submenu-item { display: flex; align-items: center; }

/* El NOMBRE de la card es un link a la publicación: es tap target, no adorno.
   Con una sola línea medía 30px. */
.legible .card-nombre a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* Casilleros de verificación: el de "Recordarme" medía 13px. */
.legible input[type="checkbox"],
.legible input[type="radio"] { width: 1.5rem; height: 1.5rem; }

/* Buscar / dictar / escanear del Catálogo: es CÓMO Gustavo llega al producto,
   pero comparten renglón con los botones de escritura de Sol (Editar, Exportar,
   Actualizar), que quedan afuera del alcance. Por eso van por ID y no con la
   clase en el contenedor: se agranda lo suyo sin tocar lo de ella. */
#cat-busqueda, #cat-mic, #cat-escaner {
  min-height: 48px;
  font-size: 1.1875rem;
}

/* Separación entre controles: que no se toquen nunca. */
.legible .gap-1 { gap: .5rem; }
.legible .gap-1\.5 { gap: .625rem; }
.legible .gap-2 { gap: .75rem; }
.legible .gap-3 { gap: 1rem; }

/* ════════ 5 · EL DATO QUE IMPORTA, ENORME ════════
   Cantidad, SKU y nombre se tienen que leer de un vistazo, a un brazo de
   distancia. `dato-clave`/`dato-sku` las ponen los renderizadores sobre ESE
   dato, no sobre la fila entera. */
.legible .dato-clave {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .01em;
}

/* El SKU es un código: tabular para que 0/O y 1/I no se confundan. */
.legible .dato-sku {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Los casilleros donde se escribe la CANTIDAD: es el número que queda
   registrado, y el que decide si algo entra como bueno o como fallado.
   El min-width es para que el rótulo "Cantidad" entre entero: con la letra
   grande, el w-28 (112px) de origen lo cortaba en "Cantid". */
.legible #inv-cant,
.legible #inv-def,
.legible [id^="df-cant-"] {
  font-size: 1.5rem;
  font-weight: 700;
  min-height: 56px;
  min-width: 9rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ════════ 6 · NUNCA EL COLOR SOLO ════════
   El casillero que el dictado acaba de escribir se marcaba SÓLO con fondo
   ámbar. Se le suma un borde grueso —forma, no tono— y el JS le pone además el
   texto en `title` (ver js/inventario/inventario_voz_destino.js). */
.legible .bg-amber-100 { outline: 3px solid #78350f; outline-offset: 1px; }

/* El casillero ELEGIDO para el dictado: el anillo sky-400 era muy tenue. */
.legible .ring-sky-400 { --tw-ring-color: #0369a1; --tw-ring-offset-width: 2px; }

/* ════════ 7 · 380px ES EL TAMAÑO REAL ════════
   NO se usa `overflow-x:hidden`: eso TAPA el desborde en vez de arreglarlo, y
   lo que queda afuera queda inalcanzable —así se estaba comiendo el botón
   [Guardar] de Diferencias Full—. Se arregla la causa: los renglones de
   acciones ENVUELVEN en vez de salirse. (flex-col excluido: la sidebar es una
   columna y envolverla la partiría en dos.) */
.legible .flex:not(.flex-col) { flex-wrap: wrap; }

/* Códigos largos sin espacios (EAN, SKU) no empujan el ancho de la pantalla. */
.legible { overflow-wrap: break-word; }
.legible img, .legible table { max-width: 100%; }

}

/* Una card por fila: dos columnas de 180px obligan a letra chica. Ya está
   dentro del alcance celular (≤640 ⊂ ≤767). */
@media (max-width: 640px) {
  .legible #cat-cards-grid > div { width: 100%; }
}