/* ============================================================
   WRAPPER GENERAL DE LA BARRA DE PASOS
   ============================================================ */
.tramite-pasos-wrapper {
    padding: 8px 0;
    margin-bottom: 25px;
    border-bottom: none;
    overflow: visible;
    line-height: normal;
}

/* ✅ Solo cuando el menú lateral está visible (≥1300px) */
@media (min-width: 1300px) {
    .tramite-pasos-wrapper {
        padding-left: 90px; /* ancho real del menú */
    }
}

/* ✅ Cuando el menú está oculto (<1300px) */
@media (max-width: 1299px) {
    .tramite-pasos-wrapper {
        padding-left: 0;
    }
}

/* ============================================================
   CENTRADO EN PANTALLAS GRANDES
   ============================================================ */
.tramite-pasos-center {
    display: flex;
    justify-content: center;
    overflow: visible;
    line-height: normal;
}

/* ============================================================
   CONTENEDOR SCROLLEABLE
   ============================================================ */
.tramite-pasos-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 6px;
    padding-bottom: 6px;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #7E3043 #E8E8E8;
}

    /* Chrome, Edge, Safari */
    .tramite-pasos-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .tramite-pasos-scroll::-webkit-scrollbar-track {
        background: #E8E8E8;
        border-radius: 4px;
    }

    .tramite-pasos-scroll::-webkit-scrollbar-thumb {
        background: #7E3043;
        border-radius: 4px;
    }

        .tramite-pasos-scroll::-webkit-scrollbar-thumb:hover {
            background: #5A2331;
        }

/* ============================================================
   CARD DE CADA PASO (INACTIVO)
   ============================================================ */
.tramite-paso-card {
    min-width: 140px;
    max-width: 160px;
    padding: 14px 12px;
    border-radius: 14px;
    background-color: #EFEFEF; /* gris suave */
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.08);
}

    .tramite-paso-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    }

/* ============================================================
   ✅ MICROANIMACIÓN PREMIUM (Fade + Slide)
   ============================================================ */
@keyframes pasoActivoFadeSlide {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* ============================================================
   ✅ VARIANTE 1 — INSTITUCIONAL FUERTE (ACTIVO) + TÍTULO EN BEIGE
   ✅ ESTA ES LA QUE ESTÁS USANDO
   ============================================================ */
.tramite-paso-card.activo {
    background: #663333; /* maroon institucional */
    border: 2px solid #663333;
    padding: 12px 26px;
    font-weight: 700;
    color: white;
    transition: transform .05s ease-in-out, box-shadow .2s;
    animation: pasoActivoFadeSlide 0.35s ease-out; /* ✅ microanimación integrada */
}

    .tramite-paso-card.activo .tramite-paso-icono i {
        color: #FFFFFF;
    }

    .tramite-paso-card.activo .tramite-paso-numero {
        color: #FFFFFF;
    }

    .tramite-paso-card.activo .tramite-paso-titulo {
        color: #D6CCB1; /* beige institucional */
    }

/* ============================================================
   ✅ VARIANTE 2 — MINIMALISTA PREMIUM (ACTIVO)
   ============================================================ */
/*
.tramite-paso-card.activo {
    background-color: #FFFFFF;
    border: 2px solid #7E3043;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    animation: pasoActivoFadeSlide 0.35s ease-out;
}

.tramite-paso-card.activo .tramite-paso-icono i,
.tramite-paso-card.activo .tramite-paso-numero,
.tramite-paso-card.activo .tramite-paso-titulo {
    color: #7E3043;
}
*/

/* ============================================================
   ✅ VARIANTE 3 — CONTRASTADA ELEGANTE (ACTIVO)
   ============================================================ */
/*
.tramite-paso-card.activo {
    background-color: #D6CCB1;
    border: 3px solid #7E3043;
    transform: translateY(-4px);
    box-shadow: 0 5px 14px rgba(0,0,0,0.20);
    animation: pasoActivoFadeSlide 0.35s ease-out;
}

.tramite-paso-card.activo .tramite-paso-icono i,
.tramite-paso-card.activo .tramite-paso-numero,
.tramite-paso-card.activo .tramite-paso-titulo {
    color: #7E3043;
}
*/

/* ============================================================
   ICONO
   ============================================================ */
.tramite-paso-icono i {
    font-size: 26px;
    /*color: #7E3043;*/
    color: #663333;
    margin-bottom: 6px;
}

/* ============================================================
   TEXTO: Paso N
   ============================================================ */
.tramite-paso-numero {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #7E3043;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* ============================================================
   TEXTO: Título del paso
   ============================================================ */
.tramite-paso-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-top: 4px;
    line-height: 1.2;
}

/* ============================================================
   ENCABEZADOS DEL TRÁMITE
   ============================================================ */
.tramite-encabezado-minimalista {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}