/* =============================================================================
   Buffet Brain — Sistema de design (v3 "133")
   Identidade preto & amarelo (como o PDV). Tema escuro único: pretos e cinzas
   como superfícies, amarelo como cor de ação/realce. Sem dependências externas.
   Layout: sidebar fixa (menu em sanfona por núcleo) + topbar + conteúdo.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens (custom properties)
   --------------------------------------------------------------------------- */
:root {
  /* Superfícies e texto — três níveis: página < sidebar < cartão */
  --fundo: #0b0b0d;
  --superficie: #17171a;
  --superficie-2: #1f1f24;   /* zebra / cabeçalhos de tabela / hover suave */
  --sidebar-fundo: #101013;
  --borda: #26262c;
  --borda-forte: #3a3a42;
  --texto: #ececee;
  --suave: #9b9ba4;

  /* Primária — o amarelo da casa (brilhante sem ser neon) */
  --primaria: #f5c518;
  --primaria-escura: #dcae0b;
  --primaria-fundo: #2a2410;          /* amarelo assentado sobre o preto */
  --primaria-contraste: #151002;      /* texto sobre o amarelo */

  /* Status */
  --ok: #4cc38a;
  --ok-fundo: #14231c;
  --warn: #e5a04c;
  --warn-fundo: #292013;
  --danger: #ef6f6f;
  --danger-fundo: #2b1717;
  --info: #6ba6ff;
  --info-fundo: #16202f;

  /* Forma */
  --raio: 12px;
  --raio-sm: 8px;
  --raio-pill: 999px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .32);
  --sombra-forte: 0 8px 24px rgba(0, 0, 0, .50);
  --anel: 0 0 0 3px rgba(245, 197, 24, .28);
  /* Texto sobre a pílula de contagem dos alertas (fundo na cor do status).
     Era cor cravada na regra; virou token para o tema claro poder trocar. */
  --contagem-texto: #16120a;
  --transicao: .16s ease;

  --sidebar-larg: 248px;
  /* 1120px era estreito para as listagens: numa tela de 1366 sobrava um palmo
     de fundo à direita enquanto a tabela de nove colunas rolava para o lado.
     O texto corrido continua curto por conta do `max-width: 70ch` do
     .subtitulo — quem ganha os 160px é a tabela. */
  --conteudo-max: 1280px;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Reset básico e tipografia
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { font-size: 14px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; color: var(--texto); }

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

/* URL/código não tem espaço para quebrar: sem isto um <code> longo (ex.: a
   URL de callback do Gmail) empurra a página pro lado no celular. */
code { overflow-wrap: anywhere; }

.num, .num * { font-variant-numeric: tabular-nums; }

/* Base de formulário: mesmo visual em TODO input/select/textarea, mesmo os
   que não usam .campo (tabelas do CEASA, lançamentos da folha, tráfego…) */
input, select, textarea {
  font-family: inherit;
  font-size: .92rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  padding: .4rem .55rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input::placeholder, textarea::placeholder { color: var(--suave); opacity: .8; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: var(--anel);
}
input[type="date"], input[type="number"], input[type="month"] { color-scheme: dark; }
input[type="checkbox"]:not(.menu-toggle), input[type="radio"], input[type="range"] {
  all: revert;
  accent-color: var(--primaria);
}
input[type="file"] { border-style: dashed; color: var(--suave); }

/* Barra de rolagem discreta, combinando com o tema */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 5px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
   Utilitários de espaçamento (usados nos templates no lugar de style="")
   --------------------------------------------------------------------------- */
.u-mt-0  { margin-top: 0 !important; }
.u-mt-05 { margin-top: .5rem !important; }
.u-mt-1  { margin-top: 1rem !important; }
.u-mt-15 { margin-top: 1.5rem !important; }
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-05 { margin-bottom: .5rem !important; }
.u-mb-1  { margin-bottom: 1rem !important; }
.u-mb-15 { margin-bottom: 1.5rem !important; }

/* ---------------------------------------------------------------------------
   Estrutura: sidebar + topbar + conteúdo
   --------------------------------------------------------------------------- */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-larg) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Sidebar --------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar-fundo);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem .75rem 1.5rem;
}
.sidebar__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .5rem 1rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 750;
  font-size: 1.12rem;
  color: var(--texto);
  letter-spacing: -.01em;
}
.marca:hover { text-decoration: none; }
.marca__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 6px;
  background: var(--primaria);
  color: var(--primaria-contraste);
  font-size: 1rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.sidebar__fechar {
  display: none;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--suave);
  font-size: 1.2rem;
  line-height: 1;
  padding: .25rem .4rem;
  border-radius: var(--raio-sm);
}

/* --- Navegação em sanfona (núcleos que abrem e fecham no próprio menu) ----- */
.nav { display: flex; flex-direction: column; gap: .3rem; }

/* Item solto no topo (Painel) */
.nav > .nav-item { margin-bottom: .2rem; }

.nav-grupo { border-radius: var(--raio-sm); }
.nav-grupo > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* O título do núcleo ABRE a sanfona: é botão, e cai na mesma régua dos
     outros (>= 44px de alvo, >= 14px de fonte). Continua rótulo — caixa
     alta, peso 700 e letter-spacing —, só que legível e tocável. */
  min-height: 44px;
  padding: .55rem .65rem;
  border-radius: var(--raio-sm);
  color: var(--suave);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transicao), color var(--transicao);
}
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary:hover { background: var(--superficie-2); color: var(--texto); }
.nav-grupo > summary::after {
  content: "";
  margin-left: auto;
  width: .42rem;
  height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);          /* fechado: aponta para baixo */
  transition: transform var(--transicao);
  flex: 0 0 auto;
  opacity: .7;
}
.nav-grupo[open] > summary::after { transform: rotate(-135deg); }
.nav-grupo[open] > summary { color: var(--texto); }

.nav-grupo__itens {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .1rem 0 .35rem;
}
/* Trilho sutil que liga os itens ao núcleo aberto */
.nav-grupo__itens .nav-item { margin-left: .45rem; padding-left: .85rem; }

.nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  /* Mesma régua de 44px do .menu-btn, do .btn e do título de núcleo da
     sanfona: o link do menu saía com 34px e era o único degrau fora dela. */
  min-height: 44px;
  padding: .5rem .65rem;
  border-radius: var(--raio-sm);
  color: var(--texto);
  font-size: .93rem;
  font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.nav-item:hover { background: var(--superficie-2); text-decoration: none; }
.nav-item__svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  opacity: .75;
}
.nav-item--ativo .nav-item__svg { opacity: 1; }
.nav-item--ativo {
  background: var(--primaria-fundo);
  color: var(--primaria);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--primaria);
}
.nav-item--ativo:hover { background: var(--primaria-fundo); }

/* --- Coluna principal ------------------------------------------------------ */
.principal { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.5rem;
  min-height: 56px;
  background: color-mix(in srgb, var(--fundo) 86%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--borda);
}
/* `overflow-wrap: anywhere` porque a coluna já encolhe (min-width: 0) mas a
   PALAVRA não cedia: "Demonstrativo", "Comunicações", "Configuração" e
   "fornecedores" transbordavam por cima do botão "Enviar ao Claude" a 390px
   (revisão de UI 22/08). Quebra a palavra em vez de sumir atrás do vizinho. */
.topbar__titulo { font-size: 1.35rem; font-weight: 720; letter-spacing: -.015em; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.topbar__dir { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.topbar__nome { color: var(--suave); font-size: .9rem; white-space: nowrap; }

.menu-btn {
  display: none;
  cursor: pointer;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1.1rem;
  line-height: 1;
  padding: .4rem .55rem;
  border-radius: var(--raio-sm);
  /* Alvo de dedo (regra do OWNER, 11/08): media 41x36 e o polegar errava.
     O input.menu-toggle ao lado continua invisível de propósito — quem é
     tocado é este rótulo. */
  min-width: 44px;
  min-height: 44px;
}
.overlay { display: none; }

.conteudo {
  width: 100%;
  max-width: var(--conteudo-max);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2.5rem;
  flex: 1 0 auto;
}

.rodape {
  text-align: center;
  color: var(--suave);
  font-size: .8rem;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--borda);
}

/* Layout avulso (login e páginas de erro sem sessão) */
.avulso {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.avulso .conteudo { display: flex; flex-direction: column; justify-content: center; }

/* ---------------------------------------------------------------------------
   Títulos de conteúdo
   --------------------------------------------------------------------------- */
.pagina-cabecalho { margin-bottom: 1.5rem; }
.subtitulo { color: var(--suave); margin: .15rem 0 0; font-size: .95rem; max-width: 70ch; }
.conteudo > .subtitulo:first-child { margin-top: 0; }

h2.secao {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 2.25rem 0 .9rem;
}
h2.secao::before {
  content: "";
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--primaria);
  flex: 0 0 auto;
}
h3.secao { font-size: 1rem; margin: 1.4rem 0 .6rem; color: var(--texto); }
h4.secao { font-size: .92rem; margin: 1.2rem 0 .5rem; color: var(--texto); }
.conteudo > h2.secao:first-child,
.conteudo > section:first-child h2.secao,
.conteudo > .pagina-cabecalho + h2.secao,
.conteudo > .pagina-cabecalho + section h2.secao { margin-top: .25rem; }

.vazio {
  color: var(--suave);
  padding: 1.25rem;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sombra);
}
.card__titulo { font-size: 1rem; font-weight: 650; margin-bottom: .35rem; }
.card__nota { color: var(--suave); font-size: .9rem; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* ---------------------------------------------------------------------------
   KPIs / stat tiles
   --------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: .5rem;
}
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem 1.15rem;
  box-shadow: var(--sombra);
}
.kpi__rotulo {
  color: var(--suave);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi__valor {
  font-size: 1.9rem;
  font-weight: 750;
  margin-top: .35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* white-space normal explícito: a nota é prosa e também mora dentro de
   td.num (nowrap) — sem isso ela herda o nowrap e estoura a tela no celular
   (revisão de UI 12/08: /caixa/dia rodava 262px pro lado). */
.kpi__nota { color: var(--suave); font-size: .85rem; margin-top: .35rem; white-space: normal; }
/* Nem todo KPI carrega número: "Emitente da nota", "o que o Dono precisa
   confirmar" e a janela do extrato são frases. Em corpo de 1.9rem elas
   estouravam o cartão — cada tela vinha resolvendo com `style` na mão. */
.kpi__valor--texto {
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}
/* Descrição de tarefa: o texto vem com quebras de linha próprias (o
   fechamento de caixa é um quadro alinhado) — preservar é o que o torna
   legível. Quadro em fonte monoespaçada, com rolagem horizontal própria. */
.tarefa-descricao { white-space: pre-wrap; }
.tarefa-descricao--quadro {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.45; overflow-x: auto;
  background: var(--superficie-2);
  border-left: 3px solid var(--primaria);
  color: var(--texto);
  padding: .6rem .75rem; border-radius: 4px; margin-top: .5rem;
}

/* Utilitários de sinal (usados em KPIs, células e textos) */
.positivo { color: var(--ok); }
.negativo { color: var(--danger); }
/* Linha de fecho numa conta somada (o "= deveria ter no caixa"): separa o
   resultado das parcelas sem precisar de outra tabela. */
.linha-total > td { border-top: 1px solid var(--borda-forte); }
.tag--info { background: var(--info-fundo); color: var(--info); }

/* ---------------------------------------------------------------------------
   Tabelas
   ---------------------------------------------------------------------------
   REGRA DA CASA (revisão de UI, 09/08/2026): a tabela cabe na tela. O que
   fazia TODA listagem rolar para o lado era a soma de três coisas —
   `white-space: nowrap` em toda célula, `min-width: 240px` em cada .obs e
   `min-width: 320px` na coluna de ações. Agora o texto QUEBRA por padrão e só
   o que não pode quebrar (número, data, badge) fica em linha única.
   --------------------------------------------------------------------------- */
.tabela-wrap {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  -webkit-overflow-scrolling: touch;
}
/* Tabela longa: ganha rolagem própria e o cabeçalho gruda de verdade (o
   sticky do <th> só funciona dentro de um contêiner que role na vertical).
   A classe é posta pelo realce progressivo do base.html. */
.tabela-wrap--alta { max-height: 74vh; overflow-y: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--superficie-2);
  color: var(--suave);
  font-weight: 650;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: left;
  white-space: nowrap;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--borda-forte);
}
tbody td {
  padding: .6rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  white-space: normal;      /* texto quebra: é o que tira a rolagem lateral */
  overflow-wrap: anywhere;  /* nome comprido sem espaço não estoura a coluna */
}
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--superficie-2) 55%, transparent); }
tbody tr:hover td { background: var(--superficie-2); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;      /* número nunca quebra */
  overflow-wrap: normal;
}
/* Célula de texto largo (observação, mensagem, descrição): limite de leitura,
   sem piso de largura — o piso era o que empurrava a tabela para fora. */
td.obs { white-space: normal; max-width: 34rem; }
/* Conteúdo que perde o sentido quebrado (data e hora, faixa de horário). */
.nowrap, td.nowrap, th.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Badges de status
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: var(--raio-pill);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--ok { background: var(--ok-fundo); color: var(--ok); }
.badge--warn { background: var(--warn-fundo); color: var(--warn); }
.badge--danger { background: var(--danger-fundo); color: var(--danger); }
.badge--info { background: var(--info-fundo); color: var(--info); }
.badge--neutro { background: var(--superficie-2); color: var(--suave); }

/* ---------------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------------- */
/* A BASE JÁ É VISÍVEL. Antes o .btn nu vinha com fundo e borda transparentes:
   um botão sem variante (havia doze deles, incluindo "Enviar" no espelho do
   WhatsApp e "Marcar como feita" na tela da gerente) sumia no preto do fundo.
   Agora o padrão é o secundário — variante esquecida vira um botão comum, não
   um texto solto. */
/* ALVO DE DEDO NA BASE (régua de 44px, ordem do OWNER de 11/08/2026). A régua
   valia só na visão da gerente (`.tema-claro .btn`, mais abaixo); no app DELE
   nenhum botão a cumpria — os de ação vinham a 27px (o `.btn--sm` de
   "Resolver", "Adiar", "Está certo, pode fechar", "Confirmar baixa") e os
   comuns a ~33px. O piso mora aqui, no `.btn`, e não em cada variante: nenhuma
   delas escreve min-height, então uma linha cobre --sm, --primary, --ghost,
   --sec, --sutil e o <summary> estilizado de botão. Largura não muda (o
   padding lateral é o mesmo), então nada estoura os 390px do celular; o texto
   segue centrado pelo align-items do flex. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .55rem 1rem;
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), filter var(--transicao);
  text-decoration: none;
}
.btn:hover { text-decoration: none; background: var(--superficie-2); }
.btn:focus-visible { outline: none; box-shadow: var(--anel); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover, .btn:disabled:hover { background: var(--superficie); }

.btn--primary { background: var(--primaria); color: var(--primaria-contraste); border-color: var(--primaria); font-weight: 700; }
.btn--primary:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: var(--primaria-contraste); }

.btn--ghost { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn--ghost:hover { background: var(--superficie-2); }

.btn--sm { padding: .38rem .7rem; font-size: .85rem; }
.btn--bloco { width: 100%; }

/* Um <summary> estilizado de botão não pode exibir o triângulo do navegador
   por dentro (acontecia em "Registrar cotação", "Editar" e "Ensinar regra"). */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ""; }

/* Link discreto ao lado de um botão (ex.: "Limpar", "Voltar") */
.link-suave { color: var(--suave); font-size: .9rem; font-weight: 500; }

/* ---------------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .9rem 1rem;
  align-items: end;
}
.campo { display: flex; flex-direction: column; gap: .35rem; }
/* .campo é display:flex, o que vencia o display:none nativo do atributo
   hidden: os campos de rotina do formulário de tarefa ficavam à vista mesmo
   escondidos pelo script (visto em 14/08/2026). */
[hidden] { display: none !important; }
.campo > label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--suave);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--texto);
  background: var(--superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder { color: var(--suave); opacity: .8; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: var(--anel);
}
.campo input[type="date"],
.campo input[type="number"] { color-scheme: dark; }

.form-acoes {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.form-acoes--inline { margin-top: 0; }

/* Filtro embutido (ex.: seletor de competência do DRE) */
.campo-inline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.campo-inline label { margin: 0; font-weight: 600; color: var(--suave); font-size: .85rem; }
.campo-inline select {
  padding: .5rem .7rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: .95rem;
  font-family: inherit;
}
.campo-inline select:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }

/* Card que embrulha um formulário (busca/filtros, cadastro) */
.painel-form {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.5rem;
}
.form-estreito { max-width: 520px; }

/* Coluna de ações de uma linha de tabela.
   Antes tinha `min-width: 320px` e as ações ficavam lado a lado — com quatro
   ou cinco delas (a Caixa da Secretaria tem seis) a tabela inteira era
   empurrada para fora da tela. Agora a coluna se ajusta e as ações EMPILHAM:
   ficam uma por linha, todas visíveis, sem esticar nada. */
td.acoes-usuario { white-space: normal; min-width: 14rem; }
/* Cada ação ocupa a largura da célula e cai na linha de baixo (a <td> segue
   sendo table-cell — só os filhos viram blocos). */
td.acoes-usuario > form,
td.acoes-usuario > a { display: flex; margin: .3rem 0; }
/* O <details> NÃO pode ser flex: com display:flex o resumo e o painel viravam
   duas colunas dentro de uma célula estreita — o botão "Mais" esticava para
   baixo e o painel ficava com 18px de largura, o campo de comentário com
   espaço para duas letras (reclamação do OWNER em 14/08/2026). Ele é bloco: o
   painel desce por baixo do botão e usa a largura inteira da célula. */
td.acoes-usuario > details { display: block; margin: .3rem 0; }
td.acoes-usuario > details > summary { display: flex; justify-content: space-between; width: 100%; }
td.acoes-usuario > form:first-child,
td.acoes-usuario > details:first-child { margin-top: 0; }
/* Bloco para link comum; `flex` para o que é .btn — bloco também ocupa a
   largura inteira, mas anula o justify-content do botão e o texto fica
   colado à esquerda, parecendo campo de formulário (revisão de UI 22/08). */
td.acoes-usuario > a { display: block; margin: .35rem 0 0; }
td.acoes-usuario > a.btn { display: flex; }
.acao-inline { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .15rem .5rem .15rem 0; }
td.acoes-usuario .acao-inline { display: flex; margin: 0; width: 100%; }
td.acoes-usuario .acao-inline > input,
td.acoes-usuario .acao-inline > select { flex: 1 1 5rem; min-width: 0; max-width: none; }
td.acoes-usuario .acao-inline > .btn { flex: 0 0 auto; }
/* Campo de data tem largura natural: esticado até o fim da célula ele fica
   com um palmo de vazio depois de "dd/mm/aaaa". */
.acao-inline > input[type="date"],
.menu-acoes__painel input[type="date"] { flex: 0 1 10rem; }
.acao-inline input {
  padding: .42rem .55rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: .88rem;
  max-width: 150px;
}
.acao-inline input:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }

/* ---------------------------------------------------------------------------
   Filtros em "pílulas"
   --------------------------------------------------------------------------- */
.filtros { display: flex; gap: .5rem; margin: 0 0 1.25rem; flex-wrap: wrap; }
.filtro {
  padding: .4rem .9rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  color: var(--suave);
  background: var(--superficie);
  font-size: .88rem;
  font-weight: 600;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.filtro:hover { text-decoration: none; background: var(--superficie-2); color: var(--texto); }
.filtro--ativo, .filtro--ativo:hover {
  background: var(--primaria);
  color: var(--primaria-contraste);
  border-color: var(--primaria);
}

/* ---------------------------------------------------------------------------
   Alertas
   --------------------------------------------------------------------------- */
.alerta {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--suave);
  border-radius: var(--raio);
  padding: .9rem 1.1rem;
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.alerta--info { border-left-color: var(--info); background: var(--info-fundo); }
.alerta--ok { border-left-color: var(--ok); background: var(--ok-fundo); }
.alerta--warn { border-left-color: var(--warn); background: var(--warn-fundo); }
.alerta--danger { border-left-color: var(--danger); background: var(--danger-fundo); }

/* Alerta solto no fluxo da página respira por padrão (sem hack por template) */
.conteudo .alerta { margin-bottom: 1.25rem; }
.alertas-grade .alerta { margin-bottom: 0; }

/* Faixa "você está vendo como…" colada na topbar */
.faixa-visao {
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 1.25rem;
  box-shadow: none;
}

.alerta__topo { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.alerta__titulo { font-weight: 700; font-size: .95rem; }
.alerta--danger .alerta__titulo { color: var(--danger); }
.alerta--warn .alerta__titulo { color: var(--warn); }
.alerta--ok .alerta__titulo { color: var(--ok); }
.alerta--info .alerta__titulo { color: var(--info); }
.alerta__contagem {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
  border-radius: var(--raio-pill);
  font-size: .8rem; font-weight: 700; color: var(--contagem-texto);
}
.alerta--danger .alerta__contagem { background: var(--danger); }
.alerta--warn .alerta__contagem { background: var(--warn); }
.alerta__lista { margin: 0; padding-left: 1.15rem; font-size: .92rem; }
.alerta__lista li { margin: .2rem 0; }
.alerta__mais { color: var(--suave); font-size: .85rem; margin: .4rem 0 0; }
.alerta__link { display: inline-block; margin-top: .55rem; font-size: .9rem; font-weight: 650; }
.alerta--ok.alerta--linha { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ok); }
/* (.alerta__emoji saiu na revisão de 09/08: nenhum template usava e a regra da
   casa é interface sem emoji.) */

.alertas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* ---------------------------------------------------------------------------
   Paginação
   --------------------------------------------------------------------------- */
.paginacao {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  margin: 1.5rem 0 .5rem;
}
.paginacao a { font-weight: 600; }
.paginacao .desabilitado { color: var(--borda-forte); }
.paginacao .pagina-atual { color: var(--suave); font-size: .9rem; }

/* ---------------------------------------------------------------------------
   Tabela DRE (cascata e detalhe)
   --------------------------------------------------------------------------- */
table.dre td { white-space: normal; }
table.dre tr.subtotal td { font-weight: 650; background: var(--superficie-2); }
table.dre tr.total td {
  font-weight: 750;
  font-size: 1rem;
  border-top: 2px solid var(--borda-forte);
  background: var(--primaria-fundo);
  color: var(--primaria);
}
table.dre tr:hover td { background: var(--superficie-2); }
/* Linha de baixo relevo na cascata (ex.: juros de banco de valor pequeno). */
table.dre tr.linha-suave td { color: var(--suave); font-size: .9rem; }

/* ---------------------------------------------------------------------------
   Estado central / hero (erros, em construção, acesso negado)
   --------------------------------------------------------------------------- */
.hero {
  text-align: center;
  max-width: 520px;
  margin: 3rem auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 2.5rem 2rem;
}
.hero__icone { font-size: 2.75rem; line-height: 1; }
.hero h1 { margin: .75rem 0 .5rem; font-size: 1.5rem; }
.hero p { color: var(--suave); margin: .5rem auto; }
.hero .btn, .hero a.btn { margin-top: 1rem; }

/* ---------------------------------------------------------------------------
   Login — preto com brilho amarelo discreto
   --------------------------------------------------------------------------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(245, 197, 24, .10), transparent 60%),
    var(--fundo);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2.25rem 2rem;
  box-shadow: var(--sombra-forte);
}
.login-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: 1.5rem;
  font-weight: 750;
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}
.login-marca__ic { font-size: 1.6rem; }
.login-marca__ic--letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: var(--primaria);
  color: var(--primaria-contraste);
  font-size: 1.2rem;
  font-weight: 800;
}
.login-sub { text-align: center; color: var(--suave); font-size: .9rem; margin: 0 0 1.5rem; }
.login-card form { display: flex; flex-direction: column; gap: 1rem; }

/* ---------------------------------------------------------------------------
   Investigador de cobranças: parecer (classes de nível vêm de main.py)
   --------------------------------------------------------------------------- */
.parecer {
  border: 1px solid var(--borda);
  border-left-width: 6px;
  border-radius: var(--raio);
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  box-shadow: var(--sombra);
  margin-bottom: 1.25rem;
}
.parecer-nivel {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: var(--raio-pill);
}
.parecer-escore { color: var(--suave); font-size: .85rem; font-weight: 600; margin-left: .5rem; }
.parecer-conclusao { font-size: 1rem; margin: .65rem 0 0; }
.parecer-alto { border-left-color: var(--danger); }
.parecer-alto .parecer-nivel { background: var(--danger-fundo); color: var(--danger); }
.parecer-medio { border-left-color: var(--warn); }
.parecer-medio .parecer-nivel { background: var(--warn-fundo); color: var(--warn); }
.parecer-baixo { border-left-color: var(--ok); }
.parecer-baixo .parecer-nivel { background: var(--ok-fundo); color: var(--ok); }
.parecer-sem { border-left-color: var(--suave); }
.parecer-sem .parecer-nivel { background: var(--superficie-2); color: var(--suave); }
.evidencias { margin: 0; padding-left: 1.2rem; }
.evidencias li { margin: .35rem 0; }
.parecer-alertas { margin: .75rem 0 0; padding-left: 1.2rem; }
.parecer-alertas li { margin: .35rem 0; color: var(--warn); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Relatórios: Markdown renderizado (prosa)
   --------------------------------------------------------------------------- */
.prosa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.75rem 2rem;
  box-shadow: var(--sombra);
  overflow-x: auto;
}
.prosa h1 { font-size: 1.5rem; margin: 1.5rem 0 .6rem; }
.prosa h1:first-child { margin-top: 0; }
.prosa h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.prosa h3 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.prosa p { margin: .6rem 0; }
.prosa ul, .prosa ol { margin: .6rem 0 .6rem 1.25rem; padding-left: .75rem; }
.prosa li { margin: .25rem 0; }
.prosa table { width: auto; min-width: 60%; margin: 1rem 0; border: 1px solid var(--borda); }
.prosa th, .prosa td { white-space: normal; }
.prosa blockquote {
  margin: .85rem 0;
  padding: .5rem .95rem;
  border-left: 3px solid var(--borda-forte);
  color: var(--suave);
}
.prosa code {
  background: var(--superficie-2);
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}
.prosa pre {
  background: var(--superficie-2);
  padding: .95rem 1.1rem;
  border-radius: var(--raio-sm);
  overflow-x: auto;
}
.prosa pre code { background: none; padding: 0; }
.prosa hr { border: none; border-top: 1px solid var(--borda); margin: 1.5rem 0; }

/* ---------------------------------------------------------------------------
   Dashboard: seletor de período, KPI de destaque e gráficos (CSS puro)
   Regras de marca: um matiz só (o amarelo) para magnitude, marcas finas com
   ponta arredondada, rótulos sempre em tinta (--texto/--suave), grade recessiva.
   --------------------------------------------------------------------------- */
.secao-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.secao-linha .secao { margin-bottom: .35rem; }
/* Faz as vezes de h2.secao quando o título divide a linha com um seletor:
   herda o mesmo respiro acima e abaixo, senão o bloco seguinte cola. */
.conteudo > .secao-linha { margin: 2.25rem 0 .9rem; }
.conteudo > .pagina-cabecalho + .secao-linha,
.conteudo > .secao-linha:first-child { margin-top: .25rem; }

.seletor-periodo {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  /* ROLA, não corta: as seis abas de /metas não cabem em 390px e o
     `overflow: hidden` deixava "Equipe" inalcançável no celular. Com
     overflow diferente de visible o border-radius continua recortando o
     desenho, então a pílula segue arredondada; a aba fatiada na borda é a
     dica de que a tira continua. */
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--superficie);
}
.seletor-periodo__opcao {
  /* Não encolhe e não quebra: é o que faz a tira ROLAR em vez de espremer
     as abas ("Batalha do Padrão" saía em três linhas e entortava a tira). */
  flex: 0 0 auto;
  white-space: nowrap;
  padding: .35rem .9rem;
  font-size: .85rem;
  color: var(--suave);
  text-decoration: none;
  transition: var(--transicao);
}
.seletor-periodo__opcao:hover { color: var(--texto); }
.seletor-periodo__opcao.ativa {
  background: var(--primaria);
  color: var(--primaria-contraste);
  font-weight: 700;
}

.kpi--destaque {
  background: var(--primaria-fundo);
  border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda));
  box-shadow: var(--sombra-forte);
}
.kpi--destaque .kpi__rotulo { color: var(--primaria); }
.kpi--destaque .kpi__valor { color: var(--primaria); }

.grafico-card { padding: 1.1rem 1.15rem .85rem; margin-bottom: .5rem; }
.grafico-legenda { color: var(--suave); font-size: .8rem; margin: .6rem 0 0; }

/* Colunas (faturamento por dia): altura proporcional, ponta arredondada. */
.grafico-colunas {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  height: 200px;
  overflow-x: auto;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--borda-forte);
}
.grafico-colunas__item {
  flex: 1 1 34px;
  min-width: 30px;
  max-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 5px;
}
.grafico-colunas__valor {
  font-size: .7rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grafico-colunas__barra {
  width: 100%;
  max-width: 46px;
  min-height: 3px;
  background: linear-gradient(to top, var(--primaria-escura), var(--primaria));
  border-radius: 5px 5px 0 0;
}
.grafico-colunas__item:hover .grafico-colunas__barra { background: var(--primaria); }
.grafico-colunas__rotulo {
  font-size: .72rem;
  color: var(--suave);
  text-align: center;
  line-height: 1.15;
}
.grafico-colunas__rotulo small { font-size: .62rem; }

/* Barras horizontais (por meio de pagamento, participação de produto). */
.barra-h {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .3rem 0;
}
.barra-h__rotulo {
  font-size: .88rem;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-h__trilha {
  height: 10px;
  background: var(--superficie-2);
  border-radius: 5px;
  overflow: hidden;
}
.barra-h__fill {
  height: 100%;
  min-width: 2px;
  background: var(--primaria);
  border-radius: 5px;
}
.barra-h__valor {
  font-size: .85rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barra-h__valor small { color: var(--suave); }
.barra-h--celula { grid-template-columns: 1fr auto; padding: 0; gap: .5rem; }

@media (max-width: 640px) {
  .barra-h { grid-template-columns: 6.5rem 1fr auto; gap: .5rem; }
  .grafico-colunas { height: 150px; }
  /* O valor FICA no celular: a legenda promete "o valor aproximado está em
     cima de cada coluna" e o title nativo não abre por toque. O rótulo já é
     abreviado ("5.3k") e cabe nos 30px da coluna. */
  .grafico-colunas__valor { font-size: .62rem; }
}

/* DRE: cascata em destaque + rubricas recolhíveis. */
.dre--cascata td, .dre--cascata th { padding: .55rem .85rem; }
.dre--cascata .subtotal td { font-weight: 600; border-top: 1px solid var(--borda-forte); }
.dre--cascata .total td {
  font-weight: 750;
  font-size: 1.02rem;
  border-top: 2px solid var(--borda-forte);
  background: var(--primaria-fundo);
  color: var(--primaria);
}
/* Gasto por fornecedor: quatro colunas no celular do OWNER (390px). O número
   não quebra, então a folga sai do espaçamento — assim a tabela cabe na tela
   em vez de sair arrastando para o lado. O corpo da letra fica como está: no
   tema da gerente nada de tela pode ficar abaixo do piso de leitura. */
@media (max-width: 480px) {
  .dre--fornecedores td,
  .dre--fornecedores th { padding: .4rem .3rem; }
}

.detalhe-rubrica {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: .6rem;
  overflow: hidden;
}
.detalhe-rubrica > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.detalhe-rubrica > summary::-webkit-details-marker { display: none; }
.detalhe-rubrica > summary::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--suave);
  border-bottom: 2px solid var(--suave);
  transform: rotate(-45deg);
  transition: var(--transicao);
  flex: 0 0 auto;
}
.detalhe-rubrica[open] > summary::before { transform: rotate(45deg); }
.detalhe-rubrica > summary > span:first-of-type { flex: 1; }
.detalhe-rubrica__soma { font-variant-numeric: tabular-nums; color: var(--suave); font-weight: 600; }
.detalhe-rubrica .tabela-wrap { border-top: 1px solid var(--borda); }

/* Caixa da Secretaria: blocos por urgência (palavras, não códigos). */
.bloco-urgencia {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.bloco-urgencia--alta { color: var(--danger); }
.bloco-urgencia--alta::before { background: var(--danger); }
.bloco-urgencia__qtd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .4rem;
  border-radius: var(--raio-pill);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  color: var(--suave);
  font-size: .8rem;
  font-weight: 600;
}
.bloco-urgencia--alta .bloco-urgencia__qtd {
  background: var(--danger-fundo);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------------------------------------------------------------------------
   Responsivo: sidebar vira menu off-canvas (≤768px)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .layout { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 272px;
    height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-forte);
  }
  .menu-toggle:checked ~ .layout .sidebar { transform: translateX(0); }

  .sidebar__fechar { display: inline-flex; align-items: center; justify-content: center; }

  .overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .menu-toggle:checked ~ .layout .overlay { opacity: 1; pointer-events: auto; }

  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  .topbar { padding: .6rem 1rem; }
  .topbar__nome { display: none; }
  .topbar__titulo { font-size: 1.1rem; }

  .conteudo { padding: 1.25rem 1rem 2rem; }

  .kpi__valor { font-size: 1.5rem; }
}

@media (max-width: 420px) {
  .form-acoes { align-items: stretch; }
  .form-acoes .btn { flex: 1 0 auto; }
  /* O stretch estica também o <a>, e o texto de um link ancora no topo da
     caixa esticada: "Limpar" saía colado no topo do "Filtrar" de 44px. */
  .form-acoes > a { align-self: center; }
}

/* ---------------------------------------------------------------------------
   Impressão — usada pelo espelho da NF-e (/documentos/nfe): só o conteúdo vai
   para o papel. Elementos com .nao-imprimir (botões/links de navegação) somem.
   --------------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .rodape, .overlay, .menu-btn, .nao-imprimir { display: none !important; }
  .layout { display: block; }
  .conteudo { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .card, .kpi, table { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---------------------------------------------------------------------------
   Folhas do CEASA (padrão da calculadora: 3 blocos lado a lado)
   --------------------------------------------------------------------------- */
.folha-ceasa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.folha-ceasa__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
  font-size: 1.05rem;
}
.folha-ceasa__topo span { color: var(--suave); font-size: .85rem; }
.folha-ceasa__blocos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  align-items: start;
}
.folha-ceasa__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.folha-ceasa__tabela thead th {
  position: static;
  background: transparent;
  padding: .3rem .45rem;
  border-bottom: 2px solid var(--borda-forte);
}
.folha-ceasa__tabela tbody td {
  padding: .28rem .45rem;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.folha-ceasa__tabela tbody tr:nth-child(even) td { background: transparent; }
/* Campos de anotação (qtd/box/preço): células bem delimitadas, com linha
   vertical entre elas — é onde se escreve à mão na feira. */
.folha-ceasa__campo {
  border-left: 1px solid var(--borda-forte);
  text-align: right;
}
.folha-ceasa__box { min-width: 3rem; }
.folha-ceasa__box + td { border-left: 1px solid var(--borda-forte); }
.folha-ceasa__preco { min-width: 3.6rem; }

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

@media print {
  .folha-ceasa {
    border: none;
    padding: 0;
    margin: 0;
    break-after: page;
  }
  .folha-ceasa:last-child { break-after: auto; }
  .folha-ceasa__blocos { grid-template-columns: repeat(3, 1fr) !important; gap: .5rem; }
  .folha-ceasa__tabela { font-size: 9pt; }
  .folha-ceasa__tabela thead th,
  .folha-ceasa__tabela tbody td {
    border-color: #999;
    color: #000;
    padding: 2pt 4pt;
  }
  .folha-ceasa__campo { border-left: 1px solid #666; }
  .folha-ceasa__topo { color: #000; }
  .folha-ceasa__topo span { color: #333; }
}

/* ---------------------------------------------------------------------------
   Espelho do WhatsApp (/whatsapp/espelho) — layout tipo WhatsApp Web.
   Lista de conversas à esquerda + fio em balões à direita. O fio usa
   column-reverse: a rolagem nasce ancorada no fim e o poll do htmx não
   "pula" a leitura — sem JavaScript próprio.
   --------------------------------------------------------------------------- */
.chat {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 172px);
  min-height: 460px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.chat__lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--borda);
}
.chat__lista-topo {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.chat__lista-titulo { font-weight: 700; }
.chat__lista-nota { font-size: .75rem; color: var(--suave); }
.chat__lista-corpo { overflow-y: auto; min-height: 0; }

.chat-conv {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--borda);
  color: inherit;
  text-decoration: none;
  transition: background var(--transicao);
}
.chat-conv:hover { background: var(--superficie-2); text-decoration: none; }
.chat-conv--ativa { background: var(--primaria-fundo); }
.chat-conv__meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.chat-conv__nome {
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv__previa {
  font-size: .8rem;
  color: var(--suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv__fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  flex-shrink: 0;
}
.chat-conv__hora { font-size: .72rem; color: var(--suave); white-space: nowrap; }

.chat-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--primaria-fundo);
  color: var(--primaria);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat__conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat__cabecalho {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--borda);
}
.chat__voltar { display: none; color: var(--suave); }
.chat__quem { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.chat__quem strong { font-size: .95rem; }
.chat__quem-sub { font-size: .76rem; color: var(--suave); }

.chat__fio {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: .45rem;
  padding: 1rem;
  background: var(--fundo);
}

.balao {
  max-width: min(72%, 34rem);
  padding: .5rem .75rem;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.balao--in {
  align-self: flex-start;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom-left-radius: 3px;
}
.balao--out {
  align-self: flex-end;
  background: var(--primaria-fundo);
  border: 1px solid transparent;
  border-bottom-right-radius: 3px;
}
.balao__texto { font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao__texto--vazio { color: var(--suave); font-style: italic; }
.balao__tipo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--suave);
}
.balao__meta {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  align-items: baseline;
  font-size: .7rem;
  color: var(--suave);
}
.balao__status { font-weight: 600; }
.balao__status--falha { color: var(--danger); }
.balao__rota {
  background: var(--superficie-2);
  border-radius: var(--raio-pill);
  padding: 0 .45rem;
}

.chat__composer {
  display: flex;
  gap: .6rem;
  padding: .7rem 1rem .35rem;
  border-top: 1px solid var(--borda);
}
.chat__entrada {
  flex: 1;
  padding: .55rem .7rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  font-family: inherit;
  font-size: .95rem;
  color: var(--texto);
  background: var(--superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.chat__entrada::placeholder { color: var(--suave); opacity: .8; }
.chat__entrada:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }
.chat__aviso {
  margin: 0;
  padding: 0 1rem .6rem;
  font-size: .72rem;
  color: var(--suave);
}

.chat__vazio {
  margin: auto;
  max-width: 26rem;
  text-align: center;
  color: var(--suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1rem;
}

@media (max-width: 900px) {
  /* minmax(0,1fr), não 1fr: com min-width automático a coluna estica até a
     largura intrínseca da prévia nowrap (6000px+) e o ellipsis nunca corta
     (revisão de UI 12/08: prévia decapitada sem reticências no celular). */
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 140px); }
  .chat--aberta .chat__lista { display: none; }
  .chat:not(.chat--aberta) .chat__conversa { display: none; }
  .chat__voltar { display: inline-flex; }
}

/* Grupo no espelho: quem falou, no alto do balão recebido. */
.balao__autor {
  font-size: .74rem;
  font-weight: 700;
  color: var(--primaria);
}

/* --- Caixa do Claude: dropdown "Enviar ao Claude" na topbar ---------------- */
.claude-envio { position: relative; }
.claude-envio summary { list-style: none; cursor: pointer; white-space: nowrap; }
.claude-envio summary::-webkit-details-marker { display: none; }
.claude-envio__painel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  width: min(340px, 86vw); padding: .9rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--superficie); color: inherit;
  border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: var(--sombra-forte);
}
.claude-envio__painel textarea { width: 100%; resize: vertical; }
.claude-envio__rotulo { font-size: .78rem; opacity: .75; }

/* ---------------------------------------------------------------------------
   Fluxo de caixa previsionado (/fluxo)
   --------------------------------------------------------------------------- */
.linha-alerta > td { background: var(--danger-fundo); }
.campo-check {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; color: var(--suave); white-space: nowrap;
}
.gr-linha { display: block; overflow: visible; }

/* Gráfico do caixa dia a dia (/fluxo) — leitura por dia, sem JavaScript.

   O quadro ESTICA (preserveAspectRatio="none" no SVG): a altura é a daqui e
   a largura é a do card, e o desenho preenche os dois — antes o desenho
   encolhia junto com a largura e sobrava mais de meio cartão vazio no
   celular (P-224, 12/08/2026). Por isso todo traço mede a espessura na
   TELA, não na escala do desenho: sem isso a guia vertical sumiria. */
.gr-quadro { position: relative; }
.gr-caixa { display: block; width: 100%; height: 230px; }
.gr-caixa line,
.gr-caixa polyline { vector-effect: non-scaling-stroke; }
/* O pior dia fica marcado em pé, sempre — é o dia que a linha embaixo do
   gráfico nomeia com data e valor. */
.gr-marca-pior { stroke: var(--danger); stroke-width: 2; }

/* A leitura de cada dia (P-362, 20/08/2026). Era um <rect> dentro do SVG com
   o balão do próprio navegador (<title>): demorava quase um segundo para
   abrir, sumia sozinho, não reabria sem tirar e voltar o mouse e, como o
   quadro estica, a faixa encolhia junto — "às vezes não lê o mouse, tem dia
   que não consigo saber o que tá ali".

   Agora cada dia é uma camada HTML por cima do desenho, medida em % como a
   régua: a camada cobre o quadro inteiro (é dela que o resumo se pendura,
   para poder se manter dentro do cartão) e só a FAIXA daquele dia recebe o
   mouse — altura inteira, largura inteira da fatia, encostada na fatia do
   vizinho. Sem JavaScript: :hover para o mouse, :focus-within para o teclado
   e para o toque (o tabindex está na faixa). */
.gr-dia { position: absolute; inset: 0; pointer-events: none; }
.gr-dia__faixa {
  position: absolute; top: 0; bottom: 0;
  pointer-events: auto; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.gr-dia__guia {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 0;
  border-left: 1px dashed var(--borda-forte);
  opacity: 0; transition: opacity .1s ease;
}
.gr-dia__faixa:hover ~ .gr-dia__guia,
.gr-dia:focus-within .gr-dia__guia { opacity: 1; }
.gr-dia:focus-within .gr-dia__guia { border-left-color: var(--primaria); }

/* O resumo do dia: abre na hora (sem espera, sem animação de entrada) e fica
   enquanto o mouse ou o dedo estiver ali.

   Ele NUNCA vaza do cartão: a largura é fixa e o left é grampeado entre a
   borda esquerda e a direita do quadro pelo clamp() — nos primeiros e nos
   últimos dias do período ele vira sozinho para dentro em vez de sair da
   tela. E não cobre o ponto que explica: quando o dia está na metade de
   cima do desenho, o resumo desce para o rodapé do quadro (--embaixo). */
.gr-dia__resumo {
  --larg: min(17rem, 100%);
  position: absolute; z-index: 3; top: 0;
  left: clamp(0px, calc(var(--x) - var(--larg) / 2), calc(100% - var(--larg)));
  width: var(--larg); max-height: 100%; overflow: hidden;
  display: none;
  padding: .5rem .6rem;
  background: var(--superficie-2);
  border: 1px solid var(--primaria);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-forte);
  color: var(--texto); font-size: .85rem; line-height: 1.35;
}
.gr-dia--embaixo .gr-dia__resumo { top: auto; bottom: 0; }
.gr-dia__faixa:hover ~ .gr-dia__resumo,
.gr-dia:focus-within .gr-dia__resumo { display: block; }
.gr-dia__data { display: block; color: var(--primaria); }
.gr-dia__saldo {
  display: block; font-size: 1.05rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.gr-dia__fluxo { display: block; color: var(--suave); }
.gr-dia__itens {
  display: block; margin-top: .35rem;
  padding-top: .35rem; border-top: 1px solid var(--borda);
}
.gr-dia__item {
  display: flex; justify-content: space-between; gap: .6rem;
  font-variant-numeric: tabular-nums;
}
.gr-dia__item > span:first-child {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-dia__mais { color: var(--suave); }

/* Rótulo é HTML por cima/embaixo do desenho, nunca <text> dentro dele: no
   SVG a letra encolhe junto com o quadro e no celular do OWNER as datas
   saíam com 4px. Fora dele, o tamanho é o da tela em qualquer largura. */
.gr-regua {
  position: absolute; left: 0; transform: translateY(-100%);
  padding: 0 .25rem; background: var(--superficie);
  color: var(--suave); font-size: .85rem;
}
.gr-regua--fundo { top: auto; bottom: 0; transform: none; color: var(--danger); }
.gr-datas,
.gr-pior { margin: .55rem 0 0; font-size: .9rem; }
.gr-datas { display: flex; justify-content: space-between; color: var(--suave); }
.gr-pior { color: var(--texto); }
.gr-pior__marca { color: var(--suave); }

@media (max-width: 640px) {
  /* No celular o card é estreito: 170px de altura mostram a curva inteira
     sem tomar a tela — e o desenho ocupa o card todo, não um trecho dele. */
  .gr-caixa { height: 170px; }
  /* 30 dias num cartão de celular dão pouco mais de 10px de largura por dia;
     o que torna o dedo preciso é a ALTURA da faixa, que é o quadro inteiro.
     O resumo, esse, ocupa quase a largura do cartão para caber a conta. */
  .gr-dia__resumo { --larg: min(15rem, 100%); }
}

/* ---------------------------------------------------------------------------
   Precificação — o espaçamento vem do layout, não de margens soltas.
   (A página tem 8 blocos e 22 fichas; com margens elas colavam umas nas
   outras e o OWNER via "espaçamento zoado".)
   --------------------------------------------------------------------------- */
.prec { display: flex; flex-direction: column; gap: 2.25rem; }
.prec > section { display: flex; flex-direction: column; gap: .9rem; }
.prec > section > h2.secao,
.prec > section > h3.secao { margin: 0; }
.prec p.subtitulo { margin: 0; max-width: 80ch; }
.prec .kpi-grid,
.prec .card-grid,
.prec .tabela-wrap,
.prec .painel-form { margin: 0; }
.prec .pagina-cabecalho { margin: 0; }

/* Lista de fichas: 22 blocos que precisam respirar entre si. */
.prec__fichas { display: flex; flex-direction: column; gap: .5rem; }
.prec__fichas details.card { padding: .85rem 1.1rem; }
.prec__fichas summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.prec__fichas details[open] summary { margin-bottom: .85rem; }

/* Campo dentro do KPI (margem desejada) e da linha de tabela. */
.prec .kpi form { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; }
.prec .kpi form input { width: 3.6rem; text-align: right; }
.preco-linha {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  justify-content: flex-end;
  margin: 0;
}
.preco-linha input { text-align: right; font-variant-numeric: tabular-nums; }

/* Abas de canal: reaproveita o seletor de período, sem margem extra. */
.prec .seletor-periodo { margin: 0; align-self: flex-start; }

/* Selo de confiabilidade da previsão (/fluxo) — quanto dá para confiar no
   número, e o que está faltando para ele melhorar. */
.confianca { border-left: 4px solid var(--suave); }
.confianca--alta { border-left-color: var(--ok); }
.confianca--boa { border-left-color: var(--primaria); }
.confianca--baixa { border-left-color: var(--warn); }
.confianca--muito-baixa { border-left-color: var(--danger); }
.confianca__topo {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.confianca__pontos {
  font-size: 2rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.confianca__nivel {
  font-size: .85rem; font-weight: 400; color: var(--suave);
  margin-left: .5rem; text-transform: lowercase;
}
.confianca__barra {
  flex: 1 1 200px; height: 8px; border-radius: 4px;
  background: var(--superficie-2); overflow: hidden;
}
.confianca__barra span { display: block; height: 100%; background: currentColor; }
.confianca--alta .confianca__barra span { background: var(--ok); }
.confianca--boa .confianca__barra span { background: var(--primaria); }
.confianca--baixa .confianca__barra span { background: var(--warn); }
.confianca--muito-baixa .confianca__barra span { background: var(--danger); }
.confianca__lista { margin: .9rem 0 0; padding-left: 0; list-style: none; }
.confianca__lista li {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .3rem 0; color: var(--suave); font-size: .9rem;
  border-top: 1px solid var(--borda);
}
.confianca__perda {
  color: var(--danger); font-variant-numeric: tabular-nums;
  font-weight: 600; min-width: 2.6rem;
}
/* A % traduzida em reais: é o que ela quer dizer, e o OWNER pediu para ler
   isso sem precisar interpretar (09/08/2026). */
.confianca--media { border-left-color: var(--primaria); }
.confianca--media .confianca__barra span { background: var(--primaria); }
.confianca__traducao {
  margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 8px;
  background: var(--superficie-2); font-size: .95rem; line-height: 1.5;
}
.confianca__afericao {
  margin: .6rem 0 0; font-size: .85rem; color: var(--suave);
}
.confianca__grupo { margin-top: 1rem; }
.confianca__titulo {
  margin: 0; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--suave); font-weight: 600;
}
.confianca__lista--fato li { color: var(--texto); }
.confianca__ok {
  color: var(--ok); font-weight: 600; min-width: 2.6rem;
  font-size: .78rem; text-transform: uppercase;
}
.confianca__risco {
  margin-left: auto; padding-left: .8rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--suave); font-size: .82rem;
}

/* Seletor de garantia: com quanta folga ele quer ler o número. Não é a mesma
   coisa que a nota acima — a nota é precisão, isto é quanto o número é
   conservador. Ideia do OWNER em 09/08/2026. */

/* Escala do gráfico do caixa: o zero é a régua. O que está acima da linha é
   folga (amarelo); o que desce dela é buraco (vermelho). */
.gr-area--positiva { fill: rgba(245, 197, 24, .14); }
.gr-area--negativa { fill: rgba(239, 111, 111, .22); }
.gr-zero { stroke: var(--borda-forte); stroke-width: 1; stroke-dasharray: 4 4; }

/* Explicação do cenário escolhido (/fluxo) — o número precisa vir com a régua
   ao lado, senão "dia típico" e "dia ruim" viram rótulos vazios. */
.cenario-nota {
  padding: .75rem .9rem;
  background: var(--superficie-2); border-radius: var(--raio);
  border-left: 3px solid var(--primaria);
  color: var(--suave); font-size: .88rem; line-height: 1.5;
}
.cenario-nota strong { color: var(--texto); }

/* ---------------------------------------------------------------------------
   Convenções deste arquivo (validado em 07/08/2026)
   ---------------------------------------------------------------------------
   BREAKPOINTS — use SEMPRE um destes quatro, na ordem mobile-last:
       900px  duas colunas viram uma (chat, folha do CEASA)
       768px  sidebar vira menu off-canvas
       640px  tabelas e grades encolhem
       420px  ajuste fino de celular pequeno

   CAMADAS (z-index): 1 conteúdo sobreposto · 20 topbar · 50 overlay ·
       60 painel flutuante. Não invente valores fora dessa escala.

   !important só nos utilitários .u-* e no @media print (onde precisa vencer
   o estilo de tela).

   NOTA DE NOMENCLATURA: .kpi__nota e .card__nota também são usados soltos,
   fora dos seus blocos, como texto auxiliar de campo — é intencional e
   funciona, mas ao criar tela nova prefira .texto-suave, que não carrega o
   nome de outro componente.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Ritmo vertical do conteúdo
   ---------------------------------------------------------------------------
   O espaçamento entre blocos dependia de haver um h2.secao no meio (que traz
   margin-top). Quando dois blocos ficam lado a lado sem título — o que passou
   a acontecer nas telas enxutas — eles colavam. Aqui todo bloco de primeiro
   nível do conteúdo ganha o mesmo respiro, e o último não precisa de u-mb-0.  */
.conteudo > .card,
.conteudo > .card-grid,
.conteudo > .kpi-grid,
.conteudo > .tabela-wrap,
.conteudo > .painel-form,
.conteudo > form,
.conteudo > .vazio,
.conteudo > .cenario-nota,
.conteudo > section,
.conteudo > p,
.conteudo > ul,
.conteudo > ol { margin-bottom: 1.25rem; }
.conteudo > :last-child { margin-bottom: 0; }
/* Título logo depois de um bloco não precisa somar as duas margens. */
.conteudo > .card + h2.secao,
.conteudo > .tabela-wrap + h2.secao,
.conteudo > .kpi-grid + h2.secao,
.conteudo > .card-grid + h2.secao { margin-top: 1.75rem; }

/* ---------------------------------------------------------------------------
   Rótulos de estado (alias de .badge, usado em caixa e fechamentos)
   --------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--superficie-2);
  color: var(--suave);
}
.tag--ok { background: var(--ok-fundo); color: var(--ok); }
.tag--warn { background: var(--warn-fundo); color: var(--warn); }
.tag--danger { background: var(--danger-fundo); color: var(--danger); }

/* Texto secundário dentro de tabela/célula (insumos, precificação). */
.texto-suave { color: var(--suave); font-size: .85rem; }

/* Observação em segunda linha de célula (caixa). */
.nota { color: var(--suave); font-size: .85rem; margin-top: .15rem; }

/* Formulário embutido numa linha de tabela (caixa). */
.linha-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }

/* Botão secundário: menos peso que o ghost, para ação de recusa. */
.btn--sec {
  background: var(--superficie-2);
  color: var(--suave);
  border-color: var(--borda);
}
.btn--sec:hover { color: var(--texto); border-color: var(--borda-forte); }

/* ---------------------------------------------------------------------------
   Três classes que os templates usavam sem estilo nenhum
   --------------------------------------------------------------------------- */
/* Bloco de texto do parecer do investigador (/cobrancas): era uma div nua com
   style inline; ganha a mesma superfície dos outros cartões. */
.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: var(--texto);
}

/* "Ensinar regra" em /pendencias: <details> que abre um formulário. Sem isto
   o resumo colava no conteúdo e nada indicava o agrupamento. */
.ensino-email { margin-top: .5rem; }
.ensino-email > summary { cursor: pointer; list-style: none; }
.ensino-email > summary::-webkit-details-marker { display: none; }
.ensino-email[open] > summary { margin-bottom: .5rem; }

/* Base da área do gráfico do caixa: o preenchimento vem dos modificadores
   (--positiva / --negativa), mas a base define o comportamento comum. */
.gr-area { stroke: none; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Cascata do resultado (/lucro) — a barra mostra o peso de cada linha
   --------------------------------------------------------------------------- */
.cascata--subtotal > td,
.cascata--resultado > td { background: var(--superficie-2); }
.cascata--resultado > td { font-weight: 650; }
.cascata__barra-celula { width: 30%; min-width: 120px; }
.cascata__barra {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--borda-forte);
}
.cascata__barra--receita { background: var(--primaria); }
.cascata__barra--custo { background: var(--danger); opacity: .75; }
.cascata__barra--subtotal { background: var(--suave); }
.cascata__barra--resultado { background: var(--ok); }

/* Casa da gerente: cada linha é um toque só, pensada para o celular. */
.lista-hoje { list-style: none; margin: .6rem 0 0; padding: 0; }
.lista-hoje li { display: flex; align-items: center; gap: .6rem;
                 flex-wrap: wrap; padding: .35rem 0; }

/* ===========================================================================
   REVISÃO DE UI — 09/08/2026
   O que vem daqui para baixo fecha três buracos que a varredura tela a tela
   encontrou: (1) nomes de classe que os templates usavam e o CSS não tinha
   (o elemento nascia sem estilo nenhum); (2) o formulário escrito sem .campo;
   (3) a listagem no celular, que hoje é a mesma tabela larga do computador.
   =========================================================================== */

/* --- 1. Nomes em português que os templates já usam ------------------------
   O app é escrito em português; classe em português é a regra, não a exceção.
   Estes nomes estavam em uso em telas de produção sem nenhuma regra por trás:
   os botões "Aprovar"/"Deixar como está" do Ponto (decisão trabalhista!) e os
   três números do topo da Conferência de notas apareciam sem forma nenhuma. */
.btn--primario { background: var(--primaria); color: var(--primaria-contraste); border-color: var(--primaria); font-weight: 700; }
.btn--primario:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: var(--primaria-contraste); }
.btn--sutil { background: var(--superficie-2); color: var(--suave); border-color: var(--borda); }
.btn--sutil:hover { color: var(--texto); border-color: var(--borda-forte); }

/* .cartoes / .cartao — o mesmo componente de .kpi-grid / .kpi com o nome que
   as telas novas adotaram. Um só desenho, dois nomes. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem 1.15rem;
  box-shadow: var(--sombra);
}
.cartao__rotulo {
  color: var(--suave);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cartao__valor {
  font-size: 1.9rem;
  font-weight: 750;
  margin-top: .35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cartao__corpo { color: var(--texto); font-size: .93rem; }
.cartao__corpo p:first-child { margin-top: 0; }
.cartao__corpo p:last-child { margin-bottom: 0; }

.alerta--aviso { border-left-color: var(--warn); background: var(--warn-fundo); }
.alerta--aviso .alerta__titulo { color: var(--warn); }

.tag--alerta { background: var(--warn-fundo); color: var(--warn); }
.tag--info { background: var(--info-fundo); color: var(--info); }

/* Ações lado a lado numa linha de tabela (Ponto: aprovar / deixar como está). */
.linha-acoes { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }

/* Fila de atalhos em pílula (categorias do catálogo de compras). */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* .obs FORA de tabela é texto auxiliar — dentro dela continua sendo célula de
   texto largo. Os templates usavam <p class="obs"> esperando texto discreto e
   recebiam texto igual ao do corpo. */
p.obs, div.obs, span.obs, li.obs { color: var(--suave); font-size: .9rem; }

/* --- 2. Formulário escrito sem .campo -------------------------------------
   Sete telas (funcionárias, folha, tráfego, e-mail, Gmail, emendas, extrato)
   escrevem `<label>Texto <input></label>` direto. Sem regra, o rótulo e o
   campo ficavam na mesma linha, colados, e a ficha inteira virava um bloco
   corrido. Aqui esse formato ganha exatamente o desenho de .campo. */
.card form label:not(.campo):not(.campo-check):not(.filtro),
.painel-form form label:not(.campo):not(.campo-check):not(.filtro),
.painel-form > label:not(.campo):not(.campo-check) {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--suave);
}
.card form label:not(.campo):not(.campo-check) > input,
.card form label:not(.campo):not(.campo-check) > select,
.card form label:not(.campo):not(.campo-check) > textarea,
.painel-form form label:not(.campo):not(.campo-check) > input,
.painel-form form label:not(.campo):not(.campo-check) > select,
.painel-form form label:not(.campo):not(.campo-check) > textarea {
  width: 100%;
  padding: .55rem .7rem;
  font-size: .95rem;
  font-weight: 400;
  color: var(--texto);
}

/* Ficha longa (a de funcionária tem dezessete campos): duas colunas quando a
   tela permite, para não virar uma coluna infinita de caixinhas. */
.ficha-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1rem;
}
.ficha-campos__acoes {
  grid-column: 1 / -1;
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
/* A ficha inteira é uma sanfona: o cabeçalho mostra de quem é e o que falta. */
details.ficha { padding: .85rem 1.15rem; }
details.ficha > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
details.ficha > summary::-webkit-details-marker { display: none; }
details.ficha > summary::before {
  content: "";
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--suave);
  border-bottom: 2px solid var(--suave);
  transform: rotate(-45deg);
  transition: transform var(--transicao);
  flex: 0 0 auto;
}
details.ficha[open] > summary::before { transform: rotate(45deg); }
details.ficha[open] > summary { margin-bottom: .9rem; }
details.ficha > summary .card__titulo { margin: 0; }
.ficha__topo { user-select: none; }
.ficha__topo .card__titulo { flex: 1 1 auto; }

/* --- 3. Menu de ações da linha --------------------------------------------
   Onde a linha tem mais de duas ações, a principal fica à vista e o resto vai
   para cá. O painel abre EMPILHADO (não flutua): dentro de .tabela-wrap, que
   tem overflow, um popover flutuante seria cortado pela borda. */
.menu-acoes { display: block; }
.menu-acoes > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--suave);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
}
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes > summary::marker { content: ""; }
.menu-acoes > summary::after {
  content: "";
  width: .38rem; height: .38rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transicao);
}
.menu-acoes[open] > summary { color: var(--texto); }
.menu-acoes[open] > summary::after { transform: rotate(-135deg); }
/* A ação que FECHA o item (Concluir da tarefa) é a principal da linha e sai em
   amarelo, como qualquer botão primário. A regra existe porque os seletores
   acima são mais específicos que `.btn--primary` e apagavam o amarelo — a
   Caixa já pedia o botão amarelo e recebia um cinza igual ao dos outros. */
.menu-acoes > summary.btn--primary {
  color: var(--primaria-contraste);
  background: var(--primaria);
  border-color: var(--primaria);
  font-weight: 700;
}
.menu-acoes__painel {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .45rem;
  padding: .6rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.menu-acoes__painel form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.menu-acoes__painel form > input,
.menu-acoes__painel form > select { flex: 1 1 6rem; min-width: 0; }
.menu-acoes__painel .campo { flex: 1 1 100%; }
.menu-acoes__painel .campo textarea { width: 100%; resize: vertical; }
/* Sem piso em rem: dentro de uma célula de tabela um `min-width` fixo passa a
   mandar na largura da coluna inteira — exatamente o que esta revisão veio
   desfazer. O piso vem do `flex-basis` de cada campo, que sabe quebrar. */
.menu-acoes__painel { min-width: 0; }

/* --- 4. Foco visível ------------------------------------------------------
   Só o .btn tinha anel de foco. Quem navega por teclado (e o Dono usa Tab
   para descer a coluna de quantidades do CEASA) ficava sem saber onde está. */
a:focus-visible,
summary:focus-visible,
.filtro:focus-visible,
.seletor-periodo__opcao:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

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

/* --- 5. Listagem no celular: a linha vira ficha ---------------------------
   A tabela de nove colunas não cabe num telefone — nem rolando. Abaixo de
   860px cada <tr> vira um cartão e cada célula ganha o rótulo da sua coluna
   (o `data-rotulo` é escrito pelo realce progressivo do base.html, a partir
   do próprio <thead>). Vale só para as tabelas de LISTAGEM: quem marca é a
   classe .t-cartao, posta só onde há cabeçalho e quatro colunas ou mais —
   as tabelas de duas colunas (a conta do caixa, por exemplo) continuam
   tabelas, que é como elas se leem melhor.
   O corte era 720px, mas a tabela de contas a pagar (9 colunas) mede 842px:
   entre 721 e 842px ela voltava a rodar pro lado (revisão de UI 12/08) —
   860px cobre a faixa e o tablet vê ficha, como manda a regra da casa. */
@media (max-width: 860px) {
  .tabela-wrap.t-cartao {
    overflow: visible;
    max-height: none;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .t-cartao table, .t-cartao tbody, .t-cartao tr, .t-cartao td { display: block; width: auto; }
  .t-cartao thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .t-cartao tbody tr {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: .7rem;
    padding: .2rem .9rem;
  }
  .t-cartao tbody tr:hover td,
  .t-cartao tbody tr:nth-child(even) td { background: none; }
  .t-cartao tbody td {
    display: flex;
    /* wrap: chip .tag (nowrap) e nota longa dividem a linha flex com o
       rótulo — sem quebrar, ou o chip estoura a tela ou a nota colapsa a
       ~1 letra por linha (revisão de UI 12/08: /caixa e /compras/18). */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .35rem 1rem;
    padding: .55rem 0;
    text-align: right;
    border-bottom: 1px solid var(--borda);
  }
  .t-cartao tbody td:last-child { border-bottom: none; }
  .t-cartao tbody td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    color: var(--suave);
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.5;
  }
  /* Célula sem rótulo (coluna de ação com <th> vazio) ocupa a linha inteira. */
  .t-cartao tbody td[data-rotulo=""]::before,
  .t-cartao tbody td:not([data-rotulo])::before { content: none; }
  .t-cartao tbody td[data-rotulo=""],
  .t-cartao tbody td:not([data-rotulo]) { display: block; text-align: left; }
  /* A coluna de ações vira uma pilha de botões de largura inteira. */
  .t-cartao td.acoes-usuario { display: block; text-align: left; min-width: 0; }
  .t-cartao td.acoes-usuario::before { content: attr(data-rotulo); display: block; margin-bottom: .35rem; }
  .t-cartao td.acoes-usuario .btn,
  .t-cartao td.obs { width: auto; }
  .t-cartao td.obs { display: block; text-align: left; max-width: none; }
  .t-cartao td.obs::before { display: block; margin-bottom: .2rem; }
  /* Aba de canal (/precificacao) saía com 28px de altura no celular. */
  .seletor-periodo__opcao { padding: .6rem 1rem; }
}

/* Memória do contato — o que o sistema aprendeu de quem está do outro lado.
   Fica encolhido acima do fio: é consulta, não é o assunto da tela. */
.memoria {
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.memoria__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .78rem;
  color: var(--suave);
  cursor: pointer;
  user-select: none;
}
.memoria__titulo::marker { color: var(--borda-forte); }
.memoria__conta {
  background: var(--superficie-2);
  border-radius: var(--raio-pill);
  padding: 0 .45rem;
  font-weight: 600;
  color: var(--texto);
}
.memoria__lista { list-style: none; margin: 0; padding: 0 1rem .4rem; }
.memoria__item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .45rem 0;
  border-top: 1px solid var(--borda);
}
.memoria__fato { display: block; font-size: .86rem; }
.memoria__origem {
  display: block;
  font-size: .7rem;
  color: var(--suave);
}
.memoria__trecho {
  display: block;
  font-size: .72rem;
  color: var(--suave);
  font-style: italic;
  overflow-wrap: anywhere;
}
.memoria__vazio {
  margin: 0;
  padding: 0 1rem .4rem;
  font-size: .78rem;
  color: var(--suave);
}
.memoria__ensinar { display: flex; gap: .5rem; padding: .2rem 1rem .7rem; }
.memoria__entrada {
  flex: 1;
  padding: .4rem .6rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  font-family: inherit;
  font-size: .82rem;
  color: var(--texto);
  background: var(--superficie-2);
}
.memoria__entrada::placeholder { color: var(--suave); opacity: .8; }
.memoria__entrada:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }

/* ---------------------------------------------------------------------------
   Fluxo de caixa — "o que mudou desde ontem" e a régua fechada
   Uma causa por linha, para ele ler no celular sem procurar.
   --------------------------------------------------------------------------- */
.lista-mudancas, .lista-regras {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
  line-height: 1.45;
}
.lista-regras { font-size: .9rem; }
.lista-regras .kpi__nota { display: block; margin-top: .1rem; }

/* ===========================================================================
   TEMA CLARO DA GERENTE — 11/08/2026
   Ordem do OWNER, literal: "quero que a visualização dela não fique em tema
   dark (...) faça em branco e preto como secundário e de fácil leitura para
   não perder visualização em telas de baixa qualidade".

   Quem liga o tema é o SERVIDOR: base.html põe class="tema-claro" no <body>
   quando o papel é 'gerente' — sem JS, sem preferência de navegador. Aqui só
   se trocam os tokens: mesma estrutura, outras cores. Regras de contraste:
     * fundo branco, texto preto (#111 sobre #fff = 18,9:1 — AAA);
     * cinza só para hierarquia secundária, e nunca cinza-claro-sobre-branco
       (o --suave do claro é #444: 9,7:1, ainda AAA);
     * a "primária" de ação vira o PRETO — amarelo sobre branco é ilegível;
       o amarelo da marca sobra como detalhe (logo e anel de foco), nunca
       como fundo de texto;
     * estado (ok/atenção/erro) = texto ESCURO da cor + fundo claro da cor
       + contorno, para não depender só do matiz numa tela que lava cor.
   =========================================================================== */
.tema-claro {
  /* Superfícies e texto */
  --fundo: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #ececec;
  --sidebar-fundo: #f5f5f5;
  --borda: #b5b5b5;
  --borda-forte: #6e6e6e;
  --texto: #111111;
  --suave: #444444;

  /* Primária: ação e realce em preto sobre branco */
  --primaria: #111111;
  --primaria-escura: #000000;
  --primaria-fundo: #ececec;
  --primaria-contraste: #ffffff;

  /* Status: versão escura da cor para o TEXTO, versão clara para o FUNDO
     (todas as duplas passam de 4,5:1 — AA de texto normal) */
  --ok: #1b6e3d;
  --ok-fundo: #e3f2e8;
  --warn: #8a5300;
  --warn-fundo: #fdf1dc;
  --danger: #b3261e;
  --danger-fundo: #fbe7e5;
  --info: #1d4f91;
  --info-fundo: #e5eefa;

  /* Sombra leve (a do escuro pesava demais sobre branco) e anel de foco no
     amarelo da marca — o único lugar onde ele segue como realce. */
  --sombra: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .08);
  --sombra-forte: 0 8px 24px rgba(0, 0, 0, .18);
  --anel: 0 0 0 3px rgba(220, 174, 11, .55);
  /* A pílula de contagem tem fundo na cor do status (agora escura):
     o texto vira branco. */
  --contagem-texto: #ffffff;

  color-scheme: light;
}
/* Controles nativos (calendário do campo de data, select) acompanham o claro
   — o tema escuro os pede explicitamente com color-scheme: dark. */
.tema-claro input,
.tema-claro select,
.tema-claro textarea { color-scheme: light; }
/* O logo mantém o amarelo da marca: detalhe de identidade, não fundo de
   texto corrido. */
.tema-claro .marca__ic,
.tema-claro .login-marca__ic--letra { background: #f5c518; color: #151002; }
/* Estado não pode depender só da cor: badge e tag ganham contorno da própria
   cor, somado ao texto escuro sobre o fundo claro do status. */
.tema-claro .badge,
.tema-claro .tag { border: 1px solid currentColor; }

/* ===========================================================================
   TIPOGRAFIA DA GERENTE — 11/08/2026 (na sequência do tema claro)
   Ordem do OWNER, literal: "tem muito texto pequeno difícil de ler, deixe o
   tamanho das coisas mais amigáveis na visão dela também".

   O mecanismo é o MESMO do tema claro (classe por papel, decidida no
   servidor), com um detalhe de raiz: todo tamanho deste arquivo é escrito em
   rem, e rem mede a partir do <html> — por isso o base.html põe a classe
   também na raiz, e é `html.tema-claro` quem sobe a base. O app do OWNER não
   muda um pixel: a base escura segue nos 14px lá do topo.

   A régua da visão dela:
     * base 17px (o corpo de texto, 1rem, vira 17px reais no celular);
     * PISO de 14px: nenhuma regra de tela fica abaixo — todo font-size do
       escuro menor que .83rem sobe para .85rem (14,45px) aqui;
     * alvo de dedo: botão, item de menu e campo com 44px de altura mínima;
       campo com fonte de 1rem (17px ≥ 16px) — abaixo de 16px o iPhone dá
       zoom automático ao focar o campo;
     * hierarquia: título da página bem maior que o corpo, e a instrução do
       topo (.subtitulo, a frase "o que fazer") em destaque, não em legenda;
     * tabela com respiro: célula mais alta e número em evidência — o guia
       dela é lido de relance.
   =========================================================================== */
html.tema-claro { font-size: 17px; }

/* --- O piso: tudo que o escuro escreve abaixo de .83rem sobe para .85rem
   (14,45px na base dela). A lista espelha, um a um, os seletores miúdos do
   tema escuro — o teste de tipografia confere que nenhum ficou de fora. */
.tema-claro .rodape,
.tema-claro .kpi__rotulo,
.tema-claro .cartao__rotulo,
.tema-claro thead th,
.tema-claro .badge,
.tema-claro .tag,
.tema-claro .campo > label,
.tema-claro .alerta__contagem,
.tema-claro .grafico-legenda,
.tema-claro .grafico-colunas__valor,
.tema-claro .grafico-colunas__rotulo,
.tema-claro .grafico-colunas__rotulo small,
.tema-claro .bloco-urgencia__qtd,
.tema-claro .codigo-ref,
.tema-claro .folha-ceasa__tabela,
.tema-claro .chat__lista-nota,
.tema-claro .chat-conv__previa,
.tema-claro .chat-conv__hora,
.tema-claro .chat__quem-sub,
.tema-claro .balao__tipo,
.tema-claro .balao__meta,
.tema-claro .chat__aviso,
.tema-claro .balao__autor,
.tema-claro .claude-envio__rotulo,
.tema-claro .campo-check,
.tema-claro .confianca__titulo,
.tema-claro .confianca__ok,
.tema-claro .confianca__risco,
.tema-claro .memoria__titulo,
.tema-claro .memoria__origem,
.tema-claro .memoria__trecho,
.tema-claro .memoria__vazio,
.tema-claro .memoria__entrada,
.tema-claro .t-cartao tbody td::before,
.tema-claro .card form label:not(.campo):not(.campo-check):not(.filtro),
.tema-claro .painel-form form label:not(.campo):not(.campo-check):not(.filtro),
.tema-claro .painel-form > label:not(.campo):not(.campo-check) { font-size: .85rem; }

/* O quadro monoespaçado do fechamento (descrição de tarefa) também sobe ao
   piso, e ganha a entrelinha do corpo. */
.tema-claro .tarefa-descricao--quadro { font-size: .85rem; line-height: 1.5; }

/* --- Alvo de dedo: 44px de altura mínima em tudo que ela toca. O .btn base
   cobre as variantes (--primary, --ghost, --sm…): na visão dela não existe
   botão pequeno. */
.tema-claro .btn {
  min-height: 44px;
  padding: .55rem 1.1rem;
  font-size: 1rem;
}
.tema-claro .nav-item {
  min-height: 44px;
  padding: .55rem .75rem;
  font-size: 1rem;
}
.tema-claro .filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  font-size: .95rem;
}
.tema-claro .menu-acoes > summary { min-height: 44px; font-size: .9rem; }
.tema-claro .seletor-periodo__opcao {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1rem;
  font-size: .9rem;
}

/* Campos na mesma régua dos botões. Fonte de 1rem = 17px: acima dos 16px que
   evitam o zoom automático do iPhone ao focar. (Caixa de seleção e rádio não
   entram: a regra `all: revert` delas tem especificidade maior.) */
.tema-claro input,
.tema-claro select,
.tema-claro textarea {
  min-height: 44px;
  padding: .5rem .7rem;
  font-size: 1rem;
}

/* --- Tabelas e listas do guia: mais respiro e o número em evidência — é o
   que ela lê de relance. */
.tema-claro table { font-size: .95rem; }
.tema-claro tbody td { padding: .8rem .9rem; }
.tema-claro thead th { padding: .75rem .9rem; }
.tema-claro td.num { font-size: 1rem; font-weight: 600; }
.tema-claro .folha-ceasa__tabela thead th { padding: .45rem .5rem; }
.tema-claro .folha-ceasa__tabela tbody td { padding: .45rem .5rem; }
.tema-claro .lista-hoje li { padding: .55rem 0; }

/* --- Hierarquia simples: o título manda, a instrução do topo é destaque. */
.tema-claro .topbar__titulo { font-size: 1.45rem; }
.tema-claro .subtitulo { font-size: 1.1rem; }
.tema-claro h2.secao { font-size: 1.3rem; }
.tema-claro .card__titulo { font-size: 1.1rem; }
/* No celular o título cede um degrau ("Fechamento de caixa" a 1.45rem
   disputa a topbar com o botão do menu e o Sair), mas nunca volta ao 1.1rem
   do escuro: segue bem maior que o corpo. */
@media (max-width: 768px) {
  .tema-claro .topbar__titulo { font-size: 1.3rem; }
}

/* Referencia curta da tarefa (TAF07, ROT02) — o OWNER pediu em 14/08/2026
   para poder falar de uma tarefa pelo codigo. Discreta: e etiqueta, nao
   titulo. */
.codigo-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--suave);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: .05rem .3rem;
  vertical-align: .08em;
}

/* ---- Metas do mês (21/08/2026) — cartões do Painel e da tela /metas ---- */
.meta-cartao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.meta-trilha {
  position: relative; height: 8px; margin: .6rem 0 .5rem;
  background: var(--superficie-2); border-radius: 4px;
}
.meta-trilha__fill { height: 100%; min-width: 2px; border-radius: 4px; background: var(--primaria); }
.meta-trilha--ok .meta-trilha__fill { background: var(--ok); }
.meta-trilha--warn .meta-trilha__fill { background: var(--warn); }
.meta-trilha--danger .meta-trilha__fill { background: var(--danger); }
/* marcas dos degraus de 70% e 80% */
.meta-trilha i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--borda-forte); }
.meta-cartao__ritmo { color: var(--texto); }
.meta-bonus { color: var(--suave); font-size: .9rem; margin: .25rem 0 1.25rem; max-width: 90ch; }
.metas-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: .75rem; }
.metas-form .campo { min-width: 10rem; }
.metas-form__largo { flex: 1 1 16rem; }
.metas-form__nota { color: var(--suave); flex-basis: 100%; }
.metas-form__curto { min-width: 6rem; max-width: 8rem; }
.linha-destaque td { background: var(--ok-fundo); }
.metas-marcas { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .4rem 0; }
.metas-marca { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }
.metas-marca input { width: auto; }
.resumo-lista { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .92rem; }
.resumo-lista li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .22rem 0; border-bottom: 1px solid var(--borda); }
.resumo-lista li:last-child { border-bottom: 0; }
.resumo-lista .suave { color: var(--suave); }

/* ---------------------------------------------------------------------------
   Adiar OU passar para o Claude — uma de cada vez (OWNER, 21/08/2026)

   Os dois formulários ficavam empilhados no mesmo menu, cada um com o seu
   campo "Explicação (obrigatória)": duas caixas de texto idênticas à vista,
   e ele tinha de ler o botão para saber em qual estava escrevendo. Agora as
   abas trocam o formulário — sem JavaScript, só o radio escondido.
   --------------------------------------------------------------------------- */
.escolha-acao { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
/* `input` na regra: `input[type="radio"] { all: revert }` (linha ~108)
   apagava position/opacity e as bolinhas apareciam acima das abas. */
input.escolha-acao__r {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.escolha-acao__abas { display: flex; gap: .4rem; flex-wrap: wrap; }
.escolha-acao__abas .filtro { cursor: pointer; }
/* `form` na regra: `.menu-acoes__painel form` já valia display:flex e vencia
   uma classe sozinha — os dois formulários ficavam à vista assim mesmo. */
.escolha-acao form.escolha-acao__form { display: none; }
.escolha-acao__r:nth-of-type(1):checked ~ form.escolha-acao__form--1,
.escolha-acao__r:nth-of-type(2):checked ~ form.escolha-acao__form--2 { display: flex; }
.escolha-acao__r:nth-of-type(1):checked ~ .escolha-acao__abas label:nth-of-type(1),
.escolha-acao__r:nth-of-type(2):checked ~ .escolha-acao__abas label:nth-of-type(2) {
  background: var(--primaria);
  color: var(--primaria-contraste);
  border-color: var(--primaria);
}
/* Quem navega por teclado precisa ver em qual aba está o foco. */
.escolha-acao__r:nth-of-type(1):focus-visible ~ .escolha-acao__abas label:nth-of-type(1),
.escolha-acao__r:nth-of-type(2):focus-visible ~ .escolha-acao__abas label:nth-of-type(2) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

.batidas-edit { margin-top: .35rem; flex-wrap: wrap; }
.batidas-edit input[type=time] { width: 6.2rem; padding: .25rem .35rem; font-size: .85rem; }