/* ==========================================================================
   Cotización directa — ventana de pasos (v10.1.0)
   Solicitud · Cotización · PDF · WhatsApp. Se monta sobre .fenix-qm-modal
   (productos-style.css). Oscuro por defecto como el modal; claro con
   [data-color-mode="light"] o «auto» + prefers-color-scheme: light.
   Solo se animan transform y opacity.
   ========================================================================== */

.fenix-qp {
    --qp-sup: #1a1a2e;
    --qp-txt: #f3f4f6;
    --qp-mut: rgba(255, 255, 255, .62);
    --qp-linea: rgba(255, 255, 255, .18);
    --qp-azul: #3b82f6;
    --qp-verde: #22c55e;
    --qp-rojo: #ef4444;
    --qp-amarillo: #facc15;
    --qp-sobre-amarillo: #1f1300;
    --qp-primario: #e31937;
    --qp-primario-h: #c8102e;
    /* v10.11.0: verde de WhatsApp más oscuro que el de la marca (#25d366) para
       que el texto blanco pase AA en los dos modos (5,4:1). */
    --qp-wa: #0f7a43;
    --qp-wa-h: #0b6134;
}

.hikvision-parking-page[data-color-mode="light"] .fenix-qp {
    --qp-sup: #ffffff;
    --qp-txt: #1d1d1f;
    --qp-mut: #5b6470;
    --qp-linea: #d1d5db;
    --qp-azul: #1d4ed8;
    --qp-verde: #15803d;
    --qp-rojo: #dc2626;
    --qp-amarillo: #eab308;
}
@media (prefers-color-scheme: light) {
    .hikvision-parking-page[data-color-mode="auto"] .fenix-qp {
        --qp-sup: #ffffff;
        --qp-txt: #1d1d1f;
        --qp-mut: #5b6470;
        --qp-linea: #d1d5db;
        --qp-azul: #1d4ed8;
        --qp-verde: #15803d;
        --qp-rojo: #dc2626;
        --qp-amarillo: #eab308;
    }
}

.fenix-qp:focus { outline: none; }

/* ── Pasos ─────────────────────────────────────────────────────────────── */

.fenix-qp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1.25rem 0 1rem;
    padding: 0;
    list-style: none;
}
.fenix-qp-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}
/* Tramo que llega a este paso desde el anterior. */
.fenix-qp-step + .fenix-qp-step::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--qp-linea);
    z-index: 0;
}
.fenix-qp-step.is-hecho::before,
.fenix-qp-step.is-actual::before { background: var(--qp-azul); }
.fenix-qp-step.is-aviso::before { background: var(--qp-amarillo); }
.fenix-qp-step.is-error::before { background: var(--qp-rojo); }

.fenix-qp-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid var(--qp-linea);
    border-radius: 50%;
    background: var(--qp-sup);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}
.fenix-qp-dot svg { width: 16px; height: 16px; }

.fenix-qp-step.is-actual .fenix-qp-dot { border-color: var(--qp-azul); }
.fenix-qp-step.is-actual .fenix-qp-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--qp-azul);
    animation: fenixQpLatido 1.1s ease-in-out infinite;
}
.fenix-qp-step.is-hecho .fenix-qp-dot { border-color: var(--qp-azul); background: var(--qp-azul); }
.fenix-qp-step.is-exito .fenix-qp-dot { border-color: var(--qp-verde); background: var(--qp-verde); }
.fenix-qp-step.is-error .fenix-qp-dot { border-color: var(--qp-rojo); background: var(--qp-rojo); }
.fenix-qp-step.is-aviso .fenix-qp-dot {
    border-color: var(--qp-amarillo);
    background: var(--qp-amarillo);
    color: var(--qp-sobre-amarillo);
}

.fenix-qp-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
    color: var(--qp-mut);
}
.fenix-qp-step.is-actual .fenix-qp-label,
.fenix-qp-step.is-hecho .fenix-qp-label,
.fenix-qp-step.is-aviso .fenix-qp-label,
.fenix-qp-step.is-error .fenix-qp-label { color: var(--qp-txt); font-weight: 600; }

@keyframes fenixQpLatido {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.6); opacity: .55; }
}

/* ── Barra y porcentaje ────────────────────────────────────────────────── */

.fenix-qp-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--qp-linea);
}
.fenix-qp-bar-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--qp-azul);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s ease;
}
.fenix-qp-pct {
    margin: .35rem 0 0;
    text-align: right;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--qp-mut);
}
.fenix-qp-msg {
    margin: .75rem 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--qp-txt);
}
.fenix-qp-final { margin-top: 1.25rem; }
.fenix-qp-final .fenix-qm-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.fenix-qm-btn--primary {
    background: var(--qp-primario, #e31937);
    color: #fff;
    border: 0;
}
.fenix-qm-btn--primary:hover,
.fenix-qm-btn--primary:focus-visible { background: var(--qp-primario-h, #c8102e); color: #fff; }

/* v10.11.0: «Enviar por WhatsApp» cuando la cotización pasa a un asesor. */
.fenix-qp .fenix-qm-btn--wa { background: var(--qp-wa); color: #fff; }
.fenix-qp .fenix-qm-btn--wa:hover,
.fenix-qp .fenix-qm-btn--wa:focus-visible { background: var(--qp-wa-h); color: #fff; }

@media (max-width: 420px) {
    .fenix-qp-label { font-size: .72rem; }
    .fenix-qp-dot { width: 26px; height: 26px; }
    .fenix-qp-step + .fenix-qp-step::before { top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .fenix-qp-step.is-actual .fenix-qp-dot::after { animation: none; }
    .fenix-qp-bar-fill { transition: none; }
}