/* Capa de valor (docs/08-capa-de-valor.md): ficha de cuatro preguntas y visuales de valor.
   Usa los tokens del sitio, no los de la aplicación: el visual explica, no reconstruye la interfaz. */

/* Ficha de valor: En la planta / Factory OS / Para vos */
.vl-ficha { display: grid; gap: 0; }
.vl-ficha div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.vl-ficha dt { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); }
.vl-ficha dd { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.vl-ficha div[data-beneficio] { border-top-color: var(--accent); }
.vl-ficha div[data-beneficio] dt { color: var(--accent); }
.vl-ficha div[data-beneficio] dd { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.4; color: var(--ink); }
.planta .vl-ficha div { border-top-color: var(--plant-line); }
.planta .vl-ficha dt { color: var(--plant-ink-2); }
.planta .vl-ficha dd { color: var(--plant-ink-2); }
.planta .vl-ficha div[data-beneficio] { border-top-color: var(--accent-plant); }
.planta .vl-ficha div[data-beneficio] dt { color: var(--accent-plant); }
.planta .vl-ficha div[data-beneficio] dd { color: var(--plant-ink); }

/* Pieza de valor */
.vl-pieza { display: grid; gap: 14px; min-width: 0; margin: 0; }
.vl-lamina { display: grid; gap: 24px; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-outer); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line), var(--sombra-objeto); }
.planta .vl-lamina { background: transparent; box-shadow: inset 0 0 0 1px var(--plant-line); }
.vl-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--ink-2); }
.vl-cab b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.vl-cab .mono { font-family: var(--mono); font-size: 13px; }
.planta .vl-cab { color: var(--plant-ink-2); }
.planta .vl-cab b { color: var(--plant-ink); }
.vl-pie { font-size: 12px; color: var(--ink-3); }
.planta .vl-pie { color: var(--plant-ink-2); }

/* Número protagonista */
.vl-num { display: grid; gap: 4px; }
.vl-num b { font-size: clamp(48px, 6vw, 80px); font-weight: 600; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.vl-num b small { font-size: .45em; letter-spacing: -.02em; margin-left: .08em; }
.vl-num span { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 26em; }
.planta .vl-num span { color: var(--plant-ink-2); }
.vl-m { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-cod { white-space: nowrap; }

/* Crecimiento al entrar en vista (lo activa [data-visto] en el contenedor) */
.vl-crece { transform-origin: left; transform: scaleX(var(--vl-escala, 1)); transition: transform 900ms var(--ease-brand); }
[data-vl-anima]:not([data-visto]) .vl-crece { --vl-escala: 0; }
@media (prefers-reduced-motion: reduce) { .vl-crece { transition: none; } [data-vl-anima]:not([data-visto]) .vl-crece { --vl-escala: 1; } }

/* Clases de Desposte: color + patrón (no depende solo del color) */
.vl-c-corte { background: var(--accent); }
.vl-c-recorte { background: color-mix(in srgb, var(--accent) 45%, var(--paper-raised)); }
.vl-c-sub { background-color: color-mix(in srgb, var(--ink) 14%, var(--paper-raised)); background-image: repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--ink) 22%, transparent) 5px 6px); }
.vl-c-desc { background-color: color-mix(in srgb, var(--ink) 6%, var(--paper-raised)); background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--ink) 30%, transparent) 4px 5px); }
.vl-c-noapto { background: var(--danger); }
.vl-c-dif { background-image: repeating-linear-gradient(135deg, transparent 0 2px, var(--warning) 2px 3px); }

/* Barra apilada al 100 % */
.vl-apilada { display: flex; height: 28px; gap: 2px; overflow: hidden; border-radius: 7px; }
.vl-apilada i { display: block; height: 100%; min-width: 2px; }
.vl-clases { display: grid; gap: 0; font-size: 14px; }
.vl-clases li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.vl-clases li > i { align-self: center; width: 14px; height: 14px; border-radius: 4px; }
.vl-clases li > i.vl-c-sub, .vl-clases li > i.vl-c-desc, .vl-clases li > i.vl-c-recorte { box-shadow: inset 0 0 0 1px var(--line-strong); }
.vl-clases b { font-weight: 500; }
.vl-clases small { display: block; font-size: 12.5px; color: var(--ink-3); }
.vl-clases .vl-m { text-align: right; }
.vl-clases .vl-pct { min-width: 4.5em; color: var(--ink-3); }
.vl-clases li[data-cero] { color: var(--ink-3); }
.vl-dif { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 9%, transparent); font-size: 14px; }
.vl-dif b { font-family: var(--mono); font-weight: 500; }
.vl-dif span { color: var(--ink-2); }

/* Comparación de rendimiento entre orígenes */
.vl-compara { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(4.5em, auto); gap: 10px 12px; }
.vl-compara h4 { grid-column: 1 / -1; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.vl-fila { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 10px; font-size: 14px; }
.vl-fila .vl-pista { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.vl-fila .vl-pista i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.vl-fila .vl-m { text-align: right; }

/* Cascada: de lo físico a lo disponible */
.vl-cascada { display: grid; gap: 10px; }
.vl-paso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.vl-paso > span { font-size: 14px; color: var(--ink-2); }
.vl-paso > span b { font-weight: 500; color: var(--ink); }
.vl-paso > .vl-m { font-size: 15px; text-align: right; }
.vl-pista-c { grid-column: 1 / -1; position: relative; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.vl-pista-c i { position: absolute; top: 0; bottom: 0; left: var(--d); width: var(--w); min-width: 3px; border-radius: 6px; }
.vl-pista-c .vl-fisico { background: color-mix(in srgb, var(--ink) 18%, var(--paper-raised)); }
.vl-pista-c .vl-reserva { background: color-mix(in srgb, var(--accent) 35%, var(--paper-raised)); }
.vl-pista-c .vl-pend { background-color: color-mix(in srgb, var(--warning) 16%, var(--paper-raised)); background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--warning) 60%, transparent) 4px 5px); }
.vl-pista-c .vl-disp { background: var(--accent); }
.vl-paso[data-total] { padding-top: 12px; border-top: 1px solid var(--line); }
.vl-paso[data-total] > span b { font-weight: 600; }

/* Alcance: una media, hasta dónde llegó */
.vl-alcance { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; }
.vl-alc { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 4px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.vl-alc:first-child { border-top: 0; padding-top: 4px; }
.vl-alc > small, .vl-alc > .vl-recep { grid-column: 2; }
.vl-alc > b { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.vl-alc > b small { font-size: .45em; letter-spacing: -.01em; margin-left: .1em; }
.vl-alc > span { font-size: 15px; font-weight: 500; }
.vl-alc > small { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.vl-alc[data-foco] > b { color: var(--accent); }
.planta .vl-alc { border-top-color: var(--plant-line); }
.planta .vl-alc > span { color: var(--plant-ink); }
.planta .vl-alc > small, .planta .vl-recep { color: var(--plant-ink-2); }
.planta .vl-alc[data-foco] > b { color: var(--accent-plant); }
.planta .vl-recep [data-e="ok"]::before { color: var(--success-plant); }
.planta .vl-recep [data-e="dif"]::before, .planta .vl-recep [data-e="pend"]::before { color: var(--warning-plant); }
.vl-recep { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.vl-recep span::before { margin-right: 5px; }
.vl-recep [data-e="ok"]::before { content: "●"; color: var(--success); }
.vl-recep [data-e="dif"]::before { content: "▲"; color: var(--warning); font-size: 11px; }
.vl-recep [data-e="pend"]::before { content: "○"; color: var(--warning); }

/* Diferencia → decisión → registro */
.vl-flujo { display: grid; gap: 12px; counter-reset: flujo; }
.vl-etapa { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.vl-etapa > span { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); }
.vl-etapa > b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.vl-etapa > p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.vl-etapa .vl-grande { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.vl-etapa[data-tono="dif"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent); }
.vl-etapa[data-tono="dif"] .vl-grande { color: var(--warning); }
.vl-etapa[data-tono="ok"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.planta .vl-etapa { box-shadow: inset 0 0 0 1px var(--plant-line); }
.planta .vl-etapa > span, .planta .vl-etapa > p { color: var(--plant-ink-2); }
.planta .vl-etapa[data-tono="dif"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning-plant) 60%, transparent); }
.planta .vl-etapa[data-tono="dif"] .vl-grande { color: var(--warning-plant); }
.planta .vl-etapa[data-tono="ok"] { box-shadow: inset 0 0 0 1.5px var(--accent-plant); }
@container (min-width: 620px) {
  .vl-flujo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vl-etapa + .vl-etapa::before { content: "→"; position: absolute; left: -12px; top: 50%; transform: translate(-50%, -50%); font-size: 14px; color: var(--ink-3); }
  .planta .vl-etapa + .vl-etapa::before { color: var(--plant-ink-2); }
}
.vl-contenedor { container-type: inline-size; }
.vl-clases li[data-cero] > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); }

/* Bloque «Lo que cambia» dentro de una página: rótulo, titular y visual de valor */
.vl-cambia { display: grid; gap: 14px; min-width: 0; }
.vl-rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--accent); }
.planta .vl-rotulo { color: var(--accent-plant); }
.vl-titular { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.vl-bajada { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.planta .vl-bajada { color: var(--plant-ink-2); }

/* Ficha dentro de un showcase: hereda .vl-ficha, sin borde superior en la primera fila */
.sc-texto .vl-ficha div:first-child { border-top: 0; padding-top: 4px; }

/* Leyenda en línea de las clases (versión compacta del rendimiento) */
.vl-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.vl-leyenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vl-leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.vl-leyenda i.vl-c-sub, .vl-leyenda i.vl-c-desc, .vl-leyenda i.vl-c-recorte { box-shadow: inset 0 0 0 1px var(--line-strong); }
.vl-leyenda b { font-family: var(--mono); font-weight: 500; color: var(--ink); }

/* Términos encadenados: del papel al lote, o producción ÷ tiempo = indicador */
.vl-terminos { display: grid; gap: 0; }
.vl-termino { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.vl-termino:first-child { border-top: 0; padding-top: 0; }
.vl-termino > span { font-size: 14px; color: var(--ink-2); }
.vl-termino > b { font-family: var(--mono); font-size: 18px; font-weight: 500; text-align: right; white-space: nowrap; }
.vl-termino > small { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.vl-termino[data-op]::before { content: attr(data-op); position: absolute; left: 0; top: 0; transform: translateY(-55%); padding-right: 8px; background: var(--paper-raised); font-family: var(--mono); font-size: 13px; line-height: 1; color: var(--ink-3); }
.vl-termino[data-foco] > b { color: var(--accent); }
.vl-termino[data-tono="pend"] > b { color: var(--warning); }
@container (min-width: 600px) {
  .vl-terminos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 28px; }
  .vl-termino { position: relative; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0; border-top: 0; }
  .vl-termino > b { order: -1; font-size: 22px; text-align: left; }
  .vl-termino[data-op]::before { left: -14px; top: 4px; transform: translateX(-50%); padding: 0; background: none; font-size: 15px; }
}

/* Cobertura de un pedido: reservado frente a solicitado */
.vl-fila[data-falta] .vl-pista { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--warning) 45%, transparent) 4px 5px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent); }
.vl-fila[data-falta] > .vl-m:last-child { color: var(--warning); }
.vl-fila > small { grid-column: 2 / -1; margin-top: -6px; font-size: 12.5px; color: var(--ink-3); }

/* Entregas: lo que salió frente a lo que llegó, por parada */
.vl-entregas { display: grid; gap: 0; font-size: 14px; }
.vl-entrega { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 4.6em; align-items: baseline; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.vl-entrega:first-child { border-top: 0; padding-top: 0; font-size: 12.5px; color: var(--ink-3); }
.vl-entrega > .vl-m { text-align: right; }
.vl-entrega > small { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.vl-entrega > small::before { margin-right: 6px; }
.vl-entrega[data-e="ok"] > small::before { content: "●"; color: var(--success); }
.vl-entrega[data-e="dif"] > small::before { content: "▲"; font-size: 11px; color: var(--warning); }
.vl-entrega[data-e="pend"] > small::before { content: "○"; color: var(--warning); }
.vl-entrega[data-e="dif"] > .vl-m:last-of-type { color: var(--warning); }
.vl-leyenda i[data-cero] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); }

/* Fila de valor dentro de un bloque de página: rótulo y titular a la izquierda, visual a la derecha (≥ 1024 px) */
.vl-fila-valor { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) {
  .vl-fila-valor { grid-column: 2 / -1; grid-template-columns: subgrid; align-items: start; row-gap: 14px; }
  .vl-fila-valor > :not(.vl-pieza) { grid-column: 1 / 5; }
  .vl-fila-valor > .vl-pieza { grid-column: 5 / -1; grid-row: 1 / span 4; }
  /* Apilada: ocupa una sola columna del bloque (por ejemplo, debajo de la pieza de un showcase). */
  .vl-fila-valor[data-apilada] { grid-template-columns: minmax(0, 1fr); }
  .vl-fila-valor[data-apilada] > :not(.vl-pieza), .vl-fila-valor[data-apilada] > .vl-pieza { grid-column: 1; grid-row: auto; }
  .vl-fila-valor[data-apilada] > .vl-pieza { margin-top: 10px; }
}

/* Beneficio en una línea (reemplaza a la ficha cuando el bloque ya tiene su lectura) */
.vl-para { display: grid; gap: 6px; max-width: 30em; padding-top: 14px; border-top: 1px solid var(--accent); font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -.015em; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.vl-para > span { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--accent); }
.planta .vl-para { border-top-color: var(--accent-plant); color: var(--plant-ink); }
.planta .vl-para > span { color: var(--accent-plant); }