/* web/frontend/css/legible.css — CAPA DE LEGIBILIDAD. POR QUÉ EXISTE: Gustavo NO VE BIEN. Es un dato médico, no una preferencia: trabaja en el depósito, de pie, con el CELULAR, con luz de galpón y las manos ocupadas. Si no puede leer la pantalla vuelve al lápiz y papel. SÓLO EN CELULAR, NO EN ESCRITORIO (Sol, 2026-08-09: "había pedido agrandarla en formato celular, no computadora"). TODA la capa cuelga de un media query `max-width: 767px`: en el teléfono se agranda y se corrige el contraste; en la computadora `.legible` no hace NADA y la pantalla queda igual que sin la capa. Antes agrandaba en los dos y en escritorio la letra quedaba enorme. ES PARA TODOS, no para un rol: en el celular, todos ven LO MISMO en esas pantallas (cuando él llama porque algo no se entiende, los dos miran igual). ALCANCE = PANTALLAS, NO EL ERP ENTERO. Cuelga de la clase `legible`: · pantalla entera → js/legible.js se la pone al (Control de Inventario, Diferencias Full, Mi cuenta) y login.html la trae escrita; · un pedazo → la clase va en el HTML (#sidebar y #menu-aviso en index.html; #cat-vista-cards en pages/catalogo.html). Así entran las CARDS del Catálogo y NO la Lista/tabla, que es sólo de Sol y tiene 53 columnas. UNA SOLA FORMA: las escalas de tamaño y el mapa de contraste viven ACÁ y en ningún otro lado; no se corrige clase por clase en los componentes. Los ratios son MEDIDOS sobre lo que pinta el navegador (computed styles), no sobre el hex escrito a mano. Piso WCAG AA (4.5:1); el cuerpo llega a AAA (7). Las utilidades de Tailwind son rem sobre el ROOT: se pisan por nombre, porque cambiar el font-size del contenedor no las movería. */ @media (max-width: 767px) { /* ════════ 1 · ESCALA DE TAMAÑO ════════ Piso 17px para TODO lo que hay que leer: ya no existe el 10/11/12px. 19px para lo que no trae clase de tamaño. */ .legible { font-size: 1.1875rem; line-height: 1.55; } .legible .text-\[10px\], .legible .text-\[11px\], .legible .text-\[12px\], .legible .text-\[13px\], .legible .text-xs { font-size: 1.0625rem; line-height: 1.5; } /* 17px */ .legible .text-sm { font-size: 1.1875rem; line-height: 1.5; } /* 19px */ .legible .text-base { font-size: 1.25rem; line-height: 1.5; } /* 20px */ .legible .text-lg { font-size: 1.375rem; line-height: 1.4; } /* 22px */ .legible .text-xl { font-size: 1.5rem; line-height: 1.35; } /* 24px */ .legible .text-2xl { font-size: 1.75rem; line-height: 1.3; } /* 28px */ .legible .text-3xl { font-size: 2rem; line-height: 1.25; } /* 32px */ /* Sin tipografías finas: el trazo delgado se pierde antes que el tamaño. */ .legible .font-normal { font-weight: 500; } .legible .font-medium { font-weight: 600; } /* ════════ 2 · CONTRASTE (medido) ════════ Los grises decorativos son JUSTO lo que no se distingue. Sobre superficies claras todos colapsan a slate-700 (#334155): 10.35:1 sobre blanco y 9.45:1 sobre slate-100 — AAA en los dos. Antes slate-400 daba 2.56:1 / 2.34:1 (reprobaba AA) y slate-500 4.76:1 / 4.34:1. */ .legible .text-slate-300, .legible .text-slate-400, .legible .text-slate-500, .legible .text-slate-600 { color: #334155; } /* La sidebar es slate-900: ahí el gris hay que ACLARARLO, no oscurecerlo. slate-500 sobre slate-900 daba 3.75:1 (reprobaba AA); slate-200 da 14.48:1. Gana por especificidad de id sobre la regla de arriba. */ #sidebar.legible .text-slate-300, #sidebar.legible .text-slate-400, #sidebar.legible .text-slate-500, #mobile-topbar .text-slate-400 { color: #e2e8f0; } /* Texto de color sobre fondo claro: un escalón más oscuro para llegar a AAA. Sobre blanco: emerald-700 5.48→7.68 · sky-700 5.93→7.56. Sobre su propio fondo pastel: amber-800 6.84→8.75 · red-700 5.91→7.60. */ .legible .text-emerald-700 { color: #065f46; } .legible .text-sky-700 { color: #075985; } .legible .text-red-700 { color: #991b1b; } /* amber-600 daba 3.19:1 sobre blanco: REPROBABA AA, y es justo el color del aviso "⚠ sin dato de ML" — el cartel que dice que el stock que está mirando puede no ser el real. Pasa a 9.07:1. */ .legible .text-amber-600, .legible .text-amber-700, .legible .text-amber-800 { color: #78350f; } /* Blanco sobre color: los botones sólidos reprobaban AA. Se bajan dos escalones para llegar a AAA, no sólo a AA (Confirmar, Retomar, Guardar y Cerrar son los botones que ejecutan el trabajo — no son decoración). emerald-600 3.77→7.68 · sky-600 4.10→7.56 · indigo-600 6.29→7.90. */ .legible .bg-emerald-600 { background-color: #065f46; } .legible .bg-sky-600 { background-color: #075985; } .legible .bg-indigo-600 { background-color: #4338ca; } /* El hover de origen apuntaba al escalón -700, que ahora es MÁS CLARO que el fondo nuevo: quedaría un botón que se aclara al tocarlo. Se corrige el par. */ .legible .hover\:bg-emerald-700:hover { background-color: #064e3b; } .legible .hover\:bg-sky-700:hover { background-color: #0c4a6e; } /* amber-400/500 con texto BLANCO daba 2.15:1, el peor de todos. El ámbar es un fondo claro: el texto va oscuro, nunca blanco → 7.50:1 sobre amber-500 y 9.64:1 sobre amber-400. El amber-900 explícito (la segunda línea del aviso "Sol te pidió…", que va SOBRE el ámbar) daba 5.43:1: entra en el mismo tono. */ .legible .bg-amber-400, .legible .bg-amber-500, .legible .text-amber-900 { color: #3f1300; } /* ════════ 3 · NADA SE CORTA ════════ Truncar el NOMBRE o el SKU no es un problema estético: son los dos datos con los que se identifica el producto que se tiene en la mano. Que envuelva. */ .legible .truncate { overflow: visible; text-overflow: clip; white-space: normal; } /* Alturas fijas que recortaban texto (el nombre de la card entraba en h-9). */ .legible .card-nombre { height: auto; overflow: visible; } /* Los visores con scroll propio (inline style `max-height:58vh`) dejan tres renglones útiles con letra grande: que scrollee la página, no una caja adentro de otra. !important porque pisa un estilo inline. */ .legible #cat-cards-grid { max-height: none !important; } }