/* ==========================================================================
   Vitrall Saúde · 03 COMPONENTES
   Secoes 4 (componentes), 5 (menu lateral), 6 (listas) e 7 (graficos).
   Toda tela monta a partir daqui — nao repetir estilo dentro das views.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Moldura e cartao — secao 3
   -------------------------------------------------------------------------- */

.moldura {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--fundo-tela);
  border-radius: var(--r-moldura);
  box-shadow: var(--s-moldura);
}

.cartao {
  background: var(--cartao);
  border: 1px solid var(--contorno);
  border-radius: var(--r-cartao);
  box-shadow: var(--s-cartao);
  padding: var(--e20);
}

/* Cartao com lista: 20px no topo, 12px na base e 12px lateral na area rolavel */
.cartao-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
/* A CABECA DO CARTAO QUEBRA LINHA.

   Ela e' montada inline em 11 telas, sempre do mesmo jeito: titulo a esquerda,
   botoes a direita, `justify-content: space-between`. O arranjo so funciona
   enquanto os dois lados cabem — e ha caso em que nenhum dos dois pode ceder:
   o titulo leva `nowrap` e o grupo de botoes leva `flex-shrink: 0`. Aí a soma
   passa da largura do cartao e, como `.cartao-lista` tem `overflow: hidden`, o
   que passa e' CORTADO sem aviso: na ficha da pessoa, "Redefinir senha"
   aparecia como "Re", metade do botao para fora do cartao.

   `flex-wrap` resolve na origem e nao muda nada do que ja' cabe: quando os dois
   lados cabem na linha, nao ha quebra nenhuma. Fica aqui, e nao no `style=` de
   cada tela, porque a proxima cabeca escrita vai esquecer de novo — e o defeito
   so aparece com o texto comprido, num nome de botao que ninguem previu.
   Em elemento que nao e' flex a propriedade e' inerte, entao nao ha efeito
   colateral nas cabecas que nao usam `display: flex`. */
.cabeca { flex-wrap: wrap; }

.cartao-lista > .cabeca { padding: var(--e20) var(--e20) var(--e14); }
.cartao-lista > .corpo  { flex: 1; min-height: 0; padding: 0 var(--e12) var(--e12); position: relative; display: flex; flex-direction: column; gap: 3px; }

/* Veu branco no rodape da lista rolavel — unico gradiente autorizado */
.veu {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  background: linear-gradient(180deg, var(--cartao-0) 0%, var(--cartao) 70%);
  pointer-events: none; z-index: 1;
}

/* --------------------------------------------------------------------------
   4.1 Botoes
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e8);
  /* `flex-shrink: 0` junto da altura: dentro de uma coluna flex que rola — a
     ficha da triagem, do balcao — o item encolhe por padrao quando o conteudo
     passa da altura, e o botao virava uma faixa fina de poucos pixels. Altura
     declarada nao vale nada sem isto. */
  height: 42px; flex-shrink: 0; padding: 0 var(--e20);
  border-radius: 21px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: filter .12s ease;
}
.btn:hover { filter: brightness(.97); }
.btn:active { filter: brightness(.94); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--primario   { background: var(--azul-primario); color: var(--sobre-acento); box-shadow: var(--s-primario); }
.btn--confirma   { background: var(--ok-cheia);      color: var(--sobre-ok);     box-shadow: var(--s-confirma); }
.btn--secundario { background: var(--secundario);    color: var(--azul-primario); }
.btn--apoio      { background: var(--secundario);    color: var(--texto-corrente); }
.btn--branco     { background: var(--cartao);        color: var(--azul-primario); }
.btn--terciario  { background: var(--cartao); color: var(--texto-corrente); border: 1px solid var(--contorno); height: 38px; border-radius: 19px; font-size: 14px; font-weight: 400; }
.btn--destrutivo { background: var(--cartao); color: var(--critico-texto); border: 1px solid var(--contorno); }

.btn--form  { height: 46px; border-radius: 23px; }
.btn--login { height: 56px; border-radius: 28px; font-size: 17px; }
.btn--baixo { height: 40px; border-radius: 20px; font-size: 14px; padding: 0 var(--e16); }
.btn--filtro{ height: 34px; border-radius: 17px; font-size: 13px; padding: 0 var(--e14); }
.btn--largo { width: 100%; }

/* Icone isolado: circulo de 30 a 40px */
.btn-icone {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--secundario); color: var(--texto-corrente); font-size: 16px;
}
.btn-icone--branco { background: var(--cartao); }
.btn-icone--p { width: 32px; height: 32px; font-size: 15px; }

/* --------------------------------------------------------------------------
   4.3 Campos
   -------------------------------------------------------------------------- */

.campo {
  /* Mesmo motivo do botao: campo de formulario nao encolhe. Com a ficha cheia,
     o rotulo e o valor se espremiam ate um sobrepor o outro. */
  display: block; flex-shrink: 0;
  background: var(--linha-lista);
  border: 1px solid var(--contorno);
  border-radius: var(--r-bloco);
  padding: 13px var(--e20);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.campo__rotulo {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--texto-apoio);
  letter-spacing: .02em;
}
.campo__rotulo--alto { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.campo__valor {
  display: block; width: 100%; margin-top: 3px;
  border: 0; background: transparent; padding: 0;
  font-size: 16px; color: var(--texto);
}
.campo__valor::placeholder { color: var(--cinza-desativado); }
.campo__valor:focus { outline: none; }
.campo__valor--mono { font-family: var(--mono); font-size: 17px; }
.campo__valor--senha { font-family: var(--mono); font-size: 18px; letter-spacing: .22em; }

.campo:focus-within {
  background: var(--cartao);
  border: 2px solid var(--azul-primario);
  padding: 12px 19px;             /* compensa o 2px do contorno */
  box-shadow: var(--anel-foco);
}
.campo:focus-within .campo__rotulo { color: var(--azul-primario); }

.campo--erro { border: 2px solid var(--critico-cheia); padding: 12px 19px; }
.campo__erro { display: block; margin-top: 6px; font-size: 13px; color: var(--critico-texto); }

/* Texto longo: o mesmo campo, com a caixa crescendo para baixo. O resize e
   vertical de proposito — arrastar na horizontal quebraria a grade do formulario. */
textarea.campo__valor {
  resize: vertical; min-height: 60px; line-height: 1.5;
  font-family: inherit;
}

/* Seletor: mesmo campo com ▾ de 12px a direita */
.campo--seletor { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); }
.campo--seletor .campo__seta { color: var(--texto-apoio); font-size: 13px; flex-shrink: 0; }
select.campo__valor { appearance: none; cursor: pointer; }

/* Busca: capsula com ⌕ a esquerda; fundo --info-fundo quando ativa */
.busca {
  display: flex; align-items: center; gap: var(--e10);
  height: 46px; padding: 0 var(--e16);
  background: var(--linha-lista); border: 1px solid var(--contorno);
  border-radius: 23px;
}
.busca__lupa { color: var(--azul-primario); font-size: 16px; flex-shrink: 0; }
.busca__campo {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: var(--mono); font-size: 15px; color: var(--texto);
}
.busca__campo:focus { outline: none; }
.busca__campo::placeholder { color: var(--texto-apoio); font-family: var(--fonte); }
.busca:focus-within, .busca--ativa { background: var(--info-fundo); border-color: transparent; }

.busca--barra { height: 40px; border-radius: 20px; font-size: 14px; }
.busca--barra .busca__campo { font-family: var(--fonte); }

/* Interruptor: trilha 44x26, raio 13; ligada --azul-primario, desligada
   --sobre-escuro-forte. O BOTAO usa --sobre-acento e nao branco fixo: as duas
   trilhas sao CLARAS no tema escuro, e um botao branco sobre trilha clara e'
   um interruptor sem botao. */
.interruptor {
  width: 44px; height: 26px; border-radius: 13px; padding: 3px;
  background: var(--sobre-escuro-forte);
  display: flex; justify-content: flex-start; flex-shrink: 0;
  transition: background .16s ease;
}
.interruptor__botao { width: 20px; height: 20px; border-radius: 50%; background: var(--sobre-acento); transition: transform .16s ease; }
.interruptor[aria-checked="true"] { background: var(--azul-primario); }
.interruptor[aria-checked="true"] .interruptor__botao { transform: translateX(18px); }

/* Caixa de selecao: 18x18 (20 no login), raio 7px */
.caixa {
  width: 20px; height: 20px; border-radius: 7px; flex-shrink: 0;
  border: 1px solid var(--contorno); background: var(--cartao);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: transparent;
}
.caixa[aria-checked="true"] { background: var(--azul-primario); border-color: var(--azul-primario); color: var(--sobre-acento); }

/* --------------------------------------------------------------------------
   4.4 Controle segmentado — alterna visao, nunca acao
   -------------------------------------------------------------------------- */

.segmentado { display: inline-flex; gap: 3px; background: var(--trilha); border-radius: 21px; padding: 3px; }
.segmentado__item {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 18px;
  font-size: 14px; font-weight: 400; color: var(--texto-apoio); white-space: nowrap;
}
.segmentado__item[aria-selected="true"] {
  background: var(--cartao); color: var(--texto); font-weight: 600; box-shadow: var(--s-segmento);
}
.segmentado--p { border-radius: 20px; }
/* Quebra em varias linhas em vez de esconder o que nao coube. Usado onde a
   coluna e estreita e o numero de itens varia com o cadastro — com
   `overflow:hidden` o quinto profissional ficava inalcancavel, sem nenhum sinal
   de que existia. */
.segmentado--quebra { display: flex; flex-wrap: wrap; border-radius: var(--r-bloco); }
.segmentado--p .segmentado__item { padding: 7px 13px; border-radius: 17px; font-size: 13px; }

/* --------------------------------------------------------------------------
   4.4b O seletor de aparencia — tema e cor de destaque

   Vive num modal do casco e em lugar nenhum mais. As quatro amostras usam os
   tokens `--amostra-*`, que sao os UNICOS que nao giram com o acento: pintar as
   quatro com `--azul-primario` daria quatro quadradinhos da mesma cor, que e' o
   contrario de um seletor.

   Sem emoji, sem gradiente, sem sombra colorida (Guia, secao 9): o escolhido se
   marca com o anel do proprio acento e com a palavra embaixo, nao com um tique
   colorido — quem nao distingue matiz precisa do texto.
   -------------------------------------------------------------------------- */
.acentos { display: flex; gap: var(--e10); flex-wrap: wrap; }
.acento {
  display: flex; flex-direction: column; align-items: center; gap: var(--e6);
  padding: var(--e10); border-radius: var(--r-bloco);
  border: 1px solid var(--contorno); background: var(--cartao);
  min-width: 82px; flex: 1;
}
.acento:hover { background: var(--linha-lista); }
.acento[aria-pressed="true"] { border-color: var(--azul-primario); background: var(--linha-foco); }
.acento__disco {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--contorno);
}
/* Uma classe por amostra em vez de `style="background:var(--amostra-${x})"` na
   view: `var()` montado dentro de template literal escapa do `conferir:css`, que
   so enxerga o nome escrito por inteiro. Token que o harness nao ve e' token que
   pode ser renomeado sem ninguem perceber — e o sintoma seria quatro discos
   transparentes no seletor, sem erro nenhum no console. */
.acento__disco--azul  { background: var(--amostra-azul); }
.acento__disco--roxo  { background: var(--amostra-roxo); }
.acento__disco--rosa  { background: var(--amostra-rosa); }
.acento__disco--verde { background: var(--amostra-verde); }
.acento__nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.acento[aria-pressed="true"] .acento__nome { color: var(--azul-primario); }

/* Abas de conteudo (atendimento) — pilula azul-clara */
.abas { display: flex; gap: 7px; }
.abas__item { padding: 8px var(--e16); border-radius: 18px; font-size: 14px; color: var(--texto-apoio); white-space: nowrap; }
.abas__item[aria-selected="true"] { background: var(--info-fundo); color: var(--azul-primario); font-weight: 600; }

/* --------------------------------------------------------------------------
   4.5 Chips e etiquetas
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 12px;
  white-space: nowrap;
}
.chip--p  { font-size: 11px; padding: 3px 9px; border-radius: 11px; text-transform: uppercase; letter-spacing: .05em; }
.chip--g  { font-size: 13px; padding: 5px 12px; border-radius: 13px; }

.chip--ok      { background: var(--ok-fundo);      color: var(--ok-texto); }
.chip--atencao { background: var(--atencao-fundo); color: var(--atencao-texto); }
.chip--critico { background: var(--critico-fundo); color: var(--critico-texto); }
.chip--info    { background: var(--info-fundo);    color: var(--info-texto); }
.chip--neutro  { background: var(--neutro-fundo);  color: var(--neutro-texto); }

/* Etiqueta removivel: sufixo ✕ colado ao texto */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; background: var(--info-fundo); color: var(--info-texto); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 13px; }
.etiqueta--ok { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta__x { cursor: pointer; opacity: .8; }
.etiqueta__x:hover { opacity: 1; }

.etiqueta--add {
  background: var(--cartao); border: 1px dashed var(--cinza-tracejado);
  color: var(--azul-primario); font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 13px;
}

/* Filtro selecionavel: altura 34, ponto de 7px, contagem em mono */
.filtro {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 var(--e14); border-radius: 17px;
  background: var(--cartao); border: 1px solid var(--contorno);
  color: var(--texto-corrente); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.filtro__ponto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.filtro__total { font-family: var(--mono); }
.filtro[aria-pressed="true"] { background: var(--azul-primario); border-color: var(--azul-primario); color: var(--sobre-acento); }

/* --------------------------------------------------------------------------
   Avatar e tile de icone — raio 12–13px, ou 50% para pessoas
   -------------------------------------------------------------------------- */

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--info-fundo); color: var(--info-texto);
  font-size: 13px; font-weight: 700;
}
.avatar--p  { width: 24px; height: 24px; font-size: 11px; }
.avatar--g  { width: 50px; height: 50px; border-radius: 18px; font-size: 17px; }
.avatar--gg { width: 56px; height: 56px; border-radius: 20px; font-size: 18px; }

.ponto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ponto--p { width: 7px; height: 7px; }
.ponto--g { width: 10px; height: 10px; }

/* --------------------------------------------------------------------------
   Estado visual — o CSS resolve a cor
   O servidor manda a CHAVE do estado ('ok', 'critico'…), nunca a cor. Foi assim
   que os hex sairam das rotas: `background:#168821` escrito a mao nao escurece
   com o tema, e ja existiam duas listas de cor que tinham divergido.
   -------------------------------------------------------------------------- */

.ponto--ok      { background: var(--ok-cheia); }
.ponto--atencao { background: var(--atencao-cheia); }
.ponto--critico { background: var(--critico-cheia); }
.ponto--info    { background: var(--info-cheia); }
.ponto--neutro  { background: var(--neutro-cheia); }
/* 'trilha' nao e estado: e a fatia de fundo da rosca, que a legenda repete. */
.ponto--trilha  { background: var(--trilha); }

.barra__preenche--ok      { background: var(--ok-cheia); }
.barra__preenche--atencao { background: var(--atencao-cheia); }
.barra__preenche--critico { background: var(--critico-cheia); }
.barra__preenche--info    { background: var(--info-cheia); }
.barra__preenche--neutro  { background: var(--neutro-cheia); }

/* Series de grafico (secao 1.5 dos tokens) */
.barra__preenche--serie-1 { background: var(--serie-1); }
.barra__preenche--serie-2 { background: var(--serie-2); }
.barra__preenche--serie-3 { background: var(--serie-3); }
.barra__preenche--serie-4 { background: var(--serie-4); }
.barra__preenche--serie-5 { background: var(--serie-5); }
.barra__preenche--serie-6 { background: var(--serie-6); }

/* --------------------------------------------------------------------------
   5. Menu lateral
   -------------------------------------------------------------------------- */

.rail { width: var(--menu-rail); flex-shrink: 0; }

.menu {
  position: absolute; left: var(--e16); top: var(--e16); bottom: var(--e16);
  z-index: 5;
  width: var(--menu-fechado);
  display: flex; flex-direction: column;
  padding: var(--e26) var(--e8);
  background: var(--azul-escuro);
  border-radius: var(--r-menu);
  overflow: hidden;
  transition: var(--menu-transicao);
}
.menu:hover, .menu--aberto { width: var(--menu-aberto); box-shadow: var(--s-menu); }


.menu__marca { display: flex; align-items: center; gap: var(--e16); padding: 0 5px var(--e26); color: var(--sobre-forte); white-space: nowrap; }
/* A marca e o proprio vitral: sem quadrado de fundo, para as frestas entre os
   paineis deixarem o azul do menu passar — e a leitura de vidro. */
.menu__logo { width: 36px; height: 36px; flex-shrink: 0; }
.vitral { width: 100%; height: 100%; display: block; }
.menu__nome { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.menu__itens {
  display: flex; flex-direction: column; gap: var(--e4);
  /* `min-height: 0` e o que permite um filho de flex encolher abaixo do
     conteudo dele. Sem essa linha o `overflow-y` nao tem o que rolar: a caixa
     cresce junto com a lista e o corte volta a acontecer no pai. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* A BARRA NAO APARECE, nem aberto nem fechado. Num menu de 72px ela come
     metade do icone, e mesmo aberto ela e um tracinho claro sobre azul escuro
     que nao pertence ao desenho. A rolagem continua: roda do mouse, arrasto no
     touch e as setas do teclado. Os dois mecanismos ficam declarados porque
     `scrollbar-width` nao vale em todo navegador — e misturar um ativo com o
     outro ativo foi o que fez a barra reaparecer. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.menu__itens::-webkit-scrollbar { width: 0; height: 0; }
.menu__item {
  display: flex; align-items: center; gap: var(--e16);
  padding: var(--e12) 13px; border-radius: 26px;
  color: var(--sobre-escuro-forte); font-size: 16px; white-space: nowrap;
  width: 100%; text-align: left;
}
.menu__item:hover { background: var(--sobre-veu-1); }
.menu__item[aria-current="page"] { background: var(--azul-primario); color: var(--sobre-acento); font-weight: 600; }
.menu__item[aria-current="page"]:hover { background: var(--azul-primario); }
.menu__icone { width: 19px; height: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

/* `flex-shrink: 0` e a linha que importa aqui: e ela que impede o pe de ser
   espremido ou empurrado para fora quando entra mais um painel no menu. O
   `margin-top: auto` continua, para o pe ficar embaixo quando sobra espaco. */
.menu__pe {
  margin-top: auto; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--e6); white-space: nowrap;
  padding-top: var(--e8);
}
.menu__pe-item { display: flex; align-items: center; gap: var(--e16); padding: var(--e12) 5px; width: 100%; text-align: left; }
.menu__tile {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-tile);
  background: var(--sobre-veu-2); color: var(--sobre-escuro);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.menu__rotulo-alto { font-size: 11px; color: var(--sobre-escuro-fraco); letter-spacing: .09em; text-transform: uppercase; font-weight: 600; }
.menu__linha1 { font-size: 14px; font-weight: 600; color: var(--sobre-forte); margin-top: 2px; }
.menu__linha2 { font-size: 13px; color: var(--sobre-escuro-fraco); }

/* Rotulos escondidos com o menu fechado — sem texto cortado */
.menu__texto { display: none; min-width: 0; }
.menu:hover .menu__texto, .menu--aberto .menu__texto { display: block; }

/* --------------------------------------------------------------------------
   6. Listas e tabelas
   -------------------------------------------------------------------------- */

.tabela__cabeca {
  display: grid; padding: 0 var(--e22) var(--e8);
  font-size: 12px; font-weight: 600; color: var(--texto-apoio);
  letter-spacing: .07em; text-transform: uppercase;
}
.tabela__linha {
  display: grid; align-items: center;
  padding: var(--e10); border-radius: var(--r-linha);
  background: var(--linha-lista);
  text-align: left; width: 100%;
}
.tabela__linha:hover { background: var(--trilha); }
.tabela__linha--foco, .tabela__linha--foco:hover { background: var(--linha-foco); }

.item-lista {
  display: flex; align-items: center; gap: var(--e12);
  padding: var(--e10) var(--e12); border-radius: var(--r-linha-p);
  background: var(--linha-lista); width: 100%; text-align: left;
}
.item-lista:hover { background: var(--trilha); }
/* Uma linha de foco por lista, como no resto do sistema. */
.item-lista--foco { background: var(--linha-foco); }
/* A LINHA QUE E UM BOTAO. `.item-lista` ja vale para <button> (width e
   text-align estao la); o que o botao traz de errado e a borda, a fonte do
   sistema operacional e o cursor de texto. */
.item-lista--clicavel { border: 0; cursor: pointer; font: inherit; color: inherit; }

/* Estado vazio — frase do que aparece ali + acao (secao 8) */
.vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e12); padding: var(--e32) var(--e20); text-align: center; }
.vazio__texto { font-size: 14px; color: var(--texto-apoio); max-width: 34ch; line-height: 1.6; }

/* --------------------------------------------------------------------------
   7. Graficos
   -------------------------------------------------------------------------- */

.legenda { display: flex; gap: var(--e14); }
.legenda__item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-apoio); white-space: nowrap; }
.legenda__traco { width: 10px; height: 3px; border-radius: 2px; }

/* Barras horizontais: trilha --trilha de 8px */
.barra { height: 8px; background: var(--trilha); border-radius: 4px; margin-top: var(--e6); overflow: hidden; }
.barra__preenche { height: 100%; border-radius: 4px; }
.barra--fina { height: 5px; border-radius: 3px; margin-top: 5px; }
.barra--carga { height: 4px; border-radius: 2px; margin-top: 9px; }

/* Barras verticais */
.colunas { display: flex; align-items: flex-end; justify-content: space-around; gap: var(--e10); min-height: 120px; }
.colunas__item { flex: 1; max-width: 72px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.colunas__barra { width: 100%; border-radius: 8px 8px 4px 4px; min-height: 6px; }
.colunas__barra--i1 { background: var(--int-frio); }
.colunas__barra--i2 { background: var(--int-azul-2); }
.colunas__barra--i3 { background: var(--int-azul-3); }
.colunas__barra--i4 { background: var(--int-azul-4); }
.colunas__valor, .colunas__rotulo { font-family: var(--mono); font-size: 12px; color: var(--texto-apoio); }

/* Rosca: viewBox 42x42, traco 6, rotacao -90 */
.rosca { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.rosca svg { transform: rotate(-90deg); }
.rosca__centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* `stroke` como atributo do SVG nao aceita var(); por classe, aceita — e a cor
   da fatia volta a sair do mesmo token que pinta o ponto da legenda. */
.rosca__anel          { stroke: var(--trilha); }
.rosca__anel--ok      { stroke: var(--ok-cheia); }
.rosca__anel--atencao { stroke: var(--atencao-cheia); }
.rosca__anel--critico { stroke: var(--critico-cheia); }
.rosca__anel--info    { stroke: var(--info-cheia); }
.rosca__anel--neutro  { stroke: var(--neutro-cheia); }

/* Faisca do KPI de tarefas */
.faisca { display: flex; align-items: flex-end; gap: 3px; height: 40px; flex-shrink: 0; }
.faisca__barra { width: 6px; border-radius: 3px; }
.faisca__barra--azul-1 { background: var(--int-azul-1); }
.faisca__barra--azul-2 { background: var(--int-azul-2); }
.faisca__barra--azul-3 { background: var(--int-azul-3); }
.faisca__barra--vermelho-1 { background: var(--int-vermelho-1); }
.faisca__barra--vermelho-2 { background: var(--int-vermelho-2); }
.faisca__barra--vermelho-3 { background: var(--int-vermelho-3); }
.faisca__barra--verde-1 { background: var(--int-verde-1); }
.faisca__barra--verde-2 { background: var(--int-verde-2); }
.faisca__barra--verde-3 { background: var(--int-verde-3); }
.faisca__barra--amarelo-1 { background: var(--int-amarelo-1); }
.faisca__barra--amarelo-2 { background: var(--int-amarelo-2); }
.faisca__barra--amarelo-3 { background: var(--int-amarelo-3); }

/* --------------------------------------------------------------------------
   4.6 Cartao de kanban
   -------------------------------------------------------------------------- */

/* SEIS COLUNAS desde que "Cancelado" deixou de ser uma flag em "Concluído".
   `auto-fit` com um mínimo, e não um número fixo: o quadro da rede e o da
   unidade têm as mesmas seis, mas fixar 6 faria cada coluna ficar com 190px
   num monitor de 1366 — e cartão de 190px corta o título em três linhas. */
.kanban {
  flex: 1; display: grid; gap: var(--e14); min-height: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.kanban__coluna { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.kanban__cabeca { padding: var(--e16) var(--e16) var(--e12); }
.kanban__corpo { flex: 1; min-height: 0; padding: 0 var(--e10) var(--e10); display: flex; flex-direction: column; gap: var(--e8); position: relative; }

.tarefa {
  background: var(--linha-lista); border: 1px solid var(--contorno);
  border-radius: var(--r-kanban); padding: var(--e12) 13px;
  width: 100%; text-align: left; display: block;
}
.tarefa:hover { filter: brightness(.985); }
.tarefa--atencao { background: var(--sup-atencao);   border-color: var(--borda-atencao); }
.tarefa--info    { background: var(--sup-andamento); border-color: var(--borda-andamento); }
.tarefa--critico { background: var(--sup-critico);   border-color: var(--borda-critico); }
/* 'ok' e 'neutro' herdam a superficie padrao da .tarefa — declarados para que
   a lista de estados visuais fique completa e ninguem procure o que falta. */
.tarefa--ok      { }
.tarefa--neutro  { }
.tarefa__codigo { font-family: var(--mono); font-size: 12px; color: var(--azul-primario); }
.tarefa__titulo { font-size: 14px; font-weight: 600; color: var(--texto); margin-top: 7px; line-height: 1.35; text-wrap: pretty; }
.tarefa__categoria { font-size: 12px; color: var(--texto-apoio); margin-top: var(--e4); }
.tarefa__prazo { font-family: var(--mono); font-size: 12px; white-space: nowrap; flex-shrink: 0; }

.alvo-mover {
  border: 1px dashed var(--cinza-tracejado); border-radius: var(--r-kanban);
  padding: 11px; text-align: center; font-size: 13px; font-weight: 600; color: var(--azul-primario);
  width: 100%;
}
.alvo-mover--ativo { background: var(--linha-foco); border-color: var(--azul-primario); }

/* --------------------------------------------------------------------------
   4.2 Modais — largo no desktop, cabeca e rodape fixos, so o corpo rola
   -------------------------------------------------------------------------- */

.veu-modal {
  position: fixed; inset: 0; z-index: 40;
  background: var(--veu-modal);
  display: flex; align-items: center; justify-content: center;
  /* 28px, e nao 48: a moldura do veu era 96px de altura que o formulario nao
     tinha. Num modal de dezoito campos isso e um terco da rolagem, gasto em
     espaco vazio em volta. */
  padding: 28px;
}
.modal {
  width: 880px; max-width: calc(100% - 56px); max-height: calc(100% - 56px);
  display: flex; flex-direction: column;
  background: var(--cartao); border-radius: var(--r-cartao); box-shadow: var(--s-modal);
  overflow: hidden;
}
.modal--form  { width: 720px; }
/* A MAIS LARGA DO SISTEMA. O nome veio da primeira tela que precisou dela,
   mas o que a classe define e LARGURA, nao conteudo: serve para tabela e para
   instrumento longo. Criar uma segunda classe com os mesmos 1120px seria duas
   medidas para manter, e uma delas ia divergir. */
.modal--tabela{ width: 1120px; }
/* Ficha de trabalho: a mesma leitura do `form`, mas com um rodape de ACOES.
   `form` cabe tres botoes; uma ficha que decide o destino de alguem tem cinco —
   liberar, nao localizado, finalizar, fechar e o destrutivo — e a 720px o
   primeiro saia cortado pela borda esquerda. */
.modal--ficha { width: 880px; }
/* A MENOR. Para o modal que so BIFURCA: duas ou tres saidas, sem formulario e
   sem lista. A 880px, dois botoes empilhados ficam perdidos num campo de
   branco, e o que era uma escolha simples parece uma tela inacabada. */
.modal--curta { width: 420px; }

/* O rodape QUEBRA em vez de cortar.
   `justify-content: flex-end` com `flex-wrap` empurra a linha de cima para a
   direita e a de baixo tambem: em tela estreita os botoes descem, e nenhum
   desaparece. Sem isto o overflow some com o botao e nao ha o que clicar. */
.modal__pe { flex-wrap: wrap; row-gap: var(--e8); }

/* Cabeca e pe cedem altura ao corpo. Sao molduras: o que se le e o que se
   preenche esta no meio, e 8px a mais em cada ponta viravam uma linha de campo
   escondida abaixo da dobra. */
.modal__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e20); padding: var(--e20) 28px 14px; flex-shrink: 0; }
.modal__titulo { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.modal__apoio  { font-size: 14px; color: var(--texto-apoio); margin-top: 2px; }
.modal__fechar { width: 36px; height: 36px; border-radius: 50%; background: var(--secundario); color: var(--texto-corrente); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
/* `gap: e10` e nao `e12`: num formulario de doze campos a diferenca sao 24px
   de rolagem, e o respiro entre campos ja vem da altura de cada um. */
.modal__corpo  { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e12) 28px var(--e16); display: flex; flex-direction: column; gap: var(--e10); }
/* Lista com teto de altura dentro do corpo do modal — 4.3.
   O corpo do modal e' flex-column e ja rola sozinho, entao um filho com
   `max-height` encolhe ate caber no que sobrou: a lista de itens do lote, com
   360px de teto e 1088px de conteudo, renderizava 45px de altura — uma faixa em
   que nao dava para ler um campo inteiro. `flex-shrink: 0` faz o teto valer, e
   o que passar disso rola no corpo, como em qualquer formulario longo. */
.modal__corpo > .coluna.rolavel { flex-shrink: 0; }

.modal__pe     { display: flex; align-items: center; justify-content: flex-end; gap: var(--e10); padding: var(--e16) 28px var(--e20); flex-shrink: 0; }
.modal__pe .modal__destrutivo { margin-right: auto; }

/* Formulario longo dentro do modal — 4.3.
   Um cadastro de doze campos empilhados vira uma rolagem em que ninguem sabe
   onde esta. O titulo de secao divide o assunto e o par poe lado a lado o que
   se le junto (tipo + especialidade, CID + data). */
.form-secao {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-apoio); margin-top: var(--e8);
}
.form-secao:first-child { margin-top: 0; }

/* Nao ha `.form-par`: `.grade-2`, mais abaixo, ja fazia exatamente isso e ja
   era usada em seis telas. Duas classes para a mesma grade e como uma delas
   comeca a divergir da outra. */

/* A grade quebra em uma coluna quando nao cabe — em tela estreita dois campos
   lado a lado ficam menores que o proprio rotulo. */
@media (max-width: 720px) {
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
}

/* minmax(0,1fr): sem isso um input[type=date] impoe sua largura minima e
   estoura a coluna, criando rolagem horizontal no formulario. */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e12); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e10); }
.campo, .campo__valor { min-width: 0; max-width: 100%; }

/* Aviso curto no topo da tela (sem emoji, sem cor sozinha) */
.aviso {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: var(--e10);
  padding: 12px 20px; border-radius: 22px;
  background: var(--azul-escuro); color: var(--sobre-forte);
  font-size: 14px; font-weight: 600; box-shadow: var(--s-modal);
}
.aviso--erro { background: var(--critico-texto); }

/* --------------------------------------------------------------------------
   O sino — o ponto que conta

   Ele mora sobre o icone do rodape do menu. A cor vem da GRAVIDADE mais alta
   do que espera: um badge cinza nao distingue "tres elogios" de "tres chamados
   vencidos", e um badge que nao distingue e' um badge que se ignora.
   -------------------------------------------------------------------------- */
.menu__tile--sino { position: relative; }
.sino__ponto {
  position: absolute; top: -4px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--sobre-acento); background: var(--info-cheia);
  /* A borda e' da COR DO MENU, nao branca: ela recorta o ponto do icone atras
     dele. Branca funcionaria so' enquanto o menu fosse escuro. */
  border: 2px solid var(--azul-escuro);
}
.sino__ponto--atencao { background: var(--atencao-cheia); color: var(--sobre-atencao); }
.sino__ponto--critico { background: var(--critico-cheia); color: var(--sobre-critico); }

/* A notificacao ja lida fica na lista, apagada: ela some do CONTADOR, nao da
   caixa — quem procura "o que era mesmo aquele recado" precisa achar. */
.nt--lida { opacity: .55; }

/* --------------------------------------------------------------------------
   Mapa esquematico da rede (padrao 072)
   Sem biblioteca e sem tile externo: o painel precisa continuar de pe quando a
   internet cai, e e' justamente nesse dia que alguem abre o mapa da rede.
   Nenhuma cor aqui e' nova — todas saem de 01-tokens.css.
   -------------------------------------------------------------------------- */
/* O `z-index: 0` NÃO É DECORAÇÃO — ele é o que prende o Leaflet dentro do
   cartão. A biblioteca empilha as próprias camadas alto por conta própria: os
   painéis do mapa em 400 e os controles de zoom em 1000. Sem um contexto de
   empilhamento aqui, esses números competem direto com o resto da página — e o
   menu lateral, que é 5, perde. O resultado era o mapa passando POR CIMA do
   menu aberto, com o +/- flutuando sobre os itens.
   `position: relative` sozinho não bastava: sem um `z-index` numérico no mesmo
   elemento, o contexto não nasce. */
.mapa            { position: relative; z-index: 0; background: var(--linha-lista); border-radius: var(--r-bloco); overflow: hidden; }
.mapa--vazio     { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--e20); }
.mapa__tela      { width: 100%; height: 100%; display: block; }
.mapa__grade     { stroke: var(--contorno); stroke-width: .3; }

/* O halo da' area de clique e separa o ponto do fundo sem precisar de sombra
   colorida, que a secao 9 do guia proibe. */
.mapa__ponto            { cursor: pointer; }
.mapa__halo             { fill: var(--cartao); opacity: .9; }
.mapa__disco            { fill: var(--neutro-cheia); }
.mapa__ponto--ok      .mapa__disco { fill: var(--ok-cheia); }
.mapa__ponto--atencao .mapa__disco { fill: var(--atencao-cheia); }
.mapa__ponto--critico .mapa__disco { fill: var(--critico-cheia); }
.mapa__ponto--info    .mapa__disco { fill: var(--info-cheia); }
.mapa__ponto--neutro  .mapa__disco { fill: var(--neutro-cheia); }
.mapa__ponto:hover .mapa__halo,
.mapa__ponto:focus-visible .mapa__halo { opacity: 1; stroke: var(--azul-primario); stroke-width: .6; }
.mapa__ponto:focus     { outline: none; }

/* 3.2px no viewBox de 100 dao ~11px na altura padrao de 360 — acima do minimo
   de 11px da secao 9. A escala do SVG e' uniforme, entao o texto acompanha. */
/* O NUMERO DENTRO DO PINO DO MAPA.
   Era `fill: var(--cartao)` — branco, por tabela. Funcionava por acidente em
   quatro dos cinco estados e falhava no quinto: sobre o amarelo de "Atencao" o
   numero ficava em 1,5:1, que e' um numero que nao esta la. O amarelo e a unica
   cor cheia da paleta que pede tinta ESCURA, e e' por isso que `--sobre-atencao`
   existe separado dos outros. */
.mapa__valor     { fill: var(--sobre-neutro); font-family: var(--mono); font-size: 2.6px; font-weight: 600; }
.mapa__ponto--atencao .mapa__valor { fill: var(--sobre-atencao); }
.mapa__rotulo    { fill: var(--texto-corrente); font-family: var(--fonte); font-size: 3.2px; }
.mapa__regua path,
.mapa__norte path { stroke: var(--texto-apoio); stroke-width: .4; fill: none; stroke-linecap: round; }
.mapa__regua text,
.mapa__norte text { fill: var(--texto-apoio); font-family: var(--fonte); font-size: 3px; }
.mapa__fora      { position: absolute; left: var(--e12); right: var(--e12); bottom: var(--e8); margin: 0; }

/* ---- O mapa de ruas (Leaflet) -------------------------------------------
   O pino e o rótulo usam os MESMOS tokens do esquema: a cor continua dizendo
   tempo de espera, e não outra coisa, quando a tela troca de modo. */
.mapa--ruas       { height: 100%; }
.leaflet-container { font-family: var(--fonte); background: var(--linha-lista); }
.mapa-pino__caixa  { background: none; border: 0; }
.mapa-pino        { display: flex; align-items: center; justify-content: center;
                    width: 24px; height: 24px; border-radius: 50%;
                    border: 2px solid var(--cartao); box-shadow: var(--s-cartao);
                    color: var(--sobre-neutro); font-family: var(--mono); font-size: 11px;
                    font-weight: 600; cursor: pointer; background: var(--neutro-cheia); }
.mapa-pino--ok      { background: var(--ok-cheia); }
.mapa-pino--atencao { background: var(--atencao-cheia); }
.mapa-pino--critico { background: var(--critico-cheia); }
.mapa-pino--info    { background: var(--info-cheia); }
.mapa-pino--neutro  { background: var(--neutro-cheia); }
.mapa-pino:hover, .mapa-pino:focus-visible { outline: 2px solid var(--azul-primario);
                                             outline-offset: 2px; }
.leaflet-tooltip.mapa-nome { background: var(--cartao); color: var(--texto-corrente);
                             border: 1px solid var(--contorno); border-radius: var(--r-linha-p);
                             box-shadow: none; font-size: 11px; padding: 2px 6px; }
.leaflet-tooltip.mapa-nome::before { display: none; }

/* --------------------------------------------------------------------------
   Matriz de acesso (padrao 072) — papeis x areas
   Cabecalho e primeira coluna GRUDAM na rolagem: uma matriz de 9x24 rolada
   para a direita vira um campo de chips sem nome de linha nem de coluna, e
   quem esta lendo perde os dois eixos ao mesmo tempo.
   -------------------------------------------------------------------------- */
.matriz                { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.matriz th, .matriz td { padding: var(--e8) var(--e10); text-align: left; vertical-align: middle; }
.matriz thead th       { position: sticky; top: 0; z-index: 2; background: var(--cartao); border-bottom: 1px solid var(--contorno); }
/* O rotulo da coluna deitado: 24 areas lado a lado nao cabem na horizontal, e
   abreviar o nome da area e' o comeco de alguem ligar a permissao errada. */
.matriz thead th span  { display: block; writing-mode: vertical-rl; transform: rotate(180deg);
                         font-size: 12px; color: var(--texto-apoio); white-space: nowrap;
                         max-height: 140px; }
.matriz__canto         { position: sticky; left: 0; z-index: 3; min-width: 190px; }
.matriz__lado          { position: sticky; left: 0; z-index: 1; background: var(--cartao);
                         min-width: 190px; border-right: 1px solid var(--contorno); }
.matriz tbody tr:nth-child(even) .matriz__lado,
.matriz tbody tr:nth-child(even) td { background: var(--linha-lista); }
.matriz td             { text-align: center; }

/* Rolagem horizontal presa ao bloco, e não à página.
   Tabela larga — a comparação de unidades tem oito colunas — não pode empurrar
   o corpo da tela para o lado: quem rola a página inteira perde o menu e o
   cabeçalho de vista. O bloco rola dentro de si e o resto fica parado. */
.rolavel-x { overflow-x: auto; flex-shrink: 0; }
/* O `flex-shrink: 0` não é firula. Dentro de um container flex em coluna — e
   `.modal__corpo` é um —, um item com `overflow` vira caixa de rolagem e passa
   a poder encolher até o tamanho do container. A tabela de 402px aparecia com
   75, mostrando uma linha e meia atrás de uma barra de rolagem. O item guarda a
   própria altura; quem rola é o corpo do modal, que é para isso que ele serve. */

/* O "x" QUE DISPENSA O AVISO.
   Discreto de propósito: ele fica à direita da ação, e não ao lado do título —
   a primeira coisa que a pessoa lê tem de ser o problema, nunca o botão de
   fazê-lo sumir. Cresce no hover para ser alcançável sem ser convidativo. */
.atencao__dispensar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: transparent; color: var(--texto-apoio);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.atencao__dispensar:hover { background: var(--secundario); color: var(--texto); }
.atencao__dispensar:focus-visible { outline: 2px solid var(--anel-foco); outline-offset: 2px; }

/* A linha de quem foi dispensado: existe para o aviso nao sumir sem rastro. */
.atencao__ocultos {
  display: flex; align-items: center; gap: var(--e8);
  font-size: 12px; color: var(--texto-apoio);
  padding: var(--e6) var(--e4);
}
.atencao__mostrar {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--azul-primario);
  text-decoration: underline; text-underline-offset: 2px;
}

/* A dica do zoom: aparece quando alguem rola por cima do mapa sem Ctrl. */
.mapa__dica {
  position: absolute; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: var(--veu-dica); color: var(--sobre-forte);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  pointer-events: none;
}
/* O botao de reenquadrar: no canto do mapa, com a cara dos controles do Leaflet. */
.mapa__enquadrar {
  background: var(--cartao); color: var(--texto);
  border: 1px solid var(--contorno); border-radius: var(--r-linha-p);
  padding: var(--e6) var(--e10); font-size: 12px; font-weight: 600;
  cursor: pointer; box-shadow: var(--s-pino);
}
.mapa__enquadrar:hover { background: var(--secundario); }

/* CAMPO COM ERRO DE FORMATO.
   A borda muda E o texto aparece: cor sozinha nao serve para quem nao distingue
   vermelho, e tambem nao diz O QUE esta errado. */
.campo__valor--erro { border-color: var(--critico-cheia); }
.campo__erro {
  display: block; margin-top: var(--e4);
  font-size: 12px; color: var(--critico-texto);
}
/* A linha de apoio do campo: o que a busca automatica encontrou, ou a dica. */
.campo__apoio {
  display: block; margin-top: var(--e4);
  font-size: 12px; color: var(--texto-apoio);
}
.campo__apoio--ok      { color: var(--ok-texto); }
.campo__apoio--atencao { color: var(--atencao-texto); }

/* LISTA DE SUGESTAO — o autocomplete dos campos de catalogo.
   Ancorada no campo (que e `position: relative` pelo .campo), acima de tudo o
   que estiver na tela, e com teto: lista que passa de meia tela vira pagina.

   O NOME E `.autocompletar` E NAO `.sugestao` porque `.sugestao` ja e o cartao
   de risco da triagem, la em 04-telas.css — que carrega DEPOIS deste arquivo e
   ganharia a disputa. A lista herdaria `position: static` e desceria empurrando
   o formulario em vez de flutuar sobre ele. Dois blocos com o mesmo nome em
   camadas diferentes so quebram quando as duas telas existem ao mesmo tempo, e
   e por isso que o de uso geral cede o nome ao de uso especifico. */
.campo { position: relative; }
.autocompletar {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  margin-top: var(--e4); max-height: 264px; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--contorno);
  border-radius: var(--r-bloco); box-shadow: var(--s-flutuante);
}
.autocompletar__item {
  display: flex; align-items: baseline; gap: var(--e8);
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: var(--e8) var(--e12); cursor: pointer;
}
.autocompletar__item:hover, .autocompletar__item--foco { background: var(--secundario); }
.autocompletar__rotulo { font-size: 14px; color: var(--texto); }
.autocompletar__apoio  { font-size: 12px; color: var(--texto-apoio); }
.autocompletar__vazio  { padding: var(--e10) var(--e12); font-size: 12px; color: var(--texto-apoio); }