/**
 * PGR — Plan de Gestión del Riesgo: zona interactiva.
 *
 * Se monta sobre la hoja de Inspecciones (clases pi-*) y solo agrega lo
 * propio de esta zona con el prefijo pg-: los pasos del plan, la
 * calificación de amenazas, el rombo de vulnerabilidad, la brigada, las
 * novedades del simulacro y el acta.
 *
 * Mobile-first. Los @keyframes viven en animations.css.
 */

/* ══════════════════ La bienvenida: texto al lado ══════════════════ */
@media (min-width: 1024px) {
    .pg .pi-hello { align-items: flex-start; text-align: left; }

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

    .pg .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%);
    }

    .pg-list { justify-content: flex-start; }
}

/* ══════════════════ Los pasos del plan ══════════════════ */
.pg-list { gap: 6px; }

.pg-step {
    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);
}

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

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

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

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

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

/* El cronómetro, que es el hilo del simulacro */
.pg-clock .pi-dato__v {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #9fe9f7;
}

/* ══════════════════ Amenazas y vulnerabilidad ══════════════════ */
.pg-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--pi-ink-3); }
.pg-sub { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--pi-ink); }

/* El nombre de la amenaza es contenido, no una etiqueta: va en tamaño de
   lectura, no en versalitas de diez píxeles */
.pg-set { display: flex; flex-direction: column; gap: 5px; }

.pg-set__k {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--pi-ink);
}

.pg-set__q { font-size: 13px; line-height: 1.45; color: var(--pi-ink); }
.pg-set__d { font-size: 12.5px; line-height: 1.5; color: var(--pi-ink-2); }

.pg-chip {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pg-opts { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.pg-opts--fila { flex-direction: row; flex-wrap: wrap; }
.pg-opts--fila .pg-opt { flex: 1 1 0; min-width: 6.5rem; }

.pg-opt {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 11px;
    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);
}

.pg-opt:hover { background: rgba(250, 250, 250, 0.06); }

.pg-opt.is-on {
    background: color-mix(in srgb, var(--pg-tinta, #22D3EE) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-tinta, #22D3EE) 55%, transparent);
}

.pg-opt__t { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pg-opt__l { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.pg-opt__d { font-size: 11.5px; line-height: 1.4; color: var(--pi-ink-3); }

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

.pg-opt.is-on .pg-opt__box { background: var(--pg-tinta, #22D3EE); box-shadow: none; }

/* El rombo de la metodología de colores */
.pg-rombo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
}

/* La caja reserva la diagonal del rombo girado */
.pg-rombo__wrap { position: relative; height: 15.2rem; }

.pg-rombo__fig {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, 5.2rem);
    gap: 3px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.pg-rombo__c {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.2rem;
    padding: 6px;
    background: color-mix(in srgb, var(--pg-tinta) 42%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-tinta) 70%, transparent);
    text-align: center;
}

.pg-rombo__t {
    display: block;
    transform: rotate(-45deg);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.2;
    color: #fafafa;
}

.pg-rombo__n { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-rombo__v { font-size: 15px; font-weight: 800; }

/* ══════════════════ La brigada ══════════════════ */
.pg-team { display: flex; flex-direction: column; gap: 8px; }

.pg-who {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 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);
}

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

.pg-who__t { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pg-who__name { font-size: 13px; font-weight: 700; }
.pg-who__job { font-size: 11.5px; color: var(--pi-ink-3); }
.pg-who__skill { font-size: 11.5px; color: var(--pi-ink-2); }

.pg-who__shift {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(250, 250, 250, 0.06);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pi-ink-2);
}

.pg-who__shift.is-night { background: color-mix(in srgb, #1E7BFF 22%, transparent); color: #cfe6ff; }
.pg-who__ops { grid-column: 1 / -1; }

/* ══════════════════ El simulacro ══════════════════ */
.pg-now { display: flex; flex-direction: column; gap: 4px; }

.pg-mark {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.07);
}

.pg-mark.is-mal { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 30%, transparent); }
.pg-mark__s { flex: 0 0 auto; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fbbf24; }
.pg-mark__t { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pg-mark__q { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pg-mark__d { font-size: 11.5px; line-height: 1.45; color: var(--pi-ink-3); }

.pg-say { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pi-ink-2); }
.pg-cost { margin: 0; font-size: 12px; font-weight: 700; color: var(--pi-ink-3); }

/* La respuesta elegida: verde la que resuelve, roja la que no */
.pg-ans { border-radius: 14px; padding-left: 12px; margin-left: 0; }
.pg-ans .pi-ans__dot { display: inline-flex; align-items: center; justify-content: center; }

.pg-ans.is-on,
.pg-ans.is-bad { margin-left: 0; padding: 13px 14px 13px 12px; border-radius: 14px; }

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

.pg-ans.is-on .pi-ans__dot { background: #22c55e; border-color: #22c55e; color: #060610; }
.pg-ans.is-on .pi-ans__lbl { color: #9ceab6; }

.pg-ans.is-bad {
    background: color-mix(in srgb, #ef4444 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 42%, transparent);
}

.pg-ans.is-bad .pi-ans__dot { background: #ef4444; border-color: #ef4444; color: #060610; }
.pg-ans.is-bad .pi-ans__lbl { color: #ffb4b4; }

/* ══════════════════ El acta ══════════════════ */
.pg-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.pg-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.07);
}

.pg-kpi__k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pi-ink-3); }
.pg-kpi__v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

.pg-finds { display: flex; flex-direction: column; gap: 6px; }

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

.pg-find svg { flex: 0 0 auto; margin-top: 2px; color: #fbbf24; }

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

.pg-act {
    display: flex;
    flex-direction: column;
    gap: 4px;
    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);
}

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

.pg-next {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 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);
}

.pg-next__t { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pi-ink); }

/* ══════════════════ Avisos, notas y cierre ══════════════════ */
.pg-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;
}

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

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

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

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

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

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