/* 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 140ms var(--ease-std), border-color 140ms 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 160ms 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); } }
.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; }

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

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