/* Shell da aplicacao — valores copiados 1:1 do markup real do design
 * system (design_system/Gestao Odonto - Sistema (todas as telas).html,
 * decodificado do template embutido). Nao ajustar "no olho": conferir
 * contra aquele arquivo. */

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* Impressao: o shell deixa de ser janela e vira fluxo de pagina.
   Na tela o app e uma moldura fixa de 100vh com o conteudo rolando dentro de
   `.content`. Mandado para a impressora assim, o navegador so poe no papel o
   retangulo visivel -- o documento sai cortado em uma pagina unica. Em papel
   nao ha scroll: o conteudo precisa fluir e quebrar em quantas paginas
   precisar. Vale para as quatro saidas imprimiveis (prontuario completo,
   anamnese, documento emitido e recibo). */
@media print {
  .sidebar,
  .header,
  .modal-overlay,
  .no-print {
    display: none !important;
  }

  html,
  body {
    height: auto;
    overflow: visible;
    background: none;
  }

  .app,
  .app__main,
  .content {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .content {
    padding: 0;
  }
}

@page {
  margin: 14mm;
}

/* ---- Sidebar ---- */
.sidebar {
  width: 236px;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 160ms ease;
}
/* Nenhuma peca encolhe: quando a coluna passa da altura da tela, a barra
 * ROLA (`overflow-y`). Sem isto o flex espremia os controles de 30-34px do
 * topo ate virarem filetes, antes de a rolagem entrar. */
.sidebar > * { flex-shrink: 0; }

/* Peca que so existe recolhida. */
.sidebar__expand,
.navitem__initial { display: none; }
/* Icone de painel do botao de expandir; no menu da rede (64px) fica menor. */
.sidebar__expand-glyph { width: 16px; height: 16px; }

/* Recolher é escolha sobre espaço HORIZONTAL, e no celular não há esse
 * espaço para escolher: lá a barra não divide a tela com o conteúdo, ela
 * é gaveta (ver o bloco de celular no fim do arquivo). Sem este limite a
 * gaveta abriria com o desenho do recolhido — 268px de largura mostrando
 * iniciais e controles de 38px centrados — para quem tivesse recolhido a
 * barra no computador. */
@media (min-width: 721px) {
  /* ---- Sidebar recolhida --------------------------------------------------
   *
   * NAO e a expandida com os rotulos escondidos -- e outro desenho, e e o do
   * arquivo de telas: cada peca vira um controle centrado de 38px (expandir,
   * unidade, busca, tema), os itens do menu trocam o ponto pelo ICONE (clinica) ou pela INICIAL (rede), e os
   * rotulos de grupo viram um filete de 1px. Antes disto o recolhido era uma
   * coluna de seis pontos cinzas iguais -- sem como saber qual era qual -- e o
   * botao de expandir ficava cortado pela borda, porque continuava dividindo a
   * linha da marca com o logo dentro de 64px.
   *
   * Quem manda e o atributo `data-nav` no <html>, escrito antes da primeira
   * pintura pelo script do <head> (mesma mecanica do tema). Se isto virasse
   * `x-show`, os rotulos existiriam dentro dos 64px ate o Alpine montar e o
   * menu apareceria embolado a cada carga. */
  html[data-nav="collapsed"] .sidebar { width: 64px; padding: 16px 10px; }

  html[data-nav="collapsed"] .sidebar__brand { justify-content: center; }
  html[data-nav="collapsed"] .sidebar__brand-text,
  html[data-nav="collapsed"] .sidebar__collapse,
  html[data-nav="collapsed"] .sidebar__search input,
  html[data-nav="collapsed"] .sidebar__kbd,
  html[data-nav="collapsed"] .unit-switcher__text,
  html[data-nav="collapsed"] .unit-switcher__caret,
  html[data-nav="collapsed"] .unit-switcher__scope,
  html[data-nav="collapsed"] .navitem__dot,
  html[data-nav="collapsed"] .navitem__label,
  html[data-nav="collapsed"] .navitem__badge,
  html[data-nav="collapsed"] .sidebar__user-text,
  html[data-nav="collapsed"] .sidebar__user-caret { display: none; }

  html[data-nav="collapsed"] .sidebar__expand {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 30px; border-radius: 8px; align-self: center;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer;
  }
  html[data-nav="collapsed"] .sidebar__expand:hover {
    border-color: var(--accent); color: var(--accent);
  }

  /* A unidade recolhida e a inicial num quadrado de acento -- e o unico
   * elemento colorido da barra estreita, porque e o unico que responde "que
   * clinica e esta". */
  html[data-nav="collapsed"] .unit-switcher {
    width: 38px; height: 34px; padding: 0; align-self: center;
    justify-content: center; border-color: var(--accent); background: var(--accent);
  }
  html[data-nav="collapsed"] .unit-switcher__avatar {
    width: auto; height: auto; background: transparent; font-size: 12px;
  }

  html[data-nav="collapsed"] .sidebar__search {
    width: 38px; height: 34px; padding: 0; align-self: center; justify-content: center;
  }

  /* Rotulo de grupo vira separador: o primeiro some (nao ha o que separar
   * acima dele) e os seguintes viram filete, como no arquivo de telas. */
  html[data-nav="collapsed"] .sidebar__group-label { display: none; }
  html[data-nav="collapsed"] .sidebar__group-label--spaced {
    display: block; height: 1px; padding: 0; margin: 8px 4px;
    background: var(--border); overflow: hidden; text-indent: -9999px;
  }

  html[data-nav="collapsed"] .navitem { justify-content: center; padding: 8px 0; }
  html[data-nav="collapsed"] .navitem__initial { display: inline; }
  /* Menu da clinica recolhido: trilho de 92px com o icone EM CIMA e o nome
   * EMBAIXO, um filete entre um item e outro, e o item da pagina atual num
   * fundo suave com o icone dentro de um quadrado de acento. Escopo pelo
   * `:has(.navitem__icon)`: o menu da rede nao tem icone e segue com as
   * iniciais nos 64px. Os rotulos de grupo saem -- o filete entre itens ja
   * separa, e um filete a mais no meio leria como divisao de outra coisa. */
  /* Em tela baixa a coluna rola; a barra de rolagem some porque, num trilho
   * de 96px, ela come a margem e descentra os icones. A roda segue rolando. */
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) { width: 96px; gap: 10px; scrollbar-width: none; }
  /* Os controles do topo falam a lingua dos itens: icone no mesmo traco,
   * sem caixa com borda, e o hover dos itens. A unidade guarda a inicial --
   * e o que diz QUAL clinica --, no formato dos quadrados do menu (46px,
   * raio 12). Seta e lupa tem 40px de altura, nao 46: a coluna
   * inteira precisa caber numa tela de notebook sem rolar. */
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__expand,
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__search {
    width: 46px; height: 40px; border: 0; border-radius: 12px;
    background: transparent; color: var(--text);
  }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__expand:hover,
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__search:hover {
    background: var(--surface-2); color: var(--text);
  }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__expand-glyph { width: 21px; height: 21px; }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__search svg {
    width: 21px; height: 21px; stroke: var(--text);
  }
  /* Unidade neutra: a inicial em --text sobre --surface-2, sem borda. Verde
   * cheio ela competia com o item ativo -- na coluna so um quadrado e verde, e
   * ele responde "onde estou". */
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .unit-switcher {
    width: 46px; height: 46px; border-radius: 12px;
    border-color: transparent; background: var(--surface-2);
  }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .unit-switcher:hover { background: var(--surface-3); }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .unit-switcher__avatar { font-size: 16px; color: var(--text); }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__user { width: 40px; height: 40px; padding: 0; }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__avatar { width: 40px; height: 40px; font-size: 13px; }
  /* O menu da conta sai ao lado do trilho de 96px, nao dos 64px antigos. */
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .usermenu { left: 104px; }
  html[data-nav="collapsed"] .sidebar:has(.navitem__icon) .sidebar__group-label { display: none; }
  html[data-nav="collapsed"] .navitem:has(.navitem__icon) {
    position: relative; flex-direction: column; justify-content: center; gap: 6px;
    padding: 7px 4px; margin-top: 7px; border-radius: 14px;
    color: var(--text); text-align: center;
  }
  html[data-nav="collapsed"] .sidebar__nav > a.navitem:first-of-type { margin-top: 0; }
  html[data-nav="collapsed"] .navitem:has(.navitem__icon) + .navitem:has(.navitem__icon)::before,
  html[data-nav="collapsed"] .sidebar__group-label + .navitem:has(.navitem__icon)::before {
    content: ""; position: absolute; top: -4px; left: 14px; right: 14px;
    height: 1px; background: var(--border);
  }
  html[data-nav="collapsed"] .sidebar__nav > .sidebar__group-label:first-child + .navitem::before { display: none; }
  html[data-nav="collapsed"] .navitem:has(.navitem__icon) .navitem__label {
    display: block; flex: none; white-space: normal;
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
  }
  html[data-nav="collapsed"] .navitem:has(.navitem__icon) .navitem__icon {
    box-sizing: border-box; width: 46px; height: 46px; padding: 11px;
    border-radius: 12px; color: var(--text);
  }
  html[data-nav="collapsed"] .navitem.is-active:has(.navitem__icon) { background: var(--accent-soft); }
  html[data-nav="collapsed"] .navitem.is-active .navitem__icon {
    background: var(--accent); color: var(--on-accent);
  }

  html[data-nav="collapsed"] .sidebar__user {
    width: 30px; height: 30px; padding: 0; align-self: center;
    justify-content: center; border-color: transparent; background: transparent;
  }
  html[data-nav="collapsed"] .sidebar__avatar { border-radius: 99px; }

  /* O menu da conta continua abrindo recolhido: e o unico caminho para a
   * administracao da rede e para sair. Em fluxo ele teria 44px de largura, e a
   * sidebar rola, entao um popover absoluto seria cortado -- `fixed` escapa do
   * recorte sem precisar de portal. */
  html[data-nav="collapsed"] .usermenu {
    position: fixed; left: 68px; bottom: 14px; width: 224px; z-index: 60;
    box-shadow: var(--shadow-lg);
  }
}


.sidebar__brand { display: flex; align-items: center; gap: 10px; }
.sidebar__logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sidebar__brand-text { min-width: 0; flex: 1; }
.sidebar__brand-name {
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}
.sidebar__brand-unit { font-size: 10.5px; color: var(--text-3); font-family: var(--mono); }
.sidebar__collapse {
  padding: 0;
  width: 24px; height: 24px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; cursor: pointer; flex: none; user-select: none;
}
.sidebar__collapse:hover { border-color: var(--accent); color: var(--accent); }

/* Card de unidade (tenant) */
.unit-switcher {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2); cursor: pointer;
}
.unit-switcher:hover { border-color: var(--accent); }
.unit-switcher__avatar {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex: none;
}
.unit-switcher__text { flex: 1; min-width: 0; }
.unit-switcher__text select {
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  border: 0; background: transparent; color: var(--text);
  font-family: var(--font); padding: 0; width: 100%; cursor: pointer;
}
.unit-switcher__text select:focus { outline: none; }
.unit-switcher__role { font-size: 9.5px; font-family: var(--mono); color: var(--text-3); }
/* Chevron em SVG: o glyph "⌄" do design nao existe na Plus Jakarta Sans e
 * o fallback vira um tracinho quase invisivel. O sentido da seta muda
 * trocando o path (Alpine), nao por transform. */
.unit-switcher__caret {
  flex: none; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.unit-switcher:hover .unit-switcher__caret { color: var(--accent); }

.unit-switcher__name {
  display: block;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-align: left;
}

/* ---- Modal de troca de unidade ---- */
[x-cloak] { display: none !important; }

/* Centrado, e nao ancorado no topo. O arquivo de telas usa as duas formas, e
 * a diferenca nao e capricho: `flex-start` serve ao modal que ja enche a
 * altura util (o de agendamento, o de item), onde centrar e ancorar dao no
 * mesmo. O modal curto -- "o que vai ser feito agora", trocar unidade --
 * ficava pendurado a 60px do topo com meia tela vazia embaixo, e a caixa lia
 * como deslocada em vez de centrada.
 *
 * Centrar so e seguro porque a conta fecha: o padding de 60px em cima e
 * embaixo consome exatamente o que `.modal` reserva em `max-height`
 * (100vh - 120px). O item nunca estoura o container, entao nunca ha o
 * classico topo cortado de flex centrado com overflow. Ao criar variante de
 * modal mais alta, mexa nos dois numeros juntos -- e o que o proprio design
 * system faz em `.agd-catmodal` (padding 40px, max-height 100vh - 80px). */
.modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: oklch(0.26 0.02 225 / 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 720px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: calc(100vh - 120px);
}
/* Quando o modal inteiro e um <form>, ele precisa herdar a coluna flex --
 * senao o corpo nao rola e o rodape sai da tela. */
.modal > form {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
}
/* Casulo para corpo que chega por htmx: o fragmento traz corpo E rodape, entao
 * precisa de um elemento fixo no DOM para ser o alvo do swap -- e esse
 * elemento fica ENTRE o `.modal` e o `<form>`, fora do alcance da regra acima.
 *
 * Sem esta cadeia o `flex: 1; overflow-y: auto` do `.modal__body` nao tem
 * altura contra o que medir: o corpo cresce o quanto quiser, o `.modal`
 * recorta (`overflow: hidden`) e o rodape com os botoes fica fora da tela --
 * sem rolagem nenhuma que chegue nele. Era o "abro o modal e nao consigo
 * descer". Modal cujo alvo de swap E o proprio `.modal__body` (o da cadeira do
 * dia) nao precisa disto: la o corpo ja e filho direto. */
.modal__slot { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal__slot > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal__head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.modal__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.modal__sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.modal__hint {
  margin-left: auto; font-size: 10px; font-family: var(--mono); color: var(--text-3);
}
.modal__close {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border-2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-2); cursor: pointer;
}
.modal__close:hover { border-color: var(--danger); color: var(--danger); }

.modal__search-area {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
/* Busca + atalho de cadastro na mesma linha -- o padrao do design system para
   "procurar quem existe ou criar quem nao existe" (arquivo de telas, a linha
   de paciente do modal de agendamento, que `.agd-search-row` ja porta).

   O atalho e RECESSIVO aqui, e a regra e a de sempre: a metrica e do desenho,
   a cor e da caixa em que o campo vive. `.recbtn--dashed` nasceu para o
   formulario de cadastro, sobre `--surface`, e por isso se pinta de
   `--surface-2`; ao lado de um campo que JA e `--surface-2` esse mesmo
   preenchimento faz os dois lerem como duas caixas de texto iguais -- e a
   segunda, com texto escuro e grosso, pesa mais que o proprio campo de busca,
   que e o trabalho do modal. Sem fundo e em `--text-2` ele volta a ser o que o
   design system desenha: uma saida discreta, que so acende no hover.

   Quem acende de verdade e o botao do estado vazio (`.empty-state__action`),
   no momento em que a busca nao achou ninguem -- que e quando cadastrar deixa
   de ser saida e vira a acao. Os dois juntos sao o par do design system. */
.modal__search-row { display: flex; align-items: center; gap: 9px; }
.modal__search-row .modal__search { flex: 1; min-width: 0; }
.modal__search-row .recbtn {
  height: 40px; align-self: auto; flex: none; text-decoration: none;
  background: transparent; color: var(--text-2); font-size: 11.5px;
}
.modal__search-row .recbtn:hover { border-color: var(--accent); color: var(--accent); }
.modal__search {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px;
  border-radius: 11px; border: 1px solid var(--border-2); background: var(--surface-2);
}
.modal__search input {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--text); font-family: var(--font); font-size: 13px; outline: none;
}
.modal__count { font-size: 10px; font-family: var(--mono); color: var(--text-3); }

.modal__body {
  flex: 1; overflow-y: auto; padding: 14px 20px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
/* Num corpo que ROLA, filho nenhum encolhe: quem cede altura e o corpo, via
   rolagem. Sem isto o `flex-shrink: 1` que todo item flex traz de origem
   espreme os blocos quando o conteudo passa da altura -- e o resultado nao e
   "tudo um pouco menor", e dano silencioso: caixa com `overflow: hidden`
   RECORTA o que sobra (a lista da conta mostrou uma linha de quatro), e botao
   com `height` fixo ignora a altura declarada (o gatilho de 44px virou 17px).
   `height` nao e minimo em flexbox; so `flex-shrink: 0` e.
   A excecao mora no `.modal--item`, onde a lista do seletor DEVE dividir a
   altura fixa do modal -- e la a regra que manda tem seletor mais especifico. */
.modal__body > * { flex-shrink: 0; }
/* No design system o rotulo e o controle vivem juntos numa coluna de
   `gap: 6px`, e os BLOCOS ficam a `gap: 16px` um do outro. Aqui o corpo tinha
   8px entre blocos e nada entre rotulo e controle: o rotulo ficava
   equidistante dos dois lados, entao lia como parte do grupo de cima e
   colava no de baixo. O que separa nao e o espaco embaixo -- e a diferenca
   entre o de cima e o de baixo.

   A margem vive no rotulo, e nao no corpo, porque `.modal__section-label`
   aparece nos dois papeis (dentro de um <div> com o controle e solto como
   filho do corpo). Somada aos 8px do corpo, da ~18px acima e 7px abaixo: a
   proporcao do design system, sem precisar embrulhar 38 rotulos a mao. */
.modal__section-label {
  display: block; margin: 12px 0 9px;
  font-size: 10px; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.05em;
}
/* O primeiro rotulo nao empurra o topo do corpo. */
.modal__body > .modal__section-label:first-child,
.modal__body > *:first-child > .modal__section-label:first-child { margin-top: 0; }
/* Onde ele ja e item de um flex com gap proprio, a margem seria espaco em dobro. */
.qtyrow__price .modal__section-label { margin: 0; }
/* A faixa de busca NAO e um flex com gap -- e padding e mais nada --, entao
   aqui zerar a margem colava o rotulo no controle de baixo: "COMO ESTE
   PACIENTE ENTRA" encostado nas pilulas lia como parte do cabecalho, e o
   CLAUDE.md e explicito em que o rotulo pertence ao que esta ABAIXO dele. O
   topo continua zerado porque a propria caixa ja tem o padding dela; o que
   volta e o espaco de baixo, o mesmo 9px que o rotulo carrega no corpo do
   modal -- a distancia e uma so no produto inteiro. */
.modal__search-area .modal__section-label { margin: 0 0 9px; }
.modal__foot {
  padding: 13px 20px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 11px; color: var(--text-3); line-height: 1.5;
}

.unit-row {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-family: var(--font); text-align: left;
}
.unit-row:hover:not(:disabled) { border-color: var(--accent); }
.unit-row--current { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
/* Linha que existe mas nao e o que a busca ia abrir: o paciente ja esta na
 * fila, e o clique leva ao atendimento dele em vez de abrir outro (busca do
 * balcao). Fundo recuado e o mesmo recurso do `--off` das pilulas -- a linha
 * continua legivel e clicavel, so deixa de competir com quem pode ser aberto.
 * O que ela E esta dito pelo badge, nao pela cor. */
.unit-row--queued { background: var(--surface-2); border-style: dashed; }
.unit-row--queued .unit-row__name { color: var(--text-2); }
.unit-row__avatar {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex: none;
}
.unit-row--current .unit-row__avatar { color: var(--accent); }
.unit-row__text { flex: 1; min-width: 0; }
.unit-row__name {
  display: block; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unit-row--current .unit-row__name { color: var(--accent); }
.unit-row__meta {
  display: block; font-size: 10px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unit-row__role {
  font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-2); flex: none; white-space: nowrap;
}
.unit-row__mark {
  font-size: 11px; font-weight: 700; color: var(--accent); flex: none; width: 12px;
}

/* Linha da busca do check-in: o botao que ABRE a visita e, ao lado dele, a
 * pilula "pelo convenio" (`.pillpick`, componente do design system -- nada
 * proprio aqui alem da grade de duas colunas).
 *
 * A pilula fica FORA do botao porque controle dentro de <button> nao e HTML
 * valido e porque os dois gestos sao diferentes: um responde quem paga, o
 * outro poe o paciente na fila. Dentro, qualquer clique nela faria o check-in
 * antes de a escolha existir.
 *
 * O balcao nao tem esta linha: la a conta da visita abre no mesmo clique, e e
 * nela que a pergunta mora, como chave do bloco `.recbox` -- ver
 * `_emergency_results.html` e `_visit_body.html`. */
.pickrow { display: flex; align-items: center; gap: 8px; }
.pickrow .unit-row { flex: 1; min-width: 0; }
.pickrow .pillpick { flex: none; }

/* Busca */
.sidebar__search {
  height: 34px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
}
.sidebar__search input {
  font-size: 12px; color: var(--text-3); flex: 1; min-width: 0;
  border: 0; background: transparent; font-family: var(--font);
}
.sidebar__search input:focus { outline: none; }
.sidebar__kbd { font-size: 10px; font-family: var(--mono); color: var(--text-3); }

/* Navegacao */
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__group-label {
  font-size: 9.5px; letter-spacing: 0.1em; color: var(--text-3);
  font-weight: 700; padding: 6px 8px;
}
.sidebar__group-label--spaced { padding: 12px 8px 6px; }
.navitem {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2); background: transparent;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  text-decoration: none;
}
.navitem:hover { background: var(--surface-2); }
.navitem.is-active { color: var(--text); background: var(--surface-2); }
.navitem__dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--border-2); flex: none;
}
.navitem.is-active .navitem__dot { background: var(--accent); }
.navitem__label { flex: 1; white-space: nowrap; }
/* A inicial substitui o rotulo na barra estreita: 12.5px/800, como no arquivo
 * de telas. Duas letras onde a primeira colidiria (Perfis / Profissionais) --
 * duas iniciais iguais nao ajudam ninguem. */
.navitem__initial {
  font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: inherit;
}
.navitem.is-active .navitem__initial { color: var(--accent); }
/* Icone do menu da clinica (`partials/_nav_icon.html`): no lugar do ponto
 * quando expandido, no lugar da inicial quando recolhido. Cinza em repouso,
 * acento no item da pagina atual -- o destaque e a cor do traco mais o fundo
 * que o item ativo ja tinha, nada alem disso. */
.navitem__icon {
  width: 17px; height: 17px; flex: none;
  color: var(--text-3); transition: color 120ms ease;
}
.navitem:hover .navitem__icon { color: var(--text-2); }
.navitem.is-active .navitem__icon { color: var(--accent); }

/* Menu da clinica EXPANDIDO na escala do teste do Inicio (04/10/2026): ~10%
 * acima do resto -- rotulo 12.5 -> 14px, icone 17 -> 20px, barra 236 -> 248px.
 * Escopo pelo `:has(.navitem__icon)`: o menu da rede segue no desenho antigo
 * ate a escala ser aprovada. O icone em repouso sobe de --text-3 para
 * --text-2: no tamanho novo, cinza claro lia como desabilitado. */
/* So no computador: no celular a barra e gaveta de 268px (bloco do fim). */
@media (min-width: 721px) { .sidebar:has(.navitem__icon) { width: 248px; } }
.sidebar:has(.navitem__icon) .sidebar__nav { gap: 3px; }
.sidebar:has(.navitem__icon) .sidebar__group-label { font-size: 10.5px; padding: 6px 10px; }
.sidebar:has(.navitem__icon) .sidebar__group-label--spaced { padding: 14px 10px 6px; }
.navitem:has(.navitem__icon) { font-size: 14px; gap: 11px; padding: 10px 12px; border-radius: 9px; }
.navitem:has(.navitem__icon) .navitem__icon { width: 20px; height: 20px; color: var(--text-2); }
.navitem.is-active:has(.navitem__icon) .navitem__icon { color: var(--accent); }

.navitem__badge {
  font-size: 10px; font-family: var(--mono);
  padding: 1px 6px; border-radius: 99px;
  background: var(--surface-3); color: var(--text-2);
}

/* Rodape */
.sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.sidebar__user {
  display: flex; align-items: center; gap: 9px;
  padding: 8px; border-radius: 9px; border: 1px solid var(--border);
}
.sidebar__avatar {
  width: 26px; height: 26px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex: none;
}
.sidebar__user-text { min-width: 0; }
.sidebar__user-name {
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sidebar__user-role { font-size: 10px; color: var(--text-3); text-decoration: none; }

/* ---- Area principal ---- */
.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.header {
  flex: none; height: 52px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.header__crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3);
}
.header__crumb strong { color: var(--text); font-weight: 600; }
/* Abre a gaveta, e só existe no celular — no computador a barra está na tela
 * e um botão para "abrir" o que já está aberto é ruído. */
.header__menu { display: none; }
.header__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header__clock { font-size: 11px; font-family: var(--mono); color: var(--text-3); }
.header__queue {
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px;
  background: var(--warn-soft); color: var(--warn);
}
.patient-pill {
  display: flex; align-items: center; gap: 8px; margin-left: 6px;
  padding: 4px 10px 4px 5px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.patient-pill__avatar {
  width: 22px; height: 22px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
}
.patient-pill__name { font-size: 11.5px; font-weight: 600; }
.patient-pill__cpf { font-size: 10px; font-family: var(--mono); color: var(--text-3); }

.content { flex: 1; overflow-y: auto; padding: 20px 22px 40px; }
.screen { display: flex; flex-direction: column; gap: 14px; }
/* Escala +10% (04/10/2026), depois do teste do Inicio: entrou primeiro nas
 * telas que mediram bem e depois em todas, a pedido -- inclusive Escala,
 * Tabela de precos e Modelos de documento, que cortam algum texto, e Agenda e
 * Fila, que perdem 10% do que mostram de uma vez. Tela que ficar ruim sai
 * tirando a classe do template. O Inicio NAO usa: a escala dele e feita a mao
 * (`.screen--home`), e o zoom somaria em cima.
 *
 * `zoom` e nao tamanho a tamanho: cresce texto, controle e espaco juntos, na
 * proporcao do design system. O modal NAO entra no teste: o overlay desfaz a
 * escala (1.1 x 1/1.1 = 1) e continua do tamanho e na posicao de sempre.
 * Nenhum JS destas telas posiciona por coordenada -- so o desenho sobre a
 * radiografia faz isso, e o prontuario esta fora. */
@media (min-width: 721px) {
  .screen--scale { zoom: 1.1; }
  /* O que flutua sobre a tela fica fora da escala: o modal e o popup do
   * agendamento (`apptPeek`, agenda/_head.html), que se posiciona pelas
   * coordenadas da janela -- escalado, ele cairia 10% fora do cartao. */
  .screen--scale .modal-overlay,
  .screen--scale .apptpeek-host { zoom: calc(1 / 1.1); }
  /* Prontuario: com a escala as dez abas pediam 80px a mais que a barra tem
   * em tela cheia, e o Historico ia para tras das setas. O respiro lateral
   * de cada aba (13 -> 8px) devolve isso -- com folga para a barra de rolagem
   * vertical das abas compridas -- sem mexer em altura nem texto. */
  .screen--scale .chart-tab { padding-left: 8px; padding-right: 8px; }
}

/* ---- Cabecalho de tela ---- */
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page-head__title {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
.page-head__sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.page-head__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---- KPIs ---- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 14px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
}
.kpi__label {
  font-size: 10.5px; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.04em;
}
.kpi__value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

/* ---- Painel (card grande de conteudo) ---- */
.panel {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.panel__head {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.panel__title { font-size: 13.5px; font-weight: 700; }
.panel__hint { font-size: 10.5px; color: var(--text-3); }
.panel__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
/* Ações do formulário no fim do painel: botão do tamanho do texto, à direita,
 * como nos modais do design system (o `.panel__body` em coluna esticava o
 * botão na largura toda). */
.panel__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
@media (max-width: 720px) {
  .panel__actions .btn { flex: 1; }
}

/* Segmented control */
.segmented {
  display: flex; gap: 3px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.segmented__item {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
  color: var(--text-3); text-decoration: none;
}
.segmented__item.is-active {
  font-weight: 700; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---- Bento grid da home ----
 * O Inicio e o TESTE de escala (04/10/2026): tudo ~10% acima do resto do
 * sistema (titulo 22 -> 24, cartao 17 -> 19, texto 12 -> 13) e a grade sem
 * buraco -- os atalhos viraram cartao e ocupam a sobra da segunda linha. Se a
 * escala for aprovada, ela sobe para as outras telas e este comentario sai. */
.screen--home { gap: 18px; }
.screen--home .page-head__title { font-size: 24px; }
.screen--home .page-head__sub { font-size: 13px; margin-top: 4px; }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bento__card {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  padding: 20px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; min-height: 186px;
  box-shadow: var(--shadow-sm);
}
a.bento__card:hover { border-color: var(--accent-line); }
.bento__card--wide { grid-column: span 2; }
.bento__card--accent { background: var(--accent-soft); border-color: var(--accent-line); }
.bento__card--info { background: var(--info-soft); }
.bento__icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.bento__glyph { width: 20px; height: 20px; }
.bento__card--accent .bento__icon { background: var(--surface); color: var(--accent); }
.bento__card--info .bento__icon { background: var(--surface); color: var(--info); }
/* Um tom claro por cartao, para cada destino se reconhecer pela cor: os seis
 * tons do sistema, nenhum repetido. A cor e de identificacao, nao de estado --
 * o rosado dos Atalhos e so o sexto tom, nao quer dizer erro. */
.bento__card--warn { background: var(--warn-soft); }
.bento__card--plan { background: var(--plan-soft); }
.bento__card--ok { background: var(--ok-soft); }
.bento__card--danger { background: var(--danger-soft); }
.bento__card--warn .bento__icon { background: var(--surface); color: var(--warn); }
.bento__card--plan .bento__icon { background: var(--surface); color: var(--plan); }
.bento__card--ok .bento__icon { background: var(--surface); color: var(--ok); }
.bento__card--danger .bento__icon { background: var(--surface); color: var(--danger); }
.bento__title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.bento__desc { font-size: 13px; color: var(--text-2); margin-top: 5px; line-height: 1.5; }
.bento__note {
  margin-top: auto; padding-top: 16px; font-size: 12.5px; color: var(--text-2);
}
/* Busca dentro do cartao Prontuario: a `.searchbox` da lista de pacientes,
 * solta da largura maxima da barra de filtros e na altura de campo de tela. */
.bento__search { margin-top: auto; padding-top: 16px; }
.bento__search .searchbox { height: 40px; max-width: none; padding: 0 12px; }
.bento__search .searchbox__input { font-size: 13px; }
.bento__actions {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.bento__actions .btn { justify-content: flex-start; }

/* ---- Variantes do modal ----
 * 720px e o modal simples (troca de unidade). 780px com coluna lateral de
 * 292px e o modal de cadastro com resumo/consequencia ao lado (referencia:
 * modal "Nova conta a pagar" no arquivo "todas as telas"). */
.modal--wide { max-width: 780px; }
/* Modal de item da tabela: 764px e corpo com os blocos a 16px um do outro,
   como no arquivo do design system. O rotulo e o controle continuam juntos
   dentro de cada bloco -- e por isso o corpo NAO usa a margem do
   `.modal__section-label`, que existe para o corpo de gap 8px. */
/* Altura estável: o modal do item tem o MESMO tamanho antes e depois de o
 * procedimento ser escolhido -- os campos aparecem dentro dele, ele não cresce
 * em volta deles. Sem isso a revelação progressiva encolhia a caixa (só dois
 * campos no corpo) e a escolha do procedimento fazia a tela pular.
 * O número é a altura natural do modal cheio, medida no navegador; o
 * `calc(100vh - 120px)` é o mesmo teto do `.modal`, para tela baixa continuar
 * cabendo. Quem passa disso rola no corpo, que é a regra do design system. */
.modal--item { max-width: 764px; height: min(860px, calc(100vh - 120px)); }
/* Modal "Resolver financeiro": 1180px, a largura do arquivo do design system
 * (`modal/Gestao Odonto - Modal Financeiro`). Ele e mais largo que todos os
 * outros porque mostra DUAS coisas ao mesmo tempo e as duas sao o assunto: o
 * que se esta lancando e o orcamento contra o qual se lanca. Espremer a
 * lateral poria o "por que R$ 3.460?" do paciente atras de um clique.
 *
 * O rodape e o cabecalho ficam fixos e so a area do meio rola -- a barra da
 * alocacao precisa continuar visivel enquanto a pessoa rola a lista de
 * lancamentos, porque e ela que diz quanto falta. */
.modal--plan { max-width: 1180px; }
/* Com altura fixa, o form precisa CRESCER para o rodapé encostar no fim do
 * modal -- senão sobra faixa vazia embaixo dele. */
.modal--item .modal__form { flex: 1; }
.modal__body--item { padding: 18px 20px; gap: 16px; }
.modal__body--item .modal__section-label { margin: 0; }
/* Quando corpo e rodape estao dentro de um <form>, o form precisa herdar a
 * coluna do modal -- senao o corpo para de rolar e o rodape sai da tela. */
.modal__form { display: flex; flex-direction: column; min-height: 0; }
.modal__body--split {
  display: grid; grid-template-columns: 1fr 292px; gap: 20px;
  align-items: start; padding: 18px 20px;
}
.modal__aside { display: flex; flex-direction: column; gap: 14px; }
.modal__foot--actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.modal__foot--actions > span { flex: 1; min-width: 180px; }
.modal__actions { margin-left: auto; display: flex; gap: 8px; }
.modal__error {
  margin: 0 20px 4px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--danger); background: var(--danger-soft);
  font-size: 11.5px; color: var(--text); line-height: 1.5;
}

@media (max-width: 900px) {
  .modal__body--split { grid-template-columns: 1fr; }
}

/* ---- Escopo REDE (organizacao) ----
 * A clinica e a rede sao dois guarda-chuvas: o cartao de contexto e a
 * navegacao trocam junto com o escopo. Aqui ficam so as diferencas visuais;
 * o resto da sidebar e o mesmo shell. */
.unit-switcher--org {
  cursor: default;
  border-color: var(--plan);
  background: var(--plan-soft);
}
.unit-switcher--org:hover { border-color: var(--plan); }
.unit-switcher--org .unit-switcher__avatar { background: var(--plan); }
.unit-switcher__scope {
  flex: none;
  font-size: 8.5px; font-family: var(--mono); font-weight: 700;
  letter-spacing: 0.08em; color: var(--plan);
  padding: 3px 6px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--plan);
}

/* Item que troca de escopo (sobe para a rede / volta para a clinica) */
.navitem--scope { margin-top: 14px; color: var(--text-3); }
.navitem--scope:hover { color: var(--plan); background: var(--plan-soft); }
.navitem__arrow { font-size: 11px; flex: none; }
.navitem--back .navitem__arrow { width: 6px; text-align: center; }

/* Botao de saida para a rede no rodape do modal de unidade */
.netbtn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 36px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text-2); font-family: var(--font); font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.netbtn:hover { border-color: var(--plan); color: var(--plan); }

/* Marcador de escopo no breadcrumb do header */
.header__scope {
  font-size: 8.5px; font-family: var(--mono); font-weight: 700;
  letter-spacing: 0.08em; color: var(--plan);
  padding: 3px 6px; border-radius: 99px;
  background: var(--plan-soft); border: 1px solid var(--plan);
}

/* ---- Cartao de conta (rodape da sidebar) ----
 * Vira um menu: administrar a rede e acao da conta, nao do menu da clinica.
 * O painel expande em fluxo acima do cartao porque a sidebar tem overflow
 * auto e cortaria um popover absoluto. */
.sidebar__account { display: flex; flex-direction: column; gap: 6px; }
.sidebar__user {
  width: 100%;
  background: var(--surface);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.sidebar__user:hover { border-color: var(--accent); }
.sidebar__user.is-open { border-color: var(--accent); background: var(--surface-2); }
.sidebar__user-name { display: block; }
.sidebar__user-role {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__user-caret {
  margin-left: auto; flex: none; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.sidebar__user:hover .sidebar__user-caret,
.sidebar__user.is-open .sidebar__user-caret { color: var(--accent); }

.usermenu {
  border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden;
}
.usermenu__head {
  padding: 9px 11px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.usermenu__name {
  font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usermenu__meta {
  font-size: 9.5px; font-family: var(--mono); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usermenu__item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border: 0; background: transparent;
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  color: var(--text-2); text-decoration: none; cursor: pointer; text-align: left;
}
.usermenu__item:hover { background: var(--surface-2); color: var(--text); }
.usermenu__item--danger { border-top: 1px solid var(--border); color: var(--text-3); }
.usermenu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.usermenu__arrow { margin-left: auto; font-size: 10px; }
/* Linha do tema: item do menu com o interruptor encostado a direita. */
.usermenu__theme input { display: none; }
.usermenu__switch {
  margin-left: auto; width: 26px; height: 15px; border-radius: 99px;
  background: var(--border-2); position: relative; flex: none;
  transition: background 120ms;
}
.usermenu__switch span {
  position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 99px; background: var(--surface);
  transition: left 120ms;
}
.usermenu__theme input:checked + .usermenu__switch { background: var(--accent); }
.usermenu__theme input:checked + .usermenu__switch span { left: 13px; background: var(--on-accent); }

/* Cartao da conta do menu da clinica na escala do teste do Inicio
 * (04/10/2026): avatar 26 -> 30px, nome 11.5 -> 13px. */
.sidebar:has(.navitem__icon) .sidebar__user { padding: 9px 10px; gap: 10px; }
.sidebar:has(.navitem__icon) .sidebar__avatar { width: 30px; height: 30px; font-size: 11px; }
.sidebar:has(.navitem__icon) .sidebar__user-name { font-size: 13px; }
.sidebar:has(.navitem__icon) .sidebar__user-role { font-size: 11px; }

/* ---- Troca de usuario (atalho de desenvolvimento) ----
 * Nao faz parte do design system. Herda a marca do `.devbtn`
 * (components.css): tracejado e --warn, para nunca ser confundido com uma
 * acao de producao. So existe com DEBUG=True. */
/* Teto de altura porque recolhida a `.usermenu` e `position: fixed` e nao rola
 * junto com a sidebar: numa clinica com 30 usuarios a lista empurraria "Sair"
 * para fora da tela. */
.devswitch {
  border-top: 1px dashed var(--warn); padding: 7px 0 4px;
  max-height: 40vh; overflow-y: auto;
}
.devswitch__label {
  padding: 0 11px 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--warn);
}
.devswitch__group {
  padding: 6px 11px 3px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-3);
}
.devswitch__item {
  width: 100%; display: flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border: 0; background: transparent;
  font-family: var(--font); text-align: left; cursor: pointer;
}
.devswitch__item:hover { background: var(--warn-soft); }
.devswitch__item:disabled { cursor: default; opacity: 0.55; }
.devswitch__item:disabled:hover { background: transparent; }
.devswitch__user {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-2);
}
.devswitch__item:hover .devswitch__user { color: var(--text); }
.devswitch__role {
  margin-left: auto; font-size: 10px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==== CELULAR ============================================================
 *
 * O design system desenha o telefone: `design_system/modal/Gestao Odonto -
 * Visao do Dentista (standalone).html` traz a moldura de 390px lado a lado
 * com a de computador (`isMobile` / `isDesktop`). Os valores daqui saem de
 * lá — 12px/14px de respiro no conteúdo, alvo de toque de 44px, cartão em
 * vez de linha de tabela.
 *
 * 720px é a fronteira, e é a mesma que `prontuario.css` já usava. Telefone
 * em pé cabe folgado abaixo dela; deitado (844px de largura) fica com o
 * desenho de computador, que é o certo — lá o que falta é altura, não
 * largura.
 *
 * **A barra vira gaveta, não barra de abas.** O mockup do dentista põe uma
 * barra inferior de quatro itens, mas ela é a navegação daquela tela
 * sozinha. Este sistema tem dois escopos (clínica e rede), seis itens no
 * menu da clínica e oito no da rede, mais seletor de unidade, busca, tema e
 * conta. Quatro casas não cabem nisso, e escolher quatro obrigaria a
 * inventar um "Mais" que o design system não tem. A gaveta é a MESMA
 * sidebar, com os mesmos itens e a mesma troca de escopo — seguir o
 * componente mais próximo, como manda o CLAUDE.md, em vez de inventar um
 * padrão novo de navegação.
 */
@media (max-width: 720px) {
  /* `dvh` e não `vh`: no telefone a barra de endereço entra e sai, e `100vh`
   * é sempre a altura SEM ela — o rodapé de qualquer modal ficaria escondido
   * atrás da barra do navegador enquanto ela estivesse visível. */
  .app { height: 100dvh; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 90;
    width: 268px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow-lg);
  }
  .app--nav .sidebar { transform: none; }
  /* Recolher não existe aqui (ver o @media de 721px lá em cima), então o
   * gatilho de recolher também não: ele mandaria a gaveta para um desenho
   * que a largura dela não usa. */
  .sidebar__collapse { display: none; }

  .nav-scrim { display: none; }
  .app--nav .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: oklch(0.26 0.02 225 / 0.45);
  }

  /* ---- Cabeçalho ---- */
  .header { padding: 0 12px; gap: 8px; }
  .header__menu {
    flex: none; width: 34px; height: 34px; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--surface-2); cursor: pointer;
  }
  .header__menu span {
    display: block; width: 15px; height: 1.5px; border-radius: 2px;
    background: var(--text-2);
  }
  /* O caminho inteiro não cabe em 390px; o que identifica a tela é a ponta.
   * A tarja REDE fica: ela não é migalha, é o aviso de que os dados na tela
   * são de todas as clínicas — some junto e a pessoa lê a rede como se fosse
   * a unidade em que estava. */
  .header__crumb { min-width: 0; font-size: 11px; gap: 6px; }
  .header__crumb > span:not(.header__scope) { display: none; }
  .header__crumb strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header__clock { display: none; }

  .content { padding: 12px 14px 28px; }

  /* Cabeçalho de tela: título em cima, ações embaixo. `margin-left: auto`
   * empurra as ações para a direita de uma linha que não tem largura para
   * isso — a barra inteira estourava 30px além da tela e levava o conteúdo
   * junto, criando rolagem horizontal na página. */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head__actions { margin-left: 0; flex-wrap: wrap; }

  /* Quatro KPIs em 350px dariam 80px por cartão — não cabe o número, que é a
   * única coisa que um KPI tem para dizer. Dois por linha mantêm o valor
   * legível e a leitura de par em par. */
  .kpis,
  .bento { grid-template-columns: repeat(2, 1fr); }

  /* ---- Modal vira folha de tela inteira ----
   * Em 390px não há 60px de respiro para dar: o modal de 720px (e o de 1000px
   * do agendamento) ocuparia a tela toda de qualquer jeito, e a moldura
   * arredondada boiando viraria uma borda inútil de 1px em volta de tudo. O
   * componente mais próximo no design system é o painel de execução do
   * telefone: tela cheia, corpo rolando, ação primária larga no rodapé. */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    max-width: none; max-height: none; height: 100dvh;
    border: 0; border-radius: 0;
  }
  .modal__head,
  .modal__body,
  .modal__foot { padding-left: 14px; padding-right: 14px; }
  .modal__hint { display: none; }  /* "esc para fechar" / "⌘ enter salva" */
  .modal__body--split { grid-template-columns: 1fr; }
  .modal__error { margin-left: 14px; margin-right: 14px; }
  /* Empilhado, `align-items: center` do `--actions` centraria cada bloco na
   * horizontal e a explicação nasceria estreita no meio do rodapé. */
  .modal__foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .modal__actions { margin-left: 0; width: 100%; }
  .modal__actions .btn { flex: 1; height: 46px; }
  .modal__foot--actions > span { min-width: 0; }

  /* A caixa do convenio nao cabe ao lado da linha em 390px -- ela empurraria o
   * nome do paciente para tres letras. Vai para baixo, ocupando a largura, e
   * cresce para alvo de toque: e a mesma decisao que a busca da fila toma
   * aqui (32px e medida de ponteiro). Continua abaixo do botao, na ordem em
   * que se le: reconhecer o paciente, depois dizer quem paga.
   *
   * Indentada nos mesmos 25px do `.reveal`, e colada na linha (`row-gap`
   * menor que o `gap` entre linhas): empilhada e alinhada a esquerda, ela
   * ficaria a meio caminho entre dois pacientes e leria como caixa do de
   * baixo -- que e o proximo nome, nao o dono da carteirinha. */
  .pickrow { flex-wrap: wrap; row-gap: 5px; }
  .pickrow .pillpick { flex: 1 1 100%; margin-left: 25px; }
  .pickrow .pillpick__opt { flex: 1; justify-content: center; min-height: 42px; }
}