/* =====================================================================
   JPII :: Componentes
   ===================================================================== */

/* ---------------------------------------------------------------------
   BOTÕES
   Altura mínima de 38px (40px nas ações de balcão) para alvo de toque
   confortável. Sem sombra, sem gradiente: peso vem de cor e borda.
   --------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-cor: var(--tinta-700);
  --btn-borda: var(--linha);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 40px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--btn-borda);
  /* Pílula, como na Linha E (`--bs-btn-border-radius: 999px`). */
  border-radius: var(--raio-pill);
  background-color: var(--btn-bg);
  color: var(--btn-cor);
  font-family: var(--fonte-ui);
  /* O azo2 não mexe no tamanho do botão: fica no 1rem do Bootstrap. O
     nosso estava em 13px e parecia de outro sistema ao lado dele. Botão
     de linha de tabela continua no `.btn-sm`. */
  font-size: 1rem;
  font-weight: var(--peso-forte);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tempo-rapido) var(--curva),
              border-color var(--tempo-rapido) var(--curva),
              color var(--tempo-rapido) var(--curva);
}

/* Devolve todos os estados de interação aos tokens do JPII.
   ---------------------------------------------------------------------
   O Bootstrap declara .btn:hover, :focus, :active e .active apontando
   para variáveis --bs-btn-* que este projeto não define. Um var() sem
   fallback para propriedade inexistente invalida a declaração inteira,
   e background-color cai para o valor inicial — transparente. Como
   .btn:hover (0,2,0) tem especificidade maior que .btn (0,1,0), isso
   vencia independentemente da ordem dos arquivos: o botão ficava
   invisível ao passar o mouse, pior ainda nas variantes de texto branco.

   Os seletores abaixo espelham os que o Bootstrap reivindica, para que
   nenhum estado escape. A cor vem sempre das variáveis --btn-*, que as
   classes de variante redefinem. */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show,
.btn:disabled,
.btn.disabled,
:not(.btn-check) + .btn:active,
fieldset:disabled .btn {
  background-color: var(--btn-bg);
  color: var(--btn-cor);
  border-color: var(--btn-borda);
  text-decoration: none;
}

.btn:disabled,
.btn.is-desabilitado {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* As variantes declaram apenas tokens; quem pinta é a regra base acima.
   Nenhuma variante usa `color` ou `background` direto — se usasse, o
   estado de foco e o de ativo voltariam a divergir do de repouso. */

/* Primário: a ação que conclui a tarefa. Uma por tela. */
/* O preenchimento é o coral claro; o hover desce para o coral de
   texto e o ativo para o mais escuro. É a mesma sequência do azo2
   (`--azo-coral` → `--azo-coral-escuro` → #9A1C40). */
.btn-primario {
  --btn-bg: var(--marca-600);
  --btn-cor: #fff;
  --btn-borda: var(--marca-600);
  /* A sombra colorida é o que dá peso ao botão principal na Linha E. */
  box-shadow: var(--sombra-marca);
}
.btn-primario:hover,
.btn-primario:focus-visible {
  --btn-bg: var(--marca-700);
  --btn-borda: var(--marca-700);
}
.btn-primario:active { --btn-bg: var(--marca-800); --btn-borda: var(--marca-800); }

/* Acento: ação de destaque que não é a conclusão (aprovar, validar). */
.btn-acento {
  --btn-bg: var(--apoio-600);
  --btn-cor: #fff;
  --btn-borda: var(--apoio-600);
}
.btn-acento:hover,
.btn-acento:focus-visible {
  --btn-bg: var(--apoio-700);
  --btn-borda: var(--apoio-700);
}
.btn-acento:active { --btn-bg: var(--apoio-800); --btn-borda: var(--apoio-800); }

/* Neutro: ação secundária, a mais comum do sistema. */
.btn-neutro {
  --btn-bg: var(--papel-1);
  --btn-cor: var(--tinta-700);
  --btn-borda: var(--linha);
  /* `.btn-default` da Linha E também levanta do fundo. */
  box-shadow: var(--sombra-cartao);
}
.btn-neutro:hover,
.btn-neutro:focus-visible {
  --btn-bg: var(--papel-2);
  --btn-cor: var(--tinta-900);
  --btn-borda: var(--linha-forte);
}
.btn-neutro:active { --btn-bg: var(--papel-3); }

/* Discreto: ação terciária dentro de tabela e cabeçalho. */
.btn-discreto {
  --btn-bg: transparent;
  --btn-cor: var(--tinta-500);
  --btn-borda: transparent;
}
.btn-discreto:hover,
.btn-discreto:focus-visible {
  --btn-bg: var(--papel-2);
  --btn-cor: var(--tinta-900);
}
.btn-discreto:active { --btn-bg: var(--papel-3); }

/* Perigo: exclusão e rejeição. */
.btn-perigo {
  --btn-bg: var(--papel-1);
  --btn-cor: var(--erro-700);
  --btn-borda: color-mix(in srgb, var(--erro-700) 30%, transparent);
}
.btn-perigo:hover,
.btn-perigo:focus-visible {
  --btn-bg: var(--erro-100);
  --btn-borda: var(--erro-700);
}
/* Mistura com branco, nao com `transparent`: o resultado fica opaco e o
   contraste do rotulo nao depende do que houver atras do botao. */
.btn-perigo:active { --btn-bg: color-mix(in srgb, var(--erro-700) 16%, white); }

/* O azo2 abre exceção para o botão pequeno (`.btn-xs { 10px }`): em
   rótulo de duas linhas a pílula vira cápsula e fica estranha. */
.btn-sm { min-height: 32px; padding: var(--e-1) var(--e-3); font-size: var(--txt-xs); border-radius: 10px; }
.btn-sm svg { width: 14px; height: 14px; }

.btn-lg { min-height: 48px; padding: var(--e-3) var(--e-6); font-size: 1.0625rem; }
.btn-lg svg { width: 18px; height: 18px; }

.btn-bloco { width: 100%; }

/* Botão só de ícone é círculo: em pílula com largura igual à altura dá
   no mesmo, e declarar 50% deixa a intenção explícita. */
.btn-icone { padding: var(--e-2); width: 36px; min-height: 36px; border-radius: 50%; }
.btn-icone.btn-sm { width: 30px; min-height: 30px; }

.grupo-botoes { display: inline-flex; gap: var(--e-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   FORMULÁRIOS
   Rótulo sempre visível acima do campo. Placeholder nunca substitui
   rótulo — é o erro de acessibilidade mais comum em formulário moderno.
   --------------------------------------------------------------------- */

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

.campo-rotulo {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta-900);
}

.campo-obrigatorio::after {
  content: '*';
  margin-left: 3px;
  color: var(--erro-700);
  font-weight: var(--peso-forte);
}

.campo-ajuda {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  line-height: var(--altura-normal);
}

.campo-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--e-1);
  margin-top: var(--e-1);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  color: var(--erro-700);
}

.form-control,
.form-select,
.campo-entrada {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: var(--e-2) var(--e-3);
  /* 1,5px de borda e fundo levemente frio, como na Linha E.
     ATENÇÃO: `--linha-campo` é a cor do azo2 (#E4E8EE) e rende 1,23:1
     contra o branco — abaixo dos 3:1 da WCAG 1.4.11 para contorno de
     controle. Ficou assim por fidelidade ao azo2, que é o pedido; o
     token existe para que trocar por `--tinta-400` (3,10:1) seja uma
     linha só, em tokens.css, sem caçar ocorrência pelo CSS. */
  border: 1.5px solid var(--linha-campo);
  border-radius: var(--raio);
  background: var(--campo-fundo);
  color: var(--tinta-900);
  font-family: var(--fonte-ui);
  font-size: var(--txt-base);
  line-height: 1.4;
  transition: border-color var(--tempo-rapido) var(--curva);
}

.form-control::placeholder { color: var(--tinta-500); }

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: var(--tinta-400); }

/* Em foco o campo fica branco, como na Linha E: o contraste com o
   repouso ajuda a achar onde se está digitando. */
.form-control:focus,
.form-select:focus {
  border-color: var(--marca-600);
  background: var(--papel-1);
  box-shadow: var(--foco-anel);
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background: var(--papel-2);
  color: var(--tinta-500);
  cursor: not-allowed;
}

.form-control.is-erro,
.form-select.is-erro { border-color: var(--erro-500); }

.form-control.num,
.campo-valor {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

textarea.form-control { min-height: 96px; resize: vertical; line-height: var(--altura-normal); }

.form-select {
  appearance: none;
  padding-right: var(--e-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2354625E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-3) center;
  background-size: 15px;
}

/* Campo com prefixo fixo, usado em valores em reais */
.campo-com-prefixo { display: flex; }

.campo-prefixo {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding-inline: var(--e-2);
  border: 1px solid var(--linha-forte);
  border-right: 0;
  border-radius: var(--raio) 0 0 var(--raio);
  background: var(--papel-2);
  color: var(--tinta-500);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
}

.campo-com-prefixo .form-control { border-radius: 0 var(--raio) var(--raio) 0; }

/* Caixa de seleção e opção */
.opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  min-height: 32px;
  padding: var(--e-1) 0;
  cursor: pointer;
}

.opcao input[type="checkbox"],
.opcao input[type="radio"] {
  width: 17px; height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--marca-700);
  cursor: pointer;
}

.opcao-texto { font-size: var(--txt-sm); line-height: var(--altura-normal); }
.opcao-titulo { font-weight: var(--peso-medio); color: var(--tinta-900); display: block; }
.opcao-nota { font-size: var(--txt-xs); color: var(--tinta-500); display: block; }

/* Cartão de opção: escolha entre alternativas com explicação */
.opcao-cartao {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-1);
  cursor: pointer;
  transition: border-color var(--tempo-rapido) var(--curva), background var(--tempo-rapido) var(--curva);
}

.opcao-cartao:hover { border-color: var(--tinta-400); background: var(--papel-2); }

.opcao-cartao:has(input:checked) {
  border-color: var(--marca-600);
  background: var(--marca-050);
  box-shadow: inset var(--fita-largura) 0 0 var(--marca-700);
}

/* Blocos de formulário separados por régua, com rótulo de seção */
.bloco-form + .bloco-form {
  margin-top: var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid var(--linha);
}

.bloco-form-titulo { margin-bottom: var(--e-4); }
.bloco-form-titulo h3 { font-size: var(--txt-base); font-family: var(--fonte-ui); font-weight: var(--peso-forte); }
.bloco-form-titulo p { margin: 2px 0 0; font-size: var(--txt-sm); color: var(--tinta-500); }

/* Grade de formulário: 12 colunas.
   ---------------------------------------------------------------------
   As classes se chamam .span-N, e não .col-N, porque o Bootstrap define
   .col-N globalmente como `width: N/12`. As duas regras se somavam: o
   campo ocupava N trilhas da grade e preenchia apenas N/12 delas — um
   .col-3 virava uma caixa de 0,75 trilha. Escopado em .grade-form para
   que nenhuma classe futura volte a colidir. */

.grade-form {
  display: grid;
  gap: 0 var(--e-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.grade-form > .span-1  { grid-column: span 1; }
.grade-form > .span-2  { grid-column: span 2; }
.grade-form > .span-3  { grid-column: span 3; }
.grade-form > .span-4  { grid-column: span 4; }
.grade-form > .span-5  { grid-column: span 5; }
.grade-form > .span-6  { grid-column: span 6; }
.grade-form > .span-7  { grid-column: span 7; }
.grade-form > .span-8  { grid-column: span 8; }
.grade-form > .span-9  { grid-column: span 9; }
.grade-form > .span-10 { grid-column: span 10; }
.grade-form > .span-11 { grid-column: span 11; }
.grade-form > .span-12 { grid-column: span 12; }

/* O campo preenche a trilha que lhe cabe, sempre. */
.grade-form > [class*="span-"] { min-width: 0; }

/* Tablet: o que era menos de meia largura passa a meia, e o que já era
   meia ou mais ocupa a linha inteira. Evita o campo de 1/12 ficar
   ilegível antes da quebra final. */
@media (max-width: 991.98px) {
  .grade-form > .span-1,
  .grade-form > .span-2,
  .grade-form > .span-3,
  .grade-form > .span-4,
  .grade-form > .span-5 { grid-column: span 6; }

  .grade-form > .span-7,
  .grade-form > .span-8,
  .grade-form > .span-9,
  .grade-form > .span-10,
  .grade-form > .span-11 { grid-column: span 12; }
}

@media (max-width: 575.98px) {
  .grade-form > [class*="span-"] { grid-column: span 12; }
}

/* Barra de ação fixa no rodapé do formulário */
.barra-acoes {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-5);
  padding: var(--e-3) var(--e-5);
  background: rgba(244, 246, 249, .94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
}

.barra-acoes-nota { margin-right: auto; font-size: var(--txt-sm); color: var(--tinta-500); }

/* ---------------------------------------------------------------------
   TABELAS
   Denso por padrão: o balcão e o comercial trabalham com muitas linhas.
   A fita de estado à esquerda dá o status sem gastar uma coluna.
   --------------------------------------------------------------------- */

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

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--txt-sm);
}

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--e-3) var(--e-4);
  /* A Linha E tirou a caixa alta e o fundo cinza do cabeçalho: ficou
     12,5px em 700, tinta fraca, sobre o branco do cartão, com só uma
     régua embaixo. Caixa alta em 11px com tracking era legível, mas
     pesava a tabela inteira e não é o que o grupo usa. */
  background: transparent;
  border-bottom: 1px solid var(--linha);
  font-size: 12.5px;
  font-weight: var(--peso-max);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-500);
  text-align: left;
  white-space: nowrap;
}

.tabela thead th.direita { text-align: right; }
.tabela thead th.centro { text-align: center; }

.tabela thead th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
}

.tabela thead th a:hover { color: var(--tinta-900); }
.tabela thead th .ordem-seta { opacity: .55; }
.tabela thead th.is-ordenado { color: var(--tinta-900); }
.tabela thead th.is-ordenado .ordem-seta { opacity: 1; color: var(--apoio-600); }

.tabela tbody td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
  color: var(--tinta-700);
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background var(--tempo-rapido) var(--curva); }
/* Coral translúcido no hover, como o azo2 faz em `--bs-table-hover-bg`.
   A 4,5% a linha destaca sem competir com a fita de estado à esquerda. */
.tabela tbody tr:hover { background: color-mix(in srgb, var(--marca-500) 4.5%, white); }

.tabela .celula-principal {
  color: var(--tinta-900);
  font-weight: var(--peso-medio);
}

.tabela .celula-sub {
  display: block;
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  font-weight: var(--peso-normal);
  margin-top: 1px;
}

.tabela .celula-acoes { text-align: right; white-space: nowrap; width: 1%; }

.tabela td.num, .tabela th.num { text-align: right; }

/* Fita de estado: 3px coloridos na borda esquerda da linha.
   Substitui a "bolinha de status" e é legível na visão periférica. */
.tabela tbody tr[data-estado] td:first-child { position: relative; padding-left: calc(var(--e-4) + var(--fita-largura)); }

.tabela tbody tr[data-estado] td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--fita-largura);
  background: var(--linha-forte);
}

tr[data-estado="ok"]       td:first-child::before,
tr[data-estado="vigente"]  td:first-child::before,
tr[data-estado="ativo"]    td:first-child::before,
tr[data-estado="apto"]     td:first-child::before { background: var(--ok-500); }

tr[data-estado="alerta"]   td:first-child::before,
tr[data-estado="pendente"] td:first-child::before,
tr[data-estado="aguardando_aprovacao"] td:first-child::before { background: var(--alerta-500); }

tr[data-estado="erro"]     td:first-child::before,
tr[data-estado="inapto"]   td:first-child::before,
tr[data-estado="inativo"]  td:first-child::before,
tr[data-estado="rejeitado"] td:first-child::before { background: var(--erro-500); }

tr[data-estado="futuro"]   td:first-child::before,
tr[data-estado="rascunho"] td:first-child::before { background: var(--info-500); }

tr[data-estado="encerrado"] td:first-child::before { background: var(--tinta-400); }
tr[data-estado="encerrado"] td { color: var(--tinta-500); }

/* ---------------------------------------------------------------------
   ETIQUETAS DE ESTADO
   --------------------------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px var(--e-2);
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}

.etiqueta-ok     { background: var(--ok-100);     color: var(--ok-700);     border-color: color-mix(in srgb, var(--ok-700) 20%, transparent); }
.etiqueta-alerta { background: var(--alerta-100); color: var(--alerta-700); border-color: color-mix(in srgb, var(--alerta-700) 20%, transparent); }
.etiqueta-erro   { background: var(--erro-100);   color: var(--erro-700);   border-color: color-mix(in srgb, var(--erro-700) 20%, transparent); }
.etiqueta-info   { background: var(--info-100);   color: var(--info-700);   border-color: color-mix(in srgb, var(--info-700) 20%, transparent); }
.etiqueta-neutra { background: var(--papel-2);    color: var(--tinta-500);  border-color: var(--linha); }
.etiqueta-acento { background: var(--apoio-100);   color: var(--apoio-700);   border-color: color-mix(in srgb, var(--apoio-700) 20%, transparent); }

.etiqueta-contagem {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--raio-pill);
  padding-inline: var(--e-2);
}

/* ---------------------------------------------------------------------
   INDICADORES DO PAINEL
   Número em serif grande. Sem ícone decorativo: o rótulo já diz o que é.
   --------------------------------------------------------------------- */

.indicador {
  position: relative;
  padding: var(--e-4) var(--e-5);
  background: var(--papel-1);
  border: 0;
  border-radius: var(--raio-xl);
  box-shadow: var(--elevacao);
  /* Coluna flex para a nota poder descer ate a base. A grade ja estica
     todos os cartoes da linha a mesma altura; sem isto o conteudo para
     onde acabou e as notas ficavam em alturas diferentes. */
  display: flex;
  flex-direction: column;
}

.indicador::before {
  content: '';
  position: absolute;
  left: 0; top: var(--e-4); bottom: var(--e-4);
  width: var(--fita-largura);
  border-radius: 0 var(--raio-xs) var(--raio-xs) 0;
  background: var(--linha-forte);
}

.indicador[data-tom="marca"]::before  { background: var(--marca-600); }
.indicador[data-tom="acento"]::before   { background: var(--apoio-500); }
.indicador[data-tom="ok"]::before     { background: var(--ok-500); }
.indicador[data-tom="alerta"]::before { background: var(--alerta-500); }
.indicador[data-tom="erro"]::before   { background: var(--erro-500); }

.indicador-rotulo {
  display: block;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-500);
  margin-bottom: var(--e-2);
  /* Duas linhas reservadas. Rotulo longo ("Tempo medio de consulta")
     quebra em telas estreitas e, sem altura reservada, empurra so o seu
     numero para baixo — os valores da linha deixam de se alinhar. */
  line-height: 1.3;
  min-height: 2.6em;
}

/* Número de destaque: 800 com tracking negativo, como o
   `.filtro-status-qtd` e o `.rg-titulo` da Linha E. */
.indicador-valor {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-2xl);
  font-weight: var(--peso-extra);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tinta-900);
  font-variant-numeric: tabular-nums;
}

.indicador-unidade {
  font-family: var(--fonte-ui);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta-500);
}

.indicador-nota {
  /* `auto` empurra a nota para a base do cartao, alinhando as notas de
     toda a linha. Cartao sem nota apenas deixa a base livre. */
  margin-top: auto;
  padding-top: var(--e-2);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

.variacao { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.variacao-sobe { color: var(--ok-700); }
.variacao-desce { color: var(--erro-700); }

/* Mini-barra de proporção, usada nos blocos de distribuição */
.barra-proporcao {
  display: flex;
  height: 6px;
  border-radius: var(--raio-pill);
  overflow: hidden;
  background: var(--papel-3);
  margin-top: var(--e-2);
}

.barra-proporcao span { display: block; height: 100%; }
.barra-fatia-1 { background: var(--marca-600); }
.barra-fatia-2 { background: var(--apoio-500); }
.barra-fatia-3 { background: var(--marca-300); }
.barra-fatia-4 { background: var(--linha-forte); }

/* Lista com barra proporcional — distribuição por categoria */
.lista-proporcao { display: flex; flex-direction: column; gap: var(--e-3); }

.lista-proporcao-item { display: grid; grid-template-columns: 1fr auto; gap: var(--e-1) var(--e-3); align-items: center; }
.lista-proporcao-nome { font-size: var(--txt-sm); color: var(--tinta-700); }
.lista-proporcao-valor { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: var(--txt-sm); color: var(--tinta-900); font-weight: 500; }

.lista-proporcao-trilha {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: var(--raio-pill);
  background: var(--papel-3);
  overflow: hidden;
}

.lista-proporcao-trilha i { display: block; height: 100%; background: var(--marca-600); border-radius: var(--raio-pill); }
.lista-proporcao-item[data-tom="acento"] .lista-proporcao-trilha i { background: var(--apoio-500); }
.lista-proporcao-item[data-tom="erro"] .lista-proporcao-trilha i { background: var(--erro-500); }
.lista-proporcao-item[data-tom="alerta"] .lista-proporcao-trilha i { background: var(--alerta-500); }

/* ---------------------------------------------------------------------
   AVISOS
   --------------------------------------------------------------------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linha);
  border-left-width: var(--fita-largura);
  border-radius: var(--raio);
  background: var(--papel-1);
  font-size: var(--txt-sm);
  line-height: var(--altura-normal);
}

.aviso + .aviso { margin-top: var(--e-2); }
.aviso svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.aviso-corpo { flex: 1; min-width: 0; }
.aviso-titulo { font-weight: var(--peso-forte); color: var(--tinta-900); display: block; margin-bottom: 2px; }

.aviso-sucesso    { border-left-color: var(--ok-500);     background: var(--ok-100);     color: var(--ok-700); }
.aviso-erro       { border-left-color: var(--erro-500);   background: var(--erro-100);   color: var(--erro-700); }
.aviso-atencao    { border-left-color: var(--alerta-500); background: var(--alerta-100); color: var(--alerta-700); }
.aviso-informacao { border-left-color: var(--info-500);   background: var(--info-100);   color: var(--info-700); }

.aviso-sucesso .aviso-titulo,
.aviso-erro .aviso-titulo,
.aviso-atencao .aviso-titulo,
.aviso-informacao .aviso-titulo { color: inherit; }

.aviso-fechar {
  border: 0; background: transparent; cursor: pointer;
  color: inherit; opacity: .6; padding: 0; line-height: 1;
}
.aviso-fechar:hover { opacity: 1; }

.pilha-avisos { margin-bottom: var(--e-5); }

/* ---------------------------------------------------------------------
   FILTROS
   --------------------------------------------------------------------- */

.barra-filtros {
  display: flex;
  align-items: flex-end;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha);
  background: var(--papel-2);
  border-radius: var(--raio-xl) var(--raio-xl) 0 0;
}

.filtro { display: flex; flex-direction: column; gap: var(--e-1); min-width: 150px; }
.filtro-busca { flex: 1; min-width: 240px; }
.filtro .rotulo { font-size: var(--txt-2xs); }
.barra-filtros .form-control,
.barra-filtros .form-select { min-height: 34px; font-size: var(--txt-sm); padding-block: var(--e-1); }

.campo-busca { position: relative; }
.campo-busca .form-control { padding-left: var(--e-8); }

.campo-busca svg {
  position: absolute;
  left: var(--e-3); top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--tinta-400); /* contraste: icone */
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   ESTADO VAZIO
   --------------------------------------------------------------------- */

.vazio {
  padding: var(--e-12) var(--e-6);
  text-align: center;
}

.vazio-simbolo {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto var(--e-4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--papel-2);
  color: var(--tinta-400); /* contraste: icone */
}

.vazio h3 { font-size: var(--txt-md); margin-bottom: var(--e-2); }
.vazio p { color: var(--tinta-500); font-size: var(--txt-sm); max-width: 46ch; margin: 0 auto var(--e-4); }

/* ---------------------------------------------------------------------
   PAGINAÇÃO
   --------------------------------------------------------------------- */

.paginacao { display: flex; align-items: center; gap: var(--e-1); }

.paginacao a, .paginacao span {
  display: grid;
  place-items: center;
  min-width: 32px; height: 32px;
  padding-inline: var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  color: var(--tinta-500);
  font-size: var(--txt-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.paginacao a:hover { background: var(--papel-1); border-color: var(--linha); color: var(--tinta-900); }

.paginacao .is-atual {
  background: var(--marca-600);
  border-color: var(--marca-600);
  color: #fff;
  font-weight: var(--peso-medio);
}

.paginacao .is-inativo { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------------
   MATRIZ DE PERMISSÕES
   A tela mais importante da fundação. Precisa caber muita informação e
   permitir marcar por linha, por coluna e por grupo.
   --------------------------------------------------------------------- */

.matriz { width: 100%; border-collapse: separate; border-spacing: 0; }

.matriz thead th {
  position: sticky; top: 0; z-index: 2;
  padding: var(--e-3) var(--e-2);
  background: var(--papel-2);
  border-bottom: 1px solid var(--linha-forte);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-500);
  text-align: center;
  width: 84px;
}

.matriz thead th:first-child { text-align: left; width: auto; padding-left: var(--e-5); }

.matriz-grupo td {
  padding: var(--e-3) var(--e-5);
  background: var(--marca-050);
  border-block: 1px solid var(--linha);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--marca-800);
}

.matriz tbody td {
  padding: var(--e-2);
  border-bottom: 1px solid var(--linha);
  text-align: center;
  vertical-align: middle;
}

.matriz tbody td:first-child { text-align: left; padding-left: var(--e-5); }
.matriz tbody tr:hover td { background: var(--papel-2); }

.matriz-permissao-nome { font-size: var(--txt-sm); font-weight: var(--peso-medio); color: var(--tinta-900); display: block; }
.matriz-permissao-desc { font-size: var(--txt-xs); color: var(--tinta-500); display: block; margin-top: 1px; }
.matriz-permissao-chave {
  font-family: var(--fonte-mono);
  font-size: var(--txt-2xs);
  color: var(--tinta-500);
  margin-left: var(--e-2);
}

.matriz input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--marca-700);
  cursor: pointer;
}

.matriz input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .35; }

.matriz-vazio { color: var(--tinta-500); font-size: var(--txt-xs); }

.matriz-atalhos {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: var(--e-3) var(--e-5);
  background: var(--papel-2);
  border-bottom: 1px solid var(--linha);
  font-size: var(--txt-sm);
}

/* ---------------------------------------------------------------------
   BALCÃO
   Resultado grande, legível a distância. Cor nunca é o único sinal:
   ícone, palavra e fita acompanham.
   --------------------------------------------------------------------- */

.balcao-resultado {
  position: relative;
  padding: var(--e-6);
  border: 1px solid var(--linha);
  border-left-width: 6px;
  border-radius: var(--raio-xl);
  background: var(--papel-1);
}

.balcao-resultado[data-estado="apto"]     { border-left-color: var(--ok-500);     background: var(--ok-100); }
.balcao-resultado[data-estado="inapto"]   { border-left-color: var(--erro-500);   background: var(--erro-100); }
.balcao-resultado[data-estado="pendente"] { border-left-color: var(--alerta-500); background: var(--alerta-100); }

.balcao-estado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-3xl);
  font-weight: var(--peso-max);
  line-height: 1;
  letter-spacing: -0.02em;
}

.balcao-resultado[data-estado="apto"]     .balcao-estado { color: var(--ok-700); }
.balcao-resultado[data-estado="inapto"]   .balcao-estado { color: var(--erro-700); }
.balcao-resultado[data-estado="pendente"] .balcao-estado { color: var(--alerta-700); }

.balcao-estado svg { width: 42px; height: 42px; flex-shrink: 0; }

.balcao-motivo {
  margin-top: var(--e-3);
  font-size: var(--txt-md);
  line-height: var(--altura-normal);
  color: var(--tinta-900);
  max-width: 62ch;
}

.balcao-codigo {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  margin-top: var(--e-2);
}

.balcao-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(16, 24, 40, .12);
}

.dado-rotulo {
  display: block;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-500);
  margin-bottom: 2px;
}

.dado-valor {
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  color: var(--tinta-900);
}

.dado-valor.num { font-size: var(--txt-md); }

/* Campo de consulta grande do balcão */
.balcao-consulta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: end;
}

.balcao-consulta .form-control {
  min-height: 52px;
  font-family: var(--fonte-mono);
  font-size: var(--txt-lg);
  letter-spacing: .04em;
}

@media (max-width: 575.98px) {
  .balcao-consulta { grid-template-columns: minmax(0, 1fr); }
  .balcao-estado { font-size: var(--txt-xl); }
  .balcao-estado svg { width: 30px; height: 30px; }
}

/* Cronômetro da consulta — critério de aceite dos 3 segundos */
.balcao-tempo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
}

.balcao-tempo.is-lento { color: var(--erro-700); font-weight: 500; }

/* ---------------------------------------------------------------------
   LINHA DO TEMPO (auditoria e histórico de preço)
   --------------------------------------------------------------------- */

.trilha { position: relative; padding-left: var(--e-6); }

.trilha::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--linha);
}

.trilha-item { position: relative; padding-bottom: var(--e-5); }
.trilha-item:last-child { padding-bottom: 0; }

.trilha-item::before {
  content: '';
  position: absolute;
  left: calc(var(--e-6) * -1 + 1px);
  top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--papel-1);
  border: 2px solid var(--tinta-400);
}

.trilha-item[data-tom="ok"]::before     { border-color: var(--ok-500); }
.trilha-item[data-tom="erro"]::before   { border-color: var(--erro-500); }
.trilha-item[data-tom="alerta"]::before { border-color: var(--alerta-500); }
.trilha-item[data-tom="acento"]::before { border-color: var(--apoio-500); }

.trilha-cabecalho { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.trilha-acao { font-weight: var(--peso-forte); color: var(--tinta-900); font-size: var(--txt-sm); }
.trilha-quando { font-size: var(--txt-xs); color: var(--tinta-500); font-variant-numeric: tabular-nums; }
.trilha-corpo { font-size: var(--txt-sm); color: var(--tinta-700); margin-top: 2px; }

.trilha-diff {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--papel-2);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
}

.trilha-de { color: var(--erro-700); text-decoration: line-through; text-decoration-thickness: 1px; }
.trilha-para { color: var(--ok-700); font-weight: 500; }

/* ---------------------------------------------------------------------
   LISTA DE DEFINIÇÃO (detalhes de registro)
   --------------------------------------------------------------------- */

.definicoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-4); }
.definicao dt { font-size: var(--txt-2xs); font-weight: var(--peso-forte); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--tinta-500); margin-bottom: 2px; }
.definicao dd { margin: 0; font-size: var(--txt-base); color: var(--tinta-900); }

/* ---------------------------------------------------------------------
   ABAS
   --------------------------------------------------------------------- */

.abas {
  display: flex;
  gap: var(--e-1);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--e-5);
  overflow-x: auto;
}

.aba {
  position: relative;
  padding: var(--e-3) var(--e-4);
  border: 0;
  background: transparent;
  color: var(--tinta-500);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.aba::after {
  content: '';
  position: absolute;
  left: var(--e-3); right: var(--e-3); bottom: -1px;
  height: 2px;
  background: transparent;
}

.aba:hover { color: var(--tinta-900); }
.aba.is-ativa { color: var(--marca-800); }
.aba.is-ativa::after { background: var(--apoio-500); }

/* ---------------------------------------------------------------------
   AUTENTICAÇÃO
   Desenho do login do azo2 (css/login.css): apresentação coral à
   esquerda com o anel decorativo, formulário à direita com a logo em
   cima. A proporção é a de lá: 1.05fr / 1fr.

   O degradê é a única divergência, e é deliberada. O do azo2 vai de
   #E12975 a #E54A49, e sobre ele o texto branco rende de 3.88 a 4.40:1
   — abaixo dos 4.5:1 da WCAG AA, que é o piso deste projeto. Aqui o
   mesmo gesto acontece sobre a faixa escura da marca: pior ponto em
   5.84:1. Os pares estão trancados em testes/contraste.php, porque a
   auditoria feita no DOM ignora fundo com `background-image` — foi
   assim que três textos ficaram ilegíveis aqui por meses.
   --------------------------------------------------------------------- */

.login {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--papel-0);
}

/* --- Painel de apresentação ---------------------------------------- */

.login-apresentacao {
  position: relative;
  display: flex;
  align-items: flex-end;     /* conteúdo ancorado embaixo, como no azo2 */
  padding: 56px;
  overflow: hidden;
  color: #FFFFFF;
  /* O degradê da marca, igual ao do azo2. Sobre ele o branco não
     alcança 4,5:1 em parada nenhuma, então aqui não entra texto
     translúcido NEM texto pequeno que carregue informação essencial —
     o que está escrito neste painel é apresentação, e o formulário
     inteiro fica do lado branco. Ver a nota em tokens.css. */
  background: var(--marca-degrade);
}

/* O anel do azo2: um círculo grande de borda larga, quase saindo pelo
   canto. É o que dá movimento ao painel sem virar textura. */
.login-apresentacao::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 48px solid rgba(255, 255, 255, .08);
  pointer-events: none;
}

.login-apresentacao-conteudo { position: relative; z-index: 1; max-width: 460px; }

/* Ladrilho branco com o anel da marca dentro. */
.login-apresentacao-icone {
  width: 64px;
  height: 64px;
  padding: 8px;
  margin-bottom: 28px;
  border-radius: var(--raio-lg);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  object-fit: contain;
  display: block;
}

.login-apresentacao h1 {
  font-family: var(--fonte-titulo);
  font-size: 2.1rem;
  font-weight: var(--peso-extra);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 12px;
  color: #FFFFFF;
}

.login-apresentacao p {
  font-size: 1.05rem;
  line-height: var(--altura-solta);
  /* .9 de opacidade dava 4.37:1 na parada mais clara. Sobre este painel
     o branco só passa dos 4.5:1 a partir de 88%. */
  color: #FFFFFF;
  margin-bottom: 28px;
}

.login-destaques {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.login-destaques li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--peso-medio);
  color: #FFFFFF;
}

.login-destaques span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  color: #FFFFFF;
}

/* --- Formulário ----------------------------------------------------- */

.login-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.box-login { width: 100%; max-width: 400px; }

/* As duas marcas, na mesma ordem da navegação: a plataforma primeiro,
   o sistema depois da régua.

   As duas na mesma ALTURA, e só isso: a caixa do arco-marca.svg foi
   gerada com a proporção da do azo-marca.png, então altura igual já
   põe as letras do mesmo tamanho e na mesma linha de base.

   64px, e não mais 50: com quatro letras o conjunto encolheu, e a marca
   coube maior na mesma caixa de 400px.
     AZO     335/105 × 64 = 204,2
     régua   16 de folga + 14 de recuo + 1 de filete = 31
     arco    374,3/175 × 64 = 136,9
     total                    372,1
   A 70px o total ia a 398 e encostava na borda. */
.login-marca {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.login-marca-azo { height: 64px; width: auto; object-fit: contain; display: block; flex-shrink: 0; }

/* O nome do sistema, com o anel do AZO no lugar do `o`. */
.login-marca-sistema {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid var(--linha);
}

.login-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: var(--peso-max);
  letter-spacing: -.02em;
  color: var(--tinta-900);
  margin: 0 0 6px;
}

.login-subtitulo { color: var(--tinta-500); margin-bottom: 24px; }

.login-demo {
  margin-top: var(--e-6);
  padding: var(--e-3) var(--e-4);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-lg);
  background: var(--papel-2);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  line-height: var(--altura-solta);
}

.login-demo code {
  font-family: var(--fonte-mono);
  color: var(--apoio-700);
  background: transparent;
  padding: 0;
}

.login-demo button {
  border: 0; background: transparent; padding: 0;
  font: inherit; color: var(--marca-700);
  text-decoration: underline; cursor: pointer;
}

.login-rodape {
  margin-top: 40px;
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  text-align: center;
}

@media (max-width: 991.98px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-apresentacao { display: none; }
  .login-area { min-height: 100vh; padding: 32px 16px; }
  .login-marca { justify-content: center; }
}

/* Em tela estreita a caixa não tem mais 400px: ela vale a largura da
   janela menos os 32 de recuo. Num celular de 320 sobram 288, e o
   lockup a 64px mede 367 — ele transbordava, e transbordava também com
   o tamanho anterior, de 50px, que dava 380. O defeito é antigo; só
   apareceu quando medi num viewport estreito.

   A 44px o conjunto fecha em 262 e cabe nos 288 do pior caso:
     AZO    335/105 × 44 = 140,4
     régua  16 + 14 + 1  =  31
     arco   374,3/175 × 44 =  94,1
     total                   265,5                                      */
@media (max-width: 575.98px) {
  .login-marca-azo,
  .login-marca-sistema { height: 44px; }
}

/* ---------------------------------------------------------------------
   PÁGINA DE ERRO
   --------------------------------------------------------------------- */

.pagina-erro { max-width: 560px; margin: var(--e-16) auto; text-align: center; }

.pagina-erro-codigo {
  font-family: var(--fonte-titulo);
  font-size: 4.5rem;
  font-weight: var(--peso-max);
  line-height: 1;
  color: var(--apoio-500); /* contraste: texto-grande (72px) */
  letter-spacing: -0.03em;
}

.pagina-erro h1 { margin: var(--e-3) 0 var(--e-2); }
.pagina-erro p { color: var(--tinta-500); margin-bottom: var(--e-6); }

/* ---------------------------------------------------------------------
   MODAL (Bootstrap reestilizado)
   --------------------------------------------------------------------- */

.modal-content {
  border: 0;
  border-radius: var(--raio-2xl);
  box-shadow: var(--anel), var(--sombra-modal);
  background: var(--papel-1);
}

.modal-header { border-bottom: 1px solid var(--linha); padding: var(--e-4) var(--e-5); }
.modal-title { font-family: var(--fonte-titulo); font-size: var(--txt-md); font-weight: var(--peso-forte); color: var(--tinta-900); }
.modal-body { padding: var(--e-5); font-size: var(--txt-base); }
.modal-footer { border-top: 1px solid var(--linha); padding: var(--e-3) var(--e-5); gap: var(--e-2); background: var(--papel-2); border-radius: 0 0 var(--raio-2xl) var(--raio-2xl); }

.dropdown-menu {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-flutuante);
  padding: var(--e-1);
  font-size: var(--txt-sm);
  min-width: 200px;
}

.dropdown-item {
  border-radius: var(--raio-sm);
  padding: var(--e-2) var(--e-3);
  color: var(--tinta-700);
  display: flex; align-items: center; gap: var(--e-2);
}

.dropdown-item svg { width: 15px; height: 15px; opacity: .7; }
.dropdown-item:hover { background: var(--papel-2); color: var(--tinta-900); }
.dropdown-item.is-perigo { color: var(--erro-700); }
.dropdown-item.is-perigo:hover { background: var(--erro-100); }
.dropdown-divider { border-color: var(--linha); margin: var(--e-1) 0; }

.dropdown-cabecalho {
  padding: var(--e-3) var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--e-1);
}

/* ---------------------------------------------------------------------
   AUXILIARES
   --------------------------------------------------------------------- */

.chip-cpf, .chip-token, .chip-tuss {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  padding: 1px var(--e-2);
  border-radius: var(--raio-sm);
  background: var(--papel-2);
  border: 1px solid var(--linha);
  color: var(--tinta-700);
  letter-spacing: .02em;
}

.chip-token { background: var(--apoio-100); border-color: var(--apoio-200); color: var(--apoio-800); font-weight: 500; }

.separador-vertical { width: 1px; height: 22px; background: var(--linha); flex-shrink: 0; }

.nota-rodape {
  margin-top: var(--e-4);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  line-height: var(--altura-solta);
}

.regra-negocio {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--marca-100);
  border-left: var(--fita-largura) solid var(--marca-600);
  border-radius: var(--raio);
  background: var(--marca-050);
  font-size: var(--txt-sm);
  color: var(--marca-900);
  line-height: var(--altura-normal);
}

.regra-negocio svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* =====================================================================
   BUSCA RÁPIDA DE TELAS (Ctrl+K)
   Sobreposição central, no mesmo desenho do azo2 (`.busca-rapida`). A
   lista já vem do servidor filtrada por permissão: o JS só esconde o que
   não casa com o que foi digitado, sem requisição a cada tecla.
   ===================================================================== */

.busca-rapida {
  position: fixed;
  inset: 0;
  z-index: 1080;          /* acima do modal do Bootstrap (1055) */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh var(--e-4) var(--e-4);
  background: rgba(16, 24, 40, .45);
}

.busca-rapida[hidden] { display: none; }

.busca-rapida-caixa {
  width: 100%;
  max-width: 620px;
  background: var(--papel-1);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
}

.busca-rapida-campo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-500);
}

.busca-rapida-campo > svg { flex-shrink: 0; }

.busca-rapida-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tinta-900);
  font-family: var(--fonte-ui);
  font-size: 1rem;
}

.busca-rapida-campo input::placeholder { color: var(--tinta-500); }

.busca-rapida-fechar {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--tinta-500);
  cursor: pointer;
}

.busca-rapida-fechar:hover { background: var(--papel-2); color: var(--tinta-900); }

.busca-rapida-resultados {
  max-height: min(420px, 55vh);
  overflow-y: auto;
  padding: var(--e-2);
}

.busca-rapida-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border-radius: 8px;
  color: var(--tinta-900);
  font-size: var(--txt-base);
  text-decoration: none;
}

.busca-rapida-item[hidden] { display: none; }

.busca-rapida-item-icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--tinta-500);
}

.busca-rapida-item-texto { font-weight: var(--peso-medio); }

.busca-rapida-item-grupo {
  margin-left: auto;
  font-size: var(--txt-2xs);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-500);
}

/* Seleção pelo teclado e hover são o mesmo estado visual: não há dois
   cursores disputando a atenção. */
.busca-rapida-item:hover,
.busca-rapida-item.is-selecionado {
  background: var(--marca-050);
  color: var(--marca-800);
}

.busca-rapida-item:hover .busca-rapida-item-icone,
.busca-rapida-item.is-selecionado .busca-rapida-item-icone { color: var(--marca-700); }

.busca-rapida-vazio {
  margin: 0;
  padding: var(--e-8);
  text-align: center;
  color: var(--tinta-500);
}

.busca-rapida-vazio[hidden] { display: none; }

.busca-rapida-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  padding: var(--e-2) var(--e-4);
  border-top: 1px solid var(--linha);
  background: var(--papel-2);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
}

.busca-rapida-rodape kbd { margin-right: 3px; }

/* ---------------------------------------------------------------------
   CAMPO COM ÍCONE (login)
   O ícone é decorativo e não recebe clique: `pointer-events: none`, ou
   ele engoliria o clique que deveria focar o campo.
   --------------------------------------------------------------------- */

.campo-com-icone { position: relative; }

.campo-com-icone .form-control {
  padding-left: 2.75rem;
}

.campo-com-icone:has(.campo-mostrar) .form-control { padding-right: 3rem; }

.campo-icone {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--tinta-500);
  pointer-events: none;
}

.campo-mostrar {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--tinta-500);
  cursor: pointer;
}

.campo-mostrar:hover { background: var(--papel-2); color: var(--tinta-900); }
.campo-mostrar[aria-pressed="true"] { color: var(--marca-700); }

/* O ícone troca com o estado: olho para revelar, olho riscado para
   esconder de novo. Quem não tiver CSS vê os dois, o que é feio mas
   não impede nada. */
.campo-mostrar-aberto { display: none; }
.campo-mostrar[aria-pressed="true"] .campo-mostrar-fechado { display: none; }
.campo-mostrar[aria-pressed="true"] .campo-mostrar-aberto { display: grid; }

/* ---------------------------------------------------------------------
   CHECKOUT DO PACIENTE
   Uma linha por pedido do médico. A grade é de container, não de
   viewport: esta folha convive com a lateral aberta ou recolhida.
   --------------------------------------------------------------------- */

.checkout-linha {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 90px minmax(0, 2fr) 36px;
  align-items: start;
  gap: var(--e-3);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linha);
}

.checkout-linha:last-of-type { border-bottom: 0; }
.checkout-linha .campo { margin: 0; }

/* O rótulo só aparece na primeira linha: repetido em cinco linhas
   iguais vira ruído, e o campo já diz o que é pelo que está escrito. */
.checkout-linha:not(:first-of-type) .campo-rotulo { display: none; }

.checkout-linha-ofertas {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
  padding-top: 26px;      /* alinha com o campo, abaixo do rótulo */
}

.checkout-linha:not(:first-of-type) .checkout-linha-ofertas { padding-top: 0; }

.checkout-ofertas { display: flex; flex-direction: column; gap: 2px; }

.checkout-oferta {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: 4px var(--e-2);
  border-radius: var(--raio-sm);
  font-size: var(--txt-sm);
  color: var(--tinta-500);
}

/* A mais barata da rede é a que o paciente leva: fica marcada, para o
   atendente não precisar comparar números em voz alta. */
.checkout-oferta.is-melhor {
  background: var(--ok-100);
  color: var(--tinta-900);
  font-weight: var(--peso-medio);
}

.checkout-oferta-onde { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.checkout-oferta-socio { font-family: var(--fonte-mono); font-weight: var(--peso-forte); margin-left: auto; }
.checkout-oferta-economia { font-size: var(--txt-2xs); color: var(--ok-700); white-space: nowrap; }

@container conteudo (max-width: 699px) {
  .checkout-linha { grid-template-columns: minmax(0, 1fr) 72px; }
  .checkout-linha-ofertas { grid-column: 1 / -1; padding-top: 0; }
  .checkout-linha > .btn-icone { grid-column: 2; justify-self: end; }
}

/* ---------------------------------------------------------------------
   FOLHA DO PACIENTE (checkout impresso)
   Sai da impressora do balcão e vai na mão de quem não usa o app. Por
   isso é sóbria: nada de cor chapada que gasta toner e sai cinza.
   --------------------------------------------------------------------- */

.folha-paciente {
  max-width: 760px;
  margin: var(--e-8) auto;
  padding: var(--e-8);
  background: var(--papel-1);
  border-radius: var(--raio-xl);
  box-shadow: var(--elevacao);
  color: var(--tinta-900);
}

.fp-topo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 2px solid var(--marca-700);
  margin-bottom: var(--e-5);
}

.fp-topo img { height: 38px; width: auto; object-fit: contain; }
.fp-topo-texto { display: flex; flex-direction: column; }
.fp-topo-texto strong { font-size: var(--txt-md); }
.fp-topo-texto span { font-size: var(--txt-sm); color: var(--tinta-500); }

.fp-pessoa { margin: 0 0 var(--e-5); font-size: var(--txt-base); line-height: var(--altura-normal); }

.fp-itens { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.fp-itens th {
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--tinta-900);
  text-align: left;
  font-weight: var(--peso-max);
}
.fp-itens td { padding: var(--e-3); border-bottom: 1px solid var(--linha); vertical-align: top; }
.fp-itens .direita { text-align: right; }
.fp-itens small { color: var(--tinta-500); }

.fp-destaque { font-weight: var(--peso-extra); font-size: var(--txt-md); white-space: nowrap; }

.fp-economia {
  margin: var(--e-5) 0 0;
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--ok-700);
  background: var(--ok-100);
  font-size: var(--txt-base);
}

.fp-observacao { margin: var(--e-4) 0 0; font-size: var(--txt-sm); }

.fp-rodape {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
  font-size: var(--txt-xs);
  color: var(--tinta-500);
  line-height: var(--altura-normal);
}

.fp-acoes { display: flex; gap: var(--e-2); margin-top: var(--e-6); }

@media print {
  .folha-paciente { margin: 0; padding: 0; box-shadow: none; border-radius: 0; max-width: none; }
  .fp-economia { background: transparent; }
}