/* =============================================================================
   Rastreamento
   Meio Norte Express
   ============================================================================= */

.capa--compacta { padding-bottom: var(--gap-bloco); }

.busca__form--capa { max-width: 560px; margin-top: var(--space-6); }
.busca__form--capa input {
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.4);
}

.recentes { margin: var(--space-4) 0 0; font-size: var(--font-size-xs); color: rgba(255,255,255,.8); max-width: none; }
.recentes a { font-family: var(--font-mono); color: #fff; margin-right: var(--space-3); border-bottom: 1px solid currentColor; }

/* --- Resultado ------------------------------------------------------------ */

.resultado:empty { display: none; }
.cartao--resultado { margin-bottom: var(--space-5); }

.resultado__topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-5);
}

.rotulo {
    display: block;
    font-size: var(--font-size-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: var(--lh-rotulo);
    color: var(--gray-600);
    margin-bottom: 3px;
}

.codigo { font-family: var(--font-mono); font-size: 1.35rem; letter-spacing: .05em; color: var(--gray-900); }

.destaque {
    background: var(--info-light);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.destaque--ok     { background: var(--success-light); }
.destaque--alerta { background: var(--warning-light); }
.destaque__rotulo {
    display: block; font-size: var(--font-size-xs);
    letter-spacing: .1em; text-transform: uppercase;
    line-height: var(--lh-rotulo); color: var(--gray-600); margin-bottom: 4px;
}
.destaque__valor {
    display: block; font-size: var(--font-size-2xl);
    line-height: var(--lh-rotulo); font-variant-numeric: tabular-nums; color: var(--gray-900);
}
.destaque__nota { display: block; font-size: var(--font-size-sm); color: var(--gray-600); margin-top: 3px; }

.rota {
    display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-5);
}
.rota strong { font-size: var(--font-size-lg); color: var(--gray-900); }
.rota__seta { color: var(--gray-500); font-size: 1.4rem; }

.dados {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4); margin: 0;
}
.dados div { margin: 0; }
.dados dt {
    font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-600); margin-bottom: 3px;
}
.dados dd { margin: 0; font-weight: var(--peso-enfase); color: var(--gray-900); }

/* --- Linha do tempo ------------------------------------------------------- */

.linha { list-style: none; margin: 0; padding: 0; }
.linha__item { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-6); margin: 0; }
.linha__item:last-child { padding-bottom: 0; }
.linha__item::before {
    content: ''; position: absolute; left: 6px; top: 18px; bottom: 0;
    width: 2px; background: var(--gray-200);
}
.linha__item:last-child::before { display: none; }
.linha__marca {
    flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px;
    border-radius: var(--radius-full);
    background: var(--gray-300);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--gray-300);
}
.linha__item--atual .linha__marca {
    background: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}
.linha__item strong { display: block; color: var(--gray-900); }
.linha__item p { margin: 2px 0 4px; font-size: var(--font-size-sm); color: var(--gray-600); }
.linha__meta { font-size: var(--font-size-xs); color: var(--gray-600); }

/* --- Erro ----------------------------------------------------------------- */

.cartao--erro { border-left: 4px solid var(--danger-color); }
.cartao .nota { font-size: var(--font-size-sm); color: var(--gray-600); }
.cartao--erro .acoes { margin-top: var(--space-5); }

/* --- Ajuda: onde fica o localizador --------------------------------------- */

.cartao--ajuda { border-left: 4px solid var(--info-color); }

.ajuda__grade {
    display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(190px, 1fr);
    gap: var(--space-6); align-items: center;
}
.ajuda__grade ul { padding-left: var(--space-5); }
.ajuda__grade li { font-size: var(--font-size-sm); color: var(--gray-600); }

.codigo-exemplo {
    font-family: var(--font-mono);
    background: var(--info-light); color: var(--info-color);
    padding: 2px 7px; border-radius: var(--radius-sm); letter-spacing: .06em;
}

/* Fac-símile do DACTE em CSS: pesa zero e acompanha o tema. */
.dacte { margin: 0; }
.dacte__papel {
    display: flex; flex-direction: column; gap: 7px;
    padding: var(--space-4);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.dacte__linha { height: 6px; background: var(--gray-200); border-radius: 3px; }
.dacte__linha--curta { width: 58%; }
.dacte__rotulo { font-size: .62rem; letter-spacing: .12em; color: var(--gray-600); margin-top: 5px; }
.dacte__texto { font-family: var(--font-mono); font-size: .8rem; color: var(--gray-800); }
.dacte__texto mark { background: #fde68a; color: #713f12; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.dacte figcaption { margin-top: 9px; font-size: var(--font-size-xs); text-align: center; color: var(--gray-600); }

@media (max-width: 620px) { .ajuda__grade { grid-template-columns: 1fr; } }

/* --- Esqueleto de carregamento -------------------------------------------- */

.esqueleto { pointer-events: none; }
.esq {
    display: block;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: esq 1.4s ease-in-out infinite;
}
.esq--topo     { height: 30px; width: 45%; margin-bottom: 20px; }
.esq--destaque { height: 62px; width: 100%; margin-bottom: 20px; border-radius: var(--radius-md); }
.esq--meio     { height: 20px; flex: 1; }
.esq--titulo   { height: 22px; width: 32%; margin: 24px 0 14px; }
.esq--linha    { height: 15px; width: 100%; margin-bottom: 9px; }
.esq--curta    { width: 62%; }
.esq-linha     { display: flex; gap: 18px; margin-bottom: 8px; }

@keyframes esq { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .esq { animation: none; background: var(--gray-200); }
}