/* ============================================================
   Rustisnorkel — añadidos propios del sistema real.

   REGLA: tokens.css es copia byte-idéntica del diseño aprobado en la demo y NO se toca acá.
   Este archivo es solo para lo que el sistema tiene y la demo no (pantallas nuevas, flujos
   que la demo no simulaba). Si un cambio sirve a ambos, va en la demo y se recopia.
   ============================================================ */

/* El tracker del sistema tiene 5 etapas (la demo mostraba 4): a 375px las etiquetas
   se apelotonan y envuelven en 3 líneas. Se achican solo en pantallas angostas. */
@media (max-width:560px){
  .tracker__step small{font-size:.62rem;line-height:1.25;letter-spacing:-.01em}
  .tracker__dot{width:28px;height:28px;margin-bottom:.4rem}
  .tracker__dot svg{width:14px;height:14px}
  .tracker__step::before{top:13px}
}

/* Formularios de carga de archivos: el input nativo de archivo no hereda .input. */
.input[type="file"]{padding:.6rem .8rem;font-size:.9rem}

/* ---------- avisos (resultado de la última acción) ----------
   El sistema real falla de formas que la demo no simulaba (sin stock, sin permiso,
   dato inválido). El motivo tiene que verse donde el usuario está mirando. */
.aviso{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem 1rem;margin-bottom:1.2rem;
  border-radius:var(--radius-sm);border:1px solid;
  font-size:.92rem;line-height:1.45;
  animation:aviso-in .25s ease-out;
}
.aviso svg{width:18px;height:18px;flex:none;margin-top:1px}
.aviso__x{
  margin-left:auto;flex:none;background:none;border:0;cursor:pointer;
  color:inherit;opacity:.55;padding:0;display:flex;
}
.aviso__x:hover{opacity:1}
.aviso__x svg{width:15px;height:15px}
.aviso--error{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.aviso--exito{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.aviso--aviso{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
@keyframes aviso-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aviso{animation:none}}

/* ---------- botón enviando ----------
   Da señal de que la acción se está procesando y desalienta el segundo toque.
   El bloqueo real lo hace app-ui.js; esto es solo lo que el usuario ve. */
.btn.is-cargando{position:relative;color:transparent!important;pointer-events:none}
.btn.is-cargando svg{opacity:0}
.btn.is-cargando::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:1.05em;height:1.05em;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--accent-ink);
  animation:girar .6s linear infinite;
}
.btn--ghost.is-cargando::after{color:var(--text)}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.is-cargando::after{animation-duration:1.6s}
}

/* Área táctil mínima en móvil: los botones pequeños del taller se usan con guantes.
   44px es la recomendación de Apple HIG; 24px de icono no basta. */
@media (max-width:560px){
  .btn--sm{min-height:40px}
  .aviso__x{min-width:32px;min-height:32px;align-items:center;justify-content:center}
}

/* ---------- pasos numerados en el formulario de recibir ----------
   El taller piensa en "quién / qué vehículo / qué hay que hacerle". Numerarlo
   convierte un formulario largo en tres preguntas cortas. */
.paso{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.paso__n{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:.75rem;font-weight:800;
}
.paso label{margin:0;font-weight:700;color:var(--text)}

/* ---------- guía del primer día ---------- */
.paso-guia{
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;margin-bottom:.6rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s,transform .15s;
}
.paso-guia:hover{border-color:var(--accent);background:var(--surf-2);transform:translateX(2px)}
.paso-guia__ic{
  width:36px;height:36px;flex:none;border-radius:10px;
  background:var(--surf-2);color:var(--accent);
  display:grid;place-items:center;
}
.paso-guia__ic svg{width:18px;height:18px}
.paso-guia__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.paso-guia__txt small{color:var(--muted);font-size:.85rem;line-height:1.4}
.paso-guia__ir{margin-left:auto;color:var(--faint);flex:none}
.paso-guia__ir svg{width:16px;height:16px}
.paso-guia--hecho{opacity:.55}
.paso-guia--hecho .paso-guia__ic{background:var(--ok-bg);color:var(--ok)}
.paso-guia--hecho b{text-decoration:line-through;text-decoration-color:var(--faint)}
@media (prefers-reduced-motion:reduce){.paso-guia:hover{transform:none}}

/* ---------- vacíos que dicen qué hacer ----------
   "Sin datos" deja al usuario parado; esto le da el siguiente paso. */
.vacio{text-align:center;padding:2.5rem 1rem}
.vacio__ic{
  width:52px;height:52px;margin:0 auto 1rem;border-radius:14px;
  background:var(--surf-2);color:var(--faint);
  display:grid;place-items:center;
}
.vacio__ic svg{width:26px;height:26px}
.vacio b{display:block;margin-bottom:.35rem;font-size:1.05rem}
.vacio p{max-width:38ch;margin:0 auto}