/* =====================================================================
   assistente.tech · app do médico · protótipo
   Tokens do design system (ref/DESIGN-SYSTEM.md, seção 2) adaptados ao toque.
   Regra: nenhum módulo escreve cor, raio, sombra ou fonte literal. Só var(--…).
   ===================================================================== */

:root{
  --font-sans:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ink:#18181B; --ink-2:#3F3F46; --ink-3:#52525B; --ink-4:#71717A; --ink-5:#A1A1AA; --ink-6:#C4C4CC;
  --line:#D4D4D8; --line-2:#E4E4E7; --line-3:#ECECEE; --line-4:#F1F1F3;
  --fill:#F4F4F5; --fill-2:#FAFAFA; --surface:#FFFFFF;
  /* chão: fundo da tela atrás dos cartões. Derivado, não é cor nova. */
  --chao:var(--fill-2);
  --sobre-doc:#FFFFFF;

  /* Cor do profissional. O core.js sobrescreve com DADOS.consultorio.medico.cor (piloto: Rosa). */
  --doc:#E11D6B;
  --doc-soft:color-mix(in srgb, var(--doc) 10%, var(--surface));
  --doc-tint:color-mix(in srgb, var(--doc) 6%, var(--surface));
  --doc-border:color-mix(in srgb, var(--doc) 30%, var(--surface));
  --doc-forte:color-mix(in srgb, var(--doc) 88%, #000);
  --doc-texto:var(--doc-forte);

  --ok:#2E6B3A;   --ok-bg:#EDF5EE;   --ok-line:#D9EAD9;
  --warn:#7A5410; --warn-bg:#FDF4E3; --warn-line:#F0E2C4; --warn-dot:#B07A18;
  --err:#9B3232;  --err-bg:#FDF6F6;  --err-line:#F0D5D5; --err-ink:#7A2424;

  /* Categorias da agenda (hoje.js, 5f). Cor SEMPRE junto do ícone. Matizes da paleta categórica validada
     (dataviz: azul, verde-água, violeta, âmbar; ΔE vizinho >= 23 em visão normal e >= 9 sob daltonismo).
     --cat-X = cor do marcador; -ink = ícone/rótulo (>= 4,3:1 sobre o quadrado); -bg = fundo do bloco;
     -line = contorno; -sq = quadrado do ícone. O texto do bloco usa --ink, nunca a cor da categoria.
     Consulta/retorno é NEUTRO de propósito: o mais comum fica calmo.
     AMOSTRAS (--sw-*): as 8 cores da paleta categórica do dataviz (validate_palette.js: claro ΔE vizinho >= 9,1 sob
     daltonismo, >= 19,6 em visão normal; escuro 8,4 e 19,3) mais o cinza neutro. O médico escolhe entre elas em
     Personalizar a agenda; cor livre não existe, para nunca ficar ilegível. */
  --sw-azul:#2A78D6;     --sw-azul-ink:#1D5FB0;
  --sw-laranja:#EB6834;  --sw-laranja-ink:#B2430F;
  --sw-agua:#1BAF7A;     --sw-agua-ink:#0B7A52;
  --sw-ambar:#EDA100;    --sw-ambar-ink:#8A5A00;
  --sw-magenta:#E87BA4;  --sw-magenta-ink:#A8305E;
  --sw-verde:#008300;    --sw-verde-ink:#006300;
  --sw-violeta:#6250D6;  --sw-violeta-ink:#4A39B8;
  --sw-vermelho:#E34948; --sw-vermelho-ink:#B02525;
  --sw-cinza:#71717A;    --sw-cinza-ink:#3F3F46;
  --cat-bg-p:11%; --cat-line-p:38%; --cat-sq-p:22%;

  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:16px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(24,24,27,.06);
  --sh-2:0 8px 24px -12px rgba(24,24,27,.25);
  --sh-3:0 30px 60px -20px rgba(24,24,27,.40);
  --veu:rgba(24,24,27,.35);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;

  --t-press:100ms; --t-fast:150ms; --t-step:180ms; --t-slide:220ms; --t-done:400ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);

  --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--doc);

  /* toque */
  --toque:44px;
  --barra-inferior:64px;

  color-scheme:light;
}

/* ---------- Modo escuro: só por escolha no app. O padrão é claro mesmo com o
   celular em escuro (decisão do Renato, 16/10); por isso não há prefers-color-scheme
   e o atributo é próprio, para o tema do visualizador não ligar o escuro sozinho. */
:root[data-tema=escuro]{
  --ink:#F4F4F5; --ink-2:#E4E4E7; --ink-3:#C4C4CC; --ink-4:#A1A1AA; --ink-5:#8B8B94; --ink-6:#52525B;
  --line:#3F3F46; --line-2:#2F2F35; --line-3:#2A2A2F; --line-4:#232327;
  --fill:#26262B; --fill-2:#18181B; --surface:#1E1E22; --chao:#131315;
  --doc-soft:color-mix(in srgb, var(--doc) 22%, var(--surface));
  --doc-tint:color-mix(in srgb, var(--doc) 12%, var(--surface));
  --doc-border:color-mix(in srgb, var(--doc) 45%, var(--surface));
  --doc-forte:color-mix(in srgb, var(--doc) 80%, #fff);
  --doc-texto:color-mix(in srgb, var(--doc) 55%, #fff);
  --ok:#8FCB9B;   --ok-bg:#1B2A1E;   --ok-line:#2B4430;
  --warn:#E9C27A; --warn-bg:#2C2414; --warn-line:#4A3B1C; --warn-dot:#D9A13E;
  --err:#F0A0A0;  --err-bg:#2E1A1A;  --err-line:#4E2A2A; --err-ink:#F6C1C1;
  /* mesmas cores, degraus do escuro (validados contra a superfície escura: >= 3:1) */
  --sw-azul:#3987E5;     --sw-azul-ink:#8FC0F7;
  --sw-laranja:#D95926;  --sw-laranja-ink:#F4A07C;
  --sw-agua:#199E70;     --sw-agua-ink:#5FD3A6;
  --sw-ambar:#C98500;    --sw-ambar-ink:#EFBD5A;
  --sw-magenta:#D55181;  --sw-magenta-ink:#F2A3C0;
  --sw-verde:#008300;    --sw-verde-ink:#7FD47F;
  --sw-violeta:#9085E9;  --sw-violeta-ink:#BDB5F6;
  --sw-vermelho:#E66767; --sw-vermelho-ink:#F7A8A8;
  --sw-cinza:#A1A1AA;    --sw-cinza-ink:#C4C4CC;
  --cat-bg-p:20%; --cat-line-p:50%; --cat-sq-p:32%;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 28px -12px rgba(0,0,0,.7);
  --sh-3:0 30px 60px -20px rgba(0,0,0,.8);
  --veu:rgba(0,0,0,.55);
  color-scheme:dark;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-sans); font-size:15px; line-height:1.45; color:var(--ink);
  background:var(--chao); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--doc-texto);text-decoration:none}
svg{display:block;flex:none}
img{max-width:100%}
::selection{background:var(--doc-soft);color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.num,.mono,time{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barra de rolagem discreta, nas cores do tema */
.rolagem{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rolagem::-webkit-scrollbar{width:8px;height:8px}
.rolagem::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}

/* =====================================================================
   Moldura do app.
   .app é um container de consulta: a forma (celular x computador) é decidida
   pela LARGURA DO APP, não da janela. É isso que faz a moldura de iPhone
   mostrar o layout de celular sem duplicar CSS. Módulos usam:
   @container app (min-width: 1024px){ … }
   ===================================================================== */
#raiz{height:100%;display:flex;align-items:center;justify-content:center}
.app{
  container:app / inline-size;
  position:relative; width:100%; height:100%; height:100dvh;
  /* clip, não hidden: um container hidden ainda rola por script (scrollIntoView), e o esqueleto do app subia */
  background:var(--chao); overflow:hidden; overflow:clip; isolation:isolate;
}
/* a grade fica num filho: um container não consulta a si mesmo */
.app-grade{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.lateral{display:none}
.principal{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.rolagem-tela{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding-bottom:calc(var(--barra-inferior) + 28px + env(safe-area-inset-bottom))}
.tela{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-6);max-width:100%;
  animation:tela-entra var(--t-step) var(--ease-out)}
.tela-cheia{padding:0}
@keyframes tela-entra{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* telas de fluxo focado (consulta) escondem a barra inferior: def.semNavegacao */
.app.sem-nav .barra-inferior{display:none}
.app.sem-nav .rolagem-tela{padding-bottom:env(safe-area-inset-bottom)}
html.modo-moldura .app.sem-nav .rolagem-tela{padding-bottom:0}

/* ---------- App bar ---------- */
.barra-app{
  flex:none; position:relative; z-index:5; background:var(--surface);
  border-bottom:1px solid var(--line-3);
  padding:calc(env(safe-area-inset-top) + 3px) var(--s-2) 0;
}
.barra-app::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--doc)}
.barra-app-linha{display:flex;align-items:center;gap:var(--s-2);min-height:56px}
.barra-app-titulo{flex:1;min-width:0;padding:0 var(--s-2)}
.barra-app-titulo h1{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-app-titulo .sub{font-size:13px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-app-acoes{display:flex;align-items:center;gap:var(--s-1)}
.barra-app.com-voltar .barra-app-titulo{padding-left:0}
/* avatar do médico no topo (celular): abre o menu do consultório */
.barra-app-medico{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);flex:none}
.barra-app-medico:active{transform:scale(.95)}
.barra-app-medico .contador{position:absolute;top:2px;right:0;box-shadow:0 0 0 2px var(--surface)}

/* ---------- Barra inferior: dois modos ----------
   Consultório: neutra (superfície translúcida, busca no meio).
   Paciente: tingida com a cor do médico, ações da consulta, "+ Novo" no meio.
   Escuta: a barra do paciente escurece e vira o gravador.
   A troca: a camada que sai desce rápido (ease-in), a que entra sobe depois (ease-out). ~320ms. */
.barra-inferior{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  height:calc(var(--barra-inferior) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border-top:1px solid var(--line-3);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  transition:background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.app.modo-paciente .barra-inferior{background:color-mix(in srgb, var(--doc-soft) 96%, transparent);border-top-color:var(--doc-border)}
.app.modo-paciente .barra-inferior.bi-escuta{background:var(--ink);border-top-color:var(--ink)}
.barra-inferior .bi-camada,.barra-inferior .bi-camada.dica-alvo{
  position:absolute; left:var(--s-1); right:var(--s-1); top:0; height:var(--barra-inferior);
  transition:transform 150ms var(--ease-in), opacity 130ms var(--ease-in), visibility 0s linear 150ms;
}
.bi-consultorio{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
.bi-paciente,.app.modo-paciente .bi-consultorio{transform:translateY(105%);opacity:0;visibility:hidden}
.app.modo-paciente .bi-paciente,.app:not(.modo-paciente) .bi-consultorio{transform:none;opacity:1;visibility:visible;
  transition:transform 260ms cubic-bezier(.16,1,.3,1) 90ms, opacity 180ms var(--ease-out) 90ms, visibility 0s}
.app.sem-animar-nav .barra-inferior .bi-camada,.app.sem-animar-nav .barra-inferior{transition:none}
.bi-item{
  position:relative; height:var(--barra-inferior); min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; color:var(--ink-4); font-size:11.5px; font-weight:600; border-radius:var(--r-md);
  transition:color var(--t-fast), transform var(--t-press) var(--ease-out);
}
.bi-item span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-item:active{transform:scale(.94)}
.bi-item[aria-current=page]{color:var(--ink)}
.bi-item[aria-current=page]::after{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--doc)}
.bi-item .contador{position:absolute;top:7px;left:calc(50% + 6px)}
/* botão do meio, levantado, com o nome embaixo: Assistente (consultório) e Consulta/Anotar (paciente) */
.bi-central{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:var(--barra-inferior);padding-bottom:9px;
  font-size:11.5px;font-weight:600;color:var(--ink-3)}
.bi-central button{
  width:52px;height:52px;margin-top:-26px;border-radius:var(--r-pill);display:grid;place-items:center;
  transition:transform var(--t-press) var(--ease-out);
}
.bi-central button:active{transform:scale(.94)}
.bi-busca button{background:var(--ink);color:var(--surface);box-shadow:var(--sh-2), 0 0 0 4px var(--chao)}
.bi-central svg{transition:transform var(--t-fast) var(--ease-out)}

/* barra do paciente: só as ações. A foto mora no topo; a cor da barra é que diz de quem ela é. */
.bi-p-in{height:100%;display:grid;align-items:center}
.bi-p-acoes{grid-template-columns:repeat(2,minmax(0,1fr)) 72px repeat(2,minmax(0,1fr));align-items:end}
.bi-paciente .bi-item{color:var(--ink-2)}
.bi-paciente .bi-item svg{color:var(--doc-texto)}
/* novidade em Mensagens (recado da secretária, documento esperando envio) */
.bi-ponto{position:absolute;top:9px;left:calc(50% + 7px);width:9px;height:9px;border-radius:50%;background:var(--doc);box-shadow:0 0 0 2px var(--doc-soft)}
.bi-p-in.troca{animation:bi-troca 260ms cubic-bezier(.16,1,.3,1)}
@keyframes bi-troca{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* CONSULTA no centro da barra do paciente: o ÚNICO destaque (levantado, cheio na cor do médico), porque é o
   único verbo que escreve no prontuário. + Novo, Foto, Mensagens e Assistente ficam iguais entre si.
   O brilho é uma sombra com deslocamento e desfoque na própria cor: diz "microfone pronto" sem animar nada. */
.bi-consulta{color:var(--doc-texto)}
.bi-consulta button{background:var(--doc);color:var(--sobre-doc);
  box-shadow:0 0 0 4px var(--doc-soft), 0 6px 16px -2px color-mix(in srgb, var(--doc) 55%, transparent)}
.bi-consulta button svg{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--sobre-doc) 55%, transparent))}
.bi-consulta button:focus-visible{outline:2px solid var(--doc);outline-offset:6px}

/* escuta: a barra é o gravador (tempo, onda, pausar, encerrar) */
.bi-p-escuta{display:flex;gap:8px;padding:0 4px 0 8px;color:var(--surface)}
.bp-volta{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px;text-align:left;color:inherit;border-radius:var(--r-md)}
.bp-volta .mg-bola{width:11px;height:11px;border-radius:50%;background:var(--err);flex:none;animation:gravar 1.6s ease-out infinite}
.bi-escuta.pausado .bp-volta .mg-bola{background:var(--ink-5);animation:none}
.bp-txt{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;line-height:1.2}
.bp-txt b{font-size:14.5px;font-weight:600;white-space:nowrap}
.bp-txt span{font-size:12.5px;color:var(--ink-6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-volta time{font-family:var(--font-mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto;flex:none}
.bp-volta .onda{height:22px;flex:none}
.bp-volta .onda i{background:var(--surface)}
.bp-btn{width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;color:var(--surface);background:color-mix(in srgb, var(--surface) 14%, transparent)}
.bp-fim{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-lg);background:var(--doc);color:var(--sobre-doc);font-size:14.5px;font-weight:600;flex:none}
@container app (max-width: 420px){ .bp-volta .onda{display:none} }
html.modo-moldura .bi-p-escuta .onda{display:none}

/* Modo paciente: UMA faixa de topo. "‹" só ícone (o nome do paciente precisa da largura que a
   pílula "‹ Consultório" comia) e o resto é o topo do paciente (def.topo: foto, nome, ícones). */
.barra-do-paciente .barra-app-linha{min-height:54px;gap:2px}
.barra-do-paciente .barra-app-titulo{display:flex;padding:0}
.barra-do-paciente .barra-app-acoes:empty{display:none}
.volta-consultorio{flex:none;margin-left:-6px;color:var(--ink-3)}

/* dica da primeira entrada no modo paciente: aponta para baixo (a barra), some ao tocar */
.coach-modo{position:absolute;z-index:85;width:max-content;max-width:min(340px, calc(100% - 24px));padding:12px 16px;border-radius:var(--r-xl);
  background:var(--ink);color:var(--surface);box-shadow:var(--sh-3);font-size:14.5px;line-height:1.45;pointer-events:none;animation:sobe 240ms cubic-bezier(.16,1,.3,1)}
.coach-modo b{font-weight:600}
.coach-menor{margin-top:4px;font-size:13px;color:var(--ink-6)}
.coach-modo.saindo{opacity:0;transform:translateY(4px);transition:opacity 140ms var(--ease-in),transform 140ms var(--ease-in)}
.coach-pilula{display:inline-flex;align-items:center;gap:2px;padding:1px 4px;vertical-align:-3px;border-radius:var(--r-pill);background:color-mix(in srgb, var(--surface) 16%, transparent);font-weight:600;white-space:nowrap}
.coach-seta{position:absolute;bottom:-6px;left:var(--seta-x, 50%);width:12px;height:12px;margin-left:-6px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.coach-abaixo{animation-name:desce-coach}
.coach-abaixo .coach-seta{bottom:auto;top:-6px}
.coach-abaixo.saindo{transform:translateY(-4px)}
@keyframes desce-coach{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* pílula "Consulta em andamento": a escuta seguindo fora do paciente gravado */
.mini-gravacao{position:absolute;z-index:22;left:50%;bottom:calc(var(--barra-inferior) + 10px + env(safe-area-inset-bottom));transform:translateX(-50%);
  max-width:calc(100% - 24px);animation:pilula-entra var(--t-slide) var(--ease-out)}
@keyframes pilula-entra{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}
.mini-gravacao[hidden]{display:none}
html.modo-moldura .mini-gravacao{bottom:calc(var(--barra-inferior) + 26px)}
.app.sem-nav .mini-gravacao{bottom:calc(12px + env(safe-area-inset-bottom))}
.mg-pilula{display:flex;align-items:center;gap:10px;min-height:46px;max-width:100%;padding:0 10px 0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);
  box-shadow:var(--sh-2);font-size:14px;font-weight:500;white-space:nowrap}
.mg-pilula .mg-bola{width:10px;height:10px;border-radius:50%;background:var(--err);flex:none;animation:gravar 1.6s ease-out infinite}
.mini-gravacao.pausado .mg-bola{background:var(--ink-5);animation:none}
.mg-pilula .mg-t{overflow:hidden;text-overflow:ellipsis}
.mg-pilula b{font-weight:600}
.mg-pilula time{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums}
.mg-pilula svg{color:var(--ink-5);flex:none}

/* ---------- Barra lateral (computador) ---------- */
.lateral-marca{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.lateral-marca .selo-a{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:13px;font-weight:700}
.lateral-marca b{color:var(--doc-texto);font-weight:700}
.lateral-medico{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-2);margin-bottom:14px}
.lateral-medico .nome{font-size:13.5px;font-weight:600;line-height:1.25}
.lateral-medico .esp{font-size:12.5px;color:var(--ink-4);line-height:1.25}
.lateral-nav{display:flex;flex-direction:column;gap:2px}
.ln-item{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:9px;color:var(--ink-3);font-size:14px;font-weight:500}
.ln-item:hover{background:var(--fill);color:var(--ink)}
.ln-item[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-1);outline:1px solid var(--line-3)}
.ln-item .contador{margin-left:auto}
.lateral-grupo{margin:16px 0 6px;padding:0 10px}
.lateral-rodape .btn{white-space:normal;text-align:left;justify-content:flex-start;line-height:1.25;padding-top:6px;padding-bottom:6px}
.lateral-rodape{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line-3)}
.btn.lateral-busca{justify-content:flex-start;margin-bottom:14px;color:var(--ink-3);font-weight:500}
.lateral-busca kbd{margin-left:auto;min-width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-xs);border:1px solid var(--line-2);background:var(--fill-2);font-family:var(--font-mono);font-size:12px;color:var(--ink-4)}
.lateral-volta{display:none}
.ln-txt{white-space:nowrap;transition:opacity 160ms var(--ease-out)}
/* balão do trilho de ícones (modo paciente, computador) */
.balao-trilho{position:absolute;z-index:95;transform:translateY(-50%);padding:6px 10px;border-radius:var(--r-sm);background:var(--ink);color:var(--surface);
  font-size:13px;font-weight:500;white-space:nowrap;box-shadow:var(--sh-2);pointer-events:none}

/* ---------- Forma computador ---------- */
@container app (min-width: 1024px){
  .app-grade{grid-template-columns:248px minmax(0,1fr);transition:grid-template-columns 300ms cubic-bezier(.16,1,.3,1)}
  .lateral{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;background:var(--fill-2);border-right:1px solid var(--line-3)}
  .barra-inferior{display:none}
  /* MODO PACIENTE: a lateral vira um trilho de ícones e cede a largura ao paciente */
  .app.modo-paciente .app-grade{grid-template-columns:72px minmax(0,1fr)}
  .app.modo-paciente .lateral{padding:12px;scrollbar-width:none}
  .app.modo-paciente .ln-txt{opacity:0;pointer-events:none}
  .app.modo-paciente .ln-item{padding-left:15px;gap:20px}
  .app.modo-paciente .ln-item .contador{position:absolute;top:2px;left:30px;margin:0;min-width:16px;height:16px;padding:0 4px;font-size:10.5px}
  .ln-item{position:relative;transition:padding 300ms cubic-bezier(.16,1,.3,1)}
  .app.modo-paciente .lateral-volta{display:grid;place-items:center;width:48px;height:48px;margin:0 0 14px;flex:none;border-radius:var(--r-lg);
    background:var(--doc-soft);color:var(--doc-texto);animation:volta-entra 300ms cubic-bezier(.16,1,.3,1)}
  .app.modo-paciente .lateral-volta:hover{background:var(--doc-border)}
  @keyframes volta-entra{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
  .app.modo-paciente .lateral-marca{display:none}
  .app.modo-paciente .lateral-medico{padding:7px;border-color:transparent;background:transparent}
  .app.modo-paciente .lateral-busca{padding:0 14px;gap:20px}
  .app.modo-paciente .lateral-grupo{height:1px;margin:12px 4px;padding:0;background:var(--line-3)}
  .app.modo-paciente .lateral-rodape .btn{padding-left:15px;gap:20px;white-space:nowrap}
  /* MODO PACIENTE no computador: SEM barra no rodapé. As ações (Novo · Consulta · Assistente, Mensagens no
     cabeçalho) moram no PAINEL DE AÇÕES à direita do prontuário (prontuario.js), já abertas: a barra flutuante
     cobria o fim das abas e escondia cada ação atrás de um clique a mais. O gravador vai para a aba Consulta. */
  .app.modo-paciente .barra-inferior{display:none}
  .app.modo-paciente .barra-inferior.bi-escuta{border-color:var(--ink)}
  .bi-p-escuta .bp-volta .onda{display:flex}
  @keyframes dock-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .barra-inferior .bi-consultorio{display:none}
  .barra-inferior .bi-camada,.barra-inferior .bi-camada.dica-alvo{left:8px;right:8px;height:62px}
  .bi-p-acoes{display:flex;align-items:center;gap:4px}
  .bi-p-acoes .bi-item{flex:1;flex-direction:row;gap:8px;height:48px;font-size:14px}
  .bi-p-acoes .bi-item:hover{background:var(--doc-tint)}
  .bi-p-acoes .bi-ponto{top:12px;left:26px}
  .bi-central{flex:none;height:auto;padding:0 6px}
  .bi-consulta button{width:auto;height:48px;margin:0;padding:0 22px 0 16px;gap:8px;display:inline-flex;align-items:center;border-radius:var(--r-lg);font-size:15px;font-weight:600;
    box-shadow:0 0 0 3px var(--doc-soft), 0 6px 14px -4px color-mix(in srgb, var(--doc) 55%, transparent)}
  .bi-consulta button svg{width:20px;height:20px}
  .bi-consulta button:hover{background:var(--doc-forte)}
  .rolagem-tela{padding-bottom:40px}
  .tela{padding:24px 32px;gap:28px;max-width:1360px}
  .barra-app{padding:0 24px}
  .barra-app::before{display:none}
  .barra-app-linha{min-height:68px}
  .barra-app-titulo h1{font-size:21px}
  .so-celular{display:none!important}
}
@container app (max-width: 1023.98px){
  .so-computador{display:none!important}
}
/* fallback para navegadores sem container query: a janela decide */
@supports not (container-type:inline-size){
  @media (min-width:1024px){
    .app-grade{grid-template-columns:248px minmax(0,1fr)}
    .lateral{display:flex;flex-direction:column;padding:16px 12px;background:var(--fill-2);border-right:1px solid var(--line-3)}
    .barra-inferior{display:none}
  }
}

/* Painéis lado a lado no computador; empilhados no celular. */
.paineis{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
.coluna{display:flex;flex-direction:column;gap:var(--s-6);min-width:0}
@container app (min-width: 1024px){
  .paineis{grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
  .paineis.paineis-meio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .paineis.paineis-3{grid-template-columns:320px minmax(0,1fr) 340px}
  .painel-fixo{position:sticky;top:0}
}

/* ---------- Moldura de iPhone ("Ver como celular") ---------- */
html.modo-moldura body{background:var(--fill);overflow:auto}
html.modo-moldura #raiz{min-height:100%;padding:28px 0}
html.modo-moldura .moldura{
  position:relative; width:410px; height:864px; padding:10px; border-radius:62px; flex:none;
  background:#0E0E10; box-shadow:var(--sh-3), inset 0 0 0 2px #2A2A2E;
}
html.modo-moldura .moldura::before{ /* ilha */
  content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:120px;height:34px;border-radius:20px;background:#000;z-index:100;pointer-events:none
}
html.modo-moldura .app{width:390px;height:844px;border-radius:52px}
html.modo-moldura .app .barra-app{padding-top:50px}
html.modo-moldura .app .barra-inferior{padding-bottom:16px;height:calc(var(--barra-inferior) + 16px)}
html.modo-moldura .app .rolagem{scrollbar-width:none}
html.modo-moldura .app .rolagem-tela{padding-bottom:calc(var(--barra-inferior) + 44px)}
.moldura{display:contents}
html.modo-moldura .moldura{display:block}
.controles-moldura{position:fixed;top:16px;right:16px;z-index:200;display:none;gap:8px}
html.modo-moldura .controles-moldura{display:flex}

/* =====================================================================
   Tipografia de tela
   ===================================================================== */
.titulo-tela{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.secao{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.secao-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:28px}
.secao-titulo{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.secao-acao{font-size:14px;font-weight:600;color:var(--doc-texto);min-height:var(--toque);display:inline-flex;align-items:center;padding:0 4px}
.rotulo{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-5)}
.texto-2{color:var(--ink-3)} .texto-3{color:var(--ink-4)} .texto-doc{color:var(--doc-texto)}
.pequeno{font-size:13px}
.forte{font-weight:600}
.linha{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.linha-entre{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-width:0}
.pilha{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.pilha-3{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.cresce{flex:1;min-width:0}
.corta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   Botões
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--toque); padding:0 16px; border-radius:var(--r-md);
  font-size:15px; font-weight:600; line-height:1.1; white-space:nowrap; border:1px solid transparent;
  transition:background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out), opacity var(--t-fast);
  touch-action:manipulation; user-select:none;
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.35;cursor:not-allowed}
.btn-primario{background:var(--doc);color:var(--sobre-doc)}
.btn-primario:hover:not(:disabled){background:var(--doc-forte)}
.btn-escuro{background:var(--ink);color:var(--surface)}
.btn-secundario{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-contorno{background:var(--surface);border-color:var(--doc-border);color:var(--doc-texto)}
.btn-contorno:hover:not(:disabled){background:var(--doc-tint);border-color:var(--doc)}
.btn-secundario:hover:not(:disabled){border-color:var(--ink-5)}
.btn-fantasma{color:var(--ink-3)}
.btn-fantasma:hover:not(:disabled){background:var(--fill);color:var(--ink)}
.btn-perigo{background:var(--surface);border-color:var(--err-line);color:var(--err)}
.btn-ok{background:var(--ok);color:var(--surface)}
.btn-grande{min-height:52px;border-radius:var(--r-xl);font-size:16px;padding:0 20px}
.btn-sm{min-height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:13.5px}
.btn-bloco{width:100%}
.btn-icone{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--toque);height:var(--toque);min-height:0;padding:0;border-radius:var(--r-md);color:var(--ink-3);line-height:0}   /* flex + line-height 0: o ícone fica no centro exato do quadrado, sem depender do botão nativo */
.btn-icone svg{display:block;flex:none}
.btn-icone:hover{background:var(--fill);color:var(--ink)}
.btn-icone.com-borda{border:1px solid var(--line-2);width:var(--toque);height:var(--toque)}
.btn-pilula{min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);font-size:13.5px;font-weight:500;color:var(--ink-2)}
/* área de toque invisível para botões visualmente menores que 44px */
.alvo{position:relative}
.alvo::after{content:"";position:absolute;inset:50% auto auto 50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.grupo-btn{display:flex;gap:var(--s-2);flex-wrap:wrap}
.grupo-btn > .btn{flex:1 1 auto}

/* =====================================================================
   Contador, selo (StatusChip), ponto
   ===================================================================== */
.contador{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--err);color:var(--surface);
  font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.contador-neutro{background:var(--fill);color:var(--ink-3)}
.contador-doc{background:var(--doc);color:var(--sobre-doc)}

.selo{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:var(--r-xs);
  font-size:12px;font-weight:600;white-space:nowrap;line-height:1;flex:none}
.selo svg{width:13px;height:13px}
.selo-ok{color:var(--ok);background:var(--ok-bg)}
.selo-espera{color:var(--warn);background:var(--warn-bg)}
.selo-parado{color:var(--err);background:var(--err-bg)}
.selo-fora{color:var(--ink-3);background:var(--fill)}
.selo-doc{color:var(--doc-texto);background:var(--doc-soft)}
.selo-doc-cheio{color:var(--sobre-doc);background:var(--doc)}
.selo-contorno{background:transparent;border:1px solid var(--line-2);color:var(--ink-3)}

.ponto{width:8px;height:8px;border-radius:var(--r-pill);background:var(--ink-5);flex:none;display:inline-block}
.ponto-ok{background:var(--ok)} .ponto-espera{background:var(--warn-dot)} .ponto-parado{background:var(--err)} .ponto-doc{background:var(--doc)}
.ponto-pulsa{animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}

/* =====================================================================
   Cartões
   ===================================================================== */
.cartao{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2xl);min-width:0}
.cartao-corpo{padding:var(--s-4)}
.cartao-cab{display:flex;align-items:center;gap:var(--s-3);padding:14px var(--s-4);border-bottom:1px solid var(--line-4)}
.cartao-cab h3{font-size:15px;font-weight:700;flex:1;min-width:0}
.cartao-rodape{display:flex;align-items:center;gap:var(--s-2);padding:10px var(--s-4);border-top:1px solid var(--line-4);background:var(--fill-2);border-radius:0 0 var(--r-2xl) var(--r-2xl)}
.cartao-destaque{border-color:var(--doc-border);background:linear-gradient(180deg, var(--doc-tint), var(--surface) 140px);box-shadow:var(--sh-2)}
.cartao-plano{background:var(--fill-2);border-color:var(--line-3)}
.cartao-toque{display:block;width:100%;text-align:left;transition:border-color var(--t-fast),transform var(--t-press)}
.cartao-toque:hover{border-color:var(--line)}
.cartao-toque:active{transform:scale(.99)}

/* Conteúdo proposto pela IA: tracejado na cor do profissional. O médico sempre vê o que ainda não revisou. */
.cartao-ia{border:1px dashed var(--doc-border);background:var(--surface)}
.cartao-ia.aceito{border-style:solid;border-color:var(--ok-line)}
.cartao-ia.descartado{opacity:.55;border-style:solid;border-color:var(--line-2)}
.marca-ia{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--doc-texto)}
.marca-ia svg{width:14px;height:14px}

/* Banner: aviso no lugar da ação */
.banner{display:flex;gap:var(--s-3);align-items:flex-start;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--fill-2);font-size:14px}
.banner .banner-icone{width:20px;height:20px;flex:none;margin-top:1px}
.banner b{font-weight:600}
.banner-aviso{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.banner-erro{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.banner-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.banner-doc{background:var(--doc-tint);border-color:var(--doc-border);color:var(--ink-2)}
.banner-doc .banner-icone{color:var(--doc-texto)}

/* Linha de alerta compacta (dentro de cartão): ícone + texto, tom pela classe */
.alertas{display:flex;flex-direction:column;gap:6px}
.alerta{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.alerta svg{width:16px;height:16px;margin-top:1px;flex:none}
.alerta-parado svg{color:var(--err)} .alerta-espera svg{color:var(--warn-dot)} .alerta-ok svg{color:var(--ok)} .alerta-doc svg{color:var(--doc-texto)} .alerta-fora svg{color:var(--ink-4)}

/* =====================================================================
   Listas
   ===================================================================== */
.lista{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2xl);overflow:hidden}
.lista-item{display:flex;align-items:center;gap:var(--s-3);min-height:60px;padding:10px var(--s-4);border-top:1px solid var(--line-4);text-align:left;width:100%;color:inherit;background:transparent}
.lista-item:first-child{border-top:0}
a.lista-item:hover,button.lista-item:hover{background:var(--fill-2)}
.li-texto{flex:1;min-width:0}
.li-titulo{font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{font-size:13px;color:var(--ink-4);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-fim{display:flex;align-items:center;gap:8px;flex:none;color:var(--ink-5)}
.lista-solta{display:flex;flex-direction:column;gap:var(--s-2)}
.lista-solta .lista-item{border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface)}

/* chave/valor */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:14px}
.kv dt{color:var(--ink-4)} .kv dd{margin:0;font-weight:500;text-align:right;min-width:0}

/* números de destaque (métrica) */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s-2)}
.metrica{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface);min-width:0}
.metrica .valor{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.metrica .legenda{font-size:13px;color:var(--ink-4);margin-top:3px}
.variacao{font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.variacao.sobe{color:var(--ok)} .variacao.desce{color:var(--err)}

/* vazio */
.vazio{padding:18px 16px;font-size:14px;color:var(--ink-4);text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-xl)}

/* =====================================================================
   Chips de filtro e segmented
   ===================================================================== */
.chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s-4));padding:2px var(--s-4)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.chip[aria-pressed=true],.chip.ativo{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}
.chip .n{font-variant-numeric:tabular-nums;opacity:.7}
.chip-resposta{border-color:var(--doc-border);color:var(--doc-texto);background:var(--surface)}
.chip-resposta:hover{background:var(--doc-tint)}

.segmentado{display:flex;padding:3px;border-radius:var(--r-md);background:var(--fill);gap:2px}
.segmentado button{flex:1;min-height:38px;padding:0 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink-4);white-space:nowrap}
.segmentado button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}

/* Toggle */
.toggle{position:relative;width:44px;height:26px;border-radius:var(--r-pill);background:var(--line);transition:background var(--t-fast);flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-1);transition:transform var(--t-fast) var(--ease-out)}
.toggle[aria-checked=true]{background:var(--doc)}
.toggle[aria-checked=true]::after{transform:translateX(18px)}

/* =====================================================================
   Campos
   ===================================================================== */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo > label,.campo .campo-rotulo{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.entrada,.campo input,.campo select,.campo textarea{
  width:100%;min-width:0;min-height:48px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);font-size:16px;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)
}
.campo textarea,textarea.entrada{min-height:120px;resize:vertical;line-height:1.5}
.entrada:focus,.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--doc);box-shadow:0 0 0 1px var(--doc)}
.campo .ajuda{font-size:13px;color:var(--ink-4)}
.campo.erro input,.campo.erro textarea{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.campo .msg-erro{font-size:13.5px;color:var(--err);display:flex;gap:6px;align-items:center}
.busca{position:relative}
.busca svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-5);width:18px;height:18px}
.busca .entrada{padding-left:42px;border-radius:var(--r-pill);background:var(--fill);border-color:transparent}
.codigo{display:flex;gap:8px;justify-content:center}
.codigo input{width:46px;height:56px;text-align:center;font-family:var(--font-mono);font-size:22px;font-weight:600;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.codigo input:focus{outline:none;border-color:var(--doc);box-shadow:0 0 0 1px var(--doc)}

/* checagem redonda grande (marcar como feito) */
.check{width:var(--toque);height:var(--toque);display:grid;place-items:center;flex:none;border-radius:var(--r-pill)}
.check span{width:24px;height:24px;border-radius:var(--r-pill);border:2px solid var(--ink-6);display:grid;place-items:center;transition:all var(--t-fast) var(--ease-out)}
.check span svg{width:14px;height:14px;opacity:0;color:var(--surface)}
.check[aria-checked=true] span{background:var(--ok);border-color:var(--ok)}
.check[aria-checked=true] span svg{opacity:1}

/* =====================================================================
   Avatar com iniciais
   ===================================================================== */
.avatar{width:40px;height:40px;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);display:grid;place-items:center;flex:none;
  font-size:14px;font-weight:600;letter-spacing:.01em;border:1px solid var(--line-3)}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-lg{width:52px;height:52px;font-size:17px}
.avatar-xl{width:64px;height:64px;font-size:21px}
.avatar-doc{background:var(--doc);color:var(--sobre-doc);border-color:transparent}
.avatar-escuro{background:var(--ink);color:var(--surface);border-color:transparent}
.avatar-anel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--doc)}
/* foto de identificação: o <img> cobre as iniciais; se a imagem falhar, as iniciais ficam à vista */
.avatar-foto{position:relative;overflow:hidden;padding:0}
.avatar-foto .av-ini{position:absolute;inset:0;display:grid;place-items:center}
.avatar-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--fill)}
.avatar-ident{width:84px;height:84px;font-size:28px;font-weight:600}
.avatar-xs{width:24px;height:24px;font-size:10px}
.foto-id{position:relative;flex:none;display:block;padding:0;border-radius:var(--r-pill);min-width:44px;min-height:44px;transition:transform var(--t-press)}
.foto-id:active{transform:scale(.97)}
.foto-id.sem-foto .avatar{border-style:dashed;border-color:var(--line)}
.foto-id-mais{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--doc);color:var(--sobre-doc);border:2px solid var(--surface)}

/* =====================================================================
   Linha do tempo
   ===================================================================== */
.linha-tempo{list-style:none;margin:0;padding:0;position:relative}
.lt-item{position:relative;display:grid;grid-template-columns:64px 28px minmax(0,1fr);gap:0 10px;padding-bottom:18px}
.lt-item:last-child{padding-bottom:0}
.lt-quando{text-align:right;padding-top:2px}
.lt-quando .d{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.lt-quando .s{font-size:12px;color:var(--ink-4);line-height:1.2}
.lt-marco{position:relative;display:flex;justify-content:center}
.lt-marco::before{content:"";position:absolute;top:22px;bottom:-18px;left:50%;width:2px;margin-left:-1px;background:var(--line-2)}
.lt-item:last-child .lt-marco::before{display:none}
.lt-bola{position:relative;z-index:1;width:22px;height:22px;border-radius:var(--r-pill);border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-4)}
.lt-bola svg{width:12px;height:12px}
.lt-feito .lt-bola{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.lt-feito .lt-marco::before{background:var(--ok-line)}
.lt-agora .lt-bola{border-color:var(--doc);background:var(--doc);color:var(--sobre-doc);box-shadow:0 0 0 4px var(--doc-soft)}
.lt-futuro .lt-bola{border-style:dashed}
.lt-corpo{min-width:0;padding-top:1px}
.lt-titulo{font-size:15px;font-weight:600;line-height:1.3}
.lt-texto{font-size:13.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.lt-quem{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12.5px;color:var(--ink-4)}

/* =====================================================================
   Bottom sheet, véu, toast, dica
   ===================================================================== */
.camada{position:absolute;inset:0;z-index:60;pointer-events:none}
.veu{position:absolute;inset:0;background:var(--veu);opacity:0;transition:opacity var(--t-slide) var(--ease-out);pointer-events:auto}
.veu.aberto{opacity:1}

/* ---------- DRAWER: o único padrão para o que abre por cima ----------
   Celular: sobe de baixo em altura cheia, alça + arrastar para fechar.
   Computador: desliza da direita sobre a área de trabalho (--area-esq, medida pelo core). */
.drawer{
  position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top) + 10px);
  display:flex;flex-direction:column;min-height:0;background:var(--surface);
  border-radius:20px 20px 0 0;box-shadow:var(--sh-3);pointer-events:auto;outline:none;
  transform:translateY(100%);transition:transform 300ms var(--ease-out);
}
.drawer.aberto{transform:none}
.drawer.saindo{transition:transform 200ms var(--ease-in)}
.drawer.arrastando{transition:none}
.drawer-auto{top:auto;max-height:calc(100% - 48px)}
html.modo-moldura .drawer{top:50px}
html.modo-moldura .drawer-auto{top:auto;max-height:calc(100% - 60px)}
/* o de baixo da pilha fica à sombra do de cima: dá para ver que existe um "voltar" */
.drawer.atras::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--veu);pointer-events:none}
.drawer-alca{flex:none;width:40px;height:5px;margin:8px auto 0;border-radius:var(--r-pill);background:var(--line);touch-action:none}
.drawer-cab{flex:none;display:flex;align-items:center;gap:4px;min-height:58px;padding:2px 6px 6px 18px;border-bottom:1px solid var(--line-4);touch-action:none}
.drawer-cab:has(.drawer-voltar){padding-left:4px}
.drawer-titulos{flex:1;min-width:0}
.drawer-cab h2{font-size:18px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-sub{font-size:13px;color:var(--ink-4);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.drawer-rec:empty{display:none}
.drawer-corpo{flex:1;min-height:0;padding:16px 18px 24px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--s-4)}
.drawer-auto .drawer-corpo{flex:0 1 auto}
.drawer-rodape{flex:none;display:flex;gap:var(--s-2);padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line-3);background:var(--surface)}
.drawer-rodape .btn{flex:1}
html.modo-moldura .drawer-rodape{padding-bottom:26px}
html.modo-moldura .drawer-auto:not(:has(.drawer-rodape)) .drawer-corpo{padding-bottom:30px}
@container app (min-width: 1024px){
  .veu{left:var(--area-esq,0px)}
  .drawer,.drawer-auto{left:auto;right:0;top:0;bottom:0;max-height:none;width:min(640px, calc(100% - var(--area-esq,0px)));
    border-radius:var(--r-2xl) 0 0 var(--r-2xl);transform:translateX(104%);transition:transform 320ms var(--ease-out)}
  .drawer.aberto{transform:none}
  .drawer.saindo{transition:transform 220ms var(--ease-in)}
  .drawer-largo{width:min(980px, calc(100% - var(--area-esq,0px)))}
  .drawer-auto .drawer-corpo{flex:1}
  .drawer-alca{display:none}
  .drawer-cab{min-height:68px;padding:8px 12px 8px 24px}
  .drawer-cab:has(.drawer-voltar){padding-left:10px}
  .drawer-cab h2{font-size:19px}
  .drawer-corpo{padding:20px 24px 28px}
  .drawer-rodape{padding:14px 24px}
  .drawer-rodape .btn{flex:0 1 auto}
  .drawer-rodape{justify-content:flex-end}
}
@media (prefers-reduced-motion: reduce){ .drawer{transition:none!important} }

/* pílula da escuta no computador: centrada no rodapé da área principal */
@container app (min-width: 1024px){ .mini-gravacao{bottom:20px} }
/* com a pílula da escuta à vista, o conteúdo ganha folga embaixo para nada ficar atrás dela */
.app.gravacao-ativa .rolagem-tela{padding-bottom:calc(var(--barra-inferior) + 84px + env(safe-area-inset-bottom))}
.app.gravacao-ativa:not(.com-drawer) .toasts{bottom:calc(var(--barra-inferior) + 68px + env(safe-area-inset-bottom))}
@container app (min-width: 1024px){ .app.gravacao-ativa:not(.com-drawer) .toasts{bottom:80px} }
/* indicador de gravação no cabeçalho do drawer: a escuta nunca some de vista */
.rec-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:var(--r-pill);background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-line);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rec-chip i{width:8px;height:8px;border-radius:50%;background:var(--err);animation:pulsa 1.4s ease-in-out infinite}

/* opções grandes dentro de sheet (ação rápida) */
.opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.opcao{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;min-height:96px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--surface);text-align:left}
.opcao:hover{border-color:var(--line)}
.opcao .oi{width:36px;height:36px;border-radius:var(--r-md);background:var(--doc-soft);color:var(--doc-texto);display:grid;place-items:center}
.opcao b{font-size:15px;font-weight:600}
.opcao span{font-size:13px;color:var(--ink-4);line-height:1.3}

/* busca de paciente (drawer do botão Buscar / tecla "/") */
.bp-campo{position:sticky;top:-16px;z-index:2;margin:-16px -18px 0;padding:12px 18px 10px;background:var(--surface)}
.bp-campo svg{left:32px}
.bp-campo .entrada{min-height:52px}
.bp-atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.bp-at{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;padding:10px 12px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);text-align:left;transition:border-color var(--t-fast),background-color var(--t-fast)}
.bp-at:hover{border-color:var(--line);background:var(--fill-2)}
.bp-at svg{color:var(--doc-texto);margin-bottom:4px}
.bp-at b{font-size:14px;font-weight:600;line-height:1.2}
.bp-at span{font-size:13px;color:var(--ink-4);line-height:1.25}
.bp-grupo{display:flex;align-items:center;gap:8px;margin:2px 2px 8px;font-size:14px;font-weight:700;color:var(--ink-2)}
.bp-lista{display:flex;flex-direction:column;gap:6px}
.bp-li{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 12px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--surface);color:inherit;
  transition:border-color var(--t-fast),background-color var(--t-fast)}
.bp-li:hover{border-color:var(--line);background:var(--fill-2)}
.bp-li:first-child:not(:only-child){border-color:var(--line)}
.bp-li > svg{color:var(--ink-5);flex:none}
.bp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bp-nome{font-size:15.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-sub{font-size:13px;color:var(--ink-4)}
.bp-selos{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.bp-quando{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-size:12.5px;line-height:1.25;color:var(--ink-4);text-align:right}
.bp-quando b{font-size:14.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bp-quando.doc span,.bp-quando.doc b{color:var(--doc-texto)}
.bp-todos{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:6px;font-size:14px;font-weight:600}
.bp-nada{display:flex;flex-direction:column;gap:10px}
@container app (min-width: 1024px){ .bp-campo{top:-20px;margin:-20px -24px 0;padding:14px 24px 12px} .bp-campo svg{left:38px} }

.toasts{position:absolute;left:12px;right:12px;bottom:calc(var(--barra-inferior) + 14px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:440px;width:max-content;min-height:48px;padding:8px 8px 8px 16px;border-radius:var(--r-lg);
  background:var(--ink);color:var(--surface);font-size:14px;font-weight:500;box-shadow:var(--sh-2);animation:sobe var(--t-slide) var(--ease-out)}
.toast svg{color:var(--ok-line)}
.toast .btn{min-height:36px;color:var(--surface);background:color-mix(in srgb, var(--surface) 14%, transparent)}
.toast.saindo{opacity:0;transform:translateY(6px);transition:all var(--t-fast) var(--ease-in)}
@container app (min-width: 1024px){ .toasts{bottom:24px} }
/* Telas sem barra inferior (consulta, laudo) têm o rodapé de ação colado embaixo: o aviso
   desce do topo, logo abaixo da app bar, para nunca cobrir o botão que o médico vai tocar. */
.app.sem-nav .toasts,.app.com-drawer .toasts{bottom:auto;top:calc(env(safe-area-inset-top) + 68px)}
.app.sem-nav .toast,.app.com-drawer .toast{animation-name:desce}
/* Câmera em tela cheia: abaixo do cabeçalho e da miniatura do mapa. */
.app:has(.pr-cam-raiz) .toasts{bottom:auto;top:150px}
@container app (min-width: 1024px){ .app:has(.pr-cam-raiz) .toasts{top:90px} .app.sem-nav .toasts{top:76px} .app.com-drawer .toasts{top:84px;left:var(--area-esq,0px)} }
@keyframes desce{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* dica flutuante do roteiro de demonstração */
.dica{position:absolute;z-index:90;width:300px;max-width:calc(100% - 24px);padding:14px 16px 12px;border-radius:var(--r-xl);background:var(--ink);color:var(--surface);
  box-shadow:var(--sh-3);font-size:14.5px;line-height:1.45;pointer-events:auto;animation:sobe var(--t-slide) var(--ease-out)}
.dica .passo{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-5);margin-bottom:4px}
.dica .acoes{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.dica .acoes button{min-height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600}
.dica .ir{background:var(--doc);color:var(--sobre-doc)}
.dica .sair{color:var(--ink-5)}
.dica-alvo{position:relative;z-index:2;box-shadow:0 0 0 3px var(--doc),0 0 0 8px var(--doc-soft)!important;border-radius:var(--r-xl);transition:box-shadow var(--t-fast)}
/* dica encaixada no rodapé quando o alvo é maior que a folga: largura cheia e espaço extra para rolar */
.dica.dica-doca{width:auto;right:auto;max-width:min(520px, calc(100% - 24px));width:calc(100% - 24px)}
.app.com-dica .rolagem-tela{padding-bottom:calc(var(--barra-inferior) + 40px + var(--dica-h, 160px) + env(safe-area-inset-bottom))}
.app.com-dica.sem-nav .rolagem-tela{padding-bottom:calc(24px + var(--dica-h, 160px))}
/* avisos não somem atrás da dica encaixada */
.app.com-dica:not(.sem-nav) .toasts{bottom:calc(var(--barra-inferior) + 24px + var(--dica-h, 160px) + env(safe-area-inset-bottom))}

/* =====================================================================
   Esqueleto (carregando)
   ===================================================================== */
.esqueleto{background:linear-gradient(90deg,var(--fill) 0,var(--line-3) 40px,var(--fill) 80px);background-size:480px 100%;animation:brilho 1.4s linear infinite;border-radius:var(--r-sm);min-height:14px}
@keyframes brilho{from{background-position:-480px 0}to{background-position:480px 0}}
.estado{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}

/* =====================================================================
   Gravação
   ===================================================================== */
.gravando{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--err-bg);color:var(--err-ink);
  font-size:13.5px;font-weight:600;border:1px solid var(--err-line)}
.gravando .bolinha{width:10px;height:10px;border-radius:50%;background:var(--err);box-shadow:0 0 0 0 color-mix(in srgb, var(--err) 50%, transparent);animation:gravar 1.6s ease-out infinite}
.gravando time{font-family:var(--font-mono);font-weight:600}
.gravando.pausado{background:var(--fill);color:var(--ink-3);border-color:var(--line-2)}
.gravando.pausado .bolinha{background:var(--ink-5);animation:none}
@keyframes gravar{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--err) 45%, transparent)}100%{box-shadow:0 0 0 9px transparent}}
.onda{display:flex;align-items:center;gap:3px;height:28px}
.onda i{display:block;width:3px;border-radius:2px;background:var(--doc);height:30%;animation:onda 1s ease-in-out infinite}
.onda i:nth-child(2n){animation-delay:-.3s}.onda i:nth-child(3n){animation-delay:-.6s}.onda i:nth-child(5n){animation-delay:-.15s}
.onda.parada i{animation:none;height:18%;background:var(--ink-5)}
@keyframes onda{0%,100%{height:20%}50%{height:95%}}

/* =====================================================================
   Gráficos simples (gerados por App.graficos.*)
   ===================================================================== */
.grafico{width:100%;height:auto;overflow:visible}
.grafico text{font-family:var(--font-sans);font-size:var(--g-fs,11px);fill:var(--ink-4)}
.grafico .eixo{stroke:var(--line-3);stroke-width:1}
.grafico .barra{fill:var(--line)}
.grafico .barra-doc{fill:var(--doc)}
.grafico .barra-ink{fill:var(--ink-2)}
.grafico .barra-suave{fill:var(--doc-soft)}
.grafico .barra-ok{fill:var(--ok)} .grafico .barra-espera{fill:var(--warn-dot)} .grafico .barra-parado{fill:var(--err)}
.grafico .valor{fill:var(--ink-2);font-weight:600}
.sparkline{display:inline-block;vertical-align:middle;overflow:visible}
.sparkline path.linha{fill:none;stroke:var(--doc);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.sparkline path.area{fill:var(--doc-soft);stroke:none}
.sparkline circle{fill:var(--doc);stroke:var(--surface);stroke-width:2}
.legenda-grafico{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-3)}
.legenda-grafico i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--line)}
/* barra de proporção horizontal (produzido × recebido etc.) */
.proporcao{display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--fill);gap:2px}
.proporcao span{display:block;height:100%}
.proporcao .p-doc{background:var(--doc)} .proporcao .p-ink{background:var(--ink-2)} .proporcao .p-ok{background:var(--ok)}
.proporcao .p-espera{background:var(--warn-dot)} .proporcao .p-parado{background:var(--err)} .proporcao .p-suave{background:var(--line)}

/* placeholder de foto clínica (App.fotoSVG) */
.foto{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--fill);border:1px solid var(--line-3)}
.foto svg{width:100%;height:100%}

/* =====================================================================
   Tela "Em construção" (stubs)
   ===================================================================== */
.em-construcao{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border:1px dashed var(--line);border-radius:var(--r-2xl);background:var(--surface)}
.em-construcao .icone-q{width:44px;height:44px;border-radius:var(--r-lg);background:var(--fill);display:grid;place-items:center;color:var(--ink-4)}
.em-construcao h2{font-size:18px;font-weight:700}
.em-construcao p{font-size:14px;color:var(--ink-3);max-width:52ch}

/* ---------- Assistente no centro da navegação ----------
   Consultório: botão levantado e cheio em tinta (o principal chamado da barra), com o brilho da IA.
   Paciente: mantém a forma discreta do antigo "+ Novo" (não disputa com o passo da consulta). */
.bi-assistente button{background:var(--ink);color:var(--surface);box-shadow:var(--sh-2), 0 0 0 4px var(--chao), inset 0 0 0 1.5px color-mix(in srgb, var(--doc) 55%, transparent)}
.bi-assistente button svg{color:color-mix(in srgb, var(--doc) 35%, var(--surface))}
.bi-assistente{color:var(--ink-2)}
.btn.lateral-assistente{justify-content:flex-start;margin-bottom:14px;background:var(--ink);color:var(--surface);font-weight:600;border:0}
.btn.lateral-assistente:hover{background:var(--ink-2)}
.btn.lateral-assistente svg{color:color-mix(in srgb, var(--doc) 35%, var(--surface))}
.lateral-assist-sub{margin-left:auto;font-size:12px;font-weight:500;color:color-mix(in srgb, var(--surface) 70%, transparent)}
.ln-kbd{margin-left:auto;min-width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-xs);border:1px solid var(--line-2);background:var(--fill-2);font-family:var(--font-mono);font-size:12px;color:var(--ink-4)}
.ln-item .contador + .ln-kbd{margin-left:6px}

/* ---------- faixa "Em atendimento" (modo Consultório, fora de Hoje) ---------- */
.faixa-atd{display:flex;align-items:center;gap:4px;padding:4px 8px 4px 12px;background:var(--doc-tint);border-bottom:1px solid var(--doc-border);flex:none}
.faixa-atd[hidden]{display:none}
.fa-volta{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;text-align:left;color:var(--ink);border-radius:var(--r-md)}
.fa-volta .avatar{width:28px;height:28px;font-size:11px;flex:none}
.fa-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden;font-size:14px}
.fa-t b{font-weight:700;flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.fa-rot{font-size:12.5px;font-weight:600;color:var(--doc-texto);flex:none}
.fa-est{display:inline-flex;align-items:center;gap:5px;min-width:0;flex:0 1 auto;white-space:nowrap;font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.fa-est i{width:8px;height:8px;border-radius:50%;background:var(--ink-5);flex:none}
.fa-est.vivo i{background:var(--err);animation:gravar 1.6s ease-out infinite}
.fa-est time{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.fa-ir{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:600;color:var(--doc-texto);flex:none}
.fa-x{flex:none;color:var(--ink-4)}
@container app (max-width: 420px){ .fa-ir{font-size:0;gap:0} }
@container app (min-width: 1024px){ .faixa-atd{padding:4px 24px 4px 32px} }
@media (prefers-reduced-motion: reduce){ .fa-est.vivo i{animation:none} }

/* =====================================================================
   COMPOSITOR: microfone + teclado num bloco só. É o mesmo na aba Consulta (pronta), no topo da revisão
   e na nota/adendo (Anotar). O microfone escuta a consulta quando a paciente autorizou a gravação, ou
   capta só o ditado do médico quando não autorizou: o sistema decide, e a linha de modo diz qual vale.
   ===================================================================== */
.cmp{display:flex;flex-direction:column;gap:12px;min-width:0}
.cmp-caixa{display:flex;flex-direction:column;border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line-2);
  transition:border-color var(--t-fast), box-shadow var(--t-fast)}
.cmp-caixa:focus-within{border-color:var(--doc-border);box-shadow:0 0 0 3px var(--doc-soft)}
.cmp.cmp-realce .cmp-caixa{animation:cmp-realce 1.2s var(--ease-out)}
@keyframes cmp-realce{0%,40%{border-color:var(--doc);box-shadow:0 0 0 4px var(--doc-soft)}}
.cmp-voz{display:flex;align-items:center;gap:14px;padding:14px 16px}
.cmp-mic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--doc);color:var(--sobre-doc);
  box-shadow:0 0 0 5px var(--doc-soft), 0 6px 14px -4px color-mix(in srgb, var(--doc) 55%, transparent);transition:transform var(--t-press) var(--ease-out), background var(--t-fast)}
.cmp-mic:active{transform:scale(.95)}
.cmp-mic:hover{background:var(--doc-forte)}
.cmp-mic:focus-visible{outline:2px solid var(--doc);outline-offset:7px}
.cmp-mic[aria-pressed=true]{background:var(--err);box-shadow:0 0 0 5px var(--err-bg)}
.cmp-mic[aria-pressed=true] svg{animation:pulsa 1.4s ease-in-out infinite}
.cmp-mic[disabled]{background:var(--fill);color:var(--ink-4);box-shadow:none}
.cmp-voz-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cmp-voz-t b{font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.cmp-modo{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;line-height:1.35;color:var(--ink-3);text-wrap:balance}
.cmp-modo i{align-self:center}
.cmp-modo i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.cmp[data-modo=ditado] .cmp-modo i{background:var(--warn-dot)}
.cmp-modo time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}
/* grande: a aba Consulta pronta. O microfone é o primeiro gesto, então ele é o maior objeto do bloco. */
.cmp-grande .cmp-voz{flex-direction:column;text-align:center;padding:26px 16px 20px;gap:14px}
.cmp-grande .cmp-mic{width:76px;height:76px;box-shadow:0 0 0 9px var(--doc-soft), 0 10px 22px -6px color-mix(in srgb, var(--doc) 60%, transparent)}
.cmp-grande .cmp-voz-t{align-items:center}
.cmp-grande .cmp-voz-t b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.cmp-ou{display:flex;align-items:center;gap:10px;padding:0 16px;font-size:12.5px;font-weight:600;color:var(--ink-4)}
.cmp-ou::before,.cmp-ou::after{content:"";flex:1;height:1px;background:var(--line-3)}
.cmp-ou svg{color:var(--ink-4)}
.cmp textarea.cmp-texto,.campo .cmp textarea.cmp-texto{display:block;width:100%;min-height:92px;padding:12px 16px 14px;border:0;border-radius:0 0 var(--r-2xl) var(--r-2xl);
  background:transparent;box-shadow:none;resize:none;overflow:hidden;font-size:16px;line-height:1.5;color:var(--ink)}
.cmp textarea.cmp-texto:focus{outline:none;box-shadow:none;border:0}
.cmp textarea.cmp-texto::placeholder{color:var(--ink-4)}
.cmp-grande textarea.cmp-texto{min-height:120px}
.cmp-curto textarea.cmp-texto{min-height:56px}
.cmp-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 12px 12px}
.cmp-chips::-webkit-scrollbar{display:none}
.cmp-chips .chip{min-height:44px;flex:none}
.cmp-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cmp-rodape .btn{margin-left:auto}
.cmp-ia{display:flex;align-items:center;gap:12px;min-height:44px;flex:1 1 240px;text-align:left;font-size:14px;color:var(--ink-2);padding:0}
.cmp-ia .cresce{display:flex;flex-direction:column;gap:2px}
.cmp-ia small{font-size:13px;color:var(--ink-4);line-height:1.35}
.cmp-nota{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4;color:var(--ink-3);flex:1 1 220px}
.cmp-nota svg{flex:none;margin-top:1px;color:var(--doc-texto)}
.campo.erro .cmp-caixa{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
@media (prefers-reduced-motion: reduce){ .cmp-mic[aria-pressed=true] svg,.cmp.cmp-realce .cmp-caixa{animation:none} }