/* =====================================================================
   AZO Arco :: Estrutura da aplicação
   Modelo "Linha E" do azo2 (css/azo2-linha-e.css): menu lateral como
   cartão flutuante, topo sem barra — só o fundo da página com botões
   redondos por cima — e conteúdo em folhas de canto amplo.
   ===================================================================== */

/* Antes isto era uma grade de duas colunas, com o menu ocupando a
   primeira. Um cartão que flutua não pode ocupar coluna de grade: ele
   precisa sair do fluxo para ter folga em volta. Agora o menu é fixo e
   o conteúdo reserva o corredor com padding, exatamente como o azo2
   faz em `.conteudo { padding-left: var(--azo-menu-atual) }`. */
.app {
  min-height: 100vh;
  padding-left: var(--nav-largura);
  transition: padding-left var(--tempo) var(--curva);
}

.app.nav-recolhida { padding-left: var(--nav-largura-rail); }

/* ---------------------------------------------------------------------
   NAVEGAÇÃO — o cartão flutuante
   248px de caixa com 16px de folga nos quatro lados, raio de 22px e
   contorno em anel. O fundo cinza da página aparece em volta dele.
   --------------------------------------------------------------------- */

.app-nav {
  position: fixed;
  top: var(--nav-folga);
  left: var(--nav-folga);
  bottom: var(--nav-folga);
  z-index: 40;
  width: var(--nav-caixa);
  display: flex;
  flex-direction: column;
  background: var(--nav-fundo);
  color: var(--nav-texto);
  border: 0;
  border-radius: var(--raio-2xl);
  box-shadow: var(--elevacao);
  overflow: hidden;
  transition: width var(--tempo) var(--curva), box-shadow var(--tempo) var(--curva);
}

.nav-recolhida .app-nav { width: var(--nav-caixa-rail); }

/* Recolhido, o menu volta a abrir enquanto o ponteiro está em cima —
   sobrepondo o conteúdo, sem empurrar a página. É o comportamento do
   azo2 (`html.menu-recolhido .boxMenu:hover`), e é o que torna o trilho
   utilizável: dá para ler o nome do item sem desistir do espaço. */
@media (min-width: 992px) and (hover: hover) {
  .nav-recolhida .app-nav:hover {
    width: var(--nav-caixa);
    box-shadow: var(--elevacao-lg);
  }
}

/* A marca é a do AZO, com "Hospital" ao lado: o hospital é um parceiro
   dentro da plataforma, e a identidade do grupo vem primeiro. Medidas do
   azo2: topo de 60px, recuo lateral de 18px, gap de 10px. */
.nav-marca {
  display: flex;
  align-items: center;
  height: 64px;          /* `.menu-lateral-topo` da Linha E */
  padding: 0 20px;
  border-bottom: 0;      /* a Linha E tirou a régua daqui */
  flex-shrink: 0;
}

.nav-marca-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--raio);
}

/* As duas marcas na lateral aberta; o anel só no trilho recolhido — a
   mesma troca que o azo2 faz entre `marca-completa` e `marca-icone`.
   Um dos dois está sempre em `display:none`.

   A régua entre elas é o que separa plataforma de sistema. O
   espaçamento é o X da área de proteção, que no manual é um quarto do
   diâmetro do anel. */
.nav-marca-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

/* As duas na MESMA altura — a caixa do arco-marca.svg tem a mesma
   proporção da do azo-marca.png, então altura igual basta para alinhar
   as letras e igualar a altura-x.

   32px, e não mais 26: o nome encolheu de sete letras para quatro, e a
   marca pôde crescer dentro dos mesmos 208px úteis do menu.
     AZO    335/105 × 32 = 102,1
     régua  10 de vão + 10 de recuo + 1 de filete = 21
     arco   374,3/175 × 32 =  68,4
     total                   191,5
   A 34px o conjunto iria a 201 — ainda caberia, mas sem folga para o
   arredondamento do navegador. */
.nav-marca-azo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nav-marca-sistema {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  padding-left: 10px;
  border-left: 1px solid var(--linha);
}

.nav-marca-simbolo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  display: none;
}

/* O nome vive DENTRO do SVG da marca: `.nav-marca-sub` saiu junto com
   o lockup em texto que existia aqui antes. */

/* ---------------------------------------------------------------------
   GATILHO DA BUSCA RÁPIDA
   Medidas do azo2 (`.menu-busca-rapida`): margem 14px/14px/6px, recuo
   8px 10px, fundo na superfície 2 e a tecla em `kbd` à direita.
   --------------------------------------------------------------------- */

.nav-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
  margin: 4px 14px 10px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  background: var(--papel-0);
  color: var(--tinta-500);
  font-size: var(--txt-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--tempo-rapido) var(--curva), color var(--tempo-rapido) var(--curva);
}

.nav-busca:hover { border-color: var(--linha); color: var(--tinta-700); }

.nav-busca-icone { display: grid; place-items: center; flex-shrink: 0; }
.nav-busca-rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.nav-busca-tecla,
.busca-rapida kbd {
  padding: 1px 6px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--papel-1);
  color: var(--tinta-500);
  font-family: var(--fonte-ui);
  font-size: var(--txt-2xs);
  box-shadow: none;
}

/* Recuo lateral para o item virar pílula, como no azo2: lá a lista tem
   `padding: 6px 12px 12px` e cada link tem raio de 8px. */
/* `.listaItensMenu` da Linha E: padding 2px 12px 12px.

   A barra de rolagem fica invisível até o ponteiro entrar no menu. Ela
   aparecia sempre porque `scrollbar-gutter: stable` reserva a calha e o
   polegar vinha pintado por cima — dois traços permanentes num cartão
   que o resto do tempo é liso. A calha continua reservada: sem ela o
   menu inteiro escorrega 10px quando a barra surge. */
.nav-corpo {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 12px 12px;
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--tempo) var(--curva);
}

.app-nav:hover .nav-corpo,
.nav-corpo:focus-within { scrollbar-color: var(--linha-forte) transparent; }

/* O mesmo para o Chrome e o Safari, que ignoram `scrollbar-color`. */
.nav-corpo::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--raio-pill);
  transition: background-color var(--tempo) var(--curva);
}

.app-nav:hover .nav-corpo::-webkit-scrollbar-thumb,
.nav-corpo:focus-within::-webkit-scrollbar-thumb { background-color: var(--linha-forte); }

.nav-corpo::-webkit-scrollbar-thumb:hover { background-color: var(--tinta-400); }

/* No trilho a calha some de vez: em 72px ela desloca os ícones do eixo,
   e é o que o azo2 também faz (`scrollbar-width: none` quando recolhido
   e sem o ponteiro em cima). */
.nav-recolhida .app-nav:not(:hover) .nav-corpo {
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

.nav-recolhida .app-nav:not(:hover) .nav-corpo::-webkit-scrollbar { display: none; }

.nav-secao { margin-bottom: var(--e-5); }

.nav-secao-titulo {
  padding: 0 var(--e-5) var(--e-2);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--nav-texto-fraco);
}

.nav-item-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 40px;
  padding: 10px 12px;
  margin: 1px 0;
  border-radius: var(--raio-md);   /* 14px, como na Linha E */
  color: var(--nav-texto);
  /* 14.5px é a medida do azo2. Fica entre --txt-sm e --txt-base, e por
     isso entra como valor literal: criar token para um uso só esconde
     mais do que explica. */
  font-size: 14.5px;
  font-weight: var(--peso-medio);
  /* Nome longo quebra linha em vez de estourar a largura do cartão. */
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  text-decoration: none;
  transition: background var(--tempo-rapido) var(--curva), color var(--tempo-rapido) var(--curva);
}

/* Sem fita na navegação. Com o item em pílula ela ficaria pendurada
   fora do canto arredondado, e no azo2 o item ativo se distingue por
   fundo, cor do texto e cor do ícone — não por marcação lateral.
   A fita continua valendo onde carrega INFORMAÇÃO de estado: indicador,
   linha de tabela e resultado do balcão, que o azo2 não tem equivalente. */

.nav-item-link:hover {
  background: var(--nav-hover);
  color: var(--tinta-900);
}

/* Item ativo: pílula CORAL SÓLIDA com texto branco e sombra colorida,
   como na Linha E. A versão anterior usava o tom claro `--marca-050`,
   que era o que o azo2-tema.css fazia antes de ser sobreposto. */
.nav-item-link.is-ativo {
  background: var(--marca-600);
  color: #FFFFFF;
  font-weight: var(--peso-forte);
  box-shadow: var(--sombra-marca-forte);
}

.nav-item-link.is-ativo:hover {
  background: var(--marca-700);
  color: #FFFFFF;
}

/* Na pílula coral o ícone é branco junto com o texto. */
.nav-item-link.is-ativo .nav-item-icone { color: #FFFFFF; }

.nav-item-icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .82;
}

.nav-item-link.is-ativo .nav-item-icone { opacity: 1; }

.nav-item-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item-contador {
  font-family: var(--fonte-mono);
  font-size: var(--txt-2xs);
  font-weight: 500;
  padding: 1px var(--e-2);
  border-radius: var(--raio-pill);
  background: var(--papel-3);
  color: var(--tinta-700);
}

.nav-item-contador.is-alerta {
  /* Fundo solido com texto branco exige o -700: sobre o -500 o branco
     fica em 3.19:1. */
  background: var(--alerta-700);
  color: #FFFFFF;
}

/* Rodapé da navegação: recolher o menu e o estado do vínculo */
.nav-rodape {
  flex-shrink: 0;
  border-top: 0;        /* a Linha E também tirou a régua daqui */
  padding: 6px 12px 12px;
}

/* Recolher o menu, como no azo2: linha inteira, raio de 8px igual ao item
   do menu, seta que gira 180 graus quando a lateral está recolhida. */
.nav-recolher {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 38px;
  padding: var(--e-2) var(--e-3);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nav-texto-fraco);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--tempo-rapido) var(--curva), color var(--tempo-rapido) var(--curva);
}

.nav-recolher:hover { background: var(--nav-hover); color: var(--tinta-900); }

.nav-recolher-icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--tempo) var(--curva);
}

.nav-recolhida .nav-recolher-icone { transform: rotate(180deg); }

/* O estado do vínculo. O logo do AZO saiu daqui quando subiu para o topo
   do menu: repetido no rodapé não acrescentava informação, só peso. */
.nav-vinculo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-2xs);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--nav-texto-fraco);
  padding: var(--e-2) var(--e-3);
}

.nav-vinculo-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-vinculo-ponto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok-500);
  flex-shrink: 0;
}

.nav-vinculo-ponto.is-simulado { background: var(--alerta-500); }
.nav-vinculo-ponto.is-fora { background: var(--erro-500); }

/* Recolhida: vira trilho de ícones.

   Todo seletor daqui leva `:not(:hover)`. Antes a largura voltava a 248px
   no hover mas os rótulos continuavam em `display: none`, então o menu
   abria vazio — uma coluna larga com os ícones encostados à esquerda. É
   assim que o azo2 escreve estas regras, e por um bom motivo: com o
   ponteiro em cima o menu NÃO está recolhido, só parece. */
.nav-recolhida .app-nav:not(:hover) .nav-marca-logo,
.nav-recolhida .app-nav:not(:hover) .nav-secao-titulo,
.nav-recolhida .app-nav:not(:hover) .nav-item-texto,
.nav-recolhida .app-nav:not(:hover) .nav-item-contador,
.nav-recolhida .app-nav:not(:hover) .nav-busca-rotulo,
.nav-recolhida .app-nav:not(:hover) .nav-busca-tecla,
.nav-recolhida .app-nav:not(:hover) .nav-recolher-rotulo,
.nav-recolhida .app-nav:not(:hover) .nav-vinculo-texto { display: none; }

/* No trilho sobram ~56px úteis: o logo completo (102px) não cabe, e entra
   o anel no lugar dele. */
.nav-recolhida .nav-marca-simbolo { display: block; }
.nav-recolhida .app-nav:hover .nav-marca-simbolo { display: none; }

.nav-recolhida .app-nav:not(:hover) .nav-vinculo { justify-content: center; padding-inline: 0; }
.nav-recolhida .app-nav:not(:hover) .nav-busca { justify-content: center; margin-inline: var(--e-3); }
.nav-recolhida .app-nav:not(:hover) .nav-recolher { justify-content: center; padding-inline: 0; }

.nav-recolhida .app-nav:not(:hover) .nav-item-link { justify-content: center; padding-inline: 0; }
.nav-recolhida .app-nav:not(:hover) .nav-marca,
.nav-recolhida .app-nav:not(:hover) .nav-marca-link { justify-content: center; padding-inline: 0; }
.nav-recolhida .app-nav:not(:hover) .nav-secao { margin-bottom: var(--e-3); }
.nav-recolhida .app-nav:not(:hover) .nav-secao + .nav-secao { border-top: 1px solid var(--nav-borda); padding-top: var(--e-3); }

/* Aberto pelo ponteiro, o menu sobrepõe o conteúdo em vez de empurrá-lo:
   o corredor continua com 104px e o cartão passa por cima. */
.nav-recolhida .app-nav:hover { z-index: 45; }

/* ---------------------------------------------------------------------
   ÁREA PRINCIPAL
   --------------------------------------------------------------------- */

.app-principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--papel-0);
}

/* O topo da Linha E não é uma barra: é o próprio fundo da página, com
   os controles flutuando como pílulas brancas. Daí não ter borda, nem
   superfície, nem desfoque — não há nada para separar. */
.app-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topo-altura);
  padding: 16px 28px 12px 12px;
  background: var(--papel-0);
  border-bottom: 0;
}

/* Os controles do topo são pílulas brancas de 44px soltas sobre o
   fundo da página — mesmas medidas de `.openMenu` e `.menu-acoes-topo`
   da Linha E. */
.topo-botao {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--papel-1);
  box-shadow: var(--elevacao);
  color: var(--tinta-500);
  cursor: pointer;
  transition: color var(--tempo-rapido) var(--curva), box-shadow var(--tempo-rapido) var(--curva);
}

.topo-botao:hover {
  color: var(--marca-700);
  box-shadow: 0 0 0 1px var(--marca-300), var(--sombra-cartao);
}

/* O botão de recolher existe nos dois lugares, como no azo2: o `.openMenu`
   fica no topo e o `.recolher-menu` no rodapé do menu. São o mesmo
   comando — quem está com o olho no conteúdo usa o de cima, quem está
   navegando pelo menu usa o de baixo. No celular é ele que abre a
   gaveta, e aí é o único. */
.topo-gaveta { display: grid; }

/* A trilha carrega o nome da tela, como no azo2: caminho miúdo em cima,
   título grande embaixo. Por isso ela quebra em duas linhas — o título
   tem `flex-basis: 100%` e vai para a segunda. */
.topo-trilha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0;
  column-gap: var(--e-2);
  font-size: 12.5px;
  font-weight: var(--peso-forte);
  color: var(--tinta-500);
  min-width: 0;
}

.topo-trilha a { color: var(--tinta-500); text-decoration: none; }
.topo-trilha a:hover { color: var(--marca-700); text-decoration: underline; }
.topo-trilha-sep { color: var(--tinta-500); font-weight: var(--peso-normal); }

.topo-trilha-tela {
  flex: 0 0 100%;
  order: 3;
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: var(--peso-extra);
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--tinta-900);
}

.topo-espaco { flex: 1; }

.topo-ambiente {
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  padding: 3px var(--e-2);
  border-radius: var(--raio-sm);
  background: var(--alerta-100);
  color: var(--alerta-700);
  border: 1px solid color-mix(in srgb, var(--alerta-700) 25%, transparent);
}

/* Identidade do usuário no topo */
/* Só o avatar, como no azo2 (`.menuUser`): 36px, redondo, e no hover um
   anel na tinta clara da marca em vez de caixa com borda. */
.topo-usuario {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--tinta-700);
  transition: box-shadow var(--tempo-rapido) var(--curva);
}

.topo-usuario:hover { box-shadow: 0 0 0 3px var(--marca-100); }
/* O foco fica com o contorno global de `:focus-visible`: o anel claro do
   hover tem 1.09:1 sobre o branco e não serve como indicador de foco. */

.avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--raio-sm);
  background: var(--marca-100);
  color: var(--marca-800);
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
}

.avatar-lg { width: 44px; height: 44px; font-size: var(--txt-base); }
.avatar-redondo { width: 40px; height: 40px; border-radius: 50%; }   /* `.menuUser` do azo2 */

/* ---------------------------------------------------------------------
   CONTEÚDO
   --------------------------------------------------------------------- */

.app-conteudo {
  flex: 1;
  width: 100%;
  max-width: var(--conteudo-max);
  margin: 0 auto;
  /* Recuo assimétrico, como na Linha E: à esquerda os 16px de folga do
     menu já afastam o conteúdo, então sobram 12px; à direita vão os
     28px inteiros. */
  padding: var(--e-2) 28px var(--e-16) 12px;
  /* Container de consulta: as grades reagem a largura REAL disponivel,
     nao a do viewport. A navegacao e o recuo tiram 322px a 1024px, e ela
     ainda pode ser recolhida — um breakpoint por viewport erra sempre. */
  container-type: inline-size;
  container-name: conteudo;
}

/* Cabeçalho de página. O título saiu daqui: na Linha E o nome da tela
   mora na barra de cima, impresso pela trilha (ver views/partials/topo).
   Sobrou o que o azo2 não tem e este sistema faz questão de ter — a nota
   que explica a regra da tela — mais os botões de ação.

   Sem título, a régua embaixo não separava mais nada: virava um traço
   solto acima do conteúdo. Saiu junto. */
.cabecalho-pagina {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}

.cabecalho-pagina-texto {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

.cabecalho-pagina-nota {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--tinta-500);
  max-width: 68ch;
}

/* Com a nota ausente o bloco de texto fica vazio e os botões precisam
   ir para a direita por conta própria — `space-between` não resolve,
   porque o irmão vazio ainda ocupa o começo da linha. */
.acoes-pagina { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; margin-left: auto; }

/* Folha: é o `.box-conteudo` do azo2. Na Linha E ela não tem borda —
   tem um anel de 1px em box-shadow e a sombra discreta por baixo. O
   anel não entra no box model nem serrilha em canto de 20px. */
.folha {
  background: var(--papel-1);
  border: 0;
  border-radius: var(--raio-xl);
  box-shadow: var(--elevacao);
}

.folha + .folha { margin-top: var(--e-5); }

/* A margem do irmão acima serve a folhas empilhadas no fluxo normal.
   Dentro de uma grade ou de uma pilha flex quem espaça é o `gap`: a
   margem ali empurra o card para baixo do topo da própria faixa e
   desalinha a linha inteira — era a causa de dois cards lado a lado
   comecarem em alturas diferentes. */
.grade > .folha + .folha,
.empilha > .folha + .folha { margin-top: 0; }

/* Card dentro de uma grade: o corpo estica e o rodape desce para a
   base, para que os botoes de todos os cards da linha fiquem na mesma
   altura. Sem isso o rodape para onde o conteudo acabou, e um card com
   menos texto deixava os botoes flutuando no meio. */
.grade > .folha {
  display: flex;
  flex-direction: column;
}

.grade > .folha > .folha-corpo,
.grade > .folha > .folha-corpo-apertado,
.grade > .folha > .folha-corpo-zero { flex: 1 1 auto; }

.grade > .folha > .folha-rodape { margin-top: auto; }

.folha-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha);
}

.folha-cabecalho h2,
.folha-cabecalho h3 { font-size: var(--txt-md); }

.folha-cabecalho-nota {
  font-size: var(--txt-sm);
  color: var(--tinta-500);
  margin-top: 2px;
}

.folha-corpo { padding: var(--e-5); }
.folha-corpo-apertado { padding: var(--e-4); }

/* Corpo sem respiro, usado por tabelas rentes à borda do cartão.
   Rola sozinho no eixo X: sem isso, uma tabela mais larga que a tela
   empurra a página inteira e cria rolagem horizontal no celular. */
.folha-corpo-zero {
  padding: 0;
  overflow-x: auto;
}

.folha-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--linha);
  background: var(--papel-2);
  border-radius: 0 0 var(--raio-xl) var(--raio-xl);
  font-size: var(--txt-sm);
  color: var(--tinta-500);
}

/* Grades de apoio */
.grade { display: grid; gap: var(--e-5); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Indicadores: numero de colunas explicito, nao `auto-fit`.
   Com `auto-fit` a contagem segue a largura disponivel, e um conjunto
   de 4 cartoes caia em 3+1 entre 660px e 980px — o quarto sozinho, com
   metade da linha vazia ao lado. Divisores exatos nunca deixam orfao:
   .grade-4 vai 4 -> 2 -> 1 e .grade-3 vai 3 -> 1. */
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-painel { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

@media (max-width: 1100px) {
  .grade-painel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   RESPONSIVO
   Abaixo de 992px a navegação vira gaveta. Sem menu hambúrguer flutuante
   sobre o conteúdo: a gaveta empurra o foco e devolve ao botão ao fechar.
   --------------------------------------------------------------------- */

.nav-fundo { display: none; }

@media (max-width: 991.98px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app.nav-recolhida { grid-template-columns: minmax(0, 1fr); }

  /* Na gaveta o menu continua sendo cartão: a Linha E só encolhe a
     folga de 16 para 8px e faz ele deslizar de fora para dentro. */
  .app { padding-left: 0; }
  .app.nav-recolhida { padding-left: 0; }

  .app-nav {
    position: fixed;
    top: 8px; left: 8px; bottom: 8px;
    width: min(300px, 84vw);
    z-index: 60;
    transform: translateX(calc(-100% - 24px));
    transition: transform var(--tempo) var(--curva);
  }

  .app.nav-aberta .app-nav { transform: none; box-shadow: var(--elevacao-lg); }

  /* O trilho não existe no celular: a gaveta abre sempre inteira. */
  .nav-recolhida .app-nav { width: min(300px, 84vw); }

  .app.nav-aberta .nav-fundo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(16, 24, 40, .45);
  }

  /* Na gaveta a lateral abre inteira: a preferência de recolher, que é
     de estação de trabalho, não vale aqui e tudo volta ao estado cheio.
     Os seletores repetem o `:not(:hover)` das regras do trilho porque é
     exatamente essas que precisam ser desfeitas. */
  .nav-recolhida .app-nav:not(:hover) .nav-marca-logo,
  .nav-recolhida .app-nav:not(:hover) .nav-secao-titulo,
  .nav-recolhida .app-nav:not(:hover) .nav-item-texto,
  .nav-recolhida .app-nav:not(:hover) .nav-item-contador,
  .nav-recolhida .app-nav:not(:hover) .nav-busca-rotulo,
  .nav-recolhida .app-nav:not(:hover) .nav-busca-tecla,
  .nav-recolhida .app-nav:not(:hover) .nav-vinculo-texto { display: revert; }

  .nav-recolhida .nav-marca-simbolo { display: none; }

  .nav-recolhida .app-nav:not(:hover) .nav-item-link { justify-content: flex-start; padding-inline: var(--e-3); }
  .nav-recolhida .app-nav:not(:hover) .nav-marca,
  .nav-recolhida .app-nav:not(:hover) .nav-marca-link { justify-content: flex-start; }
  .nav-recolhida .app-nav:not(:hover) .nav-marca { padding-inline: 20px; }
  .nav-recolhida .app-nav:not(:hover) .nav-busca { justify-content: flex-start; margin-inline: 14px; }
  .nav-recolhida .app-nav:not(:hover) .nav-vinculo { justify-content: flex-start; padding-inline: var(--e-3); }
  .nav-recolhida .app-nav:not(:hover) .nav-secao { margin-bottom: var(--e-5); }
  .nav-recolhida .app-nav:not(:hover) .nav-secao + .nav-secao { border-top: 0; padding-top: 0; }

  /* A rolagem do menu volta ao comportamento normal na gaveta. */
  .nav-recolhida .app-nav:not(:hover) .nav-corpo { scrollbar-gutter: stable; scrollbar-width: thin; }
  .nav-recolhida .app-nav:not(:hover) .nav-corpo::-webkit-scrollbar { display: revert; }

  /* Recolher o menu só existe onde há menu fixo para recolher. */
  .nav-recolher { display: none; }

  .app-conteudo { padding: var(--e-2) var(--e-4) var(--e-12); }
  .app-topo { padding: 12px 12px 8px; gap: var(--e-2); }
  .topo-trilha-tela { font-size: 19px; }
  .folha { border-radius: 18px; }
}

@media (max-width: 575.98px) {
  .cabecalho-pagina { align-items: stretch; flex-direction: column; }
  .acoes-pagina { width: 100%; }
  .acoes-pagina .btn { flex: 1; justify-content: center; }
  .app-conteudo { padding-inline: var(--e-3); }
  .folha-corpo { padding: var(--e-4); }
}

/* ---------------------------------------------------------------------
   GRADES DE INDICADORES — colunas por largura do container
   Divisores exatos da quantidade de cartoes, para nunca sobrar orfao:
   4 cartoes vao 4 -> 2 -> 1 e 3 cartoes vao 3 -> 1. As larguras abaixo
   mantem cada cartao com pelo menos ~190px, medida em que o numero
   grande e o rotulo ainda cabem sem quebrar.
   --------------------------------------------------------------------- */

@container conteudo (max-width: 819px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container conteudo (max-width: 439px) {
  .grade-4 { grid-template-columns: minmax(0, 1fr); }
}

@container conteudo (max-width: 619px) {
  .grade-3 { grid-template-columns: minmax(0, 1fr); }
}