/* /es/rastreo/css/style.css */

/* Animación suave de aparición */
#tracking-result {
    animation: rastreo-fade-in 0.25s ease-out;
}

@keyframes rastreo-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Línea de tiempo de estados */
.tracking-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.tracking-timeline::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, #f97316, #e5e7eb);
    opacity: 0.6;
}

.tracking-step {
    position: relative;
    padding-left: 0.75rem;
    margin-bottom: 0.75rem;
}

.tracking-step-dot {
    position: absolute;
    left: -0.15rem;
    top: 0.1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    border: 2px solid #e5e7eb;
    background: #fff;
}

.tracking-step-dot.is-active {
    border-color: #f97316;
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

.tracking-badge-status {
    font-size: 0.68rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background-color: #0f172a;
    color: #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Alertas */
#track-alert {
    border-width: 1px;
}