/* ── TRAZA · paso a paso de un lote (js/pasos.js) ─────────────────
   Todas las disposiciones: CLASSIC con su azul (--acc) y, dentro del marco
   (body.shell-on), el dorado de la marca, porque solo se usan las variables.
   Un vocabulario de estados: Pendiente gris · Ahora anillo del acento ·
   En marcha petróleo (--frio) · Hecho verde · Desviación rojo. */
.lote-pantalla{--p-gris:#6B6255;--p-gris-fondo:#F1EDE3;--p-linea:#E2D9C3;--p-marxa:var(--frio,#0B7285);
  --p-marxa-fondo:#DDEFF2;--p-ok-fondo:#E3F1E7;--p-stop-fondo:#FCECEA;--p-acc-fondo:color-mix(in srgb,var(--acc) 12%,#fff)}

/* cabecera compacta: producto y código en una línea */
.lote-pantalla .lote-cab{margin:2px 2px 10px;flex-wrap:wrap;justify-content:flex-start}
.lote-pantalla .lote-cab .shell-cintillo{flex-basis:100%;margin:0}   /* con el marco, el cintillo encima del título */
.lote-pantalla .lote-cab .foto-plato{margin-left:auto}
.lote-pantalla .lote-cab h1{margin:0;font-size:24px;line-height:1.2;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.lote-codigo{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:15px;font-weight:600;color:var(--muted)}
.lote-pantalla .foto-mini.foto-plato{width:64px;height:64px;flex-basis:64px}
.lote-pantalla h3{margin:16px 2px 10px}

/* tarjeta a la izquierda, diagrama a la derecha */
.lote-pasos{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,2fr);gap:16px;align-items:start;margin-bottom:12px}
@media (max-width:1000px){.lote-pasos{grid-template-columns:1fr}}

/* ── tarjeta «Ahora toca» ── */
.ahora.pas-card{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px 20px 22px;border:2px solid var(--acc);
  border-radius:20px;box-shadow:var(--sombra);background:var(--panel)}
.ahora.pas-card.marxa{border-color:var(--p-marxa)}
.ahora.pas-card.fin{border-color:var(--ok)}
.pas-card-cap{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pas-card .ahora-etapa{margin:0;color:var(--muted)}
.pas-card .ahora-titulo{margin:0;font-size:24px}
.pas-card .ahora-sub{margin:0}
.pas-card .ahora-aviso{margin:0}
.pas-card > .btn{margin:0;min-height:64px;font-size:20px}
.pas-xip{flex:none;font-size:13px;font-weight:700;letter-spacing:.04em;border-radius:8px;padding:4px 10px;white-space:nowrap;
  background:var(--p-gris-fondo);color:var(--p-gris)}
.pas-xip.fet,.pas-xip.enviant{background:var(--p-ok-fondo);color:var(--ok)}
.pas-xip.ara{background:var(--p-acc-fondo);color:var(--acc)}
.pas-xip.marxa{background:var(--p-marxa-fondo);color:var(--p-marxa)}
.pas-xip.desv{background:var(--p-stop-fondo);color:var(--stop)}
.shell-on .pas-xip.ara{color:var(--s-oro-tinta,#6E4F24)}

/* pastillas con todos los pasos */
.pas-pills{display:flex;flex-wrap:wrap;gap:6px}
.pas-pill{min-height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;
  background:var(--p-gris-fondo);color:#8A8172}
.pas-pill.fet,.pas-pill.enviant{background:var(--p-ok-fondo);color:var(--ok)}
.pas-pill.ara{background:var(--acc);color:#fff;box-shadow:0 0 0 3px var(--p-acc-fondo)}
.shell-on .pas-pill.ara{color:var(--ink)}
.pas-pill.marxa{background:var(--p-marxa);color:#fff}
.pas-pill.desv{background:var(--stop);color:#fff}

/* qué harás */
.pas-que{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:14px;font-size:16px;
  background:color-mix(in srgb,var(--acc) 6%,#fff)}
.pas-que-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pas-dades{display:flex;flex-wrap:wrap;gap:8px;font-size:14px}
.pas-dades span{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:6px 12px}

/* ingredientes como lista de comprobación */
.pas-ing-ayuda{margin:0;font-size:15px;color:var(--muted)}
.pas-ing{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pas-ing li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:14px;padding:8px 12px;
  border:1px solid var(--linea);background:var(--panel)}
.pas-ing li.fet{border-color:#DDEDE1;background:#F7FBF8}
.pas-ing li.ara{border:2px solid var(--acc);background:color-mix(in srgb,var(--acc) 5%,#fff)}
.pas-ing li.pendent{opacity:.7}
.pas-ing-marca{width:26px;height:26px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:14px;font-weight:700;
  box-shadow:inset 0 0 0 2px #CFC5AE}
.pas-ing li.fet .pas-ing-marca{background:var(--ok);color:#fff;box-shadow:none}
.pas-ing li.ara .pas-ing-marca{box-shadow:inset 0 0 0 3px var(--acc)}
.pas-ing-nom{flex:1 1 180px;min-width:0;display:flex;flex-direction:column}
.pas-ing-nom > span{font-size:16px;font-weight:600}
.pas-ing-nom small{font-size:13px;color:var(--muted);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.pas-ing-nom small.nota{font-family:inherit;color:var(--warn-fuerte,#9C5A00);font-weight:600}
.pas-ing-qty{font-size:15px;font-weight:700;white-space:nowrap}
.pas-ing .mini{margin:0;min-height:48px;min-width:0}

/* proceso en marcha: el reloj grande */
.pas-marxa{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pas-reloj{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:56px;font-weight:600;line-height:1;
  color:var(--p-marxa);font-variant-numeric:tabular-nums}
.pas-marxa.fuera .pas-reloj{color:var(--stop)}
.pas-marxa-txt{flex:1 1 220px;font-size:15px}
.pas-barra{height:10px;border-radius:5px;background:var(--p-marxa-fondo);overflow:hidden;margin-top:8px}
.pas-barra i{display:block;height:100%;width:0;background:var(--p-marxa)}
.pas-marxa.fuera .pas-barra i{background:var(--stop)}
.pas-queda{font-size:13px;color:var(--muted);margin-top:4px}
.pas-marxa.fuera .pas-queda{color:var(--stop);font-weight:700}
.pas-botons{display:flex;gap:10px;flex-wrap:wrap}
.pas-botons .btn{margin:0;flex:1 1 160px;min-height:64px}
.pas-botons .btn.marxa{flex:2 1 220px;background:var(--p-marxa);border-color:var(--p-marxa);color:#fff;font-size:19px}

/* ── diagrama de flujo: línea de tiempo vertical ── */
.lote-mapa{background:var(--panel);border:1px solid var(--linea);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column}
.lote-mapa h3{margin:0 0 10px}
.lote-mapa .btn{margin:10px 0 0;min-height:52px;font-size:16px}
.pas-mapa{list-style:none;margin:0;padding:0}
#pasos.pas-mapa > li::before{content:none;display:none}   /* el contador de la lista de pasos antigua (app.css) */
.pas{display:flex;gap:12px;align-items:flex-start}
.pas-via{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.pas-cercle{width:28px;height:28px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;
  background:var(--p-gris-fondo);color:#8A8172}
.pas-linia{width:2px;flex:1;min-height:10px;margin-top:2px;background:var(--p-linea)}
.pas:last-child .pas-linia{display:none}
.pas.fet .pas-cercle,.pas.enviant .pas-cercle{background:var(--ok);color:#fff}
.pas.fet .pas-linia,.pas.enviant .pas-linia{background:var(--ok)}
.pas.ara .pas-cercle{background:#fff;color:var(--acc);box-shadow:inset 0 0 0 3px var(--acc)}
.shell-on .pas.ara .pas-cercle{color:var(--s-oro-tinta,#6E4F24)}
.pas.marxa .pas-cercle{background:var(--p-marxa);color:#fff;box-shadow:0 0 0 4px var(--p-marxa-fondo)}
.pas.desv .pas-cercle{background:var(--stop);color:#fff}
.pas-cos{flex:1;min-width:0;padding:3px 0 10px}
.pas-cap{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pas-nom{font-size:15px;line-height:1.25;font-weight:700}
.pas.pendent .pas-nom{color:var(--muted);font-weight:500}
.pas-cap .pas-xip{font-size:12px;padding:3px 8px}
.pas-cap .mini{margin:0;min-height:48px;min-width:0}
.pas-sub{font-size:12px;color:var(--muted);margin-top:2px}
.pas-sub.rechazo{color:var(--stop);font-weight:600}
.pas .foto-mini{width:44px;height:44px;flex:0 0 44px}

/* ── diálogo de confirmación ── */
.pas-dialeg-capa{position:fixed;inset:0;z-index:60;background:rgba(30,26,23,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.pas-dialeg{width:min(560px,100%);background:#FFFDF8;border-radius:24px;padding:26px 28px;box-shadow:0 24px 60px rgba(30,26,23,.35);
  display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.pas-dialeg-cap{display:flex;align-items:center;gap:14px}
.pas-dialeg-cap h2{margin:0;font-size:24px}
.pas-dialeg-ico{width:56px;height:56px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--p-marxa-fondo,#DDEFF2);color:var(--frio,#0B7285)}
.pas-dialeg.stop .pas-dialeg-ico{background:#FCECEA;color:var(--stop)}
.pas-dialeg-sub{font-size:14px;color:var(--muted);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.pas-dialeg-filas{background:#fff;border:1px solid #EDE4CF;border-radius:16px;padding:4px 16px;font-size:16px}
.pas-dialeg-filas div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #EEE7D6}
.pas-dialeg-filas div:last-child{border-bottom:0}
.pas-dialeg-filas span{color:var(--muted)}
.pas-dialeg-avis{background:#FFF1DC;color:#6B4300;border-radius:12px;padding:10px 14px;font-size:15px}
.pas-dialeg-botons{display:flex;gap:12px}
.pas-dialeg-botons button{flex:1;min-height:60px;border-radius:14px;border:2px solid #E2D6BC;background:#fff;color:var(--ink);
  font-size:17px;font-weight:700;touch-action:manipulation}
.pas-dialeg-botons button.si{flex:2;border:0;background:var(--acc);color:#fff;font-size:18px}
.shell-on .pas-dialeg-botons button.si{color:var(--ink)}
.pas-dialeg.stop .pas-dialeg-botons button.si{background:var(--stop);color:#fff}
.pas-dialeg-botons button:focus-visible{outline:4px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .pas-dialeg{animation:pas-entra .18s ease-out both}
  @keyframes pas-entra{from{opacity:0;transform:translateY(8px) scale(.98)}}
}