/* ELKA NOTAS — visual ELKA (grafite + ciano). Padroes de uso inspirados no Simples CTe.
   Tokens no :root; tema escuro automatico (sistema) ou escolhido (data-tema no <html>). */
:root {
  --cor: #0a94b3;
  --cor-forte: #07748d;
  --cor-clara: #e3f6fa;
  --cor-texto: #fff;
  --grafite: #12171c;
  --grafite-2: #1b2229;
  --grafite-texto: #c9d2da;
  --fundo: #f4f5f7;
  --cartao: #fff;
  --cartao-2: #f9fafb;
  --texto: #1f2328;
  --suave: #6b7280;
  --borda: #e3e6ea;
  --borda-forte: #cfd4da;
  --ok: #15803d;
  --ok-clara: #e4f5e9;
  --erro: #c9341f;
  --erro-clara: #fdece8;
  --aviso: #9a5b00;
  --aviso-clara: #fff3dc;
  --info: #2563a8;
  --info-clara: #e9f2fd;
  --lilas: #6d4bb5;
  --lilas-clara: #efe9fb;
  --neutro-clara: #eef0f3;
  --raio-p: 8px;
  --raio: 16px;
  --sombra: 0 0 6px rgba(0, 0, 0, 0.06);
  --sombra-alta: 0 12px 32px rgba(15, 20, 25, 0.18);
  --f12: 12px;
  --f14: 14px;
  --f16: 16px;
  --f20: 20px;
  --f24: 24px;
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  color-scheme: light;
}
/* Tema escuro: pelo sistema (se a pessoa nao escolheu claro) ou escolhido. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --cor: #2fc3e0; --cor-forte: #6dd8ec; --cor-clara: #0d2f37; --cor-texto: #04191e;
    --grafite: #0b0e11; --grafite-2: #151a20; --grafite-texto: #b9c3cc;
    --fundo: #0e1114; --cartao: #161a1f; --cartao-2: #1b2026; --texto: #e6eaee; --suave: #939ca8;
    --borda: #2a3038; --borda-forte: #3a424c;
    --ok: #4cc27c; --ok-clara: #11301d; --erro: #f0786a; --erro-clara: #3a1c18; --aviso: #e8a94f; --aviso-clara: #352710;
    --info: #78aef0; --info-clara: #13263d; --lilas: #b39cf0; --lilas-clara: #271d3d; --neutro-clara: #232930;
    --sombra: none; --sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-tema='escuro'] {
  --cor: #2fc3e0; --cor-forte: #6dd8ec; --cor-clara: #0d2f37; --cor-texto: #04191e;
  --grafite: #0b0e11; --grafite-2: #151a20; --grafite-texto: #b9c3cc;
  --fundo: #0e1114; --cartao: #161a1f; --cartao-2: #1b2026; --texto: #e6eaee; --suave: #939ca8;
  --borda: #2a3038; --borda-forte: #3a424c;
  --ok: #4cc27c; --ok-clara: #11301d; --erro: #f0786a; --erro-clara: #3a1c18; --aviso: #e8a94f; --aviso-clara: #352710;
  --info: #78aef0; --info-clara: #13263d; --lilas: #b39cf0; --lilas-clara: #271d3d; --neutro-clara: #232930;
  --sombra: none; --sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: var(--f14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cor); }
h1, h2, h3 { margin: 0 0 var(--e3); line-height: 1.2; }
h1 { font-size: var(--f24); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--f20); font-weight: 800; }
h3 { font-size: var(--f16); font-weight: 700; }
.suave { color: var(--suave); }
.pequeno { font-size: var(--f12); }
.forte { font-weight: 700; }
.oculto { display: none !important; }
.so-celular { display: none !important; }
:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }

/* ---------- casca: menu lateral grafite, conteudo claro ---------- */
.casca { display: flex; min-height: 100vh; }
.lateral {
  width: 232px; flex-shrink: 0; background: var(--grafite); color: var(--grafite-texto);
  padding: var(--e4) var(--e3); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca { font-weight: 800; font-size: 17px; padding: var(--e1) 10px var(--e4); display: flex; align-items: center; gap: 10px; color: #fff; white-space: nowrap; letter-spacing: 0.02em; }
.marca svg { width: 28px; height: 28px; color: var(--cor); }
.lateral .grupo { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6f7c88; padding: var(--e3) var(--e3) var(--e1); }
.lateral a, .barra-baixo a {
  display: flex; align-items: center; gap: var(--e3); padding: 9px var(--e3); border-radius: var(--raio-p);
  color: inherit; text-decoration: none; font-weight: 600;
}
.lateral a:hover { background: var(--grafite-2); color: #fff; }
.lateral a.ativo { background: var(--cor); color: var(--cor-texto); }
.lateral .rodape { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--grafite-2); display: grid; gap: 2px; }
.lateral svg { width: 20px; height: 20px; }
.marca { text-decoration: none; }
.lateral a.marca:hover { background: none; }
.selo-marca { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--grafite-2); color: var(--cor); }
.coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conteudo { flex: 1; width: 100%; max-width: 1180px; padding: var(--e5) 28px 90px; }

/* Barra de topo: empresa/ambiente a esquerda; avisos, tema e conta a direita. */
.barra-topo { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: var(--e3); min-height: 60px; padding: var(--e2) 28px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo-esquerda { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e3); }
.topo-direita { display: flex; align-items: center; gap: var(--e2); }
.empresa-topo { min-width: 0; }
.empresa-topo b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-topo span { display: block; font-size: var(--f12); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-celular { display: none; color: var(--cor); }
.marca-celular svg { width: 30px; height: 30px; }
button.conta { gap: var(--e2); padding: 4px 8px 4px 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cor); color: var(--cor-texto); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.nome-conta { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.pendencias { background: var(--aviso-clara); color: var(--aviso); border-color: transparent; }
button.pendencias:hover { filter: brightness(0.97); background: var(--aviso-clara); }
/* Faixa acima do topo (modo suporte, Focus simulado). */
.faixa { display: flex; align-items: center; justify-content: center; gap: var(--e2); flex-wrap: wrap; padding: 7px var(--e4); font-size: 13px; font-weight: 600; text-align: center; background: var(--aviso-clara); color: var(--aviso); }
.faixa.suporte { background: var(--grafite); color: #fff; }
.faixa.suporte a, .faixa.suporte button.link { color: var(--cor); font-weight: 700; }
.faixa svg { width: 16px; height: 16px; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap; }
.topo h1 { margin: 0; }
.barra-baixo { display: none; }

/* Cabecalho de pagina: titulo (e subtitulo) a esquerda, acoes a direita (principal por ultimo). */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap; }
.cabecalho h1 { margin: 0; }
.cabecalho .sub { color: var(--suave); margin-top: var(--e1); }
.cabecalho .acoes-pagina { display: flex; gap: var(--e2); flex-wrap: wrap; }

@media (max-width: 760px) {
  .lateral { display: none; }
  .so-celular { display: revert !important; }
  .so-computador { display: none !important; }
  .conteudo { padding: var(--e4) var(--e4) 96px; }
  h1 { font-size: 21px; }
  .barra-topo { padding: var(--e2) var(--e3); min-height: 56px; gap: var(--e2); }
  .marca-celular { display: inline-flex; }
  .empresa-topo b { font-size: 14px; }
  button.pendencias span:not(.contagem) { display: none; }
  .faixa { padding: 5px var(--e3); font-size: var(--f12); flex-wrap: nowrap; }
  .topo-esquerda .selo { font-size: 11px; padding: 2px 8px; }
  .barra-baixo {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--cartao);
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.08); border-top: 1px solid var(--borda); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .barra-baixo a, .barra-baixo button { flex: 1; flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 2px; color: var(--suave); background: none; min-height: 0; border: 0; font-weight: 600; }
  .barra-baixo a.ativo, .barra-baixo button.ativo { color: var(--cor); }
  .barra-baixo svg { width: 22px; height: 22px; }
}

/* ---------- blocos ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); margin-bottom: var(--e4); }
.cartao > h3:first-child, .cartao > .titulo-cartao:first-child { margin-top: 0; }
.titulo-cartao { display: flex; align-items: center; gap: var(--e2); font-size: var(--f16); font-weight: 800; margin-bottom: var(--e3); }
.titulo-cartao svg { width: 20px; height: 20px; color: var(--cor); }
.grade { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha > .cresce { flex: 1; min-width: 160px; }
.separador { height: 1px; background: var(--borda); margin: var(--e3) 0; }

/* ---------- botoes ---------- */
button, .botao {
  font: inherit; font-size: var(--f14); font-weight: 700; border: 1px solid transparent; border-radius: var(--raio-p); padding: 9px 16px;
  background: var(--cor); color: var(--cor-texto); cursor: pointer; display: inline-flex; align-items: center; gap: var(--e2); justify-content: center;
  text-decoration: none; min-height: 40px; line-height: 1.2; transition: background-color 0.12s, border-color 0.12s, filter 0.12s;
}
button:hover, .botao:hover { filter: brightness(1.06); }
button:active { filter: brightness(0.96); }
button:disabled { opacity: 0.6; cursor: default; filter: none; }
button.secundario, .botao.secundario, button.contorno, .botao.contorno { background: var(--cartao); color: var(--texto); border-color: var(--borda-forte); }
button.secundario:hover, button.contorno:hover, .botao.secundario:hover { filter: none; background: var(--cartao-2); border-color: var(--suave); }
button.perigo, .botao.perigo { background: var(--erro); color: #fff; }
button.perigo-leve { background: var(--erro-clara); color: var(--erro); }
button.fantasma, .botao.fantasma { background: transparent; color: var(--texto); }
button.fantasma:hover { background: var(--neutro-clara); filter: none; }
button.link, .botao.link { background: none; color: var(--cor); padding: 4px 6px; min-height: 0; }
button.so-icone, .botao.so-icone { padding: 0; width: 40px; min-width: 40px; }
button.pequeno, .botao.pequeno { min-height: 32px; padding: 5px 10px; font-size: 13px; }
button.pequeno.so-icone { width: 32px; min-width: 32px; }
button.grande, .botao.grande { min-height: 48px; font-size: var(--f16); padding: 12px 20px; }
.botao svg, button svg { width: 18px; height: 18px; flex-shrink: 0; }
button.grande svg, .botao.grande svg { width: 22px; height: 22px; }
/* Atalho grande (inicio): icone em cima, texto embaixo. */
.botao-card {
  flex-direction: column; min-height: 96px; font-size: var(--f16); border-radius: var(--raio); gap: var(--e2); padding: var(--e4);
}
.botao-card svg { width: 30px; height: 30px; }
.botao-card .sub { font-size: var(--f12); font-weight: 500; opacity: 0.85; }

/* ---------- formularios ---------- */
label { display: flex; flex-direction: column; gap: 6px; font-size: var(--f12); font-weight: 700; color: var(--texto); }
input, select, textarea {
  font: inherit; font-size: var(--f14); font-weight: 400; color: var(--texto); background: var(--cartao); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); padding: 9px 12px; min-height: 40px; width: 100%;
}
input::placeholder, textarea::placeholder { color: #9aa1ab; }
input:hover, select:hover, textarea:hover { border-color: var(--suave); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-clara); }
input:disabled, select:disabled, textarea:disabled { background: var(--neutro-clara); color: var(--suave); }
input[type='search'] { padding-left: 36px; background: var(--cartao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a929c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 17px; }
label.check { flex-direction: row; align-items: center; gap: var(--e2); font-weight: 500; font-size: var(--f14); cursor: pointer; }
label.check input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--cor); }
.form { display: grid; gap: var(--e3) var(--e4); grid-template-columns: repeat(12, 1fr); }
.form > * { grid-column: span 12; }
.form > h3, .form > .secao { margin: var(--e2) 0 0; }
.secao { display: flex; align-items: center; gap: var(--e2); font-size: var(--f14); font-weight: 800; color: var(--texto); padding-top: var(--e2); border-top: 1px solid var(--borda); }
.secao:first-child { border-top: 0; padding-top: 0; }
.secao svg { width: 18px; height: 18px; color: var(--cor); }
@media (min-width: 640px) {
  .c2 { grid-column: span 2 !important; } .c3 { grid-column: span 3 !important; } .c4 { grid-column: span 4 !important; }
  .c5 { grid-column: span 5 !important; } .c6 { grid-column: span 6 !important; } .c7 { grid-column: span 7 !important; } .c8 { grid-column: span 8 !important; }
  .c9 { grid-column: span 9 !important; } .c10 { grid-column: span 10 !important; } .c12 { grid-column: span 12 !important; }
}
.ajuda { font-size: var(--f12); font-weight: 400; color: var(--suave); }
/* Celular: campos com 16px (o iPhone nao da zoom ao tocar). */
@media (max-width: 760px) {
  input, select, textarea { font-size: var(--f16); min-height: 44px; }
  button, .botao { min-height: 44px; }
  button.pequeno, .botao.pequeno { min-height: 36px; }
}

/* ---------- selos (chips de situacao) ---------- */
.selo { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f12); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--neutro-clara); color: var(--texto); white-space: nowrap; line-height: 1.5; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.selo.sem-ponto::before { display: none; }
.selo.ok { background: var(--ok-clara); color: var(--ok); }
.selo.erro { background: var(--erro-clara); color: var(--erro); }
.selo.aviso { background: var(--aviso-clara); color: var(--aviso); }
.selo.info { background: var(--info-clara); color: var(--info); }
.selo.lilas { background: var(--lilas-clara); color: var(--lilas); }
.selo.cor { background: var(--cor-clara); color: var(--cor-forte); }
.selo.neutro { background: var(--neutro-clara); color: var(--suave); }

/* ---------- avisos e caixas informativas ---------- */
/* .aviso so vira caixa quando e o bloco de aviso mesmo (classes de tela como "inicio-bloco aviso" usam .aviso so como cor). */
.aviso:not(.selo):not([class*='-']), .caixa-info { display: flex; gap: var(--e3); align-items: flex-start; border-radius: var(--raio-p); padding: var(--e3) 14px; background: var(--aviso-clara); color: var(--aviso); margin-bottom: var(--e4); border: 1px solid transparent; }
.aviso:not(.selo):not([class*='-']) { display: block; font-weight: 600; }
.caixa-info > span:first-child { flex-shrink: 0; margin-top: 1px; }
.caixa-info > span:first-child svg { width: 20px; height: 20px; }
.caixa-info .corpo { flex: 1; min-width: 0; }
.caixa-info .corpo b { display: block; margin-bottom: 2px; }
.caixa-info .corpo p { margin: 0; }
.caixa-info .acao-caixa { flex-shrink: 0; align-self: center; }
.aviso:not(.selo):not([class*='-']).erro, .caixa-info.erro { background: var(--erro-clara); color: var(--erro); }
.aviso:not(.selo):not([class*='-']).ok, .caixa-info.ok { background: var(--ok-clara); color: var(--ok); }
.aviso:not(.selo):not([class*='-']).info, .caixa-info.info { background: var(--info-clara); color: var(--info); }
.caixa-info { color: var(--texto); }
.caixa-info > span:first-child { color: var(--aviso); }
.caixa-info.erro > span:first-child { color: var(--erro); }
.caixa-info.ok > span:first-child { color: var(--ok); }
.caixa-info.info > span:first-child { color: var(--info); }
.aviso ul, .caixa-info ul { margin: 6px 0 0; padding-left: 20px; }
/* Selo com a classe "aviso" nao herda o bloco de aviso acima. */
.selo.aviso { display: inline-flex; align-items: center; margin: 0; padding: 3px 10px; border-radius: 999px; border: 0; font-weight: 700; }

/* ---------- listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e1); border-bottom: 1px solid var(--borda); cursor: pointer; }
.lista li:hover { background: var(--cartao-2); }
.lista li:last-child { border-bottom: 0; }
.lista .info { flex: 1; min-width: 0; }
.lista .titulo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .valor { font-weight: 800; white-space: nowrap; }
.vazio { text-align: center; color: var(--suave); padding: 30px 10px; }

/* ---------- tabela (computador) / cartoes (celular) ---------- */
.tabela-caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; margin-bottom: var(--e4); }
.tabela-barra { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borda); }
.tabela-barra input[type='search'] { flex: 1; min-width: 200px; }
.tabela-barra .contador { color: var(--suave); font-size: 13px; margin-left: auto; white-space: nowrap; }
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: var(--f12); font-weight: 800; color: var(--suave); padding: 10px var(--e4); border-bottom: 1px solid var(--borda); white-space: nowrap; background: var(--cartao-2); }
.tabela td { padding: 11px var(--e4); border-bottom: 1px solid var(--borda); vertical-align: middle; white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover td { background: var(--cartao-2); }
.tabela .direita { text-align: right; }
.tabela .centro { text-align: center; }
.tabela .estreita { width: 1%; white-space: nowrap; }
.tabela .principal { font-weight: 700; }
.tabela .quebra { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartoes-lista { display: none; list-style: none; margin: 0; padding: 0; }
.cartoes-lista li { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borda); display: grid; grid-template-columns: 1fr auto; gap: 2px var(--e3); align-items: center; }
.cartoes-lista li:last-child { border-bottom: 0; }
.cartoes-lista li.clicavel { cursor: pointer; }
.cartoes-lista li.clicavel:active { background: var(--cartao-2); }
.cartoes-lista .c-titulo { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartoes-lista .c-direita { text-align: right; font-weight: 800; white-space: nowrap; }
.cartoes-lista .c-sub { color: var(--suave); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartoes-lista .c-canto { justify-self: end; display: flex; align-items: center; gap: var(--e1); }
@media (max-width: 760px) {
  .tabela-caixa table.tabela { display: none; }
  .tabela-caixa .cartoes-lista { display: block; }
  .tabela-barra { padding: var(--e3); }
}

/* ---------- estado vazio ---------- */
.estado-vazio { text-align: center; padding: 40px var(--e4); display: flex; flex-direction: column; align-items: center; gap: var(--e2); }
.estado-vazio .icone-vazio { width: 64px; height: 64px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); display: flex; align-items: center; justify-content: center; margin-bottom: var(--e2); }
.estado-vazio .icone-vazio svg { width: 30px; height: 30px; }
.estado-vazio h3 { margin: 0; }
.estado-vazio p { margin: 0; color: var(--suave); max-width: 420px; }
.estado-vazio .linha { justify-content: center; margin-top: var(--e3); }

/* ---------- menu de acoes (3 pontinhos) ---------- */
.menu-acoes { position: fixed; z-index: 70; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 6px; min-width: 220px; max-width: 92vw; }
.menu-acoes button { width: 100%; justify-content: flex-start; background: none; color: var(--texto); font-weight: 600; min-height: 38px; padding: 8px 10px; border-radius: var(--raio-p); }
.menu-acoes button:hover { background: var(--neutro-clara); filter: none; }
.menu-acoes button.perigo { color: var(--erro); background: none; }
.menu-acoes button.perigo:hover { background: var(--erro-clara); }
.menu-acoes button svg { color: var(--suave); }
.menu-acoes button.perigo svg { color: var(--erro); }
.menu-acoes .sep { height: 1px; background: var(--borda); margin: 4px 2px; }
.menu-acoes .titulo-menu { font-size: var(--f12); font-weight: 800; color: var(--suave); padding: 6px 10px 2px; }
@media (max-width: 760px) {
  .menu-acoes { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; max-width: none; border-radius: 20px 20px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .menu-acoes button { min-height: 48px; font-size: var(--f16); }
  .fundo-menu { position: fixed; inset: 0; background: rgba(5, 10, 20, 0.45); z-index: 69; }
}

/* ---------- abas e passos ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: var(--e4); overflow-x: auto; }
.abas button { background: none; color: var(--suave); border-radius: 0; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; white-space: nowrap; }
.abas button:hover { color: var(--texto); filter: none; }
.abas button.ativo { color: var(--cor); border-bottom-color: var(--cor); }
.passos { display: flex; gap: var(--e2); margin-bottom: var(--e4); counter-reset: passo; overflow-x: auto; }
.passos .passo { flex: 1; min-width: 110px; display: flex; align-items: center; gap: var(--e2); font-size: 13px; font-weight: 700; color: var(--suave); padding-bottom: var(--e2); border-bottom: 3px solid var(--borda); }
.passos .passo .num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--neutro-clara); font-size: var(--f12); flex-shrink: 0; }
.passos .passo .num svg { width: 14px; height: 14px; stroke-width: 3; }
.passos .passo.feito { color: var(--texto); border-bottom-color: var(--cor); }
.passos .passo.feito .num { background: var(--cor); color: var(--cor-texto); }
.passos .passo.atual { color: var(--cor); border-bottom-color: var(--cor); }
.passos .passo.atual .num { background: var(--cor-clara); color: var(--cor-forte); }
.passos .passo.clicavel { cursor: pointer; }

/* ---------- carregando ---------- */
.esqueleto { display: grid; gap: 10px; }
.esqueleto span { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--neutro-clara) 25%, var(--cartao-2) 50%, var(--neutro-clara) 75%); background-size: 200% 100%; animation: brilho 1.2s infinite; }
.esqueleto span:nth-child(3n) { width: 70%; }
.esqueleto span:nth-child(3n + 2) { width: 85%; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.girando { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .esqueleto span, .girando { animation: none; } }

/* ---------- janela (modal) ---------- */
.fundo-modal { position: fixed; inset: 0; background: rgba(5, 10, 20, 0.5); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 40px 12px; overflow-y: auto; }
.modal { background: var(--cartao); border-radius: var(--raio); width: 100%; max-width: 640px; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; }
.modal.p { max-width: 440px; }
.modal.g { max-width: 900px; }
.modal-topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e4) var(--e3) 20px; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { margin: 0; flex: 1; font-size: 18px; }
.modal-corpo { padding: var(--e4) 20px; }
.modal .acoes { display: flex; gap: 10px; justify-content: flex-end; padding: var(--e3) 20px var(--e4); flex-wrap: wrap; border-top: 1px solid var(--borda); }
.modal .acoes .esquerda { margin-right: auto; }
@media (max-width: 640px) {
  .fundo-modal { padding: 0; align-items: flex-end; }
  .modal, .modal.p, .modal.g { border-radius: 20px 20px 0 0; max-height: 94vh; max-width: none; overflow-y: auto; }
  .modal .acoes { padding-bottom: calc(16px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: var(--cartao); }
  .modal .acoes > * { flex: 1; }
}

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: var(--e2); align-items: center; width: max-content; max-width: 92vw; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--grafite); color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--sombra-alta); font-weight: 600; pointer-events: auto; animation: subir 0.18s ease-out; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.ok svg { color: #6ee09a; }
.toast.aviso svg { color: #ffc35c; }
.toast.erro { background: #b4301c; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 760px) { .toasts { bottom: 88px; } }

/* ---------- busca de NCM (sugestoes) ---------- */
.sugestoes { border: 1px solid var(--borda); border-radius: var(--raio-p); max-height: 260px; overflow-y: auto; margin-top: 4px; background: var(--cartao); box-shadow: var(--sombra-alta); }
.sugestoes div { padding: 9px 12px; cursor: pointer; font-size: 13px; font-weight: 400; border-bottom: 1px solid var(--borda); }
.sugestoes div:hover { background: var(--cor-clara); }
.sugestoes b { color: var(--cor-forte); }
.sugestoes .titulo-sugestao { cursor: default; background: var(--cartao-2); color: var(--suave); font-size: var(--f12); font-weight: 700; }
.sugestoes .titulo-sugestao:hover { background: var(--cartao-2); }
.sugestoes .tag-parecido { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; background: var(--cor-clara); color: var(--cor-forte); }

/* ---------- login ---------- */
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(1200px 500px at 50% -10%, var(--cor-clara), transparent), var(--fundo); }
.tela-login .cartao { width: 100%; max-width: 380px; padding: 28px; box-shadow: var(--sombra-alta); }
.tela-login .marca { justify-content: center; font-size: 22px; padding-bottom: 6px; color: var(--texto); }
.tela-login form { display: grid; gap: 14px; margin-top: 18px; }

.numero-grande { font-size: 26px; font-weight: 800; }

/* Item do carrinho: no celular o nome ocupa a linha toda e os botoes ficam embaixo. */
.lista li.item-carrinho { cursor: default; flex-wrap: wrap; }
.lista li.item-carrinho:hover { background: none; }
.lista li.item-carrinho .titulo { white-space: normal; }
@media (max-width: 640px) {
  .lista li.item-carrinho .info { flex-basis: 100%; }
  .lista li.item-carrinho .valor { margin-left: auto; }
}

/* ---------- graficos (uma serie, barras finas) e medidor do teto ---------- */
.grafico { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--borda); padding-top: 8px; }
.grafico-coluna { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; outline: none; padding: 0 1px; }
.grafico-barra { width: 100%; max-width: 22px; margin: 0 auto; background: var(--cor); border-radius: 4px 4px 0 0; transition: opacity 0.15s; }
.grafico:hover .grafico-coluna:not(.ativa) .grafico-barra { opacity: 0.45; }
.grafico-coluna:focus-visible .grafico-barra { outline: 2px solid var(--texto); outline-offset: 2px; }
.grafico-eixo { display: flex; justify-content: space-between; font-size: var(--f12); color: var(--suave); margin-top: 4px; }
.grafico-dica { position: absolute; top: -6px; right: 0; background: var(--texto); color: var(--fundo); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 8px; pointer-events: none; z-index: 2; }
.medidor { height: 10px; border-radius: 999px; background: var(--neutro-clara); overflow: hidden; }
.medidor-valor { height: 100%; border-radius: 999px; background: var(--ok); }
.medidor-valor.aviso { background: var(--aviso); }
.medidor-valor.erro { background: var(--erro); }

/* Celular: cartoes de numero e botoes em duas colunas (a tela Inicio fica curta). */
@media (max-width: 640px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grade > .cartao { margin-bottom: 0; padding: 14px; }
  .grade > .botao { padding: 10px; font-size: var(--f14); }
}