/* ==========================================================================
   Vitrall Saúde · 04 TELAS
   Grade de cada tela, na medida do arquivo de design.
   Regra da secao 3: inset de 16px, gap de 16px, centro 1fr com min-height:0,
   coluna lateral entre 288 e 420px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Moldura da aplicacao.
   O design tem 1440x900; aqui a moldura ocupa a janela inteira e mantem, uma a
   uma, as medidas da secao 3: inset de 16px, gap de 16px, colunas laterais
   fixas em px e centro 1fr com min-height:0. Assim nada sobra nas laterais e o
   espaco extra vai para a coluna do meio, que e o que o guia manda esticar.
   -------------------------------------------------------------------------- */

/* O palco NAO rola: a moldura cabe na janela e quem rola e o conteudo dos
   cartoes. Cheguei a abrir a rolagem aqui para ganhar altura e o menu esticou
   alem da tela — tela compacta e o requisito, e ele vem antes. */
.palco { width: 100vw; height: 100vh; overflow: hidden; background: var(--fundo-tela); }

.app {
  width: 100%; height: 100%;
  display: flex;
  overflow: hidden;
  background: var(--fundo-tela);
  position: relative;
}

.conteudo {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  padding: var(--e16);
  gap: var(--e16);
  /* Rola AQUI, e nao no palco. O menu e irmao deste elemento e fica ancorado no
     `.app`, entao ele nao se move com a rolagem — que e o comportamento pedido.
     Rolar no palco arrastaria o menu junto e o esticaria alem da tela.
     Sem isto o `.app` simplesmente CORTA o que nao coube: com a fonte maior, os
     ultimos cartoes desapareciam sem barra nenhuma indicando que existiam. */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--contorno) transparent;
}
.conteudo::-webkit-scrollbar { width: 6px; }
.conteudo::-webkit-scrollbar-thumb { background: var(--contorno); border-radius: 3px; }
.conteudo::-webkit-scrollbar-track { background: transparent; }

/* O TOPO QUEBRA LINHA, E O TITULO PODE ENCOLHER (20/09).

   Era uma linha so, sem `flex-wrap`, com o titulo em `.nowrap`. Num telefone de
   390px isso nao aperta nem corta: o `.topo__acoes` SAI DA TELA — sem
   reticencias, sem barra de rolagem, sem nada que diga que ha mais coisa ali. O
   relogio e o ultimo botao simplesmente deixavam de existir para quem abrisse a
   tela no celular, e o painel do motorista e usado em pe, na porta da van.

   Tres mudancas, cada uma resolvendo um pedaco:
   · `flex-wrap` deixa as acoes caírem para a linha de baixo em vez de vazarem;
   · `min-width: 0` no bloco do titulo permite que ele ENCOLHA — sem isso o
     titulo `nowrap` mantem a largura dele e empurra o resto para fora, que e o
     jeito classico de um flex vazar sem ninguem entender por que;
   · `text-overflow` no titulo e no apoio: encolher sem reticencias so troca o
     texto que some por um texto cortado no meio da palavra. */
.topo { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
        padding: 0 var(--e6); gap: var(--e16); flex-wrap: wrap; }
.topo > :first-child { min-width: 0; flex: 1 1 auto; }
.topo .t-tela, .topo__apoio { overflow: hidden; text-overflow: ellipsis; }
.topo__apoio { font-size: 14px; color: var(--texto-apoio); margin-top: 2px; }
/* A faixa de acoes quebra linha: sem flex-wrap, painel que cresce (auditoria
   medica, fila regulada) espreme o segmentado ate ele virar uma coluna por cima
   do titulo e joga o ultimo botao para fora da tela, sem overflow visivel. */
.topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e10); }

/* --------------------------------------------------------------------------
   01 Login
   -------------------------------------------------------------------------- */

/* A moldura do login preenche a janela, guardando o respiro de 16px do inset
   do guia. A proporcao 1.05fr / 1fr das duas metades vem do design. */
.login {
  width: 100vw; height: 100vh; overflow: hidden;
  padding: var(--e16);
  background: var(--fundo-tela);
}
.login__moldura {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--cartao);
  border-radius: var(--r-moldura);
  box-shadow: var(--s-moldura);
  overflow: hidden;
}

.login__marca {
  background: var(--azul-escuro);
  padding: clamp(32px, 6vh, 56px) clamp(36px, 4vw, 60px);
  display: flex; flex-direction: column; justify-content: flex-start;
  color: var(--sobre-forte); position: relative; overflow: hidden;
}
.login__blob { position: absolute; border-radius: 50%; }
.login__blob--1 { right: -150px; top: -120px; width: 440px; height: 440px; background: var(--azul-menu-blob); }
.login__blob--2 { right: 70px; bottom: -200px; width: 320px; height: 320px; background: var(--blob-acento); }
.login__marca > :not(.login__blob) { position: relative; }

.login__logo-linha { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(28px, 6vh, 56px); }
.login__logo { width: 44px; height: 44px; flex-shrink: 0; }
.login__marca-nome { font-size: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.login__titulo { margin: 0 0 var(--e22); max-width: 17ch; text-wrap: pretty; }
.login__lide { font-size: 18px; line-height: 1.6; color: var(--sobre-escuro); margin: 0; max-width: 34ch; }

.login__numeros { display: flex; gap: var(--e12); margin-top: auto; padding-top: var(--e20); }
.login__numero {
  flex: 1; padding: 18px var(--e20); border-radius: 24px;
  background: var(--sobre-veu-1); border: 1px solid var(--sobre-borda);
}
.login__numero-valor { font-family: var(--mono); font-size: 26px; color: var(--amarelo-acento); }
.login__numero-rotulo { font-size: 14px; color: var(--sobre-escuro); margin-top: var(--e4); }

/* justify-content:center corta o topo quando o conteudo passa da altura;
   "safe" mantem o inicio visivel e so entao rola. */
.login__form { padding: clamp(32px, 6vh, 60px) clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: safe center; overflow-y: auto; }
.login__campos { display: flex; flex-direction: column; gap: var(--e16); }
.login__opcoes { display: flex; align-items: center; justify-content: space-between; padding: var(--e4) var(--e4) 0; }
.login__lembrar { display: flex; align-items: center; gap: var(--e10); font-size: 15px; color: var(--texto-corrente); white-space: nowrap; }
.login__link { font-size: 15px; font-weight: 600; color: var(--azul-primario); white-space: nowrap; }
.login__ou { display: flex; align-items: center; gap: var(--e14); color: var(--cinza-desativado); font-size: 13px; margin: 2px 0; }
.login__ou::before, .login__ou::after { content: ""; flex: 1; height: 1px; background: var(--divisor-claro); }
.login__govbr {
  height: 56px; border-radius: 28px; background: var(--cartao);
  border: 1px solid var(--contorno); box-shadow: var(--s-leve);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 16px; font-weight: 600; color: var(--azul-primario);
}
.login__govbr-prefixo { color: var(--texto-corrente); font-weight: 400; }
.login__govbr-nome { font-weight: 700; letter-spacing: -.02em; }
.login__pe { margin-top: 40px; display: flex; justify-content: space-between; font-size: 13px; color: var(--cinza-desativado); font-family: var(--mono); }

/* Transição de entrada (login -> painel), no jeito de uma lente de câmera
   Saída (login.js): o login fecha num círculo até o centro e o ícone colorido
   abre (js/lente.js). Chegada (js/entrada.js): o ícone fecha e o painel abre
   no mesmo círculo. O fundo das duas páginas vira a cor da marca durante o
   movimento, e é ela que aparece "atrás da lente". Até o script da chegada
   montar o ícone animado, o favicon segura o lugar dele no centro (140px do
   favicon, que corta 28 das 32 unidades do desenho, = 160px do ícone). */
html.saindo, html.saindo body,
html.entrando, html.entrando body { background: var(--azul-escuro); }
.transicao-lente {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  color: var(--sobre-forte);
}
.transicao-lente__logo { width: 160px; height: 160px; }
.transicao-lente__logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.transicao-lente__nome { font-size: 22px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: opacity .4s ease; }
.transicao-lente__nome--some { opacity: 0; }
html.entrando:not(.entrando--pronta) body::before {
  content: ""; position: fixed; left: 50%; top: 50%; z-index: 9999; pointer-events: none;
  width: 140px; height: 140px; margin: -97px 0 0 -70px;
  background: url(/favicon.svg) no-repeat center / 140px 140px;
}
html.entrando .palco { clip-path: circle(0% at 50% 50%); }
html.entrando.entrando--abre .palco { animation: lente-abre 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lente-abre {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  html.entrando body::before { display: none; }
  html.entrando .palco { clip-path: none; animation: none; }
}

/* --------------------------------------------------------------------------
   02 Recepcao
   -------------------------------------------------------------------------- */

.recepcao__kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e12); flex-shrink: 0; }
.kpi { padding: 17px var(--e20); border-radius: 24px; }
.kpi__valor-linha { display: flex; align-items: baseline; gap: 7px; margin-top: var(--e6); }

/* A MESMA CORRECAO DA GRADE DO ATENDIMENTO (ver 03 Atendimento, abaixo).
   Aqui ela aparecia na coluna da esquerda: "Consultorios e guiches" ficava com
   a sobra da altura depois da busca, e a ultima linha da lista era cortada ao
   meio — 23px faltando numa tela de notebook. O `min-height: auto` deixa a
   grade crescer com o conteudo em vez de ser espremida na altura da janela;
   passando dela, quem rola e a pagina.

   NAO uso `align-items: start` aqui, ao contrario da grade do atendimento: as
   tres colunas do balcao sao lidas em conjunto, e com altura livre elas ficam
   desalinhadas — a fila e a agenda encolhiam para 240px ao lado de uma coluna
   de 500px, e sobrava um buraco no canto. O `stretch` do grid mantem as tres
   na altura da mais alta, que e o desenho do balcao. */
.recepcao__grade { flex: 1; display: grid; grid-template-columns: 288px 1fr 312px; gap: var(--e16); min-height: auto; }
.recepcao__lateral { display: flex; flex-direction: column; gap: var(--e16); min-height: auto; }
/* O cartao dos consultorios tem a altura da lista, e nao a sobra da coluna. */
.recepcao__lateral > .cartao.cresce { flex: 0 0 auto; }

.cartao--busca { padding: 18px; flex-shrink: 0; }
.paciente-achado { background: var(--secundario); border-radius: var(--r-bloco); padding: 15px; margin-top: var(--e14); }

.sala { display: flex; align-items: center; gap: 11px; padding: var(--e10) var(--e14); background: var(--secundario); border-radius: var(--r-linha-p); width: 100%; text-align: left; }
.sala__estado { font-size: 12px; font-weight: 600; color: var(--texto-apoio); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }

.fila__grupo-cabeca { display: flex; align-items: center; gap: 9px; padding: 7px var(--e10) var(--e6); }
.fila__linha { display: grid; grid-template-columns: 56px 1fr 116px 76px; align-items: center; padding: 9px var(--e10); border-radius: var(--r-linha); width: 100%; text-align: left; }
.fila__senha { font-family: var(--mono); font-size: 14px; color: var(--azul-primario); }
.fila__espera { font-family: var(--mono); font-size: 14px; color: var(--texto-corrente); }
/* Espera longa muda de cor, nao de lugar: 30 min avisa, 40 min cobra. */
.fila__espera--atencao { color: var(--atencao-texto); }
.fila__espera--critico { color: var(--critico-texto); }
.fila--prioritario { background: var(--sup-critico); }
.fila--normal { background: var(--fila-normal); }
.fila--agendamento { background: var(--linha-foco); }

.agenda-dia__linha { display: flex; gap: var(--e12); padding: 9px var(--e10); border-radius: var(--e14); align-items: center; width: 100%; text-align: left; }
.agenda-dia__hora { font-family: var(--mono); font-size: 13px; color: var(--texto-apoio); width: 40px; flex-shrink: 0; }
.agenda-dia__marca { width: 4px; height: 32px; border-radius: 2px; flex-shrink: 0; }
.marca--ok      { background: var(--ok-cheia); }
.marca--atencao { background: var(--atencao-cheia); }
.marca--critico { background: var(--critico-cheia); }
.marca--info    { background: var(--info-cheia); }
.marca--neutro  { background: var(--neutro-cheia); }

/* --------------------------------------------------------------------------
   03 Atendimento
   -------------------------------------------------------------------------- */

.atend__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e16); flex-shrink: 0; padding: var(--e16) var(--e20); }
.atend__id { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 auto; }
.atend__id > div { min-width: 0; }

/* O NOME DO PACIENTE CORTA COM RETICENCIAS EM VEZ DE PASSAR POR BAIXO DOS
   BOTOES. Assim que o bloco de identidade ganhou permissao para encolher, um
   nome de registro civil inteiro ("Maria das Gracas Conceicao Nascimento de
   Albuquerque Filha" nao e exagero, e o padrao) atravessava a faixa e sumia
   atras do "Meu consultorio" - trocar botao cortado por nome cortado no meio,
   sem aviso, nao seria conserto nenhum. Com a reticencia o corte fica visivel,
   e o `title` no span devolve o nome inteiro ao passar o mouse, que importa
   aqui: dois homonimos so se separam pelo nome completo. */
.atend__nome-linha { min-width: 0; }
.atend__nome-linha .t-paciente { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A FAIXA DE ACOES DO CABECALHO QUEBRA EM LINHAS.
   Sao ate nove botoes aqui - "Paciente 360", "Fila de espera", "Em observacao",
   "Encaminhar na unidade", "Nova afericao", "Compartilhar", "Cancelar" (ou
   "Corrigir"), "Regular paciente" e "Finalizar" -, e quais aparecem depende do
   perfil, da unidade e de existir senha por tras. Numa linha so, o ultimo saia
   pela borda do cartao e chegava cortado ao meio: era sempre o "Finalizar", o
   botao que encerra o atendimento. Quebrar e a unica saida honesta - esconder
   com `overflow` tiraria justamente esse da vista, e diminuir a fonte so adiaria
   o corte para o proximo perfil que tenha um botao a mais.

   O `min-width: 0` acima e o outro lado da mesma conta: sem ele o bloco de
   identidade tem piso igual ao comprimento do nome do paciente, e um nome longo
   empurra a faixa inteira para fora em vez de ceder espaco. */
/* E QUEM CEDE PRIMEIRO E A FAIXA DE BOTOES, nao o nome: `flex-shrink: 30`
   contra o `1` do bloco de identidade. Sem isso a faixa reservava a largura
   dos nove botoes em linha unica mesmo ja quebrando em duas, sobrava vazio
   dentro dela e o nome ia cortado por falta de 5px - "Homem de casaco cin..."
   num cabecalho de 1830px com folga a vista. O numero e alto de proposito: a
   faixa empilha ate o seu proprio minimo antes de o nome perder uma letra. */
.atend__acoes { flex-wrap: wrap; justify-content: flex-end; gap: var(--e10); flex-shrink: 30; }
.atend__nome-linha { display: flex; align-items: center; gap: var(--e10); flex-wrap: wrap; }
.atend__doc { font-size: 13px; color: var(--texto-apoio); margin-top: 5px; font-family: var(--mono); }
.atend__consultorio { background: var(--secundario); border-radius: 18px; padding: 9px var(--e14) 9px var(--e16); display: flex; align-items: center; gap: var(--e12); }
.atend__consultorio-rotulo { font-size: 11px; font-weight: 600; color: var(--texto-apoio); text-transform: uppercase; letter-spacing: .07em; }

/* A grade deixa de forçar as colunas a caberem na altura da tela: `align-items:
   start` faz cada uma ter a altura do próprio conteúdo, e `min-height: auto`
   deixa que elas cresçam. É o que permite ao registro mostrar tudo de uma vez —
   sem isso, o `min-height: 0` de antes autorizava o filho a encolher abaixo do
   conteúdo, que é justamente o que criava a rolagem interna. */
.atend__grade { flex: 1; display: grid; grid-template-columns: 1fr 336px; gap: var(--e16); min-height: auto; align-items: start; }

/* A COLUNA DO REGISTRO GANHA PISO.
   É onde se escreve a evolução, a prescrição e o procedimento — o trabalho da
   consulta inteira. Sem piso, ela ficava com a sobra da altura depois dos
   sinais vitais e do cabeçalho, e em notebook virava uma faixa de três linhas:
   quem digita rola o tempo todo e perde de vista o que já escreveu.
   Se a janela for curta demais, o piso vence e a página rola — rolar a página é
   melhor do que escrever dentro de uma fresta. */
.atend__esquerda { display: flex; flex-direction: column; gap: var(--e16); min-height: auto; }
.atend__direita  { display: flex; flex-direction: column; gap: var(--e16); min-height: auto; }
/* O piso continua, mas agora só vale quando a aba está VAZIA — com conteúdo, o
   cartão passa dele e cresce à vontade. */
.atend__grade > .atend__esquerda { min-height: 560px; }

/* A ÚLTIMA TRAVA ERA A CLASSE `.cresce` DO CARTÃO DAS ABAS.
   Ela é `flex: 1; min-height: 0` — e o `min-height: 0` é exatamente a licença
   que um filho de flex precisa para encolher ABAIXO do próprio conteúdo. Era
   isso, somado ao overflow do bloco de dentro, que produzia a barra de rolagem
   dentro do cartão.
   Aqui o cartão passa a ter a altura do que ele contém. Não mexo em `.cresce`,
   que é de uso geral: o ajuste vale só para o cartão de registro desta tela. */
.atend__esquerda > .cartao-lista.cresce { flex: 0 0 auto; min-height: auto; }

/* OS SINAIS SÃO LEITURA DE RELANCE; O REGISTRO É ONDE SE TRABALHA.
   Cinco cartões com 16px de padding e número de 21px comiam, somados, a altura
   que faltava embaixo — e embaixo é onde se escreve a evolução, a prescrição e
   o procedimento. O cartão encolheu no padding e o número em 2px: continua
   legível a um metro da tela, que é o uso real deles. */
.sinais { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e10); flex-shrink: 0; }
.sinal { padding: var(--e10) var(--e14); border-radius: 20px; }
.sinal__rotulo { font-size: 12px; font-weight: 600; color: var(--texto-apoio); text-transform: uppercase; letter-spacing: .06em; }
.sinal__valor-linha { display: flex; align-items: baseline; gap: 5px; margin-top: var(--e6); }
.sinal__valor { font-family: var(--mono); font-size: 19px; letter-spacing: -.02em; border: 0; background: transparent; padding: 0; width: 100%; }
.sinal__valor:focus { outline: none; }

/* O REGISTRO NÃO ROLA POR DENTRO.
   Antes este bloco era `flex: 1` com `overflow-y: auto`: ele se espremia na
   altura que sobrasse e criava uma segunda barra de rolagem, dentro do cartão.
   Duas barras na mesma tela é o que faz alguém escrever a avaliação e não achar
   o plano — e pior, a evolução some de vista enquanto se digita embaixo.
   Agora o bloco cresce com o conteúdo, empurra o cartão, e quem rola é a PÁGINA
   (`.conteudo`), que é a única barra que deve existir aqui. */
.soap { padding: var(--e4) var(--e20) var(--e12); display: flex; flex-direction: column; gap: var(--e16); flex: 0 0 auto; overflow-y: visible; }
/* --texto-apoio e nao --cinza-desativado: S, O, A e P sao ROTULOS de secao do
   prontuario, conteudo e nao componente inativo. O token de desativado tem
   piso de 3:1; rotulo de secao e' texto normal e pede 4,5:1. */
.soap__rotulo { font-size: 12px; font-weight: 600; color: var(--texto-apoio); letter-spacing: .08em; text-transform: uppercase; }
.soap__letra { font-size: 13px; font-weight: 600; color: var(--azul-primario); margin-bottom: 5px; }
.soap__texto {
  font-size: 15px; line-height: 1.6; color: var(--texto-corrente);
  width: 100%; border: 0; background: transparent; padding: 0; resize: none;
  font-family: var(--fonte); min-height: 44px;
}
.soap__texto:focus { outline: none; }
.soap__texto::placeholder { color: var(--cinza-desativado); }
.soap__plano { background: var(--secundario); border-radius: 18px; padding: var(--e14) var(--e16); margin-top: auto; }

.atend__atalhos { padding: var(--e16) var(--e20) 18px; display: flex; gap: var(--e8); flex-shrink: 0; flex-wrap: wrap; }
.atalho { padding: var(--e8) 15px; background: var(--info-fundo); color: var(--info-texto); border-radius: 18px; font-size: 13px; font-weight: 600; }

.procedimentos { display: flex; gap: var(--e10); flex-wrap: wrap; }
.procedimento { flex: 1; min-width: 200px; background: var(--secundario); border-radius: 18px; padding: var(--e12) var(--e16); display: flex; align-items: center; justify-content: space-between; gap: var(--e12); }

.historico__item { padding: 11px var(--e14); border-radius: 18px; background: var(--linha-lista); }
.anexos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.anexo {
  aspect-ratio: 1; background: var(--info-fundo); border-radius: var(--r-linha-p);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--info-texto); text-align: center; padding: var(--e6);
}
.anexo--add { background: var(--secundario); color: var(--azul-primario); font-size: 22px; }

/* --------------------------------------------------------------------------
   04a Visao geral
   -------------------------------------------------------------------------- */

.admin__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e16); flex-shrink: 0; }
.kpi-admin__valor-linha { display: flex; align-items: baseline; gap: var(--e8); margin-top: var(--e8); }
.kpi-admin__rodape { display: flex; align-items: center; gap: var(--e8); margin-top: var(--e12); }

.visao__grade { flex: 1; display: grid; grid-template-columns: 1fr 380px; gap: var(--e16); min-height: 0; }
.visao__esquerda { display: flex; flex-direction: column; gap: var(--e16); min-height: 0; }
.visao__direita { display: flex; flex-direction: column; gap: var(--e16); min-height: 0; }
.visao__duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e16); flex-shrink: 0; }
.grafico { flex: 1; min-height: 0; margin-top: var(--e14); position: relative; }
.grafico__eixo { display: flex; justify-content: space-between; margin-top: var(--e10); }
.grafico__eixo span { font-family: var(--mono); font-size: 12px; color: var(--texto-apoio); }

/* --------------------------------------------------------------------------
   04b Usuarios
   -------------------------------------------------------------------------- */

.usuarios__grade { flex: 1; display: grid; grid-template-columns: 1fr 400px; gap: var(--e16); min-height: 0; }
.usuarios__colunas { grid-template-columns: 1fr 148px 136px 108px; }

/* --------------------------------------------------------------------------
   04c Agendamentos
   -------------------------------------------------------------------------- */

.agendamentos__colunas { grid-template-columns: 118px 1fr 168px 168px 128px 132px; }

/* --------------------------------------------------------------------------
   04d Auditoria
   -------------------------------------------------------------------------- */

.auditoria__grade { flex: 1; display: grid; grid-template-columns: 1fr 372px; gap: var(--e16); min-height: 0; }
.auditoria__colunas { grid-template-columns: 142px 1fr 176px 96px; }
.alerta { display: flex; gap: var(--e12); padding: 13px var(--e14); border-radius: 18px; }
.alerta__ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
/* Superficie do alerta pelo estado — a mesma chave que pinta o ponto */
.alerta--ok      { background: var(--sup-ok); }
.alerta--atencao { background: var(--sup-atencao); }
.alerta--critico { background: var(--sup-critico); }
.alerta--info    { background: var(--linha-lista); }
.alerta--neutro  { background: var(--linha-lista); }

/* --------------------------------------------------------------------------
   04e Departamentos
   -------------------------------------------------------------------------- */

.deptos__grade { flex: 1; display: grid; grid-template-columns: 1fr 420px; gap: var(--e16); min-height: 0; }
.deptos__colunas { grid-template-columns: 1fr 132px 116px 128px 104px; }
.form-lateral { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.form-lateral__campos { display: flex; flex-direction: column; gap: var(--e12); margin-top: var(--e16); flex: 1; min-height: 0; overflow-y: auto; }
.form-lateral__pe { display: flex; gap: var(--e10); margin-top: auto; padding-top: 18px; flex-shrink: 0; }
.bloco-chips { background: var(--linha-lista); border: 1px solid var(--contorno); border-radius: var(--r-bloco); padding: var(--e14) var(--e16); }
.bloco-chips__lista { display: flex; flex-wrap: wrap; gap: var(--e6); margin-top: 9px; }
.bloco-troca { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); background: var(--linha-lista); border: 1px solid var(--contorno); border-radius: var(--r-bloco); padding: var(--e14) var(--e16); }

/* --------------------------------------------------------------------------
   04f / 04g Agenda
   -------------------------------------------------------------------------- */

.agenda__grade { flex: 1; display: grid; grid-template-columns: 1fr 420px; gap: var(--e16); min-height: 0; }
.agenda__colunas { grid-template-columns: 1fr 152px 128px 116px 124px; }
/* Modo Oferta: duas listas empilhadas na coluna larga (a remarcar em cima,
   porque e' a unica das tres com prazo), e os impedimentos na lateral.
   `minmax(0, 1fr)` e nao `1fr`: sem o minimo zero, a lista rolavel de dentro
   estica a linha da grade e as duas rolagens somem. */
.oferta__coluna { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e16); min-height: 0; }
.dias-semana { display: flex; gap: 5px; margin-top: var(--e10); }
.dia-semana { flex: 1; height: 36px; border-radius: var(--r-tile); background: var(--trilha); color: var(--texto-apoio); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.dia-semana[aria-pressed="true"] { background: var(--azul-primario); color: var(--sobre-acento); }
.dia-semana[disabled] { color: var(--cinza-tracejado); }

.calendario__grade { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: var(--e8); padding: 0 var(--e20) var(--e20); min-height: 0; }
.calendario__cabeca { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e8); padding: 0 var(--e20) var(--e8); }
.calendario__cabeca span { font-size: 12px; font-weight: 600; color: var(--texto-apoio); letter-spacing: .07em; text-transform: uppercase; text-align: center; }
.dia {
  border-radius: 18px; background: var(--cartao); border: 1px solid var(--contorno);
  padding: 9px 11px; display: flex; flex-direction: column; overflow: hidden;
  text-align: left; width: 100%;
}
.dia--vazio { background: var(--dia-vazio); border-color: var(--fundo-tela); }
.dia--selecionado { background: var(--linha-foco); border-color: var(--azul-primario); }
.dia__num { font-family: var(--mono); font-size: 14px; color: var(--texto); }
.dia--vazio .dia__num { color: var(--cinza-tracejado); }
.dia__rodape { margin-top: auto; }
.dia__rotulo { font-size: 12px; color: var(--texto-apoio); white-space: nowrap; }

.agenda__resumo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--e10); margin-top: var(--e16); }
.resumo-caixa { background: var(--linha-lista); border-radius: var(--r-linha-p); padding: var(--e12) 13px; }
.resumo-caixa__valor { font-family: var(--mono); font-size: 20px; }

.bloco-dia { display: flex; gap: var(--e12); padding: var(--e12); border-radius: 18px; background: var(--linha-lista); align-items: center; width: 100%; text-align: left; }
.bloco-dia__marca { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   05 Painel de tarefas
   -------------------------------------------------------------------------- */

.tarefas__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e14); flex-shrink: 0; }
.kpi-tarefa { padding: var(--e16) 18px; border-radius: var(--r-cartao); display: flex; align-items: center; justify-content: space-between; gap: var(--e14); }
.tarefas__filtros { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 0 var(--e6); gap: var(--e16); }
.tarefas__filtros-lista { display: flex; gap: var(--e6); overflow-x: auto; scrollbar-width: none; }
/* O seletor ocupa lugar fixo: a lista completa de departamentos nao cabe numa
   fila de chips, e a barra nao pode crescer com o numero de setores. */
.tarefas__filtro-depto { flex-shrink: 0; min-width: 232px; }
.tarefas__filtros-lista::-webkit-scrollbar { display: none; }

/* A HISTÓRIA DO CHAMADO.
   Uma coluna com um fio à esquerda, e não uma lista de cartões: o que se lê aqui
   é ORDEM, e a ordem some quando cada item vira uma caixa com a mesma força
   visual da seguinte. O fio é 2px de divisor — ele orienta e não disputa. */
.historia { display: flex; flex-direction: column; gap: var(--e14); padding-left: var(--e20); position: relative; }
.historia::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--divisor-claro); border-radius: 1px;
}
.historia__item { position: relative; }
.historia__ponto {
  position: absolute; left: -19px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cinza-tracejado);
  box-shadow: 0 0 0 3px var(--cartao);
}
.historia__ponto--info    { background: var(--info-cheia); }
.historia__ponto--ok      { background: var(--ok-cheia); }
.historia__ponto--atencao { background: var(--atencao-cheia); }
.historia__ponto--critico { background: var(--critico-cheia); }
.historia__topo { display: flex; align-items: baseline; gap: var(--e8); flex-wrap: wrap; }
.historia__texto {
  margin-top: var(--e6); padding: var(--e10) var(--e14);
  background: var(--linha-lista); border-radius: var(--r-linha-p);
  font-size: 13px; color: var(--texto-corrente); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.historia__anexo {
  display: inline-flex; align-items: center; gap: var(--e8); margin-top: var(--e6);
  padding: var(--e8) var(--e12); background: var(--info-fundo); color: var(--info-texto);
  border-radius: var(--r-linha-p); font-size: 12px; font-weight: 600;
}

/* A CAIXA QUE SE ABRE DENTRO DO MODAL — porque modal dentro de modal é proibido
   (Guia §9) e porque a pergunta "o que foi feito?" pertence ao chamado que está
   aberto na tela, não a uma janela nova por cima dele. */
.dobra {
  margin-top: var(--e12); padding: var(--e14);
  background: var(--sup-andamento); border: 1px solid var(--borda-andamento);
  border-radius: var(--r-bloco);
}

/* As marcas do cartão: anexo, conversa, prazo adiado, sem resposta. Miúdas de
   propósito — a coluna do quadro é lida de longe, e três palavras a mais em
   cada cartão apagam a leitura da coluna inteira. */
.tarefa__marcas { display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap; }
.marca-mini {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--texto-apoio);
  font-family: var(--mono);
}
.marca-mini--atencao { color: var(--atencao-texto); }
.marca-mini--info    { color: var(--info-texto); }

/* ---------------------------------------------------------------------------
   Tela 04g · Perfis e permissões
   Sem token novo: a árvore recua pela escala de espaço e o estado travado
   reusa a opacidade que o guia já aplica em controle inativo.
   ------------------------------------------------------------------------- */
.grade-perfis {
  flex: 1; min-height: 0; display: grid; gap: var(--e12);
  grid-template-columns: minmax(280px, 340px) 1fr;
}

.perfil__linha {
  display: flex; align-items: center; gap: var(--e10);
  padding: var(--e10) var(--e12);
  border: 1px solid transparent; border-radius: var(--r-bloco);
  background: transparent; width: 100%; text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.perfil__linha:hover { background: var(--linha-lista); }
.perfil__linha--ativa { background: var(--linha-foco); border-color: var(--contorno); }

/* Herdada: ligada, e não é aqui que se desliga. */
.bloco-troca--travado { opacity: .72; }
.bloco-troca--travado .interruptor { cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Tela 03b · Balcão
   Duas colunas: a fila à esquerda, quem está no guiche à direita.

   A DA DIREITA ERA ESTREITA DE PROPOSITO, e o argumento escrito aqui era: "nao
   ha o que preencher ali alem do desfecho, e uma coluna larga e vazia sugere um
   formulario faltando". O argumento nao se sustentou no uso. Ali se escolhe o
   desfecho E se escreve o que foi feito — e e' esse texto que vira o registro do
   atendimento. Com 380px fixos, o desfecho quebrava em tres linhas de botoes e
   o campo de texto ficava do tamanho de um campo de busca, ao lado de uma fila
   quase sempre vazia ocupando o resto da tela.

   Agora ela ACOMPANHA A TELA em vez de ser um numero fixo: 30% da largura,
   entre 340 e 560px. Num notebook da' ~460px, num monitor grande ~560 — e a
   fila, que e' uma lista curta, continua com folga de sobra. O piso de 340
   segura o formulario legivel na tela estreita; o teto de 560 evita a coluna
   larga e vazia que o argumento antigo temia, que era um medo correto.
   ------------------------------------------------------------------------- */
.grade-balcao {
  flex: 1; min-height: 0; display: grid; gap: var(--e12);
  grid-template-columns: minmax(0, 1fr) clamp(340px, 30%, 560px);
}

/* Cinco indicadores (126): a espera mais antiga e o que VOCE concluiu hoje vieram
   do guiche do portal. Ainda sem "agendados hoje": o balcao nao tem agenda propria. */
.balcao__kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e12); flex-shrink: 0; }
/* A proxima da vez fica ENTRE os numeros e a fila: e a frase que responde "quem eu chamo". */
.balcao__proxima { flex-shrink: 0; align-items: flex-start; }
/* Filas visiveis: os setores ligaveis logo abaixo do cabecalho da fila. */
.balcao__setores { display: flex; align-items: center; gap: var(--e8); flex-wrap: wrap; padding: 0 var(--e14) var(--e8); }
.balcao__setores:empty { display: none; }
/* A faixa de cor por tipo de fila vale aqui tambem — e o mesmo canal. */
.balcao__linha { gap: var(--e10); }

/* ---------------------------------------------------------------------------
   Tela 03c · Triagem
   ------------------------------------------------------------------------- */
/* A coluna da direita e MAIS LARGA que a da esquerda de proposito: a esquerda e
   uma lista curta (senha, nome, espera, botao) e a direita e um formulario de
   quinze campos. Largura extra ali nao e folga — e o que faz caber quatro sinais
   por linha em vez de tres, encurtando a rolagem no meio do atendimento. */
.grade-triagem {
  flex: 1; min-height: 0; display: grid; gap: var(--e12);
  grid-template-columns: minmax(360px, 1fr) minmax(520px, 620px);
}
.grade-sinais { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: var(--e8); }

/* A coluna da esquerda carrega DUAS listas: quem espera triagem e quem ja foi
   classificado e espera o medico. A segunda existe porque a reavaliacao precisa
   de porta de entrada — classificar move a senha para a fila do medico, e sem
   esta lista a pessoa sumia da unica tela que sabe reavaliar.
   As duas dividem a altura em partes iguais: a de baixo nao e um rodape da de
   cima, e encolhe-la ensinaria que ela e menos importante. */
/* A BUSCA ENTRA COMO PRIMEIRA LINHA, em `auto`: ela vale para as duas listas —
   quem procura alguem raramente sabe se a pessoa ja foi classificada, e e por
   nao achar que se procura. Uma caixa por cartao obrigaria a digitar o nome
   duas vezes so para descobrir isso. `auto` e nao `1fr` porque a caixa tem a
   altura que tem: dar a ela um terco da coluna roubaria as linhas das listas,
   que sao o que a tela existe para mostrar. */
.coluna-triagem {
  min-height: 0; display: grid; gap: var(--e12);
  grid-template-rows: auto 1fr 1fr;
}
/* A faixa de cor do risco na lista. Mais estreita e mais baixa que a do botao
   de classificacao — ali ela e o alvo do clique, aqui e so a repeticao visual
   de um rotulo que esta escrito ao lado. */
.pos-triagem__cor { display: inline-flex; flex-shrink: 0; }
.pos-triagem__cor .risco__cor { width: 8px; height: 22px; }
.campo--sinal .campo__valor { width: 100%; }

/* As cinco cores. Cada botao carrega a cor E o rotulo: cor sozinha nao informa
   quem nao distingue vermelho de laranja — e sao justamente as duas que mais
   importam aqui. */
.grade-risco { display: flex; flex-direction: column; gap: var(--e6); }
.risco {
  display: flex; align-items: center; gap: var(--e12);
  padding: var(--e10) var(--e12); width: 100%; cursor: pointer;
  background: var(--linha-lista); border: 1px solid var(--contorno);
  border-radius: var(--r-bloco); transition: background .12s ease, border-color .12s ease;
}
.risco:hover { background: var(--trilha); }
.risco__cor { width: 14px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.risco[aria-pressed="true"] { border-color: var(--azul-primario); box-shadow: var(--anel-foco); }

/* As cores do protocolo sao as unicas do sistema que nao saem da paleta de
   estado: vermelho, laranja, amarelo, verde e azul sao o proprio vocabulario
   clinico, e trocar "laranja" por um token de atencao apagaria a informacao. */
.risco--vermelho .risco__cor { background: var(--critico-cheia); }
.risco--laranja  .risco__cor { background: var(--icone-tarefas); }
.risco--amarelo  .risco__cor { background: var(--atencao-cheia); }
.risco--verde    .risco__cor { background: var(--ok-cheia); }
.risco--azul     .risco__cor { background: var(--azul-primario); }

/* O bloco de triagem no prontuario: a faixa de cor a esquerda repete a
   classificacao sem depender de ler o rotulo, e o rotulo esta la para quem
   nao distingue a cor. */
.triagem-recebida { padding: var(--e12) var(--e16); border-left: 4px solid var(--contorno); }
.triagem-recebida--vermelho { border-left-color: var(--critico-cheia); }
.triagem-recebida--laranja  { border-left-color: var(--icone-tarefas); }
.triagem-recebida--amarelo  { border-left-color: var(--atencao-cheia); }
.triagem-recebida--verde    { border-left-color: var(--ok-cheia); }
.triagem-recebida--azul     { border-left-color: var(--azul-primario); }
.triagem-recebida .risco__cor { width: 8px; }
.triagem-recebida--vermelho .risco__cor { background: var(--critico-cheia); }
.triagem-recebida--laranja  .risco__cor { background: var(--icone-tarefas); }
.triagem-recebida--amarelo  .risco__cor { background: var(--atencao-cheia); }
.triagem-recebida--verde    .risco__cor { background: var(--ok-cheia); }
.triagem-recebida--azul     .risco__cor { background: var(--azul-primario); }

/* Tela 05 · Encaminhamentos */
.enc__linha { gap: var(--e10); }
/* Encerrado continua na lista, mas recuado: a fila e o que esta em aberto. */
.enc__linha--encerrado { opacity: .6; }

/* A sugestao de classificacao. A faixa a esquerda repete a cor sugerida; o
   rotulo esta escrito, porque quem nao distingue laranja de vermelho precisa
   da mesma informacao — e sao justamente as duas que mais importam. */
.sugestao {
  padding: var(--e10) var(--e12); border-radius: var(--r-bloco);
  border: 1px solid var(--contorno); border-left-width: 4px;
  background: var(--linha-lista); margin-bottom: var(--e8);
}
.sugestao--neutra   { border-left-color: var(--contorno); }
.sugestao--vermelho { border-left-color: var(--critico-cheia); }
.sugestao--laranja  { border-left-color: var(--icone-tarefas); }
.sugestao--amarelo  { border-left-color: var(--atencao-cheia); }
.sugestao--verde    { border-left-color: var(--ok-cheia); }
.sugestao--vermelho .risco__cor { background: var(--critico-cheia); width: 8px; }
.sugestao--laranja  .risco__cor { background: var(--icone-tarefas);  width: 8px; }
.sugestao--amarelo  .risco__cor { background: var(--atencao-cheia);  width: 8px; }
.sugestao--verde    .risco__cor { background: var(--ok-cheia);       width: 8px; }

/* ---------------------------------------------------------------------------
   Camada de atencao — a faixa que todo painel recebe do casco.
   Sem cor propria: a gravidade reusa os trios de estado do guia. A faixa a
   esquerda repete a gravidade, e o titulo esta escrito — cor sozinha nao
   informa quem nao distingue vermelho de amarelo.
   ------------------------------------------------------------------------- */
.atencao { display: flex; flex-direction: column; gap: var(--e6); flex-shrink: 0; }
.atencao__item {
  display: flex; align-items: center; gap: var(--e12);
  padding: var(--e10) var(--e16);
  border: 1px solid var(--contorno); border-left-width: 4px;
  border-radius: var(--r-bloco);
}
.atencao__item--critico { background: var(--critico-fundo); border-left-color: var(--critico-cheia); }
.atencao__item--atencao { background: var(--atencao-fundo); border-left-color: var(--atencao-cheia); }
.atencao__item--info    { background: var(--info-fundo);    border-left-color: var(--azul-primario); }
/* A acao fica a direita, alinhada entre os itens: quem varre a faixa le os
   titulos numa coluna e as acoes na outra, em vez de cacar dentro do texto. */
.atencao__acao { font-weight: 600; opacity: .85; }

/* ---------------------------------------------------------------------------
   Tela 07 · Mural
   A faixa a esquerda repete o nivel; o rotulo esta escrito no chip, porque cor
   sozinha nao informa quem nao distingue vermelho de amarelo.
   ------------------------------------------------------------------------- */
/* `.mural__item`, e NAO `.aviso`: `.aviso` ja e o toast do `ui.aviso()` —
   posicao fixa, fundo escuro, empilhado no rodape. Os cartoes do mural
   herdaram tudo isso e apareceram um sobre o outro no pe da tela. Nome de
   classe e espaco compartilhado; reusar um que ja existe nao da erro, da
   layout errado. */
/* ── O MURAL E' UM MURAL, e nao uma lista de linhas ─────────────────────────

   O desenho anterior era uma tira: texto a esquerda, uma miniatura de 200x130
   encostada na direita de um cartao de 1200px. Num quadro de avisos isso
   inverte a hierarquia — o cartaz E' o aviso, feito para ser lido de longe, e
   ele aparecia do tamanho de um icone.

   Agora sao CARTOES: capa em cima, chips, titulo, texto, rodape. Grid de
   colunas que se acomodam sozinhas (`auto-fill`), sem media query, porque
   quem decide aqui e' a largura disponivel e nao a da janela.

   `align-items: start` e' necessario: sem ele o grid estica todo cartao ate a
   altura do mais alto da linha, e um aviso de duas linhas ganha meio metro de
   branco embaixo. */
.mural__lista {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--e16);
}

.mural__item {
  padding: 0; overflow: hidden;
  border-left: 4px solid var(--contorno);
  display: flex; flex-direction: column;
}
.mural__item--info       { border-left-color: var(--azul-primario); }
.mural__item--importante { border-left-color: var(--atencao-cheia); }
.mural__item--urgente    { border-left-color: var(--critico-cheia); }
/* Nao confirmado ganha o fundo do estado, e nao so a borda: e o unico item do
   mural que exige uma acao, e precisa se distinguir de quem so passou o olho. */
.mural__item--pendente.mural__item--urgente    { background: var(--critico-fundo); }
.mural__item--pendente.mural__item--importante { background: var(--atencao-fundo); }

/* ── O DESTAQUE ────────────────────────────────────────────────────────────
   Fixado, ou pendente de "Li e entendi", ocupa a linha inteira e vira lado a
   lado: capa a esquerda, texto a direita. Sao os dois avisos que a unidade
   quer que ninguem passe batido — num grid de cartoes iguais eles se
   perderiam, que e' o oposto do que fixar significa.

   A regra so vale onde ha' duas colunas para ocupar: `@media` pela largura do
   CONTEUDO nao existe em CSS, entao uso a da janela, que e' a aproximacao
   honesta — abaixo de 900px o grid ja' e' de uma coluna e o lado a lado nao
   teria espaco de qualquer forma. */
@media (min-width: 900px) {
  .mural__item--destaque { grid-column: 1 / -1; flex-direction: row; }
  .mural__item--destaque .mural__capa { width: 42%; max-width: 520px; aspect-ratio: auto; }
  .mural__item--destaque .mural__texto { flex: 1; min-width: 0; }
}

/* A CAPA. `aspect-ratio` + `object-fit: cover` porque cartaz chega em
   proporcao qualquer: sem isso um banner deitado e um cartaz em pe' dariam
   cartoes de alturas completamente diferentes na mesma linha. */
.mural__capa {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; margin: 0;
  background: var(--linha-lista); cursor: pointer; overflow: hidden;
}
.mural__capa img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.mural__capa:hover img { transform: scale(1.03); }

.mural__texto { padding: var(--e16) var(--e20) var(--e14); }
.mural__titulo {
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--texto); margin: 0;
}
/* `pre-wrap` mantem os paragrafos que quem escreveu digitou — o aviso e' texto
   redigido, nao um campo. */
.mural__corpo {
  margin: var(--e8) 0 0; white-space: pre-wrap;
  color: var(--texto-corrente); line-height: 1.55;
}
.mural__pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e12); flex-wrap: wrap; margin-top: var(--e16);
  padding-top: var(--e12); border-top: 1px solid var(--contorno);
}

/* As imagens ALEM da capa: tira pequena embaixo do texto. */
.mural__figuras {
  display: flex; gap: var(--e8); flex-wrap: wrap; margin-top: var(--e12);
}
.mural__foto {
  width: 96px; height: 68px; padding: 0; border: 1px solid var(--contorno);
  border-radius: var(--r-bloco); overflow: hidden; cursor: pointer;
  background: var(--linha-lista); flex-shrink: 0;
  transition: border-color .12s ease;
}
.mural__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mural__foto:hover { border-color: var(--azul-primario); }

/* ---------------------------------------------------------------------------
   Tela 12 - Farmacia
   --------------------------------------------------------------------------- */

/* O saldo e a unica coluna da fila que muda de cor, e muda por DECISAO: zero
   desabilita o botao, pouco nao desabilita nada. Duas cores, dois significados
   diferentes — mais do que isso e semaforo decorativo. */
.farmacia__saldo        { width: 88px; text-align: right; color: var(--texto-apoio); }
.farmacia__saldo--baixo { color: var(--atencao-texto); }
.farmacia__saldo--zero  { color: var(--critico-texto); }

/* Entrada e saida na mesma lista: o sinal ja diz, a cor confirma de longe. */
.farmacia__delta        { color: var(--ok-texto); }
.farmacia__delta--saida { color: var(--critico-texto); }

/* Lote vencido continua na lista — some-lo esconderia estoque que ainda esta
   fisicamente na prateleira e precisa de baixa por perda. Fica marcado. */
.farmacia__vencido { background: var(--critico-fundo); }
.farmacia__vencido:hover { background: var(--critico-fundo); }

/* ---------------------------------------------------------------------------
   Telas 13 e 14 - Regulacao: fila de espera e retornos
   --------------------------------------------------------------------------- */

/* Agregado a esquerda, lista nominal a direita. A coluna da esquerda tem
   largura FIXA: ela e uma legenda, nao um conteudo que disputa espaco — e com
   as duas flexiveis a lista nominal encolhia ate o nome do paciente cortar. */
.regulacao__corpo {
  display: flex; gap: var(--e16); flex: 1; min-height: 0; align-items: stretch;
}
.regulacao__especialidades { width: 300px; flex-shrink: 0; }

/* Em tela estreita a legenda desce e as duas ocupam a largura inteira. */
@media (max-width: 1100px) {
  .regulacao__corpo { flex-wrap: wrap; }
  .regulacao__especialidades { width: 100%; max-height: 220px; }
}

/* Assumido ha horas sem desfecho: continua na lista, marcado. Some-lo faria o
   pedido desaparecer da fila de todo mundo, que e o dano que ele causa. */
.regulacao__esquecido { background: var(--atencao-fundo); }
.regulacao__esquecido:hover { background: var(--atencao-fundo); }

/* ---------------------------------------------------------------------------
   Telas 18 e 19 - Leitos e observacao (UPA)
   --------------------------------------------------------------------------- */

/* O MAPA e uma grade de cartoes do tamanho de um leito. `auto-fill` com minimo
   de 150px: em tela larga cabem seis por linha, em tela estreita duas, sem
   media query — o que decide e o espaco do cartao, nao a largura da janela. */
.leitos__grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e8);
}
/* O MAPA É O PAINEL; A OCUPAÇÃO POR SETOR É APOIO.
   A série tem 132px de grade por padrão, e aqui ela fica ACIMA do mapa — somada
   aos KPIs, empurrava o mapa para uma faixa em que cabiam duas linhas de leito.
   Quem abre esta tela abre para procurar leito, e mapa que precisa de rolagem
   para ser lido de ponta a ponta é mapa que não se lê de longe.
   A série encolhe aqui e só aqui: são poucas colunas (um setor cada), então a
   barra continua legível com metade da altura. */
.leitos__setores .serie__grade  { height: 78px; }
.leitos__setores .serie__trilho { height: 42px; }

/* E o mapa ganha piso: abaixo disso não cabem nem duas linhas de leito, e a
   tela deixa de responder à pergunta que ela existe para responder. Se a janela
   for curta demais para isso, o piso vence e a página rola — rolar a página
   inteira é melhor do que espremer o mapa dentro de um cartão.

   O seletor é a CLASSE, não o id: `#mapa` também é o mapa de unidades do painel
   da Rede, e um piso de 340px lá dentro deformaria aquela tela. Id igual em duas
   telas diferentes é armadilha de CSS global — a classe é o que separa. */
.leitos__mapa { min-height: 820px; }

.leitos__limpeza { width: 320px; flex-shrink: 0; }
/* O item da fila de limpeza empilha: texto em cima, acoes embaixo. */
.leitos__limpeza-item { display: block; }
.leitos__limpeza-item .entre { margin-top: var(--e8); }
@media (max-width: 1100px) { .leitos__limpeza { width: 100%; max-height: 240px; } }

.leito {
  text-align: left; padding: var(--e10) var(--e12); border-radius: var(--r-bloco);
  border: 1px solid var(--contorno); background: var(--linha-lista);
  display: flex; flex-direction: column; gap: 2px; min-height: 92px;
  transition: border-color .12s ease;
}
.leito:hover { border-color: var(--azul-primario); }
.leito__numero { font-size: 20px; font-weight: 600; color: var(--texto); letter-spacing: -.02em; }
.leito__sexo {
  font-size: 11px; font-weight: 600; color: var(--texto-apoio);
  border: 1px solid var(--contorno); border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.leito__estado   { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
                   color: var(--texto-apoio); }
.leito__paciente { font-size: 13px; font-weight: 600; color: var(--texto); margin-top: 2px; }
.leito__apoio    { font-size: 12px; color: var(--texto-apoio); }

/* A cor E o estado. Sete estados, sete fundos — e nenhum decorativo: quem olha
   o mapa de longe precisa achar o verde sem ler.

   `reservado` (083) é amarelo TRACEJADO: o leito ainda não tem ninguém dentro
   (por isso não é o azul do ocupado) mas também não está disponível (por isso
   não é o verde do livre). O tracejado diz, de longe, que é um estado de
   espera — a mesma leitura que a limpeza em andamento tem. */
.leito--livre        { background: var(--ok-fundo); }
.leito--reservado    { background: var(--atencao-fundo); border-style: dashed; }
.leito--ocupado      { background: var(--info-fundo); }
.leito--sujo         { background: var(--atencao-fundo); }
.leito--higienizacao { background: var(--atencao-fundo); border-style: dashed; }
.leito--bloqueado    { background: var(--critico-fundo); }
.leito--manutencao   { background: var(--neutro-fundo); }

/* O RELOGIO da reavaliacao: o numero que decide a proxima acao. */
.observacao__relogio { width: 86px; text-align: right; font-size: 14px; font-weight: 600;
                       color: var(--texto-apoio); }
.observacao__relogio--vencido { color: var(--critico-texto); }
.observacao__vencida { background: var(--critico-fundo); }
.observacao__vencida:hover { background: var(--critico-fundo); }

/* ---------------------------------------------------------------------------
   Tela 17 - Monitoria
   --------------------------------------------------------------------------- */

/* A nota e o numero que se procura na lista: mesma largura em todas as linhas,
   monoespacada, para a coluna ficar alinhada e comparavel de relance. */
.monitoria__nota { width: 56px; text-align: right; }
.monitoria__nota--baixa { color: var(--critico-texto); }
.monitoria__nota-grande { font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  color: var(--texto); margin-top: 2px; }

/* Avaliacao com falha de seguranca do paciente fica marcada — a nota sozinha
   nao distingue "83 por varios detalhes" de "83 com uma falha critica". */
.monitoria__critica { background: var(--critico-fundo); }
.monitoria__critica:hover { background: var(--critico-fundo); }

/* Um marcador de tres estados, para ler o instrumento inteiro de relance. */
.monitoria__marca { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.monitoria__marca--conforme      { background: var(--ok-cheia); }
.monitoria__marca--nao_conforme  { background: var(--critico-cheia); }
.monitoria__marca--nao_se_aplica { background: var(--cinza-desativado); }

/* A linha do formulario de aplicacao: texto a esquerda, os tres botoes a
   direita, e o porque embaixo quando aparece. */
/* OS ITENS EM DUAS COLUNAS.
   Catorze itens empilhados sao catorze linhas de rolagem num formulario em que
   a pessoa precisa acompanhar o efeito de cada marcacao no placar do rodape —
   e o que esta fora da tela nao se acompanha. Em duas colunas sao sete.
   A borda separa POR LINHA da grade, e nao por item: com a borda no item, as
   duas colunas terminam em alturas diferentes e o tracejado fica torto. */
.monitoria__itens {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--e20);
  /* `stretch` + `height: 100%` na linha: sem os dois, a celula com a orientacao
     de tres linhas e a de duas terminam em alturas diferentes, e o tracejado
     que separa os itens fica em degrau. */
  align-items: stretch;
}
@media (max-width: 900px) { .monitoria__itens { grid-template-columns: 1fr; } }

.monitoria__linha {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--e10);
  align-items: start; align-content: start; height: 100%;
  padding: var(--e10) 0;
  border-bottom: 1px solid var(--contorno);
}
.monitoria__item { min-width: 0; }
.monitoria__porque {
  grid-column: 1 / -1; background: var(--linha-lista); border: 1px solid var(--contorno);
  border-radius: var(--r-bloco); padding: 10px var(--e14); font-size: 14px;
}

/* O SELO DO SALVAMENTO AUTOMATICO.
   Substitui o botao "Salvar rascunho" — e o que ele diz e a unica coisa que a
   pessoa precisa saber depois que o botao sai: quando foi a ultima gravacao.
   Discreto de proposito: se chamasse atencao, viraria o botao de novo. */
.atend__selo, .monitoria__selo, .triagem__selo {
  font-size: 12px; color: var(--cinza-desativado); white-space: nowrap;
  align-self: center;
}
.atend__selo--ok, .monitoria__selo--ok, .triagem__selo--ok { color: var(--ok-texto); }
.atend__selo--erro, .monitoria__selo--erro, .triagem__selo--erro { color: var(--critico-texto); }
.monitoria__selo--espera { color: var(--texto-apoio); }

/* A nota parcial no rodape do formulario: quem aplica ve o efeito de cada
   marcacao na hora, em vez de descobrir depois de salvar. */
.monitoria__placar {
  margin-right: auto; font-size: 14px; color: var(--texto-apoio);
  background: var(--linha-lista); border-radius: var(--r-linha-p); padding: 8px var(--e14);
}
.monitoria__placar strong { font-size: 18px; color: var(--texto); }
.monitoria__placar--baixa strong { color: var(--critico-texto); }

/* ---------------------------------------------------------------------------
   Tela 16 - Contas
   --------------------------------------------------------------------------- */

/* O numero da conta e a chave que se procura numa planilha do faturamento:
   coluna propria, largura fixa, monoespacado. */
.contas__numero { width: 96px; }

/* As criticas sao uma lista DENTRO do alerta — cada uma aponta um item, e
   juntar todas num paragrafo faria a pessoa reler para achar quantas sao. */
.contas__criticas { margin: var(--e6) 0 0; padding-left: var(--e16); }
.contas__criticas li { font-size: 13px; color: var(--texto-corrente); line-height: 1.55; }
.contas__criticas li + li { margin-top: 3px; }

/* Item com critica bloqueante fica marcado na lista: a mensagem diz qual e, e
   a marca diz ONDE — sem ela, "item 0301100039" vira uma busca visual. */
.contas__item-ruim { background: var(--critico-fundo); }
.contas__item-ruim:hover { background: var(--critico-fundo); }

/* A data e a hora da viagem viram uma coluna propria: numa agenda, a data e o
   que se procura primeiro, e enfiada no meio do texto ela desaparece. */
.transporte__data { width: 58px; flex-shrink: 0; text-align: center; }
.transporte__dia  { font-size: 17px; font-weight: 600; color: var(--texto); letter-spacing: -.02em; }

.transporte__ocupacao { width: 56px; text-align: right; color: var(--texto-apoio); }
.transporte__ocupacao--cheia { color: var(--critico-texto); }

/* Viagem lotada continua na lista, marcada: some-la esconderia a viagem que
   mais precisa de decisao — trocar o veiculo ou abrir outra. */
.transporte__lotada { background: var(--atencao-fundo); }
.transporte__lotada:hover { background: var(--atencao-fundo); }

/* Retorno que passou da data prevista. */
.regulacao__vencido { background: var(--critico-fundo); }
.regulacao__vencido:hover { background: var(--critico-fundo); }

/* ── Ouvidoria ──────────────────────────────────────────────────────────────
   O prazo e de lei, e por isso ganha coluna propria em vez de virar mais um
   pedaco da linha de apoio: o numero de dias e a unica coisa desta tela que se
   le de longe, e enfia-lo no meio do texto e o mesmo que nao mostra-lo. */
.ouvidoria__prazo {
  width: 104px; flex-shrink: 0; text-align: right; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--texto-apoio);
  font-variant-numeric: tabular-nums;
}
.ouvidoria__prazo--vencido { color: var(--critico-texto); }

/* Manifestacao fora do prazo legal fica marcada na lista — some-la do filtro
   "em aberto" esconderia exatamente a que precisa de decisao hoje. */
.ouvidoria__vencida { background: var(--critico-fundo); }
.ouvidoria__vencida:hover { background: var(--critico-fundo); }

/* -- Executante -----------------------------------------------------------
   O CAMPO DO CODIGO e o elemento principal da tela, e por isso tem cartao
   proprio e altura de titulo. Quem trabalha aqui passa o dia digitando um
   codigo que veio num papel: enfia-lo num campo de busca de 36px ao lado das
   abas seria desenhar para quem olha a tela de longe, nao para quem usa. */
.exec__codigo { padding: var(--e16) var(--e20); flex-shrink: 0; }
.exec__codigo-linha { display: flex; align-items: center; gap: var(--e12); margin-top: var(--e6); }

.exec__codigo-campo {
  flex: 1; min-width: 0;
  border: 1px solid var(--contorno);
  border-radius: var(--r-bloco);
  background: var(--linha-lista);
  padding: 12px var(--e16);
  font-size: 22px; letter-spacing: .06em; color: var(--texto);
}
.exec__codigo-campo::placeholder { color: var(--cinza-desativado); letter-spacing: .06em; }
.exec__codigo-campo:focus {
  outline: none;
  background: var(--cartao);
  border: 2px solid var(--azul-primario);
  padding: 11px 15px;             /* compensa o 2px do contorno */
  box-shadow: var(--anel-foco);
}

/* A hora e a primeira coluna: a fila do dia se le por horario, e o horario
   dentro da linha de apoio faz procurar as 14h virar leitura de paragrafo. */
.exec__hora { width: 54px; flex-shrink: 0; font-size: 15px; color: var(--texto-apoio); }

/* Quem ja esta na unidade, esperando o procedimento. Fica marcado porque e a
   unica linha da lista sobre a qual alguem precisa fazer algo AGORA. */
.exec__na-casa { background: var(--info-fundo); }
.exec__na-casa:hover { background: var(--info-fundo); }

/* -- Grade de vagas reguladas ---------------------------------------------
   Agrupada por DIA, e nao uma lista corrida: quem procura vaga procura "a
   proxima terca", e uma coluna de 45 horarios seguidos faz achar o dia virar
   leitura linha a linha. */
.grade-vagas { display: flex; flex-direction: column; gap: var(--e12); }
.grade-vagas__dia { display: flex; flex-direction: column; gap: var(--e6); }
.grade-vagas__horas { display: flex; flex-wrap: wrap; gap: var(--e6); }

.grade-vagas__hora {
  border: 1px solid var(--contorno);
  border-radius: var(--r-linha-p);
  background: var(--linha-lista);
  color: var(--texto);
  padding: 7px var(--e12);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.grade-vagas__hora:hover { border-color: var(--azul-primario); background: var(--cartao); }

/* O escolhido e cheio, e nao so contornado: com dez horarios na tela, contorno
   fino some para quem olha de relance e a pessoa reserva o horario errado. */
.grade-vagas__hora[aria-pressed="true"] {
  background: var(--azul-primario);
  border-color: var(--azul-primario);
  color: var(--sobre-acento);
  font-weight: 600;
}
.grade-vagas__hora:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* -- Auditoria medica -----------------------------------------------------
   O prazo ganha coluna propria pelo mesmo motivo da ouvidoria: enquanto o
   parecer nao sai, o paciente fica fora da fila — o pedido nao esta parado na
   auditoria, esta parado NA VIDA DELE. */
.auditoria__prazo {
  width: 104px; flex-shrink: 0; text-align: right; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--texto-apoio);
  font-variant-numeric: tabular-nums;
}
.auditoria__prazo--vencido { color: var(--critico-texto); }

.auditoria__vencido { background: var(--critico-fundo); }
.auditoria__vencido:hover { background: var(--critico-fundo); }

/* Criterio desligado continua na lista, apagado: some-lo faria a pessoa
   recadastrar o que ja existe e descobrir o conflito so no erro. */
.auditoria__desligado { opacity: .55; }

/* -- SIGTAP ---------------------------------------------------------------
   A divergencia fica marcada porque ela e o motivo de a tela existir: o codigo
   e o que vai no arquivo do Ministerio, o nome e o que aparece na tela, e
   quando os dois discordam alguem faturou uma coisa achando que fez outra. */
.sigtap__divergente { background: var(--atencao-fundo); }
.sigtap__divergente:hover { background: var(--atencao-fundo); }

/* -- BPA ------------------------------------------------------------------
   O item que trava a remessa fica marcado: enquanto ele existe, aquele
   procedimento NAO e apresentado — e sumir da producao sem aparecer em lugar
   nenhum e pior do que aparecer como erro. */
.bpa__trava { background: var(--critico-fundo); }
.bpa__trava:hover { background: var(--critico-fundo); }

/* Remessa cancelada continua na lista, apagada: ela e a prova de que aquele
   arquivo existiu, e se ja foi enviado, some-la faria o sistema discordar do
   que o Ministerio recebeu. */
.bpa__cancelada { opacity: .55; }

/* A ressalva NAO e o bloqueio: a linha vai no arquivo, so vai pior. Pinta-la de
   vermelho faria alguem tratar as duas como a mesma coisa — e parar de ler as
   duas. */
.bpa__ressalva { background: var(--atencao-fundo); }
.bpa__ressalva:hover { background: var(--atencao-fundo); }

/* O seletor de competencia no topo: campo do guia, so mais estreito. */
.campo--compacto { padding: 8px var(--e16); }
.campo--compacto:focus-within { padding: 7px 15px; }

/* -- Faturamento ----------------------------------------------------------
   A barra da evolucao: comparacao entre competencias. Seis numeros em coluna
   se leem um a um; seis barras se leem de uma vez, e a pergunta aqui e "subiu
   ou caiu?", nao "quanto foi em agosto". */
.fat__barra {
  height: 8px; border-radius: var(--r-tile);
  background: var(--linha-lista);
  border: 1px solid var(--contorno);
  overflow: hidden;
}
/* Uma linha de formulario repetida — item de lote, procedimento de contrato.
   O contorno separa uma da outra: sem ele, quatro campos de quatro linhas
   viram dezesseis campos soltos, e ninguem sabe qual valor e de qual item. */
.fat__linha-item {
  display: flex; flex-direction: column; gap: var(--e6);
  padding: var(--e12);
  border: 1px solid var(--contorno);
  border-radius: var(--r-bloco);
  background: var(--linha-lista);
}

.fat__barra-preenche {
  height: 100%;
  background: var(--azul-primario);
  border-radius: var(--r-tile);
}

/* ── Casa de Apoio: a faixa de ocupacao dos proximos dias ───────── 23.1 ──
   Barra por dia, e nao tabela: quem precisa enxergar que a casa lota no dia 20
   nao vai ler catorze linhas. A altura e a lotacao; a cor e o risco. O
   `overflow-x` existe porque catorze colunas nao cabem num telefone — e uma
   faixa que quebra em duas linhas deixa de ser uma linha do tempo. */
.casa__faixa {
  display: flex; gap: var(--e6); align-items: flex-end;
  overflow-x: auto; padding-bottom: var(--e4);
}
.casa__dia {
  flex: 1 0 52px; min-width: 52px; text-align: center;
  border-radius: var(--r-linha); padding: var(--e6) 2px var(--e8);
  background: var(--trilha);
}
.casa__dia--apertado { background: var(--atencao-fundo); }
.casa__dia--cheio    { background: var(--critico-fundo); }

/* A barra cresce de baixo para cima: o eixo da leitura e o mesmo do mundo —
   cama que enche, enche por cima. */
.casa__barra {
  height: 56px; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: var(--e6);
}
.casa__barra > span {
  width: 14px; border-radius: var(--r-linha-p) var(--r-linha-p) 0 0;
  background: var(--azul-primario); display: block; min-height: 2px;
}
.casa__dia--apertado .casa__barra > span { background: var(--atencao-cheia); }
.casa__dia--cheio .casa__barra > span    { background: var(--critico-cheia); }

.casa__num  { font-size: 15px; color: var(--texto); line-height: 1.1; }
.casa__data { font-size: 11px; color: var(--texto-apoio); margin-top: 2px; }
.casa__mov  { font-size: 11px; min-height: 14px; }

/* O "e mais N avisos" da faixa de atencao — 4.4. Linha discreta, alinhada com
   os itens: ela e um controle, nao um achado, e por isso nao tem a barra
   colorida na lateral nem o peso de um item. */
.atencao__mais {
  align-self: flex-start; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--texto-apoio);
  padding: var(--e4) var(--e8); border-radius: var(--r-linha-p);
}
.atencao__mais:hover { color: var(--texto); background: var(--trilha); }

/* ── Serie: a evolucao de um numero no tempo ────────────────────── 4.5 ──
   Barras em div, sem biblioteca e sem canvas: o sistema nao tem build, e um
   grafico que so aparece depois de baixar 200 kB e um grafico que nao aparece
   na conexao da unidade. A base e SEMPRE zero — cortar o eixo e como se mente
   com grafico sem mentir com numero. */
.serie__grade {
  position: relative; display: flex; align-items: flex-end;
  gap: var(--e6); height: 132px; padding-bottom: var(--e2);
}
.serie__col { flex: 1 1 0; min-width: 24px; display: flex; flex-direction: column; }
/* Série densa: vinte, trinta colunas. O `min-width: 24px` de cada coluna
   somava mais que a largura do cartão e o desenho vazava por cima do bloco
   vizinho. Aqui a coluna pode encolher — a barra tem largura relativa e
   continua legível — e o rótulo, que é o que não encolhe, já rareia no
   componente. */
.serie__grade--densa .serie__col { min-width: 0; }
.serie__grade--densa { gap: var(--e2); }
.serie__trilho {
  height: 84px; display: flex; align-items: flex-end; justify-content: center;
}
.serie__barra {
  display: block; width: 60%; max-width: 26px; min-height: 2px;
  border-radius: var(--r-linha-p) var(--r-linha-p) 0 0;
  background: var(--azul-primario);
}
.serie__barra--ok      { background: var(--ok-cheia); }
.serie__barra--atencao { background: var(--atencao-cheia); }
.serie__barra--critico { background: var(--critico-cheia); }
.serie__barra--neutro  { background: var(--contorno); }

.serie__valor  { font-size: 12px; color: var(--texto); text-align: center; margin-top: var(--e4); }
.serie__rotulo { font-size: 11px; color: var(--texto-apoio); text-align: center; }

/* A linha do alvo atravessa o grafico: "a partir daqui esta ruim" e uma
   informacao diferente de "esta barra esta ruim". */
.serie__alvo {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--critico-cheia); opacity: .55;
  margin-bottom: 48px;   /* sobe a linha acima dos rotulos, que ocupam 48px */
}


/* ── Curva: um valor contra a faixa esperada, no tempo ──────────── 4.6 ──
   A `serie` responde "está piorando?"; esta responde "onde isto cai dentro do
   que se espera?". SVG escrito à mão, sem biblioteca, como o mapa.

   O TRAÇO NÃO ENGORDA COM A TELA: `preserveAspectRatio="none"` estica o desenho
   para encher a largura e `vector-effect: non-scaling-stroke` segura a espessura
   da linha. Sem o segundo, a mesma curva sai com fio de cabelo no celular e
   traço grosso no monitor da recepção.

   OS RÓTULOS SÃO HTML, e não <text> dentro do SVG: texto dentro de um viewBox
   que estica muda de tamanho com a largura, e o piso de 11px do layout deixaria
   de valer no celular — que é onde ele mais importa. */
.curva__quadro {
  position: relative; display: flex; gap: var(--e8); align-items: stretch;
  background: var(--linha-lista); border: 1px solid var(--contorno);
  border-radius: var(--r-bloco); padding: var(--e10);
}
.curva__tela { flex: 1 1 auto; width: 100%; height: 132px; display: block; overflow: visible; }

.curva__eixo-y {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; color: var(--texto-apoio); font-family: var(--mono);
  text-align: right; flex-shrink: 0;
}
.curva__eixo-x {
  display: flex; justify-content: space-between; margin-top: var(--e4);
  font-size: 11px; color: var(--texto-apoio); font-family: var(--mono);
}

/* A FAIXA ESPERADA é o miolo entre −2 e +2 DP. Ela é fundo, e não linha: o que
   se lê é a posição do ponto DENTRO dela, e duas bordas soltas fariam o olho
   procurar a borda em vez do meio. */
.curva__faixa { fill: var(--info-fundo); stroke: none; }
.curva__meio  { stroke: var(--sobre-escuro-fraco); stroke-width: 1.5; stroke-dasharray: 4 4; }

/* A CRIANÇA VEM POR CIMA DE TUDO e é a única linha cheia e escura do desenho:
   ela é o assunto, o resto é o fundo contra o qual ela é lida. */
/* A linha da CRIANCA usa --tinta-forte: --azul-escuro e' superficie e, no tema
   escuro, a curva do proprio paciente desapareceria dentro do cartao. */
.curva__trilha { stroke: var(--tinta-forte); stroke-width: 2; stroke-linejoin: round;
                 stroke-linecap: round; }
.curva__ponto  { fill: var(--azul-primario); stroke: var(--cartao); stroke-width: 1.5; }

/* Fora da faixa esperada o ponto muda de cor — e só ele. Pintar a linha inteira
   diria "esta criança está ruim"; pintar o ponto diz "esta medida saiu da
   faixa", que é a frase verdadeira. */
.curva__ponto--fora { fill: var(--critico-cheia); }

.curva__legenda { display: flex; gap: var(--e10); flex-wrap: wrap; }
.curva__chave   { display: inline-flex; align-items: center; gap: var(--e4);
                  font-size: 11px; color: var(--texto-apoio); white-space: nowrap; }
.curva__amostra { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.curva__amostra--faixa { background: var(--info-fundo); border: 1px solid var(--borda-andamento); }
.curva__amostra--meio  { background: var(--sobre-escuro-fraco); }
.curva__amostra--eu    { background: var(--tinta-forte); }

/* No celular o quadro fica mais baixo: 132px de altura com 340px de largura
   deixa a curva quase reta, e curva reta não mostra inflexão nenhuma. */
@media (max-width: 560px) {
  .curva__tela { height: 108px; }
}

/* --------------------------------------------------------------------------
   Previa de papel — o relatorio visto na tela antes de ir para a impressora

   O MESMO HTML que sai impresso e' o que aparece aqui, e isso e' de proposito:
   uma previa que monta o layout por conta propria e' uma previa que mente.
   O que muda sao so' as cores — o papel usa preto e cinza, a tela usa os tokens.
   -------------------------------------------------------------------------- */
.previa-papel { overflow-x: auto; }
.previa-papel h1 { font-size: 16px; margin: 0 0 4px; letter-spacing: -.01em; color: var(--texto); }
.previa-papel h2 { font-size: 12px; margin: var(--e16) 0 var(--e8); text-transform: uppercase;
                   letter-spacing: .06em; color: var(--texto-apoio); }
.previa-papel .apoio { color: var(--texto-apoio); font-size: 12px; }
.previa-papel .cabeca-rel { display: flex; justify-content: space-between; align-items: flex-start;
                            gap: var(--e12); border-bottom: 1px solid var(--contorno);
                            padding-bottom: var(--e12); margin-bottom: var(--e14); }
.previa-papel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.previa-papel th, .previa-papel td { text-align: left; padding: var(--e8) var(--e10);
                                     border-bottom: 1px solid var(--contorno); vertical-align: top;
                                     color: var(--texto-corrente); }
.previa-papel thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
                         color: var(--texto-apoio); background: var(--linha-lista); }
.previa-papel td.n, .previa-papel th.n { text-align: right; }
.previa-papel tr.total td { font-weight: 600; color: var(--texto);
                            border-top: 1px solid var(--texto-apoio); }


/* ---------------------------------------------------------------------------
   Tela 14 - Retornos: a lista e o painel, o grafico e apoio
   --------------------------------------------------------------------------- */

/* Mesmo desequilibrio que os Leitos tinham: o grafico "Retornos a vencer" fica
   ACIMA da lista e, somado aos KPIs, empurrava as demandas para uma faixa em que
   cabiam tres linhas. Quem abre esta tela abre para LIGAR para alguem — a lista
   e o trabalho, o grafico so diz quando o trabalho vem.

   O escopo e o `#carga`, que so existe aqui: `#lista` se repete em 21 telas e
   escrever a regra por ele mexeria em todas. */
#carga .serie__grade  { height: 92px; }
#carga .serie__trilho { height: 52px; }

/* A lista ganha piso e deixa de rolar dentro de um cartao espremido. O seletor e
   o irmao adjacente do grafico — e' exatamente o cartao da lista, sem precisar
   de classe nova no JS (que esta sendo editado por outra frente agora). */
#carga + .cartao-lista .corpo.rolavel { min-height: 620px; }

/* ---------------------------------------------------------------------------
   O PISO DOS CARTOES-LISTA - regra global
   ---------------------------------------------------------------------------

   O desenho da casca e' uma janela de altura fixa: `.palco` tem 100vh, o menu
   fica ancorado e `.conteudo` e' quem rola. Dentro dela, todo cartao de lista
   usa `.cresce`, que e' `flex: 1; min-height: 0` - e o `min-height: 0` e'
   exatamente a licenca que um filho de flex precisa para encolher ABAIXO do
   proprio conteudo.

   O efeito, que aparece em 28 telas: os KPIs, o grafico e o cabecalho ficam com
   o tamanho que pedem, e o que sobra - as vezes tres linhas - vai para a LISTA,
   que e' justamente o painel. A pessoa passa a rolar dentro de um cartao
   espremido, com a barra da pagina ao lado sem nada para rolar.

   O piso inverte a conta: a lista tem uma altura minima de trabalho e, quando o
   conteudo passa dela, quem rola e' a PAGINA. Uma barra so na tela.

   Por que um numero e nao `height: auto`: os cartoes tambem aparecem lado a
   lado (a fila regulada tem lista e agregado, os leitos tem mapa e higienizacao)
   e altura automatica faria colunas de alturas diferentes se desalinharem a cada
   repintura. O piso mantem o alinhamento e ainda deixa crescer.

   Telas com piso proprio (leitos, retornos, consultorio) declaram o seu depois
   e continuam valendo - sao as que pediram mais espaco. */
.cartao-lista.cresce { min-height: 520px; }

/* Em janela curta o piso venceria a tela inteira e empurraria ate' o cabecalho
   para fora. Abaixo de 820px de altura ele afrouxa: vale mais ver o topo da
   tela do que garantir a altura da lista. */
@media (max-height: 820px) {
  .cartao-lista.cresce { min-height: 380px; }
}

/* ── O VAZIO NAO BOIA NO MEIO DO PISO ────────────────────────────────────────
   Efeito colateral do piso acima, e ele so aparece com a lista VAZIA.

   `.vazio` centraliza no eixo vertical (03-componentes), o que e o certo num
   cartao do tamanho do conteudo. Com piso de 520px passa a ser outra coisa: a
   frase fica boiando no meio de um retangulo alto e oco, longe do filtro que a
   pessoa acabou de mexer — e a tela parece quebrada, nao vazia.

   So quando o vazio e' FILHO UNICO: havendo lista, ele nao esta ali; e nas
   telas que mostram vazio ao lado de conteudo (a ficha da equipe no SCNES tem
   dois), o centramento continua valendo, porque ali o bloco tem a altura do
   proprio conteudo. */
.cartao-lista.cresce > .corpo > .vazio:only-child {
  justify-content: flex-start;
  padding-top: var(--e32);
}

/* ── A grade do pedido de agenda (086) ───────────────────────────────────────
   Uma linha por profissional, com o calendario dos dias e os horarios. O
   calendario e' MENOR que o da tela de agenda de proposito: aqui ele cabe
   dentro de um modal, ao lado dos horarios, e o que se le nele e' "que dias",
   nao "quanta ocupacao". */
.grade-item { border: 1px solid var(--contorno); border-radius: var(--r-bloco); padding: var(--e12); margin-bottom: var(--e12); background: var(--cartao); }
.grade-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.grade-dia { height: 34px; border-radius: var(--r-tile); background: var(--trilha); color: var(--texto-apoio); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; line-height: 1.1; }
.grade-dia b { font-size: 11px; font-weight: 600; }
.grade-dia--clicavel { cursor: pointer; }
.grade-dia--fora { background: transparent; color: var(--cinza-tracejado); }
/* Cor E texto: a celula verde diz o numero de vagas, a vermelha diz o traco. O
   guia proibe chip so' de cor, e a regra vale aqui pelo mesmo motivo — quem nao
   distingue verde de vermelho continua lendo o calendario. */
.grade-dia--ok { background: var(--ok-fundo); color: var(--ok-texto); }
.grade-dia--critico { background: var(--critico-fundo); color: var(--critico-texto); }

/* ── Sala de vacina (105) ──────────────────────────────────────────── 42 ──
   Sete grades, e todas com a MESMA decisão por trás: a coluna que decide alguma
   coisa fica larga, e a que só identifica fica estreita. Numa lista de doses, o
   nome do paciente é o que se lê; o lote é o que se confere depois, com o dedo.

   Nenhuma largura em `ch` ou em `em`: as colunas de número usam a fonte mono, e
   `ch` nela varia entre os sistemas em que este painel roda — a coluna que cabe
   no Windows estoura no Linux da unidade. */
.vacina__doses-col    { grid-template-columns: 76px 1fr 78px 148px 110px 96px 96px; gap: var(--e8); }
.vacina__carteira-col { grid-template-columns: 84px 1fr 150px 108px 104px 130px; gap: var(--e8); }
/* A ultima coluna leva TRES botoes desde a 136 (Lotes, Razao, Frasco): com 160px
   o terceiro quebrava para a linha de baixo e a linha do catalogo dobrava de
   altura sem ninguem entender por que. */
.vacina__cat-col      { grid-template-columns: 78px 1fr 96px 96px 88px 92px 104px 208px; gap: var(--e8); }
.vacina__lote-col     { grid-template-columns: 78px 128px 104px 88px 96px 1fr 116px 168px; gap: var(--e8); }
/* A CASA ENTRA COMO COLUNA (116): microárea, agente e endereço são o que decide
   entre ligar e mandar o agente. A de ações cresce para "Pedir visita" caber
   ao lado de "Carteira" sem quebrar linha. */
.vacina__faltoso-col  { grid-template-columns: 1fr 118px 76px 72px 132px 96px 124px 1.1fr minmax(178px, auto); gap: var(--e8); }
.vacina__cal-col      { grid-template-columns: 180px 168px 88px 88px 104px 1fr; gap: var(--e8); }
.vacina__bol-col      { grid-template-columns: 1fr 88px 84px 88px 92px 88px 80px 92px 80px 88px; gap: var(--e6); }

/* O RELÓGIO DO FRASCO É O ÚNICO NÚMERO DESTA TELA MEDIDO EM MINUTOS, e por isso
   ele não pode quebrar linha nem ser cortado por reticências: "12 mi…" ao lado
   de sete doses é a diferença entre chamar mais gente e jogar sete doses fora. */
.vacina__relogio { white-space: nowrap; font-family: var(--mono); }

/* (122) A SIGLA DO CALENDÁRIO NÃO CABE EM 78px: "penta (DTP+HB+Hib)" é a grafia
   do Ministério, e o chip passava por cima do nome do imunobiológico na coluna
   ao lado. A sigla se corta com reticências e fica inteira no title — o nome
   completo já está escrito na coluna seguinte. */
.vacina__sigla { min-width: 0; overflow: hidden; }
.vacina__sigla .chip { display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Na largura da caixa térmica (telas de 1280 e menos) as duas grades mais
   largas perdem as colunas de conferência, que são as únicas cujo conteúdo
   também está escrito no cartão de detalhe. O resto continua inteiro. */
@media (max-width: 1400px) {
  .vacina__bol-col { grid-template-columns: 1fr 80px 76px 80px 84px 80px 72px 84px 72px 80px; gap: 4px; }
  .vacina__cat-col { grid-template-columns: 70px 1fr 88px 88px 80px 84px 92px 196px; }
}

/* --------------------------------------------------------------------------
   Laboratório e Imagem (110) — as grades de coluna

   O NOME DO PACIENTE E O NÚMERO DA AMOSTRA NÃO PODEM ENCOLHER, e são os dois
   únicos campos desta tela que se conferem com o dedo contra um papel ou uma
   etiqueta. "Maria Aparecida S…" ao lado de "AM-2026-0001…" é exatamente onde
   a troca de resultado entre dois pacientes acontece — o erro mais grave que um
   laboratório comete. Por isso a amostra tem largura fixa e o nome fica no `1fr`.

   Nenhuma largura em `ch`: a coluna de número usa a fonte mono, e `ch` nela
   varia entre os sistemas em que este painel roda.
   -------------------------------------------------------------------------- */
.lab__fila-col { grid-template-columns: 1fr 200px 148px 130px 110px 130px 128px; gap: var(--e8); }
.lab__cat-col  { grid-template-columns: 1fr 78px 108px 140px 96px 72px 76px 88px 80px 104px; gap: var(--e8); }
/* A ultima coluna e o marcador do resultado: com 110px o chip CRITICO saia
   cortado como "CRI" — e o marcador cortado e o unico dado daquela linha que
   muda a conduta. */
.lab__res-col  { grid-template-columns: 1fr 120px 96px 180px 132px; gap: var(--e8); }

/* A GRADE DE DIGITAÇÃO DO RESULTADO tem campos, e não texto: o `align-items`
   do `.tabela__linha` centraliza, o que deixaria o rótulo da primeira linha
   desalinhado das outras. Aqui as linhas se alinham pelo topo, e só a primeira
   carrega rótulo. */
.lab__dig-col  { grid-template-columns: 1fr 140px 110px 1fr 150px; gap: var(--e8); align-items: end; }
.lab__ana-col  { grid-template-columns: 1fr 120px 1fr; gap: var(--e8); align-items: end; }

/* --------------------------------------------------------------------------
   Saúde Mental · CAPS (110)

   "SEM VIR" É A COLUNA QUE ORDENA A LISTA, e ela vem antes da referência de
   propósito: quem abre esta tela procura quem sumiu, não quem é o técnico. A
   coluna de nome é a única elástica — o resto é número curto.
   -------------------------------------------------------------------------- */
.sm__lista-col { grid-template-columns: 1fr 140px 120px 72px 120px 160px 130px 140px; gap: var(--e8); }
.sm__enc-col   { grid-template-columns: 88px 150px 92px 112px minmax(0, 1fr) 100px minmax(0, 1.2fr) 112px; gap: var(--e8); }
/* 125 · a porta, o grupo de uma vez e o espelho da produção. O encontro saiu da
   metade direita da ficha (oito colunas não cabem em meio modal — o texto era
   cortado na primeira linha) e ganhou a coluna do código, que é o que a
   produção lê. */
.sm__enc-col .invalidado { text-decoration: line-through; }
.sm__acolh-col { grid-template-columns: 88px minmax(0, 1fr) 150px 210px 150px 170px; gap: var(--e8); }
.sm__lote-col  { grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: var(--e8); }
.sm__raas-col  { grid-template-columns: 104px minmax(0, 1fr) 72px minmax(0, 1fr) 88px 56px 112px; gap: var(--e8); }

/* Na largura de 1400 as duas grades mais largas perdem as colunas cujo conteúdo
   também está escrito na ficha que se abre ao clicar. O nome e a ausência —
   que são o motivo de a lista existir — nunca encolhem. */
@media (max-width: 1400px) {
  .lab__fila-col { grid-template-columns: 1fr 170px 130px 120px 96px 110px 110px; gap: var(--e6); }
  .lab__cat-col  { grid-template-columns: 1fr 70px 96px 120px 88px 64px 68px 80px 72px 92px; gap: var(--e6); }
  .sm__lista-col { grid-template-columns: 1fr 124px 108px 64px 108px 132px 118px 120px; gap: var(--e6); }
}

/* --------------------------------------------------------------------------
   Sala de enfermagem (107)

   A COLUNA DO HORARIO E' A PRIMEIRA E NAO ENCOLHE. Ela e' o dado pelo qual esta
   tela e' lida: quem abre a fila procura o que vence agora, e um horario cortado
   obriga a abrir a linha para saber do que se trata. O nome do paciente e o da
   medicacao sao as duas colunas elasticas; o resto e' curto e fixo.
   -------------------------------------------------------------------------- */
.enf__doses  { grid-template-columns: 148px 1fr 1fr 150px 136px 128px 190px; gap: var(--e8); }
/* A última coluna cresce até caber "Declaração" ao lado de "Abrir" (112). */
.enf__espera { grid-template-columns: 92px 1fr 1fr 150px 72px minmax(88px, auto); gap: var(--e8); }
.enf__presc  { grid-template-columns: 1fr 1fr 130px 180px 124px; gap: var(--e8); }
.enf__proc   { grid-template-columns: 140px 1fr 1fr 118px 120px 100px; gap: var(--e8); }
/* (158) A SÉRIE DE CURATIVO. Paciente e lesão são as colunas elásticas — são
   elas que respondem "de quem é" e "onde é"; "trocas" e "próxima" são curtas e
   fixas, e a próxima precisa caber a data mais o chip de atraso. */
.enf__curativo { grid-template-columns: 1fr 1fr 130px 170px 120px 92px; gap: var(--e8); }

/* A DOSE ATRASADA TEM FUNDO PROPRIO, e nao so' um chip: a linha inteira muda,
   porque numa lista de trinta horarios o chip de um deles passa despercebido —
   e passar despercebido e' exatamente o que o atraso nao pode fazer. A borda a'
   esquerda existe para quem nao distingue a diferenca de fundo. */
.enf__atrasada {
  background: var(--sup-critico);
  box-shadow: inset 3px 0 0 var(--critico-cheia);
}
.enf__atrasada:hover { background: var(--sup-critico); }

/* O REGISTRO ESTORNADO CONTINUA VISIVEL, e e' de proposito: ele explica uma
   entrada no razao e uma no livro do controlado. Some-lo faria o saldo ter um
   movimento sem origem. */
.enf__estornada { opacity: .62; }

/* --------------------------------------------------------------------------
   Saúde bucal · odontograma (107)

   ── A COR AQUI E' CODIGO CLINICO, E NAO TEMA ────────────────────────────────

   Os tokens `--odonto-*` de `01-tokens.css` sao os unicos deste sistema que
   nao seguem o acento: vermelho e' carie e azul e' restaurado em qualquer
   faculdade de odontologia do pais. O que muda com o tema e' so' o brilho, para
   a marca sobreviver ao cartao escuro.

   ── E ELA NUNCA E' FUNDO DE TEXTO ───────────────────────────────────────────

   O numero do dente fica sobre o cartao, com a cor de texto de sempre; a
   condicao aparece numa TARJA embaixo dele. Assim o contraste do numero nao
   depende da condicao, e o harness de cores nao precisa conferir doze fundos
   com texto em cima — porque nao existe nenhum.
   -------------------------------------------------------------------------- */
.odonto {
  display: flex; flex-direction: column; gap: var(--e14);
  padding: var(--e12); border-radius: var(--r-bloco); background: var(--trilha);
}
.odonto__arcada { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
/* A linha media, que separa o lado direito do esquerdo do paciente. Sem ela o
   dentista conta os dentes a partir da borda para achar o 11. */
.odonto__meio { width: 2px; background: var(--contorno); margin: 0 var(--e6); border-radius: 1px; }

.odonto__dente {
  width: 42px; padding: 4px 2px 0; border: 1px solid var(--contorno);
  border-radius: var(--r-linha-p); background: var(--cartao);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; font: inherit; color: var(--texto);
}
.odonto__dente:hover { border-color: var(--azul-primario); }
.odonto__dente:disabled { cursor: default; opacity: .75; }
.odonto__num { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* A CONTAGEM DE FACES MARCADAS. Um dente com tres faces tratadas e' diferente
   de um dente inteiro cariado, e sem este numero os dois desenham igual. */
.odonto__faces { font-size: 10px; color: var(--texto-apoio); min-height: 12px; }
.odonto__tarja { width: 100%; height: 7px; border-radius: 0 0 3px 3px; background: var(--odonto-higido); }

.odonto__tarja--higido            { background: var(--odonto-higido); }
.odonto__tarja--cariado           { background: var(--odonto-cariado); }
.odonto__tarja--restaurado        { background: var(--odonto-restaurado); }
.odonto__tarja--ausente           { background: var(--odonto-ausente); }
.odonto__tarja--extraido          { background: var(--odonto-extraido); }
.odonto__tarja--extracao_indicada { background: var(--odonto-indicado); }
/* (125) O token da condição em estados.js é `indicado`, e a view monta a classe
   pelo token: só a regra acima existia, e "extração indicada" saía sem cor no
   dente e na legenda — a condição que manda o dente para a exodontia era a
   única invisível no mapa. */
.odonto__tarja--indicado          { background: var(--odonto-indicado); }
.odonto__tarja--coroa             { background: var(--odonto-coroa); }
.odonto__tarja--implante          { background: var(--odonto-implante); }
.odonto__tarja--selante           { background: var(--odonto-selante); }
.odonto__tarja--fraturado         { background: var(--odonto-fraturado); }
.odonto__tarja--canal             { background: var(--odonto-canal); }
.odonto__tarja--protese           { background: var(--odonto-protese); }

/* A LEGENDA E' OBRIGATORIA, e nao um enfeite: doze cores sem legenda sao doze
   cores que so' quem desenhou entende. O ponto repete o token da tarja. */
.odonto__legenda { display: flex; flex-wrap: wrap; gap: var(--e10); justify-content: center; }
.odonto__legenda-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-apoio); }
/* (125) O PONTO NÃO DECLARA FUNDO. Declarava, e por vir DEPOIS das tarjas no
   arquivo, com a mesma especificidade, ganhava delas: a legenda inteira e a
   história do dente saíam com as doze condições pintadas de "hígido" — a
   legenda que existe para ensinar a cor mentia sobre todas. Sem classe de
   tarja, o ponto herda o hígido pelo seletor abaixo. */
.odonto__ponto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.odonto__ponto:not([class*="odonto__tarja--"]) { background: var(--odonto-higido); }
/* A FACE MARCADA APARECE NO DENTE. Antes o dente mostrava só "1f": a cárie
   oclusal do 36 desenhava o dente igual a um hígido, e o mapa lido de longe
   escondia justamente o que ele existe para mostrar. Um ponto por face, na cor
   da condição dela. */
.odonto__ponto--face { width: 7px; height: 7px; border-radius: 2px; }
.odonto__faces { display: flex; gap: 1px; justify-content: center; align-items: center; }

.bucal__plano { grid-template-columns: 110px 1fr 140px 130px 150px; gap: var(--e8); }
.bucal__proc  { grid-template-columns: 130px 1fr 130px 118px 150px 140px; gap: var(--e8); }
.bucal__hist  { grid-template-columns: 140px 1fr 150px 160px; gap: var(--e8); }
/* (158) OS RETORNOS. Paciente e motivo são elásticos; "previsto" precisa caber
   a data mais o chip de vencimento, e a última coluna guarda três botões. */
.bucal__retorno { grid-template-columns: 1fr 1fr 150px 150px 110px 210px; gap: var(--e8); }

@media (max-width: 1400px) {
  .enf__doses { grid-template-columns: 132px 1fr 1fr 120px 116px 112px 170px; gap: var(--e6); }
  .enf__proc  { grid-template-columns: 124px 1fr 1fr 104px 104px 92px; gap: var(--e6); }
  .enf__curativo { grid-template-columns: 1fr 1fr 110px 140px 104px 84px; gap: var(--e6); }
  .bucal__proc { grid-template-columns: 116px 1fr 116px 104px 130px 124px; gap: var(--e6); }
  .bucal__retorno { grid-template-columns: 1fr 1fr 124px 124px 96px 180px; gap: var(--e6); }
}

/* ===========================================================================
   TELA 43 · LINHAS DE CUIDADO (108)
   ===========================================================================
   Sete telas e sete grades, e a diferenca entre elas nao e' capricho: cada
   linha de cuidado responde por uma pergunta diferente, e a coluna que responde
   a ela precisa caber sem reticencias.

   No pre-natal a coluna que decide o dia e' a IDADE GESTACIONAL, porque e' ela
   que diz se a consulta e' mensal, quinzenal ou semanal. No hiperdia e' a
   CONDICAO. Na crianca sao as TRIAGENS. No rastreamento e' o ULTIMO RESULTADO.
   Uma grade unica para as cinco cortaria justamente a coluna que muda a conduta
   em quatro delas.

   A grade da BUSCA ATIVA e' a mais larga de proposito: "o que esta pendente"
   carrega a frase inteira com o numero de dias, e e' ela que a pessoa le antes
   de discar. Cortada com reticencias, a lista vira uma lista de nomes — que e'
   exatamente o que este modulo existe para nao ser. */
.lc__linha-col  { grid-template-columns: 1fr 124px 100px 128px 130px 92px; gap: var(--e8); }
.lc__pn-col     { grid-template-columns: 1fr 136px 110px 106px 92px 104px 190px 92px; gap: var(--e8); }
.lc__pp-col     { grid-template-columns: 1fr 136px 118px 92px 104px 190px 92px; gap: var(--e8); }
.lc__hd-col     { grid-template-columns: 1fr 136px 150px 128px 92px 104px 190px 92px; gap: var(--e8); }
.lc__cr-col     { grid-template-columns: 1fr 96px 150px 150px 104px 104px 180px 92px; gap: var(--e8); }
.lc__id-col     { grid-template-columns: 1fr 136px 140px 110px 100px 104px 180px 92px; gap: var(--e8); }
.lc__ct-col     { grid-template-columns: 1fr 92px 116px 150px 116px 190px 92px; gap: var(--e8); }
/* As ações do caso ganharam "ACS" (116) — a coluna cresce até caber. */
.lc__busca-col  { grid-template-columns: 1fr 136px 132px 2fr 160px 170px minmax(176px, auto); gap: var(--e8); }
.lc__param-col  { grid-template-columns: 150px 1fr 150px 1fr; gap: var(--e8); }
/* A coluna de ações cresce até caber "Pedir", "Ligar pedido" e "Lançar" (112). */
.lc__ex-col     { grid-template-columns: 1fr 96px 132px 1fr minmax(92px, auto); gap: var(--e8); }
.lc__pu-col     { grid-template-columns: 130px 1fr 1fr 1fr; gap: var(--e8); }

@media (max-width: 1400px) {
  .lc__pn-col    { grid-template-columns: 1fr 120px 96px 96px 76px 96px 160px 86px; gap: var(--e6); }
  .lc__hd-col    { grid-template-columns: 1fr 120px 128px 110px 76px 96px 160px 86px; gap: var(--e6); }
  .lc__cr-col    { grid-template-columns: 1fr 86px 128px 130px 88px 96px 150px 86px; gap: var(--e6); }
  .lc__id-col    { grid-template-columns: 1fr 120px 124px 96px 84px 96px 150px 86px; gap: var(--e6); }
  .lc__busca-col { grid-template-columns: 1fr 120px 116px 2fr 140px 150px minmax(160px, auto); gap: var(--e6); }
}

/* --------------------------------------------------------------------------
   Indicadores da UPA

   A tabela das cores e a mais larga da tela porque a ultima coluna carrega o
   que NAO entrou no percentual (saiu sem medico, ainda esperando, viu o medico
   antes da cor). Cortada, a leitura vira so o percentual — que e exatamente o
   numero que esconde quem foi embora.
   -------------------------------------------------------------------------- */
.gupa__grade    { align-items: stretch; gap: var(--e16); }
.gupa__cores    { grid-template-columns: 150px 64px 72px minmax(120px, 1fr) 84px 84px 92px minmax(160px, 1.3fr); gap: var(--e8); }
.gupa__casos    { grid-template-columns: 72px minmax(140px, 1fr) 110px 150px 84px 120px minmax(160px, 1.2fr); gap: var(--e8); }
.gupa__retornos { grid-template-columns: 72px minmax(140px, 1fr) 110px 150px 160px 72px 150px; gap: var(--e8); }
.gupa__numero   { display: flex; align-items: baseline; gap: var(--e10); flex-wrap: wrap; }
.gupa__fonte    { font-size: 12px; color: var(--texto-apoio); margin-top: var(--e12); }
.gupa__cor      { display: flex; align-items: center; gap: var(--e8); min-width: 0; }
.gupa__cor .risco__cor { width: 8px; height: 22px; }

@media (max-width: 1400px) {
  .gupa__cores { grid-template-columns: 130px 56px 60px minmax(100px, 1fr) 72px 72px 84px minmax(130px, 1.2fr); gap: var(--e6); }
}

/* --------------------------------------------------------------------------
   Internacao e prontuario hospitalar (117)

   A COLUNA "O QUE FALTA" E' A ELASTICA DA LISTA: e' ela que diz por que a linha
   esta' onde esta' (aguardando leito, dose atrasada, sem evolucao). Leito e
   dias sao curtos e fixos; cortar a pendencia seria esconder a razao da ordem.
   -------------------------------------------------------------------------- */
.int__lista  { grid-template-columns: 150px minmax(180px, 1.2fr) 96px minmax(120px, .8fr) 150px minmax(200px, 1.4fr);
               gap: var(--e8); text-align: left; width: 100%; }
.int__censo  { grid-template-columns: minmax(140px, 1fr) repeat(10, 84px); gap: var(--e6); }

/* A lista de internados do prontuario tem largura fixa: o prontuario e' o
   painel, e a lista so' escolhe quem abrir. */
.proh__lista { width: 300px; flex-shrink: 0; }
.proh__itens  { grid-template-columns: minmax(200px, 1.4fr) 150px 120px minmax(140px, 1fr) 190px; gap: var(--e8); }
.proh__sinais { grid-template-columns: 136px minmax(200px, 1fr) 150px 150px 100px; gap: var(--e8); }

@media (max-width: 1400px) {
  .int__lista  { grid-template-columns: 124px minmax(150px, 1fr) 80px 110px 124px minmax(170px, 1.2fr); gap: var(--e6); }
  .int__censo  { grid-template-columns: minmax(120px, 1fr) repeat(10, 68px); gap: var(--e4); }
  .proh__lista { width: 260px; }
}
@media (max-width: 1100px) { .proh__lista { width: 100%; max-height: 260px; } }

/* --------------------------------------------------------------------------
   Controle de infeccao (121)

   AS ABAS SAO NOVE, E QUEBRAM LINHA em vez de rolar de lado: aba escondida
   atras da borda e' aba que ninguem abre. Nas listas, a coluna elastica e' a
   que explica a linha (o sinal da busca ativa, a indicacao do dispositivo, o
   quadro do caso); as outras sao curtas e fixas.
   -------------------------------------------------------------------------- */
.ccih__abas      { flex-wrap: wrap; }
.ccih__busca     { grid-template-columns: minmax(150px, .9fr) 120px minmax(220px, 2fr) 290px; gap: var(--e8); align-items: center; }
.ccih__casos     { grid-template-columns: 130px minmax(150px, 1fr) 90px 130px 160px minmax(180px, 1.4fr); gap: var(--e8); text-align: left; width: 100%; }
.ccih__internados { grid-template-columns: 120px minmax(160px, 1fr) 56px minmax(150px, 1fr) minmax(140px, 1fr) 170px; gap: var(--e8); text-align: left; width: 100%; }
.ccih__disp      { grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 64px 110px 150px minmax(160px, 1.2fr); gap: var(--e8); text-align: left; width: 100%; }
.ccih__atm       { grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) 90px 150px 160px 230px; gap: var(--e8); align-items: center; }
.ccih__catalogo  { grid-template-columns: minmax(140px, 1fr) 160px minmax(160px, 1.2fr) 170px; gap: var(--e8); text-align: left; width: 100%; }
.ccih__prec      { grid-template-columns: 110px minmax(150px, 1fr) minmax(180px, 1.4fr) 170px 200px; gap: var(--e8); align-items: center; }
.ccih__leito     { grid-template-columns: 130px 110px 130px minmax(200px, 1fr) 110px; gap: var(--e8); align-items: center; }
.ccih__cultura   { grid-template-columns: minmax(160px, 1.2fr) minmax(150px, 1fr) 96px minmax(160px, 1fr) 150px 100px; gap: var(--e8); align-items: center; }
.ccih__surto     { grid-template-columns: 110px minmax(200px, 1.4fr) 80px 150px 150px; gap: var(--e8); text-align: left; width: 100%; }
.ccih__ind       { grid-template-columns: minmax(130px, 1fr) repeat(4, 64px) repeat(4, 76px) repeat(3, 58px) 110px; gap: var(--e6); }

/* O critério se marca item a item, e o grupo carrega o "pelo menos N": o
   texto da fonte fica inteiro, sem corte, porque é ele que se confere. */
.ccih__previa    { display: flex; flex-direction: column; gap: var(--e4); margin: var(--e8) 0; }
.ccih__grupo     { padding: var(--e10) var(--e12); margin: var(--e8) 0; background: var(--linha-lista); border-radius: var(--r-bloco); }
.ccih__item      { display: flex; gap: var(--e8); align-items: flex-start; padding: var(--e4) 0; cursor: pointer; }
.ccih__item input { margin-top: 3px; flex-shrink: 0; }
.ccih__check     { display: flex; justify-content: space-between; align-items: center; gap: var(--e12); padding: var(--e8) 0; flex-wrap: wrap; }

@media (max-width: 1400px) {
  .ccih__ind     { grid-template-columns: minmax(110px, 1fr) repeat(4, 54px) repeat(4, 66px) repeat(3, 50px) 96px; gap: var(--e4); }
  .ccih__busca   { grid-template-columns: minmax(130px, .9fr) 110px minmax(180px, 2fr) 250px; gap: var(--e6); }
}

/* --------------------------------------------------------------------------
   AIH (120) — a conta da internação.
   Cinco indicadores numa linha: o que trava a receita vem na ordem em que ele
   trava (laudo, autorizador, espelho, conferidas, competência). Nas listas, a
   coluna elástica é a que explica a linha (o que falta, a regra do prazo).
   -------------------------------------------------------------------------- */
.aih__kpis       { grid-template-columns: repeat(5, 1fr); }
.aih__alerta     { margin: var(--e8) 0; }
.aih__bloco      { margin-bottom: var(--e16); }
.aih__fazer      { grid-template-columns: 110px minmax(220px, 1.6fr) minmax(140px, 1fr) minmax(180px, 1.2fr) 150px; gap: var(--e8); text-align: left; width: 100%; }
.aih__laudos     { grid-template-columns: 170px minmax(150px, 1fr) minmax(220px, 1.6fr) 170px 130px; gap: var(--e8); text-align: left; width: 100%; }
.aih__aihs       { grid-template-columns: 160px 170px minmax(150px, 1fr) minmax(200px, 1.5fr) 100px 110px; gap: var(--e8); text-align: left; width: 100%; }
.aih__linhas     { grid-template-columns: 48px minmax(220px, 2fr) 48px minmax(150px, 1.2fr) 90px 100px 90px; gap: var(--e8); align-items: center; }
.aih__lotes      { grid-template-columns: 110px 150px 60px 120px minmax(200px, 1.5fr) 170px; gap: var(--e8); align-items: center; }
.aih__itens      { grid-template-columns: 48px 150px minmax(140px, 1fr) minmax(180px, 1.3fr) minmax(180px, 1.3fr) 220px; gap: var(--e8); align-items: center; }
.aih__faixas     { grid-template-columns: 100px minmax(200px, 1.4fr) minmax(180px, 1fr) 140px 220px; gap: var(--e8); align-items: center; }
.aih__grade      { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e10) var(--e16); margin-bottom: var(--e12); }
.aih__form       { padding: var(--e12) var(--e14); margin: var(--e8) 0; background: var(--linha-lista); border-radius: var(--r-bloco); }
.aih__sugestao   { gap: var(--e12); padding: var(--e6) 0; }

@media (max-width: 1400px) {
  .aih__kpis     { grid-template-columns: repeat(3, 1fr); }
  .aih__grade    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aih__fazer    { grid-template-columns: 96px minmax(180px, 1.4fr) minmax(120px, 1fr) minmax(150px, 1fr) 130px; gap: var(--e6); }
}

/* --------------------------------------------------------------------------
   O DOCUMENTO PUXA A PESSOA — Vitrall e CADSUS dentro de qualquer formulário.
   O campo preenchido ganha fundo de "andamento" e a frase da origem; editado à
   mão, vira atenção e mostra o valor que tinha vindo. A cor é marca de ORIGEM,
   não de erro. A linha .doc-puxa fica logo abaixo dos campos de documento.
   -------------------------------------------------------------------------- */
.doc-puxa:empty { display: none; }
.doc-puxa       { margin: var(--e6) 0 var(--e4) var(--e4); }
/* Na busca que filtra uma lista, a linha fica entre a fileira de filtros e a
   lista, alinhada ao recuo do cabeçalho do cartão. */
.cartao-lista > .doc-puxa { margin: 0 var(--e20) var(--e10); }
.doc-puxa__barra {
  background: var(--sup-andamento); border: 1px solid var(--borda-andamento);
  border-radius: var(--r-bloco); padding: var(--e10) var(--e14); margin-bottom: var(--e12);
}
.campo--puxado          { background: var(--sup-andamento); border-color: var(--borda-andamento); }
.campo--puxado .campo__apoio { color: var(--info-texto); }
.campo--puxado-alterado { background: var(--sup-atencao); border-color: var(--borda-atencao); }
.cadsus-conf__linha     { align-items: flex-start; cursor: pointer; }
.cadsus-conf__linha input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--azul-primario); }
.cadsus-conf__vazio     { width: 16px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   MINHAS VIAGENS — o painel do motorista (142).

   ESTA TELA É USADA NO CELULAR, EM PÉ, NO ESCURO. Por isso ela é a única do
   sistema desenhada de baixo para cima: a regra base é a do telefone, e a
   largura maior é a exceção que vem no `@media`. Três consequências que valem
   para tudo o que está aqui embaixo:

     · nenhum alvo de toque abaixo de 44px de altura;
     · uma coluna, sempre — grade de duas só para os quatro KPIs, que são
       números curtos e se leem em par;
     · nada de ação escondida atrás de ícone: os botões são de largura inteira e
       dizem o que fazem com palavras.
   -------------------------------------------------------------------------- */
.mot__barra      { display: flex; align-items: center; gap: var(--e8); flex-wrap: wrap; margin: var(--e10) var(--e6) var(--e12); }
.mot__relogio    { font-size: 14px; color: var(--texto); letter-spacing: 0; }
.mot__data       { height: 40px; width: 132px; padding: 0 var(--e8); font-size: 14px; }

.mot__lista      { display: flex; flex-direction: column; gap: var(--e10); }

/* O CARTÃO DA VIAGEM É UM BOTÃO. A viagem inteira é o alvo — não um link dentro
   dela —, porque na porta do veículo o dedo acerta o cartão e erra o link. */
.mot__viagem {
  display: flex; flex-direction: column; gap: var(--e10);
  width: 100%; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--contorno); cursor: pointer;
}
.mot__viagem:hover  { background: var(--linha-foco); }
.mot__viagem-pe     { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e12); }

.mot__voltar        { margin-bottom: var(--e12); }
.mot__cabeca        { margin-bottom: var(--e12); }
.mot__dados         { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e10) var(--e16); margin-top: var(--e12); }

.mot__faixa         { display: flex; flex-direction: column; gap: var(--e8); margin-bottom: var(--e12); }

.mot__kpis          { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e10); }
.mot__kpi           { display: flex; flex-direction: column; gap: var(--e4); }

/* OS BOTÕES DE AÇÃO EM COLUNA, cada um com a largura inteira. Quatro botões
   lado a lado num celular são quatro alvos de 80px que o polegar erra — e um
   deles encerra a viagem. */
.mot__acoes         { display: flex; flex-direction: column; gap: var(--e8); margin-top: var(--e12); }

.mot__pessoa        { align-items: flex-start; gap: var(--e10); min-height: 56px; }

/* O PLACAR DA ESTAÇÃO: quantos entraram, de quantos. É o número que decide se a
   van sai, e por isso ele é o maior elemento do modal. */
.mot__placar        { padding: var(--e12) var(--e14); background: var(--linha-lista); border-radius: var(--r-bloco); }
.mot__placar-n      { display: flex; align-items: baseline; gap: var(--e8); }

.mot__camera        { border: 1px solid var(--contorno); border-radius: var(--r-bloco); padding: var(--e10); }
.mot__video         { display: none; width: 100%; border-radius: var(--r-linha); background: var(--trilha); }
.mot__video--ligado { display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.mot__camera-barra  { gap: var(--e8); flex-wrap: wrap; margin-top: var(--e8); }
.mot__camera-barra:first-child { margin-top: 0; }
.mot__ao-vivo       { color: var(--ok-texto); }
.mot__confirma      { gap: var(--e8); margin-top: var(--e10); flex-wrap: wrap; }
.mot__confirma .btn { flex: 1 1 140px; }

/* A EXCEÇÃO É A TELA GRANDE. Quem confere pelo computador da central ganha as
   quatro colunas de KPI e a linha de dados inteira; quem está na van continua
   com a regra de cima. */
@media (min-width: 720px) {
  .mot__kpis  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mot__dados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mot__acoes { flex-direction: row; flex-wrap: wrap; }
  .mot__acoes .btn { flex: 1 1 200px; width: auto; }
}


/* ---------------------------------------------------------------------------
   O CARTAO CRESCE COM O QUE TEM DENTRO - a correcao do piso
   ---------------------------------------------------------------------------

   O piso de 520px acima resolveu METADE do problema: ele garante que a lista
   tenha uma altura minima de trabalho. O que ele nao resolve e' o outro lado —
   quando a lista tem MAIS do que cabe na janela, o cartao continua sendo
   espremido ate' o tamanho da tela, e a pessoa fica rolando dentro de um
   retangulo de 300px uma lista de 3.000px. Foi o que apareceu na fila estadual:
   o cartao mostrava 235px de 3.049px.

   A causa e' o `min-height: 0` do `.cresce`. Ele e' a licenca para o filho de
   flex encolher ABAIXO do proprio conteudo — otimo para caber, pessimo para ler.
   O `.conteudo` entao repartia a altura da janela entre os cartoes, e nenhum
   deles podia passar disso.

   A regra abaixo tira a licenca de ENCOLHER e mantem a de CRESCER:

     flex-shrink: 0   o cartao nao e' mais espremido pela janela
     flex-basis: auto o tamanho de partida passa a ser o do conteudo
     flex-grow: 1     (vem do proprio `.cresce`) com pouco conteudo ele
                      continua preenchendo a tela, como antes

   Resultado: conteudo curto, a tela fica compacta como o desenho pede; conteudo
   longo, o cartao cresce e quem rola e' a PAGINA — uma barra so, do lado de fora,
   em vez de uma barrinha dentro de um cartao minusculo.

   NAO HA TETO, e isso foi medido antes de decidir. Com os cartoes crescendo,
   a pagina mais alta de todo o sistema e' a fila estadual, com 3.861px — quatro
   telas de rolagem, o resto fica abaixo de 2.000px. Um teto traria de volta
   exatamente a barrinha dentro do cartao que esta regra veio tirar, e brigaria
   com a promessa do piso logo acima: uma barra so na tela. Se algum dia uma
   lista fizer uma pagina absurda, o defeito esta na paginacao daquele painel,
   nao no tamanho do cartao.

   Escopo: filhos diretos do `.conteudo` e o nivel abaixo deles (os paineis de
   duas colunas embrulham a grade num `.cresce` antes de chegar aos cartoes).
   Fora do `.conteudo` — modais, colunas de balcao — nada muda. */
.conteudo > .cresce,
.conteudo > .cresce > .cresce {
  flex-shrink: 0;
  flex-basis: auto;
}


/* ---------------------------------------------------------------------------
   AS GRADES PROPRIAS DE CADA PAINEL - o resto da mesma correcao
   ---------------------------------------------------------------------------

   A regra do `.cresce` mais acima resolve os paineis que usam a grade padrao.
   Estes aqui tem grade propria, cada um com o seu `min-height: 0` escrito a
   mao, e por isso ficaram de fora — a recepcao foi a primeira a aparecer, com
   a lista de guiches cortada ao meio, e a medicao mostrou que nao era caso
   isolado: no admin, a visao geral escondia 99px, usuarios 297px,
   departamentos e perfis 110px, a agenda 82px e a trilha 62px.

   Todas sao a mesma forma: uma grade de duas colunas dentro do `.conteudo`,
   com cartoes de lista dentro. `min-height: auto` tira delas a licenca de
   encolher abaixo do conteudo; passando da janela, quem rola e a pagina.

   FICAM DE FORA, de proposito, as que sao altura fixa por desenho:
   `.calendario__grade` (linhas `1fr`, o mes tem que caber inteiro),
   `.oferta__coluna` e `.coluna-triagem` (dividem a altura entre blocos),
   `.form-lateral__campos` (coluna de formulario que rola por conta) e a TV. */
.visao__grade, .visao__esquerda, .visao__direita,
.usuarios__grade, .auditoria__grade, .deptos__grade, .agenda__grade,
.grade-perfis, .grade-balcao, .grade-triagem, .regulacao__corpo {
  min-height: auto;
}