/* Factory OS · sitio web — sistema de Feature Showcases (docs/07-feature-showcases.md).
   Dos capas: el showcase (sitio) y la composición curada (.app), que usa los tokens 07 de la aplicación,
   copiados de packages/ui/src/tokens.css [data-ds="07"]. */

/* ---------- Tokens del producto dentro de la composición ---------- */
.app {
  --app-canvas: #fafafa;
  --app-surface: #ffffff;
  --app-muted: #f4f4f5;
  --app-hover: #ebebed;
  --app-ink: #0a0a0a;
  --app-ink-2: #575757;
  --app-ink-3: #8f8f8f;
  --app-border: rgb(0 0 0 / .08);
  --app-border-strong: rgb(0 0 0 / .14);
  --app-control: #8c8c8c;
  --app-action: #0a0a0a;
  --app-on-action: #ffffff;
  --app-accent: #0062d1;
  --app-accent-soft: #eaf2fd;
  --app-success: #107d4f; --app-success-text: #0e6b44; --app-success-soft: #e6f4ec;
  --app-warning: #c27a1a; --app-warning-text: #8f4a00; --app-warning-soft: #fdf1e3;
  --app-danger: #c52828; --app-danger-text: #b02020; --app-danger-soft: #fceBEB;
  --app-info-text: #0058bd;
  --app-cut: #0062d1; --app-trim: #7c5cd6; --app-byproduct: #5b3fbf; --app-waste: #a35200;
  --app-shadow-sm: 0 1px 2px rgb(0 0 0 / .04), 0 2px 4px rgb(0 0 0 / .02);
  --app-shadow-raised: 0 2px 4px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);
  --app-ease: cubic-bezier(.2, 0, 0, 1);
}
:root[data-theme="dark"] .app, .planta .app {
  --app-canvas: #0a0a0a;
  --app-surface: #111111;
  --app-muted: #1a1a1a;
  --app-hover: #232323;
  --app-ink: #ededed;
  --app-ink-2: #a1a1a1;
  --app-ink-3: #6e6e6e;
  --app-border: rgb(255 255 255 / .08);
  --app-border-strong: rgb(255 255 255 / .14);
  --app-control: #7a7a7a;
  --app-action: #ededed;
  --app-on-action: #0a0a0a;
  --app-accent: #5aa2f5;
  --app-accent-soft: #10243d;
  --app-success: #3fc287; --app-success-text: #5cd39c; --app-success-soft: #0e2a1d;
  --app-warning: #f0a43e; --app-warning-text: #f3b562; --app-warning-soft: #2e2110;
  --app-danger: #f26b6b; --app-danger-text: #f58a8a; --app-danger-soft: #331616;
  --app-info-text: #7db4f5;
  --app-cut: #5aa2f5; --app-trim: #a48bf0; --app-byproduct: #8b74e8; --app-waste: #f0a43e;
  --app-shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --app-shadow-raised: 0 8px 24px rgb(0 0 0 / .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app {
    --app-canvas: #0a0a0a;
    --app-surface: #111111;
    --app-muted: #1a1a1a;
    --app-hover: #232323;
    --app-ink: #ededed;
    --app-ink-2: #a1a1a1;
    --app-ink-3: #6e6e6e;
    --app-border: rgb(255 255 255 / .08);
    --app-border-strong: rgb(255 255 255 / .14);
    --app-control: #7a7a7a;
    --app-action: #ededed;
    --app-on-action: #0a0a0a;
    --app-accent: #5aa2f5;
    --app-accent-soft: #10243d;
    --app-success: #3fc287; --app-success-text: #5cd39c; --app-success-soft: #0e2a1d;
    --app-warning: #f0a43e; --app-warning-text: #f3b562; --app-warning-soft: #2e2110;
    --app-danger: #f26b6b; --app-danger-text: #f58a8a; --app-danger-soft: #331616;
    --app-info-text: #7db4f5;
    --app-cut: #5aa2f5; --app-trim: #a48bf0; --app-byproduct: #8b74e8; --app-waste: #f0a43e;
    --app-shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --app-shadow-raised: 0 8px 24px rgb(0 0 0 / .5);
  }
}

/* ---------- Showcase (capa del sitio) ---------- */
:root { --sc-eyebrow-transform: uppercase; }
.sc { position: relative; padding-block: calc(var(--bloque) * .62); }
.sc .grid { row-gap: 40px; align-items: start; }
.sc-texto { display: grid; gap: 20px; align-content: start; }
.sc-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.sc-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: var(--sc-eyebrow-transform); color: var(--ink-2); }
.sc-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.sc-estado::before { content: "●"; font-size: 9px; color: var(--success); }
.sc-estado[data-estado="desarrollo"]::before { content: "○"; font-size: 11px; color: var(--warning); }
.sc .titulo { font-size: clamp(32px, 4vw, 56px); }
@media (min-width: 1024px) { .sc--pieza-izq .titulo, .sc--pieza-der .titulo, .sc--dividido .titulo { font-size: clamp(32px, 3.3vw, 48px); } }
.planta .sc-eyebrow { color: var(--plant-ink-2); }
.planta .sc-estado { color: var(--plant-ink-2); }
.planta .sc-estado::before { color: var(--success-plant); }
.planta .sc-estado[data-estado="desarrollo"]::before { color: var(--warning-plant); }

/* Pieza */
.sc-pieza { display: grid; gap: 12px; min-width: 0; }
.sc-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 12px; color: var(--ink-3); }
.planta .sc-pie { color: var(--plant-ink-2); }
.sc-repetir { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: color var(--t-estado) var(--ease-std), border-color var(--t-estado) var(--ease-std); }
.sc-repetir:hover { color: var(--ink); border-color: var(--ink-3); }
.planta .sc-repetir { border-color: var(--plant-line); color: var(--plant-ink-2); }
.planta .sc-repetir:hover { color: var(--plant-ink); border-color: var(--plant-ink-2); }
.sc-repetir svg { width: 13px; height: 13px; }

/* Claves contextuales */
.sc-claves { display: grid; gap: 4px; align-content: start; }
.sc-clave { display: grid; gap: 4px; width: 100%; padding: 14px 0 14px 16px; border: 0; border-left: 2px solid var(--line-strong); background: none; text-align: left; cursor: default; transition: border-color var(--t-estado) var(--ease-std); }
.sc-clave b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.sc-clave span { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.sc-clave:hover, .sc-clave:focus-visible, .sc-clave[data-activa] { border-left-color: var(--accent); }
.sc-clave:focus-visible { outline-offset: 4px; }
.planta .sc-clave { border-left-color: var(--plant-line); }
.planta .sc-clave b { color: var(--plant-ink); }
.planta .sc-clave span { color: var(--plant-ink-2); }
.planta .sc-clave:hover, .planta .sc-clave:focus-visible, .planta .sc-clave[data-activa] { border-left-color: var(--accent-plant); }
.sc-claves-fila { display: grid; gap: 4px 24px; }
@media (min-width: 768px) { .sc-claves-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sc-claves-fila[data-cuatro] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Resaltado de zonas desde las claves */
.app [data-zona] { transition: box-shadow 180ms var(--ease-std); }
.app[data-resaltando] [data-marcada] { box-shadow: 0 0 0 2px var(--app-accent), 0 0 0 6px color-mix(in srgb, var(--app-accent) 18%, transparent); border-radius: var(--r-inner); }
.app[data-resaltando] .app-caja[data-marcada], .app[data-resaltando] .app-grupo[data-marcada] { border-radius: var(--r-outer); }
.app [hidden] { display: none !important; }
.app :is(h4, h5, h6) { margin: 0; }

/* Capítulo planta en un showcase */
.sc.planta { background: var(--plant); color: var(--plant-ink); }
.sc.planta { padding-block: calc(var(--bloque) * .62); }
.planta:has(+ .sc.planta) { padding-bottom: calc(var(--bloque) * .4); }
.sc + .control { padding-top: calc(var(--bloque) * .55); }
.planta + .sc.planta { padding-top: calc(var(--bloque) * .2); border-top: 0 !important; }
.sc.planta .lectura { color: var(--plant-ink-2); }
.sc.planta :focus-visible { outline-color: var(--accent-plant); }

/* Selector «Ver como» (control del sitio, no del producto) */
.sc-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ink-2); }
.sc-ver div { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line-strong); }
.sc-ver button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.sc-ver button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Composiciones de bloque */
@media (min-width: 1024px) {
  .sc--ancho .sc-texto { grid-column: 2 / 9; }
  .sc--ancho .sc-pieza { grid-column: 2 / -1; }
  .sc--ancho .sc-claves-fila { grid-column: 2 / -1; }
  .sc--pieza-izq .sc-pieza { grid-column: 2 / 9; grid-row: 1 / span 2; }
  .sc--pieza-izq .sc-texto { grid-column: 9 / -1; }
  .sc--pieza-izq .sc-claves { grid-column: 9 / -1; }
  .sc--pieza-der .sc-texto { grid-column: 2 / 6; }
  .sc--pieza-der .sc-claves { grid-column: 2 / 6; }
  .sc--pieza-der .sc-pieza { grid-column: 6 / -1; grid-row: 1 / span 2; }
  .sc--lateral .sc-texto { grid-column: 2 / 9; }
  .sc--lateral .sc-pieza { grid-column: 2 / 10; }
  .sc--lateral .sc-claves { grid-column: 10 / -1; align-self: center; }
  .sc--dividido .sc-texto { grid-column: 2 / 6; }
  .sc--dividido .sc-pieza { grid-column: 7 / -1; }
  .sc--dividido .sc-claves-fila { grid-column: 2 / -1; }
}

/* ---------- Primitivas de la composición (07) ---------- */
.app {
  position: relative;
  display: grid; gap: 12px;
  padding: 16px;
  border-radius: var(--r-outer);
  background: var(--app-canvas);
  box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-raised);
  color: var(--app-ink);
  font-family: var(--font);
  font-size: 13px; line-height: 1.4; letter-spacing: 0;
  text-align: left;
  overflow: hidden;
  container-type: inline-size;
}
.planta .app { box-shadow: 0 0 0 1px var(--app-border-strong), var(--app-shadow-raised); }
.app :focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.app .m { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.app-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.app-cab h3 { font-size: 22px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.app-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; font-size: 12.5px; color: var(--app-ink-2); }
.app-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--app-success); }
.app-grupo { display: grid; gap: 6px; padding: 6px; border-radius: var(--r-outer); background: var(--app-muted); box-shadow: inset 0 0 0 1px var(--app-border); }
.app-celda { position: relative; padding: 12px 14px; border-radius: var(--r-inner); background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); min-width: 0; }
.app-caja { border-radius: var(--r-outer); background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); min-width: 0; overflow: hidden; }
.app-caja-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--app-border); }
.app-caja-cab b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.app-caja-cab .app-cuenta { margin-left: auto; }
.app-cuenta { font-family: var(--mono); font-size: 12px; color: var(--app-ink-2); }
.app-sec { font-size: 12px; color: var(--app-ink-2); }
.app-falso { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--app-border-strong); background: var(--app-surface); font-size: 12.5px; font-weight: 500; color: var(--app-ink); white-space: nowrap; }
.app-falso svg { width: 14px; height: 14px; }
.app-boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--app-action); color: var(--app-on-action); font-size: 13px; font-weight: 500; white-space: nowrap; }
.app-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--app-muted); box-shadow: inset 0 0 0 1px var(--app-border); }
.app-seg > * { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--app-ink-2); white-space: nowrap; }
.app-seg > [aria-pressed="true"], .app-seg > [data-actual] { background: var(--app-surface); color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); }
.app-seg button { cursor: pointer; }
.app-seg .app-cuenta { font-size: 11px; }
.app-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--app-ink-2); }
.app-nota svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.app-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-inner); background: var(--app-accent-soft); color: var(--app-info-text); font-size: 12.5px; }
.app-aviso[data-tono="warning"] { background: var(--app-warning-soft); color: var(--app-warning-text); }
.app-aviso svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.app-aviso b { display: block; font-weight: 600; }
.app-aviso p { margin-top: 2px; }

/* Insignias de estado: forma + color, como Badge 07 */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--app-muted); color: var(--app-ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip-ok { background: var(--app-success-soft); color: var(--app-success-text); }
.chip-ok::before { background: var(--app-success); box-shadow: none; }
.chip-pend { background: var(--app-warning-soft); color: var(--app-warning-text); }
.chip-pend::before { box-shadow: inset 0 0 0 1.5px var(--app-warning); }
.chip-info { background: var(--app-accent-soft); color: var(--app-info-text); }
.chip-info::before { background: var(--app-accent); box-shadow: none; }
.chip-dif { background: var(--app-warning-soft); color: var(--app-warning-text); }
.chip-dif::before { width: 0; height: 0; border-radius: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--app-warning); box-shadow: none; }
.chip-sin::before { box-shadow: none; border: 1.5px dashed var(--app-ink-3); width: 5px; height: 5px; }
.chip-plano { background: none; padding: 0; height: auto; }
.chip-borde { background: none; box-shadow: inset 0 0 0 1px var(--app-border-strong); }
.chip-borde::before { display: none; }

/* Señal de envío en curso (sin optimismo) */
.app-girando { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--app-border-strong); border-top-color: var(--app-ink-2); animation: sc-girar 700ms linear infinite; }
@keyframes sc-girar { to { transform: rotate(360deg); } }
/* Pieza «acuse» (docs/13, S3): el botón presionado espera la respuesta; lo de antes y lo de después del acuse se alternan con hidden. */
.app-boton[data-enviando] { opacity: .8; }
.app-boton .app-girando { border-color: color-mix(in srgb, var(--app-on-action) 35%, transparent); border-top-color: var(--app-on-action); }
.sc-pieza [data-antes][hidden], .sc-pieza [data-despues][hidden] { display: none !important; }
.app-aparece { animation: sc-aparecer 360ms var(--ease-enter) both; }
@keyframes sc-aparecer { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Trazabilidad: grafo ---------- */
.traz-foco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.traz-foco .sym { width: 36px; height: 36px; }
.traz-foco b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.traz-foco small { display: block; margin-top: 2px; font-size: 12px; color: var(--app-ink-2); }
.traz-pestanas { overflow: hidden; }
.traz-pestanas .app-seg { max-width: 100%; overflow: hidden; }
.traz-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--app-border); }
.traz-siguiendo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--app-border); background: var(--app-accent-soft); color: var(--app-info-text); font-size: 12.5px; }
.traz-siguiendo svg { flex: none; width: 14px; height: 14px; }
.traz-lienzo { position: relative; padding: 28px 12px 64px; background-color: var(--app-canvas); background-image: radial-gradient(var(--app-border-strong) 1px, transparent 1px); background-size: 18px 18px; }
.traz-nodos { position: relative; z-index: 1; display: grid; gap: 28px 22px; justify-content: center; }
.traz-aristas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.traz-aristas path { fill: none; }
.traz-arista { stroke: var(--app-control); stroke-width: 1.5; transition: stroke 180ms var(--app-ease), opacity 180ms var(--app-ease); }
.traz-arista[data-hl] { stroke: var(--app-accent); stroke-width: 2; }
.traz-arista[data-tenue] { opacity: .3; }
.traz-luz { stroke: var(--app-accent); stroke-width: 2.25; stroke-linecap: round; opacity: .95; }
.traz-luz[data-tenue] { opacity: .15; }
.traz-punta { fill: var(--app-control); transition: fill 180ms var(--app-ease), opacity 180ms var(--app-ease); }
.traz-punta[data-hl] { fill: var(--app-accent); }
.traz-punta[data-tenue] { opacity: .3; }
.gnodo { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; max-width: 196px; height: 56px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 140ms var(--app-ease), opacity 180ms var(--app-ease); }
.gnodo:hover { box-shadow: 0 0 0 1px var(--app-control), var(--app-shadow-sm); }
.gnodo[data-focal] { box-shadow: 0 0 0 1.5px var(--app-ink), var(--app-shadow-sm); }
.gnodo[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--app-accent), 0 2px 10px var(--app-accent-soft); }
.gnodo[data-tenue] { opacity: .42; }
.gnodo[data-medio] { align-self: center; }
.sym { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--app-muted); color: var(--app-ink-2); }
.sym svg { width: 16px; height: 16px; }
[data-kind="lote"] .sym, .sym[data-kind="lote"] { background: var(--app-accent-soft); color: var(--app-accent); }
[data-kind="proc"] .sym, .sym[data-kind="proc"] { background: color-mix(in srgb, var(--app-trim) 14%, transparent); color: var(--app-trim); }
[data-kind="ev"] .sym, .sym[data-kind="ev"] { background: var(--app-success-soft); color: var(--app-success-text); }
[data-kind="pos"] .sym, .sym[data-kind="pos"] { background: var(--app-hover); }
.gnodo-t { min-width: 0; }
.gnodo-t b { display: block; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.gnodo-t small { display: block; overflow: hidden; color: var(--app-ink-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.traz-leyenda { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 10px; border-radius: 10px; background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); color: var(--app-ink-2); font-size: 12px; }
.traz-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.traz-leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.traz-leyenda i[data-kind="lote"] { background: var(--app-accent-soft); box-shadow: inset 0 0 0 1px var(--app-accent); }
.traz-leyenda i[data-kind="proc"] { background: color-mix(in srgb, var(--app-trim) 20%, transparent); }
.traz-leyenda i[data-kind="ev"] { background: var(--app-success-soft); }
.traz-leyenda i[data-kind="pos"] { background: var(--app-hover); }
@container (max-width: 560px) {
  .traz-lienzo { padding: 20px 10px 16px; }
  .traz-leyenda { position: static; margin-top: 20px; }
  .gnodo { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 56px; padding: 8px 10px; }
  .gnodo .sym { display: none; }
  .gnodo-t b, .gnodo-t small { white-space: normal; overflow-wrap: anywhere; }
}
.traz-pie { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid var(--app-border); color: var(--app-ink-2); font-size: 12px; }
.traz-pie svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.traz-inspector { display: grid; gap: 0; }
.traz-insp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--app-border); }
.traz-insp-cab small { width: 100%; font-size: 12px; color: var(--app-ink-2); }
.traz-insp-cab b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.traz-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.traz-props > div { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--app-border); }
.traz-props dt { font-size: 12px; color: var(--app-ink-2); }
.traz-props dd { overflow-wrap: anywhere; }
.traz-mezcla { margin: 10px 14px 14px; }
.traz-inspector { min-height: 172px; }
.traz-cuerpo { display: grid; gap: 12px; }
/* Recorte del teléfono dentro de un escenario (docs/12): como en La Pyme, la UI se recompone a lo esencial para que el escenario
   no pase de 720 px. Quedan la dirección, el grafo y su leyenda; la cabecera de la app, las pestañas, las dos notas y el inspector
   siguen en /trazabilidad. Solo bajo .escenario, así que 04-trazabilidad y 05-showcases no cambian. La separación entre filas
   le gana al estilo en línea que pone showcases.js (ubicar). */
@container (max-width: 520px) {
  .escenario .app > :is(.traz-foco, .traz-pestanas) { display: none; }
  /* La cabecera de la app se va donde el título de la sección o de la tarjeta ya la dice; el balance la conserva (orden, media y estado). */
  .escenario:is([data-pieza="grafo"], [data-pieza="camaras"], [data-pieza="equipo"]) .app > .app-cab { display: none; }
  .escenario :is(.traz-siguiendo, .traz-pie, .traz-inspector) { display: none; }
  .escenario .traz-nodos { row-gap: 20px !important; }
  .escenario .gnodo-t b, .escenario .gnodo-t small { white-space: nowrap; overflow-wrap: normal; }
  /* La dirección ocupa el ancho en tres partes iguales; cada opción puede ir en dos líneas. */
  .escenario .traz-barra .app-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .escenario .traz-barra .app-seg > * { justify-content: center; height: auto; min-height: 32px; padding: 4px 6px; line-height: 1.2; text-align: center; white-space: normal; }
}

/* ---------- Elaboración: Equipo ahora ---------- */
.eq-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eq-filtro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 14px; border: 0; border-radius: var(--r-inner); background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 140ms var(--app-ease); min-width: 0; }
.eq-filtro:hover { box-shadow: 0 0 0 1px var(--app-control), var(--app-shadow-sm); }
.eq-filtro[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--app-ink), var(--app-shadow-sm); }
.eq-filtro > span:first-child { font-size: 12.5px; }
.eq-filtro .eq-n { grid-row: 2; font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.eq-filtro .eq-forma { grid-column: 2; grid-row: 2; align-self: center; width: 9px; height: 9px; border-radius: 50%; }
.eq-filtro small { grid-column: 1 / -1; font-size: 11.5px; color: var(--app-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-forma[data-e="trabajando"] { background: var(--app-success); }
.eq-forma[data-e="pausa"] { box-shadow: inset 0 0 0 2px var(--app-warning); }
.eq-forma[data-e="sin"] { border: 1.5px dashed var(--app-ink-3); }
.eq-personas { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .eq-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eq-persona { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; transition: box-shadow 220ms var(--app-ease); }
.eq-persona[data-e="pausa"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-warning) 55%, transparent), var(--app-shadow-sm); }
.eq-persona[hidden] { display: none; }
.eq-quien { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.eq-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--app-muted); box-shadow: inset 0 0 0 1px var(--app-border); font-size: 12px; font-weight: 600; color: var(--app-ink-2); }
.eq-quien b { display: block; font-size: 13.5px; font-weight: 500; }
.eq-quien small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--app-ink-2); white-space: nowrap; }
/* Retratos ilustrativos del producto (person-avatar.css): recorte circular, sin iniciales cuando hay retrato. */
.eq-avatar:has(img) { overflow: hidden; background: var(--app-muted); }
.eq-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.eq-tarea { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--r-inner); background: var(--app-muted); font-size: 12px; color: var(--app-ink-2); }
.eq-tarea b { font-size: 13px; font-weight: 500; color: var(--app-ink); }
.eq-tarea[data-vacia] { background: none; box-shadow: inset 0 0 0 1px var(--app-border); }
.eq-pausa { color: var(--app-warning-text); }
.eq-hoy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--app-ink-2); }
.eq-hoy .m { font-size: 15px; color: var(--app-ink); white-space: nowrap; }
/* Tiempo por tarea (people-view.tsx): barra repartida por tanda y la lista con el tiempo de cada una.
   Antes del paso de la demostración la barra está vacía y la lista velada, sin cambiar el alto de la tarjeta. */
.eq-reparto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.eq-seg { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--app-border); }
.eq-seg span { display: block; height: 100%; width: var(--ancho); transform-origin: left center; transition: transform 520ms var(--ease-brand, cubic-bezier(.22, 1, .36, 1)); }
.eq-seg span + span { transition-delay: 260ms; }
.eq-seg[data-vacia] span { transform: scaleX(0); transition: none; }
.eq-c0 { background: var(--app-action); }
.eq-c1 { background: var(--app-trim); }
.eq-reparto ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--app-ink-2); }
/* Cada tanda: nombre (se abrevia el dato si no entra), código y tiempo, que nunca se cortan. */
.eq-reparto li { display: flex; align-items: baseline; min-width: 0; transition: opacity 280ms var(--app-ease); }
.eq-rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-rc { flex: none; white-space: nowrap; }
.eq-rt { flex: none; margin-left: auto; padding-left: 8px; white-space: nowrap; }
.eq-reparto li i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.eq-reparto li[data-velada] { opacity: 0; }

/* Panel de la tanda E-119 (team.tsx, TeamRail): se abre sobre Equipo ahora como el panel lateral de la orden.
   Cerrado no se ve ni se lee; el contenido de la pieza no cambia de alto al abrirlo. */
.eq-tanda { position: absolute; inset: 0 0 0 auto; z-index: 2; display: flex; flex-direction: column; gap: 10px; width: min(372px, 100%); padding: 16px 14px; background: var(--app-canvas); box-shadow: -1px 0 0 var(--app-border), -12px 0 32px rgb(0 0 0 / .08); overflow: hidden; transform: translateX(104%); visibility: hidden; transition: transform 440ms var(--ease-brand, cubic-bezier(.22, 1, .36, 1)), visibility 0s linear 440ms; }
.eq-tanda[data-abierta] { transform: none; visibility: visible; transition: transform 440ms var(--ease-brand, cubic-bezier(.22, 1, .36, 1)), visibility 0s; }
.eq-tanda-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--app-border); }
.eq-tanda-cab b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.eq-tanda-cab small { font-size: 12px; color: var(--app-ink-2); }
.eq-tanda-cerrar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: var(--app-ink-2); box-shadow: inset 0 0 0 1px var(--app-border); }
.eq-tanda-cerrar svg { width: 14px; height: 14px; }
.eq-tanda-tit { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; }
.eq-tanda-tit .m { font-size: 12px; font-weight: 400; color: var(--app-ink-2); }
.eq-gente { display: flex; flex-direction: column; gap: 6px; }
.eq-p { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); transition: background-color 280ms var(--app-ease); }
.eq-p[data-e="pausa"] { background: color-mix(in srgb, var(--app-warning-soft) 40%, var(--app-surface)); }
.eq-p[hidden], .eq-tanda [hidden] { display: none !important; }
.eq-ptop { display: flex; align-items: center; gap: 10px; }
.eq-ptop b { display: block; font-size: 13.5px; font-weight: 500; }
.eq-ptop small { font-size: 12px; color: var(--app-ink-2); }
.eq-pa { position: relative; display: inline-flex; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--app-surface); }
.eq-pa .eq-avatar { width: 36px; height: 36px; }
.eq-pa .eq-forma { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--app-surface); transition: background-color 280ms var(--app-ease), box-shadow 280ms var(--app-ease); }
.eq-pa .eq-forma[data-e="pausa"] { background: var(--app-surface); box-shadow: inset 0 0 0 2px var(--app-warning), 0 0 0 2px var(--app-surface); }
.eq-tm { margin-left: auto; font-size: 12.5px; font-weight: 500; text-align: right; white-space: nowrap; }
.eq-tm small { display: block; font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--app-ink-2); }
.eq-pacts { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-pacts > * { flex: 1 1 auto; height: 30px; padding: 0 10px; font-size: 12.5px; }
.eq-pacts .app-boton svg, .eq-pacts .app-falso svg { width: 14px; height: 14px; }
.eq-fantasma { display: inline-flex; flex: 0 0 auto !important; align-items: center; color: var(--app-ink-2); font-weight: 500; }
.eq-motivo { display: grid; gap: 8px; padding-top: 2px; }
.eq-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eq-select svg { flex: none; width: 14px; height: 14px; color: var(--app-ink-2); }
.eq-select [data-vacio] { color: var(--app-ink-3); }
.eq-comentario small { font-size: 11.5px; color: var(--app-ink-2); }
.eq-comentario .dp-entrada-texto { min-height: 32px; }
.eq-fa { display: flex; justify-content: flex-end; gap: 6px; }
.eq-fa > * { height: 32px; font-size: 12.5px; }
.eq-join { display: flex; gap: 6px; }
.eq-join .eq-select { flex: 1; min-width: 0; min-height: 34px; padding-block: 6px; }
.eq-join .app-falso { height: 34px; }
.eq-hint { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--app-ink-2); }
@media (prefers-reduced-motion: reduce) { .eq-tanda, .eq-seg span, .eq-reparto li, .eq-p, .eq-pa .eq-forma { transition: none; } }
/* Lo que el puntero tiene encima, como en el producto al pasar el mouse. */
.eq-tarea b[data-hover] { text-decoration: underline; text-underline-offset: 2px; }
.eq-tanda .app-falso[data-hover], .eq-tanda-cerrar[data-hover] { background: var(--app-muted); }
.eq-tanda .app-boton[data-hover] { background: color-mix(in srgb, var(--app-action) 84%, var(--app-canvas)); }
.eq-select[data-hover] { box-shadow: inset 0 0 0 1px var(--app-ink-2); }

/* Puntero de los showcases (decisión del titular del 26/10/2026, pieza de Equipo): el mismo dibujo que el del hero (hero-demo.css),
   dentro de la app. Recorre solo las acciones de una persona; en una app angosta es un toque. Con movimiento reducido no aparece. */
.sc-puntero { position: absolute; left: 0; top: 0; z-index: 6; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-std); will-change: transform; }
.sc-puntero[data-visible] { opacity: 1; }
.sc-puntero svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 4px 3px; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .35)) drop-shadow(0 4px 8px rgb(0 0 0 / .18)); transition: transform 120ms var(--ease-std); }
.sc-puntero path { fill: #fff; stroke: #0a0a0a; stroke-width: 1.3; stroke-linejoin: round; }
.sc-puntero[data-presionado] svg { transform: scale(.9); }
.sc-puntero[data-toque] { width: 30px; height: 30px; }
.sc-puntero[data-toque] svg { display: none; }
.sc-puntero[data-toque]::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(10 10 10 / .16); box-shadow: 0 0 0 1.5px rgb(10 10 10 / .45), 0 2px 8px rgb(0 0 0 / .18); transition: transform 140ms var(--ease-std); }
.sc-puntero[data-toque][data-presionado]::before { transform: scale(.82); }
:root[data-theme="dark"] .sc-puntero[data-toque]::before { background: rgb(255 255 255 / .2); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-puntero[data-toque]::before { background: rgb(255 255 255 / .2); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6); } }
.sc-anillo { position: absolute; z-index: 5; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; animation: sc-anillo 420ms var(--ease-enter, cubic-bezier(.16, 1, .3, 1)) forwards; }
@keyframes sc-anillo { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .sc-puntero, .sc-anillo { display: none; } }
.eq-acelerada { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-ink-2); }

/* ---------- Desposte: balance ---------- */
.dp-cuerpo { display: grid; gap: 12px; }
.dp-lado { display: grid; gap: 12px; }
.dp-sin-resolver, .dp-resuelta { display: grid; gap: 10px; }
@container (min-width: 700px) { .dp-cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.dp-lista { display: grid; }
.dp-fila { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 9px 14px; border-bottom: 1px solid var(--app-border); }
.dp-fila:last-child { border-bottom: 0; }
.dp-fila i { width: 9px; height: 9px; border-radius: 3px; }
.dp-fila b { font-size: 13px; font-weight: 500; }
.dp-fila small { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11.5px; color: var(--app-ink-2); }
.dp-fila .m { grid-row: 1; grid-column: 3; font-size: 13px; text-align: right; }
.dp-fila[data-enviando] { color: var(--app-ink-2); }
.dp-fila[data-enviando] b { color: var(--app-ink-2); }
.dp-media { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--app-border-strong); font-family: var(--mono); font-size: 11px; color: var(--app-ink); }
.dp-c-corte { background: var(--app-cut); } .dp-c-recorte { background: var(--app-trim); } .dp-c-sub { background: var(--app-byproduct); } .dp-c-desc { background: var(--app-waste); }
.dp-balance { display: grid; gap: 10px; padding: 14px; }
.dp-entrada { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dp-entrada .m { font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.dp-entrada .m small { font-family: var(--font); font-size: 12px; color: var(--app-ink-2); margin-left: 3px; letter-spacing: 0; }
.dp-barra { display: flex; height: 14px; border-radius: 5px; overflow: hidden; background-color: var(--app-muted); background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--app-border-strong) 4px 5px); box-shadow: inset 0 0 0 1px var(--app-border); }
.dp-barra span { height: 100%; transition: width 420ms var(--ease-enter); }
.dp-clases { display: grid; gap: 6px; }
.dp-clases > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; align-items: center; gap: 8px; font-size: 12.5px; }
.dp-clases i { width: 9px; height: 9px; border-radius: 3px; }
.dp-clases i.dp-c-nada { box-shadow: inset 0 0 0 1px var(--app-border-strong); }
.dp-clases .m { text-align: right; font-size: 12.5px; }
.dp-clases .dp-total { padding-top: 8px; border-top: 1px solid var(--app-border); font-weight: 600; }
.dp-rend { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
.dp-rend small { display: block; font-size: 11.5px; color: var(--app-ink-2); }
.dp-rend .m { white-space: nowrap; font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.dp-dif { display: grid; gap: 10px; padding: 12px 14px; }
.dp-dif-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-dif-cab b { font-size: 13.5px; font-weight: 600; }
.dp-dif-cab .m { white-space: nowrap; font-size: 15px; color: var(--app-warning-text); }
.dp-campo { display: grid; gap: 6px; }
.dp-campo label, .dp-etiqueta { font-size: 12.5px; font-weight: 500; }
.dp-entrada-texto { min-height: 36px; padding: 8px 10px; border-radius: 9px; background: var(--app-surface); box-shadow: inset 0 0 0 1px var(--app-control); font-size: 13px; }
.dp-entrada-texto[data-vacio] { color: var(--app-ink-3); }
.dp-entrada-texto[data-escribiendo]::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--app-ink); animation: sc-cursor 900ms steps(1) infinite; }
@keyframes sc-cursor { 50% { opacity: 0; } }
.dp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dp-vigente { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-inner); background: var(--app-success-soft); color: var(--app-success-text); font-size: 12.5px; }
.dp-vigente svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.dp-original { font-size: 12px; color: var(--app-ink-2); }

/* ---------- Cámaras ---------- */
.cam-franja { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 600px) { .cam-franja { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cam-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 12px 14px; border: 0; border-radius: var(--r-inner); background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 140ms var(--app-ease); min-width: 0; }
.cam-tarjeta:hover { box-shadow: 0 0 0 1px var(--app-control), var(--app-shadow-sm); }
.cam-tarjeta[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--app-accent), var(--app-shadow-sm); }
.cam-tarjeta b { font-size: 13.5px; font-weight: 600; }
.cam-tarjeta .chip { justify-self: end; }
.cam-n { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.cam-n small { font-family: var(--font); font-size: 12px; color: var(--app-ink-2); letter-spacing: 0; margin-left: 2px; }
.cam-temp { justify-self: end; align-self: center; font-size: 12.5px; color: var(--app-ink); }
.cam-tarjeta > .chip-plano { grid-column: 1 / -1; justify-self: start; }
.cam-cuerpo { display: grid; gap: 12px; }
@container (min-width: 820px) { .cam-cuerpo { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; } }
.app-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.app-tabla th { padding: 8px 14px; border-bottom: 1px solid var(--app-border); background: var(--app-muted); color: var(--app-ink-2); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; }
.app-tabla td { padding: 9px 14px; border-bottom: 1px solid var(--app-border); vertical-align: middle; }
.app-tabla tr:last-child td { border-bottom: 0; }
.app-tabla tr.tbl-grupo td { background: var(--app-muted); font-size: 12.5px; }
.app-tabla tr.tbl-grupo small { display: inline; margin-left: 8px; }
.app-tabla .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-tabla td small { display: block; margin-top: 1px; overflow: hidden; font-size: 11.5px; color: var(--app-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.app-tabla .m small { font-family: var(--mono); }
@container (max-width: 559px) {
  .app-tabla thead { display: none; }
  .app-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--app-border); }
  .app-tabla tr:last-child { border-bottom: 0; }
  .app-tabla td { padding: 0; border: 0; }
  .app-tabla td:nth-child(1) { grid-column: 1 / -1; }
  .app-tabla td.num::before { content: attr(data-col) " "; font-family: var(--font); color: var(--app-ink-2); font-size: 11.5px; }
  .app-tabla td.num { text-align: left; }
  .app-tabla td:nth-child(4) { grid-column: 1 / -1; }
}
.cam-lado { display: grid; gap: 12px; }
.cam-lectura { display: grid; gap: 6px; padding: 12px 14px; }
.cam-lectura .m { font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.cam-lectura .m small { font-family: var(--font); font-size: 12px; color: var(--app-ink-2); letter-spacing: 0; }
.cam-lectura p { font-size: 12px; color: var(--app-ink-2); }
.cam-pend { display: grid; gap: 8px; padding: 12px 14px; font-size: 12.5px; }
.cam-pend div { display: flex; justify-content: space-between; gap: 8px; }

/* ---------- Trazabilidad: Destinos ---------- */
.dst-celdas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 720px) { .dst-celdas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dst-celda { display: grid; gap: 4px; align-content: start; }
.dst-celda > span:first-child { font-size: 12px; color: var(--app-ink-2); }
.dst-celda b { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.dst-celda small { font-size: 11.5px; color: var(--app-ink-2); }
.dst-h { padding: 14px 14px 8px; font-size: 13.5px; font-weight: 600; }
.dst-sub { display: block; margin-top: 1px; font-size: 11.5px; color: var(--app-ink-2); }

/* ---------- Logística: paradas ---------- */
.lg-paradas { display: grid; padding: 6px 14px; }
.lg-parada { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; }
.lg-parada::before { content: ""; position: absolute; left: 9.5px; top: 30px; bottom: -12px; width: 1px; background: var(--app-border-strong); }
.lg-parada:last-child::before { display: none; }
.lg-paso { grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--app-surface); box-shadow: inset 0 0 0 1.5px var(--app-border-strong); display: grid; place-items: center; transition: background-color 220ms var(--app-ease), box-shadow 220ms var(--app-ease); }
.lg-paso svg { width: 12px; height: 12px; color: var(--app-on-action); opacity: 0; }
.lg-paso[data-s="done"] { background: var(--app-success); box-shadow: none; }
.lg-paso[data-s="done"] svg { opacity: 1; color: #fff; }
.lg-paso[data-s="current"] { box-shadow: inset 0 0 0 2px var(--app-accent); }
.lg-paso[data-s="current"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--app-accent); }
.lg-paso[data-s="warning"] { background: var(--app-warning-soft); box-shadow: inset 0 0 0 1.5px var(--app-warning); }
.lg-paso[data-s="warning"]::after { content: ""; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid var(--app-warning); margin-top: -1px; }
.lg-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lg-titulo b { font-size: 13.5px; font-weight: 600; }
.lg-detalle { font-size: 12.5px; color: var(--app-ink-2); }
.lg-lineas { grid-column: 2; display: grid; gap: 6px; margin-top: 8px; }
.lg-linea { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: var(--r-inner); background: var(--app-muted); font-size: 12px; }
.lg-linea span:first-child { color: var(--app-ink-2); }
.lg-linea[data-tono="warning"] { background: var(--app-warning-soft); color: var(--app-warning-text); }
.lg-linea[data-tono="warning"] span:first-child { color: inherit; }
.lg-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-resumen > div { padding: 10px 14px; border-right: 1px solid var(--app-border); }
.lg-resumen > div:last-child { border-right: 0; }
.lg-resumen small { display: block; font-size: 11.5px; color: var(--app-ink-2); }
.lg-resumen .m { font-size: 15px; }

/* ---------- Recepción ---------- */
.rc-cuerpo { display: grid; gap: 12px; }
@container (min-width: 600px) { .rc-cuerpo { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; } }
.rc-paso-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; }
.rc-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--app-accent); color: var(--app-accent); font-size: 12px; font-weight: 600; }
.rc-paso-cab b { font-size: 14px; font-weight: 600; }
.rc-tropa { margin: 0 14px; border-radius: var(--r-inner); box-shadow: inset 0 0 0 1px var(--app-border); background: var(--app-muted); overflow: hidden; }
.rc-tropa-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-bottom: 1px solid var(--app-border); font-size: 12px; color: var(--app-ink-2); }
.rc-tropa-cab .m { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--app-surface); box-shadow: inset 0 0 0 1px var(--app-control); color: var(--app-ink); font-size: 12.5px; }
.rc-tropa-cab .rc-suma { margin-left: auto; font-family: var(--mono); color: var(--app-ink); }
.rc-medias { display: grid; background: var(--app-surface); }
.rc-media { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--app-border); }
.rc-media:last-child { border-bottom: 0; }
.rc-id { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--app-border-strong); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.rc-ref { overflow: hidden; height: 30px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--app-border-strong); color: var(--app-ink-3); font-size: 12px; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; }
.rc-ref[data-lleno] { color: var(--app-ink); }
.rc-peso { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
@container (max-width: 520px) {
  .rc-media { grid-template-columns: auto minmax(0, 1fr) 18px; }
  .rc-ref { grid-column: 1 / -1; grid-row: 2; }
}
.rc-ok { width: 16px; height: 16px; color: var(--app-success); }
.rc-verif { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; margin: 12px 14px 14px; padding: 12px; border-radius: var(--r-inner); box-shadow: inset 0 0 0 1px var(--app-border); font-size: 12.5px; }
.rc-check { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--app-control); display: grid; place-items: center; transition: background-color 160ms var(--app-ease); }
.rc-check svg { width: 12px; height: 12px; color: var(--app-on-action); opacity: 0; }
.rc-check[data-marcado] { background: var(--app-action); box-shadow: none; }
.rc-check[data-marcado] svg { opacity: 1; }
.rc-verif small { font-size: 11.5px; color: var(--app-ink-2); }
.rc-pasos { display: grid; gap: 0; padding: 12px 14px; }
.rc-pasos-cab { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; font-size: 12.5px; font-weight: 500; }
.rc-pasos-cab .m { color: var(--app-ink-2); font-weight: 400; }
.rc-pasos li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 10px; padding: 6px 0; font-size: 12.5px; }
.rc-pasos li small { grid-column: 2; font-size: 11.5px; color: var(--app-ink-2); }
.rc-marca { width: 14px; height: 14px; margin-top: 2px; }
.rc-marca[data-s="ok"] { color: var(--app-success); }
.rc-marca[data-s="falta"] { color: var(--app-warning); }
.rc-marca[data-s="opc"] { color: var(--app-ink-3); }
.rc-final { display: grid; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--app-border); }
.rc-final[hidden] { display: none; }
.rc-perfil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* ---------- Pedidos: ficha del pedido (maqueta 07-pedidos, A3) ---------- */
.pd-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pd-pasos { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; padding: 2px; }
.pd-pasos li { display: flex; align-items: center; gap: 8px; color: var(--app-ink-3); font-size: 12.5px; white-space: nowrap; }
.pd-pasos li + li::before { content: ""; width: 22px; height: 1px; margin: 0 8px; background: var(--app-border-strong); }
.pd-pasos small { font-size: 12px; font-weight: 400; color: var(--app-ink-2); }
.pd-d { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--app-border-strong); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.pd-d svg { width: 12px; height: 12px; }
.pd-pasos li[data-state="done"] { color: var(--app-ink-2); }
.pd-pasos li[data-state="done"] .pd-d { background: var(--app-action); box-shadow: none; color: var(--app-on-action); }
.pd-pasos li[data-state="current"] { color: var(--app-ink); font-weight: 600; }
.pd-pasos li[data-state="current"] .pd-d { box-shadow: inset 0 0 0 1.5px var(--app-accent); color: var(--app-accent); }
@container (max-width: 520px) { .pd-pasos { column-gap: 16px; } .pd-pasos li + li::before { display: none; } }
.pd-cuerpo { display: grid; gap: 12px; }
@container (min-width: 700px) { .pd-cuerpo { grid-template-columns: minmax(0, 1fr) 232px; align-items: start; } }
.pd-main { display: grid; gap: 12px; min-width: 0; }
.pd-lineas { margin: 12px 14px 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pd-linea { display: flex; flex-direction: column; gap: 4px; border: 0; color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 140ms var(--app-ease); }
.pd-linea:hover { box-shadow: 0 0 0 1px var(--app-control), var(--app-shadow-sm); }
.pd-linea[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--app-accent), var(--app-shadow-sm); }
.pd-linea > b { font-size: 13.5px; font-weight: 500; }
.pd-q { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--app-ink-2); }
.pd-q b { font-size: 13px; font-weight: 500; color: var(--app-warning-text); }
.pd-reserva { display: grid; gap: 10px; padding: 12px 14px 14px; }
.pd-lote b { display: block; font-size: 13.5px; font-weight: 500; }
.pd-lote small { display: block; margin-top: 1px; font-family: var(--mono); font-size: 11.5px; color: var(--app-ink-2); }
.pd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-tile { display: grid; gap: 2px; align-content: space-between; padding: 10px 12px; }
.pd-tile > span { font-size: 12px; color: var(--app-ink-2); }
.pd-tile b { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.pd-tile b small { margin-left: 3px; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--app-ink-2); letter-spacing: 0; }
.pd-tile b[data-tone="warning"] { color: var(--app-warning-text); }
.pd-tile b[data-tone="texto"] { font-family: var(--font); font-size: 15px; letter-spacing: -.01em; line-height: 1.6; }
.pd-vacio { padding: 12px 14px 14px; font-size: 12.5px; color: var(--app-ink-2); }
.pd-rail { display: grid; gap: 14px; padding: 14px; }
.pd-rail h4 { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--app-ink-2); }
.pd-rail h4 b { font-weight: 500; color: var(--app-ink); }
.pd-prog { display: grid; gap: 6px; font-size: 12.5px; }
.pd-prog > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: var(--app-ink-2); }
.pd-prog b { font-family: var(--mono); font-weight: 500; color: var(--app-ink); white-space: nowrap; }
.pd-barra { height: 6px; overflow: hidden; border-radius: 3px; background: var(--app-border); }
.pd-barra span { display: block; height: 100%; background: var(--app-action); }

/* ---------- Historial auditado (pliegue «Historial y trazabilidad» del pedido) ---------- */
.hs-fold { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--app-border); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.hs-chev { width: 8px; height: 8px; margin: 0 2px 3px 2px; border-right: 1.5px solid var(--app-ink-2); border-bottom: 1.5px solid var(--app-ink-2); transform: rotate(45deg); }
.hs-fold .app-cuenta { margin-left: auto; font-weight: 400; white-space: nowrap; }
.hs-sub { padding: 12px 14px 4px; font-size: 12.5px; font-weight: 500; color: var(--app-ink-2); }
.hs-lista { display: grid; padding: 4px 14px 14px; }
.hs-item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; }
.hs-item::before { content: ""; position: absolute; left: 6.5px; top: 26px; bottom: -10px; width: 1px; background: var(--app-border-strong); }
.hs-item:last-child::before { display: none; }
.hs-punto { grid-row: 1 / span 3; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--app-surface); box-shadow: inset 0 0 0 1.5px var(--app-control); }
.hs-item[data-tono="success"] .hs-punto { background: var(--app-success); box-shadow: none; }
.hs-item b { font-size: 13px; font-weight: 500; }
.hs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--app-ink-2); }
.hs-quien { display: inline-flex; align-items: center; gap: 6px; color: var(--app-ink); }
.app-ini { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--app-muted); box-shadow: inset 0 0 0 1px var(--app-border); font-size: 10px; font-weight: 600; color: var(--app-ink-2); }
.hs-motivo { margin-top: 6px; padding: 8px 10px; border-radius: var(--r-inner); background: var(--app-muted); font-size: 12px; color: var(--app-ink); }
.hs-valores { margin-top: 6px; font-size: 12px; color: var(--app-ink-2); text-decoration: underline; text-decoration-color: var(--app-border-strong); text-underline-offset: 3px; }

/* ---------- Ingreso por perfil y PIN (ingreso 07) ---------- */
.in-app { gap: 14px; padding: 20px; }
.in-head h4 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.in-head p { margin-top: 4px; font-size: 12.5px; color: var(--app-ink-2); }
.in-pasos { display: flex; flex-wrap: wrap; gap: 6px; }
.in-pasos li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-border-strong); font-size: 12px; color: var(--app-ink-3); }
.in-pasos li[data-s="done"] { color: var(--app-ink-2); }
.in-pasos li[data-s="done"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--app-success); }
.in-pasos li[data-s="now"] { color: var(--app-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--app-accent); }
.in-puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-puerta { display: grid; gap: 10px; align-content: start; }
.in-puerta-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--app-muted); color: var(--app-ink); }
.in-puerta-ic svg { width: 18px; height: 18px; }
.in-puerta b { display: block; font-size: 14px; font-weight: 600; }
.in-puerta small { display: block; font-size: 12px; color: var(--app-ink-2); }
.in-puerta-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--app-border); font-size: 12px; color: var(--app-ink-2); }
.app-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--app-border-strong), 0 1px 0 var(--app-border-strong); font-family: var(--mono); font-size: 11px; color: var(--app-ink-2); }
.in-quien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.in-quien .app-ini { width: 40px; height: 40px; font-size: 14px; }
.in-quien b { display: block; font-size: 14px; font-weight: 600; }
.in-quien small { display: block; font-size: 12px; color: var(--app-ink-2); }
.in-puntos { display: flex; justify-content: center; gap: 14px; padding-top: 4px; }
.in-puntos span { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--app-control); }
.in-puntos span[data-on] { background: var(--app-ink); box-shadow: none; }
.in-msg { text-align: center; font-size: 12.5px; color: var(--app-ink-2); }
.in-teclado { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-tecla { display: grid; place-items: center; height: 50px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.in-tecla[data-vacia] { visibility: hidden; }
.in-tecla[data-fantasma] { background: none; box-shadow: none; color: var(--app-ink-2); }
.in-tecla svg { width: 20px; height: 20px; }
.in-seg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; font-size: 12px; color: var(--app-ink-2); text-align: center; }
.in-seg svg { width: 13px; height: 13px; }

/* ---------- Facultades y PIN (ficha «Gestionar cuenta») ---------- */
.fa-app { gap: 0; padding: 0; align-content: start; }
.fa-cab { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--app-border); }
.fa-cab > span { font-size: 12px; color: var(--app-ink-2); }
.fa-cab h4 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.fa-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--app-ink-2); }
.fa-sec { display: grid; align-content: start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--app-border); }
.fa-sec h5 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.fa-sec h5 svg { width: 15px; height: 15px; color: var(--app-ink-2); }
.fa-sec h5 .app-cuenta { margin-left: 2px; }
.fa-hint { font-size: 12.5px; color: var(--app-ink-2); }
.fa-hint u { text-decoration-color: var(--app-border-strong); text-underline-offset: 3px; color: var(--app-ink); }
.fa-boton { justify-self: start; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--app-border-strong); background: var(--app-surface); font-size: 12.5px; font-weight: 500; }
.fa-mod { display: grid; gap: 2px; padding: 8px; border-radius: var(--r-inner); box-shadow: inset 0 0 0 1px var(--app-border); }
.fa-mod > span { padding: 2px 6px 6px; font-size: 12px; font-weight: 500; color: var(--app-ink-2); }
.fa-op { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; padding: 8px; border-radius: 8px; }
.fa-op[data-cambio] { background: var(--app-accent-soft); }
.fa-op b { font-size: 13px; font-weight: 500; }
.fa-op small { grid-column: 2; font-size: 11.5px; color: var(--app-ink-2); }
.fa-caja { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--app-control); display: grid; place-items: center; }
.fa-caja svg { width: 12px; height: 12px; color: var(--app-on-action); opacity: 0; }
.fa-caja[data-marcada] { background: var(--app-action); box-shadow: none; }
.fa-caja[data-marcada] svg { opacity: 1; }
.fa-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
.fa-pie .app-cuenta { margin-right: auto; }
.fa-campo { padding: 0 16px 14px; }

/* ---------- Centro operativo: «Requiere intervención» con su inspector ---------- */
.ci-cuerpo { display: grid; gap: 12px; align-items: start; }
@container (min-width: 640px) { .ci-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ci-grupo h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 8px 14px; background: var(--app-muted); border-bottom: 1px solid var(--app-border); font-size: 12.5px; font-weight: 500; }
.ci-grupo h4 span:last-child { font-weight: 400; color: var(--app-ink-2); }
.ci-hallazgo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--app-border); background: transparent; color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 140ms var(--app-ease); }
.ci-grupo:last-child .ci-hallazgo:last-child { border-bottom: 0; }
.ci-hallazgo:hover { background: var(--app-hover); }
.ci-hallazgo[aria-pressed="true"] { background: var(--app-accent-soft); }
.ci-hallazgo > svg { flex: none; width: 16px; height: 16px; color: var(--app-ink-2); }
.ci-hallazgo[data-cat="block"] > svg:first-child { color: var(--app-danger); }
.ci-hallazgo > svg:last-child { width: 14px; height: 14px; }
.ci-h { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ci-h b { font-size: 13px; font-weight: 500; }
.ci-h small { font-size: 12px; color: var(--app-ink-2); }
.ci-insp { display: grid; align-content: start; }
.ci-insp-cab { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 14px; border-bottom: 1px solid var(--app-border); }
.ci-insp-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--app-muted); color: var(--app-ink-2); }
.ci-insp-ic svg { width: 17px; height: 17px; }
.ci-insp[data-cat="block"] .ci-insp-ic { background: var(--app-danger-soft); color: var(--app-danger); }
.ci-insp-cab b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.ci-insp-cab small { font-size: 12px; color: var(--app-ink-2); }
.ci-insp-cuerpo { display: grid; gap: 14px; padding: 14px; }
.ci-aviso { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-inner); background: var(--app-muted); font-size: 12.5px; }
.ci-aviso b { font-weight: 600; }
.ci-insp[data-cat="block"] .ci-aviso { background: var(--app-danger-soft); color: var(--app-danger-text); }
.ci-sec { display: grid; gap: 6px; }
.ci-sec h5 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--app-ink-2); }
.ci-sec p { font-size: 12.5px; color: var(--app-ink); }
.ci-regs { display: grid; gap: 0; }
.ci-regs li { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--app-border); }
.ci-regs li b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.ci-regs li small { font-size: 12px; color: var(--app-ink-2); }

/* ---------- Patrones de demostración (docs/10, §5.3), solo dentro de las piezas ----------
   El hero reutiliza clases como .rc-check: todo va bajo .sc-pieza para no tocarlo. */
.sc-pieza [data-cambia="inline"] { display: inline-block; }
.sc-pieza [data-recien] { outline: 2px solid transparent; outline-offset: 2px; animation: sc-recien 1100ms var(--ease-std) both; }
@keyframes sc-recien {
  0%, 30% { outline-color: color-mix(in srgb, var(--app-accent) 45%, transparent); }
  100% { outline-color: transparent; }
}
.sc-pieza .rc-check[data-trazar] svg { stroke-dasharray: 24; animation: sc-trazo 240ms var(--ease-std) 60ms both; }
@keyframes sc-trazo { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
/* En Procesos las piezas van dentro de la columna de la etapa: se posan con menos recorrido. */
.cap [data-entra="objeto"] { --d-objeto: 12px; }

@media (prefers-reduced-motion: reduce) {
  .app-girando { animation: none; border-top-color: var(--app-border-strong); }
  .dp-entrada-texto[data-escribiendo]::after { animation: none; }
}

/* ---------- Plataforma: el recorrido de una media (Inicio, docs/12) ----------
   Diagrama del sitio, no una pantalla del producto: las siete etapas escriben sobre el mismo inventario central.
   Angosto: lista con el eje a la izquierda. Medio (≥ 560 px): lista y detalle lado a lado. Ancho (≥ 820 px): etapas en fila sobre el eje. */
.circuito { gap: 14px; }
.cir-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.cir-cab h3 { font-size: 22px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.circuito .sc-repetir { border-color: var(--app-border-strong); color: var(--app-ink-2); }
.circuito .sc-repetir:hover { border-color: var(--app-control); color: var(--app-ink); }
.cir-cuerpo { display: grid; gap: 14px; align-items: start; }
.cir-recorrido { position: relative; padding: 26px 0 0 30px; }
.cir-etapas { display: grid; gap: 6px; }
.cir-etapas li { position: relative; }
.cir-etapas li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 20px; height: 1px; background: var(--app-border-strong); transition: background-color 220ms var(--app-ease); }
.cir-etapas li:has(> [data-estado="hecho"])::before { background: var(--app-accent); }
.cir-etapa { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0; border-radius: var(--r-inner); background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); color: var(--app-ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 140ms var(--app-ease), color 220ms var(--app-ease); }
.cir-etapa:hover { box-shadow: 0 0 0 1px var(--app-control), var(--app-shadow-sm); }
.cir-etapa[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--app-accent), var(--app-shadow-sm); }
.cir-etapa b { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cir-etapa[data-estado="pendiente"] { color: var(--app-ink-3); }
.cir-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--app-border-strong); font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--app-ink-2); transition: background-color 220ms var(--app-ease), color 220ms var(--app-ease); }
.cir-etapa[data-estado="hecho"] .cir-n { background: var(--app-action); color: var(--app-on-action); box-shadow: none; }
.cir-etapa[aria-pressed="true"] .cir-n, .cir-panel-t .cir-n { background: var(--app-accent); color: var(--app-canvas); box-shadow: none; }
.cir-reg { font-family: var(--mono); font-size: 11.5px; color: var(--app-ink-2); white-space: nowrap; }
.cir-reg[data-tono="pend"] { color: var(--app-warning-text); }
.cir-etapa[data-estado="pendiente"] .cir-reg { visibility: hidden; }
.cir-eje { position: absolute; left: 9px; top: 26px; bottom: 0; width: 2px; border-radius: 1px; background: var(--app-accent); }
.cir-eje span { position: absolute; left: -9px; top: -26px; font-size: 12px; color: var(--app-ink-2); white-space: nowrap; }
/* La media: en columna, un punto sobre el eje; en fila, el código sobre el eje. */
.cir-media { position: absolute; left: 10px; top: 0; z-index: 2; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 3px var(--app-canvas); translate: -50% calc(var(--y, 0px) - 50%); transition: translate 620ms var(--ease-brand); }
.cir-media span { display: none; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--app-canvas); white-space: nowrap; }
.cir-paneles { display: grid; gap: 10px; }
.cir-panel { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: var(--r-outer); background: var(--app-surface); box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm); }
.cir-panel-t { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.cir-control { font-size: 13.5px; line-height: 1.5; color: var(--app-ink); text-wrap: pretty; }
.cir-fin { display: block; margin-top: 6px; color: var(--app-ink-2); }
.cir-registro { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 12px; border-radius: var(--r-inner); background: var(--app-muted); font-size: 12.5px; }
.cir-registro div { display: grid; gap: 1px; }
.cir-registro dt { font-size: 11.5px; color: var(--app-ink-2); }
.cir-registro dd { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cir-registro [data-tono="ok"] { color: var(--app-success-text); }
.cir-registro [data-tono="pend"] { color: var(--app-warning-text); }
.cir-ver { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; font-size: 12.5px; font-weight: 500; color: var(--app-ink); text-decoration: underline; text-decoration-color: var(--app-border-strong); text-underline-offset: 3px; }
.cir-ver:hover { text-decoration-color: currentColor; }
@container (min-width: 560px) {
  .cir-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
}
@container (min-width: 820px) {
  .cir-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cir-recorrido { padding: 0 0 54px; }
  .cir-etapas { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .cir-etapas li::before { left: 50%; top: 100%; width: 1px; height: 22px; }
  .cir-etapa { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; height: 100%; padding: 10px 12px; }
  .cir-eje { left: 0; right: 0; top: auto; bottom: 32px; width: auto; height: 2px; }
  .cir-eje span { left: 0; top: 16px; }
  .cir-media { left: 0; top: auto; bottom: 33px; width: auto; height: 22px; padding: 0 9px; border-radius: 999px; translate: calc(var(--x, 0px) - 50%) 50%; }
  .cir-media span { display: block; }
  .cir-panel { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 16px 18px; }
  .cir-panel-t { grid-column: 1; grid-row: 1; }
  .cir-ver { grid-column: 1; grid-row: 2; }
  .cir-control { grid-column: 2; grid-row: 1 / span 2; }
  .cir-registro { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Cámaras: traslado abierto (Inicio, docs/12; FOS-007: el tránsito no es stock utilizable) ---------- */
.cam-traslado { display: grid; gap: 6px; padding: 12px 14px; font-size: 12.5px; }
.cam-tr-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.cam-traslado b { display: block; font-size: 13.5px; font-weight: 500; }
.cam-traslado small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--app-ink-2); }
.cam-tr-ruta { font-weight: 500; }
.cam-tr-nota { color: var(--app-warning-text); }

/* ---------- Inicio (docs/12): las piezas dentro de su escenario ----------
   El lado de Cámaras va junto a la tabla desde 720 px, para que el escenario no crezca de más. */
@container (min-width: 720px) { .escenario .cam-cuerpo { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; } }
/* Pedido y viaje: dos pantallas en un mismo escenario. La cabecera del pedido lleva su reserva y el aviso lado a lado si entran. */
.pd-cab { gap: 12px; }
.pd-cab-cuerpo { display: grid; gap: 12px; }
@container (min-width: 640px) { .pd-cab-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
/* El balance del bento: sin la lista de pesajes (la muestra la tarjeta «Sin registro anticipado»), con el balance y la diferencia lado a lado. */
.bento .dp-cuerpo { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 600px) {
  .bento .dp-lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .bento .dp-balance { grid-row: span 2; }
}
/* Equipo ahora en el bento: las cuatro personas en una fila cuando entran. */
@container (min-width: 820px) {
  .bento .eq-personas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento .eq-quien { grid-template-columns: 38px minmax(0, 1fr); }
  .bento .eq-estado { grid-column: 1 / -1; }
  /* Tarjetas angostas: el nombre de la tanda arriba y, debajo, su código y su tiempo. */
  .bento .eq-reparto li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .bento .eq-rn { grid-column: 1 / -1; }
  .bento .eq-rsep { display: none; }
  .bento .eq-rc { padding-left: 14px; }
}
/* Recortes del teléfono (≤ 520 px), como en La Pyme: cada pieza se queda con lo esencial para que su escenario no pase de 720 px.
   Lo que se oculta sigue en 05-showcases, en Procesos y en Supervisión. */
@container (max-width: 520px) {
  .escenario .circuito .cir-reg, .escenario .circuito .app-meta { display: none; }
  .escenario .circuito .cir-etapa { min-height: 34px; padding-block: 5px; }
  .escenario .cam-franja .chip, .escenario .cam-franja .cam-temp,
  .escenario .cam-cuerpo .app-seg, .escenario .cam-lectura, .escenario .cam-pend { display: none; }
  .escenario .cam-franja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .escenario .cam-tarjeta { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 10px; }
  .escenario .cam-n { font-size: 18px; }
  .escenario[data-pieza="camaras"] .app-tabla tr { padding-block: 8px; }
  .escenario .cam-cuerpo .app-caja-cab { display: none; }
  .escenario .cam-tr-nota { display: none; }
  .escenario .dp-rend { display: none; }
  .escenario .eq-hoy, .escenario .eq-filtro small, .bento-b .app-nota { display: none; }
  /* Equipo: las personas en una fila que se desliza con el dedo; asoma la siguiente. Nadie queda oculto y los filtros siguen andando. */
  .escenario .eq-personas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none; }
  .escenario .eq-personas::-webkit-scrollbar { display: none; }
  .escenario .eq-persona { scroll-snap-align: start; }
  /* Tiempo por tarea en una línea por tanda: nombre y tiempo; el código está en la tarea de arriba y en el escritorio. */
  .escenario .eq-rc { display: none; }
  /* El panel de la tanda ocupa toda la app y entra en su alto: quedan el motivo y los botones, sin el comentario,
     la nota de identidad ni Finalizar, con márgenes más cortos. */
  .escenario .eq-comentario, .escenario .eq-hint, .escenario .eq-fantasma { display: none; }
  .escenario .eq-tanda { padding: 10px 12px; gap: 6px; }
  .escenario .eq-tanda-cab { padding-bottom: 6px; }
  .escenario .eq-p { gap: 6px; padding: 8px 10px; }
  .escenario .eq-pa .eq-avatar { width: 32px; height: 32px; }
  .escenario .eq-motivo { gap: 6px; }
  .escenario .eq-motivo .dp-campo { gap: 4px; }
  .escenario .pd-cab .pd-reserva, .escenario .lg-resumen { display: none; }
  .escenario .pd-cab .app-aviso p { display: none; }
  /* Viaje: sin la cabecera de la lista; las otras paradas quedan con su estado y el detalle se ve en la que avanza (B).
     Cada línea lleva su rótulo delante en lugar de en una columna. */
  .escenario [data-pieza="viaje"] .app-caja-cab, .escenario [data-pieza="viaje"] .lg-parada:not([data-parada="b"]) .lg-lineas { display: none; }
  .escenario [data-pieza="viaje"] .lg-linea { display: block; }
  .escenario [data-pieza="viaje"] .lg-linea span:first-child { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cir-media { transition: none; } }