/* ==========================================================================
   APOLO SERVICES — Búsqueda en Progreso (Estado de Carga)
   Fase 3 · Design System Atómico · BEM Estricto
   Tokens: apolo-tokens.css
   ========================================================================== */

/* ── 1. Contenedor Principal Centrado ───────────────────────────────────── */
.apolo-search-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--apolo-layout-header-height) - 120px);
    padding: var(--apolo-space-8) var(--apolo-space-4);
    width: 100%;
}

.apolo-search-progress__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
}

/* ── 2. Spinner con Ícono Central ───────────────────────────────────────── */
.apolo-search-progress__spinner-box {
    position: relative;
    width: 96px;
    height: 96px;
    margin-bottom: var(--apolo-space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.apolo-search-progress__spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--apolo-radius-full);
    border: 4px solid var(--apolo-color-primary-light);
    border-top-color: var(--apolo-color-primary);
    border-right-color: var(--apolo-color-primary);
    animation: apolo-spin 1.2s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

.apolo-search-progress__spinner-icon {
    position: relative;
    z-index: 1;
    color: var(--apolo-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 3. Tipografía y Encabezados ────────────────────────────────────────── */
.apolo-search-progress__title {
    font-size: var(--apolo-text-2xl);
    font-weight: var(--apolo-font-bold);
    color: var(--apolo-n900);
    line-height: var(--apolo-leading-tight);
    margin-bottom: var(--apolo-space-2);
}

.apolo-search-progress__subtitle {
    font-size: var(--apolo-text-base);
    color: var(--apolo-text-color-secondary);
    margin-bottom: var(--apolo-space-8);
}

/* ── 4. Tarjeta de Pasos ────────────────────────────────────────────────── */
.apolo-search-progress__card {
    background-color: var(--apolo-surface-card);
    border: 1px solid var(--apolo-border-color-subtle);
    border-radius: var(--apolo-radius-xl);
    box-shadow: var(--apolo-shadow-md);
    padding: var(--apolo-padding-card);
    width: 100%;
    text-align: left;
}

.apolo-search-progress__steps {
    display: flex;
    flex-direction: column;
    gap: var(--apolo-space-4);
}

.apolo-search-progress__step {
    display: flex;
    align-items: center;
    gap: var(--apolo-space-3);
    transition: var(--apolo-transition-color);
}

/* Badge contenedor del estado */
.apolo-search-progress__step-badge {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--apolo-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--apolo-n100);
    transition: background-color 200ms ease;
}

.apolo-search-progress__step-label {
    font-size: var(--apolo-text-base);
    line-height: var(--apolo-leading-normal);
}

/* ── 5. Estados Semánticos de los Pasos ──────────────────────────────────── */

/* Estado: Completado (Check verde) */
.apolo-search-progress__step--completed .apolo-search-progress__step-badge {
    background-color: var(--apolo-color-success-light);
    color: var(--apolo-color-success);
}

.apolo-search-progress__step--completed .apolo-search-progress__step-label {
    color: var(--apolo-n700);
    font-weight: var(--apolo-font-normal);
}

/* Estado: Activo / En progreso (Pulso azul y texto en negrita) */
.apolo-search-progress__step--active .apolo-search-progress__step-badge {
    background-color: var(--apolo-color-primary-light);
}

.apolo-search-progress__pulse-indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--apolo-radius-full);
    border: 2.5px solid var(--apolo-color-primary);
    background-color: var(--apolo-n0);
    display: block;
    animation: apolo-pulse 1.8s ease-in-out infinite;
}

.apolo-search-progress__step--active .apolo-search-progress__step-label {
    color: var(--apolo-n900);
    font-weight: var(--apolo-font-bold);
}

/* Estado: Pendiente (Punto gris tenue) */
.apolo-search-progress__step--pending .apolo-search-progress__step-badge {
    background-color: var(--apolo-n100);
}

.apolo-search-progress__dot-pending {
    width: 6px;
    height: 6px;
    border-radius: var(--apolo-radius-full);
    background-color: var(--apolo-n400);
    display: block;
}

.apolo-search-progress__step--pending .apolo-search-progress__step-label {
    color: var(--apolo-text-color-disabled);
    font-weight: var(--apolo-font-normal);
}

/* ── 6. Animaciones ─────────────────────────────────────────────────────── */
@keyframes apolo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes apolo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* ── 7. Responsive y Accesibilidad ──────────────────────────────────────── */
@media (max-width: 767.98px) {
    .apolo-search-progress {
        padding: var(--apolo-space-6) var(--apolo-space-3);
    }

    .apolo-search-progress__title {
        font-size: var(--apolo-text-xl);
    }

    .apolo-search-progress__subtitle {
        font-size: var(--apolo-text-sm);
        margin-bottom: var(--apolo-space-6);
    }

    .apolo-search-progress__card {
        padding: var(--apolo-space-4);
    }

    .apolo-search-progress__step-label {
        font-size: var(--apolo-text-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .apolo-search-progress__spinner-ring,
    .apolo-search-progress__pulse-indicator {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}