/* * Full Garage — hand-written, no build step. * * There is no Node in this repository and none in the production image. The * class vocabulary in the templates is semantic and in Spanish — `ranura`, * `campo--interruptor`, `rejilla-fotos` — not utilities, so a Tailwind scan * would have nothing to emit. AGENTS.md claimed a Vite pipeline for months; * it never existed. * * NOT in a `dist/` directory, deliberately. When Vite does arrive with H4 (the * React island and the PWA), its `emptyOutDir` deletes whatever it finds there * — and the symptom would appear on an advisor's phone, not in CI. * * What drives every number below: the screen that matters is the intake * checklist, used on a phone, in a workshop, by someone wearing gloves, with * the car in front of them. Touch target sizes and font sizes here are not * taste. */ :root { /* ESCALAS. Antes sólo había color: quince variables y ninguna de espacio, de tipo, de radio ni de sombra. Sin ellas cada pantalla inventa sus números y el resultado se lee como «a medio hacer» aunque cada pieza esté bien. */ --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --sombra-1: 0 1px 2px rgba(18, 26, 33, .06), 0 1px 3px rgba(18, 26, 33, .04); --sombra-2: 0 2px 4px rgba(18, 26, 33, .06), 0 4px 12px rgba(18, 26, 33, .06); /* EL ALTO DE LA BARRA DE ARRIBA, que es pegajosa y va encima de todo. Lo que se pega debajo de ella lo descuenta de aquí. El árbol y la guía del manual se pegaban a 1rem del borde de la VENTANA y la barra les tapaba 52 px de cabeza; el dueño lo mandó en captura el 2026-09-11: «siempre deberían estar visibles desde tope y no cortarse al hacer scroll». MEDIDO, NO SUPUESTO, en un banco con las plantillas reales renderizadas: 69 px (68,57 en una pantalla al 175 %, donde el filete de 1px se pinta con un solo píxel físico). Los comentarios de la hoja suponían «~3.4rem», 54 px, y no: lo que manda es «Salir», que mide 44 px como todo botón de la aplicación. Por eso va escrito con sus piezas y no como un número suelto: el botón, el relleno de `.barra__fila` arriba y abajo, y el filete. Y VALE EN CUALQUIER ANCHO PORQUE LA BARRA YA NO CRECE. La fila no se envuelve, y el nombre del taller se partía en tantas líneas como pidiera: con «Taller de pruebas del banco» la barra medía 82,56 px a 375 de ancho y 120,94 a 320, con una razón social de 65 letras 159 px, y saltar a un apartado dejaba el título ENTERO debajo de ella. Ahora `.barra__taller` corta en dos líneas, que caben en los 44 px del botón. Las piezas de esta cuenta las cruza con la hoja `test_la_ayuda_llega_a_su_apartado.py`. */ --alto-barra: calc(44px + 2 * var(--e-3) + 1px); /* La familia. `system-ui` era lo único que había, y es la razón de que la aplicación no se pareciera a nada. Archivo es una grotesca industrial: alta legibilidad a tamaño pequeño y una Narrow para las cabeceras densas. */ --letra: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --letra-titulo: "Archivo Narrow", "Arial Narrow", var(--letra); --letra-dato: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --fondo: #f7f8fa; --papel: #ffffff; --tinta: #1c2430; --tinta-suave: #4a5462; --borde: #c9d1da; --marca: #0a6470; --marca-oscura: #084f59; --alerta: #a32b22; --exito: #2c6e49; --aviso: #8a5b00; /* Los PISOS de cada estado. Un color de texto sin fondo obliga a inventar uno en cada pantalla, y ahí es donde aparecen los ocho verdes distintos. */ --alerta-piso: #fbeae8; --exito-piso: #e6f2eb; --aviso-piso: #fbf0dc; --marca-piso: #e4f0f1; --papel-alt: #edf1f2; --borde-firme: #c3ced3; /* The vehicle silhouette. `_silueta.html` uses these five and nothing * defined them, so the diagram rendered with the browser's defaults. */ --silueta-fondo: #eceff3; /* 5.35:1 on the background, 4.51:1 on the glass. The previous shade was * 4.11:1 — fine for graphics, and this colour also paints the FRENTE/ATRÁS * labels, which are text and need 4.5:1. */ --silueta-linea: #5a626d; --silueta-vidrio: #d6dde6; --silueta-techo: #e2e7ee; --dano-fondo: #a32b22; } *, *::before, *::after { box-sizing: border-box; } /* `hidden` ESCONDE, DIGA LO QUE DIGA UNA CLASE. * * La regla del navegador es `[hidden] { display: none }` SIN `!important`, así * que cualquier clase de esta hoja que ponga `display` la pisa y no avisa. Pasó * con el asistente: `.ia__panel` pone `display: flex`, la plantilla lo hace * nacer con `hidden` y el guion hace bien `panel.hidden = true` al cerrar -- y * aun así el panel salía ABIERTO en todas las pantallas y la × no lo cerraba. * El dueño lo mandó en captura el 2026-09-11: «la "x" no cierra la pantalla» y * «la ventana flotante debe iniciarse cerrada». * * Aquí, y no un `.ia__panel[hidden]` suelto: la trampa es de la cascada y no * del panel, y el próximo elemento con `hidden` y una clase con `display` caería * igual. Los que ya lo usaban --el aviso del tablero, el del vídeo y la firma del * ingreso-- no ponen `display`, así que para ellos no cambia nada. */ [hidden] { display: none !important; } body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 var(--letra); -webkit-font-smoothing: antialiased; } /* EL CONTENEDOR VA EN `main`, no en una clase. * * Aquí había un `.principal { max-width: 60rem }` que quería ser el contenedor * de la página -- y el único elemento con esa clase en todo el proyecto es el * `