/**
 * Reportes e investigación de accidentes (RINV) — zona interactiva.
 *
 * Se monta sobre la hoja de Inspecciones (clases pi-*) y solo agrega lo
 * propio de esta zona con el prefijo rv-: los cinco pasos de la izquierda,
 * las evidencias del sitio, la cadena de porqués, la matriz RAM, el equipo
 * investigador y el cierre con el FURAT y el plan de acción.
 *
 * Mobile-first. Los @keyframes viven en animations.css.
 */

/* ══════════════════ La bienvenida: texto al lado ══════════════════ */
/* En pantallas anchas la bodega se corre a la derecha, asi que el texto
   deja de estar centrado y arma su propia columna a la izquierda. En
   movil no hay corrimiento y todo sigue centrado. */
@media (min-width: 1024px) {
    .rv .pi-hello { align-items: flex-start; text-align: left; }

    .rv .pi-hello__say {
        align-items: flex-start;
        max-width: 32rem;
        margin-inline: 0;
    }

    .rv .pi-hello__veil {
        background-image: radial-gradient(ellipse 34% 34% at 27% 50%,
            rgba(6, 6, 16, 0.82) 0%,
            rgba(6, 6, 16, 0.6) 46%,
            rgba(6, 6, 16, 0.22) 72%,
            rgba(6, 6, 16, 0) 90%);
    }
}

/* ══════════════════ Los cinco pasos, a la izquierda ══════════════════ */
.rv-list { gap: 6px; }

.rv-step {
    /* El reset centra el contenido de todo boton: aqui va pegado a la izquierda */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--pi-ink-2);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth);
}

.rv-step:hover:not(:disabled) { background: rgba(250, 250, 250, 0.05); color: var(--pi-ink); }
.rv-step:disabled { opacity: 0.45; cursor: default; }

.rv-step.is-on {
    background: color-mix(in srgb, #22D3EE 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 38%, transparent);
    color: var(--pi-ink);
}

.rv-step__n {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.22);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pi-ink-3);
}

.rv-step.is-on .rv-step__n { box-shadow: inset 0 0 0 1px #22D3EE; color: #22D3EE; }
.rv-step.is-done .rv-step__n { background: color-mix(in srgb, #22c55e 18%, transparent); box-shadow: inset 0 0 0 1px #22c55e; color: #22c55e; }

.rv-step__t { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.rv-step__name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.rv-step__mark { margin-left: auto; display: inline-flex; color: #22c55e; }

/* ══════════════════ Las evidencias del sitio ══════════════════ */
.rv-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--pi-ink-3); }

.rv-evs { display: flex; flex-direction: column; gap: 8px; }

.rv-ev {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
    color: var(--pi-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth);
}

.rv-ev:hover { background: rgba(250, 250, 250, 0.06); }
.rv-ev.is-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 55%, transparent); }

.rv-ev.is-done {
    background: color-mix(in srgb, #22c55e 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 28%, transparent);
}

.rv-ev__n {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 1px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.25);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pi-ink-3);
}

.rv-ev.is-done .rv-ev__n { box-shadow: inset 0 0 0 1px #22c55e; color: #22c55e; }

.rv-ev__t { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.rv-ev__name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.rv-ev__d { font-size: 12px; line-height: 1.5; color: var(--pi-ink-2); }

.rv-tag {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, #22D3EE 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 32%, transparent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #9fe9f7;
}

.rv-tag--root {
    margin-left: auto;
    background: color-mix(in srgb, #22c55e 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 34%, transparent);
    color: #9ceab6;
    white-space: nowrap;
}

/* ══════════════════ La espina de pescado (Ishikawa) ══════════════════ */
/* Cuatro espinas que entran a un eje, y el problema en la punta. Cada
   hallazgo del sitio se cuelga de la espina que le toca. */
.rv-fish { display: flex; flex-direction: column; gap: 0; }

.rv-fish__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.rv-bone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 8px 12px;
}

.rv-bone::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 2px;
    width: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, #22D3EE 40%, transparent);
}

.rv-bone__k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9fe9f7; }
.rv-bone__i { font-size: 12px; line-height: 1.4; color: var(--pi-ink-2); }
.rv-bone__i.is-new { animation: rvBoneIn var(--duration-slow) var(--ease-spring) both; }

.rv-fish__spine {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    padding: 0 2px;
}

.rv-fish__spine::before {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, #1E7BFF 30%, transparent), #22D3EE);
}

.rv-fish__head {
    flex: 0 1 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, #ef4444 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 38%, transparent);
    font-size: 11px;
    font-weight: 700;
    color: #ffb4b4;
}

.rv-espinas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.rv-espina {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 11px 12px;
    text-align: left;
    border: 0;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.1);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pi-ink);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth);
}

.rv-espina__k { font-size: 12.5px; font-weight: 700; }
.rv-espina__d { font-size: 11px; font-weight: 400; line-height: 1.35; color: var(--pi-ink-3); }

.rv-bone__d { font-size: 11px; line-height: 1.35; color: var(--pi-ink-3); }

.rv-q__k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rv-q__n { font-weight: 700; color: #9fe9f7; }

.rv-espina:hover { background: color-mix(in srgb, #22D3EE 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 45%, transparent); }
.rv-espina.is-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 48%, transparent); color: #ffb4b4; }

/* El boton de magIA se queda en un renglon y el aviso va debajo */
.rv-foot--stack { flex-direction: column; align-items: stretch; gap: 8px; }
.rv-foot--stack .pi-go { width: 100%; justify-content: center; text-align: center; white-space: nowrap; }
.rv-foot--stack .pi-block { text-align: center; }

.rv-go--ghost {
    background-image: none;
    background-color: color-mix(in srgb, #22D3EE 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 40%, transparent);
    color: var(--pi-ink);
}

.rv-go--ghost:hover { background-color: color-mix(in srgb, #22D3EE 18%, transparent); }
.rv-magia--btn { width: 20px; height: 20px; }

/* ══════════════════ El árbol de causas ══════════════════ */
/* Del hecho, hacia abajo, hasta la falla del sistema. */
.rv-tree { display: flex; flex-direction: column; gap: 4px; }

.rv-tree__event {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, #ef4444 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 38%, transparent);
    font-size: 12px;
    font-weight: 700;
    color: #ffb4b4;
}

.rv-tree__lv,
.rv-tree__root { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 0 10px 16px; }
.rv-tree__lv::before,
.rv-tree__root::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 6px;
    width: 1px;
    background: rgba(250, 250, 250, 0.16);
}

.rv-tree__k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-ink-3); }
.rv-tree__ramas { display: flex; flex-direction: column; gap: 4px; }
.rv-tree__r { font-size: 12.5px; line-height: 1.45; color: var(--pi-ink-2); }
.rv-tree__rt { font-size: 13px; font-weight: 600; line-height: 1.5; color: #9ceab6; }

/* ══════════════════ La cadena de porqués ══════════════════ */
.rv-chain { display: flex; flex-direction: column; gap: 8px; }

.rv-link {
    display: flex;
    gap: 10px;
    padding-left: 2px;
    animation: rvLinkIn var(--duration-slow) var(--ease-spring) both;
}

.rv-link__n {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, #1E7BFF 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 45%, transparent);
    font-size: 10px;
    font-weight: 800;
    color: #cfe6ff;
}

.rv-link__t { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding-bottom: 4px; border-left: 1px dashed rgba(250, 250, 250, 0.14); padding-left: 10px; margin-left: -0.35rem; }
.rv-link__q { font-size: 11px; color: var(--pi-ink-3); }
.rv-link__a { font-size: 12.5px; line-height: 1.45; color: var(--pi-ink); }

.rv-q { display: flex; flex-direction: column; gap: 4px; }

.rv-opt.is-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 45%, transparent); }

.rv-root {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(155deg, color-mix(in srgb, #1E7BFF 18%, transparent), color-mix(in srgb, #22D3EE 10%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 32%, transparent);
    animation: rvRootIn var(--duration-slower) var(--ease-spring) both;
}

.rv-root__t { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--pi-ink); }
.rv-root--done { animation: none; }

/* ══════════════════ La matriz RAM ══════════════════ */
.rv-scale { display: flex; flex-direction: column; gap: 8px; }
.rv-opts { display: flex; flex-direction: column; gap: 6px; }

.rv-lv {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
    color: var(--pi-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth);
}

.rv-lv:hover { background: rgba(250, 250, 250, 0.06); }

.rv-lv.is-on {
    background: color-mix(in srgb, #1E7BFF 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 48%, transparent);
}

.rv-lv__l { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; }
.rv-lv__d { min-width: 0; font-size: 11.5px; line-height: 1.4; color: var(--pi-ink-3); }

.rv-lv__box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.28);
    color: #060610;
}

.rv-lv.is-on .rv-lv__box { background: #22D3EE; box-shadow: none; }

.rv-map__k { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }

.rv-badge {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 11px;
    font-weight: 800;
}

.rv-map { display: flex; flex-direction: column; gap: 6px; }

.rv-map__head,
.rv-map__grid { display: grid; grid-template-columns: 4.6rem repeat(4, minmax(0, 1fr)); gap: 4px; }

.rv-map__col,
.rv-map__row { font-size: 9.5px; line-height: 1.2; color: var(--pi-ink-3); }
.rv-map__col { text-align: center; }
.rv-map__row { display: flex; align-items: center; }

.rv-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rv-nivel) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rv-nivel) 40%, transparent);
}

.rv-cell.is-here { background: color-mix(in srgb, var(--rv-nivel) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--rv-nivel); }
.rv-cell__here { display: inline-flex; color: #fafafa; }
.rv-cell__here.is-new { animation: rvHereIn var(--duration-slow) var(--ease-spring) both; }

.rv-map__axis { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pi-ink-3); }
.rv-map__axis--x { align-self: center; }

/* La sugerencia de magIA */
.rv-sug {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px;
    border-radius: 14px;
    background: color-mix(in srgb, #22D3EE 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 26%, transparent);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pi-ink-2);
}

.rv-sug__k { display: flex; align-items: center; gap: 8px; }
.rv-magia { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

.rv-sug__go {
    align-self: flex-start;
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #22D3EE 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 45%, transparent);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pi-ink);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth);
}

.rv-sug__go:hover { background: color-mix(in srgb, #22D3EE 28%, transparent); }

/* ══════════════════ El equipo investigador ══════════════════ */
.rv-team { display: flex; flex-direction: column; gap: 8px; }

.rv-who {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
    color: var(--pi-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth);
}

.rv-who:hover { background: rgba(250, 250, 250, 0.06); }

.rv-who.is-on {
    background: color-mix(in srgb, #22c55e 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 32%, transparent);
}

.rv-who.is-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 48%, transparent); }

.rv-who__box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 2px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.28);
    color: #060610;
}

.rv-who.is-on .rv-who__box { background: #22c55e; box-shadow: none; }

.rv-who__t { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.rv-who__name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.rv-who__r { font-size: 11.5px; line-height: 1.45; color: var(--pi-ink-3); }

/* ══════════════════ El cierre: FURAT, plan y lección ══════════════════ */
.rv-furat {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
    overflow: hidden;
}

.rv-fu { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; }
.rv-fu + .rv-fu { box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.07); }
.rv-fu__k { flex: 0 0 7.5rem; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pi-ink-3); }
.rv-fu__v { min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--pi-ink); }

.rv-plan { display: flex; flex-direction: column; gap: 8px; }

.rv-act {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
}

.rv-act.is-root {
    background: color-mix(in srgb, #22c55e 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 26%, transparent);
}

.rv-act__t { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.rv-act__d { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--pi-ink); }
.rv-act__m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--pi-ink-3); }
.rv-act__p { font-weight: 700; color: #9fe9f7; }

.rv-lesson {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(155deg, color-mix(in srgb, #1E7BFF 14%, transparent), color-mix(in srgb, #22D3EE 8%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 26%, transparent);
}

.rv-lesson__t { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pi-ink); }

/* ══════════════════ Avisos, notas y cierre ══════════════════ */
.rv-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #ef4444 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 30%, transparent);
    font-size: 12px;
    line-height: 1.5;
}

.rv-alert svg { flex: 0 0 auto; margin-top: 2px; }

.rv-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--pi-ink-3);
}

.rv-note svg { flex: 0 0 auto; margin-top: 2px; }

.rv-done {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--pi-ink-2);
}

.rv-done svg { flex: 0 0 auto; margin-top: 2px; color: #22c55e; }

.rv-legend { font-size: 11px; color: var(--pi-ink-3); }
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ══════════════════ Tablet y desktop ══════════════════ */
@media (min-width: 1024px) {
    /* Con solo cinco pasos, repartirlos a lo alto los deja sueltos */
    .rv-list { justify-content: flex-start; }
}

@media (min-width: 640px) {
    .rv-lv { align-items: baseline; }
    .rv-lv__l { flex: 0 0 5.5rem; }
}