/* ============================================================================
   DESIGN SYSTEM — ENTERPRISE HEALTHCARE PLATFORM (v3 · design review 2026-08)
   Tokens + componentes compartilhados por TODAS as telas da plataforma.
   Especificação completa: docs/DESIGN_SYSTEM.md
   Conceito: saúde, confiança, tecnologia, clareza, segurança, humanização.
   Tema claro por padrão; tema dark premium para Central Técnica/Sala de
   Situação via body.tema-dark. (Ícones: SVG lineares offline.)
   ============================================================================ */
/* Inter self-hosted (CSP/offline: nunca CDN) — fonte oficial dos 3 temas */
@font-face{
  font-family:"Inter";
  src:url("fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* ---- cores institucionais ---- */
  --pri:#2563EB;         /* azul primário institucional */
  --pri-hover:#1D4ED8;   /* azul médio (hover/destaque secundário) */
  --pri-soft:#DBEAFE;    /* azul claro (badges/estados selecionados) */
  --navy:#0F2747;        /* azul escuro/navy (sidebar, painéis executivos) */
  --navy-2:#173A63;      /* navy elevado (hover/ativo na sidebar) */
  --ciano:#06B6D4;       /* tecnológico: integrações, APIs, telemedicina */
  --ok:#16A34A;          /* verde saúde */
  --ok-soft:#DCFCE7;
  --ok-tinta:#166534;    /* texto sobre --ok-soft (≥4,5:1; já em .cor-VERDE/.b-ok) */
  --roxo:#7C3AED;        /* IA / BI / automação */
  --roxo-soft:#EDE9FE;
  /* verde saúde / teal (design review §6) — estado saudável, nunca decorativo */
  --teal:#14B8A6; --teal-alt:#10B981; --teal-soft:#ECFDF5; --teal-ink:#047857;
  /* escala de espaçamento base 8 (design review §12/§103) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  /* ---- cores de alerta ---- */
  --warn:#FACC15;        /* amarelo atenção */
  /* par legível do aviso: fundo suave + linha + tinta escura. Estava escrito à
     mão em 8 lugares; tokenizado aqui para o tema escuro trocar os três de uma
     vez, em vez de cada regra ter a sua cópia. */
  --warn-soft:#FEF9C3;
  --warn-linha:#FDE68A;
  --warn-tinta:#854D0E;
  --ambar:#F59E0B;       /* atraso/saturação inicial */
  --urg:#EA580C;         /* laranja crítico intermediário */
  --urg-soft:#FFEDD5;    /* fundo Manchester LARANJA (já em .cor-LARANJA) */
  --urg-tinta:#9A3412;   /* texto sobre --urg-soft (≥4,5:1; já em .cor-LARANJA) */
  --crit:#DC2626;        /* vermelho emergência */
  --crit-soft:#FEE2E2;
  --info:#2563EB; --info-soft:#DBEAFE; --accent:#2563EB;   /* aliases legados */
  /* ---- neutros ---- */
  --bg:#F7F9FC;          /* fundo geral */
  --bg-2:#F1F5F9;        /* fundo secundário */
  --surface:#FFFFFF;     /* cards */
  --card:#FFFFFF;        /* alias legado */
  --line:#E2E8F0;        /* bordas */
  --line-strong:#CBD5E1;
  --ink:#0F172A;         /* texto principal */
  --ink-2:#1F2937;       /* texto secundário — escuro p/ leitura confortável */
  --muted:#64748B;       /* texto terciário — cinza-escuro legível */
  --disabled:#94A3B8;
  --preto-tec:#020617;   /* preto técnico (command center) */
  --sidebar:#0F2747;
  --sidebar-ink:#CBD5E1;
  --sidebar-muted:#94A3B8;
  --sidebar-sep:#1B3A61;
  /* ---- bordas (raios) ---- */
  --radius:12px;         /* cards */
  --radius-sm:8px;       /* botões e inputs */
  --radius-lg:16px;      /* modais / painéis executivos */
  --radius-tb:12px;      /* container de tabela */
  /* ---- sombras ---- */
  --sh-1:0 1px 3px rgba(15,23,42,.06);
  --sh-2:0 4px 12px rgba(15,23,42,.10);
  --sh-3:0 20px 40px rgba(15,23,42,.18);
  /* ---- layout ---- */
  --h-appbar:64px; --w-side:232px;
  /* altura da faixa de demonstração: 0 quando não há faixa. O
     faixa_demo.js define o valor real e o layout inteiro desce,
     em vez de a faixa cobrir o cabeçalho e o menu. */
  --h-faixa:0px;
  --mod:#2563EB;         /* cor de identidade do módulo ativo (definida no shell) */
  --font:Inter,Roboto,"SF Pro Display","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* ---- microinterações ---- */
  --t-fast:150ms; --t-med:220ms;
  /* ---- gradientes (temas 2/3 usam; tema 1 fica sólido) ---- */
  --grad-pri:none;
}

/* ============================================================================
   TEMAS (redesign SAÚDE+) — troca por html[data-tema], persistida por operador.
   Todos os componentes leem os MESMOS tokens; nada muda nas telas.
   ---------------------------------------------------------------------------
   clean (padrão)  = Modelo 1 — Clean & Professional
   acolhedor       = Modelo 2 — Moderno & Acolhedor
   premium         = Modelo 3 — Futurista & Premium (escuro/neon)
   ============================================================================ */
:root[data-tema="clean"]{
  --sidebar:#0F2747; --navy:#0F2747; --navy-2:#173A63;
}

:root[data-tema="acolhedor"]{
  --pri:#7C3AED; --pri-hover:#6D28D9; --pri-soft:#EDE9FE;
  --bg:#FAF7FF; --bg-2:#F5F3FF; --line:#E9D5FF; --line-strong:#D8B4FE;
  --ink:#1E1B4B; --ink-2:#374151; --muted:#4B5563;
  --ok:#22C55E; --ambar:#F97316; --info:#6366F1; --info-soft:#E0E7FF;
  --roxo:#7C3AED; --accent:#7C3AED; --mod:#7C3AED;
  --navy:#4C1D95; --navy-2:#6D28D9;
  --sidebar:#FFFFFF; --sidebar-ink:#4C1D95; --sidebar-muted:#8B7BB0; --sidebar-sep:#E9D5FF;
  --sh-1:0 1px 3px rgba(124,58,237,.08); --sh-2:0 4px 14px rgba(124,58,237,.12);
  --sh-3:0 20px 40px rgba(124,58,237,.18);
  --grad-pri:linear-gradient(135deg,#7C3AED 0%,#A855F7 100%);
}

:root[data-tema="premium"]{
  --pri:#8B5CF6; --pri-hover:#A78BFA; --pri-soft:rgba(124,58,237,.22);
  --ciano:#22D3EE; --info:#38BDF8; --info-soft:rgba(56,189,248,.18);
  --ok:#34D399; --ok-soft:rgba(52,211,153,.16);
  --warn:#FBBF24; --ambar:#FBBF24; --crit:#FB7185; --crit-soft:rgba(251,113,133,.16);
  --roxo:#8B5CF6; --roxo-soft:rgba(139,92,246,.18);
  --bg:#050816; --bg-2:#0B1026; --surface:#111827; --card:#111827;
  --line:#1F2937; --line-strong:#334155;
  --ink:#F8FAFC; --ink-2:#CBD5E1; --muted:#94A3B8; --disabled:#64748B;
  --navy:#0B1026; --navy-2:#1F2937;
  --sidebar:#070A1A; --sidebar-ink:#CBD5E1; --sidebar-muted:#94A3B8; --sidebar-sep:#1F2937;
  --sh-1:0 1px 3px rgba(0,0,0,.5); --sh-2:0 0 24px rgba(124,58,237,.28);
  --sh-3:0 24px 48px rgba(0,0,0,.6);
  --grad-pri:linear-gradient(135deg,#7C3AED 0%,#22D3EE 100%);
  color-scheme:dark;
}
/* Premium: profundidade e bordas ativas neon nos componentes compartilhados */
:root[data-tema="premium"] .card,
:root[data-tema="premium"] .kpi{background:linear-gradient(145deg,rgba(124,58,237,.12),rgba(34,211,238,.05)),var(--surface)}
:root[data-tema="premium"] header.appbar{background:rgba(7,10,26,.92);border-bottom-color:var(--line)}
:root[data-tema="premium"] input,
:root[data-tema="premium"] select,
:root[data-tema="premium"] textarea{background:var(--bg-2);color:var(--ink);border-color:var(--line-strong)}
:root[data-tema="premium"] table{background:var(--surface)}
:root[data-tema="premium"] th{color:var(--muted)}
/* Botões com gradiente nos temas 2 e 3 (o tema 1 permanece sólido) */
:root[data-tema="acolhedor"] button:not(.ghost),
:root[data-tema="premium"] button:not(.ghost){background:var(--grad-pri)}
:root[data-tema="premium"] button:not(.ghost){box-shadow:0 0 18px rgba(124,58,237,.30)}

/* ============================================================================
   BASE + TIPOGRAFIA (escala oficial)
   ============================================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);margin:0;background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1{font-size:32px;font-weight:700;line-height:40px;color:var(--ink);margin:.2em 0}
h2{font-size:20px;font-weight:600;line-height:28px;color:var(--ink);margin:0 0 12px}
h3{font-size:16px;font-weight:600;line-height:24px;color:var(--ink-2);margin:0 0 8px}
h4{font-size:14px;font-weight:600;line-height:22px;color:var(--ink-2);margin:0 0 6px}
p{margin:.4em 0}
a{color:var(--pri);text-decoration:none}
a:hover{color:var(--pri-hover)}
small{color:var(--muted);font-size:12px;line-height:16px}
.ok{color:var(--ok)} .crit{color:var(--crit)} .warn{color:var(--warn-tinta)} .muted{color:var(--muted)}
.texto-principal{font-size:16px;line-height:24px}
.caption{font-size:12px;line-height:16px;color:var(--muted)}
/* foco visível para navegação por teclado (WCAG) */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}

/* ---- header simples (telas sem shell: index, portal) ---------------------- */
header.top,header.topo{background:var(--surface);padding:0 24px;height:var(--h-appbar);
  display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
header.top b,header.topo b{font-size:16px;font-weight:700;color:var(--pri)}
header.top .who{color:var(--muted);font-size:13px}
header.top a{margin-left:14px;font-size:13px}

/* ---- layout base (sem shell) --------------------------------------------- */
/* minmax(0,1fr): conteúdo largo (tabela/select longo) NUNCA alarga a página —
   transborda dentro do próprio cartão; a rolagem da página fica só vertical */
main{max-width:1200px;margin:0 auto;padding:24px;display:grid;gap:20px;
  grid-template-columns:minmax(0,1fr)}

/* ============================================================================
   SHELL ENTERPRISE — sidebar navy fixa + topbar branca
   ============================================================================ */
body.has-shell main{margin-left:var(--w-side);max-width:none;
  padding:calc(var(--h-appbar) + var(--h-faixa) + 24px) 24px 40px}

/* Sidebar */
aside.sidebar{position:fixed;top:var(--h-faixa);left:0;bottom:0;width:var(--w-side);background:var(--sidebar);
  color:var(--sidebar-ink);overflow-y:auto;z-index:40;display:flex;flex-direction:column}
aside.sidebar .brand{display:flex;align-items:center;gap:10px;height:var(--h-appbar);
  padding:0 20px;font-weight:700;color:#fff;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
aside.sidebar .brand .logo{font-size:22px}
aside.sidebar .brand img.logo{width:30px;height:30px;object-fit:contain}
aside.sidebar nav{padding:12px 10px;display:grid;gap:2px;flex:1 1 auto}
aside.sidebar .grp{color:var(--sidebar-muted);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin:14px 10px 4px;cursor:pointer;display:flex;
  align-items:center;gap:6px;user-select:none;border-radius:6px}
aside.sidebar .grp:hover{color:#fff}
aside.sidebar .grp .seta{display:inline-block;transition:transform var(--t-fast);font-size:10px}
aside.sidebar .grp .qtd{margin-left:auto;font-weight:400;opacity:.55}
aside.sidebar .grp-bloco.fechado .seta{transform:rotate(-90deg)}
aside.sidebar .grp-bloco.fechado a.item{display:none}
aside.sidebar.filtrando .grp-bloco.fechado a.item{display:flex}  /* filtro ignora colapso */
aside.sidebar .oculto-filtro{display:none !important}
aside.sidebar .side-filtro{padding:10px 10px 0}
aside.sidebar .side-filtro input{width:100%;box-sizing:border-box;background:var(--navy-2);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#fff;
  padding:7px 10px;font-size:13px;min-height:0;height:auto}
aside.sidebar .side-filtro input::placeholder{color:var(--sidebar-muted)}
aside.sidebar a.item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:var(--sidebar-ink);font-size:14px;font-weight:500;border-left:4px solid transparent;
  line-height:1.2;transition:background var(--t-fast)}
aside.sidebar a.item .ic{width:22px;height:22px;text-align:center;font-size:16px;opacity:.9;flex:0 0 22px}
/* ícones SVG clareados sobre a sidebar escura */
aside.sidebar a.item img.ic{object-fit:contain;filter:brightness(0) invert(1);opacity:.82}
aside.sidebar a.item:hover{background:var(--navy-2);color:#fff}
aside.sidebar a.item:hover img.ic{opacity:1}
/* item ativo: fundo elevado + texto branco + borda esquerda azul 4px (spec 7.1) */
aside.sidebar a.item.ativo{background:var(--pri);color:var(--surface);
  border-left-color:transparent;font-weight:600}
aside.sidebar a.item.ativo .ic{opacity:1}
aside.sidebar a.item.ativo img.ic{filter:brightness(0) invert(1);opacity:1}
aside.sidebar .side-foot{padding:12px 16px;color:var(--sidebar-muted);font-size:11px;
  border-top:1px solid rgba(255,255,255,.08)}

/* Topbar */
header.appbar{position:fixed;top:var(--h-faixa);left:var(--w-side);right:0;height:var(--h-appbar);background:var(--surface);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 24px;z-index:30}
header.appbar .modulo-wrap{display:flex;align-items:center;gap:10px;min-width:0}
/* o div interno (título+unidade) também precisa poder encolher no flex */
header.appbar .modulo-wrap>div{min-width:0}
header.appbar .modulo-ic{width:26px;height:26px;object-fit:contain}
header.appbar .modulo{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
header.appbar .unidade{font-size:12px;color:var(--muted);white-space:nowrap}
header.appbar .spacer{flex:1}
/* Caixa de município (ADMIN, telas de rede) — compacta na topbar */
header.appbar .mun-caixa{display:inline-flex;align-items:center;gap:6px;margin-right:4px;
  font-size:12px;color:var(--ink-2);white-space:nowrap}
header.appbar .mun-caixa-lbl{font-weight:600;color:var(--muted)}
header.appbar .mun-caixa select{height:34px;font-size:12px;padding:0 8px;max-width:200px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
/* busca global (paciente/CPF/CNS) na topbar */
header.appbar .gbusca{position:relative;flex:0 1 340px;min-width:150px}
header.appbar .gbusca input{height:40px;border-radius:9px;background:var(--bg);
  border:1px solid var(--line);font-size:13px;padding-left:34px}
header.appbar .gbusca .lupa{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:15px;pointer-events:none}
header.appbar .gbusca .gres{position:absolute;top:52px;left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);max-height:320px;
  overflow:auto;z-index:60;display:none}
header.appbar .gbusca .gres.aberto{display:block}
header.appbar .gbusca .gitem{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line);
  font-size:13px}
header.appbar .gbusca .gitem:last-child{border-bottom:0}
header.appbar .gbusca .gitem:hover{background:var(--bg-2)}
header.appbar .gbusca .gitem small{display:block;color:var(--muted)}
header.appbar .conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
header.appbar .conn .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
header.appbar .imprimir{cursor:pointer;font-size:17px;padding:4px 8px;border-radius:8px;opacity:.85}
header.appbar .imprimir:hover{background:var(--bg-2);opacity:1}
header.appbar .conn.online{color:var(--ok)} header.appbar .conn.online .dot{background:var(--ok)}
header.appbar .conn.local{color:var(--warn-tinta);background:var(--warn-soft);border-color:var(--warn-linha)} header.appbar .conn.local .dot{background:var(--warn)}
header.appbar .conn.sync{color:var(--pri)} header.appbar .conn.sync .dot{background:var(--pri)}
header.appbar .conn.falha{color:var(--crit);background:var(--crit-soft);border-color:#FCA5A5} header.appbar .conn.falha .dot{background:var(--crit)}
header.appbar .userchip{display:inline-flex;align-items:center;gap:10px}
header.appbar .avatar{width:36px;height:36px;border-radius:50%;background:var(--pri);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
header.appbar .uname{font-size:13px;font-weight:600;color:var(--ink);line-height:1.1}
header.appbar .urole{font-size:11px;color:var(--muted)}
header.appbar .sair{font-size:13px;color:var(--ink-2);border:1px solid var(--line);
  padding:7px 12px;border-radius:10px;cursor:pointer;transition:background var(--t-fast)}
header.appbar .sair:hover{background:var(--bg-2)}
header.appbar .menu-toggle{display:none;font-size:22px;cursor:pointer;color:var(--ink-2)}

/* ============================================================================
   COMPONENTES
   ============================================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--sh-1);transition:box-shadow var(--t-fast)}
.card h2{font-size:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.grid-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}

/* Metric card (indicador secundário — número médio 28px) */
.metric{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--pri);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--sh-1)}
.metric .lbl{font-size:12px;font-weight:500;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.metric .num{font-size:28px;font-weight:700;line-height:36px;color:var(--pri);margin-top:4px}
.metric.ok{border-left-color:var(--ok)} .metric.ok .num{color:var(--ok)}
.metric.warn{border-left-color:var(--ambar)} .metric.warn .num{color:var(--warn-tinta)}
.metric.crit{border-left-color:var(--crit)} .metric.crit .num{color:var(--crit)}
.metric.info{border-left-color:var(--pri)} .metric.info .num{color:var(--pri)}

/* Alert cards */
.alerta{border-radius:12px;padding:14px 16px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.alerta.crit{background:var(--crit-soft);border:1px solid #FCA5A5;color:#991B1B}
.alerta.warn{background:var(--warn-soft);border:1px solid var(--warn-linha);color:var(--warn-tinta)}
.alerta.ok{background:var(--ok-soft);border:1px solid #86EFAC;color:#166534}
.alerta.info{background:var(--pri-soft);border:1px solid #BFDBFE;color:#1E40AF}
.alerta.pulse{animation:pulseCrit 1.6s ease-in-out infinite}

/* Linhas de formulário */
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
label{display:block;margin:12px 0 4px;font-weight:500;font-size:13px;line-height:18px;color:#334155}
input,select,textarea{width:100%;height:40px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
textarea{height:auto;padding:10px 12px;min-height:80px}
input::placeholder,textarea::placeholder{color:var(--disabled)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input.erro,select.erro{border-color:var(--crit)}
input.sucesso,select.sucesso{border-color:var(--ok)}
.obrigatorio::after{content:" *";color:var(--crit)}

/* Botões — hierarquia oficial (spec 8.3) */
button{height:40px;margin-top:12px;padding:0 18px;border:0;border-radius:var(--radius-sm);
  background:var(--pri);color:#fff;font-weight:600;font-size:14px;line-height:20px;font-family:inherit;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  transition:background var(--t-fast),filter var(--t-fast)}
button:hover{background:var(--pri-hover)}
button img.bic{width:16px;height:16px;flex:0 0 16px;object-fit:contain;filter:brightness(0) invert(1)}
button.ghost img.bic{filter:none}
button.warn img.bic{filter:brightness(0);opacity:.75}
/* secundário: branco com borda e texto azul */
button.ghost{background:var(--surface);border:1px solid var(--pri);color:var(--pri)}
button.ghost:hover{background:var(--pri-soft)}
/* neutro (baixa ênfase) */
button.neutro{background:var(--bg-2);color:#334155}
button.neutro:hover{background:var(--line)}
button.ok{background:var(--ok)} button.ok:hover{filter:brightness(.95);background:var(--ok)}
button.warn{background:var(--ambar);color:#fff} button.warn:hover{filter:brightness(.96);background:var(--ambar)}
button.crit{background:var(--crit)} button.crit:hover{filter:brightness(.95);background:var(--crit)}
button:disabled{background:var(--line-strong);color:var(--muted);cursor:not-allowed}

/* ============================================================================
   COMPONENTES DE PAINEL (Dashboards, KPIs, gráficos)
   ============================================================================ */
.sec-tit{display:flex;align-items:center;gap:10px;margin:22px 0 10px;color:var(--ink);font-size:15px;font-weight:700}
.sec-tit .ic{width:22px;height:22px}
.sec-tit small{font-weight:500;color:var(--muted);font-size:12px}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
/* KPI principal — número grande 40px/800 (spec 5.1) */
.kpi{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--sh-1);min-height:112px;
  transition:box-shadow var(--t-fast)}
.kpi:hover{box-shadow:var(--sh-2)}
.kpi .lbl{font-size:12px;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.kpi .num{font-size:32px;font-weight:700;line-height:40px;margin-top:2px;color:var(--ink)}
.kpi .hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.kpi.crit{border-left-color:var(--crit)} .kpi.crit .num{color:var(--crit)}
.kpi.warn{border-left-color:var(--ambar)} .kpi.warn .num{color:#92590b}
.kpi.ok{border-left-color:var(--ok)} .kpi.ok .num{color:var(--ok)}
.kpi.info{border-left-color:var(--pri)} .kpi.info .num{color:var(--pri)}
.kpi.ia{border-left-color:var(--roxo)} .kpi.ia .num{color:var(--roxo)}
.kpi .badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:8px}
.b-crit{background:var(--crit-soft);color:#991B1B}.b-warn{background:var(--warn-soft);color:var(--warn-tinta)}.b-ok{background:var(--ok-soft);color:var(--ok-tinta)}
.bars{display:grid;gap:6px;margin-top:4px}
.bar{display:flex;align-items:center;gap:8px;font-size:12px}
.bar .tag{width:78px;font-weight:600}
.bar .track{flex:1;height:14px;background:#EEF2F7;border-radius:7px;overflow:hidden}
.bar .fill{height:100%;border-radius:7px;transition:width var(--t-med)}
.lista{font-size:13px;line-height:1.7}.lista b{color:var(--ink)}
.upd{color:var(--muted);font-size:12px}
/* alturas padronizadas de gráfico (spec 9.4) */
.graf-sm{height:260px}.graf-md{height:360px}.graf-lg{height:480px}
/* donut (disco) — cor por saturação */
.donuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.donut{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px 14px;text-align:center;box-shadow:var(--sh-1)}
.donut svg{display:block;margin:0 auto}
.donut-lbl{margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 7px rgba(220,38,38,.16)}}
.donut.pulse{animation:pulseGlow 1.6s ease-in-out infinite;border-color:#FCA5A5}
@keyframes pulseCrit{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.14)}}

/* Tabelas (spec 8.6) */
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-tb);overflow:hidden}
th,td{text-align:left;padding:0 14px;height:52px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{background:var(--bg);color:#334155;font-weight:600;font-size:13px;height:44px}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover{background:var(--bg-2)}
tbody tr:last-child td{border-bottom:0}
table.compacta th,table.compacta td{height:40px;font-size:13px}

/* Badges / status (pílulas) — cores oficiais por status (spec 3) */
.pill,.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:999px;font-size:12px;font-weight:600;line-height:16px;white-space:nowrap}

/* Checklist compacta (padrão): texto tipo detalhe + caixinha ao lado — mesmo
   visual das "camadas" do mapa; usado nos filtros de seleção (painel da rede). */
.checks{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);
  border-radius:10px;padding:4px;background:var(--surface);align-self:flex-start;
  min-width:220px}
.check-item{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.25;
  cursor:pointer;padding:5px 8px;border-radius:7px}
.check-item:hover{background:var(--pri-soft)}
.check-item input[type=checkbox]{accent-color:var(--pri);cursor:pointer;
  width:15px;height:15px;min-height:0;margin:0;flex:0 0 15px}
.check-item small{color:var(--muted);margin-left:auto}
.badge.ok,.badge.confirmado,.badge.concluido{background:var(--ok-soft);color:#166534}
.badge.atend,.badge.info,.badge.ematendimento{background:var(--pri-soft);color:#1E40AF}
.badge.pend,.badge.atencao,.badge.aguardando{background:var(--warn-soft);color:var(--warn-tinta)}
.badge.pendente{background:#FFEDD5;color:#9A3412}
.badge.crit,.badge.cancelado{background:var(--crit-soft);color:#991B1B}
.badge.faltou,.badge.inativo{background:var(--bg-2);color:var(--muted)}
.badge.offline{background:#E5E7EB;color:#374151}
.badge.analise,.badge.regulado,.badge.ia{background:var(--roxo-soft);color:#5B21B6}
.badge.incidente{background:var(--preto-tec);color:#fff}
.badge.tec{background:#CFFAFE;color:#155E75}

/* Classificação de risco (Manchester + SUS) — padrão fixo em todo o sistema */
.cor-VERMELHO{background:var(--crit-soft);color:#991B1B}
.cor-LARANJA{background:var(--urg-soft);color:var(--urg-tinta)}
.cor-AMARELO{background:var(--warn-soft);color:var(--warn-tinta)}
.cor-VERDE{background:var(--ok-soft);color:var(--ok-tinta)}
.cor-AZUL{background:var(--pri-soft);color:#1E40AF}
.cor-CINZA,.cor-NAO_CLASSIFICADO{background:var(--bg-2);color:var(--muted)}
/* faixa lateral de risco no card do paciente */
.faixa-VERMELHO{border-left:6px solid var(--crit)}
.faixa-LARANJA{border-left:6px solid var(--urg)}
.faixa-AMARELO{border-left:6px solid var(--warn)}
.faixa-VERDE{border-left:6px solid var(--ok)}
.faixa-AZUL{border-left:6px solid var(--pri)}
.faixa-CINZA{border-left:6px solid var(--disabled)}

/* Card de paciente (listas clínicas) */
.paciente-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:4px}
.paciente-card b{font-size:15px}
.paciente-card .meta{font-size:12px;color:var(--muted)}

/* Modais (spec 8.7) */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:24px;width:100%;
  max-width:480px;box-shadow:var(--sh-3);animation:modalIn var(--t-med) ease-out;
  /* título e rodapé fixos, corpo rola: modal nunca cresce além da janela
     (listas grandes de drill/detalhamento deixavam a tela travada) */
  max-height:88vh;display:flex;flex-direction:column}
.modal .m-body{overflow:auto;min-height:0}
/* contentor automático das tabelas (ver _envolverTabelas em app.js) */
.tabela-rolavel{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tabela-rolavel>table{min-width:100%}
.modal.medio{max-width:720px}.modal.grande{max-width:960px}
.modal h3{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 12px}
.modal .m-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* Toasts (mensagens flutuantes) */
.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;gap:8px}
.toast{background:var(--navy);color:#fff;border-radius:12px;padding:12px 16px;font-size:13px;
  box-shadow:var(--sh-2);display:flex;gap:8px;align-items:center;animation:modalIn var(--t-med) ease-out;
  border-left:4px solid var(--pri)}
.toast.ok{border-left-color:var(--ok)} .toast.erro{border-left-color:var(--crit)}

/* Skeleton loading */
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skeleton{border-radius:8px;min-height:14px;background:linear-gradient(90deg,#EEF2F7 25%,var(--bg) 50%,#EEF2F7 75%);
  background-size:200% 100%;animation:skel 1.2s linear infinite}

/* Dashboard rico — variação %, sparkline e fila de espera (spec 8.1/12.1) */
.kpi .kpi-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.kpi .spark{flex:0 0 auto;margin-bottom:8px;opacity:.9}
.kpi-delta{font-size:13px;font-weight:600;margin-top:2px}
.kpi-delta.up{color:var(--ok)} .kpi-delta.down{color:var(--crit)}
.kpi-delta small{color:var(--muted);font-weight:400}
.fila-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px}
.fila-item:last-child{border-bottom:0}
.fila-tempo{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--ink-2)}

/* saída/log, mensagens */
.out{margin-top:10px;font-size:13px;color:var(--ink-2);white-space:pre-wrap}
.erro{color:var(--crit);font-size:13px;min-height:18px}

/* Login (auth, sem shell) */
.login{max-width:400px;margin:8vh auto;display:grid;gap:6px}
.login.card{box-shadow:var(--sh-2)}

/* Estado vazio */
.empty{padding:28px;text-align:center;color:var(--muted)}

/* índice (landing) — cartões de navegação */
.sec{margin-top:18px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
a.card{display:block;text-decoration:none;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
a.card:hover{border-color:var(--pri);box-shadow:var(--sh-2);transform:translateY(-1px)}
a.card b{font-size:15px;color:var(--pri)}

/* ============================================================================
   TEMA DARK — COMMAND CENTER (Central Técnica, Sala de Situação premium)
   ============================================================================ */
body.tema-dark{background:var(--preto-tec);color:#F8FAFC}
body.tema-dark main{color:#F8FAFC}
body.tema-dark .card,body.tema-dark .kpi,body.tema-dark .metric,body.tema-dark .donut{
  background:var(--navy);border-color:var(--navy-2);box-shadow:none}
body.tema-dark h1,body.tema-dark h2,body.tema-dark .kpi .num{color:#F8FAFC}
body.tema-dark h3,body.tema-dark h4{color:#CBD5E1}
body.tema-dark small,body.tema-dark .muted,body.tema-dark .upd,body.tema-dark .caption{color:#94A3B8}
body.tema-dark .kpi .lbl,body.tema-dark .metric .lbl{color:#94A3B8}
body.tema-dark .kpi .hint{color:#64748B}
body.tema-dark .kpi.ok .num{color:#22C55E} body.tema-dark .kpi.crit .num{color:#EF4444}
body.tema-dark .kpi.info .num{color:#38BDF8} body.tema-dark .kpi.warn .num{color:#FBBF24}
body.tema-dark table{background:var(--navy);border-color:var(--navy-2)}
body.tema-dark thead th{background:#111C31;color:#94A3B8}
body.tema-dark th,body.tema-dark td{border-color:var(--navy-2);color:#E2E8F0}
body.tema-dark tbody tr:hover{background:#16213B}
body.tema-dark input,body.tema-dark select,body.tema-dark textarea{
  background:#0B1426;border-color:var(--navy-2);color:var(--bg)}
body.tema-dark input::placeholder{color:#475569}
body.tema-dark label{color:#94A3B8}
body.tema-dark button.ghost{background:transparent;border-color:var(--navy-2);color:#7DD3FC}
body.tema-dark button.ghost:hover{background:var(--navy-2)}
body.tema-dark button.neutro{background:var(--navy-2);color:#CBD5E1}
body.tema-dark .out{color:#94A3B8}
body.tema-dark .alerta.info{background:#082F49;border-color:#0E7490;color:#7DD3FC}
body.tema-dark .alerta.crit{background:#450A0A;border-color:#B91C1C;color:#FCA5A5}
body.tema-dark{--warn-soft:#422006; --warn-linha:#B45309; --warn-tinta:#FCD34D}
body.tema-dark .alerta.ok{background:#052E16;border-color:#15803D;color:#86EFAC}
body.tema-dark .tabs{border-bottom-color:var(--navy-2)}
body.tema-dark .tabs .tab{color:#94A3B8}
body.tema-dark .tabs .tab.ativo{color:#7DD3FC;border-bottom-color:var(--ciano)}
body.tema-dark .tabs .tab:hover{color:#7DD3FC}
body.tema-dark .empty{color:#64748B}

/* ============================================================================
   MODO TELÃO (tela cheia) — painéis em TV/monitor de sala de situação
   Esconde a navegação, usa 100% da tela e amplia levemente a leitura.
   ============================================================================ */
body.modo-telao aside.sidebar,
body.modo-telao header.appbar{display:none}
body.modo-telao main,
body.has-shell.modo-telao main{margin-left:0;max-width:none;padding:16px 20px 24px}
body.modo-telao{font-size:15px}
body.modo-telao .kpi .num{font-size:46px;line-height:52px}
body.modo-telao .kpi .lbl{font-size:13px}
body.modo-telao .metric .num{font-size:32px}
body.modo-telao table{font-size:15px}
body.modo-telao h2{font-size:24px}
body.modo-telao h3{font-size:19px}
/* barra flutuante do telão: relógio + sair (discreta, some no print) */
.telao-bar{position:fixed;top:10px;right:12px;z-index:70;display:flex;gap:10px;
  align-items:center;background:rgba(15,23,42,.82);color:#fff;border-radius:999px;
  padding:6px 8px 6px 16px;font-size:13px;box-shadow:var(--sh-2)}
.telao-bar .relogio{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.telao-bar button{height:30px;margin:0;padding:0 12px;font-size:12px;border-radius:999px;
  background:rgba(255,255,255,.14)}
.telao-bar button:hover{background:rgba(255,255,255,.26)}
header.appbar .telao{cursor:pointer;font-size:17px;padding:4px 8px;border-radius:8px;opacity:.85}
header.appbar .telao:hover{background:var(--bg-2);opacity:1}
body.tema-dark .telao-bar{background:rgba(6,182,212,.18);border:1px solid #164E63}

/* ---- responsivo ---------------------------------------------------------- */
@media (max-width:1100px){
  body.has-shell aside.sidebar{transform:translateX(-100%);transition:transform var(--t-med)}
  body.has-shell.side-open aside.sidebar{transform:none;box-shadow:var(--sh-3)}
  body.has-shell main{margin-left:0;padding-left:16px;padding-right:16px}
  body.has-shell header.appbar{left:0}
  header.appbar .menu-toggle{display:inline-flex}
  header.appbar .gbusca{display:none}
  .row,.row3{grid-template-columns:minmax(0,1fr)}
  h1{font-size:24px;line-height:32px}
  h2{font-size:18px}
  .kpi .num{font-size:28px;line-height:36px}
  button{font-size:15px}
}

/* Rede de Saúde — árvore de estrutura física e abas */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs .tab{height:auto;margin:0;background:transparent;color:var(--ink-2);border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:8px 14px;font-weight:600;cursor:pointer;transition:color var(--t-fast)}
.tabs .tab:hover{background:transparent;color:var(--pri)}
.tabs .tab.ativo{color:var(--pri);border-bottom-color:var(--mod,var(--pri))}
.pane{display:none}.pane.ativo{display:block}
.tree{list-style:none;margin:0;padding:0}
.tree ul{list-style:none;margin:0;padding-left:22px;border-left:1px dashed var(--line-strong)}
.tnode{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;
  margin:4px 0;background:var(--surface)}
.tnode .tlbl{font-weight:600}
.tnode .ttipo{font-size:11px;color:var(--ink-2);background:var(--bg-2);padding:1px 8px;border-radius:999px}
.tnode .tcap{font-size:11px;color:var(--ink-2)}
.tnode.st-BLOQUEADA{border-color:#FCA5A5;background:#FEF2F2}
.tnode.st-EM_MANUTENCAO{border-color:var(--warn-linha);background:#FEFCE8}
.tnode.st-ISOLAMENTO{border-color:#D8B4FE;background:#FAF5FF}
.tnode .tacts{margin-left:auto;display:flex;gap:6px}
.tnode .tacts button{height:28px;margin:0;padding:0 10px;font-size:12px}

/* Voltar ao início do segmento + BuscaPacienteUniversal */
header.appbar .voltar{font-size:13px;color:var(--pri);border:1px solid var(--line);
  padding:7px 12px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background var(--t-fast)}
header.appbar .voltar:hover{background:var(--pri-soft)}
.busca-paciente .bp-row{display:flex;gap:8px}
.busca-paciente .bp-res{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.busca-paciente .bp-item{border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;background:var(--surface);transition:border-color var(--t-fast)}
.busca-paciente .bp-item:hover{border-color:var(--pri);background:#F8FBFD}
.busca-paciente .bp-item small{color:var(--ink-2)}

/* Links de ação (mapa, etc.) */
a.btn-link{display:inline-block;color:var(--pri);font-weight:600;padding:6px 0;text-decoration:none}
a.btn-link:hover{text-decoration:underline}

/* movimento reduzido (acessibilidade) */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Drill-down: cartões/donuts clicáveis abrem a caixa de dados do indicador */
.drillavel{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.drillavel:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.drillavel:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.drill-tab th{position:sticky;top:0;background:var(--surface);z-index:1}
.modal .m-body .empty{padding:18px;text-align:center;color:var(--muted)}

/* Busca de telas (paleta "Ir para tela" — botão 🧭 / Ctrl+K) */
.bt-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer}
.bt-item:hover,.bt-item.sel{background:var(--pri-soft)}
.bt-item .ic{width:20px;height:20px;opacity:.8}
.bt-item small{color:var(--muted)}

/* Mapas (Leaflet): confina os z-index internos (tiles 200 … controles 800)
   ao próprio mapa (stacking context isolado). Sem isto, o mapa ficava À
   FRENTE da busca global, da paleta de telas, dos modais de drill-down e
   dos toasts (camadas 60–90) em mapa_rede, mapa_capacidade e acs. */
.leaflet-container{position:relative;z-index:0;isolation:isolate}

/* ============================================================================
   REDESIGN SAÚDE+ — FASE 2: componentes e microinterações compartilhados
   (camada visual global: nenhuma tela precisa mudar para herdar)
   ============================================================================ */
/* Tabelas modernas: cabeçalho fixo no scroll, hover de linha, ações visíveis */
thead th{position:sticky;top:0;background:var(--bg);z-index:2}
th{font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted)}
tbody tr{transition:background var(--t-fast) ease-out}
tbody tr:hover{background:var(--bg)}
:root[data-tema="premium"] tbody tr:hover{background:rgba(124,58,237,.14)}
td,th{height:48px}

/* Microinterações (150–250ms, ease-out; sem exagero) */
button{transition:background var(--t-fast) ease-out,box-shadow var(--t-fast) ease-out,
  transform var(--t-fast) ease-out}
button:active{transform:scale(.98)}
.card{transition:box-shadow var(--t-med) ease-out}
.card:hover{box-shadow:var(--sh-2)}

/* Acessibilidade WCAG 2.1 AA: foco visível por teclado em tudo */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}
input:focus,select:focus,textarea:focus{border-color:var(--pri);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent);outline:none}

/* Chips (filtros/tags removíveis) */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  background:var(--pri-soft);color:var(--pri-hover);font-size:12px;font-weight:600}
:root[data-tema="premium"] .chip{color:#C4B5FD}

/* Stepper de atendimento (jornada: cadastro → triagem → consulta → alta) */
.stepper{display:flex;align-items:center;gap:0;margin:10px 0;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.step .dot{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--bg-2);border:2px solid var(--line-strong);
  font-size:12px;font-weight:700;color:var(--muted)}
.step.feito .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.step.ativo{color:var(--ink);font-weight:600}
.step.ativo .dot{background:var(--pri);border-color:var(--pri);color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 25%,transparent)}
.step-lig{width:34px;height:2px;background:var(--line-strong);margin:0 8px}
.step.feito+.step-lig,.step-lig.feito{background:var(--ok)}

/* Drawer lateral (detalhe sem sair da tela) */
.drawer-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1150}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,92vw);background:var(--surface);
  z-index:1160;box-shadow:var(--sh-3);padding:22px;overflow:auto;
  animation:drawerIn var(--t-med) ease-out;border-left:1px solid var(--line)}
@keyframes drawerIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer h3{margin-top:0}

/* Fase 3 · onda 1 — LOGIN compartilhado (todas as telas): hero com marca */
.login-hero{text-align:center;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.login-logo{max-height:52px;max-width:200px;object-fit:contain}
.login-marca{font-size:20px;font-weight:700;color:var(--ink);margin-top:8px}
.login-sub{font-size:12px;color:var(--muted)}
.login.card{border-top:4px solid var(--pri);border-radius:var(--radius);padding:24px}
:root[data-tema="acolhedor"] .login.card,
:root[data-tema="premium"] .login.card{border-top:none;position:relative;overflow:hidden}
:root[data-tema="acolhedor"] .login.card::before,
:root[data-tema="premium"] .login.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-pri)}

/* Fase 3 · onda 3 — CLASSIFICAÇÃO DE RISCO (§26): cor grande, dor visual */
.cor-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px;margin:4px 0 6px}
.cor-opt{display:grid;gap:2px;justify-items:center;align-content:start;padding:10px 8px;margin:0;
  background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:12px;
  border-left:8px solid var(--cor-risco);cursor:pointer;min-height:66px;
  text-align:center;overflow:hidden}
.cor-opt b{color:var(--cor-risco);font-size:13px;white-space:nowrap}
.cor-opt span{font-size:11px;color:var(--ink-2);line-height:1.15;overflow-wrap:break-word;max-width:100%}
.cor-opt small{color:var(--muted)}
.cor-opt.ativa{border-color:var(--cor-risco);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cor-risco) 30%,transparent);font-weight:700}
:root[data-tema="acolhedor"] .cor-opt:not(.ghost),
:root[data-tema="premium"] .cor-opt:not(.ghost){background:var(--surface)}
input[type="range"]{accent-color:var(--pri);width:100%}
.res-risco{margin-top:8px;padding:14px 18px;border-radius:12px;font-size:16px;
  background:color-mix(in srgb,var(--cor-risco) 14%,var(--surface));
  border:1px solid var(--cor-risco);border-left:10px solid var(--cor-risco)}
.res-risco b{color:var(--cor-risco);font-size:20px}

/* Fase 3 · onda 4 — PEP/tela de paciente (§12/§27): hero + faixa de alertas */
.pac-hero{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.pac-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:22px;font-weight:800;color:#fff;flex:0 0 64px;
  background:linear-gradient(135deg,var(--pri),var(--pri-hover))}
:root[data-tema="acolhedor"] .pac-avatar,
:root[data-tema="premium"] .pac-avatar{background:var(--grad-pri)}
.pac-foto{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 64px}
.pac-info{flex:1;min-width:240px}
.pac-nome{font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.pac-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.pac-episodio{text-align:right;display:grid;gap:4px;justify-items:end}
.pac-prox{font-size:13px;font-weight:600;color:var(--ok)}
.alerta-strip{border-left:6px solid var(--ambar);
  background:color-mix(in srgb,var(--ambar) 9%,var(--surface))}

/* totem/tablet (768–1023px): tabela mais larga que o cartão rola DENTRO
   dela mesma — a página nunca ganha rolagem lateral */
@media (min-width:768px) and (max-width:1023px){
  main table{display:block;overflow-x:auto;max-width:100%}
}

/* ============================================================================
   REDESIGN SAÚDE+ — CELULAR (§32): rolagem SÓ vertical; nada estoura a tela.
   Tabelas mantêm TODAS as colunas (regra 0) rolando por dentro do painel.
   ============================================================================ */
@media (max-width:767px){
  html,body{overflow-x:clip}
  /* tabelas largas nunca alargam a página: rolagem interna própria */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  main{padding-left:10px;padding-right:10px}
  .card{padding:14px;border-radius:12px}
  /* topbar enxuta: essencial no celular (☰, título, tema, buscar telas, sair) */
  header.appbar{gap:8px;padding:0 10px}
  header.appbar #_telao,header.appbar .imprimir,header.appbar .conn{display:none}
  header.appbar .userchip div:last-child{display:none}
  header.appbar .voltar{padding:4px 8px}
  .modulo{font-size:15px} .unidade{display:none}
  /* título nunca atropela os ícones: encolhe com reticências */
  header.appbar .modulo-wrap{min-width:0;flex:1;overflow:hidden}
  header.appbar .modulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header.appbar .spacer{display:none}
  /* toque confortável: alvos ≥44px; inputs a 16px (evita o auto-zoom do iOS).
     Checkbox/radio ficam de fora (senão viram gigantes); botão nunca quebra. */
  button{min-height:44px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0}
  .camada-item{white-space:nowrap}
  .donut svg{width:112px;height:112px}
  .donuts{justify-content:center}
  /* modal/drawer em tela cheia útil */
  .overlay{padding:8px;align-items:flex-end}
  .modal{max-width:100%;width:100%;max-height:92vh;overflow:auto;border-radius:14px}
  .drawer{width:100vw;border-left:0}
  .stepper{gap:2px} .step-lig{width:16px;margin:0 4px}
  .step{font-size:12px} .step .dot{width:22px;height:22px;font-size:11px}
  .cor-opt{flex:1;min-width:86px}
  .pac-episodio{text-align:left;justify-items:start}
}

/* CELULAR: tabelas viram CARTÕES empilhados (§32) — zero rolagem horizontal */
@media (max-width:767px){
  table.t-card{display:block;overflow:visible;white-space:normal}
  table.t-card thead{display:none}
  table.t-card tr.t-card-cab{display:none}
  table.t-card tbody{display:block}
  table.t-card tbody tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:12px;padding:10px 14px;margin-bottom:10px;box-shadow:var(--sh-1);height:auto}
  table.t-card tbody tr:hover{background:var(--surface)}
  table.t-card td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border:0;height:auto;min-height:0;padding:5px 0;text-align:right;white-space:normal}
  table.t-card td::before{content:attr(data-rotulo);font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;flex:0 0 auto}
  table.t-card td:not([data-rotulo]),table.t-card td[data-rotulo=""],
  table.t-card td[colspan]{justify-content:flex-start;text-align:left}
  table.t-card td[data-rotulo=""]::before,table.t-card td[colspan]::before{content:none}
  table.t-card td:empty{display:none}
}

/* Celular: nenhuma linha longa corta — quebra sempre dentro do cartão */
@media (max-width:767px){
  .card,.out{overflow-wrap:anywhere;min-width:0}
}

/* Checklist de CAMADAS dos mapas (componente compartilhado — mesmo estilo do
   Mapa da Rede): chips compactos que QUEBRAM linha — vários por fileira em vez
   de um por linha (a lista vertical empurrava o mapa para fora da tela). */
.camadas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:150px;
  overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:6px;
  background:var(--surface)}
.camada-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  line-height:1.2;cursor:pointer;padding:4px 10px;border-radius:16px;
  border:1px solid var(--line);white-space:nowrap}
.camada-item:hover{background:var(--pri-soft)}
.camada-item:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}
.camada-item input{accent-color:var(--pri);cursor:pointer;width:14px;height:14px;
  min-height:0;margin:0;flex:0 0 14px}
.camada-item.off{opacity:.55}
.camada-item small{color:var(--muted)}
.cam-btn{flex:0 0 auto;white-space:nowrap}



/* ---------------------------------------------------------------------------
   ROLAGEM SEMPRE VISÍVEL (.rolagem-sempre)
   A barra nativa do macOS/iOS é sobreposta e some sozinha — não há CSS que a
   force a ficar. Por isso desenhamos a nossa: sempre visível, nos dois eixos,
   arrastável, refletindo a posição real. app.js liga automaticamente.
   --------------------------------------------------------------------------- */
.rolagem-sempre{overflow:auto;-webkit-overflow-scrolling:touch}
.rolvis-env{position:relative}
.rolvis-h,.rolvis-v{position:absolute;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;z-index:8;display:none}
.rolvis-h{left:2px;right:14px;bottom:2px;height:11px}
.rolvis-v{top:2px;bottom:14px;right:2px;width:11px}
.rolvis-h > i,.rolvis-v > i{position:absolute;background:var(--pri);border-radius:8px;
  display:block;cursor:grab;transition:background .12s}
.rolvis-h > i{top:1px;bottom:1px;min-width:30px}
.rolvis-v > i{left:1px;right:1px;min-height:30px}
.rolvis-h:hover > i,.rolvis-v:hover > i,.rolvis-arrastando > i{background:var(--pri-hover)}
.rolvis-arrastando > i{cursor:grabbing}
/* a barra ocupa a borda: o conteúdo ganha folga para não ficar embaixo dela */
.rolagem-sempre{padding-bottom:15px;padding-right:15px}
/* coluna fixa (sticky) só funciona no Chrome com bordas separadas */
.rolagem-sempre > table{border-collapse:separate;border-spacing:0;
  /* overflow:hidden (cantos arredondados) quebra o position:sticky das células:
     a tabela vira o contexto de rolagem e a coluna fixa deixa de grudar. */
  overflow:visible}
.rolagem-sempre > table th,.rolagem-sempre > table td{border-right:0}

/* Faixa de AMBIENTE DE DEMONSTRAÇÃO — fixa no topo, ACIMA de tudo, mas o
   layout reserva a altura dela (--h-faixa), então ela nunca cobre o cabeçalho
   nem o botão de menu no celular. */
#_faixaDemo{position:fixed;top:0;left:0;right:0;height:var(--h-faixa);z-index:60;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#B45309;color:#fff;text-align:center;letter-spacing:.02em;
  font:700 12px/1.2 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  padding:0 10px;box-shadow:0 2px 8px #0003}
#_faixaDemo .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767px){
  /* no celular a faixa encurta o texto para caber numa linha baixa */
  #_faixaDemo{font-size:11px}
}

/* Unidade da sessão: some a caixa de seleção, fica o lugar. Quem opera precisa
   saber de onde são os dados que está olhando — só que como INFORMAÇÃO, não
   como mais um campo para preencher. */
.unidade-sessao{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--ink-2);background:var(--pri-soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;margin:0 0 10px}
.unidade-sessao b{color:var(--ink)}
.unidade-sessao small{color:var(--muted)}
.unidade-sessao.alerta{background:var(--warn-soft);border-color:var(--warn-linha);color:var(--warn-tinta)}

/* ============================================================================
   TAMANHO DO TEXTO — escolha do OPERADOR (Aa no cabeçalho; molde do tema).
   Compacto é o padrão histórico: sem data-texto, NENHUMA regra daqui aplica.
   Sobe só a superfície de LEITURA e TRABALHO: corpo, rótulos, campos, botões,
   tabelas e avisos. Títulos, sidebar, chips e o modo telão ficam como estão —
   a densidade deles é desenho, não leitura corrida. Totem e painel não usam
   esta folha; o portal/mobile segue o ajuste de fonte do próprio aparelho.
   ========================================================================= */
html[data-texto="confortavel"] body{font-size:15px}
html[data-texto="confortavel"] label{font-size:14px;line-height:20px}
html[data-texto="confortavel"] input,
html[data-texto="confortavel"] select,
html[data-texto="confortavel"] textarea{font-size:15px}
html[data-texto="confortavel"] button{font-size:15px}
html[data-texto="confortavel"] table{font-size:15px}
html[data-texto="confortavel"] table.compacta th,
html[data-texto="confortavel"] table.compacta td{font-size:14px}
html[data-texto="confortavel"] .out{font-size:14px}
html[data-texto="confortavel"] small{font-size:12.5px;line-height:17px}

html[data-texto="ampliado"] body{font-size:16px}
html[data-texto="ampliado"] label{font-size:15px;line-height:22px}
html[data-texto="ampliado"] input,
html[data-texto="ampliado"] select,
html[data-texto="ampliado"] textarea{font-size:16px}
html[data-texto="ampliado"] button{font-size:16px}
html[data-texto="ampliado"] table{font-size:16px}
html[data-texto="ampliado"] table.compacta th,
html[data-texto="ampliado"] table.compacta td{font-size:15px}
html[data-texto="ampliado"] .out{font-size:15px}
html[data-texto="ampliado"] small{font-size:13px;line-height:18px}