/* ============================================================
   Clínica Dr. Picasso Jordano — Sistema de Gestão
   Design System
   ============================================================ */
:root{
  /* ---- Base NEUTRA (sem tinta de vinho no fundo) ---- */
  --bg:#f5f6f8;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f6f7f9;
  --panel-3:#eceef1;
  --line:#e1e4e9;
  --line-soft:#eef0f3;
  --text:#1d2125;
  --text-2:#5b6169;
  /* era #8d949c, que dava 3,07:1 sobre branco — abaixo do mínimo de 4,5:1 para
     texto normal. Este tom dá 4,95 sobre o branco do cartão e 4,58 sobre o
     cinza do fundo, os dois lugares onde ele aparece. */
  --text-3:#69717a;

  /* ---- Marca ---- */
  --primary:#a5122c;      /* bordô da logomarca */
  --primary-2:#86091f;    /* hover / texto sobre claro */
  --primary-soft:rgba(165,18,44,.09);
  --gold:#c4952b;         /* dourado (secundária) */
  --gold-2:#a87c1c;       /* dourado escurecido p/ texto */
  --teal:#a87c1c;         /* alias legado -> dourado */
  --teal-soft:rgba(196,149,43,.14);
  --wine-deep:#5c0e1a;

  /* ---- Barra lateral escura ---- */
  --side-1:#6d1122;
  --side-2:#480a15;
  --side-txt:rgba(255,255,255,.82);
  --side-txt-2:rgba(255,255,255,.50);
  --side-active:#a5122c;
  --side-hover:rgba(255,255,255,.09);
  --side-line:rgba(255,255,255,.13);

  /* ---- Semânticas ----
     O âmbar de AVISO deixou de ser o mesmo hex do dourado da marca. Enquanto
     eram iguais, a cor secundária da identidade significava "cuidado" em
     metade das telas. Agora: dourado = marca, âmbar = alerta, mesma família.
     `--amber-2` é o tom para TEXTO: o --gold-2 que ficava aqui dava 3,8:1
     sobre branco, abaixo do mínimo de 4,5:1. */
  --green:#2f9d67;      /* fundo, selo, gráfico */
  --green-2:#1f7a4f;    /* texto: o --green dava 3,42:1 sobre branco */
  --green-soft:rgba(47,157,103,.13);
  --red:#d12b3a;
  --red-soft:rgba(209,43,58,.11);
  --amber:#e08a1e;
  --amber-2:#95560a;
  --amber-soft:rgba(224,138,30,.14);
  --purple:#8a4fd6;
  --row-danger:rgba(209,43,58,.055);   /* linha de tabela vencida */

  /* ---- Escala de espaçamento ----
     Sete degraus no lugar dos 17 valores de gap que existiam. Curta de
     propósito: escala grande é chute com aparência de sistema. */
  --sp-1:4px;    /* dentro de um chip, ícone ↔ rótulo */
  --sp-2:8px;    /* entre campos irmãos */
  --sp-3:12px;   /* dentro de um cartão */
  --sp-4:16px;   /* respiro padrão do cartão */
  --sp-5:24px;   /* entre cartões */
  --sp-6:32px;   /* entre blocos da página */
  --sp-7:48px;   /* entre seções */

  /* O que a escala governa, e o que ela não governa.
     Governa: gap, e todo padding/margin que separa uma coisa de outra. Os
     83 literais que já valiam um degrau viraram token — troca conferida
     elemento a elemento em 2.766 caixas das nove rotas, zero diferença.

     Não governa a geometria interna do componente: 14px de célula no toque
     (a densidade das 30 tabelas foi medida, §3.8 do CONTINUIDADE), 9px de
     botão, 22px de cabeçalho de modal, 1/2/3px de filete. Esses valores são
     ajuste óptico de uma peça, não ritmo da página — arredondá-los para o
     degrau mais próximo mudaria o desenho sem nenhum ganho. Continuam
     literais **de propósito**: literal que sobrou é decisão, não esquecimento. */

  /* ---- Escala tipográfica ----
     Modular de 1,25 a partir de 13px. O corpo fica em 14px: painel
     operacional agradece densidade, e mexer na base rebentaria as tabelas. */
  /* 11,5px, e não 10: 10px é menor que o mínimo confortável em qualquer
     tela, e era justamente o tamanho do RÓTULO — o texto que diz o que o
     número significa (item 1 da revisão de layout). A caixa alta e o
     espacejamento continuam: é isso que faz o rótulo parecer rótulo, não
     o tamanho. Onde 11,5 apertar o layout, a resposta é menos rótulo. */
  --fs-xs:11.5px;  /* rótulo de coluna, caixa alta */
  --fs-sm:12px;    /* apoio, legenda, subtítulo */
  --fs-base:14px;  /* corpo, célula, campo */
  --fs-lg:17px;    /* título de cartão */
  --fs-xl:22px;    /* título de página */
  --fs-2xl:28px;   /* número que domina a tela */
  /* Um degrau de exibição, para os três números que dominam a tela inteira
     (o ponteiro da meta, o total do caixa). Existe para FECHAR a escala:
     eram 32, 34 e 40px literais, fora de token nenhum (item 8). */
  --fs-3xl:34px;
  /* Pesos com salto: 400 · 600 · 800. Entre 500 e 600 ninguém vê diferença. */
  --fw-normal:400;
  --fw-medium:600;
  --fw-bold:800;

  /* ---- Foco de teclado ----
     Duas cores porque são dois fundos: o bordô tem contraste sobre o branco
     do conteúdo (7:1), e sobre o vinho da barra lateral não teria — lá entra
     o dourado claro. */
  --focus:#a5122c;
  --focus-inv:#e8b84b;

  /* ---- Raios ----
     ATENÇÃO: estes dois números continuam NÃO valendo. O `prontuario.css`
     carrega depois, com um `:root` sem escopo, e redefine os dois — hoje
     para 12px e 8px (era 4px e 3px até 29/09/2026). Quem manda no raio do
     sistema é aquele arquivo, não este. Os 14/10 daqui só valeriam se a
     linha do prontuario.css saísse do index.html.
     O achado está no CONTINUIDADE §3.58; a decisão de dar relevo ao
     sistema, em docs/revisao-layout/profundidade-3d.html. */
  --radius:14px;
  --radius-sm:10px;
  /* Os dois de baixo NÃO são redefinidos pelo prontuario.css, porque são
     forma e não peso: pílula é pílula em qualquer tema. */
  --radius-lg:20px;      /* cartão grande — hoje só o cartão de login */
  --radius-pill:999px;   /* selo, chip, contador e trilho de progresso */
  /* O que continua literal, de propósito: `50%` (círculo é forma, não raio),
     `0` (reajuste deliberado), os recortes de um lado só (`22px 22px 0 0`, o
     aba da lateral) e a coroa do dente (`6px 6px 9px 9px`, anatomia). Ficam
     fora da escala os 2px, 5px e 6px de três marcas decorativas: levá-los
     para um token mudaria de 1 a 2 px na tela, e isso é desenho, não
     refatoração — a lista está no §3.58. */
  --shadow:0 12px 36px rgba(20,24,30,.14);
  --shadow-sm:0 1px 3px rgba(20,24,30,.07);
  /* ---- Escala de elevação (29/09/2026) ----
     Dois degraus de repouso mais um realce, na tinta quente do papel
     (56,40,36) e não no cinza azulado do resto deste arquivo — a direção
     Prontuário já tinha levado o sistema para o quente, e sombra fria
     sobre papel quente fica cinzenta.
     e1 = repousa (botão, campo, linha de lista)
     e2 = flutua  (cartão, KPI, bloco de resumo)
     e-top = o risco de luz no topo. É ele que faz parecer relevo e não
             recorte; só entra onde não há faixa de acento por cima.
     O degrau 3 continua sendo o `--shadow` do modal. */
  --e1:0 1px 2px rgba(56,40,36,.05), 0 2px 5px rgba(56,40,36,.05);
  --e2:0 2px 4px rgba(56,40,36,.05), 0 8px 20px rgba(56,40,36,.08);
  --e-top:inset 0 1px 0 rgba(255,255,255,.92);
  --sidebar-w:252px;
  --content-max:1320px;   /* largura máxima do conteúdo */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ============================================================
   FOCO DE TECLADO
   Antes desta regra o sistema tinha `outline: 2px none` em todo
   botão: quem navega por Tab não via onde estava. `:focus-visible`
   mostra o anel para teclado e não para clique de mouse.
   ============================================================ */
:where(a,button,select,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
/* sobre a barra lateral vinho, o bordô sumiria no fundo */
.sidebar :where(a,button,[tabindex]):focus-visible,
.login-card :where(a,button,input,[tabindex]):focus-visible{
  outline-color:var(--focus-inv);
}

/* Controles que SÃO botão mas não parecem: item de menu, aba, chip, item de
   lista. Eram <div>, então o teclado passava direto por eles — três Tabs a
   partir do topo e o foco pulava a barra lateral inteira. Viraram <button>,
   e este bloco zera o estilo nativo para a classe do componente continuar
   mandando. `:where()` tem especificidade zero: qualquer regra do componente
   ganha desta, não importa a ordem no arquivo. */
:where(button.nav-item,button.tab,button.chip,button.bn-item,button.proc-esp-item){
  font:inherit;color:inherit;background:none;border:0;text-align:left;
  width:auto;appearance:none;-webkit-appearance:none;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cfd4da;border-radius:var(--radius-sm);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b6bcc4}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:var(--fs-base)}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--side-1) 0%,var(--side-2) 100%);
  position:fixed;inset:0 auto 0 0;
  display:flex;flex-direction:column;
  z-index:40;
  transition:transform .25s ease;
}
/* A logomarca é vinho sobre branco — sobre a barra escura ela vai numa placa clara. */
.brand{
  padding:var(--sp-4) var(--sp-4) 14px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--side-line);
}
.brand img,.brand svg{
  width:100%;height:88px;display:block;
  background:#fff;border-radius:var(--radius);
  object-fit:cover;object-position:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.brand-logo{
  width:44px;height:44px;border-radius:var(--radius);flex-shrink:0;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);padding:5px;
}
.brand-logo svg{width:100%;height:100%}
.brand-txt h1{font-size:var(--fs-base);font-weight:var(--fw-medium);letter-spacing:.2px;color:#fff}
.brand-txt span{font-size:var(--fs-sm);color:var(--side-txt-2)}
.nav{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-3) 20px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-color:transparent}
.nav-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1.2px;color:var(--side-txt-2);padding:14px var(--sp-3) 6px;font-weight:var(--fw-medium)}
/* width:100% porque o item é <button>: sem ele o botão encolhe ao texto, e o
   realce e o filete de "Vendas" saíam mais curtos que os de "Controle Protético" */
.nav-item{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  padding:11px var(--sp-3);border-radius:var(--radius-sm);
  color:var(--side-txt);font-weight:var(--fw-normal);font-size:var(--fs-base);
  cursor:pointer;transition:background .15s,color .15s;margin-bottom:2px;position:relative;
}
.nav-item .ico{width:20px;height:20px;flex-shrink:0;opacity:.85}
.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.active{background:var(--side-active);color:#fff;font-weight:var(--fw-medium);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.nav-item.active .ico{opacity:1}
.nav-badge{margin-left:auto;background:#fff;color:var(--primary-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:1px 7px;border-radius:var(--radius-pill)}
.nav-item.active .nav-badge{background:rgba(255,255,255,.92)}

/* rodapé da barra: usuário logado */
#sidebarUser{color:var(--side-txt)}
#sidebarUser .avatar{background:rgba(255,255,255,.16);color:#fff}
#sidebarUser .topbar-icon{background:rgba(255,255,255,.10);border-color:var(--side-line);color:var(--side-txt)}
#sidebarUser .topbar-icon:hover{background:rgba(255,255,255,.20);color:#fff}
#sidebarUser .role-badge{background:rgba(255,255,255,.18);color:#fff}

/* ============================================================
   IDENTIDADE POR MÓDULO
   Cada módulo tem uma cor de acento própria, dentro da família da
   marca. Ela pinta o selo do topo, os KPIs e a faixa dos cartões.
   ============================================================ */
.main{--accent:var(--primary);--accent-soft:var(--primary-soft)}
.main[data-mod="inteligencia"]{--accent:#a5122c;--accent-soft:rgba(165,18,44,.10)}
.main[data-mod="pacientes"]   {--accent:#8c2d5a;--accent-soft:rgba(140,45,90,.10)}
.main[data-mod="agenda"]      {--accent:#2f6f8f;--accent-soft:rgba(47,111,143,.10)}
.main[data-mod="vendas"]      {--accent:#2f8f5f;--accent-soft:rgba(47,143,95,.10)}
.main[data-mod="financeiro"]  {--accent:#a87c1c;--accent-soft:rgba(168,124,28,.12)}
.main[data-mod="proteticos"]  {--accent:#6b5b95;--accent-soft:rgba(107,91,149,.12)}
.main[data-mod="marketing"]   {--accent:#c05621;--accent-soft:rgba(192,86,33,.10)}
.main[data-mod="estoque"]     {--accent:#4f6f52;--accent-soft:rgba(79,111,82,.12)}

/* ---------- Main ---------- */
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{
  height:68px;flex-shrink:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:var(--sp-3);
  padding:0 26px;position:sticky;top:0;z-index:30;
}
.topbar-title{flex:0 0 auto;min-width:0}
/* O nome do módulo é a coisa dominante da moldura — é o "onde estou". Ganhou
   o topo da escala tipográfica em vez dos 19px avulsos de antes. */
.topbar h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--accent);letter-spacing:-.4px;white-space:nowrap}
.topbar .sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
/* selo redondo à esquerda do título (padrão do conceito) */
.topbar-mark{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(20,24,30,.22);
}
.topbar-mark svg{width:20px;height:20px}
/* bloco do usuário à direita */
.topbar-user{display:flex;align-items:center;gap:var(--sp-3);padding:5px var(--sp-2) 5px 5px;border-radius:var(--radius);cursor:default}
.topbar-user .tu-txt{line-height:1.25;text-align:right}
.topbar-user .tu-name{font-size:var(--fs-base);font-weight:var(--fw-medium);white-space:nowrap}
.topbar-user .tu-role{font-size:var(--fs-sm);color:var(--text-3)}
@media(max-width:1024px){.topbar-mark{display:none}.topbar-user .tu-txt{display:none}}
.topbar-search{
  margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);flex:0 1 280px;min-width:0;
}
.topbar-search:focus-within{border-color:var(--primary);background:var(--bg-2)}
.topbar-search input{background:none;border:none;outline:none;color:var(--text);flex:1;min-width:0}
.topbar-search input::placeholder{color:var(--text-3)}
.topbar-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--line-soft);position:relative;color:var(--text-2)}
.topbar-icon:hover{color:var(--text);border-color:var(--line)}
.topbar-icon .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.topbar-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;line-height:18px;padding:0 5px;
  border-radius:var(--radius-pill);background:var(--red);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-align:center;
  border:2px solid var(--bg-2)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--wine-deep));display:flex;align-items:center;justify-content:center;font-weight:var(--fw-medium);font-size:var(--fs-base);color:#fff}
.menu-toggle{display:none}

/* ---------- Moldura do conteúdo ----------
   Antes: `padding:26px` e nada mais. Sem largura máxima, a tabela de
   pacientes se esticava por 2.000px num monitor de 27" e o olho perdia a
   linha entre o nome e o valor. O conteúdo agora tem medida e fica
   centralizado quando sobra tela; abaixo de --content-max nada muda. */
.content{padding:var(--sp-5) var(--sp-6);flex:1}
.content>*{max-width:var(--content-max);margin-left:auto;margin-right:auto}
@media(max-width:1024px){ .content{padding:var(--sp-4)} }

/* ---------- Cards (quadros) ----------
   Faixa fina de acento no topo + marcador vertical no título.
   O acento vem do módulo (--accent).                          */
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),transparent 75%);opacity:.9}
.card-pad{padding:var(--sp-5)}
.card-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.card-head h3{font-size:var(--fs-base);font-weight:var(--fw-medium);display:flex;align-items:center;gap:var(--sp-2)}
.card-head h3::before{content:"";width:3px;height:15px;border-radius:var(--radius-sm);background:var(--accent);flex-shrink:0}
.card-head h3 svg{width:17px;height:17px;color:var(--accent)}
.card-head .sub{font-size:var(--fs-sm);color:var(--text-3)}
/* cartões sem faixa: usados dentro de modais e como caixinhas neutras */
.card.card-plain::before{display:none}
.card.card-plain .card-head{background:none}
.card.card-plain .card-head h3::before{display:none}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1200px){.g-4{grid-template-columns:repeat(2,1fr)}.g-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.g-2,.g-3,.g-4,.g-6{grid-template-columns:1fr}}

/* ---------- KPI cards ----------
   Layout horizontal: selo redondo à esquerda, rótulo e valor à direita.
   Feito só em CSS — o marcador dos módulos continua sendo
   .kpi > .k-ico? + .k-label + .k-value + (.k-trend|.badge|.progress)?  */
.kpi{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);position:relative;box-shadow:var(--shadow-sm);transition:box-shadow .15s,border-color .15s}
.kpi:hover{box-shadow:0 6px 20px rgba(20,24,30,.09);border-color:var(--line)}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),transparent 75%);opacity:.9}
.kpi:has(.k-ico){padding-left:82px}
.kpi .k-ico{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);margin:0;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.kpi .k-ico svg{width:20px;height:20px}
/* rótulo em caixa alta pequena e número contido, com sublinhado de acento */
.kpi .k-label{font-size:var(--fs-xs);color:var(--text-2);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:.9px}
.kpi .k-value{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.3px;margin-top:var(--sp-1);
  color:var(--text);line-height:1.2;font-variant-numeric:tabular-nums;
  display:inline-block;padding-bottom:var(--sp-1);border-bottom:2px solid var(--accent)}
/* Indicador dominante: quando um número responde à pergunta da tela, ele fica
   maior que os outros. Hierarquia por TAMANHO, que é ferramenta mais forte que
   cor — e sem isso os quatro indicadores tinham o mesmo peso e o olho não sabia
   onde pousar. Uso: adicionar a classe ao .kpi que manda na tela. */
.kpi.kpi-forte .k-value{font-size:var(--fs-2xl);border-bottom-width:3px}
.kpi.kpi-forte .k-label{color:var(--text-2)}
/* O número dominante NÃO troca de cor: o tamanho já faz a hierarquia, e cor por
   cima é redundante. Pintá-lo com --accent também arrastaria o acento do módulo
   para papel de texto — o do Financeiro (#a87c1c) dá 3,77:1 sobre branco, o mais
   fraco dos oito. O acento fica onde já estava: no traço embaixo, mais grosso. */
.kpi .k-trend{font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-top:6px;display:inline-flex;align-items:center;gap:var(--sp-1)}
/* em telas médias o selo encolhe para sobrar largura ao rótulo */
@media(max-width:1400px){
  .kpi:has(.k-ico){padding-left:72px}
  .kpi .k-ico{width:42px;height:42px;left:15px}
  .kpi .k-ico svg{width:18px;height:18px}
  .kpi .k-value{font-size:var(--fs-lg)}
}
.trend-up{color:var(--green-2)}   /* item 2: --green dá 3,23:1 em texto; --green-2 dá 5,01 */.trend-down{color:var(--red)}.trend-flat{color:var(--text-3)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:9px var(--sp-4);border-radius:var(--radius-sm);font-weight:var(--fw-medium);font-size:var(--fs-base);transition:all .15s;white-space:nowrap;border:1px solid transparent}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-2)}
.btn-ghost{background:var(--panel-2);color:var(--text);border-color:var(--line-soft)}
.btn-ghost:hover{background:var(--panel-3);border-color:var(--line)}
/* ---------- item 6: três níveis, e um primário por bloco ----------
   O Financeiro desenhava 42 botões fantasma contra 1 primário: quarenta e
   dois controles do mesmo peso não formam hierarquia nenhuma, viram textura.
   1) primário — a ação que a tela existe para fazer, um por bloco;
   2) secundário com contorno — ação de verdade, mas não a principal;
   3) terciário só texto — navegação disfarçada de botão ("ver todos",
      "abrir o DRE"), que nunca foi botão, era link. */
.btn-sec{background:none;color:var(--text);border-color:var(--line)}
.btn-sec:hover{background:var(--panel-2);border-color:var(--text-3)}
.btn-link{background:none;border-color:transparent;color:var(--primary-2);padding-inline:var(--sp-2);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.btn-link:hover{text-decoration-color:currentColor;background:none}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-sm{padding:6px 11px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
.btn-icon{padding:var(--sp-2);width:36px;height:36px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px 10px;border-radius:var(--radius-pill);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:var(--green-soft);color:var(--green-2)}
/* vermelho sólido: é o alerta que precisa saltar na tabela (vencido, em atraso) */
.b-red{background:var(--red);color:#fff}
.b-amber{background:var(--amber-soft);color:var(--amber-2)}
.b-blue{background:var(--primary-soft);color:var(--primary-2)}
.b-teal{background:var(--teal-soft);color:var(--teal)}
.b-purple{background:rgba(155,109,255,.15);color:var(--purple)}
.b-gray{background:var(--panel-3);color:var(--text-2)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 11px;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line-soft);font-size:var(--fs-sm);font-weight:var(--fw-normal);cursor:pointer}
.chip.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-2)}
.chip:hover{border-color:var(--line)}

/* ---------- Tables ---------- */
/* ---------- a moldura da tabela e o item 9 ----------
   `overflow-x:auto` faz o navegador criar contêiner de rolagem nos DOIS
   eixos — e aí o `position:sticky` do cabeçalho passa a se referir à
   moldura, que não rola verticalmente: o rótulo some junto com a página.
   `overflow-y:clip` não salva (com `auto` no outro eixo ele computa
   `hidden`, que também é contêiner de rolagem).

   Então a moldura só vira rolagem quando a tabela de fato transborda —
   quem mede é o `tela.js`, porque largura só se sabe na tela. Medido a
   1440px: nenhuma das nove rotas transborda, e o cabeçalho gruda em
   todas. Onde transbordar, a rolagem lateral volta e o cabeçalho deixa
   de grudar: é a troca, e ela é do jeito certo. */
.table-wrap{overflow-x:visible}
.table-wrap.tw-rola{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.8px;color:var(--text-2);
  font-weight:var(--fw-medium);
  padding:var(--sp-3) var(--sp-4);background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap;
  /* item 9: gruda abaixo da barra de topo, que já é sticky e tem 68px de
     altura conhecida. Sem isto, depois da sexta linha ninguém sabe mais qual
     coluna é qual — o Financeiro rola 2.894px com 39 linhas. O fundo opaco
     é obrigatório: sem ele a linha rolando aparece por baixo do rótulo. */
  position:sticky;top:68px;z-index:2}
/* dentro do modal quem rola é o overlay, e o cabeçalho do modal já está no
   alto: a régua da tabela gruda no zero do próprio contêiner */
.modal th{top:0}
@media(max-width:1024px){th{top:56px}}
@media print{th{position:static}}
td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);font-size:var(--fs-base);vertical-align:middle}
/* Todo dígito de tabela alinha: sem isto, comparar 1.800 com 900 exige contar
   casas. Vale para a célula inteira, porque data e valor convivem na mesma linha. */
td,th{font-variant-numeric:tabular-nums}
/* Valor numérico vai à direita — é onde o olho procura a ordem de grandeza. */
td.num,th.num{text-align:right}
/* Informação secundária desce para baixo da principal, na mesma célula: o
   procedimento embaixo do nome do paciente já se lia junto, e ocupava uma
   coluna inteira para isso. */
.cel-sec{font-size:var(--fs-sm);line-height:1.35;margin-top:2px}
/* A linha respira mais: são menos colunas e duas alturas de texto por célula. */
tbody td{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
tbody tr{transition:background .12s}
/* item 10: o realce é do que está sob o cursor (ou sob o foco do teclado),
   não uma zebra fixa — zebra briga com a linha vermelha do vencido e com a
   opacidade do concluído, que estas tabelas já usam. */
tbody tr:hover,tbody tr:focus-within{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:none}
/* ---------- item 12: ações secundárias em repouso ----------
   Numa tabela de 39 linhas, dezenas de retângulos disputam atenção com o
   dado. A ação principal (primária, sucesso, perigo) fica sempre; a
   secundária — o botão fantasma, quase sempre "Abrir" — aparece no hover e
   no foco do teclado. O espaço continua reservado, então a linha não pula.
   Só onde há hover de verdade: no telefone nada muda. */
@media (hover:hover) and (pointer:fine){
  tbody td .btn-ghost{opacity:0;transition:opacity .12s}
  tbody tr:hover td .btn-ghost,
  tbody tr:focus-within td .btn-ghost,
  tbody td .btn-ghost:focus-visible{opacity:1}
}
/* linha em atraso/vencida — destaque do conceito */
tbody tr.row-danger,tbody tr.row-danger:nth-child(even){background:var(--row-danger)}
tbody tr.row-danger:hover{background:rgba(209,43,58,.09)}
tbody tr.row-danger td:first-child{box-shadow:inset 3px 0 0 var(--red)}
/* linha correspondente ao item selecionado no detalhe acima */
tbody tr.row-sel,tbody tr.row-sel:nth-child(even){background:var(--primary-soft)}
tbody tr.row-sel td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
/* extrato parcelado: cabeçalho do lançamento + linhas das parcelas */
tbody tr.parc-cab,tbody tr.parc-cab:nth-child(even){background:var(--panel-2)}
tbody tr.parc-cab td{border-bottom:none;padding-top:14px}
tbody tr.parc-linha td:first-child{padding-left:26px}
tbody tr.parc-linha td{box-shadow:none}
tbody tr.parc-linha td:first-child{box-shadow:inset 3px 0 0 var(--accent-soft)}
tbody tr.parc-linha.row-danger td:first-child{box-shadow:inset 3px 0 0 var(--red)}
/* ---------- Tratamentos & Odontograma ----------
   Duas colunas: à esquerda o que se FAZ (lançar, marcar no quadro, o que
   falta), à direita o que JÁ FOI FEITO. Histórico e tarefa disputando a
   mesma coluna misturavam as duas leituras. */
/* A coluna das evoluções é o registro clínico, e passou a carregar o que
   aconteceu na sessão — odontometria, implante, componente, biomaterial. A
   360px isso se lia espremido. Ficou em 440, e em 520 nas telas largas.
   O odontograma da esquerda já rolava dentro do próprio quadro antes desta
   mudança (são 822px de dentes), então o que ele perde é rolagem, não
   conteúdo. */
.trat-layout{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:var(--sp-5);align-items:start}
@media(min-width:1700px){ .trat-layout{grid-template-columns:minmax(0,1fr) 520px} }
.trat-esq{min-width:0}
/* a coluna da direita acompanha a rolagem: o quadro é alto e o histórico
   some da vista bem quando se quer conferir o que já foi feito */
.trat-dir{position:sticky;top:var(--sp-4)}
.trat-add-acoes{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.trat-add-acoes .hint{margin:0}

/* lista do que falta fazer: régua, não tabela — são poucas colunas e a
   ação fica na ponta */
.trat-itens{display:flex;flex-direction:column}
.trat-item{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft)}
.trat-item:last-child{border-bottom:none}
.trat-item:hover{background:var(--panel-2)}
.trat-item-txt{flex:1;min-width:0}
.trat-item-val{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;white-space:nowrap}
/* As ações andam juntas e descem juntas. Soltas na linha, o terceiro botão
   (Sessão, que entrou depois) empurrava a página inteira para fora da tela
   a 375px, em vez de quebrar. */
.trat-item-acoes{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
@media(max-width:560px){
  .trat-item-acoes{width:100%;justify-content:flex-end}
}

/* linha do tempo das evoluções */
.evo-rolo{max-height:70vh;overflow-y:auto;padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.evo-dia{position:relative;padding-left:var(--sp-4)}
.evo-data{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-3);
  margin-left:calc(var(--sp-4) * -1);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.evo-dia:first-child .evo-data{margin-top:0}
.evo-ponto{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none}
/* fio ligando os dias, atrás dos pontos */
.evo-dia::before{content:"";position:absolute;left:3px;top:14px;bottom:0;
  width:1px;background:var(--line)}
.evo-dia:last-child::before{display:none}
.evo-item{background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:var(--sp-4);margin-bottom:var(--sp-3);
  cursor:pointer;position:relative}
/* As ações da sessão: imagens, imprimir, editar. É a única porta para o
   registro de um tratamento CONCLUÍDO — ele não aparece na lista da esquerda,
   e §3.11 tirou os concluídos de lá de propósito. Aparecem no hover no
   desktop e sempre no toque, como as ações dos cartões de documento. */
.evo-acts{position:absolute;top:var(--sp-2);right:var(--sp-2);display:flex;gap:var(--sp-1);
  opacity:0;transition:opacity .15s;z-index:2;background:var(--panel-2);border-radius:var(--radius-sm)}
.evo-item:hover .evo-acts,.evo-item:focus-within .evo-acts{opacity:1}
.evo-acts .btn{width:32px;height:32px;padding:0}
.evo-acts .btn svg{width:15px;height:15px}
@media(max-width:1024px){ .evo-acts{opacity:1} }
.evo-item:hover{border-color:var(--line)}
/* entrada que não abre o tratamento (perfil que não gere tratamento) */
.evo-item.evo-inerte{cursor:default}
.evo-item:focus-visible{outline:var(--focus)}
.evo-proc{font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.4}
.evo-obs{font-size:var(--fs-sm);color:var(--text-2);margin-top:var(--sp-2);line-height:1.5}
.evo-prof{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--sp-2)}

/* ---------- o que aconteceu na sessão ----------
   A evolução deixou de ser uma linha e passou a trazer o registro do dia:
   a odontometria medida, o protocolo e as imagens daquele momento. É o que
   se procura na sessão seguinte — o que foi feito da última vez, e quando. */

/* Sessão registrada num tratamento que ainda não fechou. Sem isso, três
   sessões de uma endodontia pareciam três tratamentos concluídos. */
.evo-sit{display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--amber-2);
  margin-bottom:var(--sp-2)}
.evo-sit svg{width:12px;height:12px}

.evo-tab{width:100%;border-collapse:collapse;margin-top:var(--sp-2);
  font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.evo-tab th{text-align:left;font-weight:var(--fw-medium);color:var(--text-3);
  padding:2px 6px 2px 0;border-bottom:1px solid var(--line)}
.evo-tab td{padding:2px 6px 2px 0;border-bottom:1px solid var(--line-soft)}
.evo-tab th.num,.evo-tab td.num{text-align:right;padding-right:10px}
.evo-tab th:last-child,.evo-tab td:last-child{padding-right:0}
.evo-cond{font-weight:var(--fw-medium);white-space:nowrap}

/* ---------- implantes na evolução ----------
   Em bloco, não em tabela. A tabela cabia na coluna espremendo: a descrição
   do implante quebrava em três linhas dentro da célula e o torque ia parar
   noutra. Aqui é uma informação por linha, com o rótulo à frente — que é
   como se lê em voz alta e como se procura depois. */
.evo-imp{margin-top:var(--sp-3)}
.evo-imp-peca{margin-bottom:var(--sp-3);padding-left:var(--sp-3);
  border-left:2px solid var(--line)}
.evo-imp-peca:last-child{margin-bottom:0}
.evo-imp-reg{font-weight:var(--fw-medium);font-size:var(--fs-sm);
  color:var(--primary);margin-bottom:var(--sp-1)}
.evo-imp-l{font-size:var(--fs-sm);line-height:1.65;color:var(--text)}
/* o rótulo é o que deixa a linha varrível: Implante, Lote, Torque */
.evo-imp-l span{color:var(--text-3);font-weight:var(--fw-medium)}
/* o componente abre um respiro: é outra peça, não continuação do implante */
.evo-imp-comp{margin-top:var(--sp-2);font-weight:var(--fw-medium)}
.evo-imp-perda{color:var(--red);font-weight:var(--fw-medium);margin-top:var(--sp-1)}
.evo-imp-x{border-left-color:var(--red);opacity:.78}
.evo-imp-reab{margin-top:var(--sp-3);padding-top:var(--sp-2);
  border-top:1px solid var(--line-soft);color:var(--text-2)}
.evo-prot{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--sp-2);line-height:1.5}
/* o retorno já marcado na agenda: um respiro e o ícone de calendário, para
   não se confundir com a linha do "retorno em X dias" logo acima. Bloco, não
   flex: a 375px a frase precisa quebrar em vez de empurrar a página. */
.evo-retorno{margin-top:var(--sp-2);padding-top:var(--sp-2);
  border-top:1px solid var(--line-soft)}
.evo-retorno svg{width:12px;height:12px;vertical-align:-2px;margin-right:2px}
/* O botão que abre o trabalho protético a partir da reabilitação. Bloco com
   respiro próprio: entrar na linha da frase a faria estourar a 375px (§5). */
.evo-reab-act{margin-top:var(--sp-2)}
.evo-reab-act .btn{width:100%;justify-content:center}
/* A ação dentro de um bloco Vínculo. Botão, e não mais um link solto na frase
   do `.hint`: link inline mede uns 15px de alvo efetivo e reprova a régua de
   toque (§8.7). */
.vinc-act{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-2);margin-top:var(--sp-2)}
/* Vão vertical de 12px e não de 8: quando os dois botões quebram de linha, a
   camada de toque de 44px de cada .btn-sm passa 5px para fora e as duas se
   cruzariam (§5 do CONTINUIDADE). */

/* As imagens em fita: numa coluna de 360px o que cabe é a miniatura com o
   momento embaixo. O momento é o que dá sentido à imagem, então ele nunca
   é cortado — a fita rola na horizontal antes disso. */
.evo-imgs{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);
  overflow-x:auto;padding-bottom:var(--sp-1)}
.evo-img{margin:0;flex:none;width:74px;cursor:pointer}
.evo-img img{width:74px;height:56px;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#000}
.evo-img figcaption{font-size:var(--fs-xs);color:var(--text-2);margin-top:2px;
  text-align:center;line-height:1.3}
.evo-img:hover img{border-color:var(--primary)}
.evo-img:focus-visible{outline:var(--focus)}
.evo-img-sem{width:74px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);border-radius:var(--radius-sm);color:var(--text-3)}
.evo-img-sem svg{width:20px;height:20px}

/* ---------- Implantodontia ----------
   Cada implante é um BLOCO, não uma linha de tabela: são nove campos, e nove
   colunas não se leem em lugar nenhum, muito menos num modal a 375px. É a
   mesma decisão do §3.8 — o dado secundário desce em vez de virar coluna. */
.imp-bloco{border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);background:var(--panel-2)}
.imp-cab{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-soft)}
.imp-cab b{font-size:var(--fs-base)}
.imp-cab .btn{margin-left:auto}
.imp-subs{font-size:var(--fs-sm);color:var(--text-3)}
/* Implante perdido não some — fica marcado. Aquele lote esteve no paciente. */
.imp-perdido{opacity:.72;border-left:3px solid var(--red)}
.imp-sep{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:var(--fw-medium);margin:var(--sp-3) 0 var(--sp-2);
  padding-top:var(--sp-2);border-top:1px dashed var(--line-soft)}
.imp-datas{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--sp-2)}
.imp-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
.bio-linha{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft)}
.bio-linha:last-child{border-bottom:none}
.bio-linha select{flex:1;min-width:180px}
.bio-linha input{width:130px}
.bio-linha select,.bio-linha input{background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:8px 10px;color:var(--text)}
/* o formulário do catálogo, embutido no painel */
.cat-form{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft)}

/* lista de sessões dentro do formulário do tratamento */
.sess-lista{border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  margin-top:var(--sp-3);overflow:hidden}
.sess-linha{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft)}
.sess-linha:last-child{border-bottom:none}
.sess-linha-i{flex:1;min-width:0}
.sess-linha-i b{display:block;font-size:var(--fs-base);font-weight:var(--fw-medium)}
.sess-linha-i span{font-size:var(--fs-sm);color:var(--text-3)}

/* ---------- modal de registrar sessão ---------- */
.sess-cab{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4);border-bottom:1px solid var(--line-soft)}
.sess-cab b{font-size:var(--fs-base)}
.sess-cab span{font-size:var(--fs-sm);color:var(--text-3)}
.sess-imgs{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0}
.sess-img{margin:0;position:relative;width:104px}
.sess-img img{width:104px;height:78px;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#000}
.sess-img figcaption{font-size:var(--fs-xs);color:var(--text-2);margin-top:3px;text-align:center}
.sess-img-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--panel)}
.sess-img-x svg{width:11px;height:11px}
/* Quando a linha quebra, os botões ficam um em cima do outro — e a camada
   invisível de 44px de cada `.btn-sm` passa 5px para fora dele. Com o vão
   vertical de 9px as duas camadas se sobrepunham e o de cima media 43px de
   alvo. O vão entre linhas é maior que o vão entre itens de propósito. */
.sess-add{display:flex;gap:var(--sp-3) var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-2)}
.sess-add select{background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:8px 10px;color:var(--text);max-width:100%;
  min-height:44px}    /* o select não tem a camada de toque do .btn-sm: cresce de verdade */
.sess-add select:first-of-type{flex:1;min-width:180px}

/* No celular vira uma coluna só, e as evoluções descem para o fim: o que
   falta fazer é o que se olha primeiro na cadeira. */
@media (max-width:1024px){
  .trat-layout{grid-template-columns:1fr}
  .trat-dir{position:static;order:2}
  .evo-rolo{max-height:none}
}

/* ---------- Condutos (endodontia) ----------
   Tabela de odontometria dentro do formulário de tratamento: uma por dente,
   uma linha por conduto. Fica dentro de um modal, então precisa de régua
   própria — as regras de .field não alcançam input em célula de tabela. */
.cond-sec{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.cond-tit{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:var(--fw-medium);margin-bottom:var(--sp-3)}
.cond-bloco{border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  margin-bottom:var(--sp-3);overflow:hidden}
.cond-cab{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--panel-2);border-bottom:1px solid var(--line-soft)}
.cond-cab span{font-size:var(--fs-sm);color:var(--text-3)}
.cond-cab button{margin-left:auto;flex:none}
.cond-tab{font-size:var(--fs-sm)}
.cond-tab th{padding:var(--sp-2) var(--sp-3);background:none}
.cond-tab td{padding:var(--sp-1) var(--sp-3);border-bottom:1px solid var(--line-soft)}
.cond-tab tbody tr:last-child td{border-bottom:none}
.cond-tab input{width:100%;min-width:52px;background:var(--panel);color:var(--text);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:6px var(--sp-2);font:inherit;font-variant-numeric:tabular-nums}
.cond-tab input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.cond-tab td.num input{text-align:right}
/* o nome do conduto é a coluna que carrega a leitura; as medidas são curtas */
.cond-tab td:first-child input{min-width:150px;font-weight:var(--fw-medium)}
.cond-tab td:last-child{width:1%;white-space:nowrap}

/* Ícone solto na última coluna ("abrir"): sem regra de tamanho o svg colapsa
   para 0×0 e a linha fica sem nenhuma pista visível de que é clicável. */
td>svg{width:17px;height:17px;display:block;color:var(--text-3);flex:none}
tbody tr:hover td>svg{color:var(--primary)}
.t-strong{font-weight:var(--fw-medium)}
/* item 3: abaixo de 12px o cinza é o --text-2 (7,21:1). O `.t-muted` veste
   quase todo texto de apoio do sistema, e ele aparece a 11,5 e 12px em 165
   lugares — pequeno e claro ao mesmo tempo é o pior par possível. O --text-3
   fica para texto de 14px para cima, onde ele é o que deve ser: apoio. */
.t-muted{color:var(--text-2)}
.t-muted-3{color:var(--text-3)}
.row-avatar{display:flex;align-items:center;gap:var(--sp-3)}
.mini-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:var(--fw-medium);font-size:var(--fs-sm);color:#fff;flex-shrink:0;overflow:hidden}
.mini-av.com-foto{background:var(--panel-3)}
.mini-av img{width:100%;height:100%;object-fit:cover;display:block}

/* campo de foto no cadastro do paciente */
.foto-linha{display:flex;align-items:center;gap:var(--sp-4);margin-top:14px;padding:14px;
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius)}
.foto-box{width:88px;height:88px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--primary),var(--gold));
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--bg-2);box-shadow:0 3px 12px rgba(20,24,30,.16)}
.foto-box img{width:100%;height:100%;object-fit:cover;display:block}
.foto-box .foto-ini{color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-2xl)}
@media(max-width:560px){.foto-linha{flex-direction:column;text-align:center}}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
/* ---------- item 14: o formulário tem teto de largura ----------
   Medido: 29 campos em 1.077px de largura. Campo de CPF com 300px não ajuda
   ninguém a digitar 11 dígitos, e o olho percorre mais de um palmo entre o
   rótulo e o campo seguinte. 760px é a medida de um formulário que se lê em
   coluna; quem precisa da largura inteira (tabela dentro do modal) não usa
   `.form-grid`. */
.form-grid{max-width:760px}
/* campo do tamanho do dado: a largura vira uma dica de quantos dígitos cabem */
.field.f-curto input,.field.f-curto select{max-width:200px}
.field.f-medio input,.field.f-medio select{max-width:320px}
@media(max-width:900px){.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.field.f-curto input,.field.f-curto select,
  .field.f-medio input,.field.f-medio select{max-width:none}}
/* em telas estreitas duas colunas espremem rótulo e campo — vai para uma só.
   O seletor precisa ser mais específico que `.field.col-2`, declarado abaixo. */
@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .form-grid>.field.col-2,.form-grid>.field.col-3,.form-grid>.field.col-4{grid-column:span 1}
}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field.col-2{grid-column:span 2}
.field.col-3{grid-column:span 3}
.field.col-4{grid-column:span 4}
.field label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:10px var(--sp-3);color:var(--text);outline:none;transition:border .15s;width:100%;
  /* item 15: uma altura declarada, e ela é a mesma régua de toque de 44px que
     o sistema já persegue no telefone. Conviviam campos de 37, 38 e 39px na
     mesma grade: dois pixels não se percebem isolados, numa grade de quatro
     colunas percebem-se. */
  min-height:44px;
}
.field input[type=color]{min-height:0;height:40px}
.field textarea{min-height:80px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field textarea{resize:vertical;min-height:80px}
.field .hint{font-size:var(--fs-sm);color:var(--text-2)}
.field .err{font-size:var(--fs-sm);color:var(--red)}
.field input.invalid{border-color:var(--red)}
.field input.valid{border-color:var(--green)}
.check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-base);color:var(--text-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--primary)}

.section-title{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--text);display:flex;align-items:center;gap:var(--sp-3);margin:6px 0 var(--sp-1)}
.section-title .num{width:24px;height:24px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary-2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-medium)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--line-soft);overflow-x:auto}
.tab{padding:11px var(--sp-4);font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s}
.tab:hover{color:var(--text-2)}
.tab.active{color:var(--primary-2);border-bottom-color:var(--primary-2)}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(50,22,28,.42);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:900px;box-shadow:var(--shadow);animation:pop .2s ease}
.modal.sm{max-width:480px}
.modal.lg{max-width:1100px}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:var(--sp-3);padding:18px 22px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--bg-2);z-index:2;border-radius:var(--radius) 16px 0 0}
.modal-head h3{font-size:var(--fs-lg);font-weight:var(--fw-medium);flex:1}
.modal-close{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-3);background:var(--panel)}
.modal-close:hover{color:var(--text);background:var(--panel-2)}
.modal-body{padding:22px}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) 22px;border-top:1px solid var(--line-soft);position:sticky;bottom:0;background:var(--bg-2);border-radius:0 0 16px 16px}

/* ---------- Misc ---------- */
/* ---------- Cabeçalho da página ----------
   O nome do módulo já está na barra do topo — aqui fica a linha de contexto
   viva ("18 produtos · 3 abaixo do mínimo") e a ação principal. A régua
   embaixo é o que separa "onde estou" de "o que tem aqui": sem ela, o
   cabeçalho era só mais uma faixa flutuando entre cartões. */
.page-head{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;
  margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);min-height:34px}
.page-head .ph-txt h2{display:none}
/* o título do módulo já está no topo; o nome do paciente não está em lugar nenhum */
.page-head .ph-txt.ph-pessoa h2{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-xl);line-height:1.2;margin:0 0 2px;color:var(--text)}
.page-head .ph-txt p{font-size:var(--fs-sm);color:var(--text-2);font-weight:var(--fw-medium)}
.page-head .ph-actions{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
/* seletor de período (js/periodo.js): "escolher período" abre De e Até ao
   lado. Vão vertical de 12px entre linhas quebradas — as camadas de toque de
   44px do .btn-sm se cruzam com menos de 10 (§5). O campo de data tem os 44px
   no próprio campo, não na moldura (§5). */
.per-sel,.per-custom{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-2);max-width:100%}
.per-custom label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-2);font-weight:var(--fw-medium)}
.per-custom input[type=date]{min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-2);color:var(--text);font-size:var(--fs-base);max-width:100%}
.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
/* ---------- prosa: teto de 72 caracteres (item 4) ----------
   Acima de ~75 caracteres o olho perde o começo da linha seguinte. Vale só
   para PROSA — tabela, grade e gráfico continuam usando a largura inteira,
   que é onde ela serve. `.hint` não tinha regra nenhuma no sistema: era
   texto de corpo solto, a 14px e com a largura do conteúdo. */
.hint{font-size:var(--fs-sm);line-height:1.5;color:var(--text-2);max-width:72ch}
.hint b{color:var(--text)}
.empty{text-align:center;padding:50px 20px;color:var(--text-3);max-width:72ch;margin-inline:auto}
.int-aviso span,.espiar-nada,.page-head .ph-txt p{max-width:72ch}
.empty svg{width:48px;height:48px;margin-bottom:var(--sp-3);opacity:.4}
.divider{height:1px;background:var(--line-soft);margin:var(--sp-4) 0}
.pill-stat{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4);background:var(--panel-2);border-radius:var(--radius-sm);border:1px solid var(--line-soft)}
.pill-stat .l{font-size:var(--fs-xs);color:var(--text-2);text-transform:uppercase;letter-spacing:.6px;font-weight:var(--fw-medium)}
.pill-stat .v{font-size:var(--fs-lg);font-weight:var(--fw-bold);align-self:flex-start;padding-bottom:3px;border-bottom:2px solid var(--accent)}
.progress{height:8px;background:var(--panel-3);border-radius:var(--radius-pill);overflow:hidden}
.progress .bar{height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--primary),var(--gold))}

.tag-list{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Utilidades de espaçamento ----------
   Existiam 364 `style="..."` dentro do JavaScript, e um só deles aparecia 48
   vezes: um margin-bottom de 18px — um valor que nem estava na escala. Estas
   classes cobrem o que se repetia; geometria de uso único (altura de gráfico,
   largura de um campo) continua inline, porque virar classe não ajudaria
   ninguém.

   Os 18px viraram --sp-4 (16px) aqui, e depois no CSS que tinha ficado para
   trás: 7 declarações e a régua do .divider. Diferença de 2px por bloco, num
   valor que só existia por hábito. */
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)}
.ml-auto{margin-left:auto}
.text-green{color:var(--green-2)}.text-red{color:var(--red)}.text-amber{color:var(--amber-2)}.text-white{color:#fff}
.text-saldo{color:var(--primary-2)}

/* ---------- cabeçalho do Financeiro (23/09/2026) ----------
   Receitas − Despesas = Saldo, tudo do período escolhido no topo, com o
   que ainda está em aberto ao lado e o previsto embaixo. A barra mostra
   quanto do previsto já entrou (ou já saiu). A carteira inteira vive na
   linha de baixo, identificada — antes ela ocupava um quadro igual aos
   do mês, e ninguém tinha como saber que era de outra janela. */
.fin-blocos{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:var(--sp-3);align-items:stretch}
.fin-blocos.dois{grid-template-columns:1fr auto 1fr}
.fin-bloco{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);display:grid;gap:6px;align-content:start}
.fb-l{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:var(--fw-medium)}
.fb-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2)}
.fb-v{font-size:var(--fs-xl);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1.15}
.fb-lado{font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.fb-lado b{color:var(--text-2)}
.fb-trilho{height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden}
.fb-trilho i{display:block;height:100%}
.fb-verde{background:var(--green)}.fb-vermelho{background:var(--red)}.fb-saldo{background:var(--primary)}
.fb-prev{font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums;text-align:right}
.fb-op{display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);color:var(--text-3);padding-top:22px}
.fin-carteira{display:flex;flex-wrap:wrap;gap:6px var(--sp-5);font-size:var(--fs-sm);color:var(--text-2);
  border-top:1px dashed var(--line);padding-top:var(--sp-3)}
.fin-carteira b{color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:820px){
  /* no telefone os blocos empilham e os sinais − e = saem de cena */
  .fin-blocos,.fin-blocos.dois{grid-template-columns:1fr}
  .fb-op{display:none}
  .fb-prev{text-align:left}
}
.fw-700{font-weight:var(--fw-medium)}.fw-800{font-weight:var(--fw-bold)}

.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:var(--sp-3)}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius-sm);padding:13px 18px;box-shadow:var(--shadow);min-width:260px;animation:slideIn .25s ease;display:flex;gap:var(--sp-3);align-items:center}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--amber)}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* charts */
.chart-box{position:relative;width:100%}
canvas{max-width:100%}

/* odontograma */
.odonto{display:flex;flex-direction:column;gap:var(--sp-5);align-items:center;padding:10px}
.arcada{display:flex;gap:var(--sp-1);flex-wrap:wrap;justify-content:center}
.tooth{width:38px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);cursor:pointer}
.tooth .crown{width:34px;height:40px;border-radius:6px 6px 9px 9px;background:#fff;border:2px solid #d9c8cd;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.tooth:hover .crown{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.tooth .num{font-size:var(--fs-xs);color:var(--text-2);font-weight:var(--fw-medium)}
.odonto-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center;font-size:var(--fs-sm);color:var(--text-2)}
.odonto-legend span{display:flex;align-items:center;gap:var(--sp-2)}
.odonto-legend i{width:14px;height:14px;border-radius:var(--radius);border:1px solid rgba(0,0,0,.15)}

/* ---------- calendário / agenda ----------
   Os blocos são posicionados por MINUTO e a altura é proporcional à
   duração (--hourH = altura de 1 hora). Blocos que se sobrepõem no
   mesmo horário dividem a largura da coluna do dia.                */
.cal-grid{display:grid;grid-template-columns:70px repeat(var(--cols,1),1fr);
  --hourH:58px;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.cal-head{background:var(--panel-2);font-weight:var(--fw-medium);font-size:var(--fs-sm);padding:10px;text-align:center;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line)}
.cal-times{border-right:1px solid var(--line-soft)}
.cal-time{height:var(--hourH);box-sizing:border-box;border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-sm);color:var(--text-3);padding:3px var(--sp-2);text-align:right}
.cal-day{position:relative;border-right:1px solid var(--line-soft)}
.cal-slot{height:var(--hourH);box-sizing:border-box;border-bottom:1px solid var(--line-soft);cursor:pointer}
.cal-slot:hover{background:var(--panel-2)}
.cal-events{position:absolute;inset:0;pointer-events:none}

.appt{position:absolute;box-sizing:border-box;pointer-events:auto;
  border-radius:var(--radius-sm);padding:var(--sp-1) 7px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:#fff;
  cursor:grab;line-height:1.2;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.22)}
.appt small{display:block;font-weight:var(--fw-normal);opacity:.85;font-size:var(--fs-xs)}
.appt .appt-dur{position:absolute;right:5px;top:4px;font-size:var(--fs-xs);font-weight:var(--fw-medium);opacity:.75}
/* controles de duração — aparecem no hover do bloco */
.appt-ctl{position:absolute;right:4px;bottom:3px;display:none;gap:var(--sp-1)}
.appt:hover .appt-ctl{display:flex}
.appt-ctl button{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.28);color:#fff;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1;display:flex;align-items:center;justify-content:center}
.appt-ctl button:hover{background:rgba(255,255,255,.5)}
/* alça de redimensionar (arrastar a borda de baixo) */
.appt-grip{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.appt-grip::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:20px;height:2px;border-radius:2px;background:rgba(255,255,255,.55);opacity:0;transition:opacity .12s}
.appt:hover .appt-grip::after{opacity:1}
.appt.resizing{opacity:.9;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:20}
body.cal-resizing{cursor:ns-resize;user-select:none}
/* arrastar o bloco para outro horário/dia */
.appt.moving{opacity:.92;box-shadow:0 10px 24px rgba(0,0,0,.42);z-index:30;cursor:grabbing;
  outline:2px solid rgba(255,255,255,.7)}
body.cal-moving{cursor:grabbing;user-select:none}
@media(max-width:1024px){
  /* 88px por hora, não 64: com 64 um bloco de 30 min media 32px de altura e
     ficava abaixo do alvo de toque. A 88 o bloco de 30 min dá 44px e a
     consulta comum vira um alvo confortável. A grade fica mais alta — mas
     calendário se rola de qualquer jeito. */
  .cal-grid{--hourH:88px}
  /* Os dois controles de ±15 min medem 18px e moram dentro do `.appt`, que
     tem `overflow:hidden`: nenhuma camada de toque de 44px caberia ali, e
     lado a lado eles roubariam o toque um do outro. Somem no toque pelo mesmo
     motivo que a alça de arrastar já sumia — a duração se ajusta no
     formulário, que tem o campo "Duração (min)" a um toque de distância. */
  .appt-ctl{display:none}
  .appt-grip{display:none}         /* arrastar não funciona bem no toque */
}

/* A grade do mes. O `min-width:0` das duas caixas de dentro nao e enfeite:
   item de grade nasce com `min-width:auto`, entao o `white-space:nowrap` do
   balao virava o piso da coluna e a pagina inteira rolava de lado a 375px
   (media 751px). Com ele, a coluna obedece ao 1fr e o texto reticencia. */
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2)}
.month-dow{text-align:center;font-size:var(--fs-xs);color:var(--text-3);font-weight:700;min-width:0}
.month-cell{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);min-height:96px;padding:var(--sp-2);min-width:0}
.month-cell.other{opacity:.4}
.month-cell .d{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);margin-bottom:6px}
.month-cell.today .d{color:var(--primary-2)}
.mini-wrap{min-width:0}
.mini-appt{font-size:var(--fs-xs);padding:2px 6px;border-radius:5px;color:#fff;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;min-width:0}
.month-mais{font-size:var(--fs-xs);color:var(--text-3)}

/* No telefone a coluna tem uns 43px: texto de consulta nao cabe em nenhuma
   forma util. As mesmas consultas viram pontos com a cor do tipo, o dia
   inteiro vira alvo de toque (abre a Diaria) e o titulo da celula diz
   quantas sao, para o ponto nao ser a unica informacao. */
@media (max-width:560px){
  .month-grid{gap:4px}
  .month-cell{min-height:56px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
  .month-cell .d{margin-bottom:4px;line-height:1}
  .mini-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:100%}
  /* O ponto e informacao, nao alvo: 7px nao se acerta com o dedo. O toque
     atravessa ate a celula, que abre a Diaria daquele dia. */
  .mini-appt{width:7px;height:7px;padding:0;margin:0;border-radius:50%;flex:0 0 auto;pointer-events:none}
  .mini-txt,.mm-t{display:none}
  .month-mais{line-height:1;margin-top:3px}
}

@media(max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-toggle{display:flex}
  .topbar-search{display:none}
}

/* ---------- Badges extra ---------- */
.b-gold{background:rgba(217,164,65,.16);color:var(--gold)}
.role-badge{font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:.5px;padding:2px var(--sp-2);border-radius:6px}
.role-Admin{background:var(--primary-soft);color:var(--primary-2)}
.role-Dentista{background:var(--teal-soft);color:var(--teal)}
/* tons de TEXTO medidos (--amber-2, --green-2), não os de fundo */
.role-Gerente{background:var(--amber-soft);color:var(--amber-2)}
.role-Secretaria{background:var(--green-soft);color:var(--green-2)}
.role-TSB{background:var(--panel-2);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- Login ---------- */
/* fundo bordô profundo, como a barra lateral — a marca aparece na entrada */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);
  background:linear-gradient(160deg,var(--side-1) 0%,var(--side-2) 60%,#2f060d 100%);position:relative;overflow:hidden}
.login-wrap::before{content:"";position:absolute;inset:0;background:
  radial-gradient(620px 340px at 12% 92%,rgba(196,149,43,.16),transparent 62%),
  radial-gradient(540px 340px at 88% 6%,rgba(255,255,255,.07),transparent 60%);}
.login-card{position:relative;z-index:1;width:100%;max-width:410px;background:var(--bg-2);border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.4);padding:34px 34px 30px;color:var(--text);animation:pop .3s ease}
.login-logo{width:230px;max-width:80%;height:auto;margin:0 auto 14px;display:block}
.login-card h1{text-align:center;font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--primary-2);letter-spacing:.5px}
.login-card .tag{text-align:center;font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--sp-5);margin-top:2px}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);margin-bottom:6px}
.login-field input{width:100%;padding:var(--sp-3) 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text);outline:none;transition:border .15s,background .15s}
.login-field input:focus{border-color:var(--primary);background:var(--bg-2)}
.login-btn{width:100%;padding:13px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),var(--wine-deep));color:#fff;font-weight:var(--fw-medium);font-size:var(--fs-base);margin-top:var(--sp-2);transition:filter .15s}
.login-btn:hover{filter:brightness(1.12)}
.login-err{background:var(--red-soft);color:var(--red);font-size:var(--fs-sm);padding:9px var(--sp-3);border-radius:var(--radius-sm);margin-bottom:14px;text-align:center}
/* primeira chegada ao banco (Auth.telaChegada) */
.chegada-tit{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text);margin:0 0 8px;text-align:center;text-wrap:balance}
.chegada-txt{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 14px;text-align:center}
.chegada-conta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.chegada-conta>div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 6px;text-align:center;min-width:0}
.chegada-conta b{display:block;font-size:var(--fs-lg);font-variant-numeric:tabular-nums;color:var(--green)}
.chegada-conta span{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.chegada-conta .vazio b{color:var(--text-3)}
.login-btn.chegada-perigo{background:none;border:1px solid var(--red);color:var(--red)}
.chegada-sair{display:block;width:100%;min-height:44px;margin-top:var(--sp-2);background:none;border:0;color:var(--text-2);font-size:var(--fs-sm)}
.chegada-dica{font-size:var(--fs-xs);color:var(--text-3);text-align:center;margin:10px 0 0}
/* ============================================================
   MOBILE APP SHELL — aparência de aplicativo para celular
   ============================================================ */
.bottom-nav{display:none}
.sidebar-backdrop{display:none}

@media(max-width:1024px){
  /* ---- App bar superior enxuta ---- */
  .topbar{height:56px;padding:0 var(--sp-3);gap:var(--sp-3)}
  .topbar .sub{display:none}
  .topbar h2{font-size:var(--fs-lg);font-weight:var(--fw-medium)}
  .menu-toggle{display:flex;order:-1}
  .topbar-search{display:none}

  /* ---- Conteúdo: mais respiro + espaço p/ barra inferior ---- */
  .content{padding:var(--sp-4) 14px calc(80px + env(safe-area-inset-bottom))}
  .page-head{margin-bottom:var(--sp-4);flex-wrap:wrap}
  .page-head .ph-txt h2{font-size:var(--fs-xl)}
  .grid{gap:var(--sp-3)}
  .card-pad{padding:var(--sp-4)}

  /* ---- Gaveta (drawer) com fundo escurecido ---- */
  .sidebar{width:84%;max-width:330px;border-right:none;border-radius:0 20px 20px 0;box-shadow:0 0 50px rgba(0,0,0,.35)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(30,12,16,.5);z-index:39;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .sidebar-backdrop.show{opacity:1;visibility:visible}
  .nav-item{padding:14px;font-size:var(--fs-lg);border-radius:var(--radius);margin-bottom:3px}
  .nav-item .ico{width:22px;height:22px}

  /* ---- Barra de navegação inferior (tab bar) ---- */
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:38;
    background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    justify-content:space-around;box-shadow:0 -6px 22px rgba(90,28,36,.07)}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
    padding:5px 2px;border-radius:var(--radius);background:none;color:var(--text-3);
    font-size:var(--fs-xs);font-weight:var(--fw-medium);position:relative;-webkit-tap-highlight-color:transparent;transition:color .15s}
  .bn-item .bn-ico{width:23px;height:23px}
  .bn-item.active{color:var(--primary)}
  .bn-item.active .bn-ico{stroke-width:2.4}
  .bn-badge{position:absolute;top:0;left:calc(50% + 5px);background:var(--red);color:#fff;
    font-size:var(--fs-xs);font-weight:var(--fw-medium);min-width:15px;height:15px;line-height:15px;text-align:center;border-radius:var(--radius-pill);padding:0 3px}

  /* ---- Toques maiores ----
     O alvo cresce sem o botão crescer. `.btn-sm` mede 34px e vive dentro de
     célula de tabela: engordar a caixa para 44px empurraria a linha inteira e
     desfaria o adensamento das 30 tabelas (§3.8 do CONTINUIDADE). Em vez
     disso, uma camada invisível de 44px centrada no botão recebe o toque — a
     linha mantém a altura e o dedo passa a acertar.

     A expansão é só **vertical** de propósito: botões pequenos aparecem lado a
     lado na mesma célula, e crescer na horizontal faria um roubar o toque do
     outro. Na vertical o vizinho mais próximo está a uma linha de distância,
     com 14px de recuo de célula de cada lado.

     Se um ancestral tiver `overflow:hidden` a camada é recortada e sobra o
     botão de 34px — ou seja, o pior caso é o comportamento de antes. */
  .btn{min-height:44px}
  .btn-sm{min-height:34px;position:relative}
  .btn-sm::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
  .btn-icon{width:44px;height:44px}
  .tab{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base)}
  .chip{padding:11px 14px;font-size:var(--fs-base);min-height:44px}
  td,th{padding:14px 14px}
  .kpi{padding:18px 18px}

  /* Sino e menu mediam 38px — os dois alvos que todo mundo usa em toda tela.
     O X do modal media 34px, e é a saída de todo formulário do sistema. */
  .topbar-icon{width:44px;height:44px}
  .modal-close{width:44px;height:44px}

  /* Campo de formulário: 37px de caixa. O `font-size:var(--fs-lg)` não é estética —
     abaixo disso o Safari do iPhone dá zoom sozinho ao focar o campo e a
     página fica torta até o usuário pinçar de volta. */
  .field input,.field select,.field textarea{padding:var(--sp-3);min-height:44px;font-size:var(--fs-lg)}
  .field input[type=color]{min-height:0;height:40px;padding:3px}
  .field textarea{min-height:96px}

  /* ---- Modais como "bottom sheet" ---- */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal,.modal.sm,.modal.lg{max-width:100%;width:100%;border-radius:22px 22px 0 0;max-height:93vh;animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
  .modal-head{border-radius:22px 22px 0 0;padding-top:22px}
  .modal-head::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:var(--radius-sm);background:var(--line)}
  .modal-foot{flex-wrap:wrap;gap:var(--sp-2)}
  .modal-foot .btn{flex:1;min-width:130px}

  /* ---- Toasts acima da barra inferior ---- */
  .toast-wrap{bottom:88px;right:14px;left:14px}
  .toast{min-width:0;width:100%}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* ============================================================
   TIMELINE DE PRODUÇÃO — Controle Protético
   As 4 etapas visíveis agrupam os 8 status reais do fluxo.
   ============================================================ */
.tl-row{display:grid;grid-template-columns:minmax(170px,1fr) minmax(260px,1.5fr) auto;gap:var(--sp-5);
  align-items:center;padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.tl-row:last-child{border-bottom:none}
.tl-row:hover{background:var(--panel-2)}
.tl-id{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--gold-2);letter-spacing:.7px}
.tl-name{font-weight:var(--fw-medium);font-size:var(--fs-base);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:1px}

.tl-track{position:relative}
.tl-line{position:absolute;top:6.5px;height:3px;background:var(--panel-3);border-radius:var(--radius-sm)}
.tl-line i{display:block;height:100%;background:var(--gold);border-radius:var(--radius-sm)}
.tl-line.late i{background:var(--red)}
.tl-steps{position:relative;display:flex}
.tl-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center}
.tl-step b{width:16px;height:16px;border-radius:50%;background:var(--bg-2);border:2.5px solid var(--panel-3);box-sizing:border-box}
.tl-step em{font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-2);line-height:1.2}
.tl-step.done b{background:var(--gold);border-color:var(--gold)}
.tl-step.done em{color:var(--text-2)}
.tl-step.now b{background:#fff;border-color:var(--gold);box-shadow:0 0 0 4px var(--teal-soft)}
.tl-step.now em{color:var(--gold-2);font-weight:var(--fw-medium)}
.tl-row.late .tl-step.done b{background:var(--red);border-color:var(--red)}
.tl-row.late .tl-step.now b{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.tl-row.late .tl-step.now em{color:var(--red)}
.tl-right{text-align:right;white-space:nowrap}
.tl-prazo{font-size:var(--fs-sm);color:var(--text-3)}
.tl-prazo b{display:block;font-size:var(--fs-base);color:var(--text);font-weight:var(--fw-medium);margin-top:1px}
@media(max-width:820px){
  .tl-row{grid-template-columns:1fr;gap:var(--sp-3)}
  .tl-right{text-align:left}
}

/* ---- Editor da timeline (reaproveita a moldura do catálogo .proc-*) ---- */
.tl-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
/* o nome é um <span> dentro do .proc-esp-item, então precisa desfazer o
   estilo de pílula que aquela regra aplica ao contador de etapas */
.proc-esp-item .tl-pnome,.proc-esp-item.active .tl-pnome{flex:1;min-width:0;margin-left:0;padding:0;background:none;
  font-size:inherit;font-weight:inherit;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* o padding do .field deixaria a amostra de cor com 7px de altura */
.field input[type=color]{padding:3px;height:36px;cursor:pointer}
.tl-num{display:flex;align-items:center;gap:var(--sp-1);background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--sp-1)}
.tl-num button{width:30px;height:28px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--line-soft);
  font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--text-2);line-height:1}
.tl-num button:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
.tl-num b{flex:1;text-align:center;font-size:var(--fs-base)}
.tl-et-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.tl-et-row{display:flex;align-items:center;gap:var(--sp-2)}
.tl-et-n{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--panel-3);color:var(--text-3);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center}
.tl-et-nome{flex:1;min-width:0;padding:var(--sp-2) 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-2);color:var(--text);outline:none;font-size:var(--fs-base)}
.tl-et-nome:focus{border-color:var(--primary)}
.tl-et-fim{display:flex;align-items:center;gap:var(--sp-1);flex-shrink:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-3);cursor:pointer;padding:5px 9px;border-radius:var(--radius-sm);border:1px solid var(--line-soft)}
.tl-et-fim.on{color:var(--green-2);border-color:var(--green);background:var(--green-soft)}
.tl-et-btn{width:28px;height:28px;flex-shrink:0;border-radius:var(--radius-sm);border:1px solid var(--line-soft);
  background:var(--panel-2);color:var(--text-3);font-size:var(--fs-base);display:flex;align-items:center;justify-content:center}
.tl-et-btn svg{width:14px;height:14px}
.tl-et-btn:hover:not([disabled]){border-color:var(--line);color:var(--text)}
.tl-et-btn.del:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.tl-et-btn[disabled]{opacity:.35;cursor:default}
.tl-prev{background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--radius);padding:var(--sp-4) 18px 10px}
@media(max-width:560px){
  .tl-et-row{flex-wrap:wrap}
  .tl-et-nome{flex:1 1 100%;order:-1}
  .tl-et-fim{margin-left:auto}
}

/* ============================================================
   MARKETING — campanhas em tabela, como o resto do sistema
   ============================================================ */
.mk-tabela .mk-acoes,td.fin-acoes{white-space:nowrap}
td.fin-acoes .btn+.btn{margin-left:6px}
/* ============================================================
   FAIXA DE ALERTA CLÍNICO — acima das abas da ficha, em todas elas
   Vermelha quando há alergia ou medicamento de risco; âmbar quando é
   só condição declarada. Aparece para todos os perfis, inclusive a TSB.
   ============================================================ */
.faixa-clin{display:flex;gap:var(--sp-3);align-items:flex-start;flex-wrap:wrap;
  background:var(--red-soft);border:1px solid rgba(209,43,58,.25);border-left:3px solid var(--red);
  border-radius:var(--radius-sm);padding:10px var(--sp-4);margin-bottom:var(--sp-3)}
.faixa-clin.leve{background:var(--amber-soft);border-color:rgba(224,138,30,.3);border-left-color:var(--amber)}
.faixa-clin .fc-rot{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);white-space:nowrap;padding-top:2px}
.faixa-clin.leve .fc-rot{color:var(--amber-2)}
.faixa-clin ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px var(--sp-4);
  font-size:var(--fs-sm);color:var(--text)}
.faixa-clin li b{color:var(--red-2,#8e0f24)}
.faixa-clin.leve li b{color:var(--amber-2)}
@media(max-width:560px){.faixa-clin{flex-direction:column;gap:4px}.faixa-clin ul{gap:2px var(--sp-3)}}

/* simulador da maquininha (26/09) — as duas contas lado a lado ANTES de
   cobrar. Cada opção é um `label` inteiro clicável, e não um rádio de 16 px
   com texto ao lado: o alvo é a linha toda, que a 375 px é o que o dedo
   encontra. `min-height` de 44 px no label, não na moldura (§5). */
/* O simulador ocupa a linha inteira do formulário. Não é um `.field` — se
   fosse, o `.field input{width:100%}` inflaria o rádio —, então precisa do
   span próprio: `1/-1` vale para 4, 2 ou 1 coluna, sem repetir no @media. */
.form-grid>.sim-cx{grid-column:1/-1}
.sim-cartao{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);padding:10px 12px;display:grid;gap:8px}
.sim-cartao.sem{color:var(--text-2);font-size:var(--fs-sm);border-left:3px solid var(--amber);background:var(--bg-2)}
.sim-cab{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.sim-op{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;min-height:44px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.sim-op.on{border-color:var(--primary);background:var(--primary-soft)}
/* `input[type=radio]`, e não `input`: dentro de um formulário o
   `.field input{width:100%}` tem a mesma especificidade de `.sim-op input`
   e vem depois na folha — o rádio saía com 388 px de largura (§5). */
.sim-op input[type=radio]{width:18px;height:18px;margin:2px 0 0;padding:0;flex:none;accent-color:var(--primary)}
.sim-txt{display:grid;gap:1px;font-size:var(--fs-sm);line-height:1.4}
.sim-obs{color:var(--text-3);font-size:var(--fs-xs)}

/* prazo da anamnese (decisão 1) — o selo diz há quanto tempo a anamnese
   venceu, e aparece na faixa de saúde, no cartão da ficha e na linha do Hoje.
   É `.badge` do sistema, não uma família nova: o `prontuario.css` achata o
   `.badge` em ponto colorido mais texto (`background:none!important`), e
   entrar na família fez o selo herdar isso sem uma linha de CSS.
   Na faixa ele fica FORA do `.fc-rot`, que é nowrap (§5).
   O botão toma a linha inteira, para a camada de toque de 44 px do `.btn-sm`
   não cruzar com a de nenhum vizinho (§5). */
.card-head .badge{margin-left:var(--sp-2)}
.fc-acao{flex-basis:100%}
.cel-selo{margin-top:4px}
/* a pergunta da reconfirmação: o texto é a pergunta, não um rótulo */
.rev-perg{font-size:var(--fs-lg);font-weight:var(--fw-medium);line-height:1.3;margin:0 0 6px}
.aviso-suave{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-2);
  background:var(--panel-2);border-left:3px solid var(--amber);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:8px 12px}

/* garantia do trabalho (proposta 24) — faixa dentro do formulário do
   tratamento, e não modal: U.modal fecharia o formulário (§5). Vão vertical de
   10px para a camada de toque do botão não cruzar com a linha de cima. */
.gar-faixa{display:flex;align-items:center;flex-wrap:wrap;gap:10px var(--sp-3);
  background:var(--teal-soft);border:1px solid rgba(20,120,120,.22);border-left:3px solid var(--teal);
  border-radius:var(--radius-sm);padding:10px var(--sp-4);margin:var(--sp-3) 0;font-size:var(--fs-sm)}
.gar-faixa.feito{background:var(--green-soft);border-color:rgba(28,138,82,.25);border-left-color:var(--green)}
.gar-faixa svg{width:17px;height:17px;flex-shrink:0;color:var(--teal)}
.gar-faixa.feito svg{color:var(--green)}
.gar-faixa span{flex:1 1 240px;min-width:0;color:var(--text)}
.gar-faixa .btn{flex:0 0 auto}
/* o selo na lista de tratamentos e na evolução */
.badge.b-garantia{background:var(--green-soft);color:var(--green-2)}

/* Dois botões pequenos na mesma célula de tabela. Com `margin-left` eles
   quebram sem vão vertical e as camadas invisíveis de 44px do .btn-sm se
   cruzam — o alvo efetivo caía para 33px (§5). O vão de 10px na vertical é o
   mesmo remédio já usado nas barras de ação. */
.td-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px var(--sp-2)}
/* No telefone o vão não basta: linhas de tabela vizinhas ficam a menos de
   44px uma da outra e as camadas se cruzam de novo. Aqui o botão tem altura
   de verdade, que é o mesmo remédio do `select` (§5). */
@media(max-width:640px){
  .td-acoes .btn{min-height:44px}
  /* o + redondo do catálogo e o seletor de forma de pagamento nasceram menores
     que a régua; no telefone valem os 44px de verdade */
  .proc-head .proc-add{width:44px;height:44px}
  .pg-op{min-height:44px}
  /* `select` não tem a camada invisível do .btn-sm: precisa de altura de
     verdade. O seletor de período do recall media 35px de alvo. */
  select.btn-sm{min-height:44px}
}

/* Campo digitado DENTRO de uma célula de tabela — teto de despesa, taxa da
   maquininha. Sem classe, o input fica com a altura padrão do navegador (21px)
   e o alvo de toque não chega nem à metade dos 44px. */
input.cel-input,td>input[type=number]{min-height:44px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);
  color:var(--text);font-size:var(--fs-base);font-variant-numeric:tabular-nums;width:100%}
td>input[type=number]:focus{outline:2px solid var(--primary);outline-offset:1px}

/* medicamento de risco, dentro do formulário do paciente e da receita */
.ana-risco{flex:1 1 100%;font-size:var(--fs-sm);color:var(--amber-2);display:flex;align-items:center;gap:6px;margin-top:4px}
.ana-risco svg{width:15px;height:15px;flex:none}

/* conflito entre o que se vai prescrever e a alergia declarada */
.rec-conflito{flex:1 1 100%;margin-top:var(--sp-2);padding:10px var(--sp-3);
  background:var(--red-soft);border:1px solid rgba(209,43,58,.3);border-left:3px solid var(--red);
  border-radius:var(--radius-sm);font-size:var(--fs-sm)}
.rec-conflito p{margin:0 0 var(--sp-2)}
.rec-conflito .rc-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.rec-conflito.aceito{background:var(--panel-2);border-left-color:var(--text-3);border-color:var(--line)}
/* interação com o uso contínuo (item 32): âmbar, porque avisa e não pede decisão */
.rec-conflito.rec-interacao{display:flex;gap:var(--sp-2);align-items:flex-start;background:var(--amber-soft);
  border-color:rgba(224,138,30,.35);border-left-color:var(--amber);color:var(--text)}
.rec-conflito.rec-interacao p:last-child{margin-bottom:0}

/* grade de trabalho do profissional */
.grade-tab td{padding:6px 8px 6px 0}
.grade-tab input[type=time]{width:auto;min-width:96px;padding:4px 6px}

/* antes e depois: duas imagens lado a lado, e a versão de mostrar ao paciente */
.ad-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);background:var(--panel-2);padding:var(--sp-3);border-radius:var(--radius)}
.ad-lado{margin:0;display:flex;flex-direction:column;gap:6px}
.ad-lado img{width:100%;height:auto;max-height:52vh;object-fit:contain;background:#1b1b1b;border-radius:var(--radius-sm)}
.ad-lado figcaption{font-size:var(--fs-sm);color:var(--text-2);text-align:center}
.ad-par:fullscreen{background:#111;place-content:center;padding:24px}
.ad-par:fullscreen .ad-lado figcaption{color:#e8e2da;font-size:var(--fs-base)}
.ad-cheio{position:fixed;inset:0;z-index:200;background:#111;overflow:auto;place-content:center;padding:24px}
.ad-cheio .ad-lado figcaption{color:#e8e2da;font-size:var(--fs-base)}
@media(max-width:700px){.ad-par{grid-template-columns:1fr}}

/* folha da semana: um bloco por dia, e a folha deitada na impressão */
.rel-dia{margin-bottom:var(--sp-5);break-inside:avoid}
.rel-dia h3{font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:0 0 var(--sp-2);border-bottom:1px solid var(--line);padding-bottom:4px}

/* aviso de débito e de falta no formulário de agendamento */
.ag-aviso{background:var(--amber-soft);border:1px solid rgba(224,138,30,.3);border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);padding:10px var(--sp-3);font-size:var(--fs-sm)}
.ag-aviso p{margin:0 0 var(--sp-2)}
.ag-aviso b{color:var(--amber-2)}
.ag-aviso .btns{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* pendências do sino */
.notif-lista{list-style:none;margin:0;padding:0}
.notif-lista li{display:flex;align-items:center;gap:var(--sp-3);padding:10px 0 10px var(--sp-3);border-bottom:1px solid var(--line-soft);box-shadow:inset 3px 0 0 var(--line);font-size:var(--fs-sm)}
.notif-lista li>span{flex:1;min-width:0;overflow-wrap:anywhere}
.notif-lista li.notif-err{box-shadow:inset 3px 0 0 var(--red)}
.notif-lista li.notif-warn{box-shadow:inset 3px 0 0 var(--amber)}
.mk-tabela .mk-acoes .btn+.btn{margin-left:var(--sp-2)}
.mk-como{display:grid;gap:10px;font-size:var(--fs-base);color:var(--text-2);max-width:78ch}
.mk-como p{margin:0}
.mk-como b{color:var(--text)}
.mk-previa{margin-top:var(--sp-4);border-left:3px solid var(--line);padding:var(--sp-2) 0 var(--sp-2) var(--sp-4)}
.mk-previa-l{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:6px}
#m_preview{font-size:var(--fs-base);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}

/* ============================================================
   CATÁLOGO DE PROCEDIMENTOS — especialidade → procedimentos → novo
   ============================================================ */
.proc-wrap{display:grid;grid-template-columns:250px 1fr;min-height:440px;max-height:64vh}
.proc-esp{border-right:1px solid var(--line-soft);display:flex;flex-direction:column;background:var(--panel-2)}
.proc-esp-head{padding:var(--sp-4) 18px;font-weight:var(--fw-medium);font-size:var(--fs-base);border-bottom:1px solid var(--line-soft)}
.proc-esp-list{flex:1;overflow-y:auto}
.proc-esp-item{padding:var(--sp-3) 18px;font-size:var(--fs-base);cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);
  border-bottom:1px solid var(--line-soft);transition:background .12s}
.proc-esp-item span{margin-left:auto;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-3);
  background:var(--panel-3);border-radius:var(--radius-pill);padding:1px 7px}
.proc-esp-item:hover{background:var(--panel-3)}
.proc-esp-item.active{background:var(--bg-2);color:var(--primary);font-weight:var(--fw-medium);box-shadow:inset 3px 0 0 var(--primary)}
.proc-esp-item.active span{background:var(--primary-soft);color:var(--primary-2)}

.proc-side{display:flex;flex-direction:column;min-width:0}
.proc-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.proc-head-t{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--text-2);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proc-add{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proc-add:hover{background:var(--primary-2)}
.proc-add svg{width:18px;height:18px}
.proc-search{display:flex;align-items:center;gap:var(--sp-2);background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:7px 10px;flex:0 1 230px;min-width:150px;color:var(--text-3)}
.proc-search svg{width:16px;height:16px;flex-shrink:0}
/* o campo é quem recebe o toque, não a caixa em volta: 17px de alvo (§8.7) */
.proc-search input{background:none;border:none;outline:none;flex:1;min-width:0;color:var(--text);font-size:var(--fs-base);min-height:44px}

.proc-items{flex:1;overflow-y:auto}
.proc-item{padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.proc-item.sel{background:var(--primary-soft)}
.proc-item.novo{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--primary)}
.proc-item.confirm{background:var(--red-soft);box-shadow:inset 3px 0 0 var(--red)}
/* A pergunta de apagar DENTRO de um formulário que está num modal: U.confirm
   abriria outro modal e U.modal fecha o aberto (§5), levando junto o que foi
   digitado. Mesma leitura visual do .proc-item.confirm. Vão vertical de 12px
   para as camadas de toque dos dois botões não se cruzarem quando quebram. */
.conf-embutida{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-2);
  background:var(--red-soft);box-shadow:inset 3px 0 0 var(--red);border-radius:var(--radius-sm);
  padding:10px 12px 10px 15px;margin:var(--sp-2) 0;font-size:var(--fs-sm);color:var(--text)}
.conf-embutida span{flex:1 1 220px;min-width:0}
/* no rodapé fixo do modal a pergunta ocupa a largura toda, no lugar dos botões */
.modal-foot .conf-rodape{flex:1 1 100%;margin:0}
.modal-foot .conf-rodape .btn{flex:0 0 auto;min-width:0}
/* classe, e não o atributo hidden: .btn{display:inline-flex} venceria o [hidden] do navegador */
.modal-foot .fora-de-cena{display:none !important}
/* a classe passou a valer em qualquer lugar: campo que só existe em certos
   casos (Indicado por, proposta 47) some sem depender do [hidden], que o
   .btn vence (§5) */
.fora-de-cena{display:none !important}
.proc-esp-nova{padding:10px;border-top:1px solid var(--line-soft)}
.proc-esp-nova input{width:100%;padding:9px 11px;border:1px solid var(--primary);border-radius:var(--radius-sm);
  background:var(--bg-2);color:var(--text);outline:none;font-size:var(--fs-base)}
.proc-nome{font-weight:var(--fw-medium);font-size:var(--fs-base);margin-bottom:9px;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.proc-cat{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--gold-2);background:var(--teal-soft);border-radius:var(--radius-pill);padding:2px 9px}
.proc-vals{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
.proc-vals .field{flex:0 1 165px}
/* garantia e retorno são meses, não reais: campo curto, para as quatro caixas
   caberem na mesma linha antes de quebrar (propostas 24 e 44) */
.proc-vals .field.proc-mini{flex:0 1 118px}
.proc-acts{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
/* barra de opções do orçamento (proposta 8) */
.opc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--sp-2);margin:var(--sp-4) 0 var(--sp-2)}
.opc-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);color:var(--text-2);text-align:left;line-height:1.25}
.opc-chip b{font-size:var(--fs-base);font-weight:var(--fw-medium)}
.opc-chip span{font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.opc-chip i{font-style:normal;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--green-2)}
.opc-chip.on{border-color:var(--primary);background:var(--primary-soft);color:var(--text)}
.opc-chip.esc{box-shadow:inset 3px 0 0 var(--green)}
.opc-rot{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0;
  font-size:var(--fs-sm);color:var(--text-3)}
.opc-rot input{min-height:44px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text);width:100%}

/* ---------- apresentar o plano ao paciente (proposta 48) ----------
   Tela cheia, sem menu, sem custo e sem nada editável: é a única tela do
   sistema desenhada para quem está do OUTRO lado da mesa. Fica por cima de
   tudo, inclusive do modal do orçamento de onde saiu. */
.apres{position:fixed;inset:0;z-index:400;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;overflow:auto;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.apres-topo{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line-soft)}
.apres-clinica{font-weight:var(--fw-medium);color:var(--primary);letter-spacing:.02em}
.apres-sair{margin-left:auto;width:44px;height:44px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--text-2)}
.apres-sair:hover{background:var(--panel-2)}
.apres-corpo{flex:1;max-width:820px;width:100%;margin:0 auto;padding:var(--sp-6) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-5);justify-content:center}
.apres-pac{font-size:clamp(20px,3.2vw,28px);color:var(--text-2)}
.apres-corpo h2{font-size:clamp(24px,4vw,34px);margin:0;font-weight:var(--fw-bold)}
.apres-imgs{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.apres-imgs img{width:160px;height:160px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line)}
.apres-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.apres-itens li{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  font-size:clamp(18px,2.6vw,24px);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-soft)}
.apres-itens .ap-dente{font-family:var(--mono);font-size:.7em;color:var(--primary);min-width:2.4em}
.apres-itens em{font-style:normal;font-size:.7em;color:var(--text-3)}
.apres-valor{margin-top:var(--sp-3)}
.apres-valor .ap-de{font-size:clamp(16px,2vw,20px);color:var(--text-3);text-decoration:line-through}
.apres-valor .ap-total{font-size:clamp(38px,7vw,64px);font-weight:var(--fw-bold);
  color:var(--primary);line-height:1.05;font-variant-numeric:tabular-nums}
.apres-valor .ap-cond{font-size:clamp(17px,2.4vw,22px);color:var(--text-2);margin-top:var(--sp-2)}
.apres-prof{font-size:var(--fs-base);color:var(--text-3)}
.apres-pe{display:flex;flex-wrap:wrap;gap:10px var(--sp-3);justify-content:center;
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-soft)}
@media(max-width:560px){ .apres-corpo{padding:var(--sp-5) var(--sp-4);gap:var(--sp-4)}
  .apres-imgs img{width:104px;height:104px} }

/* a linha onde o acumulado cruza 80% do gasto (proposta 50) */
.con-corte td{border-top:2px solid var(--gold-2)}
.con-corte td:first-child::before{content:"80% do gasto acima desta linha";display:block;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--gold-2);
  font-weight:var(--fw-medium);margin-bottom:4px}

/* kit de material do procedimento (proposta 5) — embutido no item do catálogo */
.kit-box{margin-top:12px;padding:12px 14px;background:var(--panel-2);
  border-left:3px solid var(--teal);border-radius:var(--radius-sm)}
.kit-cab{font-weight:var(--fw-medium);font-size:var(--fs-base);margin-bottom:9px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-3)}
.kit-cab em{font-style:normal;font-size:var(--fs-sm);color:var(--text-3)}
/* a lista de conferência dentro do formulário da sessão (decisão 4) */
.kit-uso{display:flex;flex-direction:column;gap:2px}
.kit-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  min-height:44px;padding:4px 10px;border-radius:var(--radius-sm);cursor:pointer}
.kit-item:hover{background:var(--panel-2)}
.kit-item.falta{opacity:.72}
/* Caixa de marcar com alvo de toque de verdade. O checkbox nativo mede 16px e
   não tem a camada invisível do `.btn-sm`: ou ele É 44px, ou o dedo erra (§5,
   o mesmo remédio do `select`). Com `appearance:none` ele deixa de ser
   elemento substituído e passa a aceitar ::after, que é onde a marca é
   desenhada — a caixa visível continua com 18px, dentro de um alvo de 44. */
/* `.check input` já valia 16px e tem especificidade maior que uma classe só:
   por isso o seletor aqui é do tipo + classe, senão o tamanho não pega (§5). */
input[type=checkbox].ck44{appearance:none;-webkit-appearance:none;margin:0;flex:none;cursor:pointer;
  width:44px;height:44px;border:0;background:none;position:relative}
.ck44::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;
  transform:translate(-50%,-50%);border:1.5px solid var(--line-strong);
  border-radius:var(--radius);background:var(--bg-2);box-sizing:border-box}
.ck44:checked::after{background:var(--primary);border-color:var(--primary)}
.ck44:checked::before{content:"";position:absolute;left:50%;top:50%;z-index:1;
  width:4px;height:9px;margin:-6px 0 0 -2px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.ck44:focus-visible{outline:2px solid var(--primary);outline-offset:-10px;border-radius:var(--radius-sm)}
.kit-item input{flex:none}
.kit-nome{flex:1 1 180px;min-width:0}
.kit-qtd{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.kit-custo{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kit-aviso{font-size:var(--fs-sm);color:var(--amber-2);white-space:nowrap}
.kit-add{display:flex;flex-wrap:wrap;gap:10px var(--sp-2);align-items:center;margin-top:10px}
.kit-add select{flex:1 1 260px;min-width:0;min-height:44px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}
.tbl-mini tfoot td{border-top:1px solid var(--line);border-bottom:0}

/* o reajuste é um painel EMBUTIDO: U.modal fecharia o catálogo (§5) */
.proc-item.rea{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--gold-2)}
.proc-item.rea .check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);
  color:var(--text-2);min-height:44px}
.tbl-mini{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl-mini th,.tbl-mini td{padding:5px 9px;border-bottom:1px solid var(--line-soft);text-align:left}
.tbl-mini th{font-weight:var(--fw-medium);color:var(--text-2);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.04em}
.tbl-mini .num{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .proc-wrap{grid-template-columns:1fr;max-height:none}
  .proc-esp{border-right:none;border-bottom:1px solid var(--line-soft)}
  .proc-esp-list{max-height:170px}
  .proc-acts{margin-left:0;width:100%}
}
@media(max-width:560px){
  /* a busca desce para a própria linha, senão o nome da especialidade é cortado */
  .proc-head-t{flex:1 1 auto}
  .proc-search{flex:1 1 100%;order:3}
  .proc-vals .field{flex:1 1 140px}
}

/* ============================================================
   DOCUMENTOS — cartões de modelo + editor de modelo
   ============================================================ */
.doc-card{padding:22px var(--sp-4) var(--sp-4);display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-1);cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s,transform .12s}
.doc-card:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(20,24,30,.10);transform:translateY(-2px)}
.doc-ilu{width:78px;height:82px;display:block;margin-bottom:var(--sp-2)}
.doc-nome{font-weight:var(--fw-medium);font-size:var(--fs-base);line-height:1.3}
.doc-sub{font-size:var(--fs-sm);color:var(--text-3)}
.doc-btn{margin-top:var(--sp-3);width:100%;padding:9px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);transition:all .15s}
.doc-btn svg{width:15px;height:15px}
.doc-card:hover .doc-btn{background:var(--accent);color:#fff}
.doc-acts{position:absolute;top:10px;right:10px;display:flex;gap:var(--sp-1);opacity:0;transition:opacity .15s;z-index:2}
.doc-card:hover .doc-acts{opacity:1}
.doc-novo{border-style:dashed;border-color:var(--line);background:var(--panel-2);justify-content:center}
.doc-novo::before{display:none}
.doc-plus{width:78px;height:82px;margin-bottom:var(--sp-2);border-radius:var(--radius);
  border:2px dashed var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.doc-plus svg{width:30px;height:30px}
@media(max-width:1024px){.doc-acts{opacity:1}}

.dt-vars{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:10px}
.dt-var{font-size:var(--fs-sm);font-weight:var(--fw-medium);font-family:ui-monospace,Consolas,monospace;
  padding:var(--sp-1) 9px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel-2);color:var(--text-2);cursor:pointer;transition:all .12s}
.dt-var:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.dt-var.propria{border-color:var(--gold);color:var(--gold-2);background:var(--teal-soft)}
.dt-corpo{width:100%;min-height:220px;resize:vertical;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;
  color:var(--text);outline:none;font-size:var(--fs-base);line-height:1.65;
  font-family:ui-monospace,Consolas,'Courier New',monospace}
.dt-corpo:focus{border-color:var(--primary);background:var(--bg-2)}
.dt-campo{display:flex;gap:var(--sp-3);align-items:flex-end;padding:10px;margin-bottom:var(--sp-2);
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.dt-campo .field{flex:1;min-width:0}
@media(max-width:720px){
  .dt-campo{flex-wrap:wrap}
  .dt-campo .field{flex:1 1 45%}
}

/* ============================================================
   ODONTOGRAMA-SELETOR — clicar na face lança o procedimento
   ============================================================ */
.odo-sel-tooth{border-radius:var(--radius-sm);transition:background .12s}
.odo-sel-tooth.on{background:var(--primary-soft)}
.odo-sel-dica{text-align:center;font-size:var(--fs-sm);color:var(--text-3);margin-top:10px}
.odo-occ-pick .odo-pick{cursor:pointer;transition:fill .1s}
.odo-occ-pick .odo-pick:hover{fill:var(--primary-soft)!important;stroke:var(--primary);stroke-width:.8}

/* chips da seleção (dente + face), como no campo "Selecionar Dente/Região" */
.sel-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;min-height:38px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px}
.sel-chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 6px var(--sp-1) 11px;border-radius:var(--radius-pill);
  background:var(--primary);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap}
.sel-chip button{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.28);color:#fff;
  font-size:var(--fs-sm);line-height:1;display:flex;align-items:center;justify-content:center}
.sel-chip button:hover{background:rgba(255,255,255,.55)}
.sel-vazio{font-size:var(--fs-sm);color:var(--text-3)}
.sel-barra{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.sel-barra .field{flex:1 1 220px;min-width:0}

/* os dois odontogramas ficam empilhados: situação inicial acima, plano abaixo */
/* as abas do odontograma reaproveitam o trilho de chips do Financeiro (.int-sub) */

/* ============================================================
   FORMA DE PAGAMENTO — seletor com ícone
   ============================================================ */
.pg-grupo{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pg-op{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);
  color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap;
  transition:all .12s}
.pg-op svg{width:17px;height:17px;flex-shrink:0}
.pg-op:hover{border-color:var(--line);background:var(--panel-3);color:var(--text)}
.pg-op.on{background:var(--primary);border-color:var(--primary);color:#fff;
  box-shadow:0 3px 10px rgba(165,18,44,.25)}
/* forma de pagamento nas listagens */
.pg-tag{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap}
.pg-tag svg{width:15px;height:15px;color:var(--text-3);flex-shrink:0}
@media(max-width:560px){
  .pg-op{padding:var(--sp-2) 10px;font-size:var(--fs-sm)}
  .pg-op span{display:none}
  .pg-op svg{width:19px;height:19px}
}

/* ============================================================
   INTELIGÊNCIA — abas, alertas, prazos e as listas por trás dos números
   ============================================================ */
/* navegação interna do Financeiro (as 4 visões que eram 4 áreas) */
.int-sub{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
/* o que só existe no papel: o cabeçalho de um relatório que, na tela, já tem título */
.so-print{display:none !important}
.int-sub .chip{padding:var(--sp-2) 14px;font-size:var(--fs-base);font-weight:var(--fw-medium)}
.int-sub .chip svg{width:15px;height:15px}

/* aviso de recorte por profissional + faixa "o que merece atenção" */
.int-aviso{display:flex;align-items:center;gap:var(--sp-2);background:var(--primary-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:9px 13px;font-size:var(--fs-sm);color:var(--primary-2);margin-bottom:var(--sp-4)}
.int-aviso svg{width:15px;height:15px;flex-shrink:0}
.int-alertas{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);
  padding:var(--sp-3) 14px;margin-bottom:var(--sp-4)}
.int-alertas-t{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.7px;color:var(--text-3);margin-bottom:9px}
.int-alertas-t svg{width:14px;height:14px}
.int-alerta{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-base);padding:7px 11px;border-radius:var(--radius-sm);
  margin-top:6px;border-left:3px solid var(--amber);background:var(--panel-2)}
.int-alerta.err{border-left-color:var(--red)}
.int-alerta span{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-3);white-space:nowrap}
.int-alerta span svg{width:13px;height:13px}
.int-alerta:hover{background:var(--panel-3)}

/* A central radial (cérebro, nós, barra compacta) saiu em 14/09/2026: a
   Inteligência abre no Dashboard com as áreas em abas (.int-abas usa .tabs). */

/* o alerta é botão: leva à lista por trás do número */
button.int-alerta{width:100%;text-align:left;color:var(--text);font:inherit;font-size:var(--fs-base);cursor:pointer;border-top:0;border-right:0;border-bottom:0}
button.int-alerta:focus-visible{outline:3px solid var(--primary-soft);outline-offset:1px}

/* de quando é o número, e o indicador que abre a lista */
/* display:table = linha própria com a largura do texto; valor e tendência já
   dividem a linha (inline), e a etiqueta colada neles parecia parte da frase */
.kpi .k-prazo{display:table;margin-top:8px;font-size:var(--fs-xs);font-variant-numeric:tabular-nums;letter-spacing:.3px;
  color:var(--gold-2);border:1px solid rgba(196,149,43,.45);border-radius:var(--radius-sm);padding:0 6px;line-height:1.6}
button.kpi{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.kpi .k-abrir{display:flex;align-items:center;gap:var(--sp-1);margin-top:6px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--primary-2)}
.kpi .k-abrir svg{width:13px;height:13px}
button.kpi:hover .k-abrir{text-decoration:underline}
button.kpi:focus-visible{outline:3px solid var(--primary-soft);outline-offset:2px}

/* recebido por profissional: barras na mesma escala, com a parte sem dono */
.int-barras{display:grid;gap:10px}
.int-barra{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm)}
.int-barra .ib-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-barra .ib-trilho{height:12px;background:var(--panel-3);border-radius:2px;overflow:hidden}
.int-barra .ib-fill{display:block;height:100%;min-width:2px;background:var(--primary)}
.int-barra.sem .ib-nome{color:var(--text-3)}
.int-barra.sem .ib-fill{background:var(--text-3)}
.int-barra .ib-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);white-space:nowrap}
.int-barra .ib-v small{display:block;font-size:var(--fs-xs);color:var(--text-2);font-weight:400}
@media(max-width:560px){ .int-barra{grid-template-columns:minmax(0,1fr) auto} .int-barra .ib-trilho{grid-column:1/-1;grid-row:2} }

/* satisfação: o que cada lado comenta */
.int-termos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.int-termos-t{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}
.int-termos ol{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.int-termos li{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-sm);border-bottom:1px solid var(--line-soft);padding-bottom:3px}
.int-termos li b{font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:var(--fw-medium)}
@media(max-width:560px){ .int-termos{grid-template-columns:1fr} }

/* a lista aberta por cima */
.int-lista table td .btn{white-space:nowrap}

/* Item de grade tem min-width:auto: a tabela larga do Detalhamento (5 colunas)
   esticava a coluna única a 375px e a página inteira rolava de lado. Com 0, a
   tabela rola dentro do próprio .table-wrap, como no resto do sistema. */
#intBody .grid>*{min-width:0}

/* ============================================================
   AGENDA → HOJE — a fila do dia da recepção
   ============================================================ */
.hoje-bloco .card-head .hoje-n{margin-left:auto;min-width:26px;height:22px;padding:0 8px;border-radius:var(--radius-pill);
  background:var(--primary);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.hoje-bloco .card-head .hoje-n.zero{background:var(--panel-3);color:var(--text-3)}
.hoje-bloco td{vertical-align:middle}
/* margem vertical de 6px: quando os botões quebram de linha, as camadas de
   toque de 44px do .btn-sm não se cruzam (§5) */
.hoje-bloco td.hoje-acoes{white-space:normal}
.hoje-bloco td.hoje-acoes>.btn{margin:6px 0 6px 6px}
#agBody .grid>*{min-width:0}

/* ============================================================
   CONTROLE PROTÉTICO — quadros com aba lateral por tipo de trabalho
   ============================================================ */
/* Aguardando reabilitação: a fila de quem espera a prótese sobre implante.
   Linha, não cartão — o cartão é do trabalho que já existe, e confundir os
   dois faria a fila parecer trabalho aberto. Grid de três faixas: quem,
   quando, e o que fazer. */
.pr-aguard{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.pr-ag{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--sp-3);
  background:var(--panel);border:1px solid var(--line-soft);border-left:3px solid var(--gold-2);
  border-radius:var(--radius);padding:11px var(--sp-4)}
/* a ordem importa: o shorthand `border-color` depois de `border-left-color`
   apagaria a barra vermelha e deixaria a linha vencida com a borda mole. */
.pr-ag.late{border-color:rgba(209,43,58,.35);border-left-color:var(--red)}
.pr-ag-txt{min-width:0}
.pr-ag-pac{font-weight:var(--fw-medium);font-size:var(--fs-base);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-ag-sub{font-size:var(--fs-sm);color:var(--text-3)}
.pr-ag-data{text-align:right;white-space:nowrap}
.pr-ag-data span{display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.6px;color:var(--text-3);font-weight:var(--fw-medium)}
.pr-ag-data b{font-size:var(--fs-base);font-weight:var(--fw-medium)}
.pr-ag-data em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--red)}
/* Numa coluna estreita a linha vira três faixas empilhadas: o botão inteiro
   embaixo, e a data alinhada à esquerda junto com o resto — senão a frase
   empurra a página em vez de quebrar. */
@media(max-width:560px){
  .pr-ag{grid-template-columns:1fr;gap:var(--sp-2)}
  .pr-ag-data{text-align:left}
  .pr-ag button{width:100%;justify-content:center}
}

.pr-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)}
@media(max-width:1080px){.pr-lista{grid-template-columns:1fr}}
.pr-card{display:flex;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s}
.pr-card:hover{border-color:var(--line);box-shadow:0 8px 22px rgba(20,24,30,.10);transform:translateY(-2px)}
.pr-card.late{border-color:rgba(209,43,58,.35)}
.pr-tab{width:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.7px;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);padding:10px 0;text-align:center}
.pr-body{flex:1;min-width:0;padding:14px var(--sp-4)}
.pr-top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:9px}
.pr-pac{font-weight:var(--fw-medium);font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-id{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--gold-2);letter-spacing:.5px}
.pr-meta{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:11px}
/* trilha de produção dentro do quadro — mesma anatomia da timeline, em escala menor */
.pr-tl{margin:2px 0 var(--sp-3)}
.pr-tl .tl-line{top:5px;height:2.5px}
.pr-tl .tl-step b{width:13px;height:13px;border-width:2px}
.pr-tl .tl-step em{font-size:var(--fs-xs);line-height:1.15;overflow-wrap:anywhere}
.pr-tl .tl-step.now b{box-shadow:0 0 0 3px var(--teal-soft)}
.pr-card.late .tl-step.done b{background:var(--red);border-color:var(--red)}
.pr-card.late .tl-step.now b{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.pr-card.late .tl-step.now em{color:var(--red)}
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);padding:10px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.pr-grid span{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-2);font-weight:var(--fw-medium)}
.pr-grid b{font-size:var(--fs-base);font-weight:var(--fw-medium)}
.pr-acts{display:flex;gap:var(--sp-2);margin-top:11px;flex-wrap:wrap}
/* ---- Relatório do Controle Protético ---- */
.rel-filtros{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.rel-filtros .field{flex:0 1 250px}
.rel-cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-5);flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--primary);margin-bottom:var(--sp-4)}
.rel-cabecalho h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--primary)}
.rel-sub{font-size:var(--fs-base);color:var(--text-2);font-weight:var(--fw-medium);margin-top:2px}
.rel-meta{font-size:var(--fs-sm);color:var(--text-2);text-align:right;line-height:1.7}
.rel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin-bottom:22px}
.rel-kpis>div{border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:9px var(--sp-3);background:var(--panel)}
.rel-kpis span{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-3);font-weight:var(--fw-medium)}
.rel-kpis b{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.rel-sec{margin-bottom:22px}
.rel-sec h3{font-size:var(--fs-base);font-weight:var(--fw-medium);margin-bottom:9px;padding-left:9px;
  border-left:3px solid var(--accent,var(--primary))}
.rel-tab{font-size:var(--fs-sm)}
.rel-tab .num{text-align:right;white-space:nowrap}
.rel-tab .rel-total td{font-weight:var(--fw-bold);background:var(--panel-2);border-top:2px solid var(--line)}
.rel-nota{font-size:var(--fs-sm);color:var(--text-2);background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:var(--sp-3) 14px;line-height:1.55}

.pr-legenda{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:var(--sp-4)}
.pr-legenda span{display:flex;align-items:center;gap:var(--sp-2)}
.pr-legenda i{width:11px;height:11px;border-radius:var(--radius-sm);display:inline-block}
@media(max-width:560px){.pr-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   ANEXOS — imagens, escaneamento 3D (STL/PLY) e DICOM
   ============================================================ */
.anx-card{transition:border-color .15s,box-shadow .15s}
.anx-card:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(20,24,30,.10)}
.anx-topo{position:relative;height:150px;background:var(--panel-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.anx-topo img{width:100%;height:100%;object-fit:cover;display:block}
.anx-vazio{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.anx-vazio svg{width:36px;height:36px}
.anx-vazio span{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:1px}
.anx-tag{position:absolute;top:8px;left:8px;color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.6px;padding:3px var(--sp-2);border-radius:var(--radius-pill);
  box-shadow:0 2px 6px rgba(0,0,0,.25)}

.arq-detalhe{display:flex;gap:var(--sp-4);align-items:flex-start;flex-wrap:wrap}
.arq-previa{width:230px;height:230px;flex-shrink:0;border-radius:var(--radius);overflow:hidden;
  border:2px solid var(--line);background:var(--panel-2);display:flex;align-items:center;justify-content:center}
.arq-previa img{width:100%;height:100%;object-fit:contain;display:block}
.arq-vazio{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.arq-vazio svg{width:52px;height:52px}
.arq-vazio span{font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:1.4px}
@media(max-width:620px){.arq-previa{width:100%;height:200px}}

/* ---- Lista em cartões (Pacientes no mobile) ---- */
.pt-cards{display:flex;flex-direction:column;gap:var(--sp-3)}
.pt-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:13px 14px;display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .1s,border-color .15s;-webkit-tap-highlight-color:transparent}
.pt-card:active{transform:scale(.985);border-color:var(--primary)}
.pt-card .pc-main{flex:1;min-width:0}
.pt-card .pc-name{font-weight:var(--fw-medium);font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-card .pc-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-card .pc-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);flex-shrink:0}
.pt-card .pc-chev{color:var(--text-3);display:flex}
.pt-card .pc-chev svg{width:18px;height:18px}

/* ============================================================
   ODONTOGRAMA ANATÔMICO
   ============================================================ */
.odo-wrap{background:linear-gradient(180deg,#fbf7f8,#f7eef0);border-radius:var(--radius);padding:18px var(--sp-3);overflow-x:auto}
/* variante de fundo — precisa vir DEPOIS de .odo-wrap para vencer a cascata */
.odo-wrap.odo-wrap-sel{background:#ffffff;border:1px solid var(--line-soft)}   /* seletor de lançamento */
.odo-arch{display:flex;justify-content:center;align-items:flex-end;gap:var(--sp-1);min-width:max-content}
.odo-half{display:flex;gap:2px}
.odo-gap{width:18px}
.odo-mid{height:14px}
.odo-tooth{width:48px;display:flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:var(--radius-sm);padding:2px;transition:background .12s}
.odo-tooth:hover{background:rgba(165,42,58,.07)}
.odo-toothbox{position:relative;width:46px;height:76px;display:block}
.odo-base,.odo-img{width:100%;height:100%;display:block;object-fit:contain}
.odo-fb{width:100%;height:100%}
.odo-ovl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.odo-occ{width:28px;height:28px;display:block;margin:3px 0 0}
.odo-num{font-size:var(--fs-sm);color:var(--text-3);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.odo-tooth:hover .odo-num{color:var(--primary)}
.odo-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center;font-size:var(--fs-sm);color:var(--text-2);margin-top:14px}
.odo-legend span{display:flex;align-items:center;gap:var(--sp-2)}
.odo-legend i{width:14px;height:14px;border-radius:var(--radius);border:1px solid rgba(0,0,0,.12);display:inline-block}

/* editor de dente */
.tooth-ed-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:6px}
.tooth-ed-head .tp{width:60px;height:90px}
.tooth-ed-head .odo-toothbox{width:66px;height:110px}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
@media(max-width:600px){.status-grid{grid-template-columns:repeat(2,1fr)}}
.status-opt{display:flex;align-items:center;gap:var(--sp-2);padding:10px var(--sp-3);border:1.5px solid var(--line-soft);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-base);font-weight:var(--fw-medium);transition:all .12s;background:var(--panel-2)}
.status-opt:hover{border-color:var(--line)}
.status-opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.status-opt i{width:16px;height:16px;border-radius:var(--radius);border:1px solid rgba(0,0,0,.15);flex-shrink:0}
.face-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.face-chip{padding:var(--sp-2) 14px;border:1.5px solid var(--line-soft);border-radius:var(--radius-sm);cursor:pointer;font-weight:var(--fw-medium);font-size:var(--fs-base);background:var(--panel-2)}
.face-chip.sel{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}

/* ============================================================
   IMPRESSÃO — sai só o bloco .rel-doc, o sistema em volta some.
   Usa visibility (não display) para não recalcular o layout das
   tabelas, que perderiam a largura das colunas.
   ============================================================ */
@media print{
  @page{margin:12mm}
  html,body{background:#fff}
  body *{visibility:hidden}
  .rel-doc,.rel-doc *{visibility:visible}
  .rel-doc{position:absolute;left:0;top:0;width:100%}
  .no-print{display:none !important}
  .so-print{display:flex !important}
  /* O quadro de custo: o trilho Receita · Custo mora fora dele (vem do
     tab_esp), então é escondido por quem o contém — só quando a área aberta
     é o quadro de custo, para as outras áreas imprimirem como antes. */
  #intBody:has(.custo-folha) .int-sub{display:none !important}
  .custo-kpis{grid-template-columns:repeat(4,1fr) !important;gap:8px !important;margin-bottom:14px !important}
  .custo-kpis .kpi{padding:8px 10px;box-shadow:none}
  .custo-kpis .k-ico{display:none}
  .custo-kpis .k-value{font-size:15px;margin-top:2px}
  .custo-kpis .k-value{display:block}
  .custo-kpis .k-trend{display:block;font-size:10px;margin-top:2px}
  .custo-folha .card{box-shadow:none}
  .custo-folha .hint{font-size:10px;line-height:1.45}
  /* o modal deixa de ser janela e vira a folha */
  .modal-overlay{position:static;padding:0;background:none;backdrop-filter:none;overflow:visible;display:block}
  .modal,.modal.sm,.modal.lg{max-width:100%;width:100%;border:none;box-shadow:none;border-radius:0;
    background:#fff;animation:none}
  .modal-body{padding:0}
  .modal-head,.modal-foot{display:none !important}
  /* as cores dos selos e dos totais têm significado: precisam sair no papel */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .table-wrap{overflow:visible}
  table{page-break-inside:auto;width:100%}
  tr{page-break-inside:avoid}
  thead{display:table-header-group}
  .rel-sec h3,.rel-cabecalho{page-break-after:avoid}
  .rel-kpis{page-break-inside:avoid}
}
/* ============================================================
   ESTOQUE — busca, filtros e cotação nas lojas (12/09/2026)
   Com os 363 produtos da planilha a lista deixou de caber numa tela.
   Vão vertical de 12px na barra: as camadas de toque de linhas quebradas
   não podem se cruzar (§5). O select não tem camada: min-height de 44px.
   ============================================================ */
.est-barra{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.est-busca{flex:1 1 260px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:0 10px;min-height:44px;min-width:0}
.est-busca:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.est-busca svg{width:16px;height:16px;color:var(--text-3);flex-shrink:0}
/* 42px deixava o alvo efetivo em 43: a caixa de fora tem 44, mas o campo em
   si é quem recebe o toque. Os dois com a mesma altura (§8.7). */
.est-busca input{border:0;outline:0;background:none;flex:1;min-width:0;font:inherit;color:var(--text);min-height:44px;padding:0}
.est-barra select{min-height:44px;flex:0 1 auto;max-width:100%}
.est-progresso{font-size:var(--fs-sm);color:var(--text-2);min-height:1.4em;margin-bottom:var(--sp-2)}
.est-conta{font-size:var(--fs-sm);margin-bottom:var(--sp-2)}
.est-mais{display:flex;justify-content:center;padding:var(--sp-4) 0}
.chip-sem{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);background:var(--panel-3);color:var(--text-2);white-space:nowrap}
.chip-barato{display:inline-block;margin-top:3px;font-size:var(--fs-xs);font-weight:600;padding:1px 7px;border-radius:var(--radius-pill);background:var(--green-soft);color:var(--green-2);white-space:nowrap}

/* a largura toda do formulário: com col-2 ficava em meia coluna das quatro e o link cabia 4 letras */
.form-grid>.cot-bloco{grid-column:1/-1}
.cot-bloco{border-top:2px solid var(--text);padding-top:10px;display:grid;gap:var(--sp-3);margin-top:var(--sp-2)}
.cot-cab{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px}
.cot-cab span{font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.cot-cab em{font-style:normal;font-size:var(--fs-sm);color:var(--text-3)}
.cot-loja{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.cot-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cot-topo b{font-size:var(--fs-base)}
.cot-valor{font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums}
.cot-info{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;overflow-wrap:anywhere}
.cot-campos{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:var(--sp-3) var(--sp-3)}
.cot-campos .field{margin:0;min-width:0}
.cot-acoes{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-2)}
@media (max-width:640px){ .cot-campos{grid-template-columns:1fr} }


/* ---------- chegada e espera (proposta 45) ---------- */
.carimbo{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-3);
  white-space:nowrap;margin-right:var(--sp-2);font-variant-numeric:tabular-nums}

/* ---------- escala do NPS (proposta 31) ---------- */
.nps-escala{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-3) 0}
.nps-op{min-width:44px;min-height:44px;flex:1 1 44px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text-2);
  font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.nps-op:hover{border-color:var(--line-strong)}
.nps-op.det.on{background:var(--red);border-color:var(--red);color:#fff}
.nps-op.neu.on{background:var(--amber);border-color:var(--amber);color:#fff}
.nps-op.pro.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- vaga aberta na lista de espera (proposta 7) ---------- */
.espera-vaga{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  background:var(--teal-soft);border-left:3px solid var(--teal);
  padding:10px var(--sp-4);font-size:var(--fs-sm)}
.espera-vaga svg{width:16px;height:16px;flex-shrink:0;color:var(--teal)}
.espera-vaga span{flex:1 1 240px;min-width:0}
.espera-vaga em{font-style:normal;color:var(--text-3)}

/* ---------- frases prontas de evolução (proposta 29) ---------- */
.frases{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--sp-2);margin-top:var(--sp-2)}
.frases-rot{font-size:var(--fs-sm);color:var(--text-3);flex:0 0 auto}
.frase-chip{min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--panel-2);color:var(--text-2);font-size:var(--fs-sm);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frase-chip:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- plano em etapas (proposta 23) ---------- */
.etapa-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--primary-soft);color:var(--primary-2);
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-right:4px}
/* exames citados na carta de encaminhamento (proposta 30) */
.enc-imgs{display:flex;flex-direction:column;gap:2px}
.enc-imgs .check{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;font-size:var(--fs-sm)}

/* ---------- régua do visualizador (proposta 33) ---------- */
.ed-regua{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px var(--sp-3);margin-top:var(--sp-3);padding:10px var(--sp-4);
  background:var(--panel-2);border-radius:var(--radius-sm);font-size:var(--fs-sm)}
.ed-regua label{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-2)}
.ed-regua input{min-height:44px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}

/* ---------- ciclo de autoclave (proposta 6) ---------- */
.ec-linha{display:flex;flex-wrap:wrap;gap:10px var(--sp-2);align-items:center;margin-bottom:6px}
.ec-linha input{flex:1 1 220px;min-width:0;min-height:44px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}

/* ============================================================
   CADASTROS DUPLICADOS (proposta 26)
   Prefixo `dup-`: `.pr-` já é Protético e `.pron-` é prontuário (§5).
   ============================================================ */
.dup-par{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:13px 14px;box-shadow:var(--shadow-sm)}
.dup-nomes{margin-bottom:6px}
.dup-nomes b{display:block;font-weight:var(--fw-medium)}
.dup-nomes span{display:block;color:var(--text-2)}
.dup-motivos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.dup-par .td-acoes{justify-content:flex-start}

/* Duas fichas lado a lado; abaixo de 640px elas empilham sozinhas,
   que é a única forma de ler quinze campos num telefone. */
.dup-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3)}
.dup-cmp>*{min-width:0}   /* item de grade com tabela estica a coluna (§5) */
.dup-ficha{border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);padding:var(--sp-3)}
.dup-ficha.escolhida{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.dup-ficha>header{font-size:var(--fs-lg);margin-bottom:var(--sp-2);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-soft)}
.dup-ficha dl{margin:0 0 var(--sp-3)}
.dup-campo{display:flex;gap:var(--sp-2);justify-content:space-between;
  padding:4px 6px;border-radius:6px;font-size:var(--fs-base)}
.dup-campo dt{color:var(--text-3);margin:0;flex-shrink:0}
.dup-campo dd{margin:0;text-align:right;word-break:break-word;min-width:0}
.dup-campo.dif{background:var(--amber-soft)}
.dup-campo.dif dd{color:var(--amber-2);font-weight:var(--fw-medium)}
.dup-campo.vazio dd{color:var(--text-3)}
.dup-carga{font-size:var(--fs-sm);margin:0 0 var(--sp-3)}
.dup-briga{background:var(--red-soft);color:var(--red);border-radius:var(--radius-sm);
  padding:var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--fs-base)}
.dup-acao{margin-top:var(--sp-4)}
.dup-confirma{border:1px solid var(--red);border-radius:var(--radius-sm);
  background:var(--red-soft);padding:var(--sp-3)}
.dup-confirma p{margin:0 0 10px}
.dup-confirma .td-acoes{justify-content:flex-start}

/* O aviso dentro do formulário de cadastro. Frase é frase: `block`,
   não `flex` — a 375px o flex não quebra a linha e empurra a página (§5). */
.dup-aviso{background:var(--amber-soft);border:1px solid var(--amber);
  border-radius:var(--radius-sm);padding:var(--sp-3);margin-bottom:var(--sp-4)}
.dup-aviso>b{display:block;margin-bottom:6px;color:var(--amber-2)}
.dup-aviso p{margin:8px 0 0;font-size:var(--fs-sm)}
.dup-sug{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--sp-2);margin-bottom:6px}
.dup-sug>span{display:block;flex:1 1 220px;min-width:0}

/* ============================================================
   IMPORTAR PACIENTES (proposta 27)
   ============================================================ */
.imp-passo{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) 0;
  border-top:1px solid var(--line-soft)}
.imp-passo>div{flex:1;min-width:0}
.imp-passo .n{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--panel-3);color:var(--text-3);font-size:var(--fs-sm);
  font-weight:var(--fw-bold)}
.imp-passo.feito .n{background:var(--green);color:#fff}
.imp-passo p{margin:2px 0 8px;font-size:var(--fs-sm)}
.imp-erro{background:var(--red-soft);color:var(--red);border-radius:var(--radius-sm);
  padding:10px var(--sp-3);margin-top:8px}

/* Uma coluna da planilha por linha; a 375px o select cai embaixo
   do nome em vez de espremer os dois. */
.imp-depara{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-2);margin:var(--sp-3) 0}
.imp-depara>*{min-width:0}
.imp-col{display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--sp-2);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 10px;background:var(--panel-2)}
.imp-de{flex:1 1 130px;min-width:0}
.imp-de b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-de span{display:block;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-col select{flex:1 1 130px;min-width:0;min-height:44px;padding:4px 8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}

.imp-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3);margin:var(--sp-3) 0}
.imp-blocos>*{min-width:0}
.imp-bloco{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-3);background:var(--panel-2)}
.imp-bloco b{display:block;font-size:var(--fs-2xl);font-variant-numeric:tabular-nums;line-height:1.1}
.imp-bloco span{display:block;font-weight:var(--fw-medium);margin-bottom:4px}
.imp-bloco p{margin:0;font-size:var(--fs-sm);color:var(--text-3)}
.imp-bloco.ok{border-color:var(--green)}.imp-bloco.ok b{color:var(--green-2)}
.imp-bloco.ruim{border-color:var(--amber)}.imp-bloco.ruim b{color:var(--amber-2)}
.imp-motivos{display:flex;flex-wrap:wrap;gap:6px}
.imp-previa{margin-top:var(--sp-3)}
.imp-previa summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.imp-hist{border-top:1px solid var(--line-soft)}
.imp-hist h4{margin:0 0 var(--sp-2)}
.imp-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px var(--sp-2);padding:10px 0;border-bottom:1px solid var(--line-soft)}
.imp-linha>span{flex:1 1 220px;min-width:0}

/* ============================================================
   DADOS DO TITULAR · LGPD (proposta 19)
   ============================================================ */
.lgpd-linha{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:10px var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.lgpd-linha:last-of-type{border-bottom:0}
.lgpd-linha>div:first-child{flex:1 1 260px;min-width:0}
.lgpd-linha p{margin:3px 0 0;font-size:var(--fs-sm);color:var(--text-2)}
.lgpd-pedido{background:var(--amber-soft);border:1px solid var(--amber);
  border-radius:var(--radius-sm);padding:var(--sp-3);margin-bottom:var(--sp-3)}
.lgpd-pedido>span{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--amber-2)}
.lgpd-form{border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);padding:var(--sp-3);margin-top:var(--sp-3)}
.lgpd-lei{font-size:var(--fs-sm);color:var(--text-2);margin:var(--sp-3) 0}

/* ============================================================
   CHAVE DE DENTIÇÃO (proposta 32)
   Permanente · Mista · Decídua, no topo do odontograma.
   ============================================================ */
.odo-chave{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--sp-2);margin-bottom:var(--sp-3)}
.odo-den{min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--panel-2);color:var(--text-2);font-size:var(--fs-base);
  font-weight:var(--fw-medium);cursor:pointer;transition:all .15s}
.odo-den:hover{border-color:var(--primary);color:var(--primary-2)}
.odo-den.on{background:var(--primary);border-color:var(--primary);color:#fff}
.odo-den-dica{font-size:var(--fs-sm);color:var(--text-3)}

/* ============================================================
   CONSULTÓRIOS NA AGENDA (proposta 38)
   ============================================================ */
.sala-linha{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--sp-2);margin-bottom:var(--sp-2)}
.sala-linha>input[data-campo=nome]{flex:1 1 200px;min-width:0;min-height:44px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}
.sala-linha label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-3)}
.sala-linha label input{width:74px;min-height:44px;padding:6px 8px;text-align:right;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}

/* A faixa com o nome das salas, alinhada com as colunas do dia. O
   recuo da esquerda acompanha a régua de horas da grade. */
.cal-salas{display:grid;grid-template-columns:repeat(var(--salas,2),1fr);
  gap:2px;padding:10px 10px 10px 58px;border-bottom:1px solid var(--line-soft)}
.cal-salas span{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-salas em{font-style:normal;color:var(--text-3);font-weight:400}
/* divisória entre as salas, para a coluna ser visível mesmo vazia */
.cal-day-salas .cal-events{background:repeating-linear-gradient(to right,
  transparent 0,transparent calc(100%/var(--salas) - 1px),
  var(--line-soft) calc(100%/var(--salas) - 1px),var(--line-soft) calc(100%/var(--salas)))}

/* ============================================================
   BUSCA QUE ATRAVESSA OS MODULOS (item 18 · 17/09)
   ============================================================ */
.topbar-search{position:relative}
.busca-painel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  max-height:min(60vh,480px);overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:0 18px 44px rgba(31,26,26,.18)}
.busca-grupo+.busca-grupo{border-top:1px solid var(--line-soft)}
.busca-rot{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);padding:9px 14px 5px;position:sticky;top:0;background:var(--panel)}
.busca-rot span{letter-spacing:0;text-transform:none;color:var(--text-3);font-weight:400}
.busca-item{display:block;width:100%;text-align:left;background:none;border:0;
  padding:8px 14px;min-height:44px;cursor:pointer;border-left:2px solid transparent}
.busca-item:hover,.busca-item:focus-visible{background:var(--panel-2);border-left-color:var(--primary)}
.busca-item b{display:block;font-weight:var(--fw-medium);font-size:var(--fs-base)}
.busca-item span{display:block;font-size:var(--fs-sm);color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-vazio{padding:16px 14px;font-size:var(--fs-base);color:var(--text-2)}

/* ============================================================
   DESFAZER, ARRASTAR E COLAR (itens 19, 21 e 22 · 17/09)
   ============================================================ */
.desf-barra{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--sp-4) + var(--inst-offline-h, 0px));z-index:95;
  display:flex;align-items:center;gap:var(--sp-3);max-width:min(560px,calc(100vw - 32px));
  padding:10px var(--sp-4);background:var(--text);color:#fff;border-radius:var(--radius-sm);
  box-shadow:0 10px 30px rgba(31,26,26,.28);font-size:var(--fs-base)}
.desf-barra>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desf-barra .btn{color:#fff;border:1px solid rgba(255,255,255,.4);flex:none}
.desf-barra .btn:hover{background:rgba(255,255,255,.16)}
@media(max-width:860px){
  .desf-barra{bottom:calc(70px + env(safe-area-inset-bottom) + var(--sp-3) + var(--inst-offline-h, 0px));
    left:var(--sp-3);right:var(--sp-3);transform:none;max-width:none}
}

/* A area de anexos aceita arquivo arrastado: a moldura so aparece
   enquanto o arquivo esta por cima. */
.anx-arrasta{outline:2px dashed var(--primary);outline-offset:4px;background:var(--primary-soft)}

/* ============================================================
   DIAS FECHADOS E ENCAIXE DE URGÊNCIA (itens 12 e 13 · 17/09)
   ============================================================ */
.fech-linha{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--sp-2);margin-bottom:var(--sp-2);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-soft)}
.fech-linha>input[data-c=nome]{flex:1 1 180px;min-width:0;min-height:44px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}
.fech-linha label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-3)}
.fech-linha label input{min-height:44px;padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}
.fech-linha select{flex:1 1 180px;min-width:0;min-height:44px;padding:6px 8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text)}

/* O dia fechado se anuncia no cabeçalho da coluna, e a coluna fica
   levemente apagada — sem esconder o que estiver marcado nela. */
.cal-head.cal-fechado{color:var(--amber-2)}
.cal-fech-rot{display:block;font-style:normal;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.cal-day-fechado{background:repeating-linear-gradient(135deg,
  transparent 0,transparent 7px,var(--amber-soft) 7px,var(--amber-soft) 14px)}

.cal-recorte{display:inline-flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.cal-recorte label{font-size:var(--fs-sm);color:var(--text-3)}
.cal-recorte select{min-height:44px;padding:4px 8px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text);font-size:var(--fs-sm)}

.ur-vao{font-family:var(--serif);font-size:var(--fs-lg);font-weight:800;color:var(--green-2);
  padding:7px 0;font-variant-numeric:tabular-nums}
.ur-vao.vazio{color:var(--amber-2);font-size:var(--fs-base);font-weight:600;font-family:inherit}

/* ============================================================
   INSTALAR COMO APLICATIVO (proposta 56)

   As duas barras flutuam no rodapé em vez de entrar no fluxo: o
   sistema já tem barra lateral, topo fixo, faixa de alerta na
   ficha e a barra de navegação do telefone, e mais um bloco no
   fluxo mudaria a altura de tudo — inclusive das folhas medidas.
   Acima da `.bottom-nav` no telefone, pelo mesmo motivo.
   ============================================================ */
/* `--inst-offline-h` é escrito pelo JS com a altura MEDIDA da faixa de
   rede, e vale 0 quando ela não está na tela: é o que impede as duas
   de se cruzarem quando aparecem juntas. */
.inst-barra{position:fixed;left:var(--sp-4);right:var(--sp-4);
  bottom:calc(var(--sp-4) + var(--inst-offline-h, 0px));z-index:90;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px var(--sp-3);
  max-width:620px;margin:0 auto;padding:var(--sp-3) var(--sp-4);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(50,22,28,.18);font-size:var(--fs-base)}
.inst-barra>span:first-child{flex:1 1 240px;min-width:0}
.inst-barra.inst-nova{border-color:var(--primary)}
.inst-acoes{display:flex;flex-wrap:wrap;gap:10px var(--sp-2);flex:0 0 auto}

/* O aviso de rede conta um ESTADO: não tem botão de fechar, e sai
   sozinho quando a conexão volta. */
.inst-offline{position:fixed;left:0;right:0;bottom:0;z-index:91;
  padding:10px var(--sp-4);text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  background:var(--amber);color:#fff}

/* No telefone as duas sobem acima da `.bottom-nav`, que é fixa. A
   altura dela não é uma variável: são 7 px de respiro + 23 do ícone
   + o rótulo + 7, mais o `safe-area` do aparelho com entalhe — daí
   os 70 px medidos, e não um número escolhido no olho. */
@media(max-width:860px){
  .inst-barra{bottom:calc(70px + env(safe-area-inset-bottom) + var(--sp-3) + var(--inst-offline-h, 0px));
    left:var(--sp-3);right:var(--sp-3)}
  .inst-offline{bottom:calc(70px + env(safe-area-inset-bottom))}
}

/* ============================================================
   VER A FICHA SEM SAIR (item 20 · 18/09)
   Painel à direita, por cima de tudo — inclusive de um modal
   aberto (z 100), porque abre de dentro das listas da Inteligência.
   ============================================================ */
.link-pac{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.link-pac:hover,.link-pac:focus-visible{color:var(--primary);text-decoration-color:currentColor}
label .link-pac{font-size:var(--fs-sm);font-weight:600;margin-left:6px;color:var(--primary);text-transform:none;letter-spacing:0}
.espiar-fundo{position:fixed;inset:0;z-index:150;background:rgba(50,22,28,.28)}
.espiar{position:fixed;top:0;right:0;bottom:0;z-index:151;width:min(400px,100vw);background:var(--panel);
  border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(50,22,28,.12);
  animation:espiarEntra .16s ease-out}
@keyframes espiarEntra{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.espiar-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.espiar-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.espiar-id b{font-size:var(--fs-lg);line-height:1.25}
.espiar-id span{font-size:var(--fs-sm);color:var(--text-2)}
.espiar-corpo{flex:1;overflow-y:auto;padding:14px 16px 20px}
.espiar-corpo .faixa-clin{margin:0 0 6px}
.espiar-sec{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
  margin:18px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.espiar-linha{display:flex;flex-direction:column;gap:2px;padding:7px 0}
.espiar-linha b{font-size:var(--fs-base)}
.espiar-linha span{font-size:var(--fs-sm);color:var(--text-2)}
.espiar-linha.ruim b{color:var(--red)}
.espiar-nada{font-size:var(--fs-sm);color:var(--text-2);padding:6px 0}
.espiar-pe{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.espiar-pe .btn{width:100%;justify-content:center;min-height:44px}
@media (prefers-reduced-motion:reduce){.espiar{animation:none}}

/* ---------- comparar duas imagens (item 29) ---------- */
.cmp-par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp-lado{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.cmp-lado select{width:100%;min-height:44px}
.cmp-tela{background:#000;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;min-height:240px;padding:8px}
.cmp-tela img{max-width:100%;max-height:52vh;display:block}
.cmp-lado figcaption{font-size:var(--fs-sm);color:var(--text-2)}
.cmp-ctl{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:14px}
.cmp-ctl label{font-size:var(--fs-sm);color:var(--text-2);display:flex;align-items:center;gap:6px}
@media (max-width:720px){.cmp-par{grid-template-columns:1fr}.cmp-tela img{max-height:34vh}}

/* ---------- odontograma ao longo do tempo (item 30) ---------- */
.odt-barra{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.odt-barra input[type=range]{flex:1;min-width:160px}
.odt-barra .btn{min-width:44px;min-height:44px;font-size:var(--fs-lg)}
.odt-barra b{font-size:var(--fs-base);min-width:130px}
.odt-corpo{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.odt-sec{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.odt-sec:first-child{margin-top:0}
.odt-lista{list-style:none;margin:0;padding:0}
.odt-lista li{padding:5px 0;font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between}
.odt-lista li span{color:var(--text-2);font-size:var(--fs-sm)}
@media (max-width:900px){.odt-corpo{grid-template-columns:minmax(0,1fr)}}

/* ---------- modelos de plano (item 31) ---------- */
.mod-plano{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.mod-plano select{flex:1;min-width:220px;min-height:44px}
.mod-painel{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.mod-painel input{flex:1;min-width:220px;min-height:44px}
.mod-lista{list-style:none;margin:10px 0 0;padding:0}
.mod-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.mod-lista li span{grid-column:1;font-size:var(--fs-sm);color:var(--text-2)}
.mod-lista li button{grid-column:2;grid-row:1/3}

/* ---------- evolução ditada (item 33) ---------- */
.ditado{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ditado .btn{min-height:44px}
.ditado-ao-vivo{font-size:var(--fs-sm);color:var(--text-2);font-style:italic}
.ditado-aviso:empty{display:none}

/* ---------- quantos voltam (item 36) ---------- */
.ret-resumo{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-base)}
.ret-resumo b{font-family:var(--serif);font-size:var(--fs-xl);font-weight:600;color:var(--text)}
.ret-resumo span{font-size:var(--fs-sm);color:var(--text-2)}
/* controle deslizante com a régua de toque (§8.7): a trilha fica fina, o alvo não */
.odt-barra input[type=range],.cmp-ctl input[type=range]{min-height:44px;margin:0}
/* nome clicável dentro de linha de tabela: o alvo cresce sem mexer no layout */
@media (pointer:coarse){.link-pac{padding:12px 0;margin:-12px 0}}

/* ============================================================
   ITEM 18 · DIZER QUE A LISTA CONTINUA

   Toda faixa que rola de lado — abas, odontograma, tabela larga —
   terminava cortada no meio de um item, sem nenhum sinal de que há
   mais adiante. O esmaecido de 24px aparece na borda que ainda tem
   conteúdo e some sozinho no fim da rolagem.

   Sem JavaScript, e é de propósito: as quatro camadas de fundo
   fazem a conta sozinhas. Duas delas rolam com o conteúdo
   (`local`) e duas ficam paradas (`scroll`) tapando o esmaecido
   quando não há mais nada para aquele lado. Só aparece quando há
   transbordo de verdade — tabela que cabe na tela não ganha
   sombra nenhuma, e nada precisa ser religado a cada redesenho.
   ============================================================ */
.table-wrap,.tabs,.int-sub,.int-abas,.odo-wrap,.proc-items,.tag-list{
  --rola-bg:var(--panel);
  background-image:
    linear-gradient(to right, var(--rola-bg) 30%, transparent),
    linear-gradient(to left,  var(--rola-bg) 30%, transparent),
    linear-gradient(to right, rgba(31,26,26,.13), transparent),
    linear-gradient(to left,  rgba(31,26,26,.13), transparent);
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:32px 100%,32px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
/* fora do cartão o fundo é o da página */
.tabs,.int-sub,.int-abas,.tag-list{--rola-bg:var(--bg)}
.odo-wrap,.proc-items{--rola-bg:var(--panel-2)}
@media print{.table-wrap,.tabs,.int-sub,.int-abas,.odo-wrap{background-image:none}}

/* ============================================================
   ITEM 19 · O TOPO DO CELULAR PARA DE REPETIR A NAVEGAÇÃO

   A 375px o topo mostrava "Pacientes" — exatamente a palavra já
   destacada na navegação de baixo, que diz onde você está com
   cor. A busca, que só o topo pode carregar, estava escondida.
   Topo e navegação consumiam 15% da tela para isso.
   ============================================================ */
@media(max-width:640px){
  .topbar-title{display:none}
  .topbar-search{display:flex;margin-left:0;flex:1 1 auto}
  .topbar-search input{font-size:var(--fs-base)}
}

/* ---------- item 17: a barra de abas vira seletor no telefone ---------- */
.abas-sel{display:none}
@media(max-width:640px){
  .abas-escondida{display:none}
  .abas-sel{display:block;width:100%;min-height:44px;margin-bottom:var(--sp-4);
    padding:var(--sp-2) var(--sp-3);font-size:var(--fs-base);font-weight:var(--fw-medium);
    color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm)}
}

/* ---------- item 13: bloco recolhido no telefone ---------- */
.card-abrir{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);min-width:44px;min-height:44px;
  justify-content:flex-end;background:none;border:0;color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.card-abrir span{background:var(--panel-3);border-radius:var(--radius-sm);padding:1px 7px;font-variant-numeric:tabular-nums}
.card-abrir svg{width:18px;height:18px;transform:rotate(90deg);transition:transform .15s}
.card-recolhido .card-abrir svg{transform:none}
.card-recolhido>*:not(.card-head){display:none}
.card-recolhido{margin-bottom:var(--sp-3)}

/* ---------- item 20: o estado vazio ganha o próximo passo ---------- */
.vazio{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:44px var(--sp-4)}
.vazio-ic{color:var(--text-3);opacity:.5}
.vazio-ic svg{width:34px;height:34px}
.vazio-o{font-size:var(--fs-lg);color:var(--text);margin:0}
.vazio-porque{font-size:var(--fs-sm);color:var(--text-2);margin:0;max-width:56ch;line-height:1.5}
.vazio-btn{margin-top:var(--sp-1)}

/* ---------- item 5: as três faixas da aba Cadastro ---------- */
.cad-ident{margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.cad-ident h3{font-size:var(--fs-xl);font-weight:var(--fw-medium);color:var(--text);margin:0 0 2px}
.cad-ident p{font-size:var(--fs-sm);color:var(--text-2);margin:0;max-width:72ch}
.cad-dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:baseline}
.cad-dl .dl-l{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-2);white-space:nowrap}
.cad-dl .dl-v{font-size:var(--fs-base);color:var(--text);min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){.cad-dl{grid-template-columns:auto minmax(0,1fr)}}
/* item 14: em que seção do formulário o olho está */
.foot-secao{margin-right:auto;font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
@media(max-width:640px){.foot-secao{width:100%;order:-1;text-align:center}}
/* item 13: a lista do telefone mostra as primeiras e diz quantas faltam */
.lista-oculta{display:none}
.lista-mais{width:100%;justify-content:center;min-height:44px;margin-top:var(--sp-3)}
@media(min-width:641px){.lista-mais{display:none}}
/* a busca do topo e a da lista passam a ter a régua de toque no telefone
   (item 19 pôs a busca do topo à vista, e ela media 17px) */
@media(max-width:1024px){
  /* o alvo tem que ser o CAMPO, não a moldura: sonda acima e abaixo do
     centro do input caía na moldura e a régua do §8.7 reprovava com 17px */
  .topbar-search{padding:0 var(--sp-3);min-height:44px}
  .topbar-search input{min-height:44px}
  .toolbar input,.toolbar select{min-height:44px}
}
/* item 15 / §6.3: a observação da anamnese media 16px de altura */
.ana-obs{min-height:44px}

/* ---------- prévia de uma base trazida de fora (previa.js) ---------- */
.previa-faixa{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;padding:10px 20px;background:var(--wine-deep);color:#fff;font-size:var(--fs-sm);line-height:1.4}
.previa-faixa b{color:#e8b84b}
.previa-faixa button{margin-left:auto;min-height:38px;padding:0 14px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font:inherit;font-weight:var(--fw-medium);cursor:pointer}
.previa-faixa button:hover{background:rgba(255,255,255,.12)}
body.tem-previa .app{padding-top:var(--previa-h,44px)}
body.tem-previa .topbar{top:var(--previa-h,44px)}
body.tem-previa th{top:calc(68px + var(--previa-h,44px))}
@media(max-width:1024px){body.tem-previa th{top:calc(56px + var(--previa-h,44px))}}