/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Se usa en el patio, con sol, con guantes y con una mano. De ahí sale todo lo de abajo:
   contraste alto, botones de 48 px y nada que dependa de apuntarle fino a algo.

   🔴 LOS COLORES SON UN IDIOMA, NO UNA DECORACIÓN:
      rojo = vencido · ámbar = ya merito · AMARILLO RAYADO = la app está ciega · verde = al día.
      El rayado existe para que «no sé» no se pueda confundir de lejos con «todo bien», que es la
      mentira que esta app viene a quitar.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --fondo:#f1f5f9; --papel:#ffffff; --tinta:#0f172a; --apagado:#64748b; --raya:#e2e8f0;
  --acento:#1d4ed8; --acento-tinta:#ffffff;
  --vencido:#b91c1c; --vencido-suave:#fee2e2;
  --proximo:#b45309; --proximo-suave:#fef3c7;
  --ciego:#a16207;   --ciego-suave:#fefce8;
  --bien:#15803d;    --bien-suave:#dcfce7;
  --sombra:0 1px 2px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.06);
  --radio:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo:#0b1220; --papel:#131c2e; --tinta:#e8eefc; --apagado:#94a3b8; --raya:#24314c;
    --acento:#60a5fa; --acento-tinta:#08111f;
    --vencido:#fca5a5; --vencido-suave:#3f1414;
    --proximo:#fcd34d; --proximo-suave:#3a2a08;
    --ciego:#fde68a;   --ciego-suave:#332a07;
    --bien:#86efac;    --bien-suave:#0f2e1c;
    --sombra:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
/* ⚠️ Sin esto, `hidden` NO esconde nada: cualquier `display:flex` de más abajo le gana a la regla
   del navegador, y el portón de la entrada se queda pintado debajo de la app ya abierta. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--tinta);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0 0 .4em; line-height:1.2}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
.apagado{color:var(--apagado)}
.error{color:var(--vencido); font-weight:600}
.chico{font-size:.82rem}

/* ── Portón ───────────────────────────────────────────────────────────────────────────────────── */
.portón{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.entrada{width:100%; max-width:380px}
.entrada label{display:block; margin:14px 0}
.entrada input{width:100%}

/* ── Armazón ──────────────────────────────────────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--papel); border-bottom:1px solid var(--raya);
}
.barra strong{flex:1; text-align:center; font-size:1.05rem}
.icono{
  width:44px; height:44px; border:0; border-radius:12px; background:transparent; color:var(--tinta);
  font-size:1.25rem; cursor:pointer;
}
.icono:active{background:var(--raya)}
.nav{
  position:sticky; top:64px; z-index:19; background:var(--papel); border-bottom:1px solid var(--raya);
  display:flex; flex-direction:column; padding:6px;
}
.nav button{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border:0;
  background:transparent; color:var(--tinta); font-size:1rem; text-align:left; border-radius:10px; cursor:pointer;
}
.nav button[aria-current="true"]{background:var(--acento); color:var(--acento-tinta); font-weight:600}
.pantalla{padding:14px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); max-width:780px; margin:0 auto}

/* ── Piezas ───────────────────────────────────────────────────────────────────────────────────── */
.tarjeta{background:var(--papel); border-radius:var(--radio); box-shadow:var(--sombra); padding:16px; margin-bottom:12px}
.botón{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px;
  border:0; border-radius:12px; background:var(--acento); color:var(--acento-tinta);
  font-size:1rem; font-weight:600; cursor:pointer;
}
.botón.grande{width:100%; margin-top:8px}
.botón.calma{background:var(--raya); color:var(--tinta)}
.botón.peligro{background:var(--vencido); color:#fff}
.botón:disabled{opacity:.5}
input,select,textarea{
  /* 16px a fuerza: abajo de eso el teléfono hace zoom solo cada vez que el operador toca un campo. */
  font-size:16px; min-height:48px; width:100%; padding:10px 12px; color:var(--tinta);
  background:var(--papel); border:1px solid var(--raya); border-radius:10px;
}
textarea{min-height:88px; line-height:1.4}
label{font-weight:600; font-size:.9rem}
label input,label select,label textarea{font-weight:400; margin-top:6px}
.renglones{display:grid; grid-template-columns:1fr; gap:10px}
.fila{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.crece{flex:1; min-width:0}
.sep{height:1px; background:var(--raya); margin:12px 0}

/* ── El idioma de los colores ─────────────────────────────────────────────────────────────────── */
.marca{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:.8rem; font-weight:700; white-space:nowrap;
}
.marca.vencido{background:var(--vencido-suave); color:var(--vencido)}
.marca.proximo{background:var(--proximo-suave); color:var(--proximo)}
.marca.ok     {background:var(--bien-suave);    color:var(--bien)}
.marca.sin_dato{
  color:var(--ciego);
  /* El rayado es a propósito: de lejos y con sol, un amarillo liso se confunde con verde. */
  background:repeating-linear-gradient(135deg,var(--ciego-suave),var(--ciego-suave) 6px,transparent 6px,transparent 12px);
  border:1px dashed var(--ciego);
}
.renglón{
  display:block; width:100%; text-align:left; background:var(--papel); border:1px solid var(--raya);
  border-left:5px solid var(--raya); border-radius:12px; padding:12px 14px; margin-bottom:8px;
  color:var(--tinta); font-size:1rem; cursor:pointer;
}
.renglón.vencido {border-left-color:var(--vencido)}
.renglón.proximo {border-left-color:var(--proximo)}
.renglón.ok      {border-left-color:var(--bien)}
.renglón.sin_dato{border-left-color:var(--ciego); border-left-style:dashed}
.renglón b{display:block; font-size:1.02rem}

/* ── Checklist: todo empieza en «bien» y sólo se toca lo que está mal ─────────────────────────── */
.chk{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--raya);
     border-radius:12px; background:var(--papel); margin-bottom:8px}
.chk .texto{flex:1; min-width:0}
.chk .par{display:flex; gap:6px}
.chk button{min-width:64px; min-height:44px; border-radius:10px; border:1px solid var(--raya);
            background:transparent; color:var(--apagado); font-weight:700; cursor:pointer}
.chk[data-r="bien"] .b{background:var(--bien-suave); color:var(--bien); border-color:var(--bien)}
.chk[data-r="mal"]  .m{background:var(--vencido-suave); color:var(--vencido); border-color:var(--vencido)}
.chk[data-r="mal"]{border-color:var(--vencido)}
.chk .detiene{font-size:.72rem; color:var(--vencido); font-weight:700}

/* ── Croquis de llantas ───────────────────────────────────────────────────────────────────────── */
.croquis{width:100%; height:auto; display:block; margin:0 auto; max-width:420px}
.croquis .cuerpo{fill:var(--papel); stroke:var(--raya); stroke-width:2}
.croquis .eje{stroke:var(--raya); stroke-width:6; stroke-linecap:round}
.croquis .llanta{cursor:pointer}
.croquis .hule{fill:var(--raya); stroke:var(--apagado); stroke-width:1.5; rx:6}
.croquis .llanta[data-estado="vacía"] .hule{fill:transparent; stroke-dasharray:5 4}
.croquis .llanta[data-estado="dudosa"] .hule{stroke:var(--ciego); stroke-width:2.5; stroke-dasharray:6 3}
.croquis .llanta[aria-pressed="true"] .hule{stroke:var(--acento); stroke-width:3}
.croquis text{font-size:11px; fill:var(--tinta); font-weight:700; text-anchor:middle}
.croquis .km{font-size:9.5px; fill:var(--apagado); font-weight:500}

/* ── Avisos ───────────────────────────────────────────────────────────────────────────────────── */
.aviso{
  position:fixed; left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:60;
  background:var(--tinta); color:var(--fondo); padding:14px 16px; border-radius:12px;
  box-shadow:var(--sombra); font-weight:600;
}
.aviso.mal{background:var(--vencido); color:#fff}
.cargando{padding:28px; text-align:center; color:var(--apagado)}
.vacío{padding:22px; text-align:center; color:var(--apagado); border:1px dashed var(--raya); border-radius:12px}
.tabla{width:100%; border-collapse:collapse; font-size:.92rem}
.tabla th,.tabla td{padding:8px 6px; border-bottom:1px solid var(--raya); text-align:left}
.tabla td.n,.tabla th.n{text-align:right; font-variant-numeric:tabular-nums}
/* En pantalla grande el menú no se esconde: hay lugar de sobra y ahorra un toque. */
@media (min-width:720px){
  .nav{flex-direction:row; flex-wrap:wrap; top:0; position:static}
  #nav[hidden]{display:flex !important}
  .nav button{flex:1 1 auto; justify-content:center}
}