/* Timeline principal */
.tracking-timeline {
   /*// margin-top: 20px;
   // padding-left: 0;
    animation: fadeIn 0.5s ease-in-out;*/
    padding: 25px;
    background: #f9fafa;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.tracking-event {
    margin-bottom: 20px;
    padding: 10px;
    border-left: 5px solid #6c757d;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    animation: slideUp 0.5s ease-in-out;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.tracking-event::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 2px;
    flex-shrink: 0;
}

.tracking-event.entregue::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2328a745" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M9 16.2l-3.5-3.6L4 14l5 5 12-12-1.4-1.4z"/></svg>');
    border-left-color: #28a745;
}
.tracking-event.transito::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffc107" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M20 8h-3V4H7v4H4v12h16V8zM7 6h10v2H7V6zm11 12H6v-8h12v8z"/></svg>');
    border-left-color: #ffc107;
}
.tracking-event.aguardando::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2317a2b8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 13h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    border-left-color: #17a2b8;
}
.tracking-event.falha-entrega::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23dc3545" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    border-left-color: #dc3545;
}
.tracking-event.saiu-entrega::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23007bff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 13h2v-2H3v2zm3 0h2v-2H6v2zm3 0h2v-2H9v2zm3 0h2v-2h-2v2zm3 0h2v-2h-2v2zm3 0h2v-2h-2v2z"/></svg>');
    border-left-color: #007bff;
}
.tracking-event.producao::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ff9800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.43 12.98c.04-.32.07-.66.07-1s-.03-.68-.07-1l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.495.495 0 0 0-.6-.22l-2.49 1a7.007 7.007 0 0 0-1.73-.99L14.5 2.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0-.5.5l-.38 2.54c-.63.25-1.21.58-1.73.99l-2.49-1a.495.495 0 0 0-.6.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.05.32-.07.66-.07 1s.03.68.07 1l-2.11 1.65a.504.504 0 0 0-.12.64l2 3.46c.13.22.39.3.6.22l2.49-1c.52.41 1.1.74 1.73.99l.38 2.54a.5.5 0 0 0 .5.5h4c.25 0 .46-.18.5-.42l.38-2.54c.63-.25 1.21-.58 1.73-.99l2.49 1c.22.09.47 0 .6-.22l2-3.46a.495.495 0 0 0-.12-.64L19.43 12.98z"/></svg>');
    border-left-color: #ff9800;
}
.tracking-event.default::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%236c757d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.37 0 0 5.37 0 12c0 4.92 3.17 9.12 7.59 10.61.55.1.75-.24.75-.54v-1.89c-3.08.67-3.73-1.49-3.73-1.49-.5-1.29-1.23-1.63-1.23-1.63-1-.69.07-.68.07-.68 1.11.08 1.7 1.14 1.7 1.14.98 1.68 2.58 1.2 3.21.92.1-.71.38-1.2.69-1.48-2.46-.28-5.04-1.23-5.04-5.5 0-1.21.43-2.2 1.13-2.98-.11-.28-.49-1.41.11-2.94 0 0 .93-.3 3.05 1.14a10.77 10.77 0 0 1 2.78-.37c.94.01 1.89.13 2.78.37 2.11-1.44 3.04-1.14 3.04-1.14.6 1.53.22 2.66.11 2.94.7.78 1.12 1.77 1.12 2.98 0 4.28-2.58 5.21-5.04 5.48.39.33.74.97.74 1.96v2.9c0 .31.19.65.76.54C20.84 21.12 24 16.92 24 12c0-6.63-5.37-12-12-12z"/></svg>');
    border-left-color: #6c757d;
}
.tracking-event.acao-automatica::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23673ab7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 .75-.14 1.47-.39 2.12l1.46 1.46A7.963 7.963 0 0 0 20 12c0-4.42-3.58-8-8-8zm-6.07.93L4.54 6.32A7.963 7.963 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6 0-.75.14-1.47.39-2.12l1.46 1.46c.15-.49.35-.96.59-1.41L5.93 4.93z"/></svg>');
    border-left-color: #673ab7;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Timeline de status */
.timeline-container {
    padding: 25px;
    background: #f9fafa;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}



.timeline-header {
    font-size: 22px;
    font-weight: 600;
    color: #0073aa;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-order-id {
    font-size: 18px;
    font-weight: 600;
    color: #444;
    margin-bottom: 12px;
    padding: 8px 16px;
    background: #eef4f8;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
}

.timeline-event {
    background: #ffffff;
    border-left: 4px solid #0073aa;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 6px;
    transition: background 0.3s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.timeline-event:hover {
    background: #f1faff;
}

.timeline-event .timestamp {
    font-size: 12px;
    color: #666;
    display: block;
    margin-top: 4px;
}

.timeline-event.warning {
    border-color: #ffb300;
    background-color: #fff8e1;
}

.timeline-event.danger {
    border-color: #dc3545;
}

.timeline-event.success {
    border-color: #28a745;
}

.timeline-event.status-change {
    background-color: #fffbea;
    border-left-color: #ffb300;
}

.timeline-icon {
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* Responsivo */
@media (max-width: 600px) {
    .timeline-container {
        padding: 10px;
    }
    .timeline-header {
        font-size: 18px;
    }
    .timeline-event {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Aviso de rastreamento */
.timeline-warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 15px;
    color: #856404;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.5;
}

/* Título rastreamento */
.tracking-timeline  h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    color: #007cba;
    margin-bottom: 18px;
}

.timeline-container h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    color: #007cba;
    margin-bottom: 18px;
}

.tracking-link-box {
    background: #e6f0ff;
    border: 1px solid #007cba;
    padding: 16px 20px;
    border-radius: 6px;
    margin-top: 30px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    font-size: 15px;
    line-height: 1.6;
}

.tracking-link-box strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
}

.tracking-link-box a {
    color: #0056b3;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #0056b3;
}

.tracking-link-box a:hover {
    color: #003f7f;
    border-bottom-style: solid;
}

.tracking-external-box {
    background: #eaf3ff;
    border: 1px solid #b6d4fe;
    padding: 16px;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    line-height: 1.6;
    color: #333;
}

.tracking-external-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #004085;
    margin-bottom: 6px;
}

.tracking-link {
    font-weight: bold;
    color: #007bff;
    text-decoration: underline;
}

.tracking-link:hover {
    text-decoration: none;
    color: #0056b3;
}


/* Modal de rastreamento */
.modal-tracking {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content-tracking {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    position: relative;
}

.close-tracking {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.tracking-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.tracking-modal-content {
    background-color: #fff;
    margin: 5% auto;
    width: 90%;
    max-width: 750px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
}
/* Botão fechar */
.tracking-modal-close {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 15px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}
/* Corpo com scroll */
#tracking-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 20px;
}

/* Rodapé fixo */
.tracking-modal-footer {
    padding: 15px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    text-align: center;
}

.tracking-modal-header {
    background-color: #f0f0f0;
    padding: 16px 20px;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}