/* Factory OS · sitio web — Centro de Recursos (docs/22). Lámina CR1: los tres sistemas de presentación.
   Prefijo rx-. Va después de sitio.css, showcases.css, valor.css y composicion.css; usa sus tokens y no los redefine.
   Sistema A (Biblioteca editorial) y C (Documentación) van sobre papel liso; el B (Soluciones) y el índice, con pintura. */

/* ==========================================================================
   Comunes: franja de la lámina, menú «Recursos», migas, antetítulo, buscador, filtros y tarjetas
   ========================================================================== */

/* Franja de revisión: solo en maquetas/ (doc 22, §2.3). Nunca llega a dist/. */
.rx-franja { border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); background: color-mix(in srgb, var(--warning) 9%, var(--paper)); }
.rx-franja p { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-block: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.rx-franja b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }

/* El menú «Recursos» y la columna del pie están en sitio.css desde CR2: aparecen en todas las páginas. */

/* Migas (doc 22, §3): Inicio › Recursos › Categoría › Artículo. */
.rx-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.rx-migas li { display: inline-flex; align-items: center; }
.rx-migas li + li::before { content: "/"; padding-inline: 8px; color: var(--line-strong); }
.rx-migas a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); text-decoration: none; }
.rx-migas a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.rx-migas [aria-current="page"] { color: var(--ink-3); }

/* Antetítulo: el nombre de la categoría, como en el menú. */
.rx-ante { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.rx-ante svg { width: 15px; height: 15px; }

/* Íconos de las categorías (sprite de la barra). */
.rx-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.rx-ico svg { width: 17px; height: 17px; }

/* Buscador (doc 22, §5): sin formulario (la CSP lo impide); JS sobre recursos/indice.json, cargado al enfocar. */
.rx-buscar { position: relative; width: 100%; max-width: 34rem; }
.rx-buscar-campo { position: relative; display: flex; align-items: center; }
.rx-buscar-campo > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.rx-buscar input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line-strong); border-radius: var(--r-inner); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 16px; transition: border-color var(--t-estado) var(--ease-std), box-shadow var(--t-estado) var(--ease-std); }
.rx-buscar input::placeholder { color: var(--ink-3); }
.rx-buscar input:hover { border-color: var(--ink-3); }
.rx-buscar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rx-buscar input::-webkit-search-cancel-button { cursor: pointer; }
.rx-resultados { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: min(60vh, 420px); overflow-y: auto; padding: 8px; border-radius: 14px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -16px rgb(0 0 0 / .28); }
.rx-resultados[hidden] { display: none; }
.rx-res-n { padding: 6px 10px 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-resultados ul { display: grid; gap: 2px; }
.rx-resultados a { display: grid; gap: 2px; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.rx-resultados a:hover, .rx-resultados a:focus-visible { background: var(--line); }
.rx-resultados a b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.rx-resultados a small { font-size: 12.5px; color: var(--ink-3); }
.rx-resultados mark { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; border-radius: 2px; }
.rx-res-vacio { padding: 6px 10px 10px; font-size: 14px; color: var(--ink-2); }

/* Filtros con el estado en la URL (?tema=, ?tipo=, ?area=). */
.rx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised); color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: color var(--t-estado) var(--ease-std), border-color var(--t-estado) var(--ease-std), background-color var(--t-estado) var(--ease-std); }
.rx-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.rx-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.rx-chip small { font-family: var(--mono); font-size: 12px; color: inherit; opacity: .72; }
@media (pointer: coarse) { .rx-chip { min-height: 44px; } }

/* Tarjeta editorial: tipo, título, resumen, lectura y fecha. La tarjeta entera es el enlace. */
.rx-tarjetas { display: grid; gap: 16px; }
@media (min-width: 768px) { .rx-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .rx-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.rx-tarjeta { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 24px; border-radius: 16px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-estado) var(--ease-std); }
a.rx-tarjeta:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--sombra-objeto); }
.rx-tipo { font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.rx-tarjeta h3 { font-size: clamp(19px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.rx-tarjeta p { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.rx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rx-meta svg { width: 13px; height: 13px; }
/* Lámina: el lugar de un recurso todavía sin redactar. No es enlace. */
.rx-tarjeta[data-lamina] { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-tarjeta[data-lamina]::after { content: "Sin redactar · lámina"; order: -1; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 12%, transparent); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.rx-tarjeta[hidden] { display: none; }

/* Vacío de un filtro: dice qué pasó y cómo volver. */
.rx-vacio { display: grid; justify-items: start; gap: 10px; padding: 28px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-vacio[hidden] { display: none; }
.rx-vacio p { font-size: 15px; color: var(--ink-2); }
.rx-boton-sec { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--paper-raised); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--t-estado) var(--ease-std); }
.rx-boton-sec:hover { border-color: var(--ink-3); }
.rx-boton-sec svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .rx-boton-sec { min-height: 44px; } }

/* Secciones de ritmo común. */
.rx-seccion { padding-block: calc(var(--ritmo) / 2); }
.rx-seccion .grid { row-gap: 32px; }
.rx-seccion-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; }
.rx-seccion-cab > div { display: grid; gap: 12px; justify-items: start; max-width: 40rem; }
.rx-seccion-cab .titulo { font-size: clamp(30px, 3.2vw, 44px); }

/* ==========================================================================
   Índice de Recursos: la tarjeta de categorías sobre la pintura, destacados y novedades
   ========================================================================== */
.rx-hub { padding-block: clamp(32px, 5vw, 72px) calc(var(--ritmo) / 2); }
.rx-hub .grid { row-gap: 40px; align-items: center; }
.rx-hub-texto { display: grid; gap: 20px; justify-items: start; }
.rx-hub .display { font-size: clamp(40px, 4.6vw, 68px); max-width: 11em; }
.rx-hub .bajada { max-width: 30em; }
.rx-hub-escenario { grid-column: 1 / -1; }
.rx-mapa { position: relative; display: grid; gap: 28px; padding: clamp(20px, 2.6vw, 32px); border-radius: 16px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line), 0 25px 50px -12px rgb(0 0 0 / .32); }
.rx-mapa-grupo { display: grid; gap: 6px; align-content: start; }
.rx-mapa-t { padding: 0 10px 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-mapa ul { display: grid; gap: 2px; }
.rx-mapa a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px 14px; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color var(--t-estado) var(--ease-std); }
.rx-mapa a:hover { background: var(--line); }
.rx-mapa a .rx-ico { grid-row: span 2; }
.rx-mapa a b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; padding-top: 2px; }
.rx-mapa a b span { color: var(--ink-3); transition: color var(--t-estado) var(--ease-std); }
.rx-mapa a:hover b span { color: var(--ink); }
.rx-mapa a small { font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.rx-mapa a[data-lamina] { opacity: .72; }
.rx-mapa a[data-lamina] small::after { content: " · Sin redactar"; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
@media (min-width: 640px) { .rx-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
@media (min-width: 1024px) {
  .rx-hub .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(40px, 5vw, 80px); }
  .rx-hub .grid > .rx-hub-texto { grid-column: 1; }
  .rx-hub .grid > .rx-hub-escenario { grid-column: 2; }
}

/* Destacados del índice: una guía y un caso, lado a lado desde 1.024 px. */
.rx-destacados { display: grid; gap: 16px; }
@media (min-width: 1024px) { .rx-destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.rx-dest { display: flex; flex-direction: column; gap: 24px; padding: clamp(20px, 2.6vw, 32px); border-radius: 20px; background: var(--escenario-liso); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-estado) var(--ease-std); }
.rx-dest:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-dest-texto { display: grid; gap: 10px; justify-items: start; }
.rx-dest h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.rx-dest p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.rx-dest .rx-meta { margin-top: 0; padding-top: 0; }
.rx-dest-pieza { margin-top: auto; }

/* Novedades recientes (índice y menú). */
.rx-recientes { display: grid; border-top: 1px solid var(--line-strong); }
.rx-recientes li { border-bottom: 1px solid var(--line-strong); }
.rx-recientes a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.rx-recientes time { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.rx-recientes b { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.rx-recientes small { font-size: 14px; color: var(--ink-2); }
.rx-recientes a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 768px) { .rx-recientes a { grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: baseline; } }

/* Implementación en el índice: la oferta de WAGON, sin plazos ni precios. */
.rx-impl { display: grid; gap: 24px; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
.rx-impl-texto { display: grid; gap: 12px; justify-items: start; }
.rx-impl .titulo { font-size: clamp(28px, 2.8vw, 40px); }
.rx-impl-lista { display: grid; gap: 0; }
.rx-impl-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.rx-impl-lista li b { color: var(--ink); font-weight: 600; }
.rx-impl-lista svg { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); }
@media (min-width: 1024px) { .rx-impl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; } }

/* ==========================================================================
   Sistema A · Biblioteca editorial: índice de categoría y artículo
   ========================================================================== */
.rx-cab { padding-block: clamp(24px, 4vw, 48px) clamp(32px, 4vw, 56px); }
.rx-cab .grid { row-gap: 24px; }
.rx-cab-texto { display: grid; gap: 18px; justify-items: start; max-width: 44rem; }
.rx-cab .titulo { font-size: clamp(36px, 4.6vw, 60px); }
.rx-cab-herramientas { display: grid; gap: 16px; }
@media (min-width: 1024px) { .rx-cab-herramientas { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: center; column-gap: 32px; } .rx-cab-herramientas .rx-chips { justify-content: flex-end; } }

/* Destacado del índice A: el artículo grande con su diagrama en miniatura. */
.rx-destacado { display: grid; gap: 28px; padding: clamp(22px, 3vw, 40px); border-radius: 20px; background: var(--escenario-liso); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-estado) var(--ease-std); }
.rx-destacado:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-destacado[hidden] { display: none; }
.rx-destacado-texto { display: grid; gap: 14px; justify-items: start; align-content: center; }
.rx-destacado h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.rx-destacado p { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.rx-destacado .rx-meta { margin-top: 4px; padding-top: 0; }
@media (min-width: 1024px) { .rx-destacado { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px; align-items: center; } }

/* Diagrama de flujo lineal (de la balanza al número): tres pasos y el cálculo. HTML y tokens: se lee en el teléfono y en oscuro. */
.rx-flujo { display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 24px); border-radius: 16px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line), var(--sombra-objeto); }
.rx-flujo-pasos { display: grid; gap: 10px; }
.rx-flujo-paso { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-flujo-paso small { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.rx-flujo-paso b { font-family: var(--mono); font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rx-flujo-paso span { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rx-flujo-paso[data-tono="dif"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 6%, transparent); }
.rx-flujo-paso[data-tono="dif"] b { color: var(--warning); }
.rx-flujo-flecha { display: grid; place-items: center; color: var(--ink-3); }
.rx-flujo-flecha svg { width: 18px; height: 18px; rotate: 90deg; }
.rx-flujo-calculo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 14px 16px; border-radius: 12px; background: var(--paper); }
.rx-flujo-calculo span { font-size: 13.5px; color: var(--ink-2); }
.rx-flujo-calculo b { font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rx-flujo-calculo b em { font-style: normal; color: var(--accent); }
@media (min-width: 640px) {
  .rx-flujo-pasos { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .rx-flujo-flecha svg { rotate: none; }
}
/* Miniatura: en el destacado del índice y en el índice de Recursos. */
.rx-flujo[data-mini] .rx-flujo-paso { padding: 12px; }
.rx-flujo[data-mini] .rx-flujo-paso span { display: none; }
.rx-flujo[data-mini] .rx-flujo-paso b { font-size: clamp(17px, 1.6vw, 20px); }

/* Artículo: columna de lectura centrada (~68 caracteres) e índice fijo a la derecha desde 1.200 px. */
.rx-art { padding-block: clamp(24px, 4vw, 48px) 0; }
.rx-art-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.rx-art-grid > * { min-width: 0; }
.rx-columna { width: 100%; max-width: 42rem; margin-inline: auto; }
.rx-art-cab { display: grid; gap: 18px; justify-items: start; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line-strong); }
.rx-art-cab h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.rx-art-cab .bajada { font-size: clamp(18px, 1.5vw, 21px); max-width: none; }
.rx-art-cab .rx-meta { margin-top: 0; padding-top: 0; }
.rx-indice { display: none; }
.rx-indice-movil { margin-top: 28px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-indice-movil summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; }
.rx-indice-movil summary::-webkit-details-marker { display: none; }
.rx-indice-movil summary::after { content: "+"; font-weight: 400; color: var(--ink-3); }
.rx-indice-movil[open] summary::after { content: "−"; }
.rx-indice-movil ol { padding: 0 18px 14px; }
.rx-toc { display: grid; gap: 2px; counter-reset: toc; }
.rx-toc a { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); text-decoration: none; transition: color var(--t-estado) var(--ease-std); }
.rx-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--ink-3); }
.rx-toc a:hover { color: var(--ink); }
.rx-toc a[aria-current="location"] { color: var(--ink); font-weight: 500; }
.rx-toc a[aria-current="location"]::before { color: var(--accent); }
@media (min-width: 1200px) {
  .rx-art-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr); column-gap: 56px; }
  .rx-art-grid > .rx-columna { grid-column: 2; }
  .rx-indice { display: block; grid-column: 3; grid-row: 2; align-self: start; position: sticky; top: 96px; max-width: 16rem; padding-top: 52px; }
  .rx-indice-t { padding-bottom: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
  .rx-indice-movil { display: none; }
}

/* Prosa editorial: Geist 18/1,65, h2 que forman el índice, h3, listas, tablas, cita y figura. */
.rx-prosa { padding-bottom: 8px; font-size: 18px; line-height: 1.65; color: var(--ink); }
.rx-prosa > * + * { margin-top: 20px; }
.rx-prosa h2 { margin-top: 64px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; scroll-margin-top: 88px; }
.rx-prosa h3 { margin-top: 36px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.rx-prosa h2 + *, .rx-prosa h3 + * { margin-top: 14px; }
.rx-prosa p { text-wrap: pretty; }
.rx-prosa strong { font-weight: 600; }
.rx-prosa a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rx-prosa a:not([class]):hover { text-decoration-thickness: 2px; }
.rx-prosa :is(ul, ol):not([class]) { display: grid; gap: 10px; padding-left: 1.4em; }
.rx-prosa ul:not([class]) { list-style: disc; }
.rx-prosa ul:not([class]) li::marker { color: var(--ink-3); }
.rx-prosa ol:not([class]) { list-style: decimal; }
.rx-prosa ol:not([class]) li::marker { font-family: var(--mono); font-size: .82em; color: var(--ink-3); }
.rx-prosa li { padding-left: 4px; }
.rx-prosa .m { font-family: var(--mono); font-size: .9em; font-variant-numeric: tabular-nums; }
.rx-prosa figure { margin-block: 32px; }
.rx-prosa figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* Pasos numerados del artículo. */
.rx-pasos-lista { display: grid; gap: 0; counter-reset: rxpaso; }
.rx-pasos-lista > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.rx-pasos-lista > li:last-child { border-bottom: 1px solid var(--line); }
.rx-pasos-lista > li::before { counter-increment: rxpaso; content: counter(rxpaso); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.rx-pasos-lista b { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.rx-pasos-lista p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }

/* Cajas del cuerpo: Ejemplo, Antes de calcular, En Factory OS, Lo que el sistema no hace. */
.rx-caja { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 28px); border-radius: 16px; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line); font-size: 16px; line-height: 1.6; }
.rx-prosa .rx-caja { margin-block: 32px; }
.rx-caja-t { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.rx-caja-t svg { width: 15px; height: 15px; }
.rx-caja p { color: var(--ink-2); text-wrap: pretty; }
.rx-caja[data-tipo="ejemplo"] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-caja[data-tipo="producto"] { background: var(--escenario-liso); box-shadow: none; }
.rx-caja[data-tipo="producto"] h3 { margin: 0; font-size: 21px; }
.rx-caja[data-tipo="producto"] .enlace { justify-self: start; margin-top: -6px; }
.rx-caja[data-tipo="no"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rx-caja[data-tipo="no"] ul { display: grid; gap: 6px; padding-left: 0; list-style: none; }
.rx-caja[data-tipo="no"] li { position: relative; padding-left: 28px; color: var(--ink-2); }
.rx-caja[data-tipo="no"] li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
/* Lista para revisar antes de calcular: cuadros de lectura, no casillas que se marcan. */
.rx-check { display: grid; gap: 10px; }
.rx-check li { position: relative; padding-left: 32px; color: var(--ink-2); }
.rx-check li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* Tabla del ejemplo: en el teléfono cada fila se apila. */
.rx-tabla { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.rx-tabla caption { padding-bottom: 10px; text-align: left; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-tabla th, .rx-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.rx-tabla tbody th { font-weight: 500; }
.rx-tabla thead th { font-size: 12.5px; font-weight: 500; color: var(--ink-3); border-bottom-color: var(--line-strong); }
.rx-tabla td.num, .rx-tabla th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-tabla tfoot td, .rx-tabla tfoot th { border-bottom: 0; font-weight: 600; }
/* El ámbar de --warning no llega a 4,5:1 como texto chico; se oscurece hacia la tinta (en oscuro, se aclara). */
.rx-tabla tr[data-tono="dif"] td { color: color-mix(in srgb, var(--warning) 70%, var(--ink)); }
@media (max-width: 559px) {
  .rx-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rx-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .rx-tabla th, .rx-tabla td { padding: 0; border: 0; }
  .rx-tabla tfoot tr { border-bottom: 0; }
}

/* Cita destacada: una frase de la planta, en grande. */
.rx-cita { margin-block: 40px; padding-left: 20px; border-left: 2px solid var(--accent); }
.rx-cita p { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; text-wrap: balance; }

/* Final del artículo: preguntas, relacionados y cierre usan las composiciones existentes. */
.rx-art-fin { padding-top: var(--ritmo); }

/* ==========================================================================
   Sistema B · Caso de uso: problema, secuencia operativa, quién confirma qué y alcance
   ========================================================================== */

/* El problema en la planta: los fragmentos del Problema del Inicio, con sus mismos datos de ejemplo. */
.rx-problema { padding-block: calc(var(--ritmo) / 2); }
.rx-problema .grid { row-gap: 40px; align-items: center; }
.rx-problema-texto { display: grid; gap: 20px; justify-items: start; }
.rx-problema .titulo { font-size: clamp(30px, 3.2vw, 44px); }
.rx-frags { display: grid; gap: 28px; }
.rx-frag-item { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.rx-frag { position: relative; background: var(--paper-raised); border-radius: var(--r-inner); box-shadow: var(--sombra-objeto), 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; }
.rx-frag-origen { justify-self: stretch; padding-top: 10px; border-top: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-frag-peso { padding-inline: 2px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 -2px 0 var(--accent); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rx-frag-mensaje { width: min(100%, 300px); padding: 14px 16px 12px; border-radius: 16px 16px 4px 16px; transform: rotate(-1deg); }
.rx-frag-mensaje time { display: block; margin-top: 6px; text-align: right; font-size: 11px; color: var(--ink-3); }
.rx-frag-cuaderno { width: min(100%, 300px); padding: 18px 20px 14px 44px; transform: rotate(1.4deg); background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--line) 27px 28px); background-position: 0 12px; border-radius: 4px; line-height: 28px; }
.rx-frag-cuaderno::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--danger) 35%, transparent); }
.rx-frag-planilla { width: min(100%, 360px); overflow: hidden; transform: rotate(-.6deg); border-radius: 6px; }
.rx-frag-planilla table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rx-frag-planilla th, .rx-frag-planilla td { padding: 6px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; white-space: nowrap; }
/* Sobre el gris de la cabecera, --ink-3 queda en 4,49:1 en oscuro: los rótulos de columna van con --ink-2. */
.rx-frag-planilla thead th { background: var(--line); font-size: 11px; color: var(--ink-2); padding-block: 4px; }
.rx-frag-planilla tbody th { width: 28px; text-align: center; font-size: 11px; color: var(--ink-3); }
.rx-frag-planilla .mono { font-variant-numeric: tabular-nums; }
.rx-frag-planilla .marcada td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rx-frag-planilla .marcada td.sel { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 767px) {
  .rx-frags { grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; margin-inline: calc(var(--margen) * -1); padding: 8px var(--margen) 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); scrollbar-width: none; }
  .rx-frags::-webkit-scrollbar { display: none; }
  .rx-frag-item { scroll-snap-align: start; }
}
@media (min-width: 768px) { .rx-frags { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
@media (min-width: 1024px) {
  .rx-problema .grid { grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr); column-gap: clamp(48px, 5vw, 80px); }
  .rx-problema .grid > .rx-problema-texto { grid-column: 1; }
  .rx-problema .grid > .rx-frags { grid-column: 2; }
}

/* Secuencia operativa (doc 22, §4.2): los pasos arriba, y cada paso con su texto y la pieza real del área.
   Sin JS se leen todos los pasos uno debajo del otro; con JS se ve uno por vez, avanza solo en foco y se puede pausar. */
.rx-sec { padding-block: calc(var(--ritmo) / 2); }
.rx-sec .grid { row-gap: 28px; }
.rx-sec-cab { display: grid; gap: 16px; justify-items: start; max-width: 44rem; }
.rx-sec-cab .titulo { font-size: clamp(32px, 3.8vw, 52px); }
.rx-sec-barra { display: grid; gap: 12px; }
.rx-pasos { display: flex; gap: 8px; margin-inline: calc(var(--margen) * -1); padding: 2px var(--margen) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--margen); scrollbar-width: none; counter-reset: rxsec; }
.rx-pasos::-webkit-scrollbar { display: none; }
.rx-pasos li { flex: none; }
.rx-pasos a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; min-height: 52px; padding: 8px 16px 10px 10px; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--paper-raised); color: var(--ink-2); text-decoration: none; transition: color var(--t-estado) var(--ease-std), box-shadow var(--t-estado) var(--ease-std); }
.rx-pasos a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.rx-pasos a::before { counter-increment: rxsec; content: counter(rxsec); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.rx-pasos b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; }
.rx-pasos small { font-family: var(--mono); font-size: 11.5px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
.rx-pasos a[aria-current="step"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rx-pasos a[aria-current="step"]::before { background: var(--ink); color: var(--paper); }
.rx-pasos a[data-hecho]::before { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
/* Barra de avance del paso actual: corre mientras la secuencia avanza sola y se congela en pausa. */
.rx-paso-avance { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.rx-sec[data-corriendo] .rx-pasos a[aria-current="step"] .rx-paso-avance { animation: rx-avance var(--rx-dura, 7000ms) linear forwards; }
.rx-sec[data-pausada] .rx-pasos a[aria-current="step"] .rx-paso-avance { animation-play-state: paused; }
@keyframes rx-avance { to { transform: scaleX(1); } }
.rx-sec-control { justify-self: start; }
.rx-sec-control[hidden] { display: none; }
.rx-sec-control [data-icono] { display: none; }
.rx-sec-control[data-estado="corriendo"] [data-icono="pausar"], .rx-sec-control[data-estado="pausada"] [data-icono="seguir"], .rx-sec-control[data-estado="fin"] [data-icono="repetir"] { display: block; }
@media (min-width: 1024px) {
  .rx-sec-barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .rx-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; overflow: visible; }
  .rx-pasos b, .rx-pasos small { overflow: hidden; text-overflow: ellipsis; }
}

.rx-sec-paneles { display: grid; gap: 48px; }
.rx-sec-panel { display: grid; gap: 24px; scroll-margin-top: 88px; }
.rx-sec-panel[hidden] { display: none; }
.rx-sec-texto { display: grid; gap: 12px; justify-items: start; align-content: start; }
.rx-sec-n { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.rx-sec-texto h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.rx-sec-texto p { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.rx-sec-texto .enlace { margin-top: -4px; }
.rx-sec-quien { display: flex; flex-wrap: wrap; gap: 6px; }
/* El escenario de cada paso: la pintura del caso y la pantalla del área, sin estirarse. */
.rx-sec-escenario { min-width: 0; }
.rx-sec-escenario > .app { width: 100%; max-width: 1080px; margin-inline: auto; }
.rx-sec-escenario[data-pieza="grafo"] > .app { max-width: 1180px; }
.rx-sec-escenario[data-ancho="medio"] > .app { max-width: 720px; }
@media (min-width: 1200px) {
  .rx-sec-panel { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); column-gap: 48px; align-items: center; }
}
/* Recortes por ancho del contenedor, los mismos que en cada página de funcionalidad (13, 17 y composicion.css). */
@container (max-width: 520px) {
  .rx-sec-escenario .rc-pasos ol, .rx-sec-escenario .rc-ref, .rx-sec-escenario .rc-verif small, .rx-sec-escenario .app-cab .app-meta { display: none; }
  .rx-sec-escenario .rc-pasos-cab { padding-bottom: 0; }
}
@container (max-width: 699px) {
  .rx-sec-escenario .dp-cuerpo > [data-zona="registro"] { display: none; }
}

/* Quién confirma cada paso: una tira de perfiles. */
.rx-roles { display: grid; gap: 12px; }
.rx-rol { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 16px; background: var(--escenario-liso); }
.rx-rol b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.rx-rol p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.rx-rol .rx-tipo { order: -1; }
@media (min-width: 640px) { .rx-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rx-roles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }

/* ==========================================================================
   Sistema C · Documentación: barra lateral, hoja «Secciones», registro de novedades y «En esta página»
   ========================================================================== */
.rx-doc { padding-block: clamp(24px, 4vw, 40px) var(--ritmo); }
.rx-doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.rx-doc-grid > * { min-width: 0; }
.rx-lateral { display: none; }
.rx-doc-principal { display: grid; gap: 32px; align-content: start; }
.rx-doc-cab { display: grid; gap: 16px; justify-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--line-strong); }
.rx-doc-cab .titulo { font-size: clamp(34px, 4vw, 52px); }
.rx-doc-cab .lectura { max-width: 40em; }
.rx-doc-movil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rx-en-pagina { display: none; }

/* Contenido de la barra lateral (también dentro de la hoja «Secciones»). */
.rx-lat { display: grid; gap: 28px; align-content: start; }
.rx-lat-grupo { display: grid; gap: 8px; }
.rx-lat-grupo > summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; list-style: none; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-lat-grupo > summary::-webkit-details-marker { display: none; }
.rx-lat-grupo > summary svg { width: 14px; height: 14px; transition: rotate var(--t-cambio) var(--ease-std); }
.rx-lat-grupo[open] > summary svg { rotate: 180deg; }
.rx-lat-lista { display: grid; gap: 2px; }
.rx-lat-lista a, .rx-lat-lista button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--t-estado) var(--ease-std), color var(--t-estado) var(--ease-std); }
.rx-lat-lista a:hover, .rx-lat-lista button:hover { background: var(--line); color: var(--ink); }
.rx-lat-lista [aria-current="page"], .rx-lat-lista [aria-pressed="true"] { background: var(--line); color: var(--ink); }
.rx-lat-lista small { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.rx-lat-lista [aria-current="page"] small, .rx-lat-lista [aria-pressed="true"] small { color: var(--ink-2); }
@media (pointer: coarse) { .rx-lat-lista a, .rx-lat-lista button { min-height: 44px; } }

/* Hoja «Secciones» debajo de 1.024 px: el patrón de la hoja del menú, con el foco atrapado. */
.rx-hoja { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 16px; padding: 0 var(--margen) 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-panel) var(--ease-enter), transform var(--t-panel) var(--ease-enter), visibility 0s linear var(--t-panel); }
.rx-hoja[data-abierta="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rx-hoja-barra { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 64px; background: var(--paper); }
.rx-hoja-barra b { font-size: 17px; font-weight: 600; }

@media (min-width: 1024px) {
  .rx-doc-grid { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 48px; }
  .rx-lateral { display: block; position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; padding: 4px 4px 24px 0; scrollbar-width: thin; }
  .rx-doc-movil { display: none; }
}
@media (min-width: 1280px) {
  .rx-doc-grid { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 14rem); }
  .rx-en-pagina { display: block; position: sticky; top: 88px; align-self: start; padding-top: 4px; }
  .rx-en-pagina p { padding-bottom: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
  .rx-en-pagina .rx-toc a::before { content: none; }
  .rx-en-pagina .rx-toc a { grid-template-columns: minmax(0, 1fr); padding: 6px 0 6px 12px; border-left: 1px solid var(--line-strong); font-size: 13.5px; }
  .rx-en-pagina .rx-toc a[aria-current="location"] { border-left-color: var(--accent); }
}

/* Registro de novedades: agrupado por mes, cada entrada con su ancla. */
.rx-mes { display: grid; gap: 0; }
.rx-mes[hidden] { display: none; }
.rx-mes > h2 { position: sticky; top: 64px; z-index: 2; padding: 12px 0; background: color-mix(in srgb, var(--paper) 94%, transparent); font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.rx-nov { display: grid; gap: 12px; padding: 28px 0 32px; border-top: 1px solid var(--line-strong); scroll-margin-top: 112px; }
.rx-nov[hidden] { display: none; }
.rx-nov-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rx-nov-cab time { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.rx-etiqueta { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.rx-etiqueta[data-tipo="nueva"] { box-shadow: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.rx-etiqueta[data-tipo="piloto"] { box-shadow: none; background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--ink); }
.rx-nov h3 { display: flex; align-items: baseline; gap: 10px; font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.rx-nov-ancla { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-3); font-family: var(--mono); font-size: 15px; font-weight: 400; text-decoration: none; opacity: 0; transition: opacity var(--t-estado) var(--ease-std), background-color var(--t-estado) var(--ease-std); }
.rx-nov:hover .rx-nov-ancla, .rx-nov-ancla:focus-visible { opacity: 1; }
.rx-nov-ancla:hover { background: var(--line); color: var(--ink); }
@media (pointer: coarse) { .rx-nov-ancla { opacity: 1; } }
.rx-nov-alcance { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.rx-nov-alcance svg { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.rx-nov > p { max-width: 40em; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.rx-nov .enlace { justify-self: start; margin-top: -6px; }
.rx-nov:target { animation: rx-marca 2200ms var(--ease-std); }
@keyframes rx-marca { 0%, 40% { background: color-mix(in srgb, var(--accent) 7%, transparent); } 100% { background: transparent; } }
.rx-doc-nota { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }