/* =============================================================================
   IDBA Hospitalar — folha de estilo do SISTEMA
   Reescrita sobre o design system IDBA (tokens da seção 3 do documento oficial).

   REGRAS QUE ESTA FOLHA FAZ VALER SOZINHA (sem tocar nas 26 telas):
   · Fundo de página é AREIA CALMA, nunca branco. Branco só em superfície.
   · UM botão verde por tela: o <button> solto é o primário; botão dentro de
     célula de tabela, de .acoes ou de form.inline vira SECUNDÁRIO automaticamente.
     Era isso ou reescrever 26 telas — a regra mora no CSS e não se esquece.
   · Coral (crítico) reservado a erro, urgência e ação destrutiva.
   · Raios só 4 / 8 / 12 / 999px. Nenhuma sombra fora de popover.
   · Nada abaixo de 12px. Alvo de toque 44px.
   · Manchester mantém as cores OFICIAIS DO PROTOCOLO — o coral da marca não
     substitui o vermelho do Manchester (design system §4.4).

   FONTES: sem CDN, por decisão de hospedagem e porque o CSP do .htaccess é
   default-src 'self'. A pilha usa as substitutas declaradas no design system.
   Para ter Archivo/Inter/IBM Plex Mono de verdade, suba os .woff2 em /fontes/
   e descomente o bloco @font-face no fim deste arquivo — nada mais muda.
   ========================================================================== */

:root{
  /* ===== 1. Paleta base (idba-tokens.css) ===== */
  --idba-blue-900:#0C2740; --idba-blue-700:#123A5A; --idba-blue-500:#2A5C86; --idba-blue-100:#E6EDF3;
  --idba-green-800:#0E6E52; --idba-green-600:#17A67C; --idba-green-100:#DFF1E9;
  --idba-sand-50:#F6F3EC; --idba-sand-100:#EFEBE1; --idba-sand-200:#E2DDD1; --idba-white:#FFFFFF;
  --idba-graphite-900:#1B1F24; --idba-graphite-600:#4A4A44; --idba-graphite-400:#5C5C55; --idba-graphite-300:#8C8C84;
  --idba-amber-800:#7A5308; --idba-amber-500:#E0A03A; --idba-amber-100:#F9EBD2;
  --idba-coral-800:#8C2E1F; --idba-coral-500:#C24634; --idba-coral-100:#F7E0DB;

  /* ===== 2. Tokens semânticos ===== */
  --bg-page:var(--idba-sand-50); --bg-surface:var(--idba-white); --bg-surface-muted:var(--idba-sand-100);
  --bg-topbar:var(--idba-blue-700); --bg-selected:var(--idba-blue-100); --bg-overlay:rgba(27,31,36,.45);
  --text-primary:var(--idba-graphite-900); --text-secondary:var(--idba-graphite-600);
  --text-muted:var(--idba-graphite-400); --text-disabled:var(--idba-graphite-300);
  --text-on-dark:var(--idba-sand-50); --text-link:var(--idba-blue-700);
  --border-default:var(--idba-sand-200); --border-strong:var(--idba-graphite-300); --border-focus:var(--idba-blue-700);
  --action-primary:var(--idba-green-600); --action-primary-hover:var(--idba-green-800); --action-primary-text:var(--idba-white);
  --action-secondary:var(--idba-blue-700); --action-secondary-hover-bg:var(--idba-blue-100);
  --action-danger:var(--idba-coral-500); --action-danger-hover:var(--idba-coral-800);
  --status-ok-bg:var(--idba-green-100); --status-ok-fg:var(--idba-green-800);
  --status-wait-bg:var(--idba-amber-100); --status-wait-fg:var(--idba-amber-800);
  --status-critical-bg:var(--idba-coral-100); --status-critical-fg:var(--idba-coral-800);
  --status-neutral-bg:var(--idba-blue-100); --status-neutral-fg:var(--idba-blue-900);
  --status-inactive-bg:var(--idba-sand-100); --status-inactive-fg:var(--idba-graphite-400);
  --focus-ring:0 0 0 3px rgba(42,92,134,.35);

  /* ===== 3. Tipografia ===== */
  --font-heading:"Archivo","Segoe UI",Arial,sans-serif;
  --font-body:"Inter",system-ui,"Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
  --type-h1:500 24px/32px var(--font-heading);
  --type-h2:500 20px/28px var(--font-heading);
  --type-h3:500 16px/24px var(--font-body);
  --type-body:400 15px/24px var(--font-body);
  --type-small:400 13px/20px var(--font-body);
  --type-caption:400 12px/16px var(--font-body);
  --type-metric:500 28px/32px var(--font-body);
  --type-mono:400 14px/20px var(--font-mono);

  /* ===== 4. Espaço e forma ===== */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --border-width:1px; --shadow-popover:0 4px 16px rgba(27,31,36,.12);
  --topbar-height:56px; --control-height:40px; --control-height-touch:44px; --content-max:1280px;
  --duration-fast:120ms; --duration-base:200ms;

  /* ===== 5. Manchester — cores OFICIAIS do protocolo (não são da marca) ===== */
  --m-amarelo-texto:#231B00; --m-vermelho:#C62828; --m-laranja:#B5470F; --m-amarelo:#F2B705; --m-verde:#2E7D32; --m-azul:#1565C0;
}

/* ===== 6. Base ============================================================ */
*{box-sizing:border-box}
html{background:var(--bg-page);color:var(--text-primary)}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--type-body);
  font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased}
h1{font:var(--type-h1);color:var(--text-primary);margin:0 0 var(--space-4)}
h2{font:var(--type-h2);color:var(--text-primary);margin:var(--space-6) 0 var(--space-2)}
h3{font:var(--type-h3);color:var(--text-primary);margin:var(--space-4) 0 var(--space-2)}
a{color:var(--text-link)}
p{margin:0 0 var(--space-3)}
small,.suave{font:var(--type-small);color:var(--text-muted)}
code,.mono{font:var(--type-mono)}
main{max-width:var(--content-max);margin:0 auto;padding:var(--space-6)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== 7. Barra superior ================================================== */
.faixa-dev{background:var(--idba-amber-100);color:var(--idba-amber-800);text-align:center;
  padding:var(--space-2) var(--space-4);font:500 13px/20px var(--font-body);
  border-bottom:var(--border-width) solid var(--idba-amber-500)}
.topo{min-height:var(--topbar-height);background:var(--bg-topbar);color:var(--text-on-dark);
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);
  flex-wrap:wrap;position:sticky;top:0;z-index:20}
.topo .marca{display:inline-flex;align-items:center;gap:var(--space-2);
  font:500 17px/1.2 var(--font-heading);letter-spacing:.01em;white-space:nowrap}
.topo .marca .marca-sobrenome{font:400 13px/1.2 var(--font-heading);letter-spacing:.08em;opacity:.75}
.topo .marca svg{display:block;flex:none}
.navprincipal{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.navprincipal a{color:var(--text-on-dark);text-decoration:none;padding:0 var(--space-3);
  border-radius:var(--radius-md);min-height:var(--control-height-touch);
  display:inline-flex;align-items:center;font:400 15px/1 var(--font-body)}
.navprincipal a:hover{background:rgba(246,243,236,.14)}
.navprincipal a.ativo{background:var(--bg-selected);color:var(--idba-blue-900);font-weight:500}
.topo .unidade-atual{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--type-small);color:var(--text-on-dark)}
.seletor-unidade select{background:transparent;color:var(--text-on-dark);
  border:1.5px solid var(--text-on-dark);border-radius:var(--radius-md);
  padding:0 var(--space-2);min-height:36px;font:400 14px/1 var(--font-body)}
.seletor-unidade select option{color:var(--text-primary)}
.topo .quem{font:var(--type-small);color:var(--text-on-dark);white-space:nowrap}
.topo .quem a{color:var(--text-on-dark)}

/* Barra de alergia: banner crítico persistente (cor + ícone + texto) */
.barra-alergia{background:var(--status-critical-bg);color:var(--status-critical-fg);
  border-bottom:2px solid var(--action-danger);padding:var(--space-2) var(--space-4);
  font:500 15px/24px var(--font-body);position:sticky;top:var(--topbar-height);z-index:19}

/* ===== 8. Superfícies ===================================================== */
fieldset{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-lg);margin:0 0 var(--space-4);padding:var(--space-4) var(--space-6);min-width:0}
legend{font:var(--type-h3);padding:0 var(--space-2);color:var(--text-primary)}
.card,.cartao{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6)}
.cartoes{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cartao.livre{border-left:4px solid var(--action-primary)}
.cartao.ocupado{border-left:4px solid var(--action-danger)}
.cartao.inativo{background:var(--bg-surface-muted);color:var(--text-muted)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin:0 0 var(--space-6)}
.kpi div{background:var(--bg-surface-muted);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.kpi b{display:block;font:var(--type-metric);font-feature-settings:"tnum" 1;color:var(--text-primary)}
.vazio{background:var(--bg-surface);border:var(--border-width) dashed var(--border-default);
  border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;color:var(--text-secondary)}

/* ===== 9. Tabelas ========================================================= */
table{border-collapse:collapse;width:100%;background:var(--bg-surface);
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden}
caption{text-align:left;font:var(--type-h3);padding:var(--space-2) 0;color:var(--text-secondary)}
th{background:var(--bg-surface-muted);text-align:left;font:500 13px/20px var(--font-body);
  color:var(--text-secondary);text-transform:none;letter-spacing:0}
th,td{padding:var(--space-3);border-bottom:var(--border-width) solid var(--border-default);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr:hover td{background:var(--bg-page)}
tr.critico td{background:var(--status-critical-bg)}
td.num{text-align:right;font-feature-settings:"tnum" 1}
td.id,.id{font:var(--type-mono);color:var(--text-secondary)}

/* ===== 10. Formulários ==================================================== */
label{display:inline-block;margin:0 0 var(--space-1);font:500 14px/20px var(--font-body);color:var(--text-primary)}
/* ATENCAO: Borda de CAMPO usa --border-strong, não --border-default: a borda areia do
   design system mede 1,36:1 contra o branco e reprova no critério 1.4.11 (3:1
   para componente de interface). Grafite dá 3,39:1 com a mesma discrição.
   Divisores e bordas de card seguem com a areia — ali o critério não se aplica. */
input,select,textarea{padding:0 var(--space-3);border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-md);font:var(--type-body);color:var(--text-primary);
  background:var(--bg-surface);min-height:var(--control-height);max-width:100%}
input[type=checkbox],input[type=radio]{min-height:auto;width:18px;height:18px;accent-color:var(--idba-blue-700)}
textarea{width:100%;min-height:96px;padding:var(--space-2) var(--space-3);font-family:var(--font-body);line-height:24px}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--border-focus);outline:none;box-shadow:var(--focus-ring)}
input[type=date],input[type=datetime-local],input[inputmode=numeric],.mono-input{font:var(--type-mono)}
::placeholder{color:var(--text-muted);opacity:1}
.grade{display:grid;gap:var(--space-3) var(--space-4);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
form.inline{display:inline}
.rot,.field-label{display:block;font:500 14px/20px var(--font-body);margin-bottom:var(--space-1)}
/* Rótulo de rádio/caixa em linha: alvo de toque de 44px na LINHA inteira, não
   só no quadradinho de 18px (WCAG 2.5.5 — dedo em plantão, não mouse). */
label.inline{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-height-touch);
  margin:0 var(--space-4) 0 0;font-weight:400;cursor:pointer}

/* ===== 11. Botões ========================================================= */
/* Primário (verde pulso): o <button> solto de um formulário. UM por tela. */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-height-touch);padding:0 var(--space-4);border-radius:var(--radius-md);
  border:1.5px solid transparent;background:var(--action-primary);color:var(--action-primary-text);
  font:500 15px/1 var(--font-body);cursor:pointer;text-decoration:none;
  transition:background var(--duration-fast),transform var(--duration-fast)}
button:hover,.btn:hover{background:var(--action-primary-hover)}
button:active,.btn:active{transform:scale(.98)}
/* Secundário: contorno azul. É o padrão de TODA ação de apoio. */
button.sec,.btn-secondary{background:transparent;color:var(--action-secondary);border-color:var(--action-secondary)}
button.sec:hover,.btn-secondary:hover{background:var(--action-secondary-hover-bg)}
/* Destrutivo: contorno coral-500 (cor da marca) e RÓTULO em coral-800.
   ATENCAO: Medido: coral-500 sobre areia calma dá 4,49:1 — reprova em AA por pouco.
   O escuro dá 7,50:1 e mantém a mesma leitura visual. */
button.perigo,.btn-danger{background:transparent;color:var(--action-danger-hover);border-color:var(--action-danger)}
button.perigo:hover,.btn-danger:hover{background:var(--status-critical-bg)}
/* ATENCAO: REGRA DO VERDE ÚNICO, aplicada pelo CSS: ação de linha de tabela, de barra
   de ações e de formulário embutido é APOIO — vira secundária sozinha. Sem isto,
   uma fila com 20 pacientes teria 20 botões verdes e o verde deixaria de dizer
   "a ação desta tela". Para forçar o verde num desses lugares: class="destaque". */
td button:not(.perigo):not(.destaque),
.acoes button:not(.perigo):not(.destaque),
form.inline button:not(.perigo):not(.destaque),
.abas button:not(.perigo):not(.destaque){
  background:transparent;color:var(--action-secondary);border-color:var(--action-secondary)}
td button:not(.perigo):not(.destaque):hover,
.acoes button:not(.perigo):not(.destaque):hover,
form.inline button:not(.perigo):not(.destaque):hover{background:var(--action-secondary-hover-bg)}
button[disabled]{background:var(--bg-surface-muted);color:var(--text-disabled);
  border-color:var(--border-default);cursor:wait}
.acoes{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-4) 0}
td.acoes{margin:0}

/* ===== 12. Mensagens (cor + ícone + texto — nunca só cor) ================= */
.erro-box,.ok-box,.aviso-box,.ok-msg{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  margin:var(--space-3) 0;font:var(--type-body);display:flex;gap:var(--space-2);align-items:flex-start;
  border:var(--border-width) solid transparent}
.erro-box::before,.ok-box::before,.aviso-box::before,.ok-msg::before{flex:none;font-size:16px;line-height:24px}
.erro-box{background:var(--status-critical-bg);color:var(--status-critical-fg);border-color:var(--action-danger)}
.erro-box::before{content:"\26A0"}
.ok-box,.ok-msg{background:var(--status-ok-bg);color:var(--status-ok-fg);border-color:var(--idba-green-600)}
.ok-box::before,.ok-msg::before{content:"\2713"}
.aviso-box{background:var(--status-wait-bg);color:var(--status-wait-fg);border-color:var(--idba-amber-500)}
.aviso-box::before{content:"!"}

/* ===== 13. Chips e selos ================================================== */
.selo{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:0 10px;
  border-radius:var(--radius-md);font:500 12px/16px var(--font-body);
  background:var(--status-neutral-bg);color:var(--status-neutral-fg)}
.selo.cinza{background:var(--status-inactive-bg);color:var(--status-inactive-fg)}
/* Manchester: chip com a cor OFICIAL do protocolo + o nome por extenso. */
.bd{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--radius-md);
  font:500 12px/16px var(--font-body);letter-spacing:.02em;color:var(--idba-white);text-transform:none}
.bd-VERMELHO{background:var(--m-vermelho)}
.bd-LARANJA{background:var(--m-laranja)}
.bd-AMARELO{background:var(--m-amarelo);color:var(--m-amarelo-texto)}
.bd-VERDE{background:var(--m-verde)}
.bd-AZUL{background:var(--m-azul)}
.bd-none{background:var(--status-inactive-bg);color:var(--idba-graphite-600);
  border:var(--border-width) dashed var(--border-strong)}
.estourado{color:var(--status-critical-fg);font-weight:500}
.escore-det{font:var(--type-small);color:var(--text-secondary)}
.escore-ALTO{color:var(--status-critical-fg);font-weight:500}
.escore-MEDIO{color:var(--status-wait-fg);font-weight:500}
.escore-BAIXO{color:var(--status-ok-fg);font-weight:500}
.catalogo-vazio{font:var(--type-small);color:var(--status-wait-fg)}

/* ===== 14. Abas =========================================================== */
.abas{display:flex;gap:var(--space-1);border-bottom:var(--border-width) solid var(--border-default);
  margin:0 0 var(--space-6);flex-wrap:wrap}
.abas a{padding:0 var(--space-4);min-height:var(--control-height-touch);display:inline-flex;align-items:center;
  text-decoration:none;color:var(--text-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0;
  font:400 15px/1 var(--font-body)}
.abas a:hover{background:var(--bg-surface-muted)}
.abas a.ativa{background:var(--bg-surface);color:var(--text-link);font-weight:500;
  border:var(--border-width) solid var(--border-default);border-bottom-color:var(--bg-surface);margin-bottom:-1px}

/* ===== 15. Seleção de unidade (cartões) =================================== */
.unidades{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cartao-unidade{display:block;width:100%;text-align:left;background:var(--bg-surface);
  color:var(--text-primary);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);min-height:96px;font:var(--type-body)}
.cartao-unidade:hover{background:var(--bg-selected);border-color:var(--action-secondary)}
.cartao-unidade b{display:block;font:var(--type-h3);margin-bottom:var(--space-1)}
.cartao-unidade small{display:block;color:var(--text-muted)}
.cartao-unidade .abrir{display:inline-block;margin-top:var(--space-2);color:var(--text-link);font-weight:500}

/* ===== 16. Autocomplete de catálogo (js/busca.js) ========================= */
.ac-lista{position:absolute;z-index:40;left:0;right:0;top:100%;background:var(--bg-surface);
  border:var(--border-width) solid var(--border-default);border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:var(--shadow-popover);max-height:16em;overflow:auto;min-width:22em}
.ac-item{padding:var(--space-2) var(--space-3);cursor:pointer;font:var(--type-body);
  border-bottom:var(--border-width) solid var(--border-default)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.sel{background:var(--bg-selected)}

/* ===== 17. Login (design system §5.2) ===================================== */
.login-tela{min-height:100vh;display:grid;place-items:center;padding:var(--space-6);background:var(--bg-page)}
.login-card{width:100%;max-width:400px;background:var(--bg-surface);
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-8)}
.login-card .assinatura{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.login-card .assinatura b{display:block;font:500 20px/24px var(--font-heading);color:var(--idba-blue-700)}
.login-card .assinatura span{display:block;font:400 13px/16px var(--font-heading);
  letter-spacing:.08em;color:var(--text-secondary)}
.login-campo{margin-bottom:var(--space-4)}
.login-campo input{width:100%}
.login-senha-wrap{display:flex;gap:var(--space-2)}
.login-senha-wrap input{flex:1;min-width:0}
.login-mostrar{flex:none;background:transparent;color:var(--action-secondary);border-color:transparent;
  padding:0 var(--space-3);font:500 14px/1 var(--font-body)}
.login-mostrar:hover{background:var(--action-secondary-hover-bg)}
.login-entrar{width:100%}
.login-apoio{margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:var(--border-width) solid var(--border-default);font:var(--type-small);color:var(--text-secondary)}
.login-apoio a{color:var(--text-link)}
.login-rodape{margin-top:var(--space-2);font:var(--type-caption);color:var(--text-muted)}
/* Ligação para o site institucional: link fantasma (terciário) — o único verde
   da tela é "Entrar". Alvo de toque garantido pela linha inteira. */
.login-site{display:inline-flex;align-items:center;min-height:var(--control-height-touch);
  font-weight:500;text-decoration:none;color:var(--text-link)}
.login-site:hover{text-decoration:underline}

/* ===== 18. Painel de TV — fora do design system de interface ==============
   A TV é lida a 6 metros: tipografia em vw e fundo escuro são requisito de
   legibilidade, não escolha estética. O painel traz o próprio estilo inline. */

/* ===== 19. Impressão ====================================================== */
@media print{
  .topo,.navprincipal,.faixa-dev,.no-print,button,.abas{display:none!important}
  body{background:#fff}
  main{max-width:none;margin:0;padding:0}
  fieldset,table,.cartao{border-color:#999;break-inside:avoid}
}

/* ===== 20. Responsivo ===================================================== */
@media (max-width:1023px){
  main{padding:var(--space-4)}
  .topo{gap:var(--space-2)}
  .topo .unidade-atual{margin-left:0}
}
@media (max-width:767px){
  /* 19/08/2026: a barra deixou de rolar na horizontal e passou a QUEBRAR linha —
     com o menu suspenso (Administração), painel dentro de área com overflow
     ficava cortado; quebrando, nada some fora da tela e o painel abre inteiro. */
  .navprincipal{width:100%;flex-wrap:wrap}
  .topo .quem{width:100%}
  table{display:block;overflow-x:auto}
}

/* ===== 21. Fontes próprias (R3 rodada 2 — ATIVAS em 21/08/2026) ===========
   Dez arquivos, não cinco: o subset exigido é latin + latin-ext, e eles vêm
   em .woff2 SEPARADOS com unicode-range — o navegador baixa o -ext só se a
   página tiver um caractere dele (raro em pt-BR; ã/ç/é estão no latin). É o
   mesmo resultado do "um arquivo com os dois subsets", com menos bytes no
   caminho comum. font-display:swap: texto aparece já, na substituta, e troca
   quando a fonte chega — nada some. Sem os arquivos, a pilha cai nas
   substitutas do design system e NADA quebra. */
@font-face{font-family:"Archivo";src:url(fontes/archivo-500.woff2) format("woff2");font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(fontes/archivo-500-ext.woff2) format("woff2");font-weight:500;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url(fontes/archivo-600.woff2) format("woff2");font-weight:600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(fontes/archivo-600-ext.woff2) format("woff2");font-weight:600;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(fontes/inter-400.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(fontes/inter-400-ext.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(fontes/inter-500.woff2) format("woff2");font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(fontes/inter-500-ext.woff2) format("woff2");font-weight:500;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(fontes/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url(fontes/plexmono-400-ext.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== 22. Formulário de cadastro individual (e-SUS) ======================
   Grade de 4 colunas como na ficha oficial; .col2/.col3/.col4 ocupam mais.
   Em telas estreitas vira 2 colunas e depois 1 — o dedo do plantão agradece. */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3) var(--space-4);align-items:end}
.grid>label,.grid>div{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.grid>label>input,.grid>label>select,.grid>label>textarea,.grid>div>input,.grid>div>select{width:100%}
.grid .col2{grid-column:span 2}.grid .col3{grid-column:span 3}.grid .col4{grid-column:1/-1}
.grid .rot{margin:0}
.grid .radios{display:flex;gap:var(--space-4);flex-wrap:wrap;min-height:var(--control-height)}
.grid label.inline{flex-direction:row;align-items:center;min-height:var(--control-height);align-self:end;font-weight:400}
.linha{display:flex;gap:var(--space-2);align-items:center}
.linha input{flex:1;min-width:0}
.ob{color:var(--action-danger);font-weight:500}
.bloqueio{border-color:var(--idba-amber-500);background:var(--status-wait-bg)}
.bloqueio legend{color:var(--status-wait-fg)}
.dica{font:var(--type-caption);color:var(--text-muted);margin:0}
input.invalido,select.invalido{border-color:var(--action-danger);border-width:2px}
.campo-msg{font:var(--type-small);margin:2px 0 0}
.campo-msg.erro{color:var(--status-critical-fg)}
.campo-msg.ok{color:var(--status-ok-fg)}
.campo-msg.achado{color:var(--status-wait-fg)}
@media (max-width:1023px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid .col3,.grid .col2{grid-column:span 2}}
@media (max-width:600px){.grid{grid-template-columns:1fr}.grid .col2,.grid .col3{grid-column:auto}}

/* ===== 23. Selos de estado (não-Manchester) ============================== */
.selo.ok{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.selo.aviso{background:var(--status-wait-bg);color:var(--status-wait-fg)}
.selo.critico{background:var(--status-critical-bg);color:var(--status-critical-fg)}
details summary{cursor:pointer;color:var(--text-link)}

/* ===== 24. Cabeçalho: unidade única · Cadastro: novo recolhido ============ */
.unidade-unica{display:block;font:var(--type-caption);opacity:.8;max-width:28em}
details>summary::-webkit-details-marker{display:none}
details>summary.btn{cursor:pointer}
details[open]>summary.btn{margin-bottom:var(--space-2)}

/* ===== 25. Sugestões da busca de pacientes ================================ */
.sugestoes{position:absolute;top:100%;left:0;right:0;z-index:30;background:var(--bg-surface);
 border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);
 max-height:320px;overflow:auto;margin-top:4px}
.sug-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border-default);
 padding:10px 14px;font:var(--type-body);color:var(--text-primary);cursor:pointer;min-height:44px}
.sug-item:last-child{border-bottom:0}
.sug-item:hover,.sug-item.sel{background:var(--bg-surface-muted)}
.sug-item b{font-weight:500}

/* ===== 26. Menu suspenso do topo (Administração) ==========================
   19/08/2026 (decisão do gestor): Leitos, Faturamento, Relatórios, Auditoria e
   Migrações saem da barra e viram submenu de Administração, junto com
   Gerenciamento da unidade (o antigo item Administração) e Meu cadastro.
   É <details>/<summary>: abre e fecha SEM JavaScript (o script do ui_top só
   acrescenta o fechar-ao-clicar-fora). Sombra permitida: é popover. */
.navprincipal details.menu-grupo{position:relative;display:inline-flex}
.navprincipal details.menu-grupo>summary{list-style:none;display:inline-flex;align-items:center;
  gap:6px;color:var(--text-on-dark);padding:0 var(--space-3);min-height:44px;
  border-radius:var(--radius-sm);font:var(--type-body);cursor:pointer;user-select:none;white-space:nowrap}
.navprincipal details.menu-grupo>summary::-webkit-details-marker{display:none}
.navprincipal details.menu-grupo>summary:hover,
.navprincipal details[open].menu-grupo>summary{background:rgba(246,243,236,.14)}
.navprincipal details.menu-grupo>summary.ativo{background:var(--bg-selected);
  color:var(--idba-blue-900);font-weight:500}
/* R3 rodada 3: a seta do menu virou SVG (o glifo de seta em 10px violava o piso de
   12px — o ícone dimensiona por atributo, e o piso volta a valer no CSS). */
.navprincipal details.menu-grupo .seta{display:inline-flex;opacity:.85;transition:transform var(--duration-fast)}
.navprincipal details[open].menu-grupo .seta{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.navprincipal details.menu-grupo .seta{transition:none}}
.menu-suspenso{position:absolute;top:100%;left:0;z-index:60;min-width:17em;
  padding:var(--space-1) 0;margin-top:2px;background:var(--bg-surface);
  border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-popover)}
.menu-suspenso a{display:flex;align-items:center;min-height:44px;
  padding:var(--space-2) var(--space-4);color:var(--text-primary);
  text-decoration:none;font:var(--type-body)}
.menu-suspenso a:hover{background:var(--bg-selected)}
.menu-suspenso a.ativo{background:var(--bg-selected);color:var(--idba-blue-900);font-weight:500}

/* ===== 27. "Alterar unidade" (usuário lotado numa unidade só) =============
   19/08/2026: a explicação saiu do cabeçalho fixo — agora mora num popover que
   só aparece ao clicar no botão. Contraste do popover: grafite sobre branco. */
.alterar-unidade{position:relative;display:inline-block}
.alterar-unidade>summary{list-style:none;cursor:pointer;font:var(--type-small);
  color:var(--text-on-dark);border:1px solid rgba(246,243,236,.55);
  border-radius:var(--radius-sm);padding:5px 12px;user-select:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:32px}
.alterar-unidade>summary::-webkit-details-marker{display:none}
.alterar-unidade>summary:hover{background:rgba(246,243,236,.14)}
.alterar-unidade .popover-topo{position:absolute;top:100%;right:0;z-index:60;
  margin-top:4px;width:min(24em,calc(100vw - 24px));background:var(--bg-surface);
  color:var(--text-primary);font:var(--type-small);
  border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-popover);
  padding:var(--space-3) var(--space-4)}
@media (max-width:767px){
  .alterar-unidade .popover-topo{right:auto;left:0}
}

/* ===== Prontuário do paciente (prontuario.php, 19/08/2026) =====
   Linha do tempo em <details>: um cartão por atendimento, o mais recente já
   aberto. Sem sombra (não é popover); a hierarquia vem de borda + superfície.
   O sumário é alvo de toque ≥44px como todo controle da casa. */
.prontuario-item{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);margin:var(--space-3) 0}
.prontuario-item>summary{list-style:none;cursor:pointer;min-height:44px;
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);font:var(--type-body)}
.prontuario-item>summary::-webkit-details-marker{display:none}

.prontuario-item>summary:hover{background:var(--bg-surface-muted)}
.prontuario-item[open]>summary{border-bottom:var(--border-width) solid var(--border-default)}
.prontuario-corpo{padding:var(--space-3) var(--space-4)}
.prontuario-corpo ul{margin:var(--space-1) 0 var(--space-3);padding-left:1.4em}
.prontuario-soap{border-left:3px solid var(--idba-blue-100);
  padding-left:var(--space-3);margin:var(--space-3) 0}
.prontuario-campo{margin:var(--space-1) 0}

/* Nome do usuário no topo = atalho para Meu cadastro (19/08/2026).
   Sublinhado só no hover: no azul do topo, link permanente sublinhado viraria
   ruído; o title e o cursor dizem que é clicável. */
.topo .quem a.quem-link{text-decoration:none}
.topo .quem a.quem-link:hover{text-decoration:underline}

/* ===== Ferramentas recolhidas do Gerenciamento da unidade (19/08/2026) =====
   Mesmo padrão visual da linha do tempo do prontuário: <details> em cartão,
   sumário = título da ferramenta (alvo ≥44px), conteúdo só quando expandido. */
.ferramenta{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);margin:var(--space-4) 0}
.ferramenta>summary{list-style:none;cursor:pointer;min-height:48px;
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);font:500 17px/24px var(--font-body)}
.ferramenta>summary::-webkit-details-marker{display:none}

.ferramenta>summary:hover{background:var(--bg-surface-muted)}
.ferramenta[open]>summary{border-bottom:var(--border-width) solid var(--border-default)}
.ferramenta>.corpo{padding:var(--space-3) var(--space-4)}
.ferramenta>summary .selo,.ferramenta>summary b.estourado{margin-left:auto;font:var(--type-small)}

/* selo âmbar (alerta preventivo: faixa quase no fim, tentativas negadas) */
.selo.ambar{background:var(--idba-amber-100);color:var(--idba-amber-800)}

/* tags de unidade na grade de funcionários */
.tags span{display:inline-block;background:var(--bg-selected);color:var(--idba-blue-700);
  border-radius:999px;padding:1px 10px;margin:1px 4px 1px 0;font:var(--type-small)}

/* barra de progresso do consumo da faixa (sem sombra; borda + preenchimento) */
.prog{background:var(--bg-surface-muted);border:var(--border-width) solid var(--border-default);
  border-radius:999px;height:14px;min-width:120px;overflow:hidden}
.prog>i{display:block;height:100%;background:var(--idba-green-600)}
.prog.cheia>i{background:var(--idba-coral-500)}

/* ===== Configurador do painel (19/08/2026): prévia ao vivo e toast ========
   A prévia é um mockup em miniatura da TV — as cores/fonte vêm por JS
   conforme a pessoa mexe; a TV real só muda no Salvar. */
.tv-previa{border-radius:var(--radius-md);border:var(--border-width) solid var(--border-default);
  padding:18px 22px;max-width:520px;background:var(--idba-blue-900);color:var(--idba-sand-50);
  display:flex;flex-direction:column;gap:4px;line-height:1.15}
.tv-previa .tvp-rot{font-size:13px;letter-spacing:.14em;opacity:.85}
.tv-previa .tvp-nome{font-size:30px;font-weight:800}
.tv-previa .tvp-loc{font-size:22px;font-weight:700}
.tv-previa .tvp-rodape{display:flex;justify-content:space-between;font-size:12px;opacity:.7;margin-top:10px}
.toastzinho{font:var(--type-small);border-radius:999px;padding:2px 12px}
.toastzinho.ok{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.toastzinho.erro{background:var(--status-critical-bg);color:var(--status-critical-fg)}

/* ===== Ajuda/FAQ (20/08/2026) ============================================ */
/* botão flutuante "?": pequeno, canto, meio transparente até o hover —
   não cobre ação (espec. §B.1) */
.ajuda-fab{position:fixed;right:14px;bottom:14px;z-index:40;width:40px;height:40px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--idba-blue-700);color:var(--idba-white);font:500 20px/1 var(--font-body);
  text-decoration:none;opacity:.45;transition:opacity .15s;box-shadow:none}
.ajuda-fab:hover,.ajuda-fab:focus{opacity:1;text-decoration:none}
@media print{.ajuda-fab{display:none}}
.faq-item{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-sm);margin:6px 0}
.faq-item>summary{cursor:pointer;padding:10px 14px;font-weight:500;min-height:44px;display:flex;align-items:center}
.faq-item>.corpo,.faq-item>p{padding:0 14px 10px}
.aj-card{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);padding:10px 14px;margin:10px 0}
.aj-resposta{background:var(--status-ok-bg);color:var(--status-ok-fg);
  border-radius:var(--radius-sm);padding:8px 12px;margin:6px 0}
.ajuda-login{margin-top:8px}
.ajuda-login>summary{cursor:pointer;font-weight:500;min-height:44px;display:flex;align-items:center;justify-content:center}
.ajuda-login label{display:block;margin:6px 0}
.ajuda-login input,.ajuda-login textarea{width:100%}

/* ===== Impressão de relatórios da Farmácia e afins (20/08) ================
   PDF = impressão do navegador (a espec. veta mPDF/TCPDF em hospedagem
   compartilhada). Esconde navegação e formulários; tabela inteira sai. */
@media print{
  header.topo,.abas,.acoes,fieldset form,.aviso-box button,.ajuda-fab,nav,
  .filtros,button,form.inline{display:none !important}
  fieldset{border:none;padding:0}
  table{font-size:11px;width:100%}
  tr{break-inside:avoid}
  caption{font-weight:500;text-align:left;margin-bottom:6px}
  @page{size:A4 landscape;margin:12mm}
}

/* Ferramenta "Movimentar" recolhida por linha (Farmácia, 20/08) — mesmo
   espírito das ferramentas do gerenciamento: fechada não estorva; aberta
   expande logo abaixo do botão, com o item já travado.
   R3 §1: nasceu com tokens de um design system ANTERIOR com reserva embutida
   (#e8f0fe/#f4f4f4 — paleta de outro aplicativo). Reescrita nos tokens da
   casa, SEM valor de reserva: se um token sumir, o defeito aparece em vez de
   divergir em silêncio. Peso 600->500 (escala autorizada). */
.mov-cel summary{cursor:pointer;display:inline-block;padding:4px 10px;border:1px solid var(--border-strong);
  border-radius:var(--radius-md);background:var(--bg-surface-muted);font-weight:500;list-style:none}
.mov-cel summary::-webkit-details-marker{display:none}
.mov-cel[open] summary{background:var(--bg-selected);color:var(--text-link)}
.mov-cel .mov-caixa{margin-top:8px;padding:10px;border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--bg-surface);min-width:min(560px,72vw);text-align:left}

/* Ícones SVG da casa (R3 rodada 1) — herdam a cor do texto e alinham à linha */
svg.icone{vertical-align:-0.15em}


/* ===== 24. Componente recolhível — base ÚNICA (R3 §5, rodada 4) ============
   <details> é o padrão de interação da casa: menu, ferramenta, registro e
   popover. 23 elementos em 9 arquivos tinham OITO implementações — oito
   comportamentos de foco e oito alvos de toque. UMA base; as classes atuais
   ficam como ALIAS até a conversão terminar (migração sem risco), e só a
   variante popover carrega sombra — as demais usam borda e superfície.
   O marcador é o ícone 'expandir' (SVG) que GIRA ao abrir — os ::before com
   glifo '>' morreram junto com a rodada 3. */
.recolhivel>summary, .ferramenta>summary, .mov-cel>summary,
.prontuario-item>summary, .faq-item>summary, .ajuda-login>summary{
  list-style:none;cursor:pointer;user-select:none;min-height:var(--control-height-touch)}
.recolhivel>summary::-webkit-details-marker, .ferramenta>summary::-webkit-details-marker,
.prontuario-item>summary::-webkit-details-marker, .faq-item>summary::-webkit-details-marker,
.ajuda-login>summary::-webkit-details-marker{display:none}
.recolhivel>summary:focus-visible, .ferramenta>summary:focus-visible,
.mov-cel>summary:focus-visible, .prontuario-item>summary:focus-visible,
.faq-item>summary:focus-visible, .ajuda-login>summary:focus-visible{
  box-shadow:var(--focus-ring);border-radius:var(--radius-md);outline:none}
.recolhivel>summary .expandir, .ferramenta>summary .expandir,
.prontuario-item>summary .expandir, .faq-item>summary .expandir,
.ajuda-login>summary .expandir{display:inline-flex;flex:none;color:var(--text-muted);
  margin-right:6px;transition:transform var(--duration-fast)}
.recolhivel[open]>summary .expandir, .ferramenta[open]>summary .expandir,
.prontuario-item[open]>summary .expandir, .faq-item[open]>summary .expandir,
.ajuda-login[open]>summary .expandir{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .recolhivel>summary .expandir, .ferramenta>summary .expandir,
  .prontuario-item>summary .expandir, .faq-item>summary .expandir,
  .ajuda-login>summary .expandir{transition:none}}

/* Subtítulo de tela (R3 §6, rodada 5): uma linha, cor secundária, cola no h1 */
.subtitulo{margin:-6px 0 14px;color:var(--text-secondary);font:var(--type-small)}

/* Máscara viva dos sinais vitais (21/08): aviso do que foi interpretado e
   âmbar no implausível — o servidor continua sendo quem recusa. */
.vital-aviso{display:block;color:var(--text-secondary);font:var(--type-caption);min-height:1em}
.campo-implausivel{border-color:var(--m-laranja) !important;background:var(--status-wait-bg)}

/* ===== Triagem reorganizada (21/08 — pedido do gestor) =====================
   Cabeçalho-cartão do paciente com o prontuário a um clique; alergias ativas
   em barra (alerta escondido não alerta); vitais em grade com unidade no
   rótulo; Manchester em CARTÕES nas cores OFICIAIS (que não mudam — §8.2),
   com nome e tempo-alvo: escolher risco vira apontar, não decifrar. */
.tg-paciente{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3)}
.tg-nome{font:var(--type-h2)}
.tg-meta{color:var(--text-secondary);font:var(--type-small)}
.tg-alergias{background:var(--status-critical-bg);color:var(--status-critical-fg);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}
.tg-sec{margin-bottom:var(--space-4)}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-3)}
.tg-grid label{display:block;margin-bottom:2px}
.tg-grid input,.tg-grid select{width:100%}
.mch-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-2)}
.mch{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  border:2px solid var(--border-default);border-radius:var(--radius-md);
  padding:var(--space-3);text-align:center;min-height:var(--control-height-touch)}
.mch input{position:absolute;opacity:0;pointer-events:none}
.mch b{font:var(--type-h3)}
.mch-alvo{font:var(--type-caption);opacity:.85}
.mch:has(input:checked){outline:3px solid var(--idba-blue-700);outline-offset:2px}
.mch:focus-within{box-shadow:var(--focus-ring)}
.mch-VERMELHO{background:var(--m-vermelho);color:var(--idba-white)}
.mch-LARANJA{background:var(--m-laranja);color:var(--idba-white)}
.mch-AMARELO{background:var(--m-amarelo);color:var(--m-amarelo-texto)}
.mch-VERDE{background:var(--m-verde);color:var(--idba-white)}
.mch-AZUL{background:var(--m-azul);color:var(--idba-white)}

/* Barra "Meu consultório" (21/08): a escolha do médico antes de chamar */
.cons-barra{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}

/* Janela lateral do prontuário na triagem (21/08) + destino após a triagem */
.drawer[hidden]{display:none} /* 21/08: display:flex vencia o hidden — o
  painel nascia aberto e o Fechar parecia morto (o JS escondia, o CSS reabria) */
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,92vw);z-index:60;
  background:var(--bg-page);border-left:var(--border-width) solid var(--border-default);
  box-shadow:-8px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column}
.drawer-topo{display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-2) var(--space-3);border-bottom:var(--border-width) solid var(--border-default);
  background:var(--bg-surface)}
.drawer iframe{flex:1;width:100%;border:0}
.tg-destino{display:flex;flex-direction:column;gap:var(--space-2)}
/* modo embutido do prontuário (drawer da triagem): só a linha do tempo */
body.painel-embutido{padding:var(--space-3)}
body.painel-embutido main{max-width:none;margin:0;padding:0}

/* Sugestão CIAP->CID no atendimento (22/08): a ponte triagem->consulta */
.cid-sugestao{background:var(--bg-surface);border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0}
.cid-sugestao .cid-sug{margin:2px 4px 2px 0}

/* Glicemia com HI/LO do glicosímetro (22/08, refeito no mesmo dia: o input
   de largura 100% da grade esmagava os rótulos — agora o número flexiona e
   HI/LO são TOGGLES-BOTÃO alinhados à altura do campo, acesos quando marcados
   (mesma técnica :has dos cartões de Manchester). */
.gli-caixa{display:flex;align-items:stretch;gap:var(--space-1)}
.gli-caixa>input{flex:1 1 auto;width:auto;min-width:0}
.gli-ext{display:flex;align-items:center;padding:0 var(--space-3);cursor:pointer;
  user-select:none;font:var(--type-small);font-weight:500;
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);
  background:var(--bg-surface);color:var(--text-secondary)}
.gli-ext input{position:absolute;opacity:0;pointer-events:none}
.gli-ext:has(input:checked){background:var(--idba-blue-700);border-color:var(--idba-blue-700);
  color:var(--idba-white)}
.gli-ext:focus-within{box-shadow:var(--focus-ring)}

/* Altura + IMC ao vivo (22/08): o IMC nasce do peso JÁ CORRIGIDO */
.alt-caixa{display:flex;align-items:stretch;gap:var(--space-1)}
.alt-caixa>input{flex:1 1 auto;width:auto;min-width:0}
.alt-caixa>output{display:flex;align-items:center;padding:0 var(--space-3);
  font:var(--type-small);font-weight:500;white-space:nowrap;
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);
  background:var(--bg-surface);color:var(--text-secondary)}
.alt-caixa>output:empty{display:none}

/* Ações do cabeçalho da triagem (22/08): chamar · retornar · prontuário */
.tg-acoes{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}