/* =============================================================================
   Área do cliente
   Meio Norte Express

   REESCRITA COMPLETA
   -------------------
   A versão anterior era uma aplicação com identidade própria dentro do site:
   1.970 linhas de <style> embutido, uma paleta paralela (--cliente-primary,
   --cliente-accent…) que redeclarava as mesmas cores com outros nomes, e
   componentes que não existiam em lugar nenhum (.btn-auth, .summary-card,
   .grid-controls-professional). Quem saía da home e entrava aqui trocava de
   produto.

   Aqui os componentes são os do site — .botao, .cartao, .capa, os tokens de
   cor, raio, sombra e tipografia — e só o que é específico desta tela ganha
   classe nova: painel de indicadores, abas, tabela de dados e modal.

   O QUE MUDA NA ORGANIZAÇÃO
   -------------------------
   Antes as três grades (cotações, embarques, faturas) empilhavam na mesma
   página, cada uma com sua barra de seis controles: a tela passava de
   9.000px e o cliente rolava por dados que não pediu. Agora são ABAS: uma
   grade por vez, com a largura inteira e uma barra de filtro só.
   ============================================================================= */

/* =============================================================================
   1. ENTRADA — login, cadastro e recuperação
   ============================================================================= */

.acesso {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--gap-bloco);
    align-items: start;
}

/* O texto ao lado do formulário não é enfeite: quem chega aqui muitas vezes
   não sabe se tem conta, ou confunde esta área com a consulta de cotação por
   protocolo, que não exige cadastro. */
.acesso__apoio h2 { color: #fff; }
.acesso__lista { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.acesso__lista li {
    display: flex; gap: var(--space-3); align-items: flex-start;
    margin-bottom: var(--space-4);
    color: rgba(255, 255, 255, .9);
    font-size: var(--font-size-sm);
}
.acesso__lista i {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--marca-laranja-veu);
    color: var(--marca-laranja-claro);
    font-size: .85rem;
}

.acesso__cartao {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
}

/* Os três formulários são painéis do mesmo cartão, e não três cartões que
   aparecem e somem: a caixa não salta de tamanho na troca. */
.painel-acesso[hidden] { display: none; }
.painel-acesso h1 { font-size: var(--font-size-2xl); margin-bottom: var(--space-2); }
.painel-acesso__ajuda { color: var(--gray-600); font-size: var(--font-size-sm); margin-bottom: var(--space-6); }

.acesso__troca {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--gray-200);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    text-align: center;
}
.acesso__troca button {
    padding: 0;
    font: inherit;
    font-weight: var(--peso-enfase);
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.acesso__troca button:hover { color: var(--primary-dark); }

@media (max-width: 900px) {
    .acesso { grid-template-columns: 1fr; }
    .acesso__apoio { order: 2; }
    .acesso__cartao { padding: var(--space-6); }
}

/* =============================================================================
   2. FORMULÁRIO
   ============================================================================= */

.campo { margin-bottom: var(--space-5); }
.campo:last-of-type { margin-bottom: var(--space-6); }

.campo > label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--peso-enfase);
    color: var(--gray-800);
    margin-bottom: var(--space-2);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 122, .14);
}
.campo input[aria-invalid="true"] { border-color: var(--danger-color); }

.campo__dica { font-size: var(--font-size-xs); color: var(--gray-600); margin: var(--space-2) 0 0; }
.campo__erro { font-size: var(--font-size-xs); color: var(--danger-color); margin: var(--space-2) 0 0; }

.campos-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.campos-linha--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) {
    .campos-linha, .campos-linha--3 { grid-template-columns: 1fr; }
}

/* O botão em estado de espera não pode sumir nem trocar de largura: a pessoa
   perde o ponto de referência e clica de novo. */
.botao[data-ocupado="true"] { pointer-events: none; opacity: .72; }
.botao[data-ocupado="true"] .botao__texto::after {
    content: '';
    display: inline-block;
    width: .85em; height: .85em;
    margin-left: .5em;
    vertical-align: -.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* =============================================================================
   3. CABEÇALHO DA SESSÃO
   ============================================================================= */

.sessao {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
}
.sessao__nome { font-size: var(--font-size-2xl); margin-bottom: var(--space-2); color: #fff; }

/* A foto ao lado do nome, e clicável: é o gesto que todo mundo já tenta em
   qualquer sistema — tocar no próprio avatar para abrir os próprios dados. */
.sessao__identidade { display: flex; align-items: center; gap: var(--space-4); }
.sessao__avatar {
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.sessao__avatar:hover,
.sessao__avatar:focus-visible { transform: scale(1.05); border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .sessao__avatar { transition: none; }
    .sessao__avatar:hover, .sessao__avatar:focus-visible { transform: none; }
}

/* Razão social e CNPJ: é o que diz ao cliente que ele está vendo os dados da
   empresa certa. Quando o usuário não tem cliente vinculado no TMS, este
   selo some e um aviso toma o lugar — ver `.aviso-vinculo`. */
.sessao__empresa {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    background: var(--marca-laranja-veu);
    border: 1px solid var(--marca-laranja-linha);
    border-radius: var(--radius-full);
    color: #fff;
}
.sessao__empresa i { color: var(--marca-laranja-claro); }
.sessao__cnpj { font-family: var(--font-mono); font-size: var(--font-size-xs); opacity: .85; }

.sessao__acoes { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.aviso-vinculo {
    display: flex; gap: var(--space-4); align-items: flex-start;
    padding: var(--space-5);
    margin-bottom: var(--gap-bloco);
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-left-width: 4px;
    border-radius: var(--radius-md);
}
.aviso-vinculo i { color: var(--warning-color); font-size: 1.2rem; flex: 0 0 auto; margin-top: 2px; }
.aviso-vinculo p { margin: 0; font-size: var(--font-size-sm); color: var(--gray-800); }

/* =============================================================================
   4. PAINEL DE INDICADORES

   Eram sete cartões numa fila; sete números iguais em peso não formam
   hierarquia, e o olho não sabe qual olhar. São quatro, cada um respondendo
   a uma pergunta que o cliente realmente faz.
   ============================================================================= */

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--gap-bloco);
}

.indicador {
    display: flex; align-items: center; gap: var(--space-4);
    width: 100%;
    padding: var(--space-5);
    font: inherit;
    text-align: left;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}
.indicador__texto { min-width: 0; }

.indicador:hover,
.indicador:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.indicador:active { transform: translateY(-1px); }

/* Cartão apertado = recorte no ar. A borda inteira assume a cor do estado,
   e a seta aponta para a lista logo abaixo — as duas coisas juntas explicam
   por que a tabela mudou sem precisar de texto. */
.indicador[aria-pressed="true"] {
    border-color: currentColor;
    box-shadow: var(--shadow-md);
}
.indicador[aria-pressed="true"]::after {
    content: '';
    position: absolute; left: 50%; bottom: -9px;
    width: 16px; height: 16px;
    transform: translateX(-50%) rotate(45deg);
    background: #fff;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}
.indicador[aria-pressed="true"] .indicador__icone { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .indicador, .indicador__icone { transition: none; }
    .indicador:hover, .indicador:focus-visible, .indicador:active { transform: none; }
}
.indicador__icone {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.15rem;
    transition: transform var(--transition-fast);
}
.indicador__valor {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--peso-titulo);
    line-height: var(--lh-rotulo);
    font-variant-numeric: tabular-nums;
    color: var(--gray-900);
}
.indicador__rotulo { display: block; font-size: var(--font-size-xs); color: var(--gray-600); margin-top: 3px; }
.indicador__extra { display: block; font-size: var(--font-size-xs); color: var(--gray-700); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* A cor do indicador é a do ESTADO que ele reporta, e é a mesma em toda a
   tela: azul é trânsito, verde é concluído, âmbar é pendência. A cor também
   vira `color` do cartão, para o estado apertado herdá-la na borda. */
.indicador--aguardando { border-top-color: var(--gray-500); color: var(--gray-600); }
.indicador--aguardando .indicador__icone { background: var(--gray-100); color: var(--gray-700); }
.indicador--transito  { border-top-color: var(--info-color); color: var(--info-color); }
.indicador--transito  .indicador__icone { background: var(--info-light); color: var(--info-color); }
.indicador--entregue  { border-top-color: var(--success-color); }
.indicador--entregue  .indicador__icone { background: var(--success-light); color: var(--success-color); }
.indicador--pendente  { border-top-color: var(--warning-color); color: var(--warning-color); }
.indicador--pendente  .indicador__icone { background: var(--warning-light); color: var(--warning-color); }
.indicador--financeiro { border-top-color: var(--marca-laranja); color: var(--marca-laranja-forte); }
.indicador--financeiro .indicador__icone { background: var(--marca-laranja-veu); color: var(--marca-laranja-forte); }
/* `color` no cartão serve à borda do estado apertado (`currentColor`); valor
   e rótulo declaram a própria cor logo acima e não são afetados. */

/* =============================================================================
   5. GRÁFICO

   Em SVG, e não em Chart.js: a versão anterior chamava `new Chart(...)` sem
   nunca ter carregado a biblioteca — o canvas ficava em branco e o erro
   morria no console. Doze colunas não justificam 200 KB de dependência.
   ============================================================================= */

.grafico {
    padding: var(--space-6);
    margin-bottom: var(--gap-bloco);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.grafico__cabecalho {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.grafico h2 { font-size: var(--font-size-lg); margin: 0; }
.grafico__total { font-size: var(--font-size-sm); color: var(--gray-600); font-variant-numeric: tabular-nums; }
.grafico__total strong { color: var(--gray-900); }

.grafico svg { display: block; width: 100%; height: auto; }
.grafico__barra { fill: var(--primary-color); transition: fill var(--transition-fast); }
.grafico__barra:hover { fill: var(--marca-laranja-forte); }
.grafico__mes  { font-size: 10px; fill: var(--gray-600); text-anchor: middle; }
.grafico__eixo { stroke: var(--gray-200); stroke-width: 1; }
.grafico__valor-eixo { font-size: 10px; fill: var(--gray-500); }

.grafico__vazio { text-align: center; color: var(--gray-600); font-size: var(--font-size-sm); padding: var(--space-8) 0; }

/* =============================================================================
   6. ABAS
   ============================================================================= */

.abas {
    display: flex; gap: var(--space-1);
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: var(--gap-bloco);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.aba {
    display: inline-flex; align-items: center; gap: var(--space-2);
    flex: 0 0 auto;
    padding: 13px 20px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--peso-enfase);
    color: var(--gray-600);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.aba:hover { color: var(--gray-900); }
.aba[aria-selected="true"] { color: var(--gray-900); border-bottom-color: var(--marca-laranja); }

/* A contagem ao lado do rótulo evita que a pessoa abra uma aba vazia para
   descobrir que está vazia. */
.aba__contagem {
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    color: var(--gray-700);
}
.aba[aria-selected="true"] .aba__contagem { background: var(--marca-laranja-veu); color: var(--gray-900); }

.painel-aba[hidden] { display: none; }

/* =============================================================================
   7. BARRA DE FILTRO
   ============================================================================= */

.filtros {
    display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
.filtros__busca { flex: 1 1 240px; position: relative; }
.filtros__busca i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--gray-500); font-size: .85rem; pointer-events: none;
}
.filtros__busca input { padding-left: 36px; }

.filtros__grupo { flex: 0 1 auto; }
.filtros__grupo > label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    color: var(--gray-700);
    margin-bottom: 5px;
}
.filtros input,
.filtros select {
    width: 100%;
    padding: 10px 13px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
}
.filtros input:focus, .filtros select:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 122, .14);
}

.filtros__periodo-custom { display: none; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.filtros__periodo-custom.ativo { display: flex; }
.filtros__periodo-custom span { font-size: var(--font-size-xs); color: var(--gray-600); }

.filtros__resumo {
    width: 100%;
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* =============================================================================
   8. TABELA DE DADOS

   Em telas estreitas a tabela deixa de ser tabela: cada linha vira um
   cartão, com o rótulo da coluna vindo do `data-rotulo` da célula. Rolagem
   horizontal em tabela de dez colunas é a pior leitura possível no celular.
   ============================================================================= */

.tabela-envolucro {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* Rede de segurança, não estratégia: com `table-layout: fixed` e o empilhamento
   abaixo de 1080px, nenhuma das três grades chega a estourar a largura. Fica
   aqui para o caso de um dado absurdamente longo aparecer. */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/*
   POR QUE `table-layout: fixed`
   -----------------------------
   No automático, o navegador dimensiona coluna por coluna a partir do
   conteúdo — um destinatário com razão social longa empurrava a tabela para
   1.400px e nascia a barra de rolagem horizontal, justamente o que mais
   incomodava nesta tela. Fixo, as colunas obedecem às larguras declaradas e
   o texto quebra dentro da célula.
*/
.tabela-dados {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
/* Razão social e cidade sem espaço não podem esticar a coluna. */
.tabela-dados td { overflow-wrap: anywhere; }
.tabela-dados thead th {
    position: sticky; top: 0; z-index: 1;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-700);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}
.tabela-dados tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-800);
    vertical-align: middle;
}
.tabela-dados tbody tr:last-child td { border-bottom: none; }
.tabela-dados tbody tr:hover { background: var(--gray-50); }
.tabela-dados .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-dados .codigo { font-family: var(--font-mono); font-size: var(--font-size-xs); }
.tabela-dados__principal { font-weight: var(--peso-enfase); color: var(--gray-900); }
.tabela-dados__secundario { display: block; font-size: var(--font-size-xs); color: var(--gray-600); }

/* --- Selo de estado ------------------------------------------------------- */

.selo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--neutro   { background: var(--gray-100);     color: var(--gray-700); }
.selo--info     { background: var(--info-light);   color: var(--info-color); }
.selo--sucesso  { background: var(--success-light); color: var(--success-color); }
.selo--atencao  { background: var(--warning-light); color: var(--warning-color); }
.selo--perigo   { background: var(--danger-light);  color: var(--danger-color); }

/* --- Ações da linha ------------------------------------------------------- */

.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.acao-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    font-size: .82rem;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.acao-icone:hover {
    background: var(--marca-laranja-veu);
    border-color: var(--marca-laranja);
    color: var(--gray-900);
    text-decoration: none;
}
.acao-icone[disabled] { opacity: .35; cursor: not-allowed; }
.acao-icone[disabled]:hover { background: var(--gray-100); border-color: transparent; }

/* --- Larguras de coluna, por grade ---------------------------------------
   Com `table-layout: fixed`, quem manda na largura é a PRIMEIRA linha — as
   células do <thead>. Por isso as regras miram o `th`, e não um <colgroup>
   que a marcação não tem.

   As somas dão 100%. Colunas de data e valor ganham o mínimo que comporta o
   formato (dd/mm/aaaa, R$ 000.000,00); o que sobra vai para os campos de
   texto, que são os que precisam de espaço para quebrar. */

#aba-embarques .tabela-dados th:nth-child(1) { width: 13%; }  /* CT-e         */
#aba-embarques .tabela-dados th:nth-child(2) { width: 10%; }  /* NF           */
#aba-embarques .tabela-dados th:nth-child(3) { width: 11%; }  /* Valor        */
#aba-embarques .tabela-dados th:nth-child(4) { width: 9%; }   /* Emissão      */
#aba-embarques .tabela-dados th:nth-child(5) { width: 9%; }   /* Previsão     */
#aba-embarques .tabela-dados th:nth-child(6) { width: 9%; }   /* Entregue em  */
#aba-embarques .tabela-dados th:nth-child(7) { width: 18%; }  /* Destinatário */
#aba-embarques .tabela-dados th:nth-child(8) { width: 12%; }  /* Status       */
#aba-embarques .tabela-dados th:nth-child(9) { width: 9%; }   /* Ações        */

#aba-cotacoes .tabela-dados th:nth-child(1) { width: 15%; }
#aba-cotacoes .tabela-dados th:nth-child(2) { width: 10%; }
#aba-cotacoes .tabela-dados th:nth-child(3) { width: 14%; }
#aba-cotacoes .tabela-dados th:nth-child(4) { width: 14%; }
#aba-cotacoes .tabela-dados th:nth-child(5) { width: 14%; }
#aba-cotacoes .tabela-dados th:nth-child(6) { width: 11%; }
#aba-cotacoes .tabela-dados th:nth-child(7) { width: 12%; }
#aba-cotacoes .tabela-dados th:nth-child(8) { width: 10%; }

#aba-faturas .tabela-dados th:nth-child(1) { width: 24%; }
#aba-faturas .tabela-dados th:nth-child(2) { width: 13%; }
#aba-faturas .tabela-dados th:nth-child(3) { width: 13%; }
#aba-faturas .tabela-dados th:nth-child(4) { width: 16%; }
#aba-faturas .tabela-dados th:nth-child(5) { width: 20%; }
#aba-faturas .tabela-dados th:nth-child(6) { width: 14%; }

/* O cabeçalho não quebra linha; com largura fixa, `nowrap` faria "Entregue
   em" transbordar a célula. */
.tabela-dados thead th { white-space: normal; }

/* Entre 1080px e 1240px o aperto começa a aparecer nas colunas de texto.
   Reduzir o respiro lateral rende mais do que encolher a fonte. */
@media (max-width: 1240px) {
    .tabela-dados thead th,
    .tabela-dados tbody td { padding-left: var(--space-3); padding-right: var(--space-3); }
    .acoes-linha { gap: 4px; }
    .acao-icone { width: 28px; height: 28px; font-size: .75rem; }
}

/* --- Tabela em telas estreitas -------------------------------------------
   O corte subiu de 860px para 1080px. Entre esses dois valores as nove
   colunas de embarques até cabiam, mas espremidas a ponto de "Aguardando
   embarque" quebrar em três linhas — e era ali que a barra de rolagem
   lateral aparecia. Empilhado em cartões, o mesmo dado fica legível. */

@media (max-width: 1080px) {
    .tabela-dados thead { display: none; }
    .tabela-dados, .tabela-dados tbody, .tabela-dados tr, .tabela-dados td { display: block; width: 100%; }
    .tabela-dados tr {
        padding: var(--space-4);
        border-bottom: 1px solid var(--gray-200);
    }
    .tabela-dados tbody td {
        display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
        padding: 5px 0;
        border: none;
        text-align: right;
    }
    .tabela-dados tbody td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        font-size: var(--font-size-xs);
        font-weight: var(--peso-enfase);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--gray-600);
        text-align: left;
    }
    .tabela-dados .num { text-align: right; }
    .acoes-linha { justify-content: flex-end; }
}

/* --- Estado vazio --------------------------------------------------------- */

.sem-dados {
    padding: var(--space-12) var(--space-5);
    text-align: center;
}
.sem-dados i { font-size: 2.2rem; color: var(--gray-400); margin-bottom: var(--space-4); display: block; }
.sem-dados h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.sem-dados p { color: var(--gray-600); font-size: var(--font-size-sm); margin: 0 auto var(--space-5); max-width: 46ch; }

/* --- Esqueleto de carregamento --------------------------------------------
   Um esqueleto com a forma da tabela, e não um "carregando..." centralizado:
   a página não muda de altura quando os dados chegam. */

.esqueleto-linha {
    height: 44px;
    margin: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: esqueleto 1.4s ease-in-out infinite;
}
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .esqueleto-linha { animation: none; }
    .botao[data-ocupado="true"] .botao__texto::after { animation: none; }
}

/* =============================================================================
   9. MODAL
   ============================================================================= */

.modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
    background: rgba(15, 35, 43, .62);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.modal[hidden] { display: none; }

.modal__caixa {
    width: 100%; max-width: 760px;
    max-height: calc(100vh - 2 * var(--space-8));
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: modal-entra .22s var(--ease-out-expo);
}
.modal--estreito .modal__caixa { max-width: 520px; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__caixa { animation: none; } }

.modal__cabecalho {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}
.modal__cabecalho h2 { font-size: var(--font-size-xl); margin: 0; }
.modal__cabecalho p  { font-size: var(--font-size-sm); color: var(--gray-600); margin: var(--space-1) 0 0; }

.modal__fechar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    color: var(--gray-600);
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.modal__fechar:hover { background: var(--gray-200); color: var(--gray-900); }

.modal__corpo { padding: var(--space-6); overflow-y: auto; }
.modal__rodape {
    display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap;
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal__rodape:empty { display: none; }

/* --- Detalhe do embarque: estado em destaque ------------------------------
   A faixa responde "onde está" e "quando chega" antes de qualquer dado
   cadastral. Era o oitavo item de uma lista de dez pares iguais. */

.detalhe-estado {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-4);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
.detalhe-estado__rota {
    display: flex; align-items: center; gap: var(--space-4);
    font-weight: var(--peso-enfase); color: var(--gray-900);
}
.detalhe-estado__rota i { color: var(--marca-laranja); }
.detalhe-estado__rota small,
.detalhe-estado__quando small {
    display: block;
    font-size: var(--font-size-xs); font-weight: var(--peso-normal);
    text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600);
    margin-bottom: 2px;
}
.detalhe-estado__quando {
    text-align: right;
    font-weight: var(--peso-enfase); color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.detalhe-bloco { margin-bottom: var(--space-6); }
.detalhe-bloco .ficha { margin-bottom: 0; }

.detalhe-titulo-secao {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-size-sm);
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-600);
    margin: 0 0 var(--space-3);
}
.detalhe-titulo-secao i { color: var(--marca-laranja); font-size: .9em; }

/* --- Foto de perfil em "Meus dados" --------------------------------------- */

.perfil-foto {
    display: flex; align-items: center; gap: var(--space-5);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}
.perfil-foto .avatar {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
}
.perfil-foto__acoes h3 { margin: 0 0 2px; font-size: var(--font-size-base); }
.perfil-foto__acoes .campo__dica { margin: 0 0 var(--space-3); }
.perfil-foto__botoes { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.perfil-foto__remover { color: var(--danger-color); border-color: var(--danger-color); }
.perfil-foto__remover:hover { background: var(--danger-color); color: #fff; }

/* Enquanto a imagem sobe, o avatar pulsa: sem sinal nenhum, quem escolheu a
   foto num celular lento clica de novo achando que não pegou. */
.avatar--carregando { animation: avatar-pulsa 1s ease-in-out infinite; }
@keyframes avatar-pulsa { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .avatar--carregando { animation: none; opacity: .6; } }

/* --- Escolha do papel na nova cotação --------------------------------------
   Duas opções grandes, e não um <select>: a pergunta é a única coisa entre o
   clique em "Nova cotação" e o formulário, e alvo grande resolve no toque. */

.escolha-papel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
}

.cartao-papel {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5);
    text-align: left;
    font: inherit;
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cartao-papel:hover,
.cartao-papel:focus-visible {
    border-color: var(--cor-marca, var(--gray-900));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.cartao-papel i { font-size: 1.4rem; color: var(--cor-marca, var(--gray-700)); }
.cartao-papel strong { font-size: var(--font-size-lg); }
.cartao-papel span { font-size: var(--font-size-sm); color: var(--gray-600); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
    .cartao-papel:hover, .cartao-papel:focus-visible { transform: none; }
}

/* --- Ficha de dados dentro do modal --------------------------------------- */

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.ficha__item { background: #fff; padding: var(--space-4); }
.ficha__rotulo {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-600);
    margin-bottom: 3px;
}
.ficha__valor { display: block; font-weight: var(--peso-enfase); color: var(--gray-900); }

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

.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-8);
    border-left: 2px solid var(--gray-200);
    margin: 0;
}
.linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo li::before {
    content: '';
    position: absolute; left: -7px; top: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--gray-300);
    border: 2px solid #fff;
}
/* O evento mais recente é o que a pessoa veio ver. */
.linha-tempo li:first-child::before { background: var(--marca-laranja); box-shadow: 0 0 0 4px var(--marca-laranja-veu); }
.linha-tempo li:first-child .linha-tempo__titulo { color: var(--gray-900); }

.linha-tempo__titulo { display: block; font-weight: var(--peso-enfase); color: var(--gray-800); }
.linha-tempo__quando { display: block; font-size: var(--font-size-xs); color: var(--gray-600); margin-top: 2px; font-variant-numeric: tabular-nums; }
.linha-tempo__onde   { display: block; font-size: var(--font-size-sm); color: var(--gray-700); margin-top: 3px; }

/* --- Comprovantes --------------------------------------------------------- */

.comprovantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.comprovante {
    display: block;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--gray-800);
    background: #fff;
}
.comprovante:hover { border-color: var(--marca-laranja); text-decoration: none; }
.comprovante img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gray-100); }
.comprovante span { display: block; padding: var(--space-3); font-size: var(--font-size-xs); }

/* =============================================================================
   10. AJUSTES DE CONTEXTO

   `.capa a` e `.secao--escura a` são regras de contexto (0-2-0) e vencem as
   classes de botão (0-1-0). Sem ancorar, o botão claro sai com texto branco
   sobre fundo branco — o mesmo erro já corrigido na home.
   ============================================================================= */

.capa .botao--claro,
.capa .botao--claro:hover { color: var(--primary-dark); }
.capa .botao--fantasma,
.capa .botao--fantasma:hover { color: #fff; }
.capa .acesso__troca button { color: var(--primary-color); }


/* =============================================================================
   11. CADASTRO — força de senha, requisitos e confirmação
   ============================================================================= */

/* --- Campo de senha com botão de mostrar ---------------------------------- */

.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px; }

/* O olho existe porque a alternativa é a pessoa digitar às cegas uma senha de
   dez caracteres e errar na confirmação sem saber onde. */
.campo-senha__olho {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gray-600);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.campo-senha__olho:hover { color: var(--gray-900); background: var(--gray-100); }

/* --- Medidor de força ------------------------------------------------------ */

.forca { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.forca__trilho {
    flex: 1 1 auto;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.forca__nivel {
    display: block; height: 100%; width: 0;
    border-radius: var(--radius-full);
    transition: width var(--transition-base), background var(--transition-base);
}
.forca__nivel[data-nivel="0"] { width: 8%;   background: var(--danger-color); }
.forca__nivel[data-nivel="1"] { width: 25%;  background: var(--danger-color); }
.forca__nivel[data-nivel="2"] { width: 50%;  background: var(--warning-color); }
.forca__nivel[data-nivel="3"] { width: 75%;  background: var(--marca-laranja-forte); }
.forca__nivel[data-nivel="4"] { width: 100%; background: var(--success-color); }

.forca__rotulo {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    color: var(--gray-700);
    min-width: 8ch;
    text-align: right;
}

/* --- Lista de requisitos ---------------------------------------------------
   A barra sozinha diz "fraca" sem dizer o que fazer. A lista é a instrução:
   cada linha vira verde quando aquele requisito é atendido, ao vivo. */

.requisitos { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.requisitos li {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-bottom: 5px;
    transition: color var(--transition-fast);
}
.requisitos i { font-size: .5rem; margin-top: 6px; color: var(--gray-400); transition: color var(--transition-fast); }
.requisitos strong { color: var(--gray-800); font-weight: var(--peso-enfase); }

.requisitos li.atende { color: var(--success-color); }
.requisitos li.atende strong { color: var(--success-color); }
.requisitos li.atende i { color: var(--success-color); }
.requisitos li.falha { color: var(--danger-color); }
.requisitos li.falha i { color: var(--danger-color); }

/* --- Passos de confirmação ------------------------------------------------- */

.verificacao { list-style: none; padding: 0; margin: 0 0 var(--space-6); counter-reset: passo; }

.verificacao__passo {
    display: flex; gap: var(--space-4);
    padding-bottom: var(--space-6);
    position: relative;
    margin: 0;
}
/* A linha que liga um passo ao outro. */
.verificacao__passo:not(:last-child)::before {
    content: '';
    position: absolute; left: 21px; top: 46px; bottom: 8px;
    width: 2px;
    background: var(--gray-200);
}
.verificacao__passo:last-child { padding-bottom: 0; }

.verificacao__marca {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    color: var(--gray-600);
    background: var(--gray-100);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-full);
    transition: background var(--transition-base), color var(--transition-base),
                border-color var(--transition-base);
}
.verificacao__corpo { flex: 1 1 auto; min-width: 0; }
.verificacao__corpo h2 { font-size: var(--font-size-base); margin-bottom: var(--space-2); }
.verificacao__corpo p  { font-size: var(--font-size-sm); color: var(--gray-700); margin-bottom: var(--space-3); }

/* O passo em que a pessoa está agora. */
.verificacao__passo.ativo .verificacao__marca {
    background: var(--marca-laranja-veu);
    border-color: var(--marca-laranja);
    color: var(--marca-laranja-forte);
}
.verificacao__passo.ativo .verificacao__corpo h2 { color: var(--gray-900); }

/* Concluído: o ícone do canal dá lugar ao confirmado. */
.verificacao__passo.pronto .verificacao__marca {
    background: var(--success-light);
    border-color: var(--success-color);
    color: var(--success-color);
}
.verificacao__passo.pronto .verificacao__marca i::before { content: '\f00c'; }
.verificacao__passo.pronto .verificacao__corpo form,
.verificacao__passo.pronto .verificacao__corpo .botao,
.verificacao__passo.pronto .verificacao__corpo .campo__dica { display: none; }

/* Passo ainda não liberado: visível, mas claramente inerte. */
.verificacao__passo.espera { opacity: .55; }
.verificacao__passo.espera .botao { pointer-events: none; }

/* --- Campo de código de seis dígitos --------------------------------------- */

.campo-codigo {
    font-family: var(--font-mono);
    font-size: 1.6rem !important;
    letter-spacing: .5em;
    text-align: center;
    padding-left: .5em !important;   /* compensa o espaçamento no último dígito */
    max-width: 260px;
}
.campo-codigo::placeholder { letter-spacing: .5em; color: var(--gray-300); }

/* =============================================================================
   12. MOVIMENTO

   O painel inteiro aparecia de uma vez, sem transição nenhuma: trocar de aba
   era um corte seco, e uma tabela refiltrada parecia a mesma tabela. O
   movimento aqui não é enfeite — é o que liga a ação ao resultado dela.

   TODA regra desta seção mora dentro de `prefers-reduced-motion: no-preference`.
   Quem pediu menos movimento ao sistema operacional recebe a tela estática,
   com o conteúdo já no lugar final — e não uma versão degradada.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

    /* --- Linhas da tabela ------------------------------------------------
       Entram em cascata curta. O atraso vai só até a oitava linha: passando
       disso, quem tem 50 registros esperaria a lista inteira "chegar". */

    .tabela-dados tbody tr {
        animation: linha-entra .26s var(--ease-out-expo) backwards;
    }
    .tabela-dados tbody tr:nth-child(1) { animation-delay: 0ms; }
    .tabela-dados tbody tr:nth-child(2) { animation-delay: 22ms; }
    .tabela-dados tbody tr:nth-child(3) { animation-delay: 44ms; }
    .tabela-dados tbody tr:nth-child(4) { animation-delay: 66ms; }
    .tabela-dados tbody tr:nth-child(5) { animation-delay: 88ms; }
    .tabela-dados tbody tr:nth-child(6) { animation-delay: 110ms; }
    .tabela-dados tbody tr:nth-child(7) { animation-delay: 132ms; }
    .tabela-dados tbody tr:nth-child(n+8) { animation-delay: 154ms; }

    @keyframes linha-entra {
        from { opacity: 0; transform: translateY(6px); }
    }

    /* --- Troca de aba ---------------------------------------------------- */

    .painel-aba:not([hidden]) {
        animation: painel-entra .24s var(--ease-out-expo);
    }
    @keyframes painel-entra {
        from { opacity: 0; transform: translateY(8px); }
    }

    /* --- Cartões do painel ------------------------------------------------
       Entram uma vez, no carregamento. Não se repetem a cada filtro: o que
       muda ali é o número, e ele tem a própria contagem em JS. */

    .indicador { animation: cartao-entra .3s var(--ease-out-expo) backwards; }
    .indicador:nth-child(1) { animation-delay: 0ms; }
    .indicador:nth-child(2) { animation-delay: 40ms; }
    .indicador:nth-child(3) { animation-delay: 80ms; }
    .indicador:nth-child(4) { animation-delay: 120ms; }
    .indicador:nth-child(5) { animation-delay: 160ms; }

    @keyframes cartao-entra {
        from { opacity: 0; transform: translateY(10px) scale(.98); }
    }

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

    .linha-tempo li { animation: linha-entra .3s var(--ease-out-expo) backwards; }
    .linha-tempo li:nth-child(2) { animation-delay: 40ms; }
    .linha-tempo li:nth-child(3) { animation-delay: 80ms; }
    .linha-tempo li:nth-child(n+4) { animation-delay: 120ms; }

    /* O ponto da movimentação mais recente pulsa devagar: é o "está aqui
       agora" da carga, e é o que a pessoa procura na lista. */
    .linha-tempo li:first-child::before { animation: ponto-vivo 2.4s ease-in-out infinite; }
    @keyframes ponto-vivo {
        50% { box-shadow: 0 0 0 7px var(--marca-laranja-veu); }
    }

    /* --- Estado vazio ----------------------------------------------------- */

    .sem-dados:not([hidden]) { animation: painel-entra .3s var(--ease-out-expo); }
}

/* Resposta ao toque: existe com ou sem movimento reduzido, porque é
   confirmação de que o clique foi registrado, não decoração. */
.tabela-dados tbody tr { transition: background var(--transition-fast); }
.aba { transition: background var(--transition-fast), color var(--transition-fast),
                   border-color var(--transition-fast); }