/* ===================================================================
   Fluviam — sistema visual

   Perfil de aplicacao: cabecalho fixo + barra lateral + area de
   trabalho, no mesmo formato do Nexo Consig, com tres diferencas
   deliberadas:

   1. ZERO dependencia externa. O Nexo baixa Bootstrap, jQuery,
      DataTables, SweetAlert e Lucide de quatro CDNs diferentes em
      toda tela. Aqui a operacao acontece em porto com internet
      caindo (CLAUDE.md): tudo o que a tela precisa ja esta baixado.
      Este arquivo, o app.js e os SVG inline sao o sistema inteiro.

   2. Texto operacional nunca abaixo de 16px. O Nexo usa .75rem em
      varios lugares; no convés, com sol na tela, isso nao se le.
      Aqui 16px e o piso do que o operador precisa ler; so rotulo
      de apoio, contador e sigla descem — e nunca abaixo de 13px.

   3. Alvo de toque de 48px em tudo que se clica. A tela do porto e
      um celular na mao molhada.

   Paleta operacional de 04-telas.md: fundo branco, texto #111111,
   primaria #124E7A, status cadastrado cinza / embarcado azul /
   chegou ambar / entregue verde / extraviado vermelho.

   Tema escuro e opcional e comeca desligado — a spec pede fundo
   branco, entao o claro e o padrao e o escuro so entra por escolha
   do usuario (ver docs/ESTADO.md). Etiqueta e comprovante ignoram
   o tema: papel e sempre branco.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------- */

:root {
    /* Marca */
    --navy-900: #071B34;
    --navy-800: #0B2D4D;
    --primaria: #124E7A;
    --primaria-clara: #1A6BA6;
    /* Links e fundos de acao precisam de contrastes diferentes no escuro. */
    --acao-fundo: #124E7A;
    --acao-hover: #0B2D4D;
    --acao-texto: #FFFFFF;
    --selecao-fundo: #124E7A;
    --selecao-texto: #FFFFFF;
    --status-texto: #FFFFFF;
    --foco: #2475A9;
    --teal-600: #007A8C;
    --azul-300: #6BB5E7;
    --cinza-100: #D6E2EC;

    /* Superficies */
    --fundo:          #F4F7FA;
    --superficie:     #FFFFFF;
    --superficie-2:   #F7FAFC;
    --superficie-3:   #EDF2F7;
    --topo-fundo:     #FFFFFF;
    --lateral-fundo:  #FFFFFF;

    /* Texto */
    --texto:       #111111;
    --texto-medio: #3D4852;
    --texto-fraco: #5B6874;

    /* Traco */
    --borda:       #DDE5EC;
    --borda-forte: #C3D0DC;

    /* Status */
    --st-cinza:    #6B7280;
    --st-azul:     #1D6FB8;
    --st-ambar:    #B45309;
    --st-verde:    #157F3D;
    --st-vermelho: #C02626;

    /* Fundo suave de cada status — usado em faixa e destaque */
    --st-cinza-suave:    #F1F3F5;
    --st-azul-suave:     #E7F1FA;
    --st-ambar-suave:    #FFF4E5;
    --st-verde-suave:    #E8F6ED;
    --st-vermelho-suave: #FDECEC;

    /* Forma */
    --raio:    12px;
    --raio-sm: 8px;
    --raio-lg: 16px;

    --sombra-1: 0 1px 2px rgba(11, 45, 77, .06), 0 1px 3px rgba(11, 45, 77, .08);
    --sombra-2: 0 2px 4px rgba(11, 45, 77, .05), 0 8px 24px rgba(11, 45, 77, .08);
    --sombra-3: 0 12px 32px rgba(11, 45, 77, .14), 0 2px 8px rgba(11, 45, 77, .08);

    /* Estrutura */
    --h-topo:    72px;
    --l-lateral: 280px;
    --l-lateral-fechada: 76px;
    --largura-max: 1360px;

    --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Nada de animacao longa: a tela e de trabalho, nao de vitrine. */
    --transicao: 140ms cubic-bezier(.4, 0, .2, 1);

    color-scheme: light;
}

/* Tema escuro — so entra com data-tema="escuro" no <html>. */
html[data-tema="escuro"] {
    --fundo:          #0B1520;
    --superficie:     #131F2C;
    --superficie-2:   #182635;
    --superficie-3:   #1E2F41;
    --topo-fundo:     #101A26;
    --lateral-fundo:  #101A26;

    --texto:       #EDF2F7;
    --texto-medio: #C0CCD8;
    --texto-fraco: #94A5B6;

    --borda:       #24374B;
    --borda-forte: #33495F;

    --primaria:       #83C7F2;
    --primaria-clara: #B7E2FC;
    --acao-fundo: #216693;
    --acao-hover: #174E73;
    --selecao-fundo: #216693;
    --status-texto: #071B34;
    --foco: #83C7F2;

    --st-cinza:    #9AA6B2;
    --st-azul:     #4E9EDC;
    --st-ambar:    #D99A3E;
    --st-verde:    #43A868;
    --st-vermelho: #E05C5C;

    --st-cinza-suave:    #1E2A36;
    --st-azul-suave:     #14293C;
    --st-ambar-suave:    #33260F;
    --st-verde-suave:    #122E1E;
    --st-vermelho-suave: #331717;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .3);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, .45);

    color-scheme: dark;
}

/* Azul: area de trabalho clara, navegacao com a cor da marca. */
html[data-tema="azul"] {
    --fundo: #EDF4FB;
    --superficie-2: #F3F8FD;
    --superficie-3: #E3EFF9;
    --borda: #CCDFEE;
    --borda-forte: #A9C5DC;
    --primaria: #115B93;
    --primaria-clara: #0B466F;
    --acao-fundo: #115B93;
    --acao-hover: #0B466F;
    --selecao-fundo: #115B93;
    --topo-fundo: #0B2D4D;
    --lateral-fundo: #0B2D4D;
}

html[data-tema="azul"] :is(.app-topo, .lateral) {
    --texto: #FFFFFF;
    --texto-medio: #E7F1FA;
    --texto-fraco: #C1D7EA;
    --superficie: #0D3458;
    --superficie-2: #143E62;
    --superficie-3: #1B496F;
    --borda: #305473;
    --borda-forte: #547897;
    --primaria: #A3DAFF;
    --primaria-clara: #D1EDFF;
    --selecao-fundo: #19689E;
    --foco: #A3DAFF;
    color-scheme: dark;
}

/* -------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* Os componentes com display:flex tambem respeitam filtros e paineis ocultos. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Login, erro e confirmacao de entrega — sem estrutura de app. */
body.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(18, 78, 122, .10), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(0, 122, 140, .10), transparent 60%),
        var(--fundo);
}

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primaria); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primaria-clara); }

hr { border: 0; border-top: 1px solid var(--borda); margin: 24px 0; }

code, kbd, .mono {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* O foco tem que aparecer: metade da operacao roda no teclado. */
:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: rgba(107, 181, 231, .38); }

/* inline-block com vertical-align resolve os dois casos: dentro de flex
   (botao, item de menu) e no meio de uma frase. */
.ico { flex: 0 0 auto; display: inline-block; vertical-align: -.18em; }

/* Barra de rolagem discreta — a lateral e as tabelas rolam muito. */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------
   3. Estrutura — cabecalho fixo + lateral + area de trabalho
   ------------------------------------------------------------------- */

body.app {
    display: block;
    padding-top: var(--h-topo);
    padding-left: var(--l-lateral);
    transition: padding-left var(--transicao);
}

body.app.lateral-fechada { padding-left: var(--l-lateral-fechada); }

/* --- Cabecalho ---------------------------------------------------- */

.app-topo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: var(--h-topo);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--topo-fundo);
    border-bottom: 1px solid var(--borda);
    box-shadow: 0 1px 2px rgba(11, 45, 77, .04);
}

.topo-esq { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.topo-dir { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }

.marca-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--texto);
    padding: 4px 8px 4px 4px;
    border-radius: var(--raio-sm);
    min-width: 0;
}

.marca-topo:hover { background: var(--superficie-2); }

/* A logo que veio e branca: sobre o cabecalho claro ela sumiria, entao
   fica dentro de uma pastilha navy. Ver docs/ESTADO.md, decisao 8. */
.marca-topo .simbolo {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--navy-800), var(--acao-fundo));
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(11, 45, 77, .28);
}

.marca-topo .simbolo img { width: 24px; height: 24px; object-fit: contain; display: block; }

.marca-topo .nome {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.1;
    min-width: 0;
}

.marca-topo .nome small {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    max-width: 195px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botao redondo do cabecalho (menu, tema, ajuda, sair). */
.botao-topo {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-medio);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.botao-topo:hover { background: var(--superficie-3); color: var(--texto); }
.botao-topo.ativo { background: var(--selecao-fundo); color: var(--selecao-texto); }

/* --- Busca global no cabecalho ------------------------------------ */

/* A queixa era "dificil de encontrar as coisas". A caixa de busca fica
   no cabecalho de TODAS as telas, nao so na T1, e o Ctrl+K cai nela. */
.busca-global {
    position: relative;
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 8px;
    min-width: 150px;
}

.busca-global input[type="search"] {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 96px 0 42px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}

.busca-global input::placeholder { color: var(--texto-fraco); }

.busca-global input:focus {
    outline: none;
    background: var(--superficie);
    border-color: var(--primaria);
    box-shadow: 0 0 0 4px rgba(18, 78, 122, .12);
}

.busca-global .lupa {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-fraco);
    pointer-events: none;
}

.busca-global .atalho {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    pointer-events: none;
}

kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 6px;
    border: 1px solid var(--borda-forte);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--superficie);
    color: var(--texto-fraco);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

/* --- Contexto da viagem no cabecalho ------------------------------ */

/* No Nexo isto e o seletor de loja. Aqui e a viagem ativa, que a spec
   exige fixa em toda tela — so que agora ela e clicavel e troca ali. */
.chip-viagem {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    max-width: 320px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto);
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}

.chip-viagem:hover { border-color: var(--primaria); background: var(--superficie); color: var(--texto); }

.chip-viagem .ponto {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--st-verde);
    box-shadow: 0 0 0 3px var(--st-verde-suave);
}

.chip-viagem .texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.chip-viagem .texto strong {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-viagem .texto small {
    font-size: 16px;
    font-weight: 600;
    color: var(--texto-fraco);
}

.chip-viagem.alerta {
    border-color: var(--st-ambar);
    background: var(--st-ambar-suave);
    color: var(--st-ambar);
}

.chip-viagem.alerta .ponto { background: var(--st-ambar); box-shadow: 0 0 0 3px rgba(180, 83, 9, .18); }
.chip-viagem.alerta .texto small { color: inherit; }

/* --- Usuario ------------------------------------------------------ */

.menu-usuario { position: relative; flex: 0 0 auto; }

.botao-usuario {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 10px 0 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicao);
}

.botao-usuario:hover { background: var(--superficie-3); }

.avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--acao-fundo), #00677A);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.botao-usuario .quem { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Menu suspenso (usuario e acoes) ------------------------------ */

.suspenso {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 70;
    min-width: 262px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra-3);
    animation: surge 120ms ease-out;
}

.suspenso[hidden] { display: none; }

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

.suspenso .cabeca {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--borda);
    margin-bottom: 6px;
}

.suspenso .cabeca strong { display: block; font-size: 16px; }
.suspenso .cabeca small { display: block; font-size: 13px; color: var(--texto-fraco); }

.suspenso a,
.suspenso button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.suspenso a:hover,
.suspenso button:hover { background: var(--superficie-3); color: var(--texto); }
.suspenso a .ico, .suspenso button .ico { color: var(--texto-fraco); }
.suspenso .separador { height: 1px; margin: 6px 4px; background: var(--borda); }
.suspenso .perigo { color: var(--st-vermelho); }
.suspenso .perigo .ico { color: var(--st-vermelho); }

/* Escolha explicita de tema; botoes nativos mantem teclado e toque. */
.menu-tema { position: relative; flex: 0 0 auto; }
.botao-tema {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto);
    font: 600 16px var(--fonte);
    cursor: pointer;
}
.botao-tema:hover, .botao-tema[aria-expanded="true"] { background: var(--superficie-3); }
.tema-painel { min-width: 230px; max-width: calc(100vw - 24px); }
.tema-painel .cabeca { font-weight: 700; }
.tema-painel button { min-height: 48px; }
.tema-painel button[aria-checked="true"] { background: var(--selecao-fundo); color: var(--selecao-texto); font-weight: 700; }
.tema-marca { margin-left: auto; visibility: hidden; }
.tema-painel button[aria-checked="true"] .tema-marca { visibility: visible; }
.tema-amostra { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.tema-amostra.claro { background: #F4F7FA; box-shadow: inset 0 -8px #D6E2EC; }
.tema-amostra.escuro { background: #101A26; box-shadow: inset 0 -8px #33495F; }
.tema-amostra.azul { background: #0B2D4D; box-shadow: inset 0 -8px #6BB5E7; }

/* --- Barra lateral ------------------------------------------------ */

.lateral {
    position: fixed;
    top: var(--h-topo);
    left: 0;
    bottom: 0;
    z-index: 50;
    width: var(--l-lateral);
    display: flex;
    flex-direction: column;
    background: var(--lateral-fundo);
    border-right: 1px solid var(--borda);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: width var(--transicao), transform var(--transicao);
}

body.app.lateral-fechada .lateral { width: var(--l-lateral-fechada); }

.lateral-nav { padding: 12px 10px; flex: 1 1 auto; }

.lateral-grupo {
    padding: 16px 12px 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    white-space: nowrap;
}

.lateral-grupo:first-child { padding-top: 4px; }

.lateral a.item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 10px;
    color: var(--texto-medio);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transicao), color var(--transicao);
}

.lateral a.item .ico { color: var(--texto-fraco); transition: color var(--transicao); }

.lateral a.item:hover {
    background: var(--superficie-3);
    color: var(--texto);
}

.lateral a.item:hover .ico { color: var(--primaria); }

.lateral a.item.ativo {
    background: var(--selecao-fundo);
    color: var(--selecao-texto);
    box-shadow: 0 2px 8px rgba(18, 78, 122, .24);
}

.lateral a.item.ativo .ico { color: inherit; }

.lateral a.item .rotulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; color: inherit; margin: 0; line-height: 1.4; }

/* Contador na lateral: quantas contas a receber, quantos volumes soltos. */
.lateral a.item .contador {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #B52727;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

.lateral a.item.ativo .contador { background: rgba(0, 0, 0, .22); color: inherit; }

/* Rodape da lateral: ajuda e versao. */
.lateral-pe {
    padding: 10px;
    border-top: 1px solid var(--borda);
    flex: 0 0 auto;
}

.lateral-pe .dica-atalho {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--raio-sm);
    background: var(--superficie-2);
    color: var(--texto-fraco);
    font-size: 13px;
    white-space: nowrap;
}

/* Lateral fechada: vira trilho de icones, o rotulo aparece no hover. */
body.app.lateral-fechada .lateral-grupo { height: 25px; padding: 12px 0; font-size: 0; border-bottom: 1px solid var(--borda); margin: 0 10px 8px; }
body.app.lateral-fechada .lateral a.item { justify-content: center; padding: 10px 8px; }
body.app.lateral-fechada .lateral a.item .rotulo,
body.app.lateral-fechada .lateral .dica-atalho span { display: none; }

body.app.lateral-fechada .lateral a.item .contador {
    position: absolute;
    top: 5px;
    right: 8px;
    min-width: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 1.6;
}

.lateral-dica {
    position: fixed;
    z-index: 80;
    padding: 7px 12px;
    border-radius: var(--raio-sm);
    background: var(--navy-900);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sombra-2);
    pointer-events: none;
}
.lateral-dica[hidden] { display: none; }

/* Cortina do menu no celular. */
.cortina {
    position: fixed;
    inset: var(--h-topo) 0 0;
    z-index: 45;
    background: rgba(7, 27, 52, .5);
    backdrop-filter: blur(2px);
    animation: aparece 140ms ease-out;
}

.cortina[hidden] { display: none; }

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

/* --- Area de trabalho --------------------------------------------- */

.conteudo {
    width: 100%;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 22px 24px 96px;
    min-width: 0;
}

.conteudo.estreito { max-width: 780px; }
.conteudo.medio { max-width: 1040px; }

/* Compatibilidade: views antigas ainda usam .container. */
.container {
    width: 100%;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 22px 24px 96px;
}

.container.estreito { max-width: 780px; }

/* -------------------------------------------------------------------
   4. Faixas de contexto (suporte, assinatura, viagem)
   ------------------------------------------------------------------- */

.faixa-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 24px;
    font-size: 16px;
    font-weight: 600;
}

.faixa-aviso .ico { flex: 0 0 auto; }
.faixa-aviso form { margin-left: auto; }
.faixa-aviso.suporte { background: linear-gradient(90deg, #4B2E83, #6A44B5); color: #FFFFFF; }
.faixa-aviso.leitura { background: linear-gradient(90deg, #92400E, #B45309); color: #FFFFFF; }
.faixa-aviso .btn.neutro { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.faixa-aviso .btn.neutro:hover { background: rgba(255, 255, 255, .28); }

/* Faixa antiga da viagem — mantida para telas que ainda a usam. */
.faixa-viagem {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    padding: 10px 24px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    font-size: 16px;
}

.faixa-viagem .sep { color: var(--borda-forte); }
.faixa-viagem .trocar { margin-left: auto; }
.faixa-viagem.sem-viagem { background: var(--st-ambar-suave); border-bottom-color: var(--st-ambar); color: var(--st-ambar); }

/* -------------------------------------------------------------------
   5. Cabecalho de tela
   ------------------------------------------------------------------- */

.pagina-topo {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.pagina-copy { min-width: 0; flex: 1 1 320px; }

.trilha {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
    font-size: 16px;
    color: var(--texto-fraco);
}

.trilha a { color: var(--texto-fraco); text-decoration: none; }
.trilha a:hover { color: var(--primaria); text-decoration: underline; }
.trilha-sep { display: flex; opacity: .55; }
.trilha-atual { font-weight: 600; color: var(--texto-medio); }

.pagina-topo h1 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-size: 27px;
}

.pagina-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--st-azul-suave);
    color: var(--primaria);
}

.pagina-sub { margin: 6px 0 0; font-size: 16px; color: var(--texto-fraco); }

.pagina-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Compatibilidade com as views que ainda montam o cabecalho na mao. */
.cabecalho-pagina {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------------------
   6. Cartoes e secoes
   ------------------------------------------------------------------- */

.card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--sombra-1);
}

.card.destaque { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria), var(--sombra-2); }
.card.plano { box-shadow: none; }
.card.justo { padding: 0; overflow: hidden; }

.card-cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 15px 20px;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie-2);
}

.card-cabeca h2, .card-cabeca h3 { margin: 0; font-size: 17px; }
.card-cabeca .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-corpo { padding: 20px; }
.card-pe { padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--superficie-2); }

.grade { display: grid; gap: 18px; }
.grade.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grade.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.grade > *, .pagina-acoes > * { min-width: 0; }

.muted, .pequeno { color: var(--texto-fraco); }
.pequeno { font-size: 16px; }
.apoio { font-size: 16px; color: var(--texto-fraco); }

/* -------------------------------------------------------------------
   7. Estado vazio
   ------------------------------------------------------------------- */

.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
    color: var(--texto-fraco);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie);
}

/* Classe solta de proposito: serve tambem nas telas de erro e nos
   cartoes de "nada pendente", que nao tem .vazio em volta. */
.ico-vazio {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--superficie-3);
    color: var(--texto-fraco);
}

.vazio p { margin: 0; }
.vazio .negrito { color: var(--texto); font-size: 18px; }
.vazio .btn { margin-top: 14px; }

/* -------------------------------------------------------------------
   8. Botoes
   ------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid var(--acao-fundo);
    border-radius: 10px;
    background: var(--acao-fundo);
    color: var(--acao-texto);
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao),
                box-shadow var(--transicao), transform var(--transicao);
}

.btn:hover { background: var(--acao-hover); border-color: var(--acao-hover); color: var(--acao-texto); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn.secundario { background: var(--superficie); color: var(--primaria); }
.btn.secundario:hover { background: var(--st-azul-suave); color: var(--primaria); }

.btn.neutro { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn.neutro:hover { background: var(--superficie-3); color: var(--texto); border-color: var(--texto-fraco); }

.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-medio); }
.btn.fantasma:hover { background: var(--superficie-3); color: var(--texto); box-shadow: none; }

.btn.perigo { background: #B52727; border-color: #B52727; color: #FFFFFF; }
.btn.perigo:hover { background: #9E1E1E; border-color: #9E1E1E; }

.btn.sucesso { background: #146E37; border-color: #146E37; color: #FFFFFF; }
.btn.sucesso:hover { background: #0E6430; border-color: #0E6430; }

.btn.grande { min-height: 58px; font-size: 19px; padding: 16px 28px; border-radius: 12px; }
.btn.pequeno { min-height: 48px; padding: 10px 14px; font-size: 16px; }
.btn.bloco { width: 100%; }
.btn.so-icone { padding: 12px; width: 48px; }
.btn.so-icone.pequeno { width: 48px; padding: 8px; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Grupo de escolha em botao — se ha conjunto conhecido de opcoes,
   vira botao, nunca <select> (04-telas.md). */
.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolhas input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.escolhas label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid var(--borda-forte);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.escolhas label:hover { background: var(--superficie-3); border-color: var(--texto-fraco); }

.escolhas input[type="radio"]:checked + label,
.escolhas label.selecionado {
    background: var(--selecao-fundo);
    border-color: var(--selecao-fundo);
    color: var(--selecao-texto);
    box-shadow: 0 2px 8px rgba(18, 78, 122, .22);
}

.escolhas input[type="radio"]:focus-visible + label { outline: 3px solid var(--azul-300); outline-offset: 2px; }

/* -------------------------------------------------------------------
   9. Formularios
   ------------------------------------------------------------------- */

.campo { margin-bottom: 18px; }

.campo > label, .rotulo {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: 600;
    color: var(--texto-medio);
}

.campo .dica { display: block; margin-top: 6px; font-size: 16px; color: var(--texto-fraco); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="month"], input[type="file"], select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6874' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

html[data-tema="escuro"] select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A5B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

textarea { min-height: 104px; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--texto-fraco); opacity: .85; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 4px rgba(18, 78, 122, .13);
}

.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--st-vermelho); }
.campo.com-erro input:focus, .campo.com-erro select:focus, .campo.com-erro textarea:focus {
    box-shadow: 0 0 0 4px rgba(192, 38, 38, .15);
}

.erro-campo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--st-vermelho);
}

.linha { display: flex; gap: 16px; flex-wrap: wrap; }
.linha > * { flex: 1 1 220px; min-width: 0; }

.checkbox {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    font-size: 16px;
    cursor: pointer;
}

.checkbox input[type="checkbox"] { width: 22px; height: 22px; flex: none; cursor: pointer; accent-color: var(--primaria); }

/* Campo com icone a esquerda. */
.campo-icone { position: relative; }
.campo-icone .ico { position: absolute; left: 14px; top: 14px; color: var(--texto-fraco); pointer-events: none; }
.campo-icone input { padding-left: 44px; }

fieldset { border: 0; margin: 0 0 8px; padding: 0; }
fieldset legend { padding: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--texto-medio); }

/* -------------------------------------------------------------------
   10. Busca da tela T1
   ------------------------------------------------------------------- */

.busca-linha { display: flex; gap: 10px; align-items: stretch; }

.busca-linha input[type="search"] {
    flex: 1;
    min-height: 58px;
    padding-left: 48px;
    font-size: 19px;
    font-weight: 500;
    border-radius: 12px;
    box-shadow: var(--sombra-1);
}

.busca-linha .btn { flex: none; min-height: 58px; }

.busca-caixa { position: relative; flex: 1; display: flex; }
.busca-caixa > .ico { position: absolute; left: 16px; top: 19px; color: var(--texto-fraco); pointer-events: none; }

.divisor-resultados {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 14px;
    color: var(--texto-fraco);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.divisor-resultados::after { content: ''; flex: 1; height: 1px; background: var(--borda); }

/* -------------------------------------------------------------------
   11. Tabelas — no desktop tabela, no celular cartao
   ------------------------------------------------------------------- */

.tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
}

table.dados {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

table.dados th, table.dados td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

table.dados thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--superficie-2);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    white-space: nowrap;
    border-bottom: 1px solid var(--borda-forte);
}

table.dados tbody tr { transition: background var(--transicao); }
table.dados tbody tr:hover { background: var(--superficie-2); }
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados tbody tr.clicavel { cursor: pointer; }
table.dados td.numerico, table.dados th.numerico { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.dados td.acoes { text-align: right; white-space: nowrap; }

/* Cabecalho ordenavel — o JS cuida do resto. */
table.dados th[data-ordenar] { cursor: pointer; user-select: none; }
table.dados th[data-ordenar]:hover { color: var(--primaria); }

table.dados th[data-ordenar]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .25;
}

table.dados th[data-ordenar][aria-sort="ascending"]::after { border-top: 0; border-bottom: 5px solid currentColor; opacity: 1; }
table.dados th[data-ordenar][aria-sort="descending"]::after { opacity: 1; }

/* Barra da tabela: filtro ao vivo + contagem. */
.tabela-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tabela-barra .filtro { position: relative; flex: 1 1 260px; max-width: 380px; }
.tabela-barra .filtro .ico { position: absolute; left: 13px; top: 14px; color: var(--texto-fraco); pointer-events: none; }
.tabela-barra .filtro input { padding-left: 42px; }
.tabela-barra .contagem { font-size: 16px; color: var(--texto-fraco); white-space: nowrap; }

.lista-cartoes { display: none; flex-direction: column; gap: 12px; }

.cartao-remessa {
    display: block;
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
    box-shadow: var(--sombra-1);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.cartao-remessa:hover { border-color: var(--primaria); box-shadow: var(--sombra-2); color: var(--texto); }
.cartao-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.cartao-linha { font-size: 16px; }
.cartao-linha + .cartao-linha { margin-top: 4px; }

/* -------------------------------------------------------------------
   12. Numero de controle, porao, status
   ------------------------------------------------------------------- */

.numero-controle {
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1;
}

.numero-controle.enorme { font-size: 64px; }

.porao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--navy-900);
    color: #FFFFFF;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
}

html[data-tema="escuro"] .porao { background: var(--superficie-3); border: 1px solid var(--borda-forte); }
.porao.vazio { background: var(--superficie-3); color: var(--texto-fraco); font-weight: 600; border: 1px dashed var(--borda-forte); }

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--status-texto);
}

.status.st-cinza    { background: var(--st-cinza); }
.status.st-azul     { background: var(--st-azul); }
.status.st-ambar    { background: var(--st-ambar); }
.status.st-verde    { background: var(--st-verde); }
.status.st-vermelho { background: var(--st-vermelho); }

/* Versao suave, para quando ha muitos status na mesma tela. */
.status.suave { color: var(--texto); border: 1px solid transparent; }
.status.suave::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.suave.st-cinza    { background: var(--st-cinza-suave);    color: var(--st-cinza); }
.status.suave.st-azul     { background: var(--st-azul-suave);     color: var(--st-azul); }
.status.suave.st-ambar    { background: var(--st-ambar-suave);    color: var(--st-ambar); }
.status.suave.st-verde    { background: var(--st-verde-suave);    color: var(--st-verde); }
.status.suave.st-vermelho { background: var(--st-vermelho-suave); color: var(--st-vermelho); }

.etiqueta-carga {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--st-ambar-suave);
    color: #7A4A08;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

html[data-tema="escuro"] .etiqueta-carga { color: var(--st-ambar); }

/* -------------------------------------------------------------------
   13. Mensagens e avisos
   ------------------------------------------------------------------- */

.mensagens { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }

.mensagem {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 18px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    border-left-width: 5px;
    font-size: 16px;
    font-weight: 500;
}

.mensagem .ico { margin-top: 2px; }
.mensagem.sucesso { background: var(--st-verde-suave);    border-color: var(--st-verde);    color: #0E5A2B; }
.mensagem.erro    { background: var(--st-vermelho-suave); border-color: var(--st-vermelho); color: #8A1B1B; }
.mensagem.aviso   { background: var(--st-ambar-suave);    border-color: var(--st-ambar);    color: #7A4A08; }
.mensagem.info    { background: var(--st-azul-suave);     border-color: var(--st-azul);     color: #10456F; }

html[data-tema="escuro"] .mensagem.sucesso { color: var(--st-verde); }
html[data-tema="escuro"] .mensagem.erro    { color: var(--st-vermelho); }
html[data-tema="escuro"] .mensagem.aviso   { color: var(--st-ambar); }
html[data-tema="escuro"] .mensagem.info    { color: var(--st-azul); }

/* Aviso que nao trava — duplicidade de numero de controle, por exemplo.
   CLAUDE.md: no papel isso acontece, entao avisa e deixa seguir. */
.aviso-inline {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: var(--raio-sm);
    background: var(--st-ambar-suave);
    color: #7A4A08;
    font-size: 16px;
    font-weight: 600;
}

html[data-tema="escuro"] .aviso-inline { color: var(--st-ambar); }
.aviso-inline[hidden] { display: none; }

/* -------------------------------------------------------------------
   14. Numeros do painel
   ------------------------------------------------------------------- */

.cartoes-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.numero-bloco {
    position: relative;
    padding: 18px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
    overflow: hidden;
}

.numero-bloco::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--borda-forte);
}

.numero-bloco.tom-verde::before    { background: var(--st-verde); }
.numero-bloco.tom-vermelho::before { background: var(--st-vermelho); }
.numero-bloco.tom-ambar::before    { background: var(--st-ambar); }
.numero-bloco.tom-azul::before     { background: var(--primaria); }

.numero-bloco .rotulo-numero {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--texto-fraco);
}

.numero-bloco .valor {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.numero-bloco .valor.verde    { color: var(--st-verde); }
.numero-bloco .valor.vermelho { color: var(--st-vermelho); }
.numero-bloco .valor.ambar    { color: var(--st-ambar); }
.numero-bloco .valor.azul     { color: var(--primaria); }
.numero-bloco .apoio-numero { margin-top: 5px; font-size: 16px; color: var(--texto-fraco); }

/* Grafico de barras em CSS puro — sem biblioteca. */
.grafico { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding-top: 12px; }

.grafico .coluna {
    flex: 1;
    min-width: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.grafico .barras { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; }
.grafico .barra { flex: 1; border-radius: 5px 5px 0 0; min-height: 2px; transition: opacity var(--transicao); }
.grafico .barra:hover { opacity: .8; }
.grafico .barra.recebido { background: var(--primaria); }
.grafico .barra.despesa  { background: var(--st-ambar); }

.grafico .rotulo-coluna {
    font-size: 13px;
    color: var(--texto-fraco);
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center;
}

.legenda { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 36px; font-size: 16px; }
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.legenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* -------------------------------------------------------------------
   15. Acoes rapidas do inicio
   ------------------------------------------------------------------- */

/* CLAUDE.md: acao principal nunca atras de menu, aba ou acordeao.
   Por isso o que mais se faz no dia fica em cartao grande no inicio. */
.acoes-rapidas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.acao-rapida {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
    box-shadow: var(--sombra-1);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.acao-rapida:hover {
    border-color: var(--primaria);
    box-shadow: var(--sombra-2);
    transform: translateY(-2px);
    color: var(--texto);
}

.acao-rapida .simbolo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--st-azul-suave);
    color: var(--primaria);
}

.acao-rapida.forte { background: linear-gradient(135deg, var(--acao-fundo), var(--navy-800)); border-color: transparent; color: #FFFFFF; }
.acao-rapida.forte:hover { color: #FFFFFF; }
.acao-rapida.forte .simbolo { background: rgba(255, 255, 255, .18); color: #FFFFFF; }

.acao-rapida strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.acao-rapida small { display: block; font-size: 16px; color: var(--texto-fraco); margin-top: 2px; }
.acao-rapida.forte small { color: #D9ECFA; }

/* -------------------------------------------------------------------
   16. Paleta de comandos (Ctrl+K)
   ------------------------------------------------------------------- */

/* Resposta direta a "esta dificil de encontrar as coisas": Ctrl+K abre
   uma caixa que vai a qualquer tela e a qualquer remessa, de qualquer
   lugar do sistema, sem passar por menu. */
.paleta {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: rgba(7, 27, 52, .52);
    backdrop-filter: blur(3px);
    animation: aparece 120ms ease-out;
}

.paleta[hidden] { display: none; }

.paleta-caixa {
    width: 100%;
    max-width: 620px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-3);
    overflow: hidden;
    animation: surge 140ms ease-out;
}

.paleta-campo { display: flex; align-items: center; gap: 11px; padding: 6px 16px; border-bottom: 1px solid var(--borda); }
.paleta-campo .ico { color: var(--texto-fraco); flex: 0 0 auto; }

.paleta-campo input {
    flex: 1;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 18px;
    box-shadow: none;
}

.paleta-campo input:focus { outline: none; box-shadow: none; }
.paleta-lista { overflow-y: auto; padding: 8px; }
.paleta-grupo { padding: 12px 10px 5px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }

.paleta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.paleta-item .ico { color: var(--texto-fraco); flex: 0 0 auto; }
.paleta-item .texto { flex: 1 1 auto; min-width: 0; }
.paleta-item .texto strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item .texto small { display: block; font-size: 16px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item:hover, .paleta-item.marcado { background: var(--st-azul-suave); }
.paleta-item.marcado .ico { color: var(--primaria); }
.paleta-vazia { padding: 28px 16px; text-align: center; color: var(--texto-fraco); }

.paleta-pe {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    font-size: 13px;
    color: var(--texto-fraco);
}

.paleta-pe span { display: inline-flex; align-items: center; gap: 5px; }

/* -------------------------------------------------------------------
   17. Resultados da busca do cabecalho
   ------------------------------------------------------------------- */

.resultados-topo {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 70;
    max-height: 60vh;
    padding: 8px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra-3);
    overflow-y: auto;
    animation: surge 120ms ease-out;
}

.resultados-topo[hidden] { display: none; }

/* -------------------------------------------------------------------
   18. Avisos flutuantes
   ------------------------------------------------------------------- */

.avisos {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(400px, calc(100vw - 40px));
}

.aviso-flutuante {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-left: 5px solid var(--primaria);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    font-size: 16px;
    box-shadow: var(--sombra-3);
    animation: entra-lado 180ms ease-out;
}

.aviso-flutuante.sucesso { border-left-color: var(--st-verde); }
.aviso-flutuante.erro    { border-left-color: var(--st-vermelho); }
.aviso-flutuante.aviso   { border-left-color: var(--st-ambar); }
.aviso-flutuante.saindo  { animation: sai-lado 160ms ease-in forwards; }

.aviso-flutuante button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
    font-size: 24px;
    line-height: 1;
}

@keyframes entra-lado { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes sai-lado   { to { opacity: 0; transform: translateX(24px); } }

/* -------------------------------------------------------------------
   19. Itens repetiveis
   ------------------------------------------------------------------- */

.repetivel { display: flex; flex-direction: column; gap: 12px; }

.repetivel .linha-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie-2);
    flex-wrap: wrap;
}

.repetivel .linha-item .cresce { flex: 1 1 240px; min-width: 0; }
.repetivel .linha-item .estreito { flex: 0 0 110px; }
.repetivel .linha-item .campo { margin-bottom: 0; }

.repetivel .remover {
    display: inline-grid;
    place-items: center;
    min-height: 48px;
    min-width: 48px;
    padding: 0 14px;
    border: 1px solid var(--borda-forte);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--st-vermelho);
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}

.repetivel .remover:hover { background: var(--st-vermelho-suave); border-color: var(--st-vermelho); }

.arrastar {
    display: grid;
    place-items: center;
    min-height: 48px;
    cursor: grab;
    padding: 0 6px;
    color: var(--texto-fraco);
    user-select: none;
}

.repetivel .linha-item.arrastando { opacity: .4; }

/* -------------------------------------------------------------------
   20. Leitor de QR (T2)
   ------------------------------------------------------------------- */

.leitor-area {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background: #000000;
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-2);
}

.leitor-area video { width: 100%; height: 100%; object-fit: cover; display: block; }

.mira {
    position: absolute;
    inset: 18%;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .38);
    pointer-events: none;
}

.contador-leitura { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------
   21. Confirmacao de entrega em tela cheia (T6)
   ------------------------------------------------------------------- */

.tela-sucesso {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 20px;
    background: linear-gradient(160deg, #157F3D, #146E37 55%, #0E6430);
    color: #FFFFFF;
    text-align: center;
}

.tela-sucesso .numero-controle { font-size: clamp(72px, 22vw, 140px); }
.tela-sucesso .quem { font-size: 28px; font-weight: 700; }
.tela-sucesso .btn { background: #FFFFFF; color: #146E37; border-color: #FFFFFF; }
.tela-sucesso .btn:hover { background: #E8F6ED; border-color: #E8F6ED; color: #146E37; }

/* -------------------------------------------------------------------
   22. Login
   ------------------------------------------------------------------- */

.caixa-login {
    width: 100%;
    max-width: 424px;
    padding: 34px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-3);
    overflow: hidden;
}

/* A logo horizontal e branca — sobre o cartao branco ela sumiria, entao a
   faixa navy sangra ate a borda do cartao. Ver docs/ESTADO.md, decisao 8. */
.caixa-login .marca {
    display: block;
    width: calc(100% + 68px);
    height: 92px;
    margin: -34px -34px 26px;
    padding: 22px 26px;
    background: linear-gradient(135deg, var(--navy-900), var(--primaria));
    object-fit: contain;
}

.caixa-login h1 { font-size: 22px; text-align: center; margin-bottom: 4px; }
.caixa-login .sub-login { text-align: center; color: var(--texto-fraco); font-size: 16px; margin-bottom: 24px; }
.caixa-login .pe-login { margin-top: 20px; text-align: center; font-size: 16px; color: var(--texto-fraco); }

/* -------------------------------------------------------------------
   23. Impressao
   ------------------------------------------------------------------- */

.barra-impressao {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--navy-900);
    color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra-impressao .btn.neutro { background: #FFFFFF; color: #111111; border-color: #FFFFFF; }
.barra-impressao .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.barra-impressao label { font-size: 16px; font-weight: 600; }
.barra-impressao select, .barra-impressao input { min-height: 44px; width: auto; color: #111111; background: #FFFFFF; }

.area-papel { padding: 24px 20px 64px; background: #E9EEF3; }

/* Papel e sempre branco com tinta preta, independente do tema da tela. */
.papel {
    background: #FFFFFF;
    margin: 0 auto 20px;
    padding: 4mm 3mm;
    box-shadow: var(--sombra-2);
    color: #000000;
    font-family: var(--fonte);
}

@media print {
    html[data-tema] {
        --fundo: #FFFFFF;
        --superficie: #FFFFFF;
        --superficie-2: #F7FAFC;
        --superficie-3: #EDF2F7;
        --texto: #000000;
        --texto-medio: #222222;
        --texto-fraco: #444444;
        --borda: #CCCCCC;
        --borda-forte: #999999;
        --primaria: #124E7A;
        --primaria-clara: #124E7A;
        --st-cinza: #4B5563;
        --st-azul: #1D6FB8;
        --st-ambar: #B45309;
        --st-verde: #157F3D;
        --st-vermelho: #C02626;
        --st-cinza-suave: #F1F3F5;
        --st-azul-suave: #E7F1FA;
        --st-ambar-suave: #FFF4E5;
        --st-verde-suave: #E8F6ED;
        --st-vermelho-suave: #FDECEC;
        --status-texto: #FFFFFF;
        color-scheme: light;
    }
    .barra-impressao, .nao-imprimir, .app-topo, .lateral, .lateral-dica, .cortina, .avisos, .paleta, .pular-para { display: none !important; }
    body.app { padding: 0 !important; }
    .area-papel { padding: 0; background: #FFFFFF; }
    .papel { box-shadow: none; margin: 0; padding: 2mm 1mm; break-inside: avoid; }
    .papel + .papel { break-before: page; }
    body { background: #FFFFFF; color: #000000; }
}

/* -------------------------------------------------------------------
   24. Utilitarios
   ------------------------------------------------------------------- */

.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex.entre { justify-content: space-between; }
.flex.fim { justify-content: flex-end; }
.flex.topo { align-items: flex-start; }
.flex.coluna { flex-direction: column; align-items: stretch; }
.empurra { margin-left: auto; }
.sem-margem { margin: 0; }
.topo-8  { margin-top: 8px; }
.topo-16 { margin-top: 16px; }
.topo-24 { margin-top: 24px; }
.topo-32 { margin-top: 32px; }
.negrito { font-weight: 700; }
.quebra { word-break: break-word; }
.nums { font-variant-numeric: tabular-nums; }
.centro { text-align: center; }
.direita { text-align: right; }

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Pula para o conteudo — primeiro item do Tab. */
.pular-para {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 400;
    padding: 12px 18px;
    border-radius: var(--raio-sm);
    background: var(--acao-fundo);
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    transition: top var(--transicao);
}

.pular-para:focus { top: 12px; color: #FFFFFF; }

/* -------------------------------------------------------------------
   25. Telas estreitas
   ------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .busca-global { max-width: none; }
    .chip-viagem .texto small { display: none; }
    .botao-usuario .quem { display: none; }
    .marca-topo .nome { max-width: 140px; }
    .chip-viagem { max-width: 200px; }
}

@media (max-width: 960px) {
    body.app, body.app.lateral-fechada { padding-left: 0; }

    /* No celular a lateral e gaveta: sai da frente e volta pelo botao. */
    .lateral {
        width: min(300px, 84vw);
        transform: translateX(-100%);
        box-shadow: var(--sombra-3);
    }

    body.app.lateral-aberta .lateral { transform: none; }
    body.app.lateral-fechada .lateral { width: min(300px, 84vw); }
    body.app.lateral-fechada .lateral a.item { justify-content: flex-start; padding: 10px 12px; }
    body.app.lateral-fechada .lateral a.item .rotulo,
    body.app.lateral-fechada .lateral .dica-atalho span { display: inline; }
    body.app.lateral-fechada .lateral-grupo { height: auto; padding: 16px 12px 6px; font-size: 13px; border: 0; margin: 0; }
    body.app.lateral-fechada .lateral a.item .contador { position: static; padding: 1px 7px; font-size: 12px; }

    .conteudo, .container { padding: 16px 16px 96px; }
    .app-topo { padding: 0 10px; gap: 8px; }
    .marca-topo .nome { display: none; }
    .lateral-pe { display: none; }
}

@media (max-width: 760px) {
    /* So troca por cartoes quando a view oferece essa representacao. */
    .tabela-wrap:has(+ .lista-cartoes) { display: none; }
    .lista-cartoes { display: flex; }

    .pagina-topo { align-items: flex-start; }
    .pagina-topo h1 { font-size: 23px; }
    .pagina-acoes, .cabecalho-pagina .acoes { width: 100%; margin-left: 0; }
    .pagina-acoes .btn, .cabecalho-pagina .acoes .btn { flex: 1 1 160px; }

    /* No celular a busca do cabecalho vira botao — a T1 ja tem a caixa
       grande, e o Ctrl+K nao existe sem teclado. */
    .busca-global { display: none; }
    .busca-global.aberta {
        display: block;
        position: absolute;
        left: 8px;
        right: 8px;
        top: 9px;
        max-width: none;
        margin: 0;
        z-index: 5;
    }

    .busca-global.aberta input { background: var(--superficie); }
    .busca-global .atalho { display: none; }
    .chip-viagem .texto small { display: none; }
    .chip-viagem { max-width: 190px; }
    .botao-usuario .quem { display: none; }
    .numero-controle { font-size: 26px; }
    .cartoes-numeros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .numero-bloco .valor { font-size: 25px; }
    .paleta { padding: 8vh 10px 10px; }
    .avisos { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

@media (max-width: 460px) {
    .conteudo, .container { padding: 14px 12px 96px; }
    .card { padding: 16px; }
    .btn { padding: 12px 16px; }
    .app-topo { gap: 4px; padding: 0 8px; }
    .topo-esq { gap: 2px; }
    .topo-dir { gap: 3px; }
    .marca-topo { padding: 4px; }
    .botao-tema { padding: 8px 10px; }
    .botao-usuario { padding-right: 4px; gap: 4px; }
    .botao-usuario > .ico { display: none; }
}

@media (max-width: 620px) {
    html:has(.chip-viagem) { --h-topo: 132px; }
    .app-topo:has(.chip-viagem) { align-items: flex-start; padding-top: 12px; }
    .chip-viagem { position: absolute; top: 72px; left: 12px; right: 12px; max-width: none; min-height: 48px; border-radius: 12px; }
    .chip-viagem .texto small { display: block; }
}

@media print {
    /* Regras de tela pequena nao podem esconder linhas na impressao. */
    .tabela-wrap { display: block !important; overflow: visible; }
    .lista-cartoes { display: none !important; }
    body.app { padding-top: 0 !important; }
}