/* ============================================================
   Agenda · estrutura e layout (herdado do Seiva "Folha", 2026-09-04)
   ------------------------------------------------------------
   Este arquivo cuida de LAYOUT: casca do app, grades, formularios,
   tabelas, telas. As CORES e a tipografia vem de tokens.css (paleta) e
   identidade.css (a cor de destaque desta agenda), carregados DEPOIS
   deste — eles revestem as mesmas classes. Os nomes antigos (--azul,
   --linha…) apontam para os tokens, entao tudo aqui segue a paleta e
   ganha modo claro/escuro de uma vez.
   ============================================================ */
:root {
  --azul: var(--nt-brand);
  --azul-escuro: var(--nt-brand-deep);
  --texto: var(--nt-ink);
  --cinza: var(--nt-muted);
  --linha: var(--nt-line);
  --fundo: var(--nt-bg2);
  --branco: var(--nt-panel);
  --ok-fundo: var(--nt-ok-soft);   --ok-borda: var(--nt-ok);
  --erro-fundo: var(--nt-risk-soft); --erro-borda: var(--nt-risk);
}

* { box-sizing: border-box; }

/* O atributo `hidden` tem a palavra final em TODA a pagina, mesmo onde uma
   regra da um `display` explicito ao elemento. */
[hidden] { display: none !important; }

/* SO PARA O LEITOR DE TELA: fora da tela, mas lido em voz alta (cabecalho
   da coluna de acoes das tabelas, por exemplo). */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0;
  clip-path: inset(50%);
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.5;
}

/* --- Conteudo: TRES larguras com nome (nao por max-width solto) ---
     .conteudo.tela-leitura — 720 px: leitura e formulario;
     .conteudo              — 960 px: o padrao (blocos, cartoes, tabela curta);
     .conteudo.tela-larga   — 1200 px: lista/tabela de muitas colunas. */
.conteudo { max-width: 960px; margin: 32px auto; padding: 0 24px; }
.conteudo.tela-leitura { max-width: 720px; }
.conteudo.tela-larga { max-width: 1200px; }
h1 { margin: 0 0 4px; font-size: 26px; }
h2 { margin-top: 32px; font-size: 19px; }
/* Titulo de bloco/cartao: um <h2> (degrau certo depois do h1) com a
   aparencia menor de um titulo de cartao. */
h2.titulo-bloco { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.sub { color: var(--cinza); margin-top: 0; }

/* --- Avisos (flash) --- */
.aviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok-borda); }
.aviso-erro { background: var(--erro-fundo); border-color: var(--erro-borda); }
.aviso-aviso { background: #fff8ec; border-color: #e0a93a; color: var(--nt-alert); }

/* --- Formularios --- */
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
input {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--linha); border-radius: 8px; font-weight: 400;
}
input:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
select {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--branco);
}
select:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  font-family: inherit; border: 1px solid var(--linha); border-radius: 8px;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
label.checkbox { display: flex; align-items: center; gap: 8px; }
label.checkbox input { width: auto; margin-top: 0; }
.sub-linha { color: var(--cinza); font-size: 12px; margin-top: 2px; }
/* 720 px: a largura de LEITURA/FORMULARIO (uma das tres com nome). */
.formulario { max-width: 720px; }
.grade-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.grade-campos.dois { grid-template-columns: repeat(2, 1fr); }
/* Sem isto, uma coluna da grade cresce ate caber o conteudo (uma tabela
   larga, um SVG) e a PAGINA INTEIRA passa a rolar de lado. */
.grade-campos > * { min-width: 0; }

button, .botao {
  display: inline-block; background: var(--azul); color: #fff; border: 0;
  padding: 11px 18px; font-size: 15px; font-weight: 600; border-radius: 8px;
  cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .botao:hover { background: var(--azul-escuro); }
.botao.secundario, button.secundario {
  background: var(--branco); color: var(--azul); border: 1px solid var(--linha);
}
.botao.secundario:hover, button.secundario:hover { background: var(--fundo); border-color: var(--azul); }
button.secundario.perigo, .botao.secundario.perigo { color: var(--erro-borda); }
button.secundario.perigo:hover, .botao.secundario.perigo:hover {
  border-color: var(--erro-borda); background: var(--erro-fundo);
}

/* --- Acoes, tabelas, cartoes, etiquetas --- */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; align-items: center; }
.cabecalho-detalhe { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabecalho-detalhe .acoes { margin: 4px 0 0; }

/* `position: relative`: o rotulo so-de-leitor (absoluto) dentro de um <th>
   precisa de um ancestral posicionado — senao ele se ancora no <body> e
   alarga a pagina no celular. */
.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: 8px; overflow: hidden; position: relative; }
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.tabela th { background: var(--fundo); font-size: 13px; color: var(--cinza); }
.tabela td { vertical-align: middle; }
.tabela.compacta th, .tabela.compacta td { padding: 8px 10px; font-size: 14px; }
/* Largura minima de coluna, posta no <th> (o cabecalho puxa a coluna toda). */
.tabela th.col-larga { min-width: 180px; }
.tabela th.col-media { min-width: 80px; }
.tabela tr.inativa td { color: var(--cinza); }
.tabela tr.vigente { background: var(--ok-fundo); }
/* Rede de seguranca de toda tabela larga: rola em vez de cortar. */
.rolagem { overflow-x: auto; scrollbar-width: thin; }
.nowrap { white-space: nowrap; }
.vazio { color: var(--cinza); }

/* Acoes numa linha de tabela. Em <td> a caixa continua sendo celula (um <td>
   com display:flex deixa de ser celula); quem espaca as acoes e a margem. */
.acoes-linha { display: flex; gap: 12px; align-items: center; }
td.acoes-linha { display: table-cell; vertical-align: middle; }
td.acoes-linha > *:not(:last-child) { margin-right: 12px; }
td.acoes-linha > * { white-space: nowrap; }
.acoes-linha a { color: var(--azul); text-decoration: none; font-weight: 600; }
.acoes-linha a:hover { text-decoration: underline; }
.em-linha { display: inline; }
.link-perigo {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--erro-borda); font-weight: 600; font-size: inherit;
}
.link-perigo:hover { background: none; text-decoration: underline; }
.link-acao {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--azul); font-weight: 600; font-size: inherit;
}
.link-acao:hover { background: none; text-decoration: underline; }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.cartao h3 { margin: 0 0 8px; font-size: 16px; }
.cartao p:last-child, .cartao ol:last-child, .cartao ul:last-child { margin-bottom: 0; }
.dados-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; }
.dados-grade > div { font-size: 14px; }
.rotulo { display: block; color: var(--cinza); font-size: 12px; font-weight: 600; }

.etiqueta {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--fundo); color: var(--cinza);
}
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok-borda); margin-left: 6px; }

.dica { margin-top: 24px; padding: 14px 16px; background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 8px; font-size: 14px; }

/* --- Trilha (breadcrumb) e links dentro de texto --- */
.trilha { color: var(--cinza); font-size: 13px; margin: 0 0 4px; }
/* Link dentro de texto se sublinha (a cor sozinha nao basta para quem nao
   separa a cor do link da cor do texto). Sublinhado discreto: 3 px abaixo,
   em 45 % da cor do proprio link. */
.trilha a, p a, .dica a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.trilha a { color: var(--azul); }
.trilha a:hover, p a:hover, .dica a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------
   Responsivo. Breakpoints: celular <=640 · tablet 641–1024 · computador
   >1024. O menu lateral vira gaveta abaixo de 900 px (bloco proprio).
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .grade-campos { grid-template-columns: repeat(2, 1fr); }
}

/* Mostrar/esconder por tamanho de tela. Duas classes, um lugar só: quem
   escreve o template diz "isto é para o computador" ou "isto é para o
   celular" e não repete media query em cada arquivo. */
.so-celular { display: none; }
@media (max-width: 640px) {
  .so-computador { display: none !important; }
  .so-celular { display: inline-flex; }
}

@media (max-width: 640px) {
  .grade-campos, .grade-campos.dois { grid-template-columns: 1fr; }
  .conteudo { padding: 0 16px; }
  h1 { font-size: 23px; }
  /* Acoes em DUAS colunas; um botao sozinho (ou o ultimo de numero impar)
     ocupa a linha inteira. */
  .acoes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    align-items: stretch;
  }
  .acoes > .botao, .acoes > button, .acoes > form { width: 100%; }
  .acoes > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .acoes > .botao, .acoes > button, .acoes form button {
    padding-left: 12px; padding-right: 12px; font-size: 14px;
  }
  .acoes > form.em-linha { display: block; }
  .acoes > form.em-linha button { width: 100%; }
  .cabecalho-detalhe .acoes { width: 100%; }
  /* A idade e a terceira informacao da lista de pacientes: no celular ela
     sai para o nome e o telefone caberem sem rolagem. */
  .col-idade { display: none; }
  /* O paragrafo de apresentacao da pagina so empurra o conteudo no celular. */
  .conteudo > .sub { display: none; }
  /* EXCECAO: quando o `.sub` nao apresenta a tela e sim DIZ O QUE FAZER
     (remarcar, editar, bloqueio), ele continua visivel no celular. */
  .conteudo > .sub.tarefa { display: block; }
  .acoes-linha { gap: 18px; flex-wrap: wrap; }
  td.acoes-linha > *:not(:last-child) { margin-right: 18px; }
  /* Qualquer tabela rola na horizontal sem estourar a tela, mesmo sem a
     .rolagem. Mais especifico que `.tabela{overflow:hidden}` dos tokens. */
  .conteudo .tabela {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* O botao de gravar a duas ou tres telas do topo (editar, pessoal,
     bloqueio): a barra de acoes do formulario gruda no rodape da tela. */
  .formulario > .acoes {
    position: sticky; bottom: 0; z-index: 1;
    margin: 0 -16px; padding: 10px 16px;
    background: var(--fundo); border-top: 1px solid var(--nt-line);
  }
}

/* ============================================================
   Casca do app: menu lateral. As cores vem dos tokens --nt-sidebar*
   (tokens.css / identidade.css); o layout e aqui.
   ============================================================ */
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--nt-sidebar);
  border-right: 1px solid var(--nt-sidebar-line);
  color: var(--nt-sidebar-fg);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  /* `dvh`: no celular a barra do navegador come parte da `vh` e o rodape
     (com "Sair") ficava fora da tela. */
  height: 100dvh;
}
.lateral .marca-lateral { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.02em; padding: 0 8px; }
.lateral .marca-icone { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; }
.lateral .marca-legenda { color: var(--nt-sidebar-dim); font-size: 12px; padding: 2px 8px 8px; }

/* O botao "Agendar consulta" da casca (README, item 13). É o ÚNICO botão
   cheio do menu: no computador ele fica logo abaixo da marca, antes dos
   grupos; no celular, como pílula na barra do topo. */
.lateral .agendar-lateral {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 4px; min-height: 44px; width: 100%;
  background: var(--nt-brand-fundo); color: #fff;
  border-radius: 11px; font-weight: 700; font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px var(--nt-brand);
}
.lateral .agendar-lateral:hover { filter: brightness(1.08); }
.lateral .agendar-lateral:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.agendar-lateral .mais, .agendar-topo .mais {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); font-size: 16px; line-height: 1;
}
.topo-mobile .agendar-topo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 10px;
  background: var(--nt-brand-fundo); color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.topo-mobile .agendar-topo:hover { filter: brightness(1.08); }

.lateral .grupo-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.lateral .grupo-titulo {
  text-transform: uppercase; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; color: var(--nt-sidebar-dim); padding: 4px 10px 6px;
}
.lateral .item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  color: var(--nt-sidebar-fg); text-decoration: none;
  font-weight: 600; font-size: 14px; line-height: 1.1;
}
.lateral a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral .item.ativo { background: var(--nt-sidebar-active); color: #fff; }
.lateral .item .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; }
.lateral .item.ativo .ponto { opacity: .9; }
.lateral .item .contador {
  margin-left: auto; min-width: 20px; text-align: center;
  background: var(--nt-sidebar-active); color: #fff;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  padding: 2px 6px; line-height: 1.2; flex: 0 0 auto;
}
.lateral .item.ativo .contador { background: rgba(255, 255, 255, .22); }
/* O rodape gruda no fim da gaveta: com muitos itens de menu (o medico ve
   treze), "Sair" ficava abaixo da dobra e so aparecia rolando. */
.lateral .rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nt-sidebar-line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; position: sticky; bottom: 0; background: var(--nt-sidebar); }
.lateral .tema-btn {
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--nt-sidebar-line);
  border-radius: 9px; padding: 7px 12px; font-weight: 600; font-size: 13px; box-shadow: none; width: 100%; text-align: left;
}
.lateral .tema-btn:hover { background: rgba(255, 255, 255, .15); filter: none; transform: none; }
.lateral .usuario-lateral { color: var(--nt-sidebar-fg); font-size: 13px; padding: 0 2px; }
.lateral .rodape .sair { color: var(--nt-sidebar-link); font-size: 13px; text-decoration: none; font-weight: 600; padding: 0 2px; min-width: 44px; }
.lateral .rodape .sair:hover { color: #fff; text-decoration: underline; }

.area { min-width: 0; display: flex; flex-direction: column; }
/* `width: 100%` + `min-width: 0`: o conteudo e item de um flex em coluna com
   margem lateral `auto`, e sem isso ele seria dimensionado pelo proprio
   conteudo e ESTOURARIA a coluna em janela estreita. */
.app-shell .conteudo { margin: 28px auto; min-width: 0; width: 100%; }

/* Botao de tema fora do app (telas sem menu lateral). */
.tema-flutuante {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  background: var(--nt-panel); color: var(--nt-brand-deep);
  border: 1px solid var(--nt-line); border-radius: 9px;
  padding: 7px 12px; font-weight: 600; font-size: 13px; box-shadow: var(--nt-shadow);
}
.tema-flutuante:hover { filter: none; transform: none; border-color: var(--nt-brand); }

/* ============================================================
   Topo do celular + menu lateral colapsavel (gaveta). Em telas largas o
   menu e a coluna fixa e a barra do topo nem existe; abaixo de 900 px a
   barra aparece (≡ + marca) e o menu vira gaveta com fundo escuro.
   ============================================================ */
.topo-mobile {
  display: none; align-items: center; gap: 9px;
  padding: 6px 12px; min-height: 56px;
  background: var(--nt-panel); border-bottom: 1px solid var(--nt-line);
  position: sticky; top: 0; z-index: 40;
}
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  background: var(--nt-panel); color: var(--nt-brand-deep);
  border: 1px solid var(--nt-line); border-radius: 10px;
  font-weight: 700; font-size: 19px; box-shadow: none;
}
.menu-toggle:hover { background: var(--nt-hover); filter: none; transform: none; }
/* so o simbolo ≡: o rotulo "Menu" continua no HTML para o leitor de tela */
.menu-toggle .rotulo-menu { display: none; }
.topo-mobile .marca-topo { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 18px; color: var(--nt-ink); letter-spacing: -.02em; min-width: 0; }
.topo-mobile .marca-topo .marca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-mobile .marca-icone-topo { width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; }
.backdrop-menu { display: none; }

@media (max-width: 900px) {
  .topo-mobile { display: flex; }
  /* Uma coluna: o conteudo ocupa toda a largura; o menu sai do fluxo. */
  .app-shell { grid-template-columns: 1fr; }
  .app-shell .conteudo { margin-left: 0; margin-right: 0; }
  .lateral {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: min(284px, 82vw); height: 100vh; height: 100dvh;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 44px -12px rgba(0, 0, 0, .55);
  }
  .app-shell.menu-aberto .lateral { transform: translateX(0); }
  .backdrop-menu {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, .44);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .app-shell.menu-aberto .backdrop-menu { opacity: 1; pointer-events: auto; }
  /* Na gaveta o menu e tocado com o dedo: alvo de 44 px. */
  .lateral .item { min-height: 44px; }
  /* Alvos de toque em tudo que se toca abaixo de 900 px. Estas regras
     valem no TABLET tambem (641-900 px): quem segura um iPad toca com o
     mesmo dedo de quem segura um telefone. */
  .acoes-linha a, .link-acao, .link-perigo {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .lateral .rodape .sair { display: inline-flex; align-items: center; min-height: 44px; }
  /* Telefone de tabela e para tocar e ligar: alvo de 44 px. */
  .tabela td a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .lateral .rodape { gap: 0; }
  main.conteudo details > summary { min-height: 44px; }
  /* Inputs >=16px evitam o zoom automatico do iOS. */
  input, select, textarea { font-size: 16px; }
  .entrar-campos input { font-size: 16px; }
  .entrar-tema { width: 44px; height: 44px; }
  .botao, button[type="submit"], button.secundario, .tema-btn { min-height: 44px; }
  label.checkbox { min-height: 44px; align-items: center; }
  .topo-mobile .marca-topo .marca-nome { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lateral, .backdrop-menu { transition: none; }
}

/* ============================================================
   Tela de entrar (login / primeiro acesso): painel de marca a esquerda +
   coluna do formulario a direita. O painel usa a cor de destaque e a cor
   do menu lateral (tokens), entao segue a identidade automaticamente.
   ============================================================ */
.conteudo.tela-entrar { max-width: none; margin: 0; padding: 0; }
.tela-entrar > .aviso {            /* flash flutua sobre a tela cheia */
  position: fixed; top: 18px; left: 0; right: 0; margin: 0 auto;
  z-index: 60; width: max-content; max-width: min(540px, calc(100vw - 32px));
  box-shadow: var(--nt-shadow);
}
.entrar-tela { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 100vh; }

/* painel de marca (esquerda) — texto em tons de papel, com opacidade */
.entrar-marca {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--nt-brand-fundo), var(--nt-sidebar));
  padding: 44px 48px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 30px;
  color: #F4F1E8;
}
.entrar-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; position: relative; width: max-content; }
.entrar-logo img { display: block; border-radius: 12px; }
.entrar-logo .nome { font: 800 22px 'Hanken Grotesk', system-ui, sans-serif; color: #F4F1E8; letter-spacing: -.01em; }
.entrar-hero-texto { position: relative; max-width: 420px; }
.entrar-mote {
  font: 800 34px/1.16 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: -.02em; color: #F4F1E8; margin: 0 0 14px;
}
.entrar-mote em { font-family: 'Spectral', serif; font-weight: 500; font-style: italic; color: var(--nt-brand-soft-line); }
.entrar-sub-marca { font: 400 15px/1.6 'Hanken Grotesk', system-ui, sans-serif; color: rgba(244, 241, 232, .82); margin: 0 0 26px; }
.entrar-pontos { display: flex; flex-direction: column; gap: 13px; }
.entrar-ponto { display: flex; align-items: center; gap: 11px; font: 600 13.5px 'Hanken Grotesk', system-ui, sans-serif; color: rgba(244, 241, 232, .9); }
.entrar-ponto .icone {
  flex: none; width: 28px; height: 28px; border-radius: 9px; color: var(--nt-brand-soft-line);
  background: rgba(244, 241, 232, .14); display: flex; align-items: center; justify-content: center;
}
.entrar-assistiva { position: relative; font: 400 12px 'Hanken Grotesk', system-ui, sans-serif; color: rgba(244, 241, 232, .62); }

/* coluna do formulario (direita) */
.entrar-form { position: relative; background: var(--nt-bg); padding: 26px 40px 20px; display: flex; flex-direction: column; }
.entrar-topo { display: flex; align-items: center; justify-content: space-between; }
.entrar-tema, .entrar-tema:hover {
  width: 38px; height: 38px; padding: 0; border-radius: 11px;
  border: 1px solid var(--nt-line); background: var(--nt-panel);
  display: flex; align-items: center; justify-content: center; color: var(--nt-body);
}
.entrar-tema:hover { border-color: var(--nt-brand); color: var(--nt-brand-text); }
:root[data-theme="dark"] .entrar-tema .icone-claro { display: none; }
:root:not([data-theme="dark"]) .entrar-tema .icone-escuro { display: none; }
.entrar-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 0; }
.entrar-cartao { width: 100%; max-width: 392px; }
.entrar-cabeca { text-align: center; margin-bottom: 24px; }
.entrar-cabeca h1 { font: 800 26px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -.02em; margin: 0 0 6px; }
.entrar-cabeca p { font: 400 14px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted); margin: 0; }
.entrar-campos { display: flex; flex-direction: column; gap: 15px; }
.entrar-campos label {
  display: block; margin: 0;
  font: 700 11px 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nt-muted);
}
.entrar-campos input {
  margin-top: 7px; height: 46px; padding: 0 14px; font-size: 14.5px;
  border-radius: 12px; background: var(--nt-panel);
}
.entrar-campos input:focus { outline: none; border-color: var(--nt-brand); box-shadow: 0 0 0 3px var(--nt-brand-soft); }
.entrar-campos input:focus-visible { outline: 2px solid var(--nt-brand-deep); outline-offset: 1px; }
.entrar-campos .meia { display: flex; gap: 12px; }
.entrar-campos .meia label { flex: 1; }
.entrar-nota-primeira {
  background: var(--nt-brand-soft); border: 1px solid var(--nt-brand-soft-line);
  border-radius: 12px; padding: 11px 13px;
  font: 500 12.5px/1.5 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-brand-deep);
}
.entrar-enviar, .entrar-enviar:hover {
  width: 100%; height: 48px; border-radius: 13px; margin-top: 4px;
  font: 700 15px 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--nt-brand-fundo); color: #fff;
  box-shadow: 0 12px 24px -12px var(--nt-brand);
}
.entrar-enviar:hover { filter: brightness(1.06); }
.entrar-divisor {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted);
}
.entrar-divisor::before, .entrar-divisor::after { content: ""; flex: 1; height: 1px; background: var(--nt-line); }
.entrar-local { display: flex; align-items: center; justify-content: center; gap: 7px; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted); }
.entrar-rodape { text-align: center; font: 400 12px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted); padding-top: 14px; }

/* celular: o painel vira faixa compacta (so a marca) */
@media (max-width: 900px) {
  .entrar-tela { grid-template-columns: 1fr; }
  .entrar-marca { padding: 18px 22px; flex-direction: row; align-items: center; gap: 14px; }
  .entrar-hero-texto, .entrar-marca .entrar-assistiva { display: none; }
  .entrar-form { padding: 20px 20px 16px; }
}

/* ------------------------------------------------------------------
   Pacientes e clinicas (OS-1, 2026-09-04). Tres acrescimos pequenos:
   a barra de busca, a bolinha de cor da clinica e o respiro das
   etiquetas que vem depois de um texto na mesma linha.
   ------------------------------------------------------------------ */

/* Barra de busca: campo que estica e botoes do lado, numa linha so. No
   celular vira coluna (o campo sozinho ja ocupa a largura). */
.busca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.busca input { flex: 1 1 260px; width: auto; margin-top: 0; }
.busca .botao, .busca button { margin: 0; white-space: nowrap; }

/* O seletor de cor nao e um campo de texto: com padding e largura de 100%
   ele vira um risco fino. Aqui ele tem tamanho de amostra de cor. E a
   caixa de marcar ao lado dele se alinha pelo meio, nao pelo topo. */
input[type="color"] { width: 68px; height: 42px; padding: 4px; cursor: pointer; }
.grade-campos > label.checkbox { align-self: center; }

/* A cor da clinica, do tamanho de um ponto, antes do nome. So decora: a
   coluna "Tipo" e a etiqueta ao lado e que dizem o que a linha e (cor
   sozinha nao informa quem nao a distingue). */
.bolinha-cor {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline;
  border: 1px solid rgba(0, 0, 0, .18);
}

/* Etiqueta logo depois de um nome (cadastro incompleto, inativo) precisa
   de um respiro; a .etiqueta.ok ja tinha o seu. E nenhuma pilula quebra no
   meio da palavra: partida em duas linhas ela parece defeito. */
.etiqueta { display: inline-block; white-space: nowrap; }
/* O respiro so vale quando a etiqueta vem DEPOIS de alguma coisa; sozinha
   numa celula de tabela ela fica encostada na coluna, como as outras. */
.etiqueta.alerta:not(:first-child),
.etiqueta.risco:not(:first-child),
.etiqueta.info:not(:first-child) { margin-left: 6px; }
h1 .etiqueta { font-size: 12px; vertical-align: middle; }

@media (max-width: 640px) {
  .busca { display: grid; grid-template-columns: 1fr 1fr; }
  .busca input { grid-column: 1 / -1; }
  .busca .botao, .busca button { width: 100%; }
}