/* ═══════════════════════════════════════════════════════════════════════
   INSPECCIONES Y PREOPERACIONALES — zona interactiva
   ═══════════════════════════════════════════════════════════════════════
   Portado del diseño «Preoperacional». Su estética es propia y distinta
   de la zona de Universidad: nada de cajas ni de líneas que dividan,
   pesos tipográficos ligeros y versalitas diminutas para los rótulos. El
   contenido se separa con aire.

   Mobile-first. Los tamaños van en px porque el diseño los fija así, y
   la tipografía es la del sitio: aquí no entra ninguna otra.
   ═══════════════════════════════════════════════════════════════════════ */

.pi {
    --pi-line:   #1e1e30;
    --pi-line-2: #3f3f53;
    --pi-ink:    #fafafa;
    --pi-ink-2:  #d4d4d8;
    --pi-ink-3:  #71717a;
    --pi-blue:   #1E7BFF;
    --pi-cyan:   #22D3EE;

    font-size: 14px;
}

/* El tablero no cabe en el contenedor del sitio: es una aplicación y
   usa el ancho de la pantalla, con su propio aire a los lados. */
.pi > .container {
    max-width: none;
    padding-inline: clamp(16px, 2.4vw, 34px);
}

/* Desde escritorio la navegación vive fija a la izquierda y se abre al
   pasar por encima: el tablero le deja ese carril libre.

   Ese carril descentra la caja, así que lo que va centrado se corre media
   diferencia a la izquierda para quedar centrado en la pantalla y no en
   la caja. El margen derecho lo devuelve: la caja no se sale. */
@media (min-width: 1024px) {
    .pi > .container {
        padding-left: clamp(96px, 14vw, 232px);
        padding-right: clamp(24px, 2.4vw, 46px);
    }

    .pi {
        --pi-centro: calc((clamp(96px, 14vw, 232px) - clamp(24px, 2.4vw, 46px)) / 2);
    }

    .pi-hello,
    .pi-bhead {
        margin-left: calc(-1 * var(--pi-centro));
        margin-right: var(--pi-centro);
    }
}

.pi__app { display: flex; flex-direction: column; gap: 14px; }

/* El tablero entra despues de la bienvenida: sube al sitio mientras
   aparece, para que la transicion se lea como un movimiento y no como
   un cambio de pantalla. */
.pi__app {
    /* Los controles flotantes viven arriba a la derecha: el tablero se
       detiene por debajo para no quedar tapado al entrar. */
    scroll-margin-top: 5.5rem;
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity var(--duration-slower) var(--ease-spring),
                transform var(--duration-slower) var(--ease-spring);
}

.pi__app.is-in { opacity: 1; transform: none; }

/* ══════════════════ La bienvenida ══════════════════ */
/* Portada: una sola escenografia. El vehiculo gira centrado en el cuadro
   y el texto vive centrado delante de el, sobre un pozo de sombra que lo
   sostiene sin tapar la camioneta. */
.pi-hello {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(94vh, 58rem);
    padding: clamp(28px, 4vh, 56px) 0;
    text-align: center;
    transition: opacity var(--duration-slower) var(--ease-smooth),
                transform var(--duration-slower) var(--ease-spring),
                filter var(--duration-slower) var(--ease-smooth);
}

/* Al arrancar, la bienvenida no se apaga: se aleja hacia el fondo */
.pi-hello.is-out {
    opacity: 0;
    transform: scale(1.06) translateY(-28px);
    filter: blur(6px);
    pointer-events: none;
}

/* El vehiculo ocupa la seccion entera y el texto va encima. Se desvanece
   contra los bordes para que no se lea como una caja con el render
   adentro, y un velo oscuro en el centro sostiene la lectura. */
.pi-hello__stage {
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 96% 130% at 50% 56%, #000 74%, transparent 100%);
    mask-image: radial-gradient(ellipse 96% 130% at 50% 56%, #000 74%, transparent 100%);
}

/* El pozo de sombra va donde va el texto, en el centro */
.pi-hello__veil {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse 38% 32% at 50% 48%,
        rgba(6, 6, 16, 0.8) 0%,
        rgba(6, 6, 16, 0.58) 46%,
        rgba(6, 6, 16, 0.2) 72%,
        rgba(6, 6, 16, 0) 90%);
}

/* El rotulo de que esto se puede tocar, centrado arriba */
.pi-hello__live {
    position: absolute;
    top: clamp(14px, 2.4vh, 30px);
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pi-hello__stage canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.pi-hello__say {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 26px rgba(6, 6, 16, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 44rem;
    margin-inline: auto;
}

.pi-hello__over {
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pi-hello__h {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.pi-hello__h em {
    font-style: normal;
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pi-hello__p {
    margin: 0;
    max-width: 34rem;
    color: var(--pi-ink-2);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

.pi-hello__go {
    --glass-reflex-light: 0.5;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: 13px 26px;
    background-color: var(--glass-bg);
    background-image: var(--gradient-fill);
    border: 1px solid color-mix(in srgb, var(--glass-light) 12%, transparent);
    border-radius: 999px;
    box-shadow: var(--glass-shadow-light), 0 2px 10px rgba(30, 123, 255, 0.18);
    color: var(--text-on-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    backdrop-filter: blur(var(--glass-blur-soft));
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

.pi-hello__go:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-light), 0 8px 22px rgba(30, 123, 255, 0.3);
}

.pi-hello__go svg { transition: transform var(--duration-fast) var(--ease-smooth); }
.pi-hello__go:hover svg { transform: translateX(4px); }

.pi-hello__hint {
    color: var(--pi-ink-2);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
}


/* ══════════════════ El titulo del tablero ══════════════════ */
.pi-bhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    text-align: center;
}

.pi-bhead__over {
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pi-bhead__h {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.pi-bhead__h em {
    font-style: normal;
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ══════════════════ La tira de datos ══════════════════ */
.pi-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding-bottom: 18px;
}

.pi-dato { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 0 22px; }
.pi-dato:first-child { padding-left: 0; }

.pi-dato__k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
}

.pi-dato__v { font-size: 14px; font-weight: 500; line-height: 1.2; }
.pi-dato--plate .pi-dato__v { font-size: 22px; font-weight: 700; letter-spacing: 0.05em; line-height: 1; }
.pi-dato--mono .pi-dato__v { font-weight: 600; font-variant-numeric: tabular-nums; }
.pi-dato--grow { flex: 1 1 5rem; min-width: 5rem; }

.pi-bars { display: flex; align-items: center; gap: 3px; height: 14px; }
.pi-bars i { flex: 1; display: block; transition: height var(--duration-fast) var(--ease-smooth); }

/* ══════════════════ Las tres columnas ══════════════════ */
.pi-cols { display: flex; flex-direction: column; gap: 22px; }

/* Columna 1: los ocho puntos */
.pi-list { display: flex; flex-direction: column; gap: 2px; }

.pi-list__k {
    padding-bottom: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
}

.pi-item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) 0.56rem;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 2.6rem;
    padding: 8px 6px 8px 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-smooth);
}

.pi-item:hover { background: rgba(34,211,238,0.05); }
.pi-item.is-on { background: rgba(34,211,238,0.07); box-shadow: inset 2px 0 0 0 var(--pi-cyan); }

.pi-item__n {
    padding-left: 7px;
    font-size: 10px;
    font-weight: 700;
    color: var(--pi-ink-3);
    font-variant-numeric: tabular-nums;
}

.pi-item__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pi-item__name {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--pi-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pi-item.is-on .pi-item__name { font-weight: 600; color: var(--pi-ink); }

.pi-item__cat {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pi-item__dot {
    width: 0.5rem;
    height: 0.5rem;
    border: 1.5px solid var(--pi-line-2);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Columna 2: el vehículo */
.pi-mid { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.pi-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.pi-stage.is-drag { cursor: grabbing; }
.pi-stage canvas { display: block; width: 100%; height: 100%; }

/* El aviso mientras baja el modelo: el escenario no se queda mudo */
.pi-cargando {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--pi-ink-3);
    font-variant-numeric: tabular-nums;
    animation: dcFadeUp var(--duration-normal) var(--ease-smooth) both;
}

.pi-stage__stamp {
    position: absolute;
    left: 12px;
    bottom: 11px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 8px #060610;
    pointer-events: none;
}

.pi-stage__mono { font-variant-numeric: tabular-nums; }
.pi-stage__dim { color: var(--pi-ink-2); }

.pi-spot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: rgba(6,6,16,0.7);
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--pi-ink-2);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: width var(--duration-fast) var(--ease-smooth),
                height var(--duration-fast) var(--ease-smooth),
                opacity var(--duration-fast) var(--ease-smooth);
}

.pi-spot.is-on { width: 2rem; height: 2rem; }
.pi-spot.is-behind { opacity: 0.28; pointer-events: none; }
.pi-spot__n { pointer-events: none; }

.pi-spot__ring {
    position: absolute;
    inset: -2px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.pi-spot.is-on .pi-spot__ring { animation: piSpotPulse 1.9s var(--ease-in-out) infinite; }

.pi-spot__lbl {
    position: absolute;
    top: 50%;
    left: calc(100% + 9px);
    transform: translateY(-50%);
    display: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pi-ink);
    text-shadow: 0 1px 8px #060610;
    white-space: nowrap;
    pointer-events: none;
}

.pi-spot--left .pi-spot__lbl { left: auto; right: calc(100% + 9px); }
.pi-spot.is-on .pi-spot__lbl { display: inline; }

.pi-midfoot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
}

.pi-midfoot__r { color: var(--pi-ink-2); text-align: right; }

/* El atajo para volver afuera, encima del propio vehiculo */
.pi-view {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pi-cyan);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
}

.pi-view:hover { color: var(--pi-ink); }

/* ══════════════════ Columna 3: la que cambia ══════════════════ */
.pi-side { display: flex; flex-direction: column; min-width: 0; }

.pi-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: dcFadeUp var(--duration-normal) var(--ease-smooth) both;
}

.pi-panel__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
}

.pi-panel__over {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-cyan);
}

.pi-panel__h { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.pi-panel__h--point { font-size: 24px; font-weight: 400; line-height: 1.1; }

.pi-panel__ask {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--pi-ink-2);
    max-width: 42ch;
    text-wrap: pretty;
}

.pi-panel__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 14px;
}

.pi-panel__jump { margin-left: auto; }

/* Los botones del diseño: texto con subrayado */
/* La accion que avanza el recorrido es un boton de verdad: como texto
   subrayado no se sabia si era un rotulo o algo en lo que se hace clic. */
.pi-go {
    --glass-reflex-light: 0.5;
    align-self: flex-start;
    padding: 12px 24px;
    background-color: var(--glass-bg);
    background-image: var(--gradient-fill);
    border: 1px solid color-mix(in srgb, var(--glass-light) 12%, transparent);
    border-radius: 999px;
    box-shadow: var(--glass-shadow-light), 0 2px 10px rgba(30, 123, 255, 0.18);
    color: var(--text-on-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(var(--glass-blur-soft));
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

.pi-go:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-light), 0 8px 22px rgba(30, 123, 255, 0.3);
}

.pi-link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--pi-ink-3);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
}

.pi-link:hover { color: var(--pi-cyan); }

.pi-hint {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.45;
    color: var(--pi-cyan);
}

.pi-hint:hover { color: var(--pi-blue); }

/* ── El kilometraje ── */
.pi-km { display: flex; flex-direction: column; gap: 9px; }

.pi-km__k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
}

.pi-km__field {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 8px;
}

.pi-km__input {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pi-ink);
    font-family: inherit;
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pi-km__input:focus { outline: none; }
.pi-km__unit { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--pi-ink-3); }

.pi-warn { font-size: 13px; color: #f59e0b; }

.pi-cats {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 14px;
}

.pi-cats__k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
}

.pi-cat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 9px;
}

.pi-cat__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pi-cat__name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.pi-cat__list { font-size: 11px; line-height: 1.4; color: var(--pi-ink-3); }

.pi-cat__n {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pi-ink-2);
    white-space: nowrap;
}

.pi-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 44ch;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pi-ink-2);
}

.pi-note svg { flex: none; margin-top: 2px; }

/* ── Las cuatro respuestas ── */
.pi-ans { display: flex; flex-direction: column; }

.pi-ans__row {
    display: grid;
    grid-template-columns: 1.375rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 14px 15px 0;
    background: none;
    border: 0;
    border-radius: 12px;
    color: var(--pi-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-smooth),
                opacity var(--duration-fast) var(--ease-smooth);
}

.pi-ans__row:hover { background-color: rgba(250,250,250,0.03); opacity: 1; }
.pi-ans__row.is-off { opacity: 0.5; }

/* La elegida se marca con su color en el filete de la izquierda: se lee
   de un vistazo cuál quedó, sin depender de un punto de 10 píxeles. */
.pi-ans__row.is-on {
    padding-left: 14px;
    margin-left: -14px;
    background-color: rgba(250,250,250,0.035);
    box-shadow: inset 3px 0 0 0 currentColor;
}

.pi-ans__dot {
    justify-self: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    transition: box-shadow var(--duration-fast) var(--ease-smooth);
}

.pi-ans__row.is-on .pi-ans__dot { box-shadow: inset 0 0 0 3px #060610; }

.pi-ans__lbl { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.pi-ans__row.is-on .pi-ans__lbl { font-weight: 700; }

.pi-ans__note {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
    white-space: nowrap;
}

/* ── La evidencia ── */
.pi-ev {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0 0;
}

.pi-ev__k {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f59e0b;
}

/* La foto arriba y la observación debajo, cada una con todo el ancho de
   la columna. Lado a lado la foto se llevaba un ancho fijo y a la
   observación le quedaba una rendija donde no cabe una frase. */
.pi-ev__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.pi-shoot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 16px;
    background: rgba(245,158,11,0.05);
    border: 1px dashed rgba(245,158,11,0.45);
    border-radius: 10px;
    color: var(--pi-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth);
}

.pi-shoot:hover { background: rgba(245,158,11,0.1); border-color: #f59e0b; }
.pi-shoot svg { flex: none; }

.pi-shot__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(34,197,94,0.45);
    border-radius: 10px;
    overflow: hidden;
}

.pi-shot__frame img { width: 100%; height: 100%; object-fit: cover; }

.pi-shot__stamp {
    position: absolute;
    left: 9px;
    bottom: 8px;
    display: flex;
    gap: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-shadow: 0 1px 7px #060610;
    pointer-events: none;
}

/* Las dos columnas de la evidencia comparten estructura: rotulo arriba
   y cuerpo debajo, para que arranquen y terminen a la misma altura. */
.pi-ev__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.pi-ev__lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pi-ink-3);
}

.pi-obs__field {
    width: 100%;
    min-height: 5.5rem;
    padding: 12px 14px;
    background: rgba(250,250,250,0.025);
    border: 1px solid var(--pi-line);
    border-radius: 10px;
    color: var(--pi-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.45;
    resize: none;
}

.pi-obs__field:focus { outline: none; border-color: var(--pi-cyan); }
.pi-obs__field::placeholder { color: #3f3f53; }

.pi-block { font-size: 13px; line-height: 1.4; max-width: 38ch; }

/* ── El informe ── */
.pi-rep__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
}

.pi-rep__score { display: flex; flex-direction: column; gap: 2px; }
.pi-rep__line { display: flex; align-items: baseline; gap: 9px; }

.pi-rep__num {
    font-size: 62px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.88;
    font-variant-numeric: tabular-nums;
    background-image: linear-gradient(135deg, #1E7BFF, #22D3EE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pi-rep__of { font-size: 13px; font-weight: 600; color: var(--pi-ink-3); }

.pi-rep__state {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: right;
}

.pi-rep__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 13px 20px;
}

.pi-rep__meta .pi-dato { padding: 0; }
.pi-rep__weight { font-size: 12px; line-height: 1.5; color: var(--pi-ink-3); }

.pi-rep__find {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
}

.pi-rep__findk { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

.pi-find {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 12px;
}

.pi-find__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pi-find__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.pi-find__name { font-size: 16px; font-weight: 600; }
.pi-find__state { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

.pi-find__shot {
    display: block;
    width: 100%;
    max-width: 13rem;
    aspect-ratio: 4 / 3;
    margin-left: 18px;
    overflow: hidden;
}

.pi-find__shot img { width: 100%; height: 100%; object-fit: cover; }
.pi-find__obs { padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--pi-ink-2); }
.pi-find__act { display: flex; flex-direction: column; gap: 3px; padding-left: 18px; }
.pi-find__actk { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pi-ink-3); }
.pi-find__actv { font-size: 14px; font-weight: 500; line-height: 1.35; }
.pi-find__who { font-size: 11px; color: var(--pi-ink-3); }

.pi-signed { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #22c55e; }

/* ══════════════════ Escritorio ══════════════════ */

@media (min-width: 1024px) {
    .pi-hello__h { font-size: var(--text-5xl); }
    .pi-hello__p { font-size: var(--text-lg); }

    /* Las tres columnas comparten alto: el que marca el vehículo. Lo que
       sobra no se deja en blanco al pie, se reparte dentro de cada una. */
    .pi-cols {
        display: grid;
        grid-template-columns: 11.5rem minmax(0, 2.1fr) minmax(21rem, 0.92fr);
        /* La fila mide lo que mide el vehículo y no crece: un informe con
           varios hallazgos se desplaza dentro de su columna en vez de
           estirar la sección entera. */
        grid-template-rows: min(74vh, 44rem);
        align-items: stretch;
        gap: clamp(20px, 2.2vw, 34px);
    }

    /* El vehículo se lleva el alto de la pantalla: es el protagonista */
    .pi-stage { aspect-ratio: auto; flex: 1; height: auto; min-height: 0; }
    .pi-mid { min-height: 0; }

    /* Los nueve puntos se reparten el alto en vez de amontonarse arriba */
    .pi-list { justify-content: space-between; min-height: 0; overflow: auto; }

    /* El aire va por dentro y el margen negativo lo devuelve: el brillo de
       magIA y las filas que sobresalen no se cortan contra el scroll */
    .pi-side { min-height: 0; overflow: auto; padding: 0.5rem 1.25rem; margin: -0.5rem -1.25rem; }
    .pi-side .pi-panel { flex: 1; }
    /* La acción va pegada a su contenido y no al fondo del panel: al fondo,
       con poco texto, queda lejos y la gente no la ve */

    .pi-panel__h { font-size: 26px; }
    .pi-panel__h--point { font-size: 30px; }
    .pi-ans__lbl { font-size: 19px; }
}

@media (min-width: 1440px) {
    .pi-cols { grid-template-columns: 12rem minmax(0, 2.35fr) minmax(22rem, 0.85fr); }
    .pi-stage { height: min(78vh, 50rem); }
}

/* magIA documenta el hallazgo: su botón, debajo de la foto y la observación */
.pi-ev__magia { display: flex; margin-top: 12px; }