/* ==========================================================================
   SISTEMA DE GESTÃO EMPRESARIAL
   Folha de estilo única, escrita mobile-first.

   LINGUAGEM VISUAL
   ----------------
   Claro, arredondado e arejado. Cartões com raio grande e sombra difusa,
   controles em pílula, e estado comunicado por bloco de fundo colorido suave
   em vez de linha fina.

   Verde como acento. Faz sentido além do gosto: o momento mais importante do
   sistema é o imposto zerar, e verde é a cor desse acerto. O acento e o "deu
   certo" falam a mesma língua.

   Densidade ainda importa — são tabelas financeiras — mas o respiro entre os
   blocos vem antes da quantidade de linhas visíveis.

   Organização:
     1. Tokens e reset
     2. Ícones
     3. Estrutura (menu, topo, conteúdo)
     4. Faixa de imposto
     5. Componentes
     6. Formulários
     7. Tabelas
     8. Grade de itens
     9. Etapas do pedido
    10. Apuração fiscal
    11. Modal e sobreposições
    12. Impressão
   ========================================================================== */

/* ==========================================================================
   1. TOKENS E RESET
   ========================================================================== */

:root {
  /* --- Neutros ---
     Cinza quase puro com um resto de verde, para conversar com o acento sem
     puxar para o azul corporativo. */
  --fundo:            oklch(96.3%  0.004 165);
  --superficie:       oklch(99.7%  0.001 165);
  --superficie-2:     oklch(98%    0.004 165);
  --superficie-3:     oklch(96%    0.005 165);
  --borda:            oklch(93.5%  0.005 165);
  --borda-suave:      oklch(95.8%  0.004 165);
  --borda-forte:      oklch(88.5%  0.008 165);

  --texto:            oklch(26%    0.014 165);
  --texto-medio:      oklch(47%    0.012 165);
  --texto-suave:      oklch(61%    0.010 165);
  --texto-fraco:      oklch(73%    0.008 165);

  /* --- Acento --- */
  --primaria:         oklch(60%    0.142 158);
  --primaria-escura:  oklch(53%    0.142 158);
  --primaria-clara:   oklch(95.6%  0.042 158);
  --primaria-media:   oklch(88%    0.085 158);
  --primaria-vivida:  oklch(84%    0.135 160);

  /* --- Menu lateral: claro, para não brigar com o resto --- */
  --menu-fundo:       oklch(99%    0.002 165);
  --menu-texto:       var(--texto-medio);
  --menu-ativo:       var(--primaria-clara);

  /* --- Semáforo ---
     Cada situação tem traço, fundo do bloco, borda e fundo da linha. */
  --vermelho:         oklch(58%    0.185  27);
  --vermelho-texto:   oklch(48%    0.160  27);
  --vermelho-fundo:   oklch(96.5%  0.028  27);
  --vermelho-borda:   oklch(88%    0.070  27);
  --vermelho-linha:   oklch(98%    0.014  27);

  --laranja:          oklch(67%    0.160  55);
  --laranja-texto:    oklch(53%    0.135  50);
  --laranja-fundo:    oklch(96.5%  0.038  62);
  --laranja-borda:    oklch(89%    0.075  62);
  --laranja-linha:    oklch(98.2%  0.018  62);

  --amarelo:          oklch(76%    0.135  85);
  --amarelo-texto:    oklch(52%    0.105  75);
  --amarelo-fundo:    oklch(97%    0.045  90);
  --amarelo-borda:    oklch(90%    0.085  90);

  --verde:            oklch(60%    0.142 158);
  --verde-texto:      oklch(48%    0.125 158);
  --verde-fundo:      oklch(95.6%  0.042 158);
  --verde-borda:      oklch(86%    0.090 158);

  --azul:             oklch(58%    0.150 250);
  --azul-texto:       oklch(48%    0.140 250);
  --azul-fundo:       oklch(96%    0.032 250);
  --azul-borda:       oklch(87%    0.070 250);

  --roxo:             oklch(56%    0.170 300);
  --roxo-texto:       oklch(47%    0.155 300);
  --roxo-fundo:       oklch(96%    0.032 300);

  --cinza:            oklch(61%    0.010 165);
  --cinza-texto:      oklch(47%    0.012 165);
  --cinza-fundo:      oklch(96%    0.005 165);

  /* --- Raios ---
     Generosos de propósito. É o que mais separa "planilha" de "aplicativo". */
  --raio-xs:           9px;
  --raio-p:           12px;
  --raio:             18px;
  --raio-g:           24px;
  --raio-pill:       999px;

  /* --- Elevação ---
     Sombra difusa e clara: o cartão flutua, mas não pesa. */
  --sombra:           0 1px 2px oklch(26% 0.014 165 / .035),
                      0 4px 12px -3px oklch(26% 0.014 165 / .07);
  --sombra-m:         0 2px 6px -2px oklch(26% 0.014 165 / .05),
                      0 12px 28px -8px oklch(26% 0.014 165 / .12);
  --sombra-g:         0 8px 20px -8px oklch(26% 0.014 165 / .10),
                      0 32px 64px -20px oklch(26% 0.014 165 / .22);
  --foco:             0 0 0 4px oklch(60% 0.142 158 / .18);

  --menu-largura:     248px;
  --topo-altura:      62px;

  --fonte: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
           Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-numero: 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  --curva:       cubic-bezier(0.22, 1, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido:      .16s;
  --medio:       .26s;
  --lento:       .45s;
}

/* ==========================================================================
   FONTE

   Plus Jakarta Sans, variável 400–800, servida do próprio servidor. Não vem
   de CDN: o sistema precisa funcionar sem internet, inclusive na VPS.

   A escolha é geométrica com terminações suaves — conversa com os cantos
   arredondados da interface — e tem números tabulares decentes, que é o que
   faz as colunas de dinheiro baterem.
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/estatico/fontes/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/estatico/fontes/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.014em; }
h1 { font-size: 23px; letter-spacing: -0.022em; }
h2 { font-size: 18px; }
h3 { font-size: 15.5px; }
h4 { font-size: 13.5px; }

a { color: var(--primaria-escura); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--primaria-media); }

.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: var(--fonte-numero); font-size: .92em; letter-spacing: -0.02em; }

.negrito   { font-weight: 600; }
.suave     { color: var(--texto-suave); }
.fraco     { color: var(--texto-fraco); }
.pequeno   { font-size: 12.5px; }
.menor     { font-size: 11.5px; }
.centro    { text-align: center; }
.direita   { text-align: right; }
.maiuscula { text-transform: uppercase; letter-spacing: .06em; }
.nowrap    { white-space: nowrap; }
.oculto    { display: none !important; }

.t-vermelho { color: var(--vermelho-texto); }
.t-verde    { color: var(--verde-texto); }
.t-laranja  { color: var(--laranja-texto); }
.t-azul     { color: var(--azul-texto); }
.t-suave    { color: var(--texto-suave); }

/* Rótulo miúdo em maiúsculas, usado em cima de todo número importante */
.rotulo-micro {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .075em;
  color: var(--texto-suave);
}

/* ==========================================================================
   2. ÍCONES

   Todo ícone de lib/icones.js recebe a classe `ico`, com tamanho relativo ao
   texto ao redor. Sem ela, um SVG sem width/height assume 100% do container.
   ========================================================================== */

.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
}
.ico-g { width: 1.4em; height: 1.4em; }

/* Ícone dentro de um quadradinho arredondado — usado em listas e cabeçalhos */
.ico-chip {
  width: 38px; height: 38px;
  border-radius: var(--raio-p);
  display: grid; place-items: center;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  flex-shrink: 0;
}
.ico-chip .ico { width: 17px; height: 17px; vertical-align: 0; }
.ico-chip.verde { background: var(--verde-fundo); border-color: var(--verde-borda); color: var(--verde-texto); }
.ico-chip.azul  { background: var(--azul-fundo);  border-color: var(--azul-borda);  color: var(--azul-texto); }

/* ==========================================================================
   3. ESTRUTURA
   ========================================================================== */

.app { min-height: 100vh; }

/* --- Menu lateral --- */

.menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--menu-largura);
  background: var(--menu-fundo);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(-100%);
  transition: transform .3s var(--curva);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.aberto { transform: translateX(0); }

.menu-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
}
.menu-marca-icone {
  width: 38px; height: 38px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--primaria-vivida), var(--primaria));
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px oklch(60% 0.142 158 / .45);
}
.menu-marca-texto { font-size: 14px; font-weight: 650; line-height: 1.25; color: var(--texto); }
.menu-marca-texto span {
  display: block; font-size: 11.5px; font-weight: 400;
  color: var(--texto-fraco); margin-top: 2px;
}

.menu-lista { padding: 6px 12px 20px; }
.menu-grupo {
  padding: 16px 12px 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .095em;
  color: var(--texto-fraco);
}
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px;
  border-radius: var(--raio-p);
  color: var(--menu-texto);
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 3px;
  transition: background .16s, color .16s;
}
.menu-item:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.menu-item.ativo {
  background: var(--menu-ativo);
  color: var(--primaria-escura);
  font-weight: 600;
}
.menu-item.ativo .menu-icone { color: var(--primaria); }
.menu-icone { width: 18px; height: 18px; vertical-align: 0; }
.menu-item-contador {
  margin-left: auto;
  background: var(--vermelho-fundo); color: var(--vermelho-texto);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--raio-pill);
}

.menu-rodape {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  color: var(--texto-fraco);
}

.menu-fundo-escuro {
  position: fixed; inset: 0;
  background: oklch(26% 0.014 165 / .35);
  backdrop-filter: blur(3px);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--curva);
}
.menu-fundo-escuro.visivel { opacity: 1; pointer-events: auto; }

/* --- Barra superior --- */

/* Fundo sólido: com fundo translúcido o título da página rolava por baixo e
   aparecia cortado ao meio atrás da barra. */
.topo {
  position: sticky; top: 0;
  height: var(--topo-altura);
  background: var(--fundo);
  border-bottom: 1px solid transparent;
  display: flex; align-items: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 40;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
/* A separação só aparece quando há conteúdo rolado por baixo */
.topo.rolado {
  border-bottom-color: var(--borda);
  box-shadow: 0 4px 16px -8px oklch(26% 0.014 165 / .18);
}
.topo-botao-menu {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: var(--raio-p);
  cursor: pointer;
  color: var(--texto-medio);
  flex-shrink: 0;
  font-size: 15px;
  box-shadow: var(--sombra);
  transition: background .16s, border-color .16s;
}
.topo-botao-menu:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
.topo-titulo {
  font-size: 15px; font-weight: 600; flex: 1; min-width: 0;
  letter-spacing: -0.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* --- Conteúdo --- */

.conteudo { padding: 8px 16px; padding-bottom: 88px; }

.pagina-cabecalho {
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin: 6px 0 20px;
}
.pagina-titulo h1 { font-size: 22px; }
.pagina-titulo p {
  margin: 6px 0 0; color: var(--texto-suave); font-size: 13.5px;
  max-width: 70ch; line-height: 1.55;
}
.pagina-acoes { display: flex; flex-wrap: wrap; gap: 9px; }

/* --- Navegação inferior (celular) --- */

.nav-inferior {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: oklch(99.7% 0.001 165 / .93);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--borda);
  display: flex;
  z-index: 50;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
}
.nav-inferior a {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 2px;
  border-radius: var(--raio-p);
  color: var(--texto-suave);
  font-size: 10.5px; font-weight: 500;
  text-decoration: none;
  min-height: 54px;
  transition: background .16s, color .16s;
}
.nav-inferior a.ativo { color: var(--primaria-escura); background: var(--primaria-clara); font-weight: 600; }
.nav-inferior .ico { width: 20px; height: 20px; vertical-align: 0; }

@media (min-width: 1024px) {
  .menu { transform: translateX(0); }
  .topo-botao-menu, .nav-inferior, .menu-fundo-escuro { display: none !important; }
  .app { padding-left: var(--menu-largura); }
  .conteudo { padding: 10px 30px 56px; }
  .topo { padding: 0 30px; }
}

/* ==========================================================================
   4. FAIXA DE IMPOSTO DO MÊS

   Sem dashboard, é aqui que o usuário vê de qualquer tela quanto de imposto
   está correndo e quanto falta em nota de entrada para zerar.
   ========================================================================== */

.faixa-imposto {
  margin: 0 16px 6px;
  padding: 11px 15px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 14px;
  font-size: 12.5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.faixa-imposto::-webkit-scrollbar { display: none; }
.faixa-imposto.recolhida { display: none; }

.faixa-rotulo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; white-space: nowrap;
  color: var(--texto);
}
.faixa-rotulo .ico { color: var(--primaria); }
.faixa-itens { display: flex; gap: 8px; flex: 1; }
.faixa-empresa {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 11px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  white-space: nowrap;
  color: var(--texto-medio);
  transition: background .16s, border-color .16s;
}
.faixa-empresa::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor-empresa, var(--cinza)); flex-shrink: 0;
}
.faixa-empresa:hover {
  background: var(--superficie); border-color: var(--borda-forte);
  text-decoration: none; color: var(--texto);
}
.faixa-empresa-nome { font-weight: 500; }
.faixa-empresa-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.faixa-empresa.zerado  { background: var(--verde-fundo);    border-color: var(--verde-borda); }
.faixa-empresa.zerado  .faixa-empresa-valor { color: var(--verde-texto); }
.faixa-empresa.atencao { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); }
.faixa-empresa.atencao .faixa-empresa-valor { color: var(--vermelho-texto); }
.faixa-empresa.proximo { background: var(--amarelo-fundo);  border-color: var(--amarelo-borda); }
.faixa-empresa.proximo .faixa-empresa-valor { color: var(--amarelo-texto); }
.faixa-empresa.fixo    .faixa-empresa-valor { color: var(--texto); }
.faixa-acao {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  white-space: nowrap; flex-shrink: 0;
}
.faixa-acao a { color: var(--primaria-escura); font-weight: 600; }
.faixa-fechar {
  background: none; border: none; color: var(--texto-fraco);
  cursor: pointer; padding: 3px 5px; line-height: 1; font-size: 16px;
  border-radius: var(--raio-xs);
}
.faixa-fechar:hover { color: var(--texto); background: var(--superficie-3); }

@media (min-width: 1024px) { .faixa-imposto { margin: 0 30px 8px; } }

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- Botões: pílula, como nas telas de referência --- */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit; font-size: 13.5px; font-weight: 550;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px oklch(26% 0.014 165 / .05);
  transition: background .16s, border-color .16s, box-shadow .16s, transform .08s;
  text-decoration: none;
}
.botao:hover {
  background: var(--superficie-2); border-color: var(--borda-forte);
  box-shadow: var(--sombra); text-decoration: none;
}
.botao:active { transform: translateY(1px); box-shadow: none; }
.botao:focus-visible { outline: none; box-shadow: var(--foco); }
.botao:disabled, .botao.desabilitado {
  opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.botao .ico { width: 15px; height: 15px; vertical-align: 0; }

.botao-primario {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
  box-shadow: 0 2px 6px -1px oklch(53% 0.142 158 / .35);
}
.botao-primario:hover {
  background: var(--primaria-escura); border-color: var(--primaria-escura);
  box-shadow: 0 4px 12px -2px oklch(53% 0.142 158 / .42);
}

.botao-perigo {
  background: var(--vermelho-fundo); border-color: var(--vermelho-borda);
  color: var(--vermelho-texto); box-shadow: none;
}
.botao-perigo:hover {
  background: oklch(94% 0.045 27); border-color: oklch(84% 0.090 27);
}

.botao-sucesso {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
  box-shadow: 0 2px 6px -1px oklch(53% 0.142 158 / .35);
}
.botao-sucesso:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); }

.botao-p { padding: 6px 13px; font-size: 12.5px; }
.botao-p .ico { width: 13px; height: 13px; }
.botao-g { padding: 13px 26px; font-size: 14.5px; }
.botao-bloco { width: 100%; }
.botao-icone { padding: 0; width: 38px; height: 38px; border-radius: 50%; }
.botao-icone .ico { width: 16px; height: 16px; }

.botao-grupo { display: inline-flex; gap: 6px; }

/* --- Cartões --- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;      /* é o que arredonda os cantos da tabela dentro dele */
}
.cartao-cabecalho {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda-suave);
}
.cartao-cabecalho h2, .cartao-cabecalho h3 {
  font-size: 15px; display: flex; align-items: center; gap: 9px;
}
.cartao-cabecalho .ico { color: var(--texto-fraco); }
.cartao-corpo { padding: 20px; }
.cartao-corpo.sem-espaco { padding: 0; }
.cartao-rodape {
  padding: 15px 20px;
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
}

/* --- Badges ---

   Três níveis de ênfase, para o badge servir de hierarquia e não de enfeite.
   Numa listagem em que toda linha tem badge, se todos pesarem igual nenhum
   chama atenção:

     sólido    exige ação hoje          fundo saturado, texto branco
     suave     informa o estado         fundo tingido (padrão)
     contorno  classifica, não alarma   só borda e texto
*/

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3.5px 11px;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  font-size: 11.5px; font-weight: 650;
  letter-spacing: -0.002em;
  white-space: nowrap;
  line-height: 1.55;
}
.badge .ico { width: 12px; height: 12px; vertical-align: 0; opacity: .85; }

/* Nível 2: suave (padrão).
   A borda não é enfeite: nas linhas já tingidas de laranja ou vermelho, o
   fundo do badge encosta no fundo da linha e a pílula some. A borda garante
   que ela continue sendo uma pílula em qualquer fundo. */
.badge-vermelho { background: var(--vermelho-fundo); color: var(--vermelho-texto);
                  border-color: var(--vermelho-borda); }
.badge-laranja  { background: var(--laranja-fundo);  color: var(--laranja-texto);
                  border-color: var(--laranja-borda); }
.badge-amarelo  { background: var(--amarelo-fundo);  color: var(--amarelo-texto);
                  border-color: var(--amarelo-borda); }
.badge-azul     { background: var(--azul-fundo);     color: var(--azul-texto);
                  border-color: var(--azul-borda); }
.badge-verde    { background: var(--verde-fundo);    color: var(--verde-texto);
                  border-color: var(--verde-borda); }
.badge-cinza    { background: var(--cinza-fundo);    color: var(--cinza-texto);
                  border-color: var(--borda-forte); }
.badge-roxo     { background: var(--roxo-fundo);     color: var(--roxo-texto);
                  border-color: oklch(86% 0.070 300); }

/* Nível 1: sólido — reservado para o que precisa de ação hoje */
.badge-solido { color: #fff; border-color: transparent; }
.badge-solido .ico { opacity: 1; }
.badge-vermelho.badge-solido { background: var(--vermelho); }
.badge-laranja.badge-solido  { background: var(--laranja); }
.badge-amarelo.badge-solido  { background: oklch(62% 0.130 78); }
.badge-azul.badge-solido     { background: var(--azul); }
.badge-verde.badge-solido    { background: var(--verde); }
.badge-cinza.badge-solido    { background: var(--cinza); }

/* Nível 3: contorno — classificação neutra, sem alarme */
.badge-contorno { background: transparent; font-weight: 550; }
.badge-contorno .ico { opacity: .6; }
.badge-vermelho.badge-contorno { border-color: var(--vermelho-borda); }
.badge-laranja.badge-contorno  { border-color: var(--laranja-borda); }
.badge-amarelo.badge-contorno  { border-color: var(--amarelo-borda); }
.badge-azul.badge-contorno     { border-color: var(--azul-borda); }
.badge-verde.badge-contorno    { border-color: var(--verde-borda); }
.badge-cinza.badge-contorno    { border-color: var(--borda-forte); }
.badge-roxo.badge-contorno     { border-color: oklch(86% 0.070 300); }

/* Badge dentro do <h1> da ficha: acompanha o texto sem herdar o tamanho dele */
.selo-titulo { display: inline-block; vertical-align: middle; margin-left: 8px; }
.selo-titulo .badge { font-size: 12.5px; padding: 5px 13px; }

.badge-ponto::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

.etiqueta-empresa {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.etiqueta-empresa::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor-empresa, var(--cinza)); flex-shrink: 0;
}

/* --- Alertas --- */

.alerta {
  display: flex; gap: 12px;
  padding: 15px 18px;
  border-radius: var(--raio);
  border: 1px solid;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.alerta > .ico { width: 18px; height: 18px; margin-top: 1px; vertical-align: 0; }
.alerta-conteudo { flex: 1; min-width: 0; }
.alerta-conteudo strong { display: block; margin-bottom: 4px; font-weight: 650; }
.alerta-sucesso { background: var(--verde-fundo);    border-color: var(--verde-borda);    color: var(--verde-texto); }
.alerta-erro    { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); color: var(--vermelho-texto); }
.alerta-aviso   { background: var(--amarelo-fundo);  border-color: var(--amarelo-borda);  color: var(--amarelo-texto); }
.alerta-info    { background: var(--azul-fundo);     border-color: var(--azul-borda);     color: var(--azul-texto); }
.alerta a { color: currentColor; text-decoration: underline; text-underline-offset: 3px; }

/* --- Totalizadores: blocos soltos, cada um com seu fundo --- */

.totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.total-item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 15px 17px;
  box-shadow: var(--sombra);
}
.total-rotulo {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .075em;
  color: var(--texto-suave);
  margin-bottom: 7px;
}
.total-valor {
  font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.028em;
  line-height: 1.1;
}
.total-detalhe { font-size: 11.5px; color: var(--texto-fraco); margin-top: 5px; }

.total-item.destaque-vermelho {
  background: var(--vermelho-fundo); border-color: var(--vermelho-borda);
}
.total-item.destaque-vermelho .total-valor  { color: var(--vermelho-texto); }
.total-item.destaque-vermelho .total-rotulo { color: var(--vermelho-texto); opacity: .75; }

.total-item.destaque-verde { background: var(--verde-fundo); border-color: var(--verde-borda); }
.total-item.destaque-verde .total-valor  { color: var(--verde-texto); }
.total-item.destaque-verde .total-rotulo { color: var(--verde-texto); opacity: .75; }

.total-item.destaque-azul { background: var(--azul-fundo); border-color: var(--azul-borda); }
.total-item.destaque-azul .total-valor  { color: var(--azul-texto); }
.total-item.destaque-azul .total-rotulo { color: var(--azul-texto); opacity: .75; }

.total-item.destaque-laranja { background: var(--laranja-fundo); border-color: var(--laranja-borda); }
.total-item.destaque-laranja .total-valor  { color: var(--laranja-texto); }
.total-item.destaque-laranja .total-rotulo { color: var(--laranja-texto); opacity: .75; }

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

.vazio { padding: 60px 26px; text-align: center; color: var(--texto-suave); }
.vazio > .ico {
  width: 46px; height: 46px; color: var(--borda-forte);
  margin-bottom: 14px; stroke-width: 1.2; vertical-align: 0;
}
.vazio h3 { font-size: 16px; color: var(--texto-medio); margin-bottom: 7px; }
.vazio p { margin: 0 auto 18px; font-size: 13.5px; max-width: 54ch; line-height: 1.6; }

/* --- Abas --- */

.abas {
  display: flex; gap: 6px;
  margin-bottom: 20px;
  padding: 5px;
  background: var(--superficie-3);
  border-radius: var(--raio-pill);
  overflow-x: auto;
  scrollbar-width: none;
  width: fit-content;
  max-width: 100%;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  padding: 8px 17px;
  font-size: 13px; font-weight: 550;
  color: var(--texto-suave);
  border-radius: var(--raio-pill);
  white-space: nowrap;
  text-decoration: none;
  transition: color .16s, background .16s, box-shadow .16s;
}
.aba:hover { color: var(--texto); text-decoration: none; }
.aba.ativa {
  color: var(--texto); background: var(--superficie);
  font-weight: 600; box-shadow: var(--sombra);
}

/* --- Paginação --- */

.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 15px 20px;
  border-top: 1px solid var(--borda-suave);
  font-size: 12.5px; color: var(--texto-suave);
}
.paginacao-botoes { display: flex; gap: 5px; }
.paginacao-botoes a, .paginacao-botoes span {
  min-width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  color: var(--texto-medio);
  font-size: 12.5px; font-weight: 550;
  text-decoration: none;
  transition: background .16s, border-color .16s;
}
.paginacao-botoes a:hover {
  background: var(--superficie-2); border-color: var(--borda-forte); text-decoration: none;
}
.paginacao-botoes .atual {
  background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 650;
}
.paginacao-botoes .desabilitado { opacity: .35; pointer-events: none; }
.paginacao-pagina { white-space: nowrap; }
.paginacao-pagina strong { color: var(--texto); font-variant-numeric: tabular-nums; }

@media (max-width: 719px) {
  .paginacao { justify-content: center; }
  .paginacao > span:first-child { display: none; }
}

/* ==========================================================================
   6. FORMULÁRIOS
   ========================================================================== */

.form-secao { margin-bottom: 26px; }
.form-secao-titulo {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--borda-suave);
}
.form-secao-titulo .ico { width: 15px; height: 15px; vertical-align: 0; }

.form-linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 720px) {
  .form-linha.col-2 { grid-template-columns: repeat(2, 1fr); }
  .form-linha.col-3 { grid-template-columns: repeat(3, 1fr); }
  .form-linha.col-4 { grid-template-columns: repeat(4, 1fr); }
  .form-linha.col-2-1 { grid-template-columns: 2fr 1fr; }
  .form-linha.col-1-2 { grid-template-columns: 1fr 2fr; }
  .form-linha.col-3-1 { grid-template-columns: 3fr 1fr; }
}

.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo label {
  font-size: 13px; font-weight: 550; color: var(--texto-medio);
  display: flex; align-items: center; gap: 5px;
}
.campo label .obrigatorio { color: var(--vermelho); font-weight: 700; }
.campo-dica { font-size: 11.5px; color: var(--texto-fraco); line-height: 1.5; }
.campo-erro { font-size: 11.5px; color: var(--vermelho-texto); font-weight: 550; }

input[type=text], input[type=password], input[type=number], input[type=email],
input[type=date], input[type=datetime-local], input[type=month], input[type=search],
input[type=tel], input[type=file], select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--superficie);
  font-family: inherit; font-size: 13.5px;
  color: var(--texto);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: oklch(83% 0.010 165); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: var(--foco);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--superficie-3); color: var(--texto-suave); cursor: not-allowed;
}
input[readonly] { background: var(--superficie-2); color: var(--texto-medio); }
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
input[type=file] { padding: 9px 12px; font-size: 12.5px; }
input[type=color] { padding: 4px; height: 44px; cursor: pointer; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
  cursor: pointer;
}

input.dinheiro, input.numero { text-align: right; font-variant-numeric: tabular-nums; }

.campo-prefixo { position: relative; }
.campo-prefixo input { padding-left: 40px; text-align: right; }
.campo-prefixo::before {
  content: 'R$';
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px; color: var(--texto-fraco); font-weight: 550;
  pointer-events: none;
}

.checkbox, .radio {
  display: flex; align-items: flex-start; gap: 11px;
  cursor: pointer;
  font-size: 13.5px;
  padding: 3px 0;
}
.checkbox input, .radio input {
  width: 17px; height: 17px;
  margin: 2px 0 0; flex-shrink: 0;
  accent-color: var(--primaria);
  cursor: pointer;
}
.checkbox-caixa {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 15px 17px;
  background: var(--superficie-2);
  transition: border-color .16s, background .16s;
}
.checkbox-caixa:hover { border-color: var(--borda-forte); }
.checkbox-caixa:has(input:checked) {
  border-color: var(--primaria-media);
  background: var(--primaria-clara);
}

.form-acoes {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 8px;
  border-top: 1px solid var(--borda-suave);
}
.form-acoes .espacador { flex: 1; }

.bloco-condicional { display: none; }
.bloco-condicional.visivel { display: block; }

/* --- Barra de filtros --- */

.filtros {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;
}
.filtros-atalhos {
  display: flex; gap: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros-atalhos::-webkit-scrollbar { display: none; }
.atalho {
  padding: 7px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  font-size: 12.5px; font-weight: 550;
  color: var(--texto-medio);
  white-space: nowrap;
  text-decoration: none;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.atalho:hover {
  background: var(--superficie-2); border-color: var(--borda-forte);
  text-decoration: none; box-shadow: var(--sombra);
}
.atalho.ativo {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
  box-shadow: 0 2px 6px -1px oklch(53% 0.142 158 / .35);
}
.atalho-contador {
  margin-left: 7px; padding: 1px 7px;
  background: oklch(26% 0.014 165 / .08); border-radius: var(--raio-pill);
  font-size: 10.5px; font-weight: 700;
}
.atalho.ativo .atalho-contador { background: oklch(100% 0 0 / .25); }
.atalho.alerta-vermelho {
  border-color: var(--vermelho-borda); color: var(--vermelho-texto);
  background: var(--vermelho-fundo);
}
.atalho.alerta-vermelho.ativo {
  background: var(--vermelho); border-color: var(--vermelho); color: #fff;
}

.filtros-campos { padding: 18px 16px; border-top: 1px solid var(--borda-suave); }
.filtros:has(> .filtros-campos:first-child) > .filtros-campos { border-top: none; }
.filtros-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.filtros-acoes { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filtros-resumo { font-size: 12.5px; color: var(--texto-suave); margin-right: auto; }
.filtros-alternar {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 550;
  color: var(--texto-medio);
  background: var(--superficie-2);
  border: none; width: 100%;
  font-family: inherit;
  border-top: 1px solid var(--borda-suave);
  transition: background .16s;
}
.filtros-alternar:hover { background: var(--superficie-3); }
.filtros-alternar .seta { margin-left: auto; display: inline-flex; transition: transform .26s var(--curva); }
.filtros-corpo { display: none; }
.filtros-corpo.aberto { display: block; }

.chip-empresa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  font-size: 12.5px; font-weight: 550;
  color: var(--texto-medio);
  cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s;
}
.chip-empresa::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor-empresa, var(--cinza)); flex-shrink: 0;
}
.chip-empresa input { position: absolute; opacity: 0; pointer-events: none; }
.chip-empresa:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.chip-empresa:has(input:checked) {
  color: var(--texto); font-weight: 600;
  border-color: color-mix(in oklch, var(--cor-empresa, var(--primaria)) 55%, transparent);
  background: color-mix(in oklch, var(--cor-empresa, var(--primaria)) 11%, var(--superficie));
}

/* ==========================================================================
   7. TABELAS
   ========================================================================== */

.tabela-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.tabela th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .075em;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.tabela th.num, table.tabela td.num { text-align: right; }
table.tabela th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
table.tabela td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda-suave);
  vertical-align: middle;
}
table.tabela tbody tr { transition: background .12s; }
table.tabela tbody tr:hover { background: var(--superficie-2); }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr.clicavel { cursor: pointer; }
table.tabela tfoot td {
  padding: 14px 16px;
  font-weight: 700;
  background: var(--superficie-2);
  border-top: 1px solid var(--borda);
  font-variant-numeric: tabular-nums;
}
table.tabela .col-acoes { width: 1%; white-space: nowrap; text-align: right; }
table.tabela .col-estreita { width: 1%; white-space: nowrap; }

/* Numa listagem quase toda feita de links, colorir todos vira uma parede
   verde e o acento perde o valor. O link se comporta como texto e só se
   revela ao passar o cursor. */
table.tabela tbody a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s, border-color .14s;
}
table.tabela tbody a:hover {
  color: var(--primaria-escura);
  border-bottom-color: var(--primaria-media);
  text-decoration: none;
}

/* Só as situações que exigem ação recebem fundo. Pagas, futuras e canceladas
   ficam neutras — o badge já diz o estado, e colorir tudo faria as linhas
   urgentes deixarem de saltar aos olhos. */
tr.linha-vermelho { background: var(--vermelho-linha); }
tr.linha-vermelho:hover { background: oklch(96.8% 0.024 27); }
tr.linha-laranja  { background: var(--laranja-linha); }
tr.linha-laranja:hover { background: oklch(97% 0.028 62); }

.acoes-linha { display: flex; gap: 4px; justify-content: flex-end; }
.acao-icone {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  text-decoration: none;
  transition: background .16s, color .16s, border-color .16s;
}
.acao-icone:hover {
  background: var(--superficie); border-color: var(--borda);
  color: var(--texto); text-decoration: none; box-shadow: var(--sombra);
}
.acao-icone .ico { width: 16px; height: 16px; vertical-align: 0; }
.acao-icone.perigo:hover {
  color: var(--vermelho-texto); border-color: var(--vermelho-borda); background: var(--vermelho-fundo);
}
.acao-icone.sucesso:hover {
  color: var(--verde-texto); border-color: var(--verde-borda); background: var(--verde-fundo);
}

.marca-anexo { color: var(--texto-fraco); display: inline-flex; }
.marca-anexo.tem { color: var(--primaria); }

/* --- Células que explicam o número ---

   Uma coluna de datas obriga o leitor a calcular de cabeça se 07/08 é perto
   ou longe. Uma coluna de valores não mostra a diferença entre 800 e 8.000
   até o olho ler os dois. Estas células respondem antes da conta. */

.celula-data { line-height: 1.35; }
.celula-data .data-principal { display: block; white-space: nowrap; }
.celula-data .data-relativa {
  display: block;
  font-size: 11px;
  color: var(--texto-fraco);
  white-space: nowrap;
  margin-top: 1px;
}
.celula-data.atrasada .data-principal { color: var(--vermelho-texto); font-weight: 650; }
.celula-data.atrasada .data-relativa  { color: var(--vermelho-texto); opacity: .8; }
.celula-data.proxima  .data-principal { font-weight: 650; }
.celula-data.proxima  .data-relativa  { color: var(--laranja-texto); font-weight: 600; }

.celula-valor {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  line-height: 1.3;
}
.celula-valor .valor-principal {
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13.5px;
}
.celula-valor .valor-nota { font-size: 10.5px; color: var(--texto-fraco); white-space: nowrap; }
.celula-valor .valor-barra {
  width: 100%; max-width: 86px; height: 4px;
  background: oklch(26% 0.014 165 / .09);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.celula-valor .valor-barra > span {
  display: block; height: 100%;
  border-radius: var(--raio-pill);
  background: var(--primaria);
  transition: width var(--medio) var(--curva);
}
.celula-valor .valor-barra > span.parcial  { background: var(--amarelo); }
.celula-valor .valor-barra > span.zerado   { background: var(--borda-forte); }
.celula-valor .valor-barra > span.atencao  { background: var(--laranja); }
.celula-valor .valor-barra > span.negativo { background: var(--vermelho); }

/* Duas colunas que viram uma sozinhas quando não cabem */
.colunas-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1099px) {
  .colunas-2 { grid-template-columns: 1fr; }
}

/* Campo editável dentro de célula de tabela. Sem o visual cheio de formulário:
   numa grade de 20 linhas, 100 caixas com borda viram um paredão. */
.campo-tabela {
  width: 100%;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  color: inherit;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.campo-tabela.num { text-align: right; font-variant-numeric: tabular-nums; }
.campo-tabela:hover { border-color: var(--borda); }
.campo-tabela:focus {
  border-color: var(--primaria);
  background: var(--superficie);
  outline: 2px solid var(--primaria-clara);
  outline-offset: 0;
}
select.campo-tabela { padding-right: 22px; }

/* Janela de datas em vigor na listagem, logo abaixo dos atalhos.
   O padding lateral é o mesmo dos irmãos dentro de .filtros (16px): sem ele
   a linha nasce colada na borda do cartão, 16px à esquerda das pílulas. */
.filtro-janela {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0;
  padding: 0 16px 14px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--texto-suave);
}
/* No celular o texto quebra em duas linhas. Com align-items:center o ícone
   ficaria no meio do bloco, flutuando entre as linhas; alinhado ao topo com
   este recuo ele acompanha a primeira linha em qualquer largura.
   2px = (altura da linha 18.75 − ícone 14) / 2, arredondado. */
.filtro-janela .ico {
  width: 14px; height: 14px;
  margin-top: 2px;
  color: var(--texto-fraco);
  flex-shrink: 0;
}

/* Célula sem barra continua alinhada com as que têm: sem isso o número
   sobe 4px em relação à coluna vizinha e a linha fica torta. */
.celula-valor:not(:has(.valor-barra)) { justify-content: center; }
.celula-valor .valor-principal.fraco { color: var(--texto-fraco); font-weight: 500; }

/* Coluna que carrega o número mais importante da linha */
td.coluna-destaque { background: oklch(26% 0.014 165 / .018); }
td.coluna-destaque .valor-principal { font-size: 14.5px; font-weight: 700; }
th.coluna-destaque { background: oklch(26% 0.014 165 / .035); }

/* Rótulo secundário embaixo do principal, dentro da mesma célula */
.celula-sub {
  display: block; font-size: 11px; color: var(--texto-fraco); margin-top: 2px;
}

@media (max-width: 899px) {
  .celula-valor { align-items: flex-end; }
  .celula-valor .valor-barra { max-width: 120px; }
  td.coluna-destaque { background: transparent; }
}

/* --- Tabela vira cartões no celular --- */

@media (max-width: 899px) {
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody, table.responsiva td { display: block; width: 100%; }

  /* Flex em coluna para o título do registro vir primeiro no cartão,
     independentemente da ordem das colunas no desktop. */
  table.responsiva tr {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 12px;
    padding: 16px 18px;
    box-shadow: var(--sombra);
  }
  table.responsiva td.celula-principal { order: -1; }
  table.responsiva td.col-acoes { order: 99; }

  table.responsiva .marcar-item,
  #marcarTodos,
  #barraLote { display: none !important; }

  table.responsiva tr.linha-vermelho {
    background: var(--vermelho-fundo); border-color: var(--vermelho-borda);
  }
  table.responsiva tr.linha-laranja {
    background: var(--laranja-fundo); border-color: var(--laranja-borda);
  }
  /* Grid, não flex. Com flex, uma célula que tem estrutura interna — um link
     mais a categoria embaixo, por exemplo — vira dois itens lado a lado e o
     texto é esmagado numa coluna de 60px. No grid, o rótulo fica na primeira
     coluna e TUDO que a célula contém se empilha na segunda. */
  table.responsiva td {
    border: none;
    padding: 5px 0;
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    gap: 3px 16px;
    align-items: baseline;
    text-align: right;
  }
  /* `table.tabela .col-acoes { width: 1% }` tem especificidade maior que
     `table.responsiva td { width: 100% }` e vencia aqui. Dentro do cartão
     (tr vira flex em coluna) isso deixava a célula com 3px e os botões
     empilhados um por cima do outro. */
  table.responsiva td.col-acoes,
  table.responsiva td.col-estreita { width: 100%; }
  table.responsiva td::before {
    content: attr(data-rotulo);
    grid-column: 1; grid-row: 1;
    font-size: 11.5px; font-weight: 600;
    color: var(--texto-suave);
    text-align: left;
  }
  table.responsiva td > * { grid-column: 2; }
  /* Item de grid é "blocado": o badge inline-flex viraria flex de bloco e
     esticaria a pílula pela largura toda da coluna. */
  table.responsiva td > .badge,
  table.responsiva td > .etiqueta-empresa,
  table.responsiva td > .etapa-pontos,
  table.responsiva td > .etapa-selo { justify-self: end; }
  table.responsiva td > .menor,
  table.responsiva td > .pequeno { color: var(--texto-fraco); }
  table.responsiva td:empty { display: none; }
  table.responsiva td[data-rotulo='']::before { display: none; }
  table.responsiva td.celula-principal {
    display: block; text-align: left;
    font-weight: 650; font-size: 15px;
    padding-bottom: 11px; margin-bottom: 9px;
    border-bottom: 1px solid var(--borda);
  }
  table.responsiva td.celula-principal::before { display: none; }
  table.responsiva td.col-acoes {
    display: block;
    padding-top: 13px; margin-top: 11px;
    border-top: 1px solid var(--borda);
  }
  table.responsiva td.col-acoes::before { display: none; }

  /* No cartão, o ícone nu não diz que é clicável. Vira botão de verdade,
     com fundo, borda e área de toque confortável. */
  table.responsiva .acoes-linha { gap: 8px; justify-content: stretch; }
  table.responsiva .acao-icone {
    flex: 1 1 0;
    width: auto; min-width: 0; height: 40px;
    border-radius: var(--raio-pill);
    border-color: var(--borda);
    background: var(--superficie-2);
    color: var(--texto-medio);
  }
  table.responsiva .acao-icone.sucesso {
    background: var(--primaria); border-color: var(--primaria); color: #fff;
    flex: 1.6 1 0;
  }
  table.responsiva .acao-icone.perigo {
    background: var(--vermelho-fundo); border-color: var(--vermelho-borda);
    color: var(--vermelho-texto);
  }
  /* O rótulo do title vira texto ao lado do ícone */
  table.responsiva .acao-icone::after {
    content: attr(title);
    font-size: 12.5px; font-weight: 600;
    margin-left: 7px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  table.responsiva tbody tr:hover { background: var(--superficie); }
  table.responsiva tbody tr.linha-vermelho:hover { background: var(--vermelho-fundo); }
  table.responsiva tbody tr:last-child td { border-bottom: none; }
  table.responsiva tfoot { display: none; }

  /* Cada linha já é um cartão. Manter o cartão que envolve a tabela criaria
     cartão dentro de cartão, e o olho perde onde termina cada registro. */
  .cartao:has(table.responsiva) {
    background: transparent; border-color: transparent;
    box-shadow: none; overflow: visible;
  }
  .cartao:has(table.responsiva) > .cartao-cabecalho {
    background: transparent; border-bottom: none; padding: 0 4px 13px;
  }
  .cartao:has(table.responsiva) > .paginacao {
    background: transparent; border-top: none; padding: 10px 4px 0;
  }
  .cartao:has(table.responsiva) > .vazio {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio);
  }
}

/* Ações da página no celular: a principal ganha a linha inteira e vem primeiro */
@media (max-width: 719px) {
  .pagina-acoes { width: 100%; }
  .pagina-acoes .botao { flex: 1 1 0; min-width: 0; }
  .pagina-acoes .botao-primario { flex-basis: 100%; order: -1; }
}

/* --- Ficha (lista de definições) --- */

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 20px 26px;
}
.ficha-item { min-width: 0; }
.ficha-rotulo {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .075em;
  color: var(--texto-suave);
  margin-bottom: 5px;
}
.ficha-valor { font-size: 14px; word-break: break-word; line-height: 1.5; }
.ficha-valor.grande {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.026em;
}

/* ==========================================================================
   8. GRADE DE ITENS (pedidos)
   ========================================================================== */

.grade-itens { width: 100%; border-collapse: collapse; font-size: 13px; }
.grade-itens th {
  padding: 11px 11px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  text-align: left;
  white-space: nowrap;
}
.grade-itens th.num { text-align: right; }
.grade-itens td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--borda-suave);
  vertical-align: top;
}
.grade-itens tr:last-child td { border-bottom: none; }

/* Numa grade com dezenas de campos, borda cheia em cada um vira ruído.
   O campo se anuncia pelo fundo e ganha borda ao receber o cursor. */
.grade-itens input, .grade-itens select {
  padding: 8px 11px;
  font-size: 13px;
  border-radius: var(--raio-xs);
  border-color: transparent;
  background-color: var(--superficie-3);
}
.grade-itens input:hover:not(:disabled):not([readonly]),
.grade-itens select:hover:not(:disabled) {
  border-color: var(--borda-forte); background-color: var(--superficie);
}
.grade-itens input:focus, .grade-itens select:focus {
  background-color: var(--superficie); border-color: var(--primaria);
}
.grade-itens .celula-total {
  padding: 16px 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.grade-itens tfoot td {
  padding: 13px 11px;
  background: var(--superficie-2);
  font-weight: 600;
  border-top: 1px solid var(--borda);
}
.grade-linha-remover {
  display: grid; place-items: center;
  width: 32px; height: 34px;
  border: none; background: none;
  color: var(--texto-fraco);
  cursor: pointer; border-radius: 50%;
  transition: background .16s, color .16s;
}
.grade-linha-remover:hover { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.grade-linha-remover svg { width: 15px; height: 15px; }

.grade-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 16px;
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
}

/* Resumo do pedido: blocos soltos, como os totalizadores.
   Raio externo = raio interno + espaçamento. O cartão tem 18px e o bloco
   encosta com 8px de folga, então o bloco usa 10px: 10 + 8 = 18, e as curvas
   ficam concêntricas em vez de brigarem. */
.resumo-pedido {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
}
.resumo-item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 15px 17px;
}
.resumo-item.destaque { background: var(--primaria-clara); border-color: var(--primaria-media); }
.resumo-rotulo {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .075em; color: var(--texto-suave); margin-bottom: 6px;
}
.resumo-valor {
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.026em;
}
.resumo-item.lucro { background: var(--verde-fundo); border-color: var(--verde-borda); }
.resumo-item.lucro .resumo-valor { color: var(--verde-texto); }
.resumo-item.prejuizo { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); }
.resumo-item.prejuizo .resumo-valor { color: var(--vermelho-texto); }
.resumo-item.custo { background: var(--laranja-fundo); border-color: var(--laranja-borda); }
.resumo-item.custo .resumo-valor { color: var(--laranja-texto); }

@media (max-width: 899px) {
  .grade-itens-area { overflow-x: auto; }
  .grade-itens { min-width: 720px; }
}

/* ==========================================================================
   9. ETAPAS DO PEDIDO
   ========================================================================== */

.etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.etapa {
  padding: 16px 18px;
  display: flex; align-items: center; gap: 13px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: var(--texto-suave);
  text-decoration: none;
  min-width: 0;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.etapa:hover { border-color: var(--borda-forte); text-decoration: none; box-shadow: var(--sombra-m); }
.etapa-numero {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  background: var(--superficie-3);
  color: var(--texto-suave);
  border: 1.5px solid var(--borda-forte);
  flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s;
}
.etapa-numero .ico { width: 15px; height: 15px; vertical-align: 0; }
.etapa-texto { min-width: 0; }
.etapa-titulo {
  font-size: 13.5px; font-weight: 600; color: var(--texto-medio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etapa-descricao {
  font-size: 11.5px; color: var(--texto-fraco); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.etapa.concluida { background: var(--verde-fundo); border-color: var(--verde-borda); }
.etapa.concluida .etapa-numero { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.etapa.concluida .etapa-titulo { color: var(--verde-texto); }
.etapa.atual {
  border-color: var(--primaria); background: var(--superficie);
  box-shadow: 0 0 0 3px oklch(60% 0.142 158 / .13), var(--sombra);
}
.etapa.atual .etapa-numero {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
}
.etapa.atual .etapa-titulo { color: var(--texto); }
.etapa.bloqueada { opacity: .5; pointer-events: none; box-shadow: none; }

/* Trilho de progresso do pedido na listagem.
   Três segmentos encostados leem como "1 de 3 concluídas"; três bolinhas
   soltas leem como decoração. */
.etapa-pontos { display: flex; gap: 3px; align-items: center; width: 64px; }
.etapa-ponto {
  flex: 1; height: 5px;
  border-radius: var(--raio-pill);
  background: var(--borda-forte);
  transition: background var(--medio) var(--curva);
}
.etapa-ponto.cheio { background: var(--primaria); }
.etapa-ponto.atual {
  background: var(--amarelo);
  animation: pulsar-etapa 2.4s var(--curva) infinite;
}
.etapa-selo { margin-top: 6px; }

@keyframes pulsar-etapa {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .etapa-ponto.atual { animation: none; }
}

/* No celular as três etapas ficam lado a lado, empilhadas por dentro.
   Três cartões largos um sobre o outro empurrariam o conteúdo do pedido
   para fora da primeira tela. */
@media (max-width: 719px) {
  .etapas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .etapa {
    flex-direction: column; align-items: flex-start;
    gap: 9px; padding: 13px 12px;
  }
  .etapa-numero { width: 28px; height: 28px; font-size: 12px; }
  .etapa-texto .etapa-descricao { display: none; }
  .etapa-titulo { white-space: normal; font-size: 11.5px; line-height: 1.3; }
}

/* ==========================================================================
   10. APURAÇÃO FISCAL
   ========================================================================== */

.grade-apuracao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.cartao-apuracao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s var(--curva);
}
.cartao-apuracao:hover { box-shadow: var(--sombra-m); }
.apuracao-cabecalho { padding: 18px 20px 14px; }
.apuracao-empresa {
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.016em;
  display: flex; align-items: center; gap: 9px;
}
.apuracao-empresa::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cor-empresa, var(--cinza)); flex-shrink: 0;
}
.apuracao-regime {
  font-size: 11.5px; color: var(--texto-suave); margin-top: 6px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.apuracao-corpo { padding: 0 20px 18px; flex: 1; display: flex; flex-direction: column; }

.apuracao-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13.5px;
}
.apuracao-linha .valor { font-variant-numeric: tabular-nums; font-weight: 550; }
.apuracao-linha.subtrai .valor::before { content: '− '; color: var(--texto-fraco); }
.apuracao-separador { border-top: 1px solid var(--borda-suave); margin: 10px 0; }
.apuracao-linha.base { font-weight: 600; }

.apuracao-imposto {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.apuracao-imposto-rotulo {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave);
}
.apuracao-imposto-valor {
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.036em;
  line-height: 1.05;
}
.cartao-apuracao.zerado  .apuracao-imposto { background: var(--verde-fundo); }
.cartao-apuracao.zerado  .apuracao-imposto-valor  { color: var(--verde-texto); }
.cartao-apuracao.zerado  .apuracao-imposto-rotulo { color: var(--verde-texto); opacity: .7; }
.cartao-apuracao.atencao .apuracao-imposto { background: var(--vermelho-fundo); }
.cartao-apuracao.atencao .apuracao-imposto-valor  { color: var(--vermelho-texto); }
.cartao-apuracao.atencao .apuracao-imposto-rotulo { color: var(--vermelho-texto); opacity: .7; }
.cartao-apuracao.proximo .apuracao-imposto { background: var(--amarelo-fundo); }
.cartao-apuracao.proximo .apuracao-imposto-valor  { color: var(--amarelo-texto); }
.cartao-apuracao.proximo .apuracao-imposto-rotulo { color: var(--amarelo-texto); opacity: .7; }

/* O aviso central do sistema, como faixa colorida no pé do cartão */
.apuracao-meta {
  margin: 16px -20px -18px;
  padding: 16px 20px;
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
  margin-top: auto;
}
.apuracao-meta.zerado  { background: var(--verde-fundo);    border-top-color: var(--verde-borda); }
.apuracao-meta.atencao { background: var(--vermelho-fundo); border-top-color: var(--vermelho-borda); }
.apuracao-meta.proximo { background: var(--amarelo-fundo);  border-top-color: var(--amarelo-borda); }
.apuracao-meta-texto {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; font-weight: 550; line-height: 1.5;
}
.apuracao-meta-texto .ico { width: 17px; height: 17px; margin-top: 1px; vertical-align: 0; }
.apuracao-meta.zerado  .apuracao-meta-texto { color: var(--verde-texto); }
.apuracao-meta.atencao .apuracao-meta-texto { color: var(--vermelho-texto); }
.apuracao-meta.proximo .apuracao-meta-texto { color: var(--amarelo-texto); }
.apuracao-meta-valor { font-weight: 800; }

.barra-progresso {
  height: 9px;
  background: oklch(26% 0.014 165 / .09);
  border-radius: var(--raio-pill);
  overflow: hidden;
  margin: 13px 0 7px;
}
.barra-progresso-preenchida {
  height: 100%;
  border-radius: var(--raio-pill);
  background: var(--laranja);
  transition: width .6s var(--curva);
}
.apuracao-meta.zerado  .barra-progresso-preenchida { background: var(--primaria); }
.apuracao-meta.proximo .barra-progresso-preenchida { background: var(--amarelo); }
.apuracao-meta-rodape {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 11.5px; opacity: .85;
}

/* Total consolidado: um bloco verde claro, não um bloco escuro */
.apuracao-total {
  background: linear-gradient(120deg, var(--verde-fundo), oklch(96.5% 0.030 175));
  border: 1px solid var(--verde-borda);
  color: var(--verde-texto);
  border-radius: var(--raio);
  padding: 24px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-shadow: var(--sombra);
}
.apuracao-total-rotulo {
  font-size: 11px; font-weight: 650; letter-spacing: .075em;
  text-transform: uppercase; opacity: .72;
}
.apuracao-total-valor {
  font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.038em; line-height: 1.05; margin-top: 5px;
}

/* ==========================================================================
   11. MODAL E SOBREPOSIÇÕES
   ========================================================================== */

.modal-fundo {
  position: fixed; inset: 0;
  background: oklch(26% 0.014 165 / .38);
  backdrop-filter: blur(5px);
  display: none;
  z-index: 100;
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-fundo.aberto { display: flex; align-items: flex-start; justify-content: center; }

.modal {
  background: var(--superficie);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  width: 100%;
  max-width: 580px;
  margin: auto;
  overflow: hidden;
  animation: modal-entra .24s var(--curva);
}
.modal.largo { max-width: 940px; }
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(-14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal-cabecalho {
  padding: 22px 24px 18px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.modal-cabecalho h3 { font-size: 17px; }
.modal-cabecalho p { margin: 6px 0 0; font-size: 13px; color: var(--texto-suave); line-height: 1.55; }
.modal-fechar {
  background: none; border: none; cursor: pointer;
  color: var(--texto-fraco); padding: 7px;
  display: grid; place-items: center; border-radius: 50%;
  flex-shrink: 0;
  transition: background .16s, color .16s;
}
.modal-fechar:hover { background: var(--superficie-3); color: var(--texto); }
.modal-fechar .ico { width: 17px; height: 17px; vertical-align: 0; }
.modal-corpo { padding: 4px 24px 24px; max-height: 66vh; overflow-y: auto; }
.modal-rodape {
  padding: 18px 24px;
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* --- Mensagem flutuante --- */

.aviso-flutuante {
  position: fixed;
  bottom: 84px; left: 16px; right: 16px;
  z-index: 200;
  padding: 16px 18px;
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  font-size: 13.5px; font-weight: 550;
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid;
  animation: aviso-entra .28s var(--curva);
}
@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.aviso-flutuante .ico { width: 19px; height: 19px; margin-top: 1px; vertical-align: 0; }
.aviso-flutuante.sucesso {
  background: var(--verde-fundo); border-color: var(--verde-borda); color: var(--verde-texto);
}
.aviso-flutuante.erro {
  background: var(--vermelho-fundo); border-color: var(--vermelho-borda); color: var(--vermelho-texto);
}
.aviso-flutuante.aviso {
  background: var(--amarelo-fundo); border-color: var(--amarelo-borda); color: var(--amarelo-texto);
}
.aviso-fechar {
  margin-left: auto; background: none; border: none; color: inherit;
  opacity: .55; cursor: pointer; padding: 2px; flex-shrink: 0;
}
.aviso-fechar:hover { opacity: 1; }

@media (min-width: 720px) {
  .aviso-flutuante { left: auto; right: 26px; bottom: 26px; min-width: 340px; max-width: 470px; }
}

/* --- Busca com sugestões --- */

.busca { position: relative; }
.busca-sugestoes {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-m);
  max-height: 290px; overflow-y: auto;
  z-index: 30;
  display: none;
  padding: 6px;
}
.busca-sugestoes.aberta { display: block; }
.busca-opcao {
  padding: 10px 13px;
  cursor: pointer;
  border-radius: var(--raio-p);
  font-size: 13.5px;
}
.busca-opcao:hover, .busca-opcao.destacada { background: var(--primaria-clara); }
.busca-opcao-titulo { font-weight: 550; }
.busca-opcao-detalhe { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.busca-opcao.criar { color: var(--primaria-escura); font-weight: 600; }

/* --- Anexos --- */

.anexos-lista { display: flex; flex-direction: column; gap: 9px; }
.anexo-item {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 13.5px;
}
.anexo-icone {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--raio-p);
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  flex-shrink: 0;
}
.anexo-icone .ico { width: 17px; height: 17px; vertical-align: 0; }
.anexo-info { flex: 1; min-width: 0; }
.anexo-nome { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-meta { font-size: 11.5px; color: var(--texto-fraco); margin-top: 2px; }
.anexo-acoes { display: flex; gap: 4px; flex-shrink: 0; }

.area-upload {
  display: block;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: 28px 20px;
  text-align: center;
  background: var(--superficie-2);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.area-upload:hover, .area-upload.arrastando {
  border-color: var(--primaria); background: var(--primaria-clara);
}
.area-upload > .ico {
  width: 30px; height: 30px; color: var(--texto-fraco);
  margin-bottom: 9px; vertical-align: 0;
}
.area-upload p { margin: 0; font-size: 13.5px; color: var(--texto-medio); }
.area-upload span { font-size: 12px; color: var(--texto-fraco); }
.area-upload input[type=file] { display: none; }

/* --- Pedido de item fora da tabela do contrato --- */

.pedido-livre-linha {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--laranja-borda);
  border-radius: var(--raio);
  background: var(--laranja-fundo);
}
.livre-cabecalho {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.livre-cabecalho strong { font-size: 14px; }
/* Uma classe própria, e não `.livre-cabecalho span`: o selo ao lado também é
   um span, e a regra genérica sobrescrevia a cor dele — texto cinza em fundo
   laranja, ilegível. */
.livre-quantidade { font-size: 12.5px; color: var(--texto-suave); }

/* A grade cai para uma coluna sozinha em tela estreita, e o preço é o único
   campo que nunca pode ficar escondido numa dobra. */
.livre-resolver {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
  margin-top: 11px;
}
.livre-resolver .campo { margin: 0; }
.livre-resolver .checkbox, .livre-acoes { grid-column: 1 / -1; }
.livre-avulso span span { display: block; margin-top: 2px; }

/* --- Fotos das telas (Configurações → Imagens) --- */

.ambiente-lista { display: grid; gap: 10px; }
.ambiente-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}
.ambiente-previa {
  width: 104px; height: 62px;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--superficie-2);
  display: grid; place-items: center;
}
.ambiente-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ambiente-previa.vazia .ico { width: 20px; height: 20px; color: var(--texto-fraco); opacity: .6; }

.ambiente-info { min-width: 0; line-height: 1.35; }
.ambiente-info strong { display: block; font-size: 14px; font-weight: 650; }
.ambiente-info span { display: block; font-size: 12px; color: var(--texto-fraco); }
.ambiente-auto { font-style: italic; }

.ambiente-escolha { display: flex; align-items: center; gap: 7px; }
.ambiente-escolha select { max-width: 260px; }

.ambiente-preparo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid var(--borda);
}
.ambiente-preparo p { margin-top: 3px; max-width: 58ch; line-height: 1.45; }

.caminho-pasta {
  display: block;
  padding: 9px 12px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 12px; word-break: break-all;
}

@media (max-width: 719px) {
  .ambiente-item { grid-template-columns: 76px minmax(0, 1fr); }
  .ambiente-previa { width: 76px; height: 50px; }
  .ambiente-escolha { grid-column: 1 / -1; }
  .ambiente-escolha select { flex: 1; max-width: none; }
}

/* --- Tela de login --- */

/* ===========================================================================
   TELA DE ENTRADA

   No celular a foto é uma faixa no topo: dá o tom sem empurrar o formulário
   para debaixo do teclado. No PC a tela se divide — foto de um lado,
   formulário do outro — porque aí sobra largura e um cartão sozinho no meio
   de um fundo vazio é o que a tela era antes.
   =========================================================================== */

.entrada { min-height: 100dvh; display: flex; flex-direction: column; }

.entrada-painel {
  flex: 1;
  display: grid; place-items: center;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
}
.entrada-caixa { width: 100%; max-width: 372px; }
.entrada-painel > .login-caixa { max-width: 410px; }

.entrada-marca { text-align: center; margin-bottom: 24px; }
.entrada-marca .entrada-icone { width: 52px; height: 52px; margin: 0 auto 13px; }
.entrada-marca .entrada-icone .ico { width: 25px; height: 25px; }
.entrada-marca h1 { font-size: 20px; letter-spacing: -0.02em; }
.entrada-marca p { color: var(--texto-suave); font-size: 13px; margin-top: 4px; }

/* --- A foto -------------------------------------------------------------- */

.entrada-foto {
  position: relative;
  height: 30dvh; min-height: 168px; max-height: 260px;
  overflow: hidden;
  background: oklch(28% 0.02 165);
}
.entrada-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Escurece de baixo para cima. Sem isso o texto cai em cima de caixas de
   papelão claras e some — e não dá para escolher a foto por nós. */
.entrada-foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    oklch(24% 0.02 165 / .92) 0%,
    oklch(24% 0.02 165 / .55) 45%,
    oklch(24% 0.02 165 / .15) 100%);
}
.entrada-foto-texto {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  color: #fff;
}
.entrada-foto-texto strong {
  display: block;
  font-size: 19px; font-weight: 650; letter-spacing: -0.02em;
  line-height: 1.25;
}
.entrada-foto-texto p {
  font-size: 13px; line-height: 1.45; margin-top: 6px;
  color: oklch(100% 0 0 / .82);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .entrada.com-foto {
    flex-direction: row;
    align-items: stretch;
  }
  .entrada.com-foto .entrada-foto {
    flex: 1 1 55%;
    height: auto; max-height: none;
  }
  .entrada.com-foto .entrada-painel { flex: 0 0 45%; padding: 40px; }
  .entrada.com-foto .entrada-foto-texto { padding: 44px 48px; }
  .entrada.com-foto .entrada-foto-texto strong { font-size: 27px; }
  .entrada.com-foto .entrada-foto-texto p { font-size: 14.5px; margin-top: 10px; }

  /* Em pé o degradê vem da esquerda, seguindo o texto */
  .entrada.com-foto .entrada-foto::after {
    background: linear-gradient(to top,
      oklch(24% 0.02 165 / .88) 0%,
      oklch(24% 0.02 165 / .32) 55%,
      oklch(24% 0.02 165 / .08) 100%);
  }
}

@media (min-width: 1280px) {
  .entrada.com-foto .entrada-painel { flex: 0 0 min(45%, 560px); }
}


.login-pagina {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 620px at 78% -8%, oklch(90% 0.090 160 / .85), transparent 62%),
    radial-gradient(680px 520px at 12% 108%, oklch(91% 0.070 195 / .8), transparent 58%),
    var(--fundo);
}
/* A tela de entrada do sistema é `.entrada` e `.login-pagina` ao mesmo tempo:
   o layout vem da primeira, e da segunda fica só o fundo. Sem isto o
   `display: grid` daqui venceria o `flex` de lá, por vir depois — e o
   `place-items: center` encolheria a foto para o meio da tela em vez de
   deixá-la sangrar de ponta a ponta. */
.entrada.login-pagina { display: flex; place-items: stretch; padding: 0; }

.login-caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  padding: 38px 32px;
  width: 100%; max-width: 410px;
}
.login-marca { text-align: center; margin-bottom: 30px; }
.login-marca-icone {
  width: 58px; height: 58px;
  border-radius: 19px;
  background: linear-gradient(150deg, var(--primaria-vivida), var(--primaria));
  display: grid; place-items: center;
  color: #fff; font-size: 24px; font-weight: 700;
  margin: 0 auto 17px;
  box-shadow: 0 8px 22px -6px oklch(60% 0.142 158 / .55);
}
.login-marca h1 { font-size: 21px; margin-bottom: 6px; }
.login-marca p { margin: 0; font-size: 13px; color: var(--texto-suave); }
.login-empresas {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--borda-suave);
}
.login-empresa-tag {
  font-size: 11px; font-weight: 550;
  padding: 5px 12px; border-radius: var(--raio-pill);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
}

/* ==========================================================================
   12. GRÁFICOS E PROGRESSO

   O gráfico anterior era um flex simples: com três meses de dados as barras
   ficavam larguíssimas e a menor sumia em três pixels de altura. Aqui a barra
   tem largura máxima, altura mínima legível e linhas de grade para o olho
   conseguir comparar sem contar pixels.
   ========================================================================== */

.grafico {
  --grafico-altura: 190px;
  padding: 22px 20px 14px;
}

.grafico-area {
  position: relative;
  height: var(--grafico-altura);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-left: 58px;   /* espaço do eixo */
  border-bottom: 1px solid var(--borda);
}

/* Linhas de grade e valores do eixo vertical */
.grafico-grade {
  position: absolute;
  inset: 0 0 0 58px;
  pointer-events: none;
}
.grafico-linha {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--borda);
}
.grafico-eixo-rotulo {
  position: absolute;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A coluna ocupa sua fatia inteira do espaço; quem tem largura máxima é a
   barra. Limitar a coluna deixaria um vão à direita quando há poucos meses. */
.grafico-coluna {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  position: relative;
}
.grafico-coluna:hover { text-decoration: none; }

.grafico-valor {
  font-size: 11.5px; font-weight: 700;
  color: var(--texto-medio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--rapido);
}
.grafico-barra {
  width: 100%;
  max-width: 76px;         /* impede a barra gorda quando há poucos meses */
  min-height: 4px;         /* valor pequeno continua visível */
  border-radius: var(--raio-xs) var(--raio-xs) 3px 3px;
  background: var(--primaria-media);
  transition: background var(--rapido), transform var(--rapido);
  transform-origin: bottom;
  animation: barra-cresce var(--lento) var(--curva) backwards;
}
.grafico-coluna:hover .grafico-barra { background: var(--primaria); }
.grafico-coluna:hover .grafico-valor { color: var(--texto); }
.grafico-coluna.atual .grafico-barra { background: var(--primaria); }
.grafico-coluna.atual .grafico-valor { color: var(--primaria-escura); }
.grafico-coluna.vazia .grafico-barra {
  background: var(--borda);
  animation: none;
}

@keyframes barra-cresce {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.grafico-rotulos {
  display: flex; gap: 10px;
  padding-left: 58px;
  margin-top: 9px;
}
.grafico-rotulo {
  flex: 1 1 0; min-width: 0;
  text-align: center;
  font-size: 11px;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.grafico-rotulo.atual { color: var(--texto-medio); font-weight: 650; }

/* Variantes de cor */
.grafico.laranja .grafico-barra { background: oklch(88% 0.075 62); }
.grafico.laranja .grafico-coluna:hover .grafico-barra,
.grafico.laranja .grafico-coluna.atual .grafico-barra { background: var(--laranja); }
.grafico.laranja .grafico-coluna.atual .grafico-valor { color: var(--laranja-texto); }

.grafico-legenda {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px 0;
  margin-top: 4px;
  border-top: 1px solid var(--borda-suave);
  font-size: 11.5px; color: var(--texto-suave);
}
.grafico-legenda-item { display: inline-flex; align-items: center; gap: 7px; }
.grafico-legenda-cor { width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 719px) {
  .grafico { --grafico-altura: 150px; padding: 18px 14px 12px; }
  .grafico-area, .grafico-rotulos { padding-left: 46px; gap: 6px; }
  .grafico-grade { inset: 0 0 0 46px; }
  .grafico-valor { font-size: 10px; }
  .grafico-rotulo { font-size: 10px; }
}

/* --- Miniatura do veículo ---
   Foto quando existe; silhueta pintada com a cor cadastrada quando não. */

.veiculo-foto {
  border-radius: var(--raio-p);
  overflow: hidden;
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie-3));
  border: 1px solid var(--borda);
  flex-shrink: 0;
  display: grid; place-items: center;
  position: relative;
}
/* `contain`, não `cover`: a foto já vem recortada com fundo transparente, e
   cortar as bordas comeria o para-choque ou a roda. Uma moto quase quadrada
   e uma picape bem larga têm que caber inteiras no mesmo espaço. */
.veiculo-foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
}
.veiculo-foto svg { width: 88%; height: 88%; }
.veiculo-silhueta { background: var(--superficie-2); }

.veiculo-foto-p { width: 66px;  height: 40px; border-radius: var(--raio-xs); }
.veiculo-foto-m { width: 104px; height: 62px; }
.veiculo-foto-g { width: 100%;  height: 190px; border-radius: var(--raio); }
.veiculo-foto-g svg { width: 78%; height: 78%; }

/* Linha de veículo: miniatura + identificação */
.veiculo-linha { display: flex; align-items: center; gap: 13px; min-width: 0; }
.veiculo-identificacao { min-width: 0; }
.veiculo-placa {
  font-weight: 650; font-size: 13.5px;
  letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px;
}
.veiculo-modelo {
  font-size: 11.5px; color: var(--texto-suave); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Barra de progresso reutilizável --- */

.progresso {
  height: 10px;
  background: oklch(26% 0.014 165 / .08);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.progresso-preenchido {
  height: 100%;
  border-radius: var(--raio-pill);
  background: var(--primaria);
  transition: width var(--lento) var(--curva);
  animation: progresso-entra var(--lento) var(--curva) backwards;
}
@keyframes progresso-entra { from { width: 0 !important; } }
.progresso.fina { height: 6px; }
.progresso.grossa { height: 14px; }
.progresso-preenchido.laranja  { background: var(--laranja); }
.progresso-preenchido.amarelo  { background: var(--amarelo); }
.progresso-preenchido.vermelho { background: var(--vermelho); }

.progresso-rotulos {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;
  font-size: 12px;
}
.progresso-rotulos .valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Barra de proporção dentro da tabela ---
   Uma coluna de números não mostra a diferença entre 800 e 8.000 até o olho
   ler os dois. A barra dá a proporção antes da leitura. */

.celula-proporcao { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.celula-proporcao .valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.barra-proporcao {
  width: 100%; max-width: 92px;
  height: 4px;
  background: oklch(26% 0.014 165 / .07);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.barra-proporcao span {
  display: block; height: 100%;
  border-radius: var(--raio-pill);
  background: var(--primaria-media);
}
tr:hover .barra-proporcao span { background: var(--primaria); }

/* --- Progressão de processo (etapas em linha) --- */

.progressao {
  display: flex; align-items: center;
  gap: 0;
  padding: 4px 0;
}
.progressao-passo {
  display: flex; align-items: center; gap: 9px;
  flex: 0 0 auto;
  font-size: 12.5px; font-weight: 550;
  color: var(--texto-fraco);
}
.progressao-bolinha {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie-3);
  border: 1.5px solid var(--borda-forte);
  font-size: 10.5px; font-weight: 700;
  flex-shrink: 0;
  transition: background var(--medio), border-color var(--medio), color var(--medio);
}
.progressao-bolinha .ico { width: 11px; height: 11px; vertical-align: 0; }
.progressao-passo.feito .progressao-bolinha {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
}
.progressao-passo.feito { color: var(--texto-medio); }
.progressao-passo.atual .progressao-bolinha {
  background: var(--superficie); border-color: var(--primaria); color: var(--primaria-escura);
  box-shadow: 0 0 0 4px oklch(60% 0.142 158 / .15);
}
.progressao-passo.atual { color: var(--texto); font-weight: 650; }
.progressao-traco {
  flex: 1 1 auto;
  height: 2px;
  min-width: 18px;
  margin: 0 10px;
  background: var(--borda);
  border-radius: var(--raio-pill);
  position: relative;
  overflow: hidden;
}
.progressao-traco.feito::after {
  content: ''; position: absolute; inset: 0;
  background: var(--primaria);
  animation: traco-preenche var(--lento) var(--curva) backwards;
}
@keyframes traco-preenche { from { transform: scaleX(0); transform-origin: left; } }

/* ==========================================================================
   13. ANIMAÇÕES DE ENTRADA

   Discretas e curtas. Servem para o olho encontrar o conteúdo novo, não para
   o usuário assistir a interface carregar.
   ========================================================================== */

@keyframes sobe-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.conteudo > .cartao,
.conteudo > .totais,
.conteudo > .filtros,
.conteudo > .etapas,
.conteudo > .grade-apuracao,
.conteudo > .apuracao-total,
.conteudo > .alerta {
  animation: sobe-entra var(--medio) var(--curva) backwards;
}
.conteudo > *:nth-child(2)  { animation-delay: .02s; }
.conteudo > *:nth-child(3)  { animation-delay: .05s; }
.conteudo > *:nth-child(4)  { animation-delay: .08s; }
.conteudo > *:nth-child(5)  { animation-delay: .11s; }
.conteudo > *:nth-child(6)  { animation-delay: .14s; }
.conteudo > *:nth-child(n+7){ animation-delay: .16s; }

/* Realce momentâneo de um registro recém-alterado */
@keyframes destaca {
  0%   { background: var(--primaria-clara); }
  100% { background: transparent; }
}
.recem-alterado { animation: destaca 2.2s var(--curva-suave); }

/* ==========================================================================
   14. IMPRESSÃO (usada para gerar PDF pelo navegador)
   ========================================================================== */

@media print {
  .menu, .topo, .nav-inferior, .faixa-imposto, .filtros,
  .pagina-acoes, .form-acoes, .col-acoes, .acoes-linha,
  .paginacao, .aviso-flutuante, .modal-fundo, .nao-imprimir {
    display: none !important;
  }
  body { background: #fff; font-size: 11px; }
  .app { padding: 0 !important; }
  .conteudo { padding: 0 !important; }
  .cartao, .total-item, .cartao-apuracao, .etapa, .resumo-item {
    box-shadow: none !important;
    border: 1px solid #d4d4d4 !important;
    break-inside: avoid;
  }
  table.tabela { font-size: 10px; }
  table.tabela td, table.tabela th { padding: 6px 8px; }
  table.tabela th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; }
  tr.linha-vermelho, tr.linha-laranja { background: #fff !important; }
  table.responsiva thead { display: table-header-group !important; }
  table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td {
    display: revert !important;
  }
  table.responsiva td::before { display: none !important; }
  a { color: inherit; text-decoration: none; }
  .imprimir-cabecalho { display: block !important; margin-bottom: 14px; }
}

.imprimir-cabecalho { display: none; }

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

/* Coluna de boleto na ficha do título (Contas a Receber com contrato) */
.boleto-celula { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.link-boleto {
  border: none; background: none; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--primaria);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.link-boleto:hover { color: var(--primaria-escura, var(--primaria)); }
.link-boleto.perigo { color: var(--vermelho-texto); }
.boleto-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- Logo de empresa e cliente ------------------------------------------- */

.logo-bloco { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.logo-previa {
  width: 128px; height: 128px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  /* Xadrez claro: logo com fundo transparente precisa mostrar que é
     transparente, senão parece que tem fundo branco. */
  background-color: var(--superficie-2);
  background-image:
    linear-gradient(45deg, oklch(26% 0.014 165 / .04) 25%, transparent 25%),
    linear-gradient(-45deg, oklch(26% 0.014 165 / .04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, oklch(26% 0.014 165 / .04) 75%),
    linear-gradient(-45deg, transparent 75%, oklch(26% 0.014 165 / .04) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  overflow: hidden;
}
.logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-iniciais {
  font-size: 34px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--texto-fraco);
}
.logo-acoes { flex: 1; min-width: 230px; }

/* Marca do cliente ou da empresa em linha, nas listagens e cabeçalhos */
.marca-mini {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie);
  overflow: hidden;
  font-size: 11px; font-weight: 700; color: var(--texto-fraco);
}
.marca-mini img { width: 100%; height: 100%; object-fit: contain; }
.linha-com-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.linha-com-marca > span:last-child { min-width: 0; }