/*
 * 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 {
  --fondo: #f7f8fa;
  --papel: #ffffff;
  --tinta: #1c2430;
  --tinta-suave: #4a5462;
  --borde: #c9d1da;
  --marca: #0a6470;
  --marca-oscura: #084f59;
  --alerta: #a32b22;
  --exito: #2c6e49;
  --aviso: #9a6100;

  /* 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; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.principal { max-width: 60rem; margin: 0 auto; padding: 1rem; }

h1, h2, h3 { line-height: 1.25; margin: 1.5rem 0 0.75rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }

a { color: var(--marca); }

/* --- the one that is not cosmetic ------------------------------------- *
 * Used in four templates and never defined, so the intake screen printed
 * every photo position's name TWICE per slot — seven times on the page. Text
 * written only for screen readers was being shown to everyone.
 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- navigation -------------------------------------------------------- */
header nav, .migas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.migas { font-size: 0.9rem; margin-bottom: 0.5rem; }

/* --- forms ------------------------------------------------------------- *
 * 16px minimum on every control: below that, iOS Safari zooms on focus, and
 * with gloves on that is a failure, not a nuisance.
 */
.campo { margin: 0 0 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

input, select, textarea {
  font: inherit;
  font-size: 16px;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
}
textarea { min-height: 7rem; resize: vertical; }

/* The most-pressed control on the intake screen: seven file inputs and seven
 * submits. The button inside a file input needs its own sizing in both
 * engines or it stays tiny. */
input[type="file"] { padding: 0.5rem; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  min-height: 44px;
  padding: 0 1rem;
  margin-right: 0.75rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--fondo);
  cursor: pointer;
}

.campo--interruptor { display: flex; align-items: center; gap: 0.6rem; }
.campo--interruptor input[type="checkbox"] {
  width: 24px; height: 24px; min-height: 0; flex: 0 0 auto;
}
/* The label is part of the target: a 24px box alone is not enough with gloves. */
.campo--interruptor label { margin: 0; min-height: 44px; display: flex; align-items: center; }

.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--alerta); }
.requerido { color: var(--alerta); }
.ayuda, .nota { color: var(--tinta-suave); font-size: 0.9rem; }
.error { color: var(--alerta); font-weight: 600; }
.errores-resumen {
  border: 2px solid var(--alerta);
  background: #fdf2f1;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.campo__con-boton { display: flex; gap: 0.5rem; align-items: stretch; }
.campo__con-boton select { flex: 1 1 auto; }

fieldset { border: 1px solid var(--borde); border-radius: 8px; padding: 1rem; margin: 0 0 1.5rem; }
legend { font-weight: 700; padding: 0 0.4rem; }

/* --- buttons ----------------------------------------------------------- */
.boton, button, .boton-mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}
.boton--primario, button[type="submit"] {
  background: var(--marca);
  border-color: var(--marca-oscura);
  color: #fff;
}
.boton-mas { width: 48px; padding: 0; font-size: 1.4rem; }
.cancelar { display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.75rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.acciones-principales { margin: 0.5rem 0 1.5rem; }

.busqueda { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.busqueda label { font-weight: 600; }
.busqueda input, .busqueda select { width: auto; min-width: 12rem; }

/* --- tables ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; background: var(--papel); }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--borde); }
th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinta-suave); }
.fila--inactiva { opacity: 0.55; }
.tabla-ot td:first-child { font-variant-numeric: tabular-nums; font-weight: 700; }
.estado-pastilla {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 0.9rem;
}
.vacio { color: var(--tinta-suave); font-style: italic; }
.ficha__dato { margin: 0.35rem 0; }

/* --- catalogues and the "+" dialog ------------------------------------- *
 * `modal.js` creates this element; it appears in no template, so with no CSS
 * it rendered edge to edge with UA styling on a phone. It is the "+" button
 * the README advertises as a feature.
 */
.catalogos { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
.modal-catalogo {
  width: min(34rem, 92vw);
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
}
.modal-catalogo::backdrop { background: rgb(0 0 0 / 45%); }

/* --- intake: photos ---------------------------------------------------- */
.rejilla-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.ranura {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--papel);
}
.ranura__nombre { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.ranura__vacia { color: var(--tinta-suave); font-size: 0.9rem; }
.ranura--lista { border-color: var(--exito); }
.foto { max-width: 100%; height: auto; border-radius: 6px; display: block; }

/* --- intake: the damage diagram ---------------------------------------- *
 * `manipulation`, not `none`. `ingreso.js` binds only `pointerdown` — the mark
 * lands on the tap, there is no drag — so `none` would buy no reliability and
 * would create a dead zone the size of the diagram that the page cannot be
 * scrolled through with a thumb.
 */
.diagrama { margin: 1rem 0; }
.silueta {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  touch-action: manipulation;
}
.silueta--interactiva {
  cursor: crosshair;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.marca { fill: var(--dano-fondo); }
/* Same colour `ingreso.js` sets inline for a provisional mark. Two places, one
 * value: if they drift, a mark changes colour when the page reloads. */
.marca--nueva { fill: var(--marca); }
.lista-danos { padding-left: 1.2rem; }

/* --- intake: the signature --------------------------------------------- *
 * Here the drag IS the gesture, so `none` is right. The canvas is scaled by
 * CSS and `ingreso.js` already maps coordinates by `lienzo.width / caja.width`
 * — it was written for a scaled canvas that did not exist yet, so the fixed
 * width="600" overflowed a 375px phone sideways.
 */
.firma { margin: 1rem 0; }
#firma-canvas {
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px dashed var(--borde);
  border-radius: 8px;
  background: var(--papel);
  touch-action: none;
}
.aviso-cerrado {
  border-left: 4px solid var(--exito);
  background: #eef7f1;
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
}

@media (max-width: 30rem) {
  .principal { padding: 0.75rem; }
  .busqueda input, .busqueda select { min-width: 0; width: 100%; }
  .acciones .boton, .acciones button { width: 100%; }
}