/**
 * Ingreso Personal (IPER) — zona interactiva.
 *
 * Se monta sobre la hoja de Inspecciones (clases pi-*) y solo agrega lo
 * propio de esta zona con el prefijo ip-: los pasos del turno, las reglas
 * del centro, las marcaciones, el reloj y el tablero del día.
 *
 * Mobile-first. Los @keyframes viven en animations.css.
 */

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

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

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

    /* Con solo cinco pasos, repartirlos a lo alto los deja sueltos */
    .ip-list { justify-content: flex-start; }
}

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

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

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

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

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

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

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

/* El reloj de la portería, que es el hilo del turno */
.ip-clock .pi-dato__v {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #9fe9f7;
}

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

.ip-set { display: flex; flex-direction: column; gap: 6px; }
.ip-set__d { font-size: 11.5px; line-height: 1.4; color: var(--pi-ink-3); }
.ip-opts { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }

.ip-opt {
    display: flex;
    align-items: flex-start;
    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);
}

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

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

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

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

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

.ip-opt.is-on .ip-opt__box { background: #22D3EE; box-shadow: none; }

/* ══════════════════ Las marcaciones ══════════════════ */
.ip-marks { display: flex; flex-direction: column; gap: 6px; }

.ip-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);
    animation: ipMarkIn var(--duration-slow) var(--ease-spring) both;
}

.ip-mark__h {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #9fe9f7;
}

.ip-mark.is-tarde .ip-mark__h { color: #fbbf24; }
.ip-mark.is-manual .ip-mark__h { color: #fbbf24; }

.ip-mark__t { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ip-mark__name { font-size: 12.5px; font-weight: 700; }
.ip-mark__d { font-size: 11.5px; line-height: 1.45; color: var(--pi-ink-3); }

.ip-now { display: flex; flex-direction: column; gap: 2px; }
.ip-now__k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ip-now__h { font-weight: 800; font-variant-numeric: tabular-nums; color: #9fe9f7; }
.ip-now__name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.ip-now__role { font-size: 12px; color: var(--pi-ink-3); }

.ip-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #22D3EE 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22D3EE 24%, transparent);
}

.ip-rule__v { font-size: 12px; font-weight: 700; color: #9fe9f7; }

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

/* La opción elegida se ve: verde la que resuelve, roja la que no. La hoja
   base marca la elegida con un filete recto pegado al borde izquierdo: aquí
   se reemplaza por una pastilla completa, con sus cuatro esquinas. */
.ip-ans { border-radius: 14px; padding-left: 12px; margin-left: 0; }
.ip-ans .pi-ans__dot { display: inline-flex; align-items: center; justify-content: center; }

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

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

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

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

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

/* ══════════════════ El tablero del día ══════════════════ */
.ip-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

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

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

.ip-pay { display: flex; flex-direction: column; }

.ip-payrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
}

.ip-payrow + .ip-payrow { box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.07); }
.ip-payrow__n { min-width: 0; font-size: 12.5px; }
.ip-payrow__h { margin-left: auto; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pi-ink-2); }

/* El estado se dice con palabras, no con un punto de color */
.ip-payrow__s {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ceab6;
}

.ip-payrow__s.is-tarde,
.ip-payrow__s.is-manual { color: #fbbf24; }
.ip-payrow__s.is-fuera { color: #9fe9f7; }

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

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

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

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

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

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

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