/* EvaSystem Food — Identidade visual oficial (Etapa 1.7.1 — 1.7.10 +
   ajuste visual final; finalizada e aplicada à estrutura funcional no
   Pacote 11.1). Paleta azul-marinho institucional + laranja de ação +
   branco/cinzas neutros de apoio, já aprovada visualmente pelo
   responsável (prototipo/README.md, seção 11). Escala tipográfica
   nomeada abaixo formaliza os tamanhos já em uso desde a Etapa 4 --
   nenhum valor foi alterado, apenas nomeado, encerrando o caráter
   "provisório" registrado na Etapa 1.7. */

:root {
  /* ---- Identidade visual oficial do EvaSystem Food ---- */
  --cor-institucional-principal: #1f3b57; /* azul-marinho principal — barra superior, títulos, elementos institucionais */
  --cor-institucional-escura: #142a3f; /* azul-marinho escuro — ênfase institucional forte */
  --cor-acao-primaria: #e8792c; /* laranja — ações primárias */
  --cor-acao-primaria-hover: #cc661f; /* laranja — hover da ação primária */
  --cor-fundo-app: #f4f6f8; /* fundo geral da aplicação — neutro muito claro */
  --cor-fundo-barra-superior: #1f3b57; /* = institucional principal */
  --cor-fundo-menu-lateral: #ffffff; /* menu lateral claro */
  --cor-fundo-cartao: #ffffff; /* cartões brancos */
  --cor-texto-principal: #1f2430; /* texto principal — quase-preto neutro */
  --cor-texto-secundario: #6b7077; /* texto secundário — cinza de apoio */
  --cor-desabilitado: #c7cbd1; /* estado desabilitado — cinza neutro */
  --cor-aviso-fundo: #eef1f4; /* aviso — fundo neutro (sem cor isolada de alerta) */
  --cor-aviso-borda: #1f3b57; /* aviso — borda institucional discreta */

  /* ---- Variáveis estruturais (remapeadas para a identidade oficial acima;
     mantidas para reaproveitar as regras já existentes em todo o arquivo) ---- */
  --cor-fundo: var(--cor-fundo-app);
  --cor-superficie: var(--cor-fundo-cartao);
  --cor-superficie-alt: #eef1f4;
  --cor-superficie-realce: #e7ecf1;
  --cor-borda: #d7dae0;
  --cor-borda-forte: #b7c0cc;
  --cor-texto: var(--cor-texto-principal);
  --cor-texto-muted: var(--cor-texto-secundario);
  --cor-texto-invertido: #ffffff;
  --cor-cabecalho: var(--cor-fundo-barra-superior);
  --cor-lateral: var(--cor-fundo-menu-lateral);
  --cor-lateral-ativo: #fdeee0; /* laranja muito claro — destaque do item ativo do menu */
  --cor-primaria: var(--cor-institucional-principal); /* elementos institucionais (não usado para .botao--primario) */
  --cor-primaria-texto: #ffffff;
  /* Pacote 11.9 (Etapa 11) -- Acessibilidade. Auditoria de contraste (WCAG
     2.1 AA) encontrou que texto branco sobre --cor-acao-primaria tem só
     2,92:1 (mínimo exigido: 4,5:1 para texto) -- usado em .botao--primario
     e no chip de filtro ativo. Corrigido com uma variável própria (o modo
     escuro já usava texto quase-preto sobre esse mesmo laranja e já
     passava, 5,79:1 -- este ajuste aplica o mesmo padrão no modo claro,
     com a cor institucional escura já aprovada, sem alterar o laranja de
     fundo). Decisão confirmada com o responsável antes de aplicar, por
     alterar a aparência de um elemento da identidade visual já aprovada. */
  --cor-acao-primaria-texto: #142a3f;
  /* Anel de foco de teclado: laranja sobre branco tem só 2,92:1 (mínimo
     para componentes não-textuais: 3:1) -- trocado para a cor
     institucional, que passa com folga (11,53:1) contra qualquer
     superfície clara do app. Dentro do cabeçalho (fundo navy), a cor
     institucional ficaria invisível -- ver override em ".topo
     :focus-visible" mais abaixo. */
  --cor-foco: var(--cor-institucional-principal);
  --cor-alerta-fundo: var(--cor-aviso-fundo);
  --cor-alerta-borda: var(--cor-aviso-borda);

  --raio-pequeno: 4px;
  --raio-medio: 6px;
  --raio-grande: 10px;

  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-8: 32px;

  --sombra-cartao: 0 1px 2px rgba(31, 59, 87, 0.1);
  --sombra-painel: 0 4px 16px rgba(20, 42, 63, 0.22);

  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica oficial (Pacote 11.1) -- nomeia os tamanhos já
     usados em todo o app desde a Etapa 4, sem alterar nenhum valor
     renderizado; consolida variações mínimas (11px/11.5px/12.5px) no
     degrau mais próximo (xs) para reduzir fragmentação. */
  --fonte-tamanho-xs: 12px; /* legendas, badges, notas, textos auxiliares mínimos */
  --fonte-tamanho-sm: 13.5px; /* texto secundário -- tamanho mais usado no app */
  --fonte-tamanho-md: 14px; /* títulos de seção em cartões, marca no cabeçalho */
  --fonte-tamanho-base: 15px; /* corpo do texto -- padrão do body */
  --fonte-tamanho-lg: 16px; /* títulos de destaque em estados vazios */
  --fonte-tamanho-xl: 22px; /* valores de métrica, nome do produto na marca */

  --largura-lateral: 240px;
  --largura-lateral-recolhida: 64px;
  --altura-topo: 60px;
  --largura-maxima-conteudo: 1180px;

  --duracao-transicao: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-institucional-principal: #9fc1e8; /* tom claro para manter contraste de títulos sobre fundo escuro */
    --cor-fundo: #1b1d21;
    --cor-superficie: #24262b;
    --cor-superficie-alt: #202226;
    --cor-superficie-realce: #2c2f35;
    --cor-borda: #3a3d43;
    --cor-borda-forte: #52565e;
    --cor-texto: #eceef1;
    --cor-texto-muted: #a7acb4;
    --cor-texto-invertido: #ffffff;
    --cor-cabecalho: #16181b;
    --cor-lateral: #202226;
    --cor-lateral-ativo: #34373d;
    --cor-primaria: #eceef1;
    --cor-primaria-texto: #1b1d21;
    --cor-acao-primaria-texto: #1b1d21; /* já passava em WCAG AA (5,79:1) antes deste pacote -- mantido sem alteração */
    --cor-foco: #e8792c; /* já passava em WCAG AA (6,1:1 no cabeçalho) antes deste pacote -- mantido sem alteração */
    --cor-alerta-fundo: #2c2f35;
    --cor-alerta-borda: #eceef1;
  }
}

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

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--fonte-tamanho-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cor-institucional-principal);
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--espaco-1);
}

input,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Utilitário de leitura para tecnologia assistiva */
.somente-leitor-de-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Estado oculto padrão para as três telas principais */
[hidden] {
  display: none !important;
}

/* Pacote 11.9 (Etapa 11) -- Acessibilidade. Link "pular para o conteúdo"
   (WIREFRAMES_MOTOR_DINAMICO.md, seção 26: "foco de teclado navegável")
   -- sem ele, quem navega só pelo teclado precisa passar pelo cabeçalho e
   pelos 21 itens do menu lateral em toda página antes de chegar ao
   conteúdo. Invisível até receber foco de teclado, primeiro elemento
   focável da página. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cor-institucional-principal);
  color: #ffffff;
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: 0 0 var(--raio-pequeno) 0;
}

.pular-para-conteudo:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

button:disabled,
[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Componentes reutilizáveis ---------- */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  box-shadow: var(--sombra-cartao);
  padding: var(--espaco-4);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  padding: 10px 18px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duracao-transicao) ease, border-color var(--duracao-transicao) ease;
  min-height: 40px;
}

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

.botao:active {
  background: var(--cor-lateral-ativo);
}

.botao--primario {
  background: var(--cor-acao-primaria);
  border-color: var(--cor-acao-primaria);
  color: var(--cor-acao-primaria-texto);
}

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

.botao:disabled,
.botao[aria-disabled="true"] {
  background: var(--cor-superficie-alt);
  border-color: var(--cor-desabilitado);
  color: var(--cor-texto-secundario);
}

.botao--texto {
  border-color: transparent;
  background: transparent;
}

.botao--texto:hover {
  background: var(--cor-superficie-realce);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fonte-tamanho-xs);
  font-weight: 700;
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.badge--realce {
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  border-color: var(--cor-primaria);
}

.badge--bloqueio {
  border-width: 2px;
  border-style: solid;
}

/* Filtro rápido (chip de alternância, WIREFRAMES_MOTOR_DINAMICO.md,
   seção 8) -- navegação real via link (não JS), estado ativo indicado
   por aria-current, mesmo padrão já usado em .item-menu[aria-current]. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-weight: 600;
  font-size: var(--fonte-tamanho-sm);
  cursor: pointer;
  text-decoration: none;
}

.chip:hover {
  background: var(--cor-superficie-realce);
}

.chip[aria-current="true"] {
  background: var(--cor-acao-primaria);
  border-color: var(--cor-acao-primaria);
  color: var(--cor-acao-primaria-texto);
}

.aviso {
  border: 1px solid var(--cor-alerta-borda);
  background: var(--cor-alerta-fundo);
  border-radius: var(--raio-pequeno);
  padding: var(--espaco-3) var(--espaco-4);
  font-size: var(--fonte-tamanho-sm);
  font-style: italic;
  color: var(--cor-texto);
}

.aviso--protótipo {
  font-style: normal;
}

.estado-vazio {
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie-alt);
  padding: var(--espaco-6);
  text-align: center;
}

.estado-vazio__titulo {
  font-size: var(--fonte-tamanho-lg);
  font-weight: 700;
  margin-bottom: var(--espaco-1);
}

.estado-vazio__texto {
  color: var(--cor-texto-muted);
  font-size: var(--fonte-tamanho-sm);
}

.regiao-mensagens {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.regiao-mensagens:empty {
  display: none;
}

.mensagem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie-realce);
  font-size: var(--fonte-tamanho-sm);
}

.mensagem--info {
  border-color: var(--cor-borda-forte);
}

.mensagem--sucesso {
  border-color: var(--cor-borda-forte);
}

/* Alerta -- mesma convenção de itálico já usada em .aviso (avisos fixos)
   para diferenciar sem depender de cor isolada de alerta (nenhuma foi
   aprovada, prototipo/README.md seção 11). */
.mensagem--alerta {
  border-color: var(--cor-alerta-borda);
  font-style: italic;
}

/* Erro -- mesma convenção de negrito já usada em .erro-campo, e borda
   mais grossa (mesmo recurso já usado em .badge--bloqueio) para
   comunicar severidade sem depender de cor isolada de erro. */
.mensagem--erro {
  border-width: 2px;
  font-weight: 700;
}

.mensagem__icone {
  font-weight: 700;
}

.mensagem__fechar {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--fonte-tamanho-md);
  line-height: 1;
  padding: 2px 4px;
  color: var(--cor-texto-muted);
}

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

.tela-cheia {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-6);
}

.painel-login {
  width: 100%;
  max-width: 420px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-painel);
  padding: var(--espaco-8);
}

.marca {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--espaco-2);
}

.marca__evariup {
  font-size: var(--fonte-tamanho-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-muted);
  font-weight: 700;
}

.marca__produto {
  font-size: var(--fonte-tamanho-xl);
}

.painel-login__descricao {
  color: var(--cor-texto-muted);
  font-size: var(--fonte-tamanho-sm);
  margin: var(--espaco-2) 0 var(--espaco-6);
}

.campo {
  margin-bottom: var(--espaco-4);
}

/* Erro de validação de campo -- sem cor de erro inventada (nenhuma foi
   aprovada na identidade oficial, prototipo/README.md seção 11):
   texto em negrito na cor de texto padrão, nunca dependente de cor
   isolada para comunicar o problema. */
.erro-campo {
  color: var(--cor-texto);
  font-weight: 700;
  font-size: var(--fonte-tamanho-xs);
  margin-top: var(--espaco-1);
}

.campo__controle {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  overflow: hidden;
}

.campo__controle:focus-within {
  outline: 3px solid var(--cor-foco);
  outline-offset: 1px;
}

.campo input {
  flex: 1 1 auto;
  border: 0;
  padding: 11px 12px;
  background: transparent;
  color: var(--cor-texto);
  min-width: 0;
}

.campo input:focus {
  outline: none;
}

.campo__alternar-senha {
  flex: 0 0 auto;
  border: 0;
  border-left: 1px solid var(--cor-borda);
  background: var(--cor-superficie-alt);
  padding: 0 14px;
  cursor: pointer;
  font-size: var(--fonte-tamanho-xs);
  font-weight: 700;
  color: var(--cor-texto-muted);
}

.campo__alternar-senha:hover {
  background: var(--cor-superficie-realce);
}

.painel-login__entrar {
  width: 100%;
  margin-top: var(--espaco-2);
}

.painel-login__rodape {
  margin-top: var(--espaco-6);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.nota-prototipo {
  font-size: var(--fonte-tamanho-xs);
  color: var(--cor-texto-muted);
}

.aviso-prototipo {
  font-size: var(--fonte-tamanho-xs);
  font-weight: 700;
  color: var(--cor-texto);
  background: var(--cor-superficie-realce);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  padding: var(--espaco-2) var(--espaco-3);
}

/* ---------- Seleção de contexto ---------- */

.painel-contexto {
  width: 100%;
  max-width: 480px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-painel);
  padding: var(--espaco-8);
}

.painel-contexto__explicacao {
  color: var(--cor-texto-muted);
  font-size: var(--fonte-tamanho-sm);
  margin: var(--espaco-2) 0 var(--espaco-6);
}

.campo select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.painel-contexto__acoes {
  display: flex;
  gap: var(--espaco-3);
  margin-top: var(--espaco-6);
}

.painel-contexto__acoes .botao {
  flex: 1 1 auto;
}

/* ---------- Estrutura principal da aplicação ---------- */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topo {
  height: var(--altura-topo);
  flex: 0 0 auto;
  background: var(--cor-cabecalho);
  color: var(--cor-texto-invertido);
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  padding: 0 var(--espaco-4);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Cabeçalho tem fundo navy (claro) ou quase-preto (escuro) -- o anel de
   foco institucional/laranja padrão ficaria pouco visível ali. Branco
   passa com folga nos dois modos (11,53:1 no modo claro). */
.topo :focus-visible {
  outline-color: #ffffff;
}

.topo__alternar-menu {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--cor-texto-invertido);
  border-radius: var(--raio-pequeno);
  padding: 8px 10px;
  cursor: pointer;
  min-height: 40px;
}

.topo__alternar-menu:hover {
  background: rgba(255, 255, 255, 0.12);
}

.topo__marca {
  font-weight: 700;
  font-size: var(--fonte-tamanho-md);
  white-space: nowrap;
}

.topo__contexto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-4);
  font-size: var(--fonte-tamanho-xs);
  color: rgba(255, 255, 255, 0.85);
  flex: 1 1 auto;
  min-width: 0;
}

.topo__contexto span {
  white-space: nowrap;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex: 0 0 auto;
}

.topo__acoes .botao {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--fonte-tamanho-sm);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--cor-texto-invertido);
}

.topo__acoes .botao:hover {
  background: rgba(255, 255, 255, 0.14);
}

.topo__notificacoes {
  position: relative;
}

.painel-notificacoes {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  box-shadow: var(--sombra-painel);
  padding: var(--espaco-4);
  z-index: 40;
}

.painel-notificacoes h2 {
  font-size: var(--fonte-tamanho-sm);
  margin-bottom: var(--espaco-2);
}

.painel-notificacoes p {
  font-size: var(--fonte-tamanho-sm);
  color: var(--cor-texto-muted);
}

.corpo {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.lateral {
  flex: 0 0 var(--largura-lateral);
  width: var(--largura-lateral);
  background: var(--cor-lateral);
  border-right: 1px solid var(--cor-borda);
  overflow-y: auto;
  transition: width var(--duracao-transicao) ease, transform var(--duracao-transicao) ease;
}

.app.menu-recolhido .lateral {
  width: var(--largura-lateral-recolhida);
}

.app.menu-recolhido .item-menu__rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lateral__lista {
  padding: var(--espaco-2) 0;
}

.item-menu {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  text-align: left;
  padding: 10px 16px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--cor-institucional-principal);
  cursor: pointer;
  font-size: var(--fonte-tamanho-sm);
  min-height: 40px;
}

.item-menu:hover {
  background: var(--cor-superficie-realce);
}

.item-menu[aria-current="page"] {
  background: var(--cor-lateral-ativo);
  border-left-color: var(--cor-acao-primaria);
  font-weight: 700;
}

.item-menu__marcador {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-borda-forte);
}

.principal {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--espaco-6);
  overflow-y: auto;
}

.principal__conteudo {
  max-width: var(--largura-maxima-conteudo);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.cabecalho-pagina__trilha {
  font-size: var(--fonte-tamanho-xs);
  color: var(--cor-texto-muted);
  margin-bottom: 2px;
}

.cabecalho-pagina__subtitulo {
  color: var(--cor-texto-muted);
  font-size: var(--fonte-tamanho-sm);
  margin-top: var(--espaco-1);
}

.faixa-situacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3) var(--espaco-6);
  background: var(--cor-superficie-realce);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: var(--espaco-4);
}

.faixa-situacao__grupo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}

.faixa-situacao__label {
  font-weight: 700;
  font-size: var(--fonte-tamanho-sm);
}

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-4);
}

.cartao-metrica__label {
  color: var(--cor-texto-muted);
  font-size: var(--fonte-tamanho-xs);
  margin-bottom: var(--espaco-2);
}

.cartao-metrica__valor {
  font-size: var(--fonte-tamanho-xl);
  font-weight: 700;
}

.cartao-metrica__nota {
  margin-top: var(--espaco-2);
  font-size: var(--fonte-tamanho-xs);
  font-style: italic;
  color: var(--cor-texto-muted);
}

.grade-duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-4);
}

.painel__titulo {
  font-size: var(--fonte-tamanho-md);
  margin-bottom: var(--espaco-3);
  padding-bottom: var(--espaco-2);
  border-bottom: 1px solid var(--cor-borda);
}

.lista-alertas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--fonte-tamanho-sm);
}

.lista-alertas li:last-child {
  border-bottom: 0;
}

.lista-alertas__marcador {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-primaria);
  margin-right: var(--espaco-2);
}

.lista-alertas__nome {
  flex: 1 1 auto;
}

.lista-alertas__valor {
  color: var(--cor-texto-muted);
}

.lista-canais li {
  padding: 8px 0;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-canais li:last-child {
  border-bottom: 0;
}

.lista-canais__cabecalho {
  display: flex;
  justify-content: space-between;
  font-size: var(--fonte-tamanho-sm);
  margin-bottom: 4px;
}

.lista-canais__valor {
  color: var(--cor-texto-muted);
  font-size: var(--fonte-tamanho-xs);
}

.lista-canais__barra {
  height: 10px;
  border-radius: 5px;
  background: var(--cor-superficie-alt);
  border: 1px dashed var(--cor-borda-forte);
}

.grade-atalhos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-3);
}

.atalho {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
  border-radius: var(--raio-medio);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie-realce);
  font-weight: 700;
  font-size: var(--fonte-tamanho-sm);
  cursor: pointer;
  padding: var(--espaco-2);
}

.atalho:hover {
  background: var(--cor-lateral-ativo);
}

.barra-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}

.nota-rastreabilidade {
  font-size: var(--fonte-tamanho-xs);
  color: var(--cor-texto-muted);
  font-style: italic;
}

/* ---------- Abas internas (Centro Gerencial / De-Para) ---------- */

.abas-tablist {
  display: flex;
  gap: var(--espaco-2);
  border-bottom: 1px solid var(--cor-borda);
}

.aba-item {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 10px 4px;
  margin-bottom: -1px;
  font-weight: 700;
  font-size: var(--fonte-tamanho-sm);
  color: var(--cor-texto-muted);
  cursor: pointer;
}

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

.aba-item[aria-selected="true"] {
  color: var(--cor-texto);
  border-bottom-color: var(--cor-primaria);
}

/* ---------- Categorias críticas (Base Crítica) ---------- */

.grade-categorias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-3);
  margin-top: var(--espaco-3);
}

.categoria-critica-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie-realce);
  border-radius: var(--raio-medio);
  padding: var(--espaco-3);
}

.categoria-critica-cartao--selecionada {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.categoria-critica-cartao--selecionada .categoria-critica {
  color: var(--cor-primaria-texto);
}

.categoria-critica {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--fonte-tamanho-xs);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  min-height: 24px;
  color: var(--cor-texto);
}

.categoria-critica:hover {
  text-decoration: underline;
}

.categoria-abrir-origem,
.categoria-origem-generica {
  align-self: flex-start;
  font-size: var(--fonte-tamanho-xs);
  padding: 4px 8px;
  min-height: auto;
}

/* ---------- Listagens demonstrativas (Centro Gerencial / Base Crítica) ---------- */

.lista-demonstrativa {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  max-height: 360px;
  overflow-y: auto;
}

.lista-demonstrativa li {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: var(--espaco-3);
}

.lista-demonstrativa__principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  font-size: var(--fonte-tamanho-sm);
  font-weight: 600;
}

.lista-demonstrativa__secundaria {
  margin-top: 4px;
  font-size: var(--fonte-tamanho-xs);
  color: var(--cor-texto-muted);
}

.lista-demonstrativa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
}

.painel-detalhe {
  border-left: 3px solid var(--cor-primaria);
}

.painel-detalhe p {
  margin-top: var(--espaco-1);
  font-size: var(--fonte-tamanho-sm);
}

@media (max-width: 640px) {
  .grade-categorias {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Estrutura da DRE gerencial ---------- */

.envoltorio-tabela {
  overflow-x: auto;
}

.tabela-dre {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fonte-tamanho-sm);
}

.tabela-dre th,
.tabela-dre td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  white-space: normal;
}

.tabela-dre thead th {
  font-size: var(--fonte-tamanho-xs);
  color: var(--cor-texto-muted);
  border-bottom: 1px solid var(--cor-borda-forte);
}

.linha-dre--subtotal th,
.linha-dre--subtotal td {
  font-weight: 700;
  border-top: 2px solid var(--cor-borda-forte);
}

/* ---------- Cartões de indicador (Indicadores mensais) ---------- */

.cartao-indicador {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.cartao-indicador__toggle {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.cartao-indicador--selecionada {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 2px var(--cor-primaria) inset;
}

/* ---------- Seleção em lista (Conciliação) ---------- */

.rotulo-selecao {
  display: inline-flex;
  align-items: center;
  margin-right: var(--espaco-2);
}

.rotulo-selecao input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* ---------- Modal (Novo lançamento — Contas a pagar) ---------- */

.modal-sobreposicao {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 24, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: var(--espaco-8) var(--espaco-4);
  z-index: 50;
}

.modal-conteudo {
  width: 100%;
  max-width: 520px;
  box-shadow: var(--sombra-painel);
}

.modal-conteudo .campo {
  margin-bottom: var(--espaco-3);
}

/* ---------- Overlay do menu móvel ---------- */

.sobreposicao-menu {
  position: fixed;
  inset: 0;
  background: rgba(20, 21, 24, 0.45);
  z-index: 20;
}

/* ---------- Responsividade (Pacote 11.8, Etapa 11) ----------
   Breakpoints oficiais adotados neste pacote -- fecha a pendencia
   registrada em ARQUITETURA_VISUAL_E_NAVEGACAO.md (secao 13,
   "Breakpoints de responsividade... a adotar") e repetida em toda
   tela especializada da Etapa 1 ("parametros tecnicos de
   responsividade... pendencia herdada da Etapa 1.1"). Nenhuma das
   fontes definia um valor exato; os dois breakpoints abaixo ja
   estavam em uso de fato desde o Pacote 11.1/11.2 (herdados do
   protótipo), apenas nunca haviam sido nomeados como decisao oficial:

   - 900px -- transicao para tablet: grades de 4 colunas passam a 2,
     grades de 2 colunas passam a 1. Menu lateral e cabecalho
     permanecem no layout desktop.
   - 640px -- transicao para celular: todas as grades colapsam para 1
     coluna, o menu lateral vira um painel sobreposto (fora do fluxo,
     acionado pelo botao de alternar), e o cabecalho pode quebrar em
     multiplas linhas para manter Empresa/Competencia/Usuario
     visiveis (ver comentario junto a .topo__contexto abaixo).

   Prioridade confirmada pela fonte (secao 9 do mesmo documento): uso
   gerencial/desktop e o caso principal (grids com muitas colunas,
   conciliacao, DRE); o dono do restaurante deve conseguir ao menos
   consultar dashboard, alertas e trocar competencia em tablet/celular
   -- não paridade total de funcionalidade com o desktop. */

@media (max-width: 900px) {
  .grade-cartoes {
    grid-template-columns: repeat(2, 1fr);
  }

  .grade-duas-colunas {
    grid-template-columns: 1fr;
  }

  .grade-atalhos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grade-cartoes {
    grid-template-columns: 1fr;
  }

  .grade-atalhos {
    grid-template-columns: 1fr;
  }

  /* Pacote 11.8 (Etapa 11) -- Responsividade. Antes, .topo__contexto era
     ocultado por completo em telas pequenas -- isso removia o unico
     controle de competencia da tela (input "Competencia" dentro deste
     bloco), quebrando a etapa 3 do fluxo principal de navegacao
     ("Selecionar competencia", ARQUITETURA_VISUAL_E_NAVEGACAO.md, secao
     11) em qualquer celular. .topo tinha altura fixa (--altura-topo),
     entao o contexto nao cabia ao lado da marca/acoes -- resolvido
     permitindo que o cabecalho quebre em varias linhas nesta largura,
     com o contexto ocupando sua propria linha inteira.  */
  .topo {
    height: auto;
    flex-wrap: wrap;
    row-gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-4);
  }

  .topo__marca {
    white-space: normal;
  }

  .topo__contexto {
    order: 3;
    flex-basis: 100%;
  }

  .topo__contexto span {
    white-space: normal;
  }

  .lateral {
    position: fixed;
    top: var(--altura-topo);
    bottom: 0;
    left: 0;
    width: min(280px, 80vw);
    transform: translateX(-100%);
    z-index: 25;
    box-shadow: var(--sombra-painel);
  }

  .app.menu-movel-aberto .lateral {
    transform: translateX(0);
  }

  .app.menu-recolhido .lateral {
    width: min(280px, 80vw);
  }

  .app.menu-recolhido .item-menu__rotulo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
  }

  .painel-notificacoes {
    width: min(320px, 86vw);
  }

  .principal {
    padding: var(--espaco-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}