/**
 * PESV — Plan Estratégico de Seguridad Vial: zona interactiva.
 *
 * Se monta sobre la hoja de Inspecciones (clases pi-*) y la del Plan de
 * Gestión del Riesgo (clases pg-: pasos, opciones, notas, avisos y
 * métricas). Aquí solo va lo propio con el prefijo pv-: la flota, la tabla
 * de niveles, la encuesta, los requisitos por fase, lo que cubre el plan y
 * la gráfica del seguimiento.
 *
 * Mobile-first. Los @keyframes viven en animations.css.
 */

/* ══════════════════ La escena que se toca ══════════════════ */
.pv-stage.is-point { cursor: pointer; }

/* El letrero de arriba dice qué tocar en cada momento */
.pv-hint {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 28px);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(6, 6, 16, 0.72);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 40%, transparent);
    color: #bff3fb;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    backdrop-filter: blur(var(--glass-blur-soft));
    animation: pvHintIn var(--duration-slow) var(--ease-spring) both;
}

/* Los puntos: el nombre se lee al pasar, y el color dice su estado */
.pv-spot { color: #22D3EE; }
.pv-spot:hover .pi-spot__lbl,
.pv-spot:focus-visible .pi-spot__lbl { display: inline; }
.pv-spot:hover { width: 2rem; height: 2rem; }
.pv-spot.is-yes { color: #22c55e; }
.pv-spot.is-no { color: var(--pi-ink-3); }
.pv-spot.is-bad { color: #ef4444; }
.pv-spot .pi-spot__n { font-size: 11px; font-weight: 800; }

/* La tarjeta que corresponde a lo que se tocó en la sede */
.is-foco.is-flash { animation: pvFocoFlash 1.4s var(--ease-smooth); }

/* ══════════════════ La flota y los niveles ══════════════════ */
.pv-fleet,
.pv-levels { display: flex; flex-direction: column; gap: 6px; }

.pv-frow {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08);
}

.pv-frow.is-set { box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 30%, transparent); }

.pv-frow.is-bad {
    background: color-mix(in srgb, #ef4444 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 38%, transparent);
}

.pv-frow__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pi-ink);
    text-align: left;
    cursor: pointer;
}

.pv-frow__n,
.pv-act__n {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px #22D3EE;
    font-size: 11px;
    font-weight: 800;
    color: #22D3EE;
}

.pv-frow__t { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.pv-frow__l { font-size: 13px; font-weight: 800; line-height: 1.3; }
.pv-frow__d { font-size: 11.5px; line-height: 1.4; color: var(--pi-ink-3); }

.pv-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #22D3EE 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 26%, transparent);
}

.pv-count__v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pi-ink); }

.pv-levels__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.07);
}

.pv-levels__row.is-on {
    background: color-mix(in srgb, #22D3EE 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 45%, transparent);
}

.pv-levels__l { font-size: 12.5px; line-height: 1.4; color: var(--pi-ink); }

.pv-fleet__n {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--pi-ink);
}

.pv-levels__l { font-weight: 700; }
.pv-levels__r { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--pi-ink-2); }

/* ══════════════════ La encuesta ══════════════════ */
.pv-modes { display: flex; flex-direction: column; gap: 7px; }

.pv-mode {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 10px;
}

.pv-mode__l { font-size: 12px; line-height: 1.3; color: var(--pi-ink-2); }

.pv-mode__bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(250, 250, 250, 0.06);
    overflow: hidden;
}

.pv-mode__bar i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: #22D3EE;
}

.pv-mode__bar i.is-top { background: #f59e0b; }

.pv-mode__n {
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--pi-ink);
}

.pv-kpi__d { font-size: 11px; line-height: 1.4; color: var(--pi-ink-3); }

/* ══════════════════ La evaluación por fases ══════════════════ */
.pv-phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.pv-phase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.07);
}

.pv-phase__k { font-size: 12px; font-weight: 700; color: var(--pi-ink-2); }
.pv-phase__v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pi-ink); }

.pv-phase__bar {
    position: relative;
    grid-column: 1 / -1;
    height: 5px;
    border-radius: 999px;
    background: rgba(250, 250, 250, 0.06);
    overflow: hidden;
}

.pv-phase__bar i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: #22c55e;
    transition: width var(--duration-slow) var(--ease-spring);
}

.pv-req {
    display: flex;
    flex-direction: column;
    gap: 6px;
    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);
}

.pv-req.is-set { box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 26%, transparent); }

.pv-req.is-bad {
    background: color-mix(in srgb, #ef4444 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 38%, transparent);
}

.pv-req__n { font-size: 13.5px; font-weight: 800; line-height: 1.3; color: var(--pi-ink); }
.pv-req__ev { font-size: 12.5px; line-height: 1.5; color: var(--pi-ink-2); }
.pv-req__why { font-size: 12px; line-height: 1.5; color: #ffb4b4; }
.pv-req__ok { font-size: 12px; line-height: 1.5; color: var(--pi-ink-3); }

/* ══════════════════ El plan ══════════════════ */
.pv-needs { display: flex; flex-direction: column; gap: 5px; }

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

.pv-need svg { flex: 0 0 auto; margin-top: 2px; color: #fbbf24; }
.pv-need.is-ok { color: var(--pi-ink); }
.pv-need.is-ok svg { color: #22c55e; }

/* ══════════════════ El seguimiento ══════════════════ */
.pv-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    height: 7.5rem;
    padding: 12px 12px 8px;
    border-radius: 14px;
    background: rgba(250, 250, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.07);
}

.pv-chart__col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }

.pv-chart__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.pv-chart__bars i {
    display: block;
    width: 36%;
    max-width: 12px;
    border-radius: 4px 4px 2px 2px;
    transition: height var(--duration-slower) var(--ease-spring);
}

/* ══════════════════ El plan ══════════════════ */
.pv-act { align-items: flex-start; }
.pv-act .pv-act__n { margin-top: 1px; }
.pv-chart__prev { background: rgba(250, 250, 250, 0.22); }
.pv-chart__now { background: #22c55e; }
.pv-chart__m { font-size: 10.5px; color: var(--pi-ink-3); }

.pv-chart__key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--pi-ink-3); }

.pv-chart__key-prev,
.pv-chart__key-now { display: inline-flex; align-items: center; gap: 6px; }

.pv-chart__key-prev::before,
.pv-chart__key-now::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: rgba(250, 250, 250, 0.22);
}

.pv-chart__key-now::before { background: #22c55e; }

/* ══════════════════ La leyenda de la escena ══════════════════ */
.pv-legend.is-flash { animation: pvLegendFlash 1.6s var(--ease-smooth); }