.timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.timeline::before {
    content:'';
    position:absolute;
    top:30px;
    left:0;
    right:0;
    height:4px;
    background:#e5e7eb;
}

.step {
    text-align:center;
}

.step.active .icon {
    background:#22c55e;
    animation:pulse 1.5s infinite;
}
.tracking-public{
    max-width:900px;
    margin:60px auto;
    font-family:system-ui,-apple-system,BlinkMacSystemFont;
}

.tracking-form{
    display:flex;
    gap:12px;
    margin-bottom:40px;
}

.tracking-form input{
    flex:1;
    padding:14px;
    font-size:16px;
}

.tracking-form button{
    padding:14px 28px;
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
}

.estado-actual{
    font-size:32px;
    font-weight:800;
    margin-bottom:8px;
}

.tracking-ruta{
    font-size:18px;
    color:#475569;
    margin-bottom:40px;
}

/* TIMELINE */
.timeline-horizontal{
    display:flex;
    justify-content:space-between;
    position:relative;
}

.timeline-horizontal::before{
    content:'';
    position:absolute;
    top:30px;
    left:0;
    right:0;
    height:4px;
    background:#e5e7eb;
}

.timeline-step{
    width:100%;
    text-align:center;
    position:relative;
    z-index:1;
}

.timeline-icon{
    width:56px;
    height:56px;
    margin:0 auto 12px;
    background:#e5e7eb;
    border-radius:50%;
    position:relative;
}

.timeline-icon::before{
    content:'✈';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:22px;
    color:#64748b;
}

/* COMPLETADO */
.timeline-step.completado .timeline-icon{
    background:#22c55e;
}
.timeline-step.completado .timeline-icon::before{
    color:#fff;
}

/* ACTIVO */
.timeline-step.activo .timeline-icon{
    background:#2563eb;
    animation:pulse 1.6s infinite;
}
.timeline-step.activo .timeline-icon::before{
    color:#fff;
}

.timeline-label strong{
    display:block;
    font-size:14px;
}

.timeline-label span{
    display:block;
    font-size:12px;
    color:#64748b;
}

/* ANIMACIÓN */
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}
    70%{box-shadow:0 0 0 18px rgba(37,99,235,0)}
    100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}

/* MOBILE */
@media(max-width:768px){
    .timeline-horizontal{
        flex-direction:column;
        gap:30px;
    }
    .timeline-horizontal::before{
        display:none;
    }
}
/* ================================
   📱 TIMELINE VERTICAL PREMIUM
   ================================ */
@media (max-width: 768px) {

    .timeline-horizontal{
        flex-direction:column;
        align-items:flex-start;
        gap:28px;
        padding-left:30px;
    }

    .timeline-horizontal::before{
        left:14px;
        top:0;
        bottom:0;
        width:4px;
        height:100%;
    }

    .timeline-step{
        display:flex;
        align-items:flex-start;
        text-align:left;
        gap:16px;
        width:100%;
    }

    .timeline-icon{
        margin:0;
        flex-shrink:0;
    }

    .timeline-label{
        padding-top:4px;
    }

    .timeline-label strong{
        font-size:16px;
    }

    .timeline-label span{
        font-size:13px;
        margin-top:2px;
    }

    /* ACTIVO */
    .timeline-step.activo .timeline-icon{
        animation:pulse 1.6s infinite;
    }

    /* COMPLETADO */
    .timeline-step.completado .timeline-icon{
        background:#22c55e;
    }
}
/* ===============================
   ICONOS POR ESTADO
=============================== */
.timeline-icon.estado-recepcionado::before { content: '📦'; }
.timeline-icon.estado-pedido::before       { content: '📝'; }
.timeline-icon.estado-transito::before     { content: '✈'; }
.timeline-icon.estado-aduana::before       { content: '🛃'; }
.timeline-icon.estado-entregado::before    { content: '✅'; }

/* DESCRIPCIÓN DEL ESTADO */
.estado-desc {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

/* MEJORA VISUAL EN MÓVIL */
@media (max-width: 768px) {
    .estado-desc {
        font-size: 14px;
    }
}
/* ===============================
   🧠 TOOLTIP POR ESTADO
=============================== */

/* CONTENEDOR */
.timeline-label {
    position: relative;
}

/* TOOLTIP (DESKTOP) */
.estado-desc {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    width: 240px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    z-index: 20;
}

/* FLECHITA */
.estado-desc::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

/* MOSTRAR AL HOVER */
.timeline-step:hover .estado-desc {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ===============================
   📱 MOBILE (SIN TOOLTIP FLOTANTE)
=============================== */
@media (max-width: 768px) {

    .estado-desc {
        position: static;
        opacity: 1;
        background: transparent;
        color: #475569;
        padding: 0;
        width: auto;
        box-shadow: none;
        transform: none;
        margin-top: 6px;
        font-size: 14px;
    }

    .estado-desc::after {
        display: none;
    }
}

/* ===============================
   📝 OBSERVACION ADMIN (CAJITA)
=============================== */
.estado-observacion {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

/* Si el estado es el ACTUAL */
.timeline-step.activo .estado-observacion {
    background: #ecfeff;
    border-left-color: #22c55e;
}

/* MÓVIL */
@media (max-width: 768px) {
    .estado-observacion {
        font-size: 14px;
    }
}