/*
 * Panel del constructor · Santaconcha
 * CSS propio, sin dependencias. Tokens en :root; modo oscuro con prefers-color-scheme.
 * Motivo visual: el lienzo de diseño (papel de trazado frío, frames con su nombre de capa encima)
 * y la pista de pasos del pipeline como único elemento protagonista.
 */

:root {
    --papel: #edf0f4;
    --superficie: #ffffff;
    --superficie-2: #f6f8fa;
    --tinta: #15203a;
    --tinta-suave: #4b5670;
    --tinta-tenue: #6b7690;
    --linea: #d6dce6;
    --linea-fuerte: #b9c2d1;
    --acento: #1d5bd8;
    --acento-hover: #1748ad;
    --acento-suave: #e2ebfc;
    --sobre-acento: #ffffff;
    --ok: #11765a;
    --ok-suave: #dcf2ea;
    --aviso: #9a5800;
    --aviso-suave: #fcefd8;
    --error: #b8253c;
    --error-suave: #fbe2e6;
    --curso: #1d5bd8;
    --curso-suave: #e2ebfc;
    --codigo-fondo: #18233d;
    --codigo-tinta: #dbe3f3;
    --foco: #1d5bd8;
    --sombra: 0 1px 2px rgb(21 32 58 / 0.06);

    --fuente: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-codigo: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --texto-xs: 0.8125rem;
    --texto-s: 0.875rem;
    --texto-m: 0.9375rem;
    --texto-l: 1.125rem;
    --texto-xl: 1.4375rem;
    --texto-xxl: 1.875rem;

    --radio-s: 4px;
    --radio-m: 8px;
    --ancho: 1240px;
    --hueco: clamp(1rem, 3vw, 2rem);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --papel: #0f1522;
        --superficie: #161e2f;
        --superficie-2: #1b2539;
        --tinta: #e5eaf4;
        --tinta-suave: #a9b4c9;
        --tinta-tenue: #8792aa;
        --linea: #2a3550;
        --linea-fuerte: #3a4766;
        --acento: #6b9dff;
        --acento-hover: #8db3ff;
        --acento-suave: #1d2c4f;
        --sobre-acento: #0b1222;
        --ok: #4fcf9f;
        --ok-suave: #143529;
        --aviso: #f0b45a;
        --aviso-suave: #3a2a10;
        --error: #ff7d92;
        --error-suave: #3d1720;
        --curso: #6b9dff;
        --curso-suave: #1d2c4f;
        --codigo-fondo: #0a0f1a;
        --codigo-tinta: #d3dcee;
        --foco: #8db3ff;
        --sombra: none;
        color-scheme: dark;
    }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: var(--texto-m);
    line-height: 1.55;
    font-feature-settings: "tnum" 0;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--texto-xxl); letter-spacing: -0.02em; }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-l); margin-top: 1.5em; }
p { margin: 0 0 1em; }
a { color: var(--acento); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--acento-hover); text-decoration-thickness: 2px; }
code, pre { font-family: var(--fuente-codigo); font-size: 0.86em; }
code { overflow-wrap: anywhere; }
img { max-width: 100%; display: block; }

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: 2px;
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.saltar {
    position: absolute; left: 1rem; top: -4rem; z-index: 10;
    background: var(--superficie); padding: 0.6rem 1rem; border-radius: var(--radio-s);
}
.saltar:focus { top: 1rem; }

.secundario { color: var(--tinta-suave); font-size: var(--texto-s); }
td .secundario, .datos .secundario { display: block; }

/* ---------- Barra superior ---------- */

.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
}
.barra__interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0.75rem var(--hueco);
    display: flex;
    align-items: center;
    gap: 2rem;
}
.marca {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: var(--tinta); text-decoration: none; font-weight: 700; font-size: var(--texto-l);
    letter-spacing: -0.02em;
}
.marca:hover { color: var(--tinta); }
.marca__simbolo { width: 28px; height: 28px; flex: none; }
.marca__simbolo rect { fill: var(--acento); }
.marca__simbolo path { stroke: var(--sobre-acento); stroke-width: 3; stroke-linecap: round; fill: none; }

.navegacion { display: flex; gap: 0.25rem; flex: 1; }
.navegacion a {
    color: var(--tinta-suave); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: var(--radio-s);
    font-weight: 500;
}
.navegacion a:hover { color: var(--tinta); background: var(--superficie-2); }
.navegacion a[aria-current="page"] { color: var(--tinta); background: var(--acento-suave); }

.usuario { display: flex; align-items: center; gap: 0.75rem; }
.usuario form { margin: 0; }
.usuario__nombre { color: var(--tinta-suave); font-size: var(--texto-s); }

/* ---------- Contenido ---------- */

.contenido {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 2rem var(--hueco) 4rem;
}
.contenido:focus { outline: none; }

.migas { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--texto-s); margin-bottom: 0.5rem; }
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas a + a::before { content: "/"; color: var(--linea-fuerte); margin-right: 0.4rem; }

.cabecera {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.cabecera h1 { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.cabecera__bajada { color: var(--tinta-suave); max-width: 68ch; margin: 0; }
.cabecera__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.cabecera__acciones form { margin: 0; }

.cifras-linea { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0.5rem 0 0; }
.cifras-linea div { display: flex; flex-direction: column; }
.cifras-linea dt { font-size: var(--texto-xs); color: var(--tinta-tenue); }
.cifras-linea dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.dos-columnas { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.dos-columnas--ficha { grid-template-columns: minmax(0, 1fr) 320px; }
.dos-columnas--ajustes { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.bloque-ficha { margin: 2.5rem 0 0; }
.bloque-ficha:first-child { margin-top: 0; }
.dos-columnas > .bloque-ficha { margin-top: 2.5rem; }
.bloque-ficha__cabecera { display: flex; justify-content: space-between; gap: 0.5rem 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.bloque-ficha__cabecera form { margin: 0; }
.bloque-ficha__bajada { color: var(--tinta-suave); max-width: 75ch; }

.panel-lateral {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    padding: 1.25rem 1.25rem 0.5rem;
}
.panel-lateral h2 { font-size: var(--texto-l); }
.panel-lateral .datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
.panel-lateral .datos dt { margin-top: 0.6rem; font-size: var(--texto-xs); }
.panel-lateral .datos dt:first-child { margin-top: 0; }

/* ---------- Notas y estados ---------- */

.nota {
    padding: 0.75rem 1rem;
    border-radius: var(--radio-s);
    border-left: 4px solid var(--linea-fuerte);
    background: var(--superficie);
    margin: 0 0 1.5rem;
}
.nota p:last-child { margin: 0; }
.nota--ok, .nota--completada { border-color: var(--ok); background: var(--ok-suave); }
.nota--error, .nota--fallida { border-color: var(--error); background: var(--error-suave); }
.nota--esperando_revision { border-color: var(--aviso); background: var(--aviso-suave); }
.nota--en_curso, .nota--pendiente { border-color: var(--curso); background: var(--curso-suave); }

.estado {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--superficie-2);
    color: var(--tinta-suave);
    border: 1px solid var(--linea);
}
.estado::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
h1 .estado { font-size: var(--texto-s); letter-spacing: 0; }
.estado--pequeno { padding: 0 0.45rem; }
.estado--completado, .estado--completada, .estado--entregado, .estado--aprobado { color: var(--ok); background: var(--ok-suave); border-color: transparent; }
.estado--fallido, .estado--fallida, .estado--con_errores, .estado--interrumpido { color: var(--error); background: var(--error-suave); border-color: transparent; }
.estado--esperando_revision, .estado--en_revision, .estado--borrador, .estado--repetir { color: var(--aviso); background: var(--aviso-suave); border-color: transparent; }
.estado--en_curso, .estado--en_proceso { color: var(--curso); background: var(--curso-suave); border-color: transparent; }
.estado--omitido { color: var(--tinta-tenue); }
.estado--pendiente::before, .estado--nuevo::before, .estado--omitido::before { background: transparent; border: 1.5px solid currentColor; }

/* ---------- Botones ---------- */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radio-s);
    border: 1px solid transparent;
    font: inherit; font-weight: 600; font-size: var(--texto-s);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.boton:hover { text-decoration: none; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.boton--principal { background: var(--acento); color: var(--sobre-acento); }
.boton--principal:hover:not(:disabled) { background: var(--acento-hover); color: var(--sobre-acento); }
.boton--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton--secundario:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.boton--discreto { background: transparent; color: var(--tinta-suave); border-color: transparent; }
.boton--discreto:hover { color: var(--tinta); background: var(--superficie-2); }
.boton--peligro { background: var(--superficie); color: var(--error); border-color: var(--error); }
.boton--peligro:hover { background: var(--error); color: #fff; }
.boton--pequeno { min-height: 2.125rem; padding: 0.3rem 0.75rem; }
.boton--ancho { width: 100%; }

/* ---------- Formularios ---------- */

.formulario { max-width: 860px; }
.grupo {
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--superficie);
    padding: 1.25rem 1.5rem 0.5rem;
    margin: 0 0 1.25rem;
}
.grupo > legend { font-weight: 700; font-size: var(--texto-l); padding: 0 0.4rem; margin-left: -0.4rem; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; }
.campo { margin: 0 0 1rem; border: 0; padding: 0; min-width: 0; }
.campo label, .campo > legend { display: block; font-weight: 600; font-size: var(--texto-s); margin-bottom: 0.3rem; padding: 0; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="password"],
.campo input[type="file"], .campo select, .campo textarea, .reanudar select, .reasignar select {
    width: 100%;
    font: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    padding: 0.5rem 0.65rem;
    min-height: 2.5rem;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-tenue); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.campo__ayuda { color: var(--tinta-suave); font-size: var(--texto-xs); margin: 0.3rem 0 0; }
.campo__error { color: var(--error); font-size: var(--texto-s); font-weight: 600; margin: 0.3rem 0 0; }
.campo--casillas legend { margin-bottom: 0.4rem; }
.campo .casilla { display: inline-flex; font-weight: 400; font-size: var(--texto-m); margin: 0; }
.grupo > .campo__ayuda { margin: 0 0 1rem; }
.grupo > .opciones-origen + .campo__ayuda { margin: 0 0 1.25rem; }
.casillas-en-linea { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

.casilla { display: inline-flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; font-size: var(--texto-m); }
.casilla input { width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; accent-color: var(--acento); flex: none; }
.casilla--bloque { display: flex; padding: 0.75rem 0; border-top: 1px solid var(--linea); }
.casilla--bloque strong { display: block; }
.casilla--bloque span { color: var(--tinta-suave); font-size: var(--texto-s); }
.casilla--bloque strong { color: var(--tinta); font-size: var(--texto-m); }
.interruptores { margin: 0.5rem 0 1rem; }

.opciones-origen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 0.4rem; }
.opcion {
    position: relative;
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-m);
    cursor: pointer;
}
.opcion input { position: absolute; left: 1rem; top: 1.05rem; accent-color: var(--acento); width: 1rem; height: 1rem; margin: 0; }
.opcion:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); background: var(--acento-suave); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion__titulo { font-weight: 700; }
.opcion__texto { color: var(--tinta-suave); font-size: var(--texto-s); }

.formulario__acciones { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }

.zona-peligro {
    max-width: 860px;
    margin-top: 3rem; padding: 1.25rem 1.5rem;
    border: 1px solid var(--error); border-radius: var(--radio-m);
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.zona-peligro h2 { font-size: var(--texto-l); }
.zona-peligro p { margin: 0; color: var(--tinta-suave); max-width: 60ch; }

/* ---------- Acceso ---------- */

.cuerpo-acceso {
    min-height: 100vh;
    display: grid; place-items: center;
    background:
        linear-gradient(var(--papel), var(--papel)) padding-box,
        var(--papel);
    background-image:
        radial-gradient(circle at 1px 1px, var(--linea-fuerte) 1px, transparent 0);
    background-size: 24px 24px;
}
.acceso {
    width: min(420px, calc(100% - 2rem));
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    padding: 2rem;
    box-shadow: var(--sombra);
}
.acceso__marca { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: var(--texto-l); margin-bottom: 1.25rem; }
.acceso__titulo { font-size: var(--texto-xl); margin-bottom: 1.5rem; }
.acceso__formulario .casilla { margin: 0 0 1.25rem; }

/* ---------- Tablas ---------- */

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.tabla th, .tabla td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla th { font-size: var(--texto-xs); font-weight: 600; color: var(--tinta-suave); background: var(--superficie-2); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .estado + .secundario { margin-top: 0.15rem; }
.enlace-fuerte { font-weight: 600; color: var(--tinta); text-decoration: none; font-size: var(--texto-m); }
.enlace-fuerte:hover { color: var(--acento); text-decoration: underline; }
.fila--revisar td:first-child { box-shadow: inset 4px 0 0 var(--aviso); }

.paginacion { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: var(--texto-s); }
.paginacion__enlace[aria-disabled="true"] { color: var(--tinta-tenue); }

.vacio {
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio-m);
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--superficie);
}
.vacio p { color: var(--tinta-suave); max-width: 52ch; margin-left: auto; margin-right: auto; }
.vacio--compacto { padding: 1.5rem; text-align: left; }
.vacio--compacto p { margin: 0; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0 0 1rem; font-size: var(--texto-s); }
.datos dt { color: var(--tinta-suave); }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.datos--anchos { grid-template-columns: minmax(8rem, max-content) 1fr; }
.lista-simple { margin: 0; padding-left: 1.1rem; }
.lista-simple li { margin-bottom: 0.25rem; }
.ruta { font-size: var(--texto-xs); }

/* ---------- Pista del pipeline ---------- */

.pista {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    counter-reset: paso;
}
.pista__paso { position: relative; min-width: 0; }
/* Tramo de vía entre marcas: se rellena cuando el paso anterior ha terminado. */
.pista__paso::before {
    content: "";
    position: absolute;
    top: 17px; left: calc(-50% + 20px); right: calc(50% + 20px);
    height: 3px; border-radius: 3px;
    background: var(--linea);
}
.pista__paso:first-child::before { display: none; }
.pista__paso:is([data-estado="completado"], [data-estado="omitido"], [data-estado="repetir"], [data-estado="en_curso"], [data-estado="fallido"], [data-estado="esperando_revision"])::before {
    background: var(--tinta-suave);
}
.pista__enlace {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem;
    color: inherit; text-decoration: none;
    padding: 0 0.25rem 0.25rem;
    border-radius: var(--radio-s);
}
.pista__enlace:hover .pista__titulo { color: var(--acento); text-decoration: underline; }
.pista__marca {
    width: 37px; height: 37px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid var(--linea-fuerte);
    background: var(--superficie);
    color: var(--tinta-tenue);
    font-weight: 700; font-size: var(--texto-s);
    font-variant-numeric: tabular-nums;
    position: relative;
}
.pista__titulo { font-weight: 600; font-size: var(--texto-xs); line-height: 1.3; color: var(--tinta); }
.pista__meta { font-size: 0.75rem; color: var(--tinta-tenue); line-height: 1.3; font-variant-numeric: tabular-nums; }
/* Bajo cada paso, la duración; el estado se lee en la marca y, para lectores de pantalla, en la etiqueta oculta.
   Los estados que piden atención muestran la etiqueta en lugar de la duración. */
.pista__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pista__paso:is([data-estado="fallido"], [data-estado="interrumpido"], [data-estado="esperando_revision"], [data-estado="en_curso"], [data-estado="pendiente"]) .pista__etiqueta { position: static; width: auto; height: auto; clip: auto; }
.pista__paso:is([data-estado="fallido"], [data-estado="interrumpido"], [data-estado="esperando_revision"], [data-estado="en_curso"], [data-estado="pendiente"]) .pista__duracion { display: none; }

.pista__paso[data-estado="completado"] .pista__marca { background: var(--ok); border-color: var(--ok); color: transparent; }
.pista__paso[data-estado="completado"] .pista__marca::after {
    content: ""; position: absolute; width: 12px; height: 7px;
    border-left: 3px solid var(--superficie); border-bottom: 3px solid var(--superficie);
    transform: translateY(-2px) rotate(-45deg);
}
.pista__paso[data-estado="omitido"] .pista__marca { border-style: dashed; color: var(--tinta-tenue); }
.pista__paso[data-estado="omitido"] .pista__titulo { color: var(--tinta-suave); }
.pista__paso[data-estado="fallido"] .pista__marca,
.pista__paso[data-estado="interrumpido"] .pista__marca { background: var(--error); border-color: var(--error); color: var(--superficie); }
.pista__paso[data-estado="esperando_revision"] .pista__marca { background: var(--aviso-suave); border-color: var(--aviso); color: var(--aviso); }
.pista__paso[data-estado="repetir"] .pista__marca { border-color: var(--aviso); color: var(--aviso); }
.pista__paso[data-estado="en_curso"] .pista__marca { border-color: var(--curso); color: var(--curso); background: var(--curso-suave); }
/* El único movimiento del panel: el paso que está trabajando. */
.pista__paso[data-estado="en_curso"] .pista__marca::after {
    content: ""; position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid transparent; border-top-color: var(--curso);
    animation: girar 1s linear infinite;
}
.pista__paso[data-estado="fallido"] .pista__meta, .pista__paso[data-estado="interrumpido"] .pista__meta { color: var(--error); font-weight: 600; }
.pista__paso[data-estado="esperando_revision"] .pista__meta { color: var(--aviso); font-weight: 600; }
@keyframes girar { to { transform: rotate(360deg); } }

.reanudar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    margin: 0.85rem 0 0;
    font-size: var(--texto-s);
}
.reanudar label { font-weight: 600; }
.reanudar select { width: auto; min-width: 14rem; }
.reanudar .campo__ayuda { flex-basis: 100%; margin: 0; }

/* ---------- Decisión humana ---------- */

.decision {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: end;
    border: 1px solid var(--ok);
    background: var(--ok-suave);
    border-radius: var(--radio-m);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}
.decision h2 { font-size: var(--texto-l); }
.decision p { margin: 0; }
.decision--aviso { border-color: var(--aviso); background: var(--aviso-suave); grid-template-columns: 1fr auto; align-items: center; }
.decision__formulario { display: flex; gap: 0.75rem; align-items: flex-end; max-width: none; }
.decision__formulario .campo { flex: 1; margin: 0; }
.decision__formulario textarea { min-height: 2.5rem; resize: vertical; }

/* ---------- Detalle de pasos y registro ---------- */

.pasos-detalle { border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--superficie); overflow: hidden; }
.paso + .paso { border-top: 1px solid var(--linea); }
.paso > summary {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.7rem 1rem;
    cursor: pointer;
    list-style: none;
}
.paso > summary::-webkit-details-marker { display: none; }
.paso > summary::after {
    content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto;
    border-right: 2px solid var(--tinta-tenue); border-bottom: 2px solid var(--tinta-tenue);
    transform: rotate(45deg); transition: transform 0.15s ease;
}
.paso[open] > summary::after { transform: rotate(-135deg); }
.paso > summary:hover { background: var(--superficie-2); }
.paso__numero { width: 1.5rem; color: var(--tinta-tenue); font-weight: 700; font-variant-numeric: tabular-nums; }
.paso__titulo { font-weight: 600; }
.paso__cifras { display: inline-flex; gap: 1rem; color: var(--tinta-suave); font-size: var(--texto-xs); font-variant-numeric: tabular-nums; }
.paso__cuerpo { padding: 0 1rem 1rem 3.25rem; }
.paso__mensaje { margin-bottom: 0.75rem; }
.registro, .codigo {
    margin: 0;
    background: var(--codigo-fondo);
    color: var(--codigo-tinta);
    border-radius: var(--radio-s);
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
    line-height: 1.6;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.codigo { max-height: 36rem; white-space: pre; overflow-wrap: normal; }

/* ---------- QA visual ---------- */

.qa { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.qa__pagina { margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 0.75rem; }
.qa__imagen { display: block; border: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); }
.qa__imagen img { width: 100%; height: 200px; object-fit: cover; object-position: top center; }
.qa__pagina figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.6rem; font-size: var(--texto-s); }
.qa__titulo { font-weight: 600; }
.qa__cifra { font-size: var(--texto-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qa__cifra--bien { color: var(--ok); }
.qa__cifra--mal { color: var(--error); }
.qa__enlaces { display: flex; gap: 1rem; }

/* ---------- Secciones: frames como en el lienzo de Figma ---------- */

.tabla--secciones td:first-child { width: 230px; }
.frame { margin: 0 0 0.4rem; width: 200px; }
.frame__nombre {
    font-size: 0.72rem;
    color: var(--tinta-tenue);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}
.frame__lienzo {
    display: block; position: relative;
    border: 1px solid var(--linea);
    background: var(--superficie-2);
    max-height: 120px;
    overflow: hidden;
}
.frame__lienzo img { width: 100%; height: auto; }
.frame__lienzo--vacio { display: grid; place-items: center; height: 72px; color: var(--tinta-tenue); font-size: var(--texto-xs); }
/* Al apuntar o enfocar, el frame se selecciona: borde azul y tiradores en las esquinas. */
a.frame__lienzo:is(:hover, :focus-visible) { border-color: var(--acento); outline: 1px solid var(--acento); outline-offset: 0; }
a.frame__lienzo:is(:hover, :focus-visible)::before,
a.frame__lienzo:is(:hover, :focus-visible)::after {
    content: ""; position: absolute; width: 7px; height: 7px; background: var(--superficie); border: 1px solid var(--acento);
}
a.frame__lienzo:is(:hover, :focus-visible)::before { top: -1px; left: -1px; }
a.frame__lienzo:is(:hover, :focus-visible)::after { bottom: -1px; right: -1px; }
.frame__nombre:has(+ a.frame__lienzo:hover) { color: var(--acento); }
.clave { font-size: var(--texto-xs); color: var(--tinta-suave); margin-right: 0.4rem; }
.motivo { margin: 0.3rem 0 0; max-width: 32ch; }

.origen { font-size: var(--texto-xs); font-weight: 600; padding: 0.1rem 0.45rem; border-radius: var(--radio-s); background: var(--superficie-2); color: var(--tinta-suave); white-space: nowrap; }
.origen--contrato { color: var(--ok); background: var(--ok-suave); }
.origen--ia { color: var(--curso); background: var(--curso-suave); }
.origen--manual { color: var(--tinta); background: var(--linea); }
.origen--nuevo { color: var(--aviso); background: var(--aviso-suave); }

.confianza { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.confianza__barra {
    width: 64px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--tinta-suave) calc(var(--confianza) * 100%), var(--linea) 0);
}

.reasignar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; min-width: 15rem; }
.reasignar select { flex: 1; min-width: 11rem; min-height: 2.125rem; padding: 0.3rem 0.5rem; font-size: var(--texto-s); }
.reasignar__mensaje { flex-basis: 100%; margin: 0; font-size: var(--texto-xs); color: var(--ok); }
.reasignar__mensaje:empty { display: none; }
.reasignar__mensaje--error { color: var(--error); }

/* ---------- Avisos y archivos ---------- */

.recuento-avisos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avisos { display: flex; flex-direction: column; gap: 0.5rem; }
.aviso { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--linea-fuerte); border-radius: var(--radio-s); }
.aviso--error { border-left-color: var(--error); }
.aviso--aviso { border-left-color: var(--aviso); }
.aviso > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.85rem; cursor: pointer; }
.aviso__cuenta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.aviso ul { margin: 0; padding: 0 0.85rem 0.75rem 2rem; font-size: var(--texto-s); }
.aviso li { margin-bottom: 0.35rem; }
.aviso li .secundario { display: block; font-size: var(--texto-xs); }

.artefactos { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-m); }
.artefactos li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; flex-wrap: wrap; }
.artefactos li + li { border-top: 1px solid var(--linea); }
.artefactos a { font-weight: 600; }

/* ---------- Catálogo ---------- */

.catalogo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-m); overflow: hidden; }
.catalogo__bloque { background: var(--superficie); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.catalogo__nombre { font-size: var(--texto-l); margin: 0; }
.catalogo__nombre a { color: var(--tinta); text-decoration: none; }
.catalogo__nombre a:hover { color: var(--acento); text-decoration: underline; }
.catalogo__nombre a::after { content: ""; position: absolute; inset: 0; }
.catalogo__bloque { position: relative; }
.catalogo__bloque:has(a:hover) { background: var(--superficie-2); }
.catalogo__slug { font-size: var(--texto-xs); color: var(--tinta-tenue); }
.catalogo__uso { margin: 0; font-size: var(--texto-s); color: var(--tinta-suave); }
.catalogo__campos { margin: auto 0 0; }
.etiquetas { list-style: none; margin: 0.2rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.etiqueta { font-family: var(--fuente-codigo); font-size: 0.72rem; padding: 0.05rem 0.4rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s); color: var(--tinta-suave); }
.etiqueta--defecto { border-color: var(--acento); color: var(--acento); }

/* ---------- Diagnóstico ---------- */

.diagnostico { list-style: none; margin: 0 0 0.5rem; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-m); }
.diagnostico__fila { display: grid; grid-template-columns: 1.25rem minmax(10rem, 17rem) 1fr; gap: 0.75rem; padding: 0.55rem 0.9rem; align-items: start; font-size: var(--texto-s); }
.diagnostico__fila + .diagnostico__fila { border-top: 1px solid var(--linea); }
.diagnostico__nombre { font-weight: 600; overflow-wrap: anywhere; }
.diagnostico__detalle { color: var(--tinta-suave); overflow-wrap: anywhere; }
.diagnostico__icono { width: 0.85rem; height: 0.85rem; border-radius: 50%; margin-top: 0.25rem; }
.diagnostico__fila--ok .diagnostico__icono { background: var(--ok); }
.diagnostico__fila--aviso .diagnostico__icono { background: var(--aviso); border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.diagnostico__fila--error .diagnostico__icono { background: var(--error); border-radius: 2px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .pista { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 1.25rem; }
    .pista__paso:nth-child(6)::before { display: none; }
}

@media (max-width: 900px) {
    .dos-columnas, .dos-columnas--ficha, .dos-columnas--ajustes { grid-template-columns: minmax(0, 1fr); }
    .decision, .decision--aviso { grid-template-columns: minmax(0, 1fr); }
    .barra__interior { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
    .navegacion { order: 3; flex-basis: 100%; overflow-x: auto; }
    .usuario { margin-left: auto; }
}

@media (max-width: 680px) {
    body { font-size: 1rem; }
    .contenido { padding-top: 1.25rem; }
    /* Pista vertical en móvil. */
    .pista { grid-template-columns: minmax(0, 1fr); padding: 0.75rem 1rem; row-gap: 0; }
    .pista__paso::before { top: -14px; bottom: auto; left: 17px; right: auto; width: 3px; height: 18px; }
    .pista__paso:nth-child(6)::before { display: block; }
    .pista__paso + .pista__paso { margin-top: 10px; }
    .pista__enlace { flex-direction: row; text-align: left; gap: 0.75rem; padding: 0; }
    .pista__titulo { font-size: var(--texto-s); }
    .pista__meta { margin-left: auto; text-align: right; }

    /* Tablas apiladas: cada fila es una ficha con la etiqueta de cada celda. */
    .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
    .tabla tr { border-bottom: 1px solid var(--linea); padding: 0.5rem 0; }
    .tabla tbody tr:last-child { border-bottom: 0; }
    .tabla td { border: 0; padding: 0.3rem 0.9rem; }
    .tabla td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: var(--texto-xs); color: var(--tinta-tenue); }
    .tabla .num { text-align: left; }
    .tabla--secciones td:first-child { width: 100%; }
    .frame { width: 100%; }
    .frame__lienzo { max-height: 180px; }
    .confianza { align-items: flex-start; }
    .paso__cuerpo { padding-left: 1rem; }
    .paso__cifras { flex-basis: 100%; padding-left: 2.25rem; }
    .decision__formulario { flex-direction: column; align-items: stretch; }
    .diagnostico__fila { grid-template-columns: 1.25rem 1fr; }
    .diagnostico__detalle { grid-column: 2; }
    .usuario__nombre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
    .barra, .reanudar, .reasignar, .cabecera__acciones { display: none; }
    body { background: #fff; }
}