.customers-page {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.customers-page .app-form__form,
.customers-page .app-form__panel {
  width: 100%;
  max-width: none;
}

.customers-form {
  width: min(1180px, calc(100vw - 2rem));
}

.customers-show__tab.is-active,
.customers-show__tab.is-active:hover {
  color: #0e578f !important;
  border-bottom-color: #1489e5;
  font-weight: 600;
}

/* As abas de cada um dos dois quadros da Ficha Clínica. Mesma gramática das
   abas da barra, num tamanho que cabe na coluna. */
.customers-show__subtab.is-active,
.customers-show__subtab.is-active:hover {
  color: #0e578f !important;
  border-bottom-color: #1489e5;
  font-weight: 600;
}

/* Os dois quadros da Ficha Clínica têm altura DECLARADA, e não herdada do
   conteúdo: qualquer um dos cinco painéis pode cair em qualquer lado, e sem
   altura definida o `min-h-0 flex-1` de dentro nunca encolhe, a rolagem
   interna nunca acontece e uma linha do tempo longa faz a página crescer sem
   fim. Antes a altura vinha do odontograma, que era fixo à direita.

   O quadro começa a **321px** do topo (medido: navbar + cabeçalho do paciente
   + a barra de abas da ficha; a dica de troca de quadro some depois da primeira
   escolha e não entra na conta). Com `100vh - 22rem`, que era a conta anterior,
   o quadro terminava exatamente no fim da viewport — o que significa que o teto
   dele nunca foi o `clamp`, foi a tela: 585px num monitor de 1080, e o resto da
   lista sempre atrás da rolagem interna.

   Os 8rem de agora deixam o quadro passar da viewport de propósito: a página
   rola um pouco e a rolagem interna, que é a cara do problema, encurta na mesma
   medida. Quanto ela rola é o que limita o número, e é medido:

     rolagem máxima da página = 321 (topo) + 52 (o que vem depois da grade) − X
     a fileira de abas só sai da tela se essa rolagem passar de 321px, ou seja
     se X < ~3,5rem

   Com X = 8rem a página rola 245px e a fileira de abas — com ela o "Novo
   achado" e o seletor de painel — termina a 101px do topo, ainda na tela
   (medido nos três tamanhos: a rolagem não depende da altura da janela, só
   desse desconto). Sobram ~6rem até o limite da conta: é a garantia que o
   número protege, e mexer nele sem refazer a medida tira os controles da tela
   sem nada falhar.

   O teto de 80rem evita que num monitor 4K uma lista de três itens fique com
   2000px de altura.

   O PISO existia para manter o mapa de dentes usável num notebook baixo, e era
   34rem. Só que num notebook baixo é justamente ele que ganha do cálculo, os
   quadros passam da dobra e a pessoa rola a página E rola dentro do painel para
   ler a mesma lista. Em 32rem ele volta a valer só onde o cálculo daria menos
   que uma tela de conteúdo útil. O odontograma não fica menor do que precisa:
   ele já rola por dentro (`overflow-y-auto`), que é para o que a rolagem
   interna existe. */
.clinical-slot {
  max-height: 85vh;
}

@media (min-width: 80rem) {
  .clinical-slot {
    height: clamp(32rem, calc(100vh - 8rem), 80rem);
    max-height: none;
  }
}

/* Lexxy markdown content renders inside `.lexxy-content` with a hardcoded
   dark ink color. Soften it inside the logged area to match the project's
   slate-600 text tone. */
.logged-ui .lexxy-content {
  --lexxy-color-ink: #334155; /* slate-700 */
}

/* O "+" do disclosure de informações adicionais vira "×" ao abrir. O
   details.css do projeto está inteiramente comentado, então o marcador é este
   ícone e a rotação mora aqui. */
.ui-disclosure-icon {
  transition: transform 200ms linear;
}

details[open] > summary .ui-disclosure-icon {
  transform: rotate(45deg);
}