/* 00-tokens.css */
/* =====================================================================
   Gestor Financeiro - TOKENS DO DESIGN SYSTEM
   Unica fonte de cores, fontes, tamanhos e espacos. Nenhum outro arquivo
   deve ter cor, tamanho de fonte ou espaco "no olho": use estas variaveis.
   Os arquivos .css desta pasta sao juntos em /css/app.css (ver src/css.js),
   na ordem do nome. A pagina /estilo.html mostra todos os componentes.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

/* Camadas: a ultima vence, entao utilitarios sempre ganham dos componentes. */
@layer reset, base, layout, componentes, utilitarios, impressao;

:root {
  /* ------------------------------ tipografia ----------------------------- */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* escala de tamanhos de fonte (so estes). --escala-fonte diminui TODAS de uma vez em telas menores (ver o fim
     deste arquivo); o 11px e o piso de leitura e nunca diminui. */
  --escala-fonte: 1;
  --fs-11: 11px;
  --fs-12: calc(12px * var(--escala-fonte));
  --fs-13: calc(13px * var(--escala-fonte));
  --fs-14: calc(14px * var(--escala-fonte));
  --fs-16: calc(16px * var(--escala-fonte));
  --fs-18: calc(18px * var(--escala-fonte));
  --fs-20: calc(20px * var(--escala-fonte));
  --fs-22: calc(22px * var(--escala-fonte));
  --fs-24: calc(24px * var(--escala-fonte));
  --fs-32: calc(32px * var(--escala-fonte));

  /* ------------------------------- espacamento --------------------------- */
  /* escala de espacos para padding, margin e gap (so estes) */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* --------------------------------- cores ------------------------------- */
  /* superficies e texto */
  --fundo: #f4f5f7;
  --fundo-cartao: #ffffff;
  --fundo-sutil: #fafbfc;
  --hover: #f7f8fa;
  --borda: #e3e6ea;
  --borda-suave: #eef0f3;
  --borda-forte: #cfd4da;
  --texto: #1c2128;
  --texto-suave: #5b6672;
  --texto-fraco: #8a949e;

  /* areas escuras (menu lateral, login, avisos) */
  --escuro: #140c14;
  --escuro-texto: #d9d4d9;
  --escuro-suave: #a39ba3;
  --escuro-secao: #798095; /* titulos de secao dentro dos submenus (ex.: Cadastros > Faturamento) */
  --escuro-hover: rgba(255, 255, 255, 0.08);
  --escuro-borda: rgba(255, 255, 255, 0.12);

  /* marca e estados */
  --primaria: #1d4ed8;
  --primaria-escura: #1739a8;
  --primaria-viva: #2a6bf2;
  --primaria-clara: #eaeeff;
  --primaria-borda: #cfd8ff;
  --sucesso: #0f7a48;
  --sucesso-claro: #e6f6ee;
  --sucesso-borda: #bfe5d1;
  --alerta: #a35a00;
  --alerta-claro: #fdf2e2;
  --alerta-borda: #f1d9ae;
  --faixa-qa: #ffde21; /* faixa do ambiente de testes (QA) */
  --faixa-simulacao: #6d28d9; /* faixa da visao simulada (administrador vendo o portal de outra pessoa) */
  --faixa-simulacao-texto: #ffffff;
  --faixa-2fa: #b3261e; /* faixa da verificacao em duas etapas desligada por emergencia (so administradores) */
  --faixa-2fa-texto: #ffffff;
  --erro: #b3261e;
  --erro-claro: #fdecea;
  --erro-borda: #f3cdc9;
  --neutro-claro: #eef0f3;

  /* ------------------------- raios, sombras, camadas --------------------- */
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 12px;
  --raio-pilula: 999px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --sombra-alta: 0 10px 30px rgba(16, 24, 40, 0.14);
  --altura-controle: 38px; /* campos e botoes dos filtros */
  --z-aviso: 60;
  --rapido: 0.15s;

  /* ---------------------------------- icones ----------------------------- */
  --icone-tamanho: 1.25em;
  --icone-traco: 1.5;
}

/* Telas menores: so as FONTES diminuem, de forma sutil (espacos e larguras ficam como estao). Decisao do Rodrigo
   (notebook de 1280px). Na impressao a escala volta a 1. */
@media (max-width: 1440px) {
  :root {
    --escala-fonte: 0.96;
  }
}

@media (max-width: 1280px) {
  :root {
    --escala-fonte: 0.93;
  }
}

@media print {
  :root {
    --escala-fonte: 1;
  }
}

/* 10-base.css */
/* ------------------------------- reset -------------------------------- */

@layer reset {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
}

/* -------------------------------- base -------------------------------- */

@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--fs-14);
    line-height: 1.5;
    background: var(--fundo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
  }

  h1 {
    font-size: var(--fs-22);
  }

  h2 {
    font-size: var(--fs-16);
  }

  h3 {
    font-size: var(--fs-16);
  }

  table,
  input,
  button,
  select,
  textarea {
    font-family: var(--font-body);
  }

  table {
    font-variant-numeric: tabular-nums;
  }

  small {
    font-size: var(--fs-12);
  }

  :focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
  }

  [hidden] {
    display: none !important;
  }
}

/* 20-layout.css */
@layer layout {
  /* -------------------------------- login -------------------------------- */

  .login {
    min-height: calc(100vh - var(--faixa-altura, 0px));
    display: grid;
    place-items: center;
    padding: var(--sp-24);
    background: var(--escuro);
  }

  .login__caixa {
    width: 100%;
    max-width: 400px;
    background: var(--fundo-cartao);
    border-radius: var(--raio-g);
    padding: var(--sp-32);
    box-shadow: var(--sombra-alta);
    display: grid;
    gap: var(--sp-16);
  }

  .login__marca {
    text-align: center;
    margin-bottom: var(--sp-4);
  }

  .login__marca p {
    margin-top: var(--sp-8);
    color: var(--texto-suave);
    font-size: var(--fs-13);
  }

  .login__link {
    justify-self: center;
    font-size: var(--fs-13);
  }

  /* Mesmo logotipo circular da MOBSIM do menu lateral. */
  .login__logo {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-12);
    border-radius: 50%;
    object-fit: cover;
  }

  /* Tres niveis de texto: titulo (grande), subtitulo (medio) e apoio (pequeno, em .login__marca p). */
  .login__marca h1 {
    font-size: var(--fs-24);
    line-height: 1.25;
  }

  .login__marca h2 {
    margin-top: var(--sp-16);
    font-size: var(--fs-18);
    line-height: 1.3;
  }

  /* Faixa de ambiente de testes (APP_AMBIENTE=staging): fixa no topo, so aparece no QA, nunca em producao.
     --faixa-altura empurra o conteudo (e a altura do menu) para baixo da faixa. */
  /* As faixas fixas do topo se empilham: QA (40px) e, embaixo dela, a da visao simulada (44px, ver
     30-componentes/faixa-simulacao.css) e, por ultimo, a do 2FA desligado (36px, 30-componentes/faixa-2fa.css).
     --faixa-altura e a soma das tres. */
  body {
    --faixa-altura: calc(
      var(--faixa-qa-altura, 0px) + var(--faixa-simulacao-altura, 0px) + var(--faixa-2fa-altura, 0px)
    );
    padding-top: var(--faixa-altura);
  }

  body[data-ambiente='qa'] {
    --faixa-qa-altura: 40px;
  }

  body[data-simulacao] {
    --faixa-simulacao-altura: 44px;
  }

  body[data-duas-etapas-desligada] {
    --faixa-2fa-altura: 36px;
  }

  body[data-ambiente='qa']::before {
    content: 'AMBIENTE DE TESTES (QA) · Não é o sistema de produção';
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 9999;
    height: var(--faixa-qa-altura);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--faixa-qa);
    color: var(--texto);
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* ------------------------------- estrutura ------------------------------ */

  .app {
    display: grid;
    grid-template-columns: 268px 1fr;
    min-height: calc(100vh - var(--faixa-altura, 0px));
  }

  .conteudo {
    padding: var(--sp-24) var(--sp-32) var(--sp-48);
    max-width: 1280px;
    width: 100%;
    /* permite que as tabelas largas rolem dentro do cartao em vez de
       empurrarem a largura da pagina inteira no celular */
    min-width: 0;
    overflow-x: hidden;
  }

  .carregando {
    color: var(--texto-suave);
    padding: var(--sp-40) 0;
  }

  /* ------------------------------ menu lateral ---------------------------- */

  .barra-lateral {
    background: var(--escuro);
    color: var(--escuro-texto);
    display: flex;
    flex-direction: column;
    padding: var(--sp-20) var(--sp-12);
    gap: var(--sp-24);
    position: sticky;
    top: var(--faixa-altura, 0px);
    height: calc(100vh - var(--faixa-altura, 0px));
  }

  .barra-lateral__topo,
  .barra-lateral__rodape {
    flex: none;
  }

  .barra-lateral__topo {
    display: flex;
    gap: var(--sp-10);
    align-items: center;
    padding: 0 var(--sp-6);
  }

  /* Logotipo da MOBSIM, recortado em circulo. */
  .barra-lateral__logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .barra-lateral__topo strong {
    display: block;
    font-size: var(--fs-14);
    line-height: 1.3;
  }

  .barra-lateral__topo small {
    color: var(--escuro-suave);
    font-size: var(--fs-12);
  }

  .menu {
    display: grid;
    gap: 2px;
    flex: 1;
    /* sem isto, as linhas do grid esticam e os botoes viram blocos gigantes */
    align-content: start;
    /* Telas baixas com todos os grupos abertos: so a lista rola; topo e rodape
       (usuario, Seguranca, Sair) continuam visiveis dentro dos 100vh do menu. */
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--escuro-borda) transparent;
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    width: 100%;
    padding: var(--sp-10) var(--sp-12);
    border: 0;
    border-radius: var(--raio-p);
    background: transparent;
    color: var(--escuro-texto);
    font: inherit;
    font-size: var(--fs-14);
    text-align: left;
    cursor: pointer;
  }

  .menu__item .icone {
    width: 20px;
    height: 20px;
    color: #fff;
  }

  .menu__item:hover {
    background: var(--escuro-hover);
    color: #fff;
  }

  .menu__item[aria-current='page'] {
    background: var(--primaria);
    color: #fff;
    font-weight: 600;
  }

  /* Grupo "Cadastros" com submenus que abre e fecha. */
  .menu__grupo .menu__seta {
    margin-left: auto;
    width: 16px;
    height: 16px;
    transition: transform var(--rapido);
  }

  .menu__grupo[aria-expanded='true'] .menu__seta {
    transform: rotate(90deg);
  }

  /* Grupo fechado, mas com a tela atual dentro dele: continua realcado. */
  .menu__grupo[data-filho-ativo][aria-expanded='false'] {
    background: var(--escuro-hover);
    color: #fff;
  }

  /* Grupo de itens do rodape (Seguranca, Sair): mesmo espacamento dos itens do menu. */
  .menu__bloco {
    display: grid;
    gap: 2px;
  }

  .submenu {
    display: grid;
    gap: 2px;
    margin-left: var(--sp-16);
    padding-left: var(--sp-8);
    border-left: 1px solid var(--escuro-borda);
  }

  /* Item do menu que e um LINK (ex.: Administrativo > Saude, abre /api/saude em outra aba): sem sublinhado. */
  a.menu__item {
    text-decoration: none;
  }

  .menu__item--sub {
    padding: var(--sp-8) var(--sp-12);
    font-size: var(--fs-13);
    /* rotulos longos (ex.: Enriquecimento/Fornecimento) quebram em vez de vazar */
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* Titulo de secao dentro de um submenu (ex.: Cadastros > "Faturamento"): so separador visual, nao abre nem
     fecha nada. Fonte menor, semibold, cor discreta; mais espaco entre as secoes do que entre os itens. */
  .submenu__titulo {
    margin: var(--sp-16) 0 var(--sp-4);
    padding: 0 var(--sp-12);
    color: var(--escuro-secao);
    font-size: var(--fs-11);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .submenu__titulo:first-child {
    margin-top: var(--sp-4);
  }

  /* Contador (ex.: clientes pendentes) ao lado de um item do menu. Some quando nao ha nada pendente. */
  .menu__contador {
    margin-left: auto;
    min-width: 20px;
    padding: 0 var(--sp-8);
    border-radius: 999px;
    background: var(--primaria);
    color: #fff;
    font-size: var(--fs-11);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
  }

  /* A seta de um grupo fica SEMPRE colada na direita (margin-left: auto). So quando o contador (soma dos submenus)
     esta visivel ele ocupa o espaco do meio e a seta ganha um respiro; escondido, nao interfere na seta. */
  .menu__grupo .menu__contador:not([hidden]) + .menu__seta {
    margin-left: var(--sp-8);
  }

  /* Grupo dentro de grupo (ex.: Deducoes > Custo de Canal): um degrau a mais de recuo. */
  .submenu .submenu {
    margin-left: var(--sp-8);
  }

  .barra-lateral__rodape {
    border-top: 1px solid var(--escuro-borda);
    padding-top: var(--sp-12);
    display: grid;
    /* minmax(0, 1fr): a coluna nunca cresce por causa do texto (senao o e-mail alargaria o menu) */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .usuario {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    padding: 0 var(--sp-4);
  }

  .usuario__inicial {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--primaria);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--fs-13);
  }

  /* Nome e e-mail SEMPRE em uma linha so: se for maior que o espaco, termina em "..."
     (o texto completo aparece ao passar o mouse, via title). */
  .usuario > div {
    min-width: 0;
  }

  .usuario strong,
  .usuario small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .usuario strong {
    font-size: var(--fs-13);
  }

  .usuario small {
    color: var(--escuro-suave);
    font-size: var(--fs-12);
  }

  /* -------------------------- cabecalhos de pagina ------------------------ */

  .pagina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-12);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--sp-20);
  }

  .pagina__cabecalho h1 {
    font-size: var(--fs-22);
  }

  .pagina__cabecalho p {
    margin-top: var(--sp-4);
    color: var(--texto-suave);
    font-size: var(--fs-13);
  }

  .acoes {
    display: flex;
    gap: var(--sp-8);
    flex-wrap: wrap;
    align-items: center;
  }

  /* ---------------------------------- grade ------------------------------- */

  .grade-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--sp-20);
  }

  .grade-2 .cartao + .cartao {
    margin-top: 0;
  }

  /* -------------------------------- relatorio ----------------------------- */

  .relatorio__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-16);
    flex-wrap: wrap;
    padding-bottom: var(--sp-12);
    margin-bottom: var(--sp-20);
    border-bottom: 2px solid var(--texto);
  }

  .relatorio__cabecalho h1 {
    font-size: var(--fs-22);
  }

  .relatorio__cabecalho p {
    margin-top: var(--sp-4);
    color: var(--texto-suave);
    font-size: var(--fs-13);
  }

  .relatorio__rodape {
    margin-top: 10mm;
    font-size: 9pt;
    color: #555;
  }

  .somente-impressao {
    display: none;
  }

  /* ------------------------------- responsivo ----------------------------- */

  @media (max-width: 900px) {
    /* minmax(0, 1fr) impede que o conteudo da coluna estique a pagina */
    .app {
      grid-template-columns: minmax(0, 1fr);
    }

    .barra-lateral {
      position: static;
      height: auto;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--sp-12);
      padding: var(--sp-12) var(--sp-16);
      min-width: 0;
    }

    .barra-lateral__topo small {
      display: none;
    }

    .menu {
      display: flex;
      flex: 1 1 100%;
      overflow-x: auto;
      gap: var(--sp-4);
      min-width: 0;
    }

    .menu__item {
      width: auto;
      white-space: nowrap;
    }

    /* No celular o menu e uma faixa horizontal: os submenus entram na mesma faixa. */
    .menu__bloco {
      display: flex;
      gap: var(--sp-4);
    }

    .submenu {
      display: flex;
      gap: var(--sp-4);
      margin-left: 0;
      padding-left: 0;
      border-left: 0;
    }

    /* Na faixa horizontal do celular os titulos de secao nao cabem: ficam so os itens. */
    .submenu__titulo {
      display: none;
    }

    .barra-lateral__rodape {
      border-top: 0;
      padding-top: 0;
      display: flex;
      align-items: center;
      gap: var(--sp-10);
      margin-left: auto;
      min-width: 0;
    }

    .usuario small {
      display: none;
    }

    .usuario strong {
      max-width: 22vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .conteudo {
      padding: var(--sp-16) var(--sp-16) var(--sp-48);
    }
  }
}

/* 30-componentes/abas.css */
@layer componentes {
  /* Abas dentro de uma tela (ex.: Clientes | Grupos). */
  .abas {
    display: flex;
    gap: var(--sp-4);
    border-bottom: 1px solid var(--borda);
    margin-bottom: var(--sp-16);
  }

  .aba {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--sp-10) var(--sp-16);
    font: inherit;
    font-size: var(--fs-14);
    color: var(--texto-suave);
    cursor: pointer;
    margin-bottom: -1px;
  }

  .aba:hover {
    color: var(--texto);
  }

  .aba[aria-selected='true'] {
    color: var(--primaria);
    border-bottom-color: var(--primaria);
    font-weight: 600;
  }

  /* Contador de pendencias no titulo da aba (ex.: Comissoes Parceiros, uma aba por perfil). Mesmo visual do
     contador do menu; some quando e zero (hidden). */
  .aba__contador {
    display: inline-block;
    min-width: 20px;
    margin-left: var(--sp-8);
    padding: 0 var(--sp-8);
    border-radius: 999px;
    background: var(--primaria);
    color: #fff;
    font-size: var(--fs-11);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
  }
}

/* 30-componentes/acao-em-lote.css */
@layer componentes {
  /* Faixa de acao em lote (ex.: "Aplicar o mesmo projeto a todas as notas"): fica logo acima de uma tabela
     de escolhas e deixa definir de uma vez o mesmo valor para todas as linhas; depois se corrigem so as
     excecoes. <div class="acao-em-lote"><div class="acao-em-lote__texto"><strong>...</strong><span>...</span></div>
     controles</div> */
  .acao-em-lote {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-10) var(--sp-12);
    margin-bottom: var(--sp-12);
    padding: var(--sp-10) var(--sp-12);
    background: var(--primaria-clara);
    border: 1px solid var(--primaria-borda);
    border-radius: var(--raio);
  }

  /* Espaco reservado entre o cartao de filtros e a tabela para a faixa de lote: com a faixa visivel ela ganha
     respiro em cima; sem ela (vazio) o espaco some e a tabela mantem o mesmo respiro do filtro. */
  .zona-lote {
    margin-top: var(--sp-20);
  }

  .zona-lote:empty {
    display: none;
  }

  .zona-lote:empty + .cartao {
    margin-top: var(--sp-20);
  }

  .acao-em-lote__texto {
    flex: 1 1 220px;
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: var(--fs-12);
    color: var(--texto-suave);
  }

  .acao-em-lote__texto strong {
    font-size: var(--fs-13);
    color: var(--primaria-escura);
  }

  .acao-em-lote select {
    min-width: 200px;
  }
}

/* 30-componentes/alerta.css */
@layer componentes {
  /* Mensagem dentro da pagina ou da janela. */
  .alerta {
    padding: var(--sp-10) var(--sp-12);
    border-radius: var(--raio-p);
    font-size: var(--fs-13);
    grid-column: 1 / -1;
  }

  /* Aviso de tela (ex.: pendencias) seguido de cartao de filtros, indicadores ou abas: respiro padrao entre eles. */
  .alerta + .cartao,
  .alerta + .indicadores,
  .alerta + .abas {
    margin-top: var(--sp-16);
  }

  /* Aviso que vem DEPOIS de um cartao de filtros ou de indicadores: respiro em cima tambem. */
  .cartao + .alerta,
  .indicadores + .alerta {
    margin-top: var(--sp-16);
  }

  /* Lista de itens dentro do aviso (ex.: pendencias com botao de ir para a tela). */
  .alerta ul {
    list-style: disc;
    margin: var(--sp-8) 0 0;
    padding-left: var(--sp-20);
    display: grid;
    gap: var(--sp-6);
  }

  .alerta--erro {
    background: var(--erro-claro);
    color: var(--erro);
    border: 1px solid var(--erro-borda);
  }

  .alerta--aviso {
    background: var(--alerta-claro);
    color: var(--alerta);
    border: 1px solid var(--alerta-borda);
  }

  .alerta--info {
    background: var(--primaria-clara);
    color: var(--primaria-escura);
    border: 1px solid var(--primaria-borda);
  }

  .alerta--ok {
    background: var(--sucesso-claro);
    color: var(--sucesso);
    border: 1px solid var(--sucesso-borda);
  }

  /* Alerta com texto e botao lado a lado. */
  .alerta--linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
  }

  /* Aviso flutuante no canto da tela (UI.aviso). */
  .avisos {
    position: fixed;
    right: var(--sp-20);
    bottom: var(--sp-20);
    display: grid;
    gap: var(--sp-8);
    z-index: var(--z-aviso);
  }

  .aviso {
    background: var(--escuro);
    color: #fff;
    padding: var(--sp-12) var(--sp-16);
    border-radius: var(--raio-p);
    box-shadow: var(--sombra-alta);
    font-size: var(--fs-13);
    max-width: 340px;
    animation: entrar 0.18s ease-out;
  }

  .aviso--erro {
    background: #8f1d16;
  }

  .aviso--ok {
    background: #0b5c36;
  }

  @keyframes entrar {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

/* 30-componentes/botao.css */
@layer componentes {
  .botao {
    font: inherit;
    font-size: var(--fs-14);
    padding: var(--sp-8) var(--sp-16);
    border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte);
    background: #fff;
    color: var(--texto);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    white-space: nowrap;
  }

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

  .botao:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .botao--primario {
    background: var(--primaria);
    border-color: var(--primaria);
    color: #fff;
    font-weight: 600;
  }

  .botao--primario:hover {
    background: var(--primaria-escura);
    border-color: var(--primaria-escura);
  }

  .botao--bloco {
    width: 100%;
    justify-content: center;
    padding: var(--sp-10);
  }

  /* Botao so com icone (fechar, etc.). */
  .botao--icone {
    border: 0;
    background: transparent;
    padding: var(--sp-4) var(--sp-8);
    color: var(--texto-suave);
  }

  .botao--icone:hover {
    background: var(--neutro-claro);
  }

  .botao--perigo {
    color: var(--erro);
    border-color: #f0c4c1;
  }

  /* Perigo preenchido: botao de confirmar uma exclusao. */
  .botao--perigo-solido {
    background: var(--erro);
    border-color: var(--erro);
    color: #fff;
    font-weight: 600;
  }

  .botao--perigo-solido:hover {
    background: #a8322d;
    border-color: #a8322d;
  }

  .botao--perigo:hover {
    background: var(--erro-claro);
  }

  /* Destaque: botao de icone PREENCHIDO de azul com o icone branco, para a acao principal da linha
     (ex.: registrar recebimento). */
  .botao--destaque {
    background: var(--primaria);
    border-color: var(--primaria);
    color: #fff;
  }

  .botao--destaque:hover {
    background: var(--primaria-escura);
    border-color: var(--primaria-escura);
  }

  .botao--pequeno {
    padding: var(--sp-6) var(--sp-10);
    font-size: var(--fs-12);
  }

  /* Botao pequeno que so mostra um icone (editar, excluir...). */
  .botao--so-icone {
    padding: var(--sp-6);
  }

  /* Versao sem borda para ficar dentro de um texto/celula (ex.: lapis ao lado do Projeto). */
  .botao--compacto {
    padding: 2px;
    border-color: transparent;
    background: transparent;
    color: var(--texto-suave);
    vertical-align: middle;
  }

  .botao--compacto:hover {
    background: var(--hover);
    color: var(--texto);
  }

  .botao-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--primaria);
    cursor: pointer;
    text-align: left;
  }

  .botao-link:hover {
    text-decoration: underline;
  }
}

/* 30-componentes/cartao.css */
@layer componentes {
  .cartao {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
  }

  .cartao__cabecalho {
    padding: var(--sp-12) var(--sp-20);
    border-bottom: 1px solid var(--borda);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-10);
    flex-wrap: wrap;
  }

  .cartao__cabecalho h2 {
    font-size: var(--fs-16);
  }

  /* Rodape de cartao (ex.: paginacao): a linha fica em cima, nao embaixo. */
  .cartao__cabecalho--rodape {
    border-top: 1px solid var(--borda);
    border-bottom: 0;
  }

  .cartao__corpo {
    padding: var(--sp-20);
  }

  /* Nota de rodape do cartao (explica a tabela acima). */
  .cartao__nota {
    padding: var(--sp-10) var(--sp-20);
    border-top: 1px solid var(--borda);
    font-size: var(--fs-13);
  }

  .cartao--compacto {
    padding: var(--sp-12);
  }

  .cartao + .cartao {
    margin-top: var(--sp-20);
  }

  .vazio {
    padding: var(--sp-32) var(--sp-20);
    text-align: center;
    color: var(--texto-suave);
  }

  .vazio strong {
    display: block;
    color: var(--texto);
    margin-bottom: var(--sp-4);
  }

  .vazio--compacto {
    padding: var(--sp-10) 0 0;
    text-align: left;
  }

  .paginacao__texto {
    color: var(--texto-suave);
    font-size: var(--fs-13);
  }
}

/* 30-componentes/estilo.css */
/* Apenas para a pagina de referencia do design system (#estilo). */

@layer componentes {
  .estilo__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-12);
  }

  .estilo__amostra {
    height: 44px;
    border-radius: var(--raio-p);
    border: 1px solid var(--borda);
  }

  .estilo__legenda {
    margin-top: var(--sp-4);
    font-size: var(--fs-12);
    color: var(--texto-suave);
    word-break: break-all;
  }

  .estilo__icone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-12) var(--sp-4);
    border-radius: var(--raio-p);
    font-size: var(--fs-11);
    color: var(--texto-suave);
    text-align: center;
    word-break: break-all;
  }

  .estilo__icone .icone {
    width: 24px;
    height: 24px;
    color: var(--texto);
  }

  /* Mesma grade de icones sobre o fundo escuro do menu (contorno branco). */
  .estilo__grade--escura {
    background: var(--escuro);
    padding: var(--sp-12);
    border-radius: var(--raio-p);
  }

  .estilo__grade--escura .estilo__icone {
    color: var(--escuro-suave);
  }

  .estilo__grade--escura .estilo__icone .icone {
    color: #fff;
  }

  .estilo__linha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    align-items: center;
  }

  .estilo__secao + .estilo__secao {
    margin-top: var(--sp-20);
  }
}

/* 30-componentes/etiqueta.css */
@layer componentes {
  .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 2px var(--sp-8);
    border-radius: var(--raio-pilula);
    font-size: var(--fs-12);
    font-weight: 600;
    white-space: nowrap;
  }

  .etiqueta--pago {
    background: var(--sucesso-claro);
    color: var(--sucesso);
  }

  .etiqueta--pendente {
    background: var(--alerta-claro);
    color: var(--alerta);
  }

  .etiqueta--erro {
    background: var(--erro-claro);
    color: var(--erro);
  }

  .etiqueta--neutra {
    background: var(--neutro-claro);
    color: var(--texto-suave);
  }

  /* Bolinha de cor (categorias). A cor vem do dado, via style="background:...". */
  .ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 9px;
  }
}

/* 30-componentes/faixa-2fa.css */
/* Faixa da VERIFICACAO EM DUAS ETAPAS DESLIGADA (chave de emergencia DUAS_ETAPAS=desligado no Railway): fixa no topo,
   abaixo das faixas do QA e da visao simulada, so para administradores, para ninguem esquecer de religar o 2FA.
   Aparece quando o body tem data-duas-etapas-desligada (a altura entra em --faixa-altura, ver 20-layout.css). */
@layer componentes {
  .faixa-2fa {
    position: fixed;
    top: calc(var(--faixa-qa-altura, 0px) + var(--faixa-simulacao-altura, 0px));
    left: 0;
    right: 0;
    z-index: 9997;
    height: var(--faixa-2fa-altura, 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-16);
    background: var(--faixa-2fa);
    color: var(--faixa-2fa-texto);
    font-size: var(--fs-13);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Exemplo em /#estilo: a mesma faixa, sem ficar fixa. */
  .faixa-2fa--exemplo {
    position: static;
    height: 36px;
    border-radius: var(--raio);
  }
}

/* 30-componentes/faixa-estado.css */
@layer componentes {
  /* Faixa de estado de um periodo (ex.: Comissoes Parceiros: mes Aberto, Reaberto ou Fechado). Fica no FIM da tela,
     depois de tudo o que se confere: texto a esquerda (com um selo de estado e uma linha de apoio) e a acao a direita.
     <div class="faixa-estado faixa-estado--aberto|--fechado"><div><span class="faixa-estado__selo">Aberto</span>texto<small>apoio</small></div>
     <div class="acoes">botao</div></div> */
  .faixa-estado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: var(--fs-13);
    background: var(--fundo-cartao);
    color: var(--texto);
  }

  .faixa-estado small {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-11);
    color: var(--texto-suave);
  }

  .faixa-estado__selo {
    display: inline-block;
    margin-right: var(--sp-8);
    padding: 2px var(--sp-10);
    border-radius: 999px;
    font-size: var(--fs-11);
    font-weight: 600;
    background: var(--alerta-claro);
    color: var(--alerta);
  }

  .faixa-estado--fechado {
    background: var(--sucesso-claro);
    border-color: var(--sucesso-borda);
    color: var(--sucesso);
  }

  .faixa-estado--fechado small {
    color: var(--sucesso);
  }

  .faixa-estado--fechado .faixa-estado__selo {
    background: var(--sucesso);
    color: #fff;
  }

  /* Aprovacao do demonstrativo pelo parceiro (decisao do Rodrigo, 2026-10-28): Aguardando aprovacao = AMARELA, Aprovado = AZUL,
     Rejeitado = VERMELHA (e Fechado = verde, acima). */
  .faixa-estado--aguardando {
    background: var(--alerta-claro);
    border-color: var(--alerta-borda);
    color: var(--alerta);
  }

  .faixa-estado--aguardando small {
    color: var(--alerta);
  }

  .faixa-estado--aguardando .faixa-estado__selo {
    background: var(--alerta);
    color: #fff;
  }

  .faixa-estado--aprovado {
    background: var(--primaria-clara);
    border-color: var(--primaria-borda);
    color: var(--primaria);
  }

  .faixa-estado--aprovado small {
    color: var(--primaria);
  }

  .faixa-estado--aprovado .faixa-estado__selo {
    background: var(--primaria);
    color: #fff;
  }

  .faixa-estado--rejeitado {
    background: var(--erro-claro);
    border-color: var(--erro-borda);
    color: var(--erro);
  }

  .faixa-estado--rejeitado small {
    color: var(--erro);
  }

  .faixa-estado--rejeitado .faixa-estado__selo {
    background: var(--erro);
    color: #fff;
  }

  /* A faixa fica separada do bloco que vem antes (cartao) e do que vem depois (aviso, cartao). */
  .cartao + .faixa-estado {
    margin-top: var(--sp-20);
  }

  .faixa-estado + .alerta,
  .faixa-estado + .cartao {
    margin-top: var(--sp-16);
  }
}

/* 30-componentes/faixa-simulacao.css */
/* Faixa da VISAO SIMULADA (Administrativo > Visao Simulada): fixa no topo, logo abaixo da faixa do QA, enquanto o
   administrador ve o portal de um colaborador ou parceiro. Diz quem esta sendo simulado, que e so leitura, e tem o botao
   para sair. Aparece quando o body tem data-simulacao (a altura entra em --faixa-altura, ver 20-layout.css). */
@layer componentes {
  .faixa-simulacao {
    position: fixed;
    top: var(--faixa-qa-altura, 0px);
    left: 0;
    right: 0;
    z-index: 9998;
    height: var(--faixa-simulacao-altura, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-16);
    padding: 0 var(--sp-16);
    background: var(--faixa-simulacao);
    color: var(--faixa-simulacao-texto);
    font-size: var(--fs-14);
    font-weight: 600;
  }

  .faixa-simulacao__texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .faixa-simulacao__texto small {
    font-weight: 400;
    opacity: 0.9;
    margin-left: var(--sp-8);
  }

  .faixa-simulacao .botao {
    flex-shrink: 0;
  }

  /* Exemplo em /#estilo: a mesma faixa, sem ficar fixa. */
  .faixa-simulacao--exemplo {
    position: static;
    height: 44px;
    border-radius: var(--raio);
  }
}

/* 30-componentes/ficha.css */
@layer componentes {
  /* Ficha: pares "rotulo + valor" em grade (ex.: detalhe do colaborador). */
  .ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-12) var(--sp-16);
  }

  .ficha--largo {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .ficha__item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ficha__item > .texto-fraco {
    display: block;
    font-size: var(--fs-12);
    margin-bottom: 2px;
  }

  /* Secao recolhivel de campos opcionais dentro de um formulario em grade. */
  .form-secao {
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
    padding: var(--sp-12) var(--sp-16);
  }

  .form-secao > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-14);
  }

  .form-secao__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    margin-top: var(--sp-16);
  }

  @media (max-width: 700px) {
    .form-secao__grade {
      grid-template-columns: 1fr;
    }
  }

  /* Vinculo do colaborador com as empresas emissoras: uma linha por empresa (nome, Vinculo, Pagante). */
  .vinculos {
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
  }

  .vinculos__linha {
    display: flex;
    align-items: center;
    gap: var(--sp-20);
    padding: var(--sp-8) var(--sp-12);
  }

  .vinculos__linha + .vinculos__linha {
    border-top: 1px solid var(--borda-suave);
  }

  .vinculos__nome {
    flex: 1;
    min-width: 0;
  }

  /* Empresa + etiqueta (Pagante/Vinculada) lado a lado, na ficha. */
  .chip-empresa {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    margin: 0 var(--sp-8) var(--sp-4) 0;
  }

  /* Resumo da nota fiscal escolhida (lancamento de comissao e outros): itens lado a lado, separados por
     uma linha vertical. */
  .resumo-nota {
    display: grid;
    grid-template-columns: 0.8fr 1.1fr 1.5fr 1fr 1fr;
    gap: var(--sp-12) 0;
    padding: var(--sp-12) 0;
    background: var(--fundo-sutil);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
  }

  .resumo-nota > div {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0 var(--sp-16);
  }

  .resumo-nota > div + div {
    border-left: 1px solid var(--borda);
  }

  @media (max-width: 900px) {
    .resumo-nota {
      grid-template-columns: 1fr 1fr;
    }

    .resumo-nota > div + div {
      border-left: 0;
    }
  }

  .resumo-nota .texto-fraco {
    display: block;
    font-size: var(--fs-12);
    margin-bottom: 2px;
  }

  /* Caixa azul com o valor calculado (comissao calculada): rotulo, valor grande e detalhe. */
  .previa-comissao {
    padding: var(--sp-16) var(--sp-20);
    background: var(--primaria-clara);
    border: 1px solid var(--primaria-borda);
    border-radius: var(--raio);
    color: var(--primaria-escura);
  }

  .previa-comissao > span {
    font-size: var(--fs-13);
    font-weight: 600;
  }

  .previa-comissao__valor {
    font-size: var(--fs-22);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* Canais de um cliente na previa da importacao: chips removiveis + seletor para acrescentar. */
  .chip-canal {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    margin: 2px var(--sp-6) 2px 0;
    padding: 2px var(--sp-4) 2px var(--sp-10);
    border: 1px solid var(--primaria-clara);
    border-radius: 999px;
    background: var(--primaria-clara);
    color: var(--primaria);
    font-size: var(--fs-12);
  }

  .chip-canal button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .chip-canal button:hover {
    background: rgba(29, 78, 216, 0.15);
  }

  .chip-canal__novo {
    width: auto;
    max-width: 220px;
    padding: 2px var(--sp-8);
    font-size: var(--fs-12);
  }

  .chip-canal__notas {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }
}

/* 30-componentes/filtros-card.css */
@layer componentes {
  /* Cartao de filtros (ex.: Lancamentos): cabecalho, duas linhas de campos separadas por
     uma linha discreta e acoes alinhadas a direita. */
  .filtros-card__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
    flex-wrap: wrap;
    padding: var(--sp-20) var(--sp-20) 0;
  }

  .filtros-card__titulo {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
  }

  .filtros-card__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--raio-g);
    background: var(--primaria-clara);
    color: var(--primaria);
  }

  .filtros-card__titulo p {
    font-size: var(--fs-13);
    color: var(--texto-suave);
  }

  .filtros-card__corpo {
    padding: var(--sp-16) var(--sp-20) var(--sp-20);
  }

  .filtros-card__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-16);
  }

  /* Primeira linha: campos alinhados pelo topo. */
  .filtros-card__linha--topo {
    align-items: flex-start;
  }

  .filtros-card__linha > .campo {
    flex: 1 1 140px;
    min-width: 0;
  }

  .filtros-card__linha > .campo--fixo {
    flex: 0 1 200px;
  }

  .filtros-card__linha > .campo--cresce {
    flex: 1 1 280px;
  }

  /* Campo de mes com setas (Mensal.navegacaoMes) ao lado de outros filtros: largura reservada para as duas setas e o
     mes por extenso; sem isso ele encolhia e a seta da direita ficava por baixo do filtro seguinte. */
  .filtros-card__linha > .campo:has(> .periodo__navegacao) {
    flex: 0 0 300px;
  }

  .filtros-card__divisor {
    align-self: stretch;
    width: 1px;
    background: var(--borda);
  }

  /* Na primeira linha o divisor so aparece quando tudo cabe numa linha so (tela larga);
     se o periodo quebrar para baixo, um divisor solto ficaria estranho. */
  .filtros-card__divisor--largo {
    display: none;
  }

  @media (min-width: 1200px) {
    .filtros-card__divisor--largo {
      display: block;
    }
  }

  .filtros-card__separador {
    margin: var(--sp-16) 0;
    border: 0;
    border-top: 1px solid var(--borda);
  }

  .filtros-card__acoes {
    display: flex;
    gap: var(--sp-8);
    margin-left: auto;
  }

  /* Campos e botoes do cartao com a mesma altura. */
  .filtros-card .campo input,
  .filtros-card .campo select,
  .filtros-card .periodo__datas input,
  .filtros-card .botao {
    height: var(--altura-controle);
  }

  .filtros-card .campo > span,
  .campo__rotulo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--texto);
  }

  .campo__rotulo .icone,
  .filtros-card .campo > span .icone {
    color: var(--texto-suave);
  }

  /* ------------------------- periodo de emissao ------------------------- */

  .periodo {
    flex: 1.6 1 300px;
    min-width: 0;
    display: grid;
    gap: var(--sp-4);
  }

  /* As caixas de mes/ano tem largura minima (formulario.css): o periodo precisa de espaco para elas, senao a linha
     estoura e o campo final fica por baixo do filtro seguinte. Quando nao cabe, os outros filtros descem para a linha de baixo. */
  .periodo:has(> .periodo__navegacao) {
    flex-basis: 340px;
  }

  .periodo:has(> .periodo__datas) {
    flex-basis: 520px;
  }

  .periodo__navegacao {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .periodo__navegacao .campo {
    flex: 1;
    min-width: 0;
  }

  /* Campo de mes dentro da navegacao (ex.: janelas de lancamento): ocupa o espaco entre as setas. */
  .periodo__navegacao > input,
  .periodo__navegacao > .campo--icone {
    flex: 1;
    min-width: 0;
  }

  .periodo__navegacao .campo--ano {
    flex: 0 0 96px;
  }

  .periodo__navegacao .botao {
    width: var(--altura-controle);
    padding: 0;
    justify-content: center;
    flex: none;
  }

  /* As setas e a caixa do mes tem a MESMA altura em qualquer tela (nao so dentro do cartao de filtros, como na Visao
     Geral): sem isso as setas ficavam menores do que a caixa. */
  .periodo__navegacao .botao,
  .periodo__navegacao .campo--icone input,
  .periodo__navegacao .campo select {
    height: var(--altura-controle);
  }

  .periodo__aplicado {
    font-size: var(--fs-12);
    color: var(--texto-suave);
  }

  .periodo__datas {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
  }

  .periodo__datas input {
    flex: 1;
    min-width: 0;
  }

  .periodo__ate {
    color: var(--texto-suave);
    font-size: var(--fs-13);
  }

  .campo__erro {
    font-size: var(--fs-12);
    color: var(--erro);
  }

  /* ------------------------------- responsivo ------------------------------ */

  @media (max-width: 900px) {
    .filtros-card__divisor {
      display: none;
    }
  }

  @media (max-width: 700px) {
    .filtros-card__linha > .campo,
    .filtros-card__linha > .campo--fixo,
    .filtros-card__linha > .campo--cresce,
    .periodo,
    .periodo:has(> .periodo__navegacao),
    .periodo:has(> .periodo__datas) {
      flex: 1 1 100%;
    }

    /* Celular: mes inicial/ano inicial e mes final/ano final em duas linhas, sem estourar a largura. */
    .periodo__datas {
      flex-wrap: wrap;
    }

    /* Celular: "Filtrar" ocupa a linha toda; "Mes atual" e "Limpar" dividem a de baixo. */
    .filtros-card__acoes {
      flex: 1 1 100%;
      flex-wrap: wrap;
    }

    .filtros-card__acoes .botao {
      flex: 1 1 0;
      justify-content: center;
      min-width: 0;
    }

    .filtros-card__acoes .botao--primario {
      flex-basis: 100%;
    }
  }
}

/* 30-componentes/formulario.css */
@layer componentes {
  .filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-12);
    align-items: end;
  }

  .filtros--2col {
    grid-template-columns: 1fr 1fr;
  }

  .form--estreito {
    max-width: 620px;
  }

  .campo {
    display: grid;
    gap: var(--sp-4);
    font-size: var(--fs-13);
  }

  .campo > span {
    color: var(--texto-suave);
    font-weight: 600;
    font-size: var(--fs-12);
  }

  /* Os campos de data do periodo personalizado (.periodo__datas) nao ficam dentro de um .campo: usam o mesmo visual. */
  .campo input,
  .campo select,
  .campo textarea,
  .periodo__datas input {
    font: inherit;
    font-size: var(--fs-14);
    padding: var(--sp-8) var(--sp-10);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: #fff;
    color: var(--texto);
    width: 100%;
  }

  /* Caixas de MES (janeiro a dezembro) e de ANO: largura minima = a do maior nome ("Fevereiro", "2026") + preenchimento
     + seta, para o texto nunca ser cortado. So fixa o piso: onde a caixa ja e maior (min-w-140, flex, etc.), nada muda.
     Escala com --fs-14 (acompanha a escala de fonte por tela). */
  .campo:has(> select[name$='_mes']),
  .campo:has(> select[name='mes']),
  .campo:has(> select[name='mes_numero']),
  .campo:has(> select[aria-label^='Mês']),
  .campo:has(> select#rel-mes) {
    min-width: calc(var(--fs-14) * 5.6 + var(--sp-10) * 2 + 28px);
  }

  .campo:has(> select[name$='_ano']),
  .campo:has(> select[aria-label^='Ano']),
  .campo:has(> select#rel-ano) {
    min-width: calc(var(--fs-14) * 2.8 + var(--sp-10) * 2 + 28px);
  }

  /* Campo com icone dentro, a esquerda (ex.: login). O <svg class="icone"> vem antes do input. */
  .campo--icone {
    position: relative;
  }

  .campo--icone .icone {
    position: absolute;
    left: var(--sp-12);
    top: 50%;
    translate: 0 -50%;
    color: var(--texto-fraco);
    pointer-events: none;
  }

  .campo--icone input {
    padding-left: var(--sp-40);
  }

  .campo--icone:focus-within .icone {
    color: var(--primaria);
  }

  .campo input:focus,
  .campo select:focus,
  .campo textarea:focus,
  .periodo__datas input:focus {
    outline: 2px solid var(--primaria);
    outline-offset: -1px;
    border-color: var(--primaria);
  }

  .campo textarea {
    resize: vertical;
  }

  .campo--largo {
    grid-column: 1 / -1;
  }

  .campo--estreito {
    max-width: 240px;
  }

  .campo--checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
  }

  .campo--checkbox input {
    width: auto;
    margin: 0;
  }

  .campo--checkbox span {
    color: var(--texto);
    font-weight: 400;
    font-size: var(--fs-13);
  }

  /* Campo avulso (fora de um .campo), ex.: nome do novo grupo, nova categoria. */
  .entrada {
    font: inherit;
    font-size: var(--fs-14);
    padding: var(--sp-8) var(--sp-10);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: #fff;
    color: var(--texto);
  }

  .entrada--larga {
    min-width: 260px;
  }

  .entrada--cor {
    width: 40px;
    height: 36px;
    padding: 2px;
  }

  /* Seletor de periodo com setas (mes anterior / proximo). */
  .campo__grupo {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
  }

  .campo__grupo input {
    min-width: 0;
    flex: 1;
  }
}

/* 30-componentes/grafico.css */
@layer componentes {
  .barra-fundo {
    height: 7px;
    background: var(--neutro-claro);
    border-radius: var(--raio-pilula);
    overflow: hidden;
    min-width: 70px;
  }

  /* A largura e a cor vem do dado (style="width:..;background:.."). */
  .barra-fundo > i {
    display: block;
    height: 100%;
    border-radius: var(--raio-pilula);
  }

  .grafico-colunas {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-8);
    height: 190px;
    padding-top: var(--sp-8);
  }

  .coluna {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-6);
    min-width: 0;
    height: 100%;
  }

  .coluna__barra {
    width: 100%;
    max-width: 46px;
    background: linear-gradient(180deg, var(--primaria-viva), var(--primaria));
    border-radius: 5px 5px 2px 2px;
    min-height: 3px;
    position: relative;
  }

  .coluna--atual .coluna__barra {
    background: linear-gradient(180deg, var(--sucesso), #0b5c36);
  }

  .coluna__rotulo {
    font-size: var(--fs-11);
    color: var(--texto-fraco);
    white-space: nowrap;
  }

  .coluna__valor {
    font-size: var(--fs-11);
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
  }
}

/* 30-componentes/icone.css */
/* ICONES
   Estilo (vale para todo icone novo): contorno, sem preenchimento, grade 24x24,
   traco de 1,5px, pontas e cantos arredondados, cor = currentColor (herda do texto:
   branco nos fundos escuros, cinza-escuro nos claros). Os desenhos ficam em
   public/icons/sprite.svg e sao usados com UI.icone('nome'). */

@layer componentes {
  .icone {
    width: var(--icone-tamanho);
    height: var(--icone-tamanho);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icone-traco);
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.22em;
  }

  .icone--p {
    width: 16px;
    height: 16px;
  }

  .icone--g {
    width: 24px;
    height: 24px;
  }
}

/* 30-componentes/indicador.css */
@layer componentes {
  .indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
    gap: var(--sp-12);
    margin-bottom: var(--sp-16);
  }

  .indicadores--modal {
    margin-bottom: 0;
  }

  .indicador {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--sp-12) var(--sp-16);
    box-shadow: var(--sombra);
  }

  .indicador__rotulo {
    font-size: var(--fs-11);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-fraco);
    font-weight: 600;
  }

  .indicador__valor {
    font-size: var(--fs-20);
    font-weight: 700;
    margin-top: var(--sp-4);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .indicador__nota {
    font-size: var(--fs-11);
    color: var(--texto-suave);
    margin-top: var(--sp-4);
  }

  .indicador--destaque {
    background: linear-gradient(135deg, #1d4ed8, #2a6bf2);
    border-color: transparent;
    color: #fff;
  }

  .indicador--destaque .indicador__rotulo,
  .indicador--destaque .indicador__nota {
    color: rgba(255, 255, 255, 0.85);
  }

  .variacao {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    font-weight: 600;
  }

  .variacao--alta {
    color: var(--erro);
  }

  .variacao--baixa {
    color: var(--sucesso);
  }

  .indicador--destaque .variacao--alta,
  .indicador--destaque .variacao--baixa {
    color: #fff;
  }
}

/* 30-componentes/memoria-calculo.css */
@layer componentes {
  /* Memoria de calculo de uma nota (Comissoes Parceiros): do valor cheio a comissao, em blocos.
     <div class="memoria">
       <div class="memoria__topo">cliente e dados da nota</div>
       <div class="memoria__bloco memoria__bloco--cheio"><div class="memoria__linha"><span>...</span><span>R$</span></div></div>
       <div class="memoria__bloco"> <div class="memoria__grupo"><div class="memoria__linha">deducao</div><ul class="memoria__itens">...</ul></div> ... </div>
       <div class="memoria__bloco memoria__bloco--base">...</div>
       <div class="memoria__bloco memoria__bloco--comissao">...</div>
     </div>
     Valor cheio = azul das notas; deducoes sem negrito (valor em vermelho); comissao final = verde do sistema. */
  .memoria {
    display: grid;
    gap: var(--sp-10);
  }

  .memoria__topo {
    padding-bottom: var(--sp-4);
  }

  .memoria__topo .texto-fraco {
    display: block;
  }

  .memoria__bloco {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo-cartao);
    overflow: hidden;
  }

  .memoria__linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-12);
    padding: var(--sp-10) var(--sp-16);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .memoria__linha small {
    color: var(--texto-fraco);
    font-size: var(--fs-12);
  }

  .memoria__grupo + .memoria__grupo {
    border-top: 1px solid var(--borda);
  }

  /* Detalhe de uma deducao (canais, custos, comissoes): linhas menores recuadas. */
  .memoria__itens {
    list-style: none;
    margin: 0;
    padding: 0 var(--sp-16) var(--sp-10) var(--sp-32);
    display: grid;
    gap: var(--sp-4);
    font-size: var(--fs-12);
    color: var(--texto-suave);
  }

  .memoria__itens li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-12);
    font-variant-numeric: tabular-nums;
  }

  .memoria__itens li > span:first-child {
    min-width: 0;
  }

  .memoria__valor--deducao {
    color: var(--erro);
  }

  .memoria__valor--credito {
    color: var(--sucesso);
  }

  .memoria__bloco--cheio {
    background: var(--primaria-clara);
    border-color: var(--primaria-borda);
    color: var(--primaria-escura);
  }

  .memoria__bloco--cheio .memoria__linha {
    font-weight: 600;
  }

  .memoria__bloco--base {
    background: var(--fundo-sutil);
  }

  .memoria__bloco--base .memoria__linha {
    font-weight: 600;
  }

  .memoria__bloco--comissao {
    background: var(--sucesso-claro);
    border-color: var(--sucesso-borda);
    color: var(--sucesso);
  }

  .memoria__bloco--comissao .memoria__linha {
    font-size: var(--fs-16);
    font-weight: 700;
  }

  .memoria__bloco--comissao small {
    color: var(--sucesso);
    font-weight: 400;
  }

  /* Divisao do total final por empresa emissora (dentro do bloco verde do total a pagar). */
  .memoria__empresas {
    list-style: none;
    margin: 0;
    padding: var(--sp-8) var(--sp-16) var(--sp-12);
    border-top: 1px solid var(--sucesso-borda);
    display: grid;
    gap: var(--sp-6);
    font-size: var(--fs-13);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .memoria__empresas li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-12);
  }

  .memoria__empresas .memoria__empresas-titulo {
    display: block;
    font-size: var(--fs-11);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }

  .memoria__empresas-valor {
    font-weight: 600;
  }
}

/* 30-componentes/modal.css */
@layer componentes {
  .modal {
    border: 0;
    border-radius: var(--raio-g);
    padding: 0;
    width: min(760px, calc(100vw - 32px));
    box-shadow: var(--sombra-alta);
    color: var(--texto);
  }

  /* Janela curta de pergunta/confirmacao (UI.perguntar, UI.formulario, UI.confirmar). */
  .modal--compacto {
    width: min(440px, calc(100vw - 32px));
  }

  /* Pergunta com texto longo (UI.formulario com `largo: true` e campo `tipo: 'textarea'`): janela mais larga e caixa de texto alta. */
  .modal--medio {
    width: min(640px, calc(100vw - 32px));
  }

  .modal--compacto .modal__corpo {
    max-height: none;
  }

  .modal--largo {
    width: min(1040px, calc(100vw - 32px));
  }

  .modal::backdrop {
    background: rgba(20, 12, 20, 0.55);
  }

  .modal__cabecalho {
    padding: var(--sp-16) var(--sp-20);
    border-bottom: 1px solid var(--borda);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal__cabecalho h2 {
    font-size: var(--fs-16);
  }

  .modal__corpo {
    padding: var(--sp-20);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    max-height: min(66vh, 560px);
    overflow-y: auto;
  }

  /* Corpo em fluxo normal (o padrao do .modal__corpo e uma grade de 2 colunas). */
  .modal__corpo--bloco {
    display: block;
    max-height: min(70vh, 640px);
  }

  /* Janela larga (ex.: Subir faturas): corpo mais alto para a tabela de linhas aparecer inteira. */
  .modal--largo .modal__corpo--bloco {
    max-height: min(88vh, 900px);
  }

  .modal__corpo--bloco > * + * {
    margin-top: var(--sp-16);
  }

  .modal__rodape {
    padding: var(--sp-12) var(--sp-20);
    border-top: 1px solid var(--borda);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-8);
    background: var(--fundo-sutil);
  }

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

  /* Area para escolher o arquivo CSV ("Subir Faturas"). */
  .caixa-arquivo {
    border: 2px dashed var(--borda-forte);
    border-radius: var(--raio);
    padding: var(--sp-32) var(--sp-20);
    text-align: center;
    background: var(--fundo-sutil);
    color: var(--texto-suave);
  }

  .caixa-arquivo input[type='file'] {
    margin-top: var(--sp-12);
    max-width: 100%;
  }
}

/* 30-componentes/passos.css */
@layer componentes {
  /* Indicador de etapas de um assistente (ex.: Subir Faturas: Grupos > Projeto > Canais > Visao final).
     <ol class="passos"><li class="passos__item passos__item--atual|--feito"><span class="passos__num">1</span>Rotulo</li></ol> */
  .passos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .passos__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-6);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    color: var(--texto-fraco);
    font-size: var(--fs-13);
  }

  .passos__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutro-claro);
    font-size: var(--fs-12);
    font-weight: 600;
  }

  .passos__item--atual {
    border-color: var(--primaria-borda);
    background: var(--primaria-clara);
    color: var(--primaria);
    font-weight: 600;
  }

  .passos__item--atual .passos__num {
    background: var(--primaria);
    color: #fff;
  }

  .passos__item--feito {
    color: var(--sucesso);
  }

  .passos__item--feito .passos__num {
    background: var(--sucesso-claro);
    color: var(--sucesso);
  }

  /* Conteudo de uma etapa: blocos empilhados com respiro entre eles. */
  .passo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
  }
}

/* 30-componentes/secao-form.css */
@layer componentes {
  /* Secao de formulario: cartao com titulo e subtitulo que agrupa campos de um mesmo assunto, dentro de
     uma janela. <section class="secao-form"><h3 class="secao-form__titulo">...</h3>
     <p class="secao-form__sub">...</p><div class="secao-form__corpo">campos</div></section>
     Varias secoes empilhadas ficam dentro de um .secoes-form (respiro entre elas). */
  .secoes-form {
    display: grid;
    gap: var(--sp-16);
  }

  .secao-form {
    padding: var(--sp-16) var(--sp-20);
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
  }

  .secao-form__titulo {
    font-size: var(--fs-16);
  }

  .secao-form__sub {
    margin: var(--sp-4) 0 var(--sp-12);
    color: var(--texto-fraco);
    font-size: var(--fs-13);
  }

  .secao-form__corpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12) var(--sp-16);
    align-items: start;
  }

  /* Caixa azul de valor calculado: mesma altura de sempre, encostada embaixo (alinhada aos campos da esquerda). */
  .secao-form__corpo > .previa-comissao {
    align-self: end;
  }

  .secao-form__corpo > .campo--largo {
    grid-column: 1 / -1;
  }

  @media (max-width: 700px) {
    .secao-form__corpo {
      grid-template-columns: 1fr;
    }
  }

  /* Campo com sufixo dentro, a direita (ex.: "%" no percentual). Dentro do label.campo:
     <div class="campo--sufixo"><input /><span class="campo__sufixo">%</span></div> */
  .campo--sufixo {
    position: relative;
  }

  .campo--sufixo input {
    padding-right: var(--sp-40);
  }

  .campo > .campo--sufixo > .campo__sufixo {
    position: absolute;
    right: var(--sp-12);
    top: 50%;
    translate: 0 -50%;
    color: var(--texto-fraco);
    font-size: var(--fs-14);
    font-weight: 400;
    pointer-events: none;
  }

  /* Contador de caracteres abaixo de um campo de texto ("0/300"), a direita. */
  .campo__contador {
    justify-self: end;
    color: var(--texto-fraco);
    font-size: var(--fs-12);
    font-variant-numeric: tabular-nums;
  }

  /* Seletor segmentado que ocupa toda a largura da coluna (opcoes do mesmo tamanho). */
  .segmentado--cheio {
    display: flex;
    width: 100%;
  }

  .segmentado--cheio .segmentado__opcao {
    flex: 1;
    padding: var(--sp-6) var(--sp-12);
    font-size: var(--fs-13);
  }
}

/* 30-componentes/segmentado.css */
@layer componentes {
  /* Seletor segmentado: escolhe UMA entre poucas opcoes (ex.: Mes completo | Personalizado).
     Use <button type="button" class="segmentado__opcao" aria-pressed="true|false">. */
  .segmentado {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--fundo-sutil);
  }

  .segmentado__opcao {
    border: 0;
    border-radius: 4px;
    background: transparent;
    padding: 2px var(--sp-12);
    font: inherit;
    font-size: var(--fs-12);
    color: var(--texto-suave);
    cursor: pointer;
    white-space: nowrap;
  }

  .segmentado__opcao:hover {
    color: var(--texto);
  }

  .segmentado__opcao[aria-pressed='true'] {
    background: var(--primaria-clara);
    color: var(--primaria);
    font-weight: 600;
  }

  /* Versao grande: para ficar em destaque no topo de um cartao. */
  .segmentado--grande {
    padding: 3px;
    gap: 3px;
  }

  .segmentado--grande .segmentado__opcao {
    padding: var(--sp-8) var(--sp-20);
    font-size: var(--fs-14);
  }
}

/* 30-componentes/tabela.css */
@layer componentes {
  .tabela-envolve {
    overflow-x: auto;
    max-width: 100%;
  }

  table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
  }

  /* No celular a tabela de despesas nao cabe: mantem as colunas legiveis e
     deixa o usuario arrastar a tabela para o lado. */
  @media (max-width: 760px) {
    table.tabela {
      min-width: 760px;
    }
  }

  .tabela th {
    text-align: left;
    padding: var(--sp-10) var(--sp-12);
    color: var(--texto-fraco);
    font-size: var(--fs-11);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    background: var(--fundo-sutil);
  }

  .tabela td {
    padding: var(--sp-12);
    border-bottom: 1px solid var(--borda-suave);
    vertical-align: middle;
  }

  .tabela tbody tr:hover {
    background: var(--fundo-sutil);
  }

  .tabela .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .tabela tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--borda-forte);
    border-bottom: 0;
    background: var(--fundo-sutil);
  }

  /* Tabela com muitas colunas (ex.: Colaboradores): cabecalho pode quebrar em duas linhas e o
     espacamento e menor, para caber sem esconder as ultimas colunas (Status, Acoes). */
  .tabela--larga th {
    white-space: normal;
    line-height: 1.3;
    padding: var(--sp-8) var(--sp-8);
    vertical-align: bottom;
  }

  .tabela--larga td {
    padding: var(--sp-10) var(--sp-8);
  }

  .tabela--larga th.num {
    white-space: normal;
  }

  /* Acoes da linha: icones lado a lado e o botao de texto embaixo, ocupando pouca largura. */
  .tabela__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-4);
    margin-left: auto;
    max-width: 110px;
  }

  /* A ultima coluna (Acoes) fica sempre visivel quando a tabela rola para o lado. */
  .tabela--larga thead th:last-child,
  .tabela--larga tbody td:last-child {
    position: sticky;
    right: 0;
    background: var(--fundo-cartao);
    box-shadow: -1px 0 0 var(--borda);
  }

  .tabela--larga thead th:last-child {
    background: var(--fundo-sutil);
  }

  .tabela--larga tbody tr:hover td:last-child {
    background: var(--fundo-sutil);
  }

  /* A coluna Acoes (fixa a direita) tem fundo proprio: nas faixas de grupo e de nota ela segue a cor da faixa,
     para a cor ir ate o fim da linha. */
  .tabela--larga tbody .tabela__nota td:last-child,
  .tabela--larga tbody .tabela__nota:hover td:last-child {
    background: var(--primaria-clara);
  }

  .tabela--larga tbody .tabela__grupo td:last-child,
  .tabela--larga tbody .tabela__grupo:hover td:last-child {
    background: var(--fundo-sutil);
  }

  /* Nota fora da conta (ex.: "nao comissionavel"): continua visivel, mas apagada. */
  .tabela__excecao td {
    color: var(--texto-fraco);
  }

  /* Linha de cabecalho de um grupo dentro da tabela (ex.: mes e total das comissoes). */
  .tabela__grupo td {
    background: var(--fundo-sutil);
    font-weight: 600;
    border-top: 1px solid var(--borda-forte);
  }

  /* Cabecalho de uma nota dentro de um grupo (Custo Canal): azul claro, para se destacar das linhas de canal. */
  .tabela__nota td {
    background: var(--primaria-clara);
    border-top: 1px solid var(--primaria-borda);
    color: var(--primaria-escura);
  }

  /* Conteudo de uma faixa de grupo: nome a esquerda e botao de acao encostado a direita. */
  .tabela__faixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
  }

  .tabela__canal-nome {
    padding-left: var(--sp-24);
  }

  /* Campo de quantidade na propria linha da tabela (digitar e Enter grava). */
  .qtd {
    width: 180px;
    padding: var(--sp-4) var(--sp-8);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: #fff;
    font: inherit;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }

  .qtd:focus {
    outline: 2px solid var(--primaria);
    outline-offset: 0;
  }

  .qtd:disabled {
    background: var(--fundo-sutil);
    color: var(--texto-fraco);
  }

  /* Campo de quantidade com o lapis de editar AO LADO, na mesma linha (quantidade ja gravada fica travada). */
  .qtd-campo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    white-space: nowrap;
  }

  /* Tabela compacta, usada dentro de janelas. */
  .tabela--compacta th,
  .tabela--compacta td {
    padding: var(--sp-6) var(--sp-10);
    font-size: var(--fs-12);
  }

  /* Larguras de coluna reaproveitaveis. */
  .col-caixa {
    width: 36px;
  }

  /* Tabela de Projetos: Projeto mais estreita e Por emissora mais larga (as linhas por emissora nao quebram). */
  .col-projeto {
    width: 28%;
  }

  .col-emissora {
    width: 34%;
  }

  .col-seletor {
    width: 260px;
  }

  .col-barra {
    width: 30%;
  }

  /* Area com rolagem propria (tabelas dentro de janelas). */
  .rolagem {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio-p);
  }

  .rolagem--media {
    max-height: 280px;
  }

  /* Lista de linhas da Visao final de Subir faturas: cabem ~15 notas antes da rolagem. */
  .rolagem--linhas {
    max-height: 580px;
  }

  .rolagem--alta {
    max-height: min(60vh, 480px);
  }

  .valor-cancelado {
    text-decoration: line-through;
    color: var(--texto-fraco);
  }

  .categoria-celula {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
}

/* 90-utilitarios.css */
/* UTILITARIOS: ajustes pequenos e pontuais. Ficam na ultima camada antes da
   impressao, entao sempre vencem os componentes. Use estas classes em vez de
   style="..." nos templates (so cor/largura/altura vindas de DADOS ficam inline). */

@layer utilitarios {
  .nowrap {
    white-space: nowrap;
  }

  .texto-direita {
    text-align: right;
  }

  .texto-fraco {
    color: var(--texto-fraco);
    font-size: var(--fs-12);
  }

  .texto-sm {
    font-size: var(--fs-13);
  }

  .texto-suave {
    color: var(--texto-suave);
  }

  /* margens, na escala do design system */
  .mt-4 {
    margin-top: var(--sp-4);
  }
  .mt-6 {
    margin-top: var(--sp-6);
  }
  .mt-8 {
    margin-top: var(--sp-8);
  }
  .mt-12 {
    margin-top: var(--sp-12);
  }
  .mt-16 {
    margin-top: var(--sp-16);
  }
  .mt-20 {
    margin-top: var(--sp-20);
  }
  .mb-4 {
    margin-bottom: var(--sp-4);
  }
  .mb-6 {
    margin-bottom: var(--sp-6);
  }
  .mb-12 {
    margin-bottom: var(--sp-12);
  }

  /* posicao em grades (.filtros, .modal__corpo) */
  .span-2 {
    grid-column: span 2;
  }

  .span-tudo {
    grid-column: 1 / -1;
  }

  /* linhas flexiveis */
  .linha {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
  }

  .linha--entre {
    justify-content: space-between;
  }

  .linha--fim {
    align-items: flex-end;
  }

  .linha--quebra {
    flex-wrap: wrap;
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-100 {
    min-width: 100px;
  }

  .min-w-140 {
    min-width: 140px;
  }

  .min-w-220 {
    min-width: 220px;
  }

  /* lista com recuo (ex.: clientes de uma sugestao) */
  .lista {
    margin: var(--sp-8) 0 var(--sp-6) var(--sp-20);
    padding: 0;
  }

  /* so para leitores de tela */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* 99-impressao.css */
/* IMPRESSAO (relatorio mensal em A4 / PDF). Ultima camada: vence todas as outras. */

@media print {
  @page {
    size: A4 portrait;
    margin: 14mm;
  }
}

@layer impressao {
  @media print {
    body {
      background: #fff;
      font-size: 11pt;
    }

    .barra-lateral,
    .acoes,
    .avisos,
    .nao-imprimir {
      display: none !important;
    }

    .app {
      grid-template-columns: 1fr;
    }

    .conteudo {
      padding: 0;
      max-width: none;
    }

    .somente-impressao {
      display: block;
    }

    .cartao,
    .indicador {
      box-shadow: none;
      border: 1px solid #c9ced6;
    }

    /* Os indicadores e o grafico nunca devem ser cortados ao meio; ja as
       tabelas longas podem continuar na pagina seguinte, repetindo o
       cabecalho, o que deixa o relatorio bem mais compacto. */
    .indicador,
    .grafico-colunas {
      break-inside: avoid;
    }

    .cartao__cabecalho {
      break-after: avoid;
    }

    .tabela thead {
      display: table-header-group;
    }

    .tabela tr {
      break-inside: avoid;
    }

    .cartao {
      margin-bottom: 6mm;
    }

    .indicadores {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 6mm;
    }

    .indicador {
      padding: 8px 10px;
    }

    .indicador__rotulo {
      font-size: 7.5pt;
    }

    .indicador__valor {
      font-size: 12pt;
      margin-top: 3px;
      overflow-wrap: anywhere;
    }

    .indicador__nota {
      font-size: 7.5pt;
    }

    .indicador--destaque {
      background: #fff !important;
      color: #000 !important;
      border: 2px solid #000 !important;
    }

    .indicador--destaque .indicador__rotulo,
    .indicador--destaque .indicador__nota {
      color: #333 !important;
    }

    /* na tela o texto da variacao fica branco sobre o cartao azul; na
       impressao o cartao vira branco, entao o texto precisa escurecer */
    .variacao--alta,
    .variacao--baixa,
    .indicador--destaque .variacao--alta,
    .indicador--destaque .variacao--baixa {
      color: #000 !important;
    }

    .grafico-colunas {
      height: 130px;
    }

    .coluna__barra {
      background: #4a4a4a !important;
    }

    .coluna--atual .coluna__barra {
      background: #111 !important;
    }

    .tabela tbody tr:hover {
      background: transparent;
    }
  }
}