:root {
  --bg: #0f1419;
  --surface: #1a2129;
  --surface-2: #232d38;
  --text: #f4f7fa;
  --muted: #b3c0cc;
  --accent: #2f80ed;
  --accent-strong: #1f6fe0;
  --ok: #2e9e5b;
  --warn: #c9860a;
  --danger: #d64545;
  --danger-strong: #b81f1f;
  --focus: #7db3ff;
  --radius: 16px;
  --tap: 64px;

  /* Acessibilidade: escala de texto/alvos, controlada pela família ou pelo idoso. */
  --font-scale: 1;

  /* Glassmorfismo: superfícies translúcidas com desfoque. */
  --glass: rgba(24, 31, 40, 0.60);
  --glass-2: rgba(37, 48, 60, 0.52);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: 18px;
  /* Liquid glass do dock (tema escuro): mais translúcido que os cards, borda
     de luz mais viva — a peça flutua "acima" do conteúdo. */
  --dock-bg: rgba(28, 36, 46, 0.62);
  --dock-border: rgba(255, 255, 255, 0.18);
  --shadow-1: 0 6px 22px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.38);
  --ambient-a: rgba(47, 128, 237, 0.20);
  --ambient-b: rgba(31, 157, 107, 0.16);

  /* ---------- Vocabulário de movimento ----------
     Um só conjunto de curvas/durações para toda a SPA — animação coerente,
     não improvisada elemento a elemento. Tom calmo e reconfortante: sem
     "bounce" agressivo, tudo curto. Desligado por completo em "menos
     movimento" (ver bloco no fim do arquivo). */
  --ease-out: cubic-bezier(.22, .7, .3, 1);      /* desaceleração suave */
  --ease-spring: cubic-bezier(.2, .9, .3, 1.08); /* leve "assentar", sem exagero */
  --dur-1: .16s;  /* toque/hover */
  --dur-2: .28s;  /* transições de estado */
  --dur-3: .5s;   /* entradas */
}

* { box-sizing: border-box; }

html { font-size: calc(20px * var(--font-scale)); }

/* Fundo ambiente com brilhos suaves — base do glassmorfismo. A cor de base
   fica no body; os brilhos ficam num ::before que respira MUITO devagar
   (28s), dando vida discreta à tela sem distrair. */
body { background: var(--bg); }
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% -5%, var(--ambient-a), transparent 60%),
    radial-gradient(55% 45% at 95% 8%, var(--ambient-b), transparent 62%),
    radial-gradient(70% 60% at 50% 115%, rgba(47, 128, 237, 0.10), transparent 60%);
  animation: ambient-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.5%, -1.2%, 0) scale(1.05); }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Sensação nativa no toque: sem flash azul de tap nem zoom por duplo toque. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
button, a.btn { touch-action: manipulation; }

/* Safe area (notch/gesto) de Android e iOS: o conteúdo nunca fica sob
   recortes de tela — vale para todas as páginas do app. */
.app {
  max-width: 560px; margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top, 0px))
           calc(18px + env(safe-area-inset-right, 0px))
           calc(120px + env(safe-area-inset-bottom, 0px))
           calc(18px + env(safe-area-inset-left, 0px));
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
/* A marca pode encolher (o ícone permanece) para o cabeçalho nunca estourar a
   largura quando chip de voz + conta + instalar aparecem juntos. */
.topbar .brand { min-width: 0; flex: 0 1 auto; }
.topbar .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex: 0 1 auto; min-width: 0; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem; letter-spacing: .2px;
  text-decoration: none; color: inherit;
}
.brand small { color: var(--muted); font-weight: 500; display: block; font-size: .7rem; }
.brand-mark { border-radius: 9px; flex: none; }
.proto-badge {
  background: var(--surface-2); color: var(--muted);
  border: 1px solid #33414f; border-radius: 999px;
  padding: 4px 10px; font-size: .7rem;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
/* Chip de conta: ícone + (nome / papel) em duas linhas. Era inline-block com
   nowrap, o que espremia o conteúdo de duas linhas num círculo e cortava o
   texto — agora é flex, com o bloco de texto podendo encolher. */
.account-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 6px 14px; font-size: .85rem; font-weight: 600; text-decoration: none;
  max-width: 150px; overflow: hidden; flex: 0 1 auto; min-width: 0;
}
.account-chip-text { display: flex; flex-direction: column; min-width: 0; }
.account-chip-name,
.account-chip-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip:hover { background: var(--surface); }
.install-btn {
  background: var(--surface-2); color: var(--text);
  border: 1px solid #3a4855; border-radius: 999px;
  padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.install-btn:hover { background: var(--surface); }
/* Botão-ícone do cabeçalho (ex.: copiloto de voz). Alvo confortável (44px),
   redondo, discreto — é ferramenta, não decisão. */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--glass-border); cursor: pointer;
  font-size: 1.3rem; line-height: 1; flex: none;
  transition: background var(--dur-2) var(--ease-out);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Chip de voz do cabeçalho: ícone + rótulo visível "Voz" (pílula). Para 60+ o
   texto visível junto do ícone é o que garante o reconhecimento (PMC9026834),
   por isso não é só-ícone. Compacto para caber no cabeçalho. */
.voice-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--glass-border); cursor: pointer;
  font-size: .9rem; font-weight: 600; line-height: 1; flex: none;
  transition: background var(--dur-2) var(--ease-out);
}
.voice-chip .voice-chip-icon { font-size: 1.15rem; }
/* Em telas bem estreitas o cabeçalho não comporta marca + "Voz" + conta +
   instalar. O rótulo de identidade (quem sou eu) é o que importa para não
   confundir perfis; o chip de voz recolhe para só o ícone (mantém aria-label),
   e a marca some (o ícone continua). */
@media (max-width: 430px) {
  .topbar .brand span { display: none; }
  .voice-chip .voice-chip-label { display: none; }
  .voice-chip { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 50%; }
  .account-chip { max-width: 140px; }
}
.voice-chip:hover { background: var(--surface); }
.voice-chip:active { transform: scale(.96); }
.voice-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.voice-chip[aria-pressed="true"] { background: var(--ok); color: #06251a; border-color: var(--ok); }
:root[data-motion="reduced"] .voice-chip { transition: none; }
:root[data-motion="reduced"] .voice-chip:active { transform: none; }
.icon-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
:root[data-motion="reduced"] .icon-btn { transition: none; }
.offline-banner {
  background: var(--warn); color: #1b1200; text-align: center;
  font-weight: 600; font-size: .9rem; padding: 8px 12px;
}
.call-card {
  flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 68px; text-align: left;
}
.call-card .call-name { font-size: 1.15rem; font-weight: 700; }
.call-card .muted { font-size: .85rem; }

h1 { font-size: 1.7rem; margin: 14px 0 2px; }

/* Cabeçalho compacto da home do idoso: saudação + data num bloco enxuto.
   Antes a saudação (h1) e a data (com dia da semana grande, quebrado em duas
   linhas) somavam ~1/3 da tela no mobile antes de qualquer ação. */
.home-head { margin: 6px 0 12px; }
.home-head h1 { font-size: 1.5rem; margin: 0; line-height: 1.15; }
.home-head .big-date {
  font-size: 1.05rem; color: var(--muted); margin: 4px 0 0; line-height: 1.3;
}
.home-head .big-date .weekday {
  font-size: 1.05rem; color: var(--text); font-weight: 700; text-transform: capitalize;
}
/* No modo simples, um degrau maior — mas ainda compacto. */
:root[data-simple="on"] .home-head h1 { font-size: 1.7rem; }
:root[data-simple="on"] .home-head .big-date,
:root[data-simple="on"] .home-head .big-date .weekday { font-size: 1.15rem; }
/* Marca compacta: sem subtítulo de marketing na tela do idoso. */
.brand-compact { font-size: 1rem; }
h2 { font-size: 1.15rem; margin: 22px 0 10px; color: var(--muted); text-transform: none; }
p { margin: 6px 0; }
.muted { color: var(--muted); }

.card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 0;
  box-shadow: var(--shadow-1);
  /* Realce sutil de borda superior: dá "profundidade de vidro" sob a luz. */
  transition: box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
/* Brilho de topo do vidro — separado para não conflitar com bordas por estado
   (ex.: .late-card, .danger-border), que continuam vencendo. */
.card { position: relative; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
}
.card h3 { margin: 0 0 6px; font-size: 1.15rem; }

.big-date { font-size: 1.35rem; color: var(--text); line-height: 1.35; margin: 4px 0 10px; }
.big-date .weekday { font-size: 1.7rem; text-transform: capitalize; }

.btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--tap);
  border: none; border-radius: var(--radius);
  font-size: 1.2rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong)); cursor: pointer;
  padding: 14px 18px; margin: 10px 0;
  box-shadow: 0 6px 18px rgba(47, 128, 237, 0.28);
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              filter var(--dur-1) var(--ease-out);
}
/* Sheen: uma faixa de luz atravessa o botão no hover — feedback tátil discreto
   que reforça "isto é clicável", sem chamar atenção parada. */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); pointer-events: none;
  opacity: 0;
}
.btn:hover::after { animation: btn-sheen .7s var(--ease-out); }
@keyframes btn-sheen {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(47, 128, 237, 0.34); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.btn.secondary {
  background: var(--glass-2); color: var(--text);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-1);
}
.btn.secondary:hover { filter: brightness(1.12); }
.btn.ok { background: #1e7e46; }
.btn.warn { background: #ffb02e; color: #1b1200; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: var(--danger-strong); }
.btn.small { min-height: 48px; font-size: 1rem; margin: 6px 0; }

.btn:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid var(--focus); outline-offset: 3px;
}

/* ---------- Dock único (liquid glass) — navegação + SOS numa peça só ----------
   Estética "liquid glass" da Apple: superfície translúcida com blur pesado e
   saturação alta, borda superior clara (realce de luz), sombra flutuante e
   cantos bem arredondados. Navegação rápida e o SOS vivem juntos — o SOS é o
   item em destaque. Flutua afastado das bordas, não cola no fundo da tela. */
.dock {
  position: fixed; z-index: 50;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 536px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px;
  border-radius: 28px;
  border: 1px solid var(--dock-border);
  background: var(--dock-bg);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 12px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22);
  animation: dock-rise .4s var(--ease-out) both;
}
/* Brilho especular no topo (a "luz" do vidro) — puramente decorativo. */
.dock::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%);
}
@keyframes dock-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
:root[data-motion="reduced"] .dock { animation: none; }

.dock-nav { display: flex; gap: 4px; }
.dock-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 6px 4px;
  border: 0; border-radius: 18px;
  background: transparent; color: var(--text);
  font: inherit; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.dock-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.dock-item:active { transform: scale(.94); }
.dock-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.dock-icon { font-size: 1.4rem; line-height: 1; }
/* Rótulo legível para 60+ (a literatura converge em ≥16px para leitura curta;
   com a base de 20px, .8rem = 16px). Cor do texto pleno, não muted. */
.dock-label { font-size: .8rem; font-weight: 700; color: var(--text); }

/* Linha de contato/ajuda: Família (menor, verde suave) + SOS (destaque, maior). */
.dock-actions { display: flex; gap: 8px; }
.dock-family {
  flex: 0 0 34%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 90%, #fff), var(--ok));
  color: #fff; font-size: 1.05rem; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ok) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
.dock-family:hover { filter: brightness(1.06); }
.dock-family:active { transform: scale(.97); }
.dock-family:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.dock-family-icon { font-size: 1.2rem; }

/* SOS: o item em destaque dentro do dock — grande, vermelho, mas coerente. */
.dock-sos {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--danger), var(--danger-strong));
  color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--danger) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}
.dock-sos:hover { filter: brightness(1.06); }
.dock-sos:active { transform: scale(.98); }
.dock-sos:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.dock-sos-icon { font-size: 1.3rem; }
:root[data-motion="reduced"] .dock-item,
:root[data-motion="reduced"] .dock-sos,
:root[data-motion="reduced"] .dock-family { transition: none; }

/* Modo simples: tudo um degrau maior; família e SOS empilhados para alvos amplos. */
:root[data-simple="on"] .dock-item { min-height: 64px; }
:root[data-simple="on"] .dock-label { font-size: .84rem; }
:root[data-simple="on"] .dock-actions { flex-direction: column; }
:root[data-simple="on"] .dock-family { flex: 1 1 auto; min-height: 64px; }
:root[data-simple="on"] .dock-sos { min-height: 76px; font-size: 1.4rem; }

/* Reserva espaço no fim do conteúdo para não ficar sob o dock (só na home).
   Altura do dock ≈ nav 56 + gap + linha família/SOS 64 + paddings + folga.
   Medido com margem extra para o card de água nunca ficar cortado. */
.app:has(~ .dock:not(.hidden)) { padding-bottom: calc(272px + env(safe-area-inset-bottom, 0px)); }
@supports not (selector(:has(*))) {
  body:has(#dock) .app { padding-bottom: calc(272px + env(safe-area-inset-bottom, 0px)); }
}
.app.family { max-width: 720px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill.ok { background: rgba(46,158,91,.18); color: #7ee2a3; }
.pill.warn { background: rgba(201,134,10,.18); color: #f2c46b; }
.pill.danger { background: rgba(214,69,69,.2); color: #ff9a9a; }
.pill.info { background: rgba(47,128,237,.18); color: #9cc4ff; }
.pill.muted { background: var(--surface-2); color: var(--muted); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #2a3742; }
.row:last-child { border-bottom: none; }
.row .label { font-weight: 600; }

.samu {
  display: block; color: #fff; text-decoration: none;
  background: var(--danger); border: 2px solid var(--danger-strong);
  border-radius: var(--radius); padding: 16px; text-align: center;
  box-shadow: 0 8px 24px rgba(184,31,31,.35);
}
.samu:hover { background: var(--danger-strong); }
.samu .num { font-size: 2.6rem; font-weight: 800; letter-spacing: 2px; margin: 4px 0; }
/* Botão do cartão de segurança no Modo Evento Agudo: calmo (não vermelho —
   o vermelho é só o SAMU), largo e óbvio, para a pessoa confusa achar de
   imediato. */
.btn-reassure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 64px; margin: 12px 0;
  font-size: 1.15rem; font-weight: 700;
}

.notice { background: var(--surface-2); border-left: 4px solid var(--accent); padding: 12px 14px; border-radius: 8px; font-size: .9rem; color: var(--muted); }
.notice.danger-note { border-left-color: var(--danger); color: var(--text); }
/* Aviso dentro do formulário de login (acima do botão): precisa de respiro
   próprio e não pode mostrar contorno de foco ao receber focus() por script. */
#formMsg { margin: 4px 0 12px; }
#formMsg:focus { outline: none; }
#formMsg:focus-visible { outline: 3px solid var(--danger); outline-offset: 2px; }
/* !important: .hidden e [hidden] precisam vencer displays declarados depois
   (.modal e .dose-overlay são flex e vinham "escondidos" ainda visíveis,
   bloqueando os cliques da página inteira). */
.hidden { display: none !important; }
[hidden] { display: none !important; }
.stack > * + * { margin-top: 10px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-2); color: var(--text); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-2);
  padding: 12px 18px; border-radius: 12px; max-width: 90%; z-index: 50;
  animation: toast-in var(--dur-3) var(--ease-spring);
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* Máxima / Mínima lado a lado (com "/" no meio, como se lê a pressão) + Pulso.
   align-items:end faz os campos alinharem pela BASE mesmo quando um rótulo
   ocupa duas linhas — antes um rótulo maior empurrava só o seu campo para
   baixo, desalinhando tudo. */
.bp-inputs {
  display: flex; align-items: end; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.bp-field { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; }
.bp-field-pulse { flex: 1 1 80px; }
/* A "/" fica ALINHADA À LINHA DOS INPUTS (não flutua entre rótulo e campo):
   ancora na base como os inputs e sobe metade da altura do input. */
.bp-sep {
  align-self: flex-end; font-size: 2rem; font-weight: 700; color: var(--muted);
  line-height: 1; height: 56px; display: flex; align-items: center;
}
.bp-num {
  width: 100%; padding: 14px 10px; border-radius: 14px; text-align: center;
  border: 2px solid var(--glass-border); background: var(--surface-2); color: var(--text);
  font-size: 1.6rem; font-weight: 700; min-width: 0;
}
.bp-num:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.bp-inputs input {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 1px solid #3a4855; background: var(--surface-2); color: var(--text);
  font-size: 1rem; min-width: 0;
}

/* Campo de texto padrão (substitui estilos inline repetidos nas páginas). */
.field-input {
  width: 100%; padding: 14px; border-radius: 12px;
  border: 1px solid #3a4855; background: var(--surface-2); color: var(--text);
  font-size: 1rem; margin: 6px 0 12px;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.field-input:hover { border-color: color-mix(in srgb, var(--accent) 45%, #3a4855); }
/* Foco com halo suave, além do outline de acessibilidade. */
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.field-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Código numérico (MFA): grande, centralizado e espaçado. */
.code-input { text-align: center; letter-spacing: 6px; font-size: 1.4rem; }
/* Senha com botão "mostrar/ocultar" embutido. */
.password-wrap { position: relative; margin: 6px 0 12px; }
.password-wrap .field-input { margin: 0; padding-right: 96px; }
.toggle-pass {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 40px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid #3a4855; background: var(--surface); color: var(--muted);
  font-size: .85rem; font-weight: 600;
}
.toggle-pass:hover { color: var(--text); }

/* ---------- Site institucional (landing) ---------- */
.site { max-width: 1080px; margin: 0 auto; padding: 0 20px 64px; }
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 0; position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  /* NÃO transiciona padding: mudar a ALTURA da barra sticky ao rolar deslocava
     o layout e fazia o scroll oscilar no limiar → tremor. Só o VISUAL anima. */
  transition: background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Ao rolar, a barra "descola" do conteúdo: vidro fosco reforçado, mais opaca e
   com uma sombra sutil. Mantém a MESMA ALTURA (sem padding/margin) — só muda o
   que não causa reflow, então nada de tremor. */
.site-nav.scrolled {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 6px 24px -14px rgba(0,0,0,.5);
}
.site-nav .brand { font-size: 1.15rem; }
.site-nav .nav-links { display: flex; gap: 8px; align-items: center; }
.site-nav .nav-links a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: 8px 10px; border-radius: 10px; }
.site-nav .nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-cta { background: var(--accent); color: #fff !important; font-weight: 700; }
.nav-cta:hover { background: var(--accent-strong) !important; }
.hide-mobile { display: none; }

.hero {
  position: relative; overflow: hidden;
  border-radius: 28px; margin-top: 8px;
  padding: 64px 32px; text-align: center;
  background: var(--surface);
  border: 1px solid #263340;
}
/* Conteúdo acima das camadas de fundo. */
.hero > * { position: relative; z-index: 1; }
/* Aurora: dois brilhos que derivam devagar por caminhos diferentes, dando
   ao herói um fundo vivo (não estático) mas discreto. */
.hero::before {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 20% 22%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(34% 40% at 80% 78%, color-mix(in srgb, var(--ok) 26%, transparent), transparent 62%),
    radial-gradient(30% 34% at 65% 18%, color-mix(in srgb, #9b6dff 22%, transparent), transparent 60%);
  filter: blur(8px);
  animation: hero-aurora 18s ease-in-out infinite alternate;
  will-change: transform;
}
/* Malha sutil sobreposta: textura fina que "respira" a opacidade. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  animation: hero-mesh 9s ease-in-out infinite alternate;
}
@keyframes hero-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2%, 3%, 0) rotate(4deg) scale(1.08); }
  100% { transform: translate3d(4%, -3%, 0) rotate(-3deg) scale(1.04); }
}
@keyframes hero-mesh { from { opacity: .5; } to { opacity: .9; } }

/* Partículas: pontos minúsculos que sobem devagar, dando PROFUNDIDADE ao
   herói sem ruído. CSS puro (sem canvas/lib) — cada camada é um conjunto de
   radial-gradients que translada num loop longo; o mask suaviza topo/base. */
.hero-particles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.hero-particles::before, .hero-particles::after {
  content: ""; position: absolute; inset: -20% 0; background-repeat: repeat;
  will-change: transform;
}
.hero-particles::before {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 20%, color-mix(in srgb, var(--accent) 70%, transparent), transparent),
    radial-gradient(1.4px 1.4px at 78% 35%, color-mix(in srgb, var(--ok) 65%, transparent), transparent),
    radial-gradient(1.8px 1.8px at 45% 70%, color-mix(in srgb, #9b6dff 60%, transparent), transparent),
    radial-gradient(1.3px 1.3px at 88% 82%, color-mix(in srgb, var(--accent) 55%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 30% 92%, color-mix(in srgb, var(--ok) 55%, transparent), transparent);
  background-size: 320px 320px;
  animation: particles-up 26s linear infinite;
}
.hero-particles::after {
  background-image:
    radial-gradient(1.2px 1.2px at 22% 12%, color-mix(in srgb, var(--ok) 55%, transparent), transparent),
    radial-gradient(1.1px 1.1px at 62% 48%, color-mix(in srgb, var(--accent) 50%, transparent), transparent),
    radial-gradient(1.3px 1.3px at 90% 28%, color-mix(in srgb, #9b6dff 45%, transparent), transparent),
    radial-gradient(1px 1px at 40% 80%, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  background-size: 240px 240px;
  opacity: .7;
  animation: particles-up 38s linear infinite reverse;
}
@keyframes particles-up {
  from { transform: translate3d(0, 6%, 0); }
  to   { transform: translate3d(0, -34%, 0); }
}

/* Eyebrow: rótulo curto que crava o posicionamento antes do título.
   Toque premium: um brilho suave percorre a pílula devagar. */
.hero-eyebrow {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
  font-size: .82rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.hero-eyebrow::before {
  content: "✦"; font-size: .7em; opacity: .85;
}
.hero-eyebrow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--accent) 45%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: eyebrow-sheen 5.5s ease-in-out 1.2s infinite;
}
@keyframes eyebrow-sheen {
  0%, 60% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.hero h1 {
  position: relative;
  font-size: clamp(2.1rem, 6.2vw, 3.4rem); line-height: 1.06;
  margin: 6px auto 14px; letter-spacing: -1.2px; max-width: 18ch; text-wrap: balance;
}
/* Glow suave atrás do título — profundidade sem prejudicar a legibilidade. */
.hero h1::before {
  content: ""; position: absolute; z-index: -1; inset: -18% -8%;
  background: radial-gradient(60% 120% at 50% 40%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  filter: blur(14px); opacity: .8;
  animation: title-glow 7s ease-in-out infinite alternate;
}
@keyframes title-glow { from { opacity: .55; } to { opacity: .95; } }
.hero .lede { font-size: clamp(1.08rem, 2.6vw, 1.32rem); color: var(--muted); max-width: 52ch; margin: 0 auto 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-actions .btn { width: auto; min-width: 220px; }
/* Prova de valor sob os botões: discreta, com marca-d'água de escudo. */
.hero-proof {
  margin: 24px auto 0; max-width: 46ch;
  color: var(--muted); font-size: .95rem; line-height: 1.5;
}
.hero-proof strong { color: var(--text); }
.hero-proof::before {
  content: "🛡️"; display: inline-block; margin-right: 6px; filter: saturate(.85);
}

.section { margin-top: 56px; }
.section h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--text); text-align: center; margin-bottom: 8px; }
.section .sub { color: var(--muted); text-align: center; max-width: 56ch; margin: 0 auto 28px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
/* Grade explícita de 4: recursos secundários em duas colunas pares (evita o
   card órfão que sobrava com 7 numa grade de 3). */
.grid-cards.grid-4 { grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
@media (max-width: 900px) { .grid-cards.grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-cards.grid-4 { grid-template-columns: 1fr; } }
.feature.compact { padding: 20px; }
.feature.compact h3 { font-size: 1.05rem; }
.feature.compact p { font-size: .9rem; }

/* ---------- Vitrine de recursos-âncora (texto + demonstração animada) ---------- */
.feature-showcase { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.showcase-row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 22px; padding: 28px;
  box-shadow: var(--shadow-1);
}
.showcase-row.reverse .showcase-demo { order: 2; }
.showcase-copy .ico { font-size: 1.8rem; }
.showcase-copy h3 { margin: 10px 0 8px; font-size: 1.3rem; }
.showcase-copy p { color: var(--muted); margin: 0; line-height: 1.55; }
.showcase-demo { display: flex; justify-content: center; }
@media (max-width: 720px) {
  .showcase-row { grid-template-columns: 1fr; gap: 20px; }
  .showcase-row.reverse .showcase-demo { order: 0; } /* visual sempre no topo no mobile */
}

/* Palco comum das demos: cartão de vidro com brilho ambiente. */
.demo {
  position: relative; width: 100%; max-width: 320px; min-height: 168px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 20px; border-radius: 18px;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

/* Demo 1 — confirmação de dose: a pílula "Tomei" acende e o status confirma. */
.demo-dose-head { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.demo-dose-pill { font-size: 1.2rem; }
.demo-dose-actions { display: flex; gap: 8px; }
.demo-chip {
  padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--glass-border); color: var(--muted);
}
.demo-chip.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: #7ee2a3; border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.demo-chip.warn { color: #f2c46b; }
.demo-dose .demo-chip.ok { animation: dose-press 4s var(--ease-out) infinite; }
.demo-dose-status { display: flex; align-items: center; gap: 6px; color: #7ee2a3; font-weight: 700; opacity: 0; }
.demo-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .8rem; }
.demo-dose .demo-dose-status { animation: dose-confirm 4s var(--ease-out) infinite; }
@keyframes dose-press {
  0%, 30% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); }
  40% { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); }
  50%, 100% { transform: scale(1); }
}
@keyframes dose-confirm {
  0%, 45% { opacity: 0; transform: translateY(6px); }
  60%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Demo 2 — SOS: anel pulsa em volta do núcleo, chamada aparece. */
.demo-sos { align-items: center; text-align: center; }
.demo-sos-core {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: var(--danger); color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: 1px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--danger) 45%, transparent);
  z-index: 1;
}
.demo-sos-ring {
  position: absolute; top: 24px; width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid var(--danger);
  animation: sos-pulse 2.2s var(--ease-out) infinite;
}
.demo-sos-call {
  margin-top: 4px; padding: 8px 16px; border-radius: 999px; font-weight: 700;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text);
  animation: sos-call 2.2s var(--ease-out) infinite;
}
@keyframes sos-pulse {
  0% { transform: scale(1); opacity: .8; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sos-call {
  0%, 20% { transform: translateY(6px); opacity: .3; }
  45%, 100% { transform: none; opacity: 1; }
}

/* Demo 3 — consentimento: interruptor liga/desliga; a linha de auditoria brilha. */
.demo-consent-row { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.demo-toggle {
  /* flex:none estava como style= inline no index.html e a CSP (style-src
     'self') o descartava — o interruptor encolhia dentro do flex. */
  flex: none;
  width: 52px; height: 30px; border-radius: 999px; position: relative;
  background: var(--surface); border: 1px solid var(--glass-border);
  animation: consent-track 4.5s var(--ease-out) infinite;
}
.demo-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  animation: consent-knob 4.5s var(--ease-out) infinite;
}
.demo-consent-log { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; }
.demo-eye { animation: consent-eye 4.5s var(--ease-out) infinite; }
@keyframes consent-track {
  0%, 45% { background: var(--ok); border-color: var(--ok); }
  55%, 90% { background: var(--surface); border-color: var(--glass-border); }
  100% { background: var(--ok); border-color: var(--ok); }
}
@keyframes consent-knob {
  0%, 45% { transform: translateX(22px); }
  55%, 90% { transform: translateX(0); }
  100% { transform: translateX(22px); }
}
@keyframes consent-eye {
  0%, 40% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.9); }
  60%, 100% { opacity: 1; transform: scale(1); }
}

/* Menos movimento: as demos congelam num estado LEGÍVEL (não some nada). */
@media (prefers-reduced-motion: reduce) {
  .demo-dose .demo-chip.ok, .demo-dose .demo-dose-status,
  .demo-sos-ring, .demo-sos-call, .demo-toggle, .demo-toggle::after, .demo-eye { animation: none; }
  .demo-dose-status { opacity: 1; }
  .demo-toggle { background: var(--ok); border-color: var(--ok); }
  .demo-toggle::after { transform: translateX(22px); }
  /* Medidor de reserva: mostra o valor final sem varrer o anel. */
  .reserve-fill { transition: none; }
}
:root[data-motion="reduced"] .reserve-fill { transition: none; }
:root[data-motion="reduced"] .demo-dose .demo-chip.ok,
:root[data-motion="reduced"] .demo-dose .demo-dose-status,
:root[data-motion="reduced"] .demo-sos-ring,
:root[data-motion="reduced"] .demo-sos-call,
:root[data-motion="reduced"] .demo-toggle,
:root[data-motion="reduced"] .demo-toggle::after,
:root[data-motion="reduced"] .demo-eye { animation: none; }
:root[data-motion="reduced"] .demo-dose-status { opacity: 1; }
:root[data-motion="reduced"] .demo-toggle { background: var(--ok); border-color: var(--ok); }
:root[data-motion="reduced"] .demo-toggle::after { transform: translateX(22px); }
/* ---------- Animações da landing ----------
   Entrada suave e curta (200–500ms). Tudo é desligado por
   prefers-reduced-motion e pelo ajuste "Menos movimento" do próprio app —
   movimento é desconforto real para parte do público. */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-eyebrow { animation: rise-in .5s var(--ease-out) both; }
.hero h1 { animation: rise-in .5s var(--ease-out) .07s both; }
.hero .lede { animation: rise-in .5s var(--ease-out) .14s both; }
.hero-actions { animation: rise-in .5s var(--ease-out) .21s both; }
.hero-proof { animation: rise-in .5s var(--ease-out) .28s both; }

/* ---------- Reveal ao rolar ----------
   Elementos [data-reveal] recebem .reveal-ready (via pwa.js) e ficam
   levemente abaixados e transparentes; ao entrar na viewport, .reveal-in os
   traz. --reveal-i (índice) escalona a entrada de irmãos numa grade.
   Só é armado com JS e sem "menos movimento" — sem isso, tudo já está visível. */
.reveal-ready {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
.reveal-in { opacity: 1; transform: none; }

.feature { background: var(--surface); border: 1px solid #263340; border-radius: 18px; padding: 22px;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.feature:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-2); }
/* No hover, o ícone do card ganha vida sutil. */
.feature .ico { transition: transform var(--dur-2) var(--ease-spring); }
.feature:hover .ico { transform: scale(1.12) rotate(-4deg); }

/* Respeito total ao "menos movimento" (sistema ou ajuste do app). */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero h1, .hero .lede, .hero-actions, .hero-proof { animation: none; }
  .feature:hover { transform: none; }
  .feature:hover .ico { transform: none; }
  .reveal-ready { opacity: 1; transform: none; transition: none; }
  body::before, .hero::before, .hero::after { animation: none; }
  .hero-particles { display: none; }
  .hero-eyebrow::after, .hero h1::before { animation: none; }
  .hero h1::before { opacity: .55; }
}
:root[data-motion="reduced"] .hero-eyebrow,
:root[data-motion="reduced"] .hero h1,
:root[data-motion="reduced"] .hero .lede,
:root[data-motion="reduced"] .hero-actions,
:root[data-motion="reduced"] .hero-proof { animation: none; }
:root[data-motion="reduced"] .feature:hover { transform: none; }
:root[data-motion="reduced"] .feature:hover .ico { transform: none; }
:root[data-motion="reduced"] .reveal-ready { opacity: 1; transform: none; transition: none; }
:root[data-motion="reduced"] body::before,
:root[data-motion="reduced"] .hero::before,
:root[data-motion="reduced"] .hero::after { animation: none; }
:root[data-motion="reduced"] .hero-particles { display: none; }
:root[data-motion="reduced"] .hero-eyebrow::after,
:root[data-motion="reduced"] .hero h1::before { animation: none; }
.feature .ico { font-size: 1.8rem; line-height: 1; }
.feature h3 { margin: 12px 0 6px; font-size: 1.15rem; }
.feature p { color: var(--muted); font-size: .95rem; margin: 0; }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.principle { border-left: 4px solid var(--accent); background: var(--surface); border-radius: 12px; padding: 18px 20px; }
.principle.green { border-left-color: var(--ok); }
.principle.red { border-left-color: var(--danger); }
.principle.amber { border-left-color: var(--warn); }
.principle h3 { margin: 0 0 6px; font-size: 1.05rem; }
.principle p { color: var(--muted); font-size: .92rem; margin: 0; }

/* Mini-demos dos princípios: mostram a regra em ação, sem depender de texto.
   Mesmo contrato das demos do showcase: decorativas (aria-hidden) e congeladas
   num estado LEGÍVEL quando há "menos movimento". */
.prin-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; margin: 0 0 12px; }
.prin-chip {
  padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--glass-border); color: var(--muted);
  white-space: nowrap;
}
/* Autonomia: a pessoa no centro, com anel de "dona da decisão". */
.prin-me { position: relative; font-size: 1.5rem; line-height: 1; margin-right: 4px; }
.prin-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--ok); animation: prin-ring 3.2s var(--ease-out) infinite;
}
@keyframes prin-ring { 0% { transform: scale(.9); opacity: .9; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.prin-chip.allow { color: #7ee2a3; border-color: color-mix(in srgb, var(--ok) 40%, transparent); animation: prin-allow 3.2s var(--ease-out) infinite; }
.prin-chip.deny { opacity: .55; }
@keyframes prin-allow { 0%, 25% { background: var(--surface-2); } 40%, 85% { background: color-mix(in srgb, var(--ok) 16%, transparent); } 100% { background: var(--surface-2); } }
/* Emergência: o 192 pulsa na frente; o registro espera a vez. */
.prin-chip.urgent {
  color: #fff; background: var(--danger); border-color: var(--danger);
  animation: prin-urgent 2.6s var(--ease-out) infinite;
}
@keyframes prin-urgent { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 18% { transform: scale(1.06); box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 0%, transparent); } }
.prin-chip.after { opacity: 0; animation: prin-after 2.6s var(--ease-out) infinite; }
@keyframes prin-after { 0%, 35% { opacity: 0; transform: translateX(-6px); } 55%, 92% { opacity: .65; transform: none; } 100% { opacity: 0; } }
/* Memórias: o lembrete só aparece com o selo de revisão humana. */
.prin-stamp {
  padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  background: color-mix(in srgb, var(--ok) 16%, transparent); color: #7ee2a3;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  opacity: 0; animation: prin-stamp 3.6s var(--ease-out) infinite;
  white-space: nowrap;
}
@keyframes prin-stamp { 0%, 30% { opacity: 0; transform: scale(.85) rotate(-4deg); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Menos movimento: cada demo congela no estado que conta a história. */
@media (prefers-reduced-motion: reduce) {
  .prin-ring, .prin-chip.allow, .prin-chip.urgent, .prin-chip.after, .prin-stamp { animation: none; }
  .prin-ring { opacity: .5; transform: none; }
  .prin-chip.allow { background: color-mix(in srgb, var(--ok) 16%, transparent); }
  .prin-chip.after { opacity: .65; }
  .prin-stamp { opacity: 1; }
}
:root[data-motion="reduced"] .prin-ring,
:root[data-motion="reduced"] .prin-chip.allow,
:root[data-motion="reduced"] .prin-chip.urgent,
:root[data-motion="reduced"] .prin-chip.after,
:root[data-motion="reduced"] .prin-stamp { animation: none; }
:root[data-motion="reduced"] .prin-ring { opacity: .5; transform: none; }
:root[data-motion="reduced"] .prin-chip.allow { background: color-mix(in srgb, var(--ok) 16%, transparent); }
:root[data-motion="reduced"] .prin-chip.after { opacity: .65; }
:root[data-motion="reduced"] .prin-stamp { opacity: 1; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.step { position: relative; background: var(--surface); border: 1px solid #263340; border-radius: 16px; padding: 22px 20px 20px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; margin-bottom: 10px;
}
.step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step p { color: var(--muted); font-size: .92rem; margin: 0; }

/* "Como funciona" vira uma jornada: ícone por etapa, número que pulsa na sua
   vez e setas ligando os passos quando os 4 cabem lado a lado. */
.step .step-ico { position: absolute; top: 20px; right: 18px; font-size: 1.55rem; line-height: 1; opacity: .95; }
.journey .step { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.journey .step:hover { transform: translateY(-4px); border-color: var(--accent); }
.journey .step::before { animation: step-pop 6s var(--ease-out) infinite; }
.journey .step:nth-child(2)::before { animation-delay: 1.5s; }
.journey .step:nth-child(3)::before { animation-delay: 3s; }
.journey .step:nth-child(4)::before { animation-delay: 4.5s; }
@keyframes step-pop {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  6% { transform: scale(1.12); box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
  12% { transform: scale(1); }
}
@media (min-width: 1000px) {
  .journey { grid-template-columns: repeat(4, 1fr); }
  .journey .step:not(:last-child)::after {
    content: "→"; position: absolute; top: 50%; right: -15px; transform: translateY(-50%);
    color: var(--accent); font-weight: 800; font-size: 1.15rem; opacity: .7; z-index: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey .step::before { animation: none; }
  .journey .step:hover { transform: none; }
}
:root[data-motion="reduced"] .journey .step::before { animation: none; }
:root[data-motion="reduced"] .journey .step:hover { transform: none; }

.tech-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tech-list span { background: var(--surface-2); border: 1px solid #33414f; border-radius: 10px; padding: 8px 14px; font-size: .9rem; font-weight: 600; }

/* CTA de fechamento: cartão de destaque com brilho ambiente, no fim da página. */
.closing-cta { margin-top: 72px; }
.closing-card {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 44px 28px;
  text-align: center;
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-2);
}
.closing-card h2 { margin-top: 0; }
.closing-card .hero-actions { margin-top: 22px; }

/* Escopo do produto: bloco de confiança, não caixa de alerta amarela. Barra
   lateral discreta na cor de acento, texto legível, sem tom de "cuidado!". */
.trust {
  border-radius: 18px; padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
}
.trust-badge {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: .78rem; font-weight: 700; letter-spacing: .3px;
}
.trust p { color: var(--muted); margin: 8px 0; line-height: 1.55; }
.trust p strong { color: var(--text); }

/* ---------- Rodapé profissional (landing + páginas legais) ----------
   Coluna de marca + 3 colunas de links. Links discretos (--muted) que
   acendem no acento ao passar. Cores por variável: acompanha tema claro. */
.site-footer { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--glass-border); color: var(--muted); font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px 24px; align-items: start; }
.foot-brand .brand { font-size: 1.15rem; }
.foot-brand p { margin: 12px 0 0; max-width: 34ch; line-height: 1.5; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); opacity: .8; margin-bottom: 2px;
}
.foot-col a { color: var(--muted); text-decoration: none; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--accent); }
.foot-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--glass-border); }
.foot-bottom p { margin: 0; }
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- Seção Investidores ----------
   Reaproveita .feature.compact (mesmos cards da landing). Grades explícitas
   de 3 e 2 colunas para métricas e time; CTA centralizado com ressalva. */
.grid-cards.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .grid-cards.grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-cards.grid-2 { grid-template-columns: 1fr; } }
.section-invest .invest-metrics { margin-top: 8px; }
.invest-metrics .stat-value { color: var(--accent); margin-bottom: 6px; }
.invest-team-title { text-align: center; margin: 40px 0 16px; font-size: 1.2rem; }
.invest-team { margin-top: 0; }
.invest-cta { text-align: center; margin-top: 28px; }
.invest-cta .btn { width: auto; min-width: 240px; }
.invest-cta .muted, .invest-disclaimer { max-width: 56ch; margin: 14px auto 0; line-height: 1.5; }

/* ---- Página de Investidores (dedicada, com gráficos) ---- */
.invest-hero { text-align: center; padding: 48px 0 8px; }
.invest-hero .lead { max-width: 62ch; margin: 16px auto 0; font-size: 1.15rem; line-height: 1.55; color: var(--muted); }
.chart-section { text-align: center; }
.chart-section .sub { max-width: 60ch; margin: 6px auto 20px; }
.chart-card {
  background: var(--surface); border: 1px solid var(--glass-border); border-radius: 20px;
  padding: 26px 22px; max-width: 780px; margin: 0 auto; box-shadow: var(--shadow-1);
}
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-note { max-width: 60ch; margin: 14px auto 0; }

/* Funil TAM/SAM/SOM — tons de teal do escuro (topo) ao claro (base) */
.funnel-tam { fill: #0f766e; }
.funnel-sam { fill: #14b8a6; }
.funnel-som { fill: #5eead4; }
.funnel-k { fill: #fff; font-weight: 800; font-size: 19px; }
.funnel-l { fill: rgba(255,255,255,.92); font-size: 12px; }
.funnel-k.dark, .funnel-l.dark { fill: #06302c; }

/* Barras de projeção */
.chart-bars .axis { stroke: var(--glass-border); stroke-width: 2; }
.chart-bars .bar { fill: color-mix(in srgb, var(--accent) 70%, var(--surface)); rx: 6; }
.chart-bars .bar-hi { fill: var(--accent); }
.chart-bars .bar-v { fill: var(--text); font-weight: 800; font-size: 14px; }
.chart-bars .bar-x { fill: var(--muted); font-weight: 600; font-size: 13px; }

/* Donut de mix de receitas */
.mix-card { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }
.chart-donut { width: 200px; height: 200px; flex: none; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--surface-2); stroke-width: 26; }
.donut-seg { fill: none; stroke-width: 26; }
.donut-seg.seg1 { stroke: var(--accent); }
.donut-seg.seg2 { stroke: #2dd4bf; }
.donut-seg.seg3 { stroke: #5eead4; }
.donut-seg.seg4 { stroke: #a7f3e4; }
.donut-mid { fill: var(--text); font-weight: 800; font-size: 15px; transform: rotate(90deg); transform-origin: 100px 100px; }
.donut-mid2 { fill: var(--muted); font-size: 11px; transform: rotate(90deg); transform-origin: 100px 100px; }
.mix-legend { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.mix-legend li { display: flex; align-items: center; gap: 10px; font-size: .98rem; }
.mix-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.mix-legend .dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.mix-legend .dot1 { background: var(--accent); }
.mix-legend .dot2 { background: #2dd4bf; }
.mix-legend .dot3 { background: #5eead4; }
.mix-legend .dot4 { background: #a7f3e4; }
.invest-cta-section { text-align: center; }
@media (max-width: 560px) { .mix-card { gap: 18px; } }

/* Animação de "desenho" dos gráficos ao revelar o card. As barras crescem de
   baixo, e as fatias do donut são traçadas. Disparado quando o .chart-card
   recebe .reveal-in (via pwa.js). Sem movimento: aparecem prontos. */
.chart-bars .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.chart-card.reveal-in .chart-bars .bar { animation: bar-grow .7s var(--ease-out) forwards; }
.chart-card.reveal-in .chart-bars .bar:nth-child(1) { animation-delay: .05s; }
.chart-card.reveal-in .chart-bars .bar:nth-child(2) { animation-delay: .13s; }
.chart-card.reveal-in .chart-bars .bar:nth-child(3) { animation-delay: .21s; }
.chart-card.reveal-in .chart-bars .bar:nth-child(4) { animation-delay: .29s; }
.chart-card.reveal-in .chart-bars .bar:nth-child(5) { animation-delay: .37s; }
@keyframes bar-grow { to { transform: scaleY(1); } }
.chart-bars .bar-v { opacity: 0; }
.chart-card.reveal-in .chart-bars .bar-v { animation: fade-in .5s ease .4s forwards; }
@keyframes fade-in { to { opacity: 1; } }
/* Donut: as fatias entram traçando (dashoffset animado). */
.chart-donut .donut-seg { transition: none; }
.chart-card.reveal-in .donut-seg { animation: donut-draw .9s var(--ease-out) both; }
@keyframes donut-draw { from { stroke-dasharray: 0 440; } }

@media (prefers-reduced-motion: reduce) {
  .chart-bars .bar { transform: none; animation: none !important; }
  .chart-bars .bar-v { opacity: 1; animation: none !important; }
  .chart-card.reveal-in .donut-seg { animation: none; }
}
:root[data-motion="reduced"] .chart-bars .bar { transform: none; animation: none !important; }
:root[data-motion="reduced"] .chart-bars .bar-v { opacity: 1; animation: none !important; }
:root[data-motion="reduced"] .chart-card.reveal-in .donut-seg { animation: none; }

/* ---------- Investidores: história ---------- */
.invest-hero .hero-actions { justify-content: center; margin-top: 22px; }
.invest-story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.invest-story-copy h2 { margin: 6px 0 12px; }
.invest-story-copy p { color: var(--muted); line-height: 1.6; margin: 0 0 12px; max-width: 52ch; }
.story-stat { background: var(--surface); border: 1px solid var(--glass-border); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 14px 18px; }
.story-stat b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1; }
.story-stat span { color: var(--muted); font-size: .92rem; }
.invest-story-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 720px) { .invest-story { grid-template-columns: 1fr; gap: 20px; } .invest-story-stats-row { grid-template-columns: 1fr; } }

/* ---------- Investidores: mockup de conversa (WhatsApp) ----------
   Recria a mensagem real que quase passou despercebida. Decorativo
   (role=img + aria-label descreve o conteúdo para leitores de tela). */
.wa-chat { background: var(--surface); border: 1px solid var(--glass-border); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-2); max-width: 380px; margin: 0 auto; width: 100%; }
.wa-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075e54; color: #fff; }
.wa-avatar { width: 38px; height: 38px; border-radius: 50%; background: #128c7e; display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.wa-peer { display: flex; flex-direction: column; line-height: 1.2; }
.wa-name { font-weight: 700; }
.wa-status { font-size: .74rem; opacity: .85; }
.wa-body { padding: 16px 12px; display: flex; flex-direction: column; gap: 8px;
  background-color: #0b141a;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.02) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.02) 0, transparent 40%); }
.wa-date { align-self: center; background: rgba(255,255,255,.08); color: #cbd5db; font-size: .68rem; font-weight: 700;
  letter-spacing: .5px; padding: 3px 10px; border-radius: 8px; margin-bottom: 4px; }
.wa-msg { max-width: 82%; padding: 7px 10px 5px; border-radius: 10px; position: relative; font-size: .92rem; line-height: 1.35; }
.wa-msg p { margin: 0; color: #e9edef; }
.wa-msg .wa-time { display: block; text-align: right; font-size: .64rem; color: rgba(233,237,239,.55); margin-top: 2px; }
.wa-msg.in { align-self: flex-start; background: #202c33; border-top-left-radius: 3px; }
.wa-msg.out { align-self: flex-end; background: #005c4b; border-top-right-radius: 3px; }
.wa-check { color: #53bdeb; }
.wa-msg.wa-alarm { background: #3a1d1d; box-shadow: 0 0 0 1.5px rgba(214,69,69,.55); }
.wa-msg.wa-alarm p { color: #ffd7d7; font-weight: 600; }
.wa-call { align-self: center; display: flex; align-items: center; gap: 8px; background: rgba(214,69,69,.14);
  border: 1px solid rgba(214,69,69,.4); color: #ff9e9e; border-radius: 10px; padding: 7px 12px; font-size: .82rem; font-weight: 600; }
.wa-call .wa-time { color: rgba(255,158,158,.7); font-size: .68rem; font-weight: 500; }
.wa-caption { margin: 0; padding: 12px 14px; background: var(--surface-2); color: var(--muted);
  font-size: .82rem; line-height: 1.45; border-top: 1px solid var(--glass-border); }
/* Uma pontinha de vida: o alarme pulsa suave ao revelar (respeitando reduced-motion). */
.chart-section .wa-msg.wa-alarm, .invest-story .wa-msg.wa-alarm { animation: wa-alarm-pulse 2.6s var(--ease-out) 1s 2; }
@keyframes wa-alarm-pulse { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(214,69,69,.55); } 50% { box-shadow: 0 0 0 4px rgba(214,69,69,.15); } }
@media (prefers-reduced-motion: reduce) { .wa-msg.wa-alarm { animation: none; } }
:root[data-motion="reduced"] .wa-msg.wa-alarm { animation: none; }

/* ---------- Investidores: quadrante competitivo ---------- */
.chart-quad { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }
.quad-plot { fill: var(--surface-2); stroke: var(--glass-border); }
.quad-cross { stroke: var(--muted); stroke-width: 1; opacity: .35; }
.quad-win { fill: color-mix(in srgb, var(--ok) 10%, transparent); stroke: var(--ok); stroke-width: 2; stroke-dasharray: 8 6; }
.quad-wintag { fill: var(--ok); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; }
.quad-axis { fill: var(--muted); font-size: 14px; font-weight: 600; }
.quad-axis.strong { fill: var(--text); font-weight: 800; }
.quad-comp circle { fill: #6ea8ff; stroke: var(--surface); stroke-width: 2.5; }
.quad-comp text { fill: var(--text); font-size: 16px; font-weight: 700; }
.quad-us circle { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.quad-us .quad-us-halo { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: none; }
.quad-us-name { fill: var(--text); font-size: 20px; font-weight: 850; }
.quad-us-sub { fill: var(--accent); font-size: 13px; font-weight: 700; }

/* ---------- Investidores: roadmap ---------- */
.invest-roadmap { list-style: none; margin: 8px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: road; }
.invest-roadmap li { position: relative; background: var(--surface); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 20px 18px; }
.invest-roadmap li::before { counter-increment: road; content: counter(road);
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; margin-bottom: 12px; }
.invest-roadmap .road-q { display: block; font-size: .72rem; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.invest-roadmap h3 { margin: 0 0 6px; font-size: 1.02rem; }
.invest-roadmap p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
@media (min-width: 760px) {
  .invest-roadmap li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -12px;
    transform: translateY(-50%); color: var(--accent); font-weight: 800; opacity: .6; }
}
@media (max-width: 760px) { .invest-roadmap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .invest-roadmap { grid-template-columns: 1fr; } }

/* ---------- Investidores: fotos da equipe ---------- */
.person-card .person-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.person-card .person-photo { width: 66px; height: 82px; object-fit: cover; object-position: top;
  border-radius: 12px; border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); flex: none; }
.person-card .person-head h3 { margin: 0; font-size: 1.1rem; }
.person-card .person-role { color: var(--accent); font-weight: 700; font-size: .85rem; }

/* ---------- Investidores: formulário de contato ---------- */
.invest-contact { max-width: 860px; margin: 0 auto; text-align: left; }
.invest-contact-intro { text-align: center; }
.invest-channels { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0 8px; }
.invest-channels .btn { width: auto; min-width: 200px; }
.wa-btn { background: #25d366; border-color: #25d366; color: #06331b; }
.wa-btn:hover { background: #1fbe5a; border-color: #1fbe5a; }
.invest-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin: 24px 0 8px; }
.invest-form .field { display: flex; flex-direction: column; gap: 6px; }
.invest-form .field-full { grid-column: 1 / -1; }
.invest-form label { font-weight: 700; font-size: .92rem; }
.invest-form label .opt { color: var(--muted); font-weight: 500; }
.invest-form input, .invest-form select, .invest-form textarea {
  background: var(--surface); border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 11px 13px; color: var(--text); font: inherit; font-size: .98rem; width: 100%; }
.invest-form input:focus, .invest-form select:focus, .invest-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.invest-form textarea { resize: vertical; min-height: 100px; }
.invest-form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.invest-form-foot .btn { width: auto; min-width: 200px; }
.form-status { margin: 0; font-weight: 700; font-size: .95rem; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--danger); }
/* Honeypot: fora da tela, fora do fluxo de tab — invisível a humanos. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .invest-form { grid-template-columns: 1fr; } }

/* ================= Console do superadmin (layout de dashboard) =================
   Sidebar fixa + área de conteúdo com uma seção por vez. Tema próprio (escuro,
   operacional), independente do tema "family" dos apps de cuidado. */
.admin-console { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.admin-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column;
  gap: 18px; padding: 20px 16px; background: var(--surface); border-right: 1px solid var(--glass-border); }
.admin-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; color: var(--text); text-decoration: none; padding: 4px 6px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.admin-nav-item:hover { background: var(--surface-2); color: var(--text); }
.admin-nav-item.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.admin-nav-badge { margin-left: auto; background: var(--warn); color: #1a1200; font-size: .7rem; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 6px; }
.admin-side-foot { display: flex; flex-direction: column; gap: 10px; }
.admin-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.admin-user-avatar { font-size: 1.4rem; }
.admin-user-text { display: flex; flex-direction: column; line-height: 1.25; font-size: .85rem; }
.admin-user-text b { font-size: .92rem; }
.admin-user-text span:last-child { color: var(--muted); font-size: .78rem; }

.admin-main { padding: 28px 32px 60px; max-width: 1100px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-head h1 { margin: 0 0 4px; font-size: 1.6rem; }
.admin-env { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 6px 14px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.admin-panel h2 { font-size: 1.25rem; margin: 0 0 6px; }
.admin-subhead { display: flex; align-items: center; gap: 12px; margin: 24px 0 4px; }
.admin-subhead h3 { margin: 0; font-size: 1.05rem; }

.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.admin-tile { background: var(--surface); border: 1px solid var(--glass-border); border-radius: 14px; padding: 18px; }
.admin-tile-v { font-size: 1.9rem; font-weight: 800; color: var(--accent); line-height: 1; }
.admin-tile-l { color: var(--muted); font-size: .85rem; margin-top: 6px; }

.admin-card { background: var(--surface); border: 1px solid var(--glass-border); border-radius: 14px; padding: 18px 20px; margin-top: 14px; }
.admin-toggle-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-toggle-card .label { display: block; margin-bottom: 4px; }
.admin-inv-config { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.admin-inv-config .btn { grid-column: 1 / -1; justify-self: start; }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field label { font-weight: 700; font-size: .9rem; }
.admin-input { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font: inherit; }
.admin-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
@media (max-width: 560px) { .admin-inv-config { grid-template-columns: 1fr; } }

.admin-list { display: flex; flex-direction: column; }
.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--glass-border); }
.admin-row:last-child { border-bottom: none; }

.admin-leads { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.admin-lead { background: var(--surface); border: 1px solid var(--glass-border); border-radius: 12px; padding: 14px 16px; }
.admin-lead.is-read { opacity: .6; }
.admin-lead-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-lead-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-lead-msg { margin: 10px 0; line-height: 1.5; white-space: pre-wrap; }

/* ---------- Gestão de contas ----------
   Cartões de vidro em vez de linhas de tabela: cada conta é um objeto com
   identidade (avatar), estado (etiquetas) e uma ação. Reusa os tokens de
   glass/sombra/movimento do resto do app — não inventa outro vocabulário. */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin: 16px 0 6px; }
.admin-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-filter { display: inline-flex; align-items: center; gap: 7px;
  background: var(--glass-2); color: var(--muted);
  border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.chip-filter:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.chip-filter.is-on { background: var(--accent); color: #fff; border-color: transparent; }
.chip-count { background: rgba(255,255,255,.16); border-radius: 999px;
  padding: 1px 8px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.chip-filter.is-on .chip-count { background: rgba(0,0,0,.22); }
.admin-search { max-width: 320px; flex: 1 1 220px; }

.admin-users { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Grid de 3 colunas (avatar | conteúdo | ação) em vez de flex: com flex, o
   botão herdava o width:100% do .btn e cobria o texto. O grid dá à ação uma
   coluna própria, que nunca invade a do meio. */
.user-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 16px; backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out); }
.user-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-1);
  border-color: rgba(255,255,255,.18); }
/* Desativada fica visivelmente apagada — mas ainda legível, porque é
   justamente a conta que o superadmin precisa encontrar para reativar. */
.user-card.is-off { opacity: .62; }
.user-card.is-off .user-name { text-decoration: line-through; }
.user-avatar { width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 10px rgba(47,128,237,.28); }
.user-main { min-width: 0; }
.user-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.user-name { font-weight: 700; font-size: 1rem; }
/* O papel/titular numa linha só: sem isto, "Titular (pessoa idosa)" quebrava
   em três linhas dentro da coluna estreita. */
.user-meta { color: var(--muted); font-size: .85rem; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
/* A ação anula o width:100% do .btn base e não estica com o cartão. */
.user-manage { width: auto; white-space: nowrap; }

/* Etiquetas: cor carrega significado, mas o TEXTO é sempre explícito —
   ninguém precisa decorar o que "azul" quer dizer (e daltonismo não quebra). */
.tag { font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.tag-real { background: rgba(46,158,91,.16); color: #7fd6a2; border-color: rgba(46,158,91,.3); }
.tag-seed { background: rgba(201,134,10,.16); color: #f0c273; border-color: rgba(201,134,10,.32); }
.tag-invite { background: rgba(47,128,237,.15); color: #8fbcf5; border-color: rgba(47,128,237,.3); }
.tag-beta { background: rgba(155,89,232,.18); color: #c9a6f5; border-color: rgba(155,89,232,.34); }
.tag-plan { background: rgba(47,128,237,.2); color: #a8cbfa; border-color: rgba(47,128,237,.34); }
.tag-trial { background: rgba(201,134,10,.14); color: #e8c48a; border-color: rgba(201,134,10,.28); }
.tag-mfa, .tag-key { background: var(--glass-2); color: var(--muted); border-color: var(--glass-border); }
.tag-off { background: rgba(214,69,69,.18); color: #f0a0a0; border-color: rgba(214,69,69,.36); }

/* Interruptor das contas demo, no topo da tela de Contas: é configuração da
   lista que está logo abaixo, não uma seção à parte. */
.admin-demo-bar { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px;
  background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 14px; }
.admin-demo-text { min-width: 0; }
.admin-demo-text .label { display: block; }
.admin-demo-text .muted { display: block; margin-top: 2px; }
.admin-demo-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.admin-demo-actions .btn { width: auto; }

/* ---------- Auditoria ----------
   Cada entrada responde quem/o quê/sobre quem/quando. A faixa colorida à
   esquerda separa as famílias de ação sem depender de ler o texto. */
.admin-audit { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.audit-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 12px 14px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--glass-border); border-left-width: 3px; }
.audit-icon { font-size: 1rem; line-height: 1.3; }
.audit-body { min-width: 0; }
.audit-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.audit-action { font-weight: 700; text-transform: capitalize; }
.audit-target { color: var(--muted); font-size: .88rem; }
.audit-who { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.audit-details { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.audit-chip { font-size: .74rem; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--glass-border); }
.audit-chip.is-warn { color: #f0c273; border-color: rgba(201,134,10,.34); }
.audit-time { color: var(--muted); font-size: .78rem; white-space: nowrap; cursor: help; }
/* Cor por família: emergência salta, acesso é neutro. */
.audit-emergencia { border-left-color: var(--danger); }
.audit-contas { border-left-color: var(--accent); }
.audit-acesso { border-left-color: #9b59e8; }
.audit-clinico { border-left-color: var(--ok); }
.audit-outros { border-left-color: var(--glass-border); }

/* ---------- Resumo da auditoria (barras) ----------
   Paleta categórica de 5 slots, validada para daltonismo e contraste em ambos
   os temas (scripts/validate_palette.js: CVD ΔE ≥ 8, sem cor-só). Cada
   categoria tem cor FIXA — a cor segue a entidade, nunca a posição no ranking.
   O rótulo e o número estão sempre em texto: a cor é reforço, não informação. */
.audit-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 16px; padding: 18px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; }
.audit-block-title { margin: 0 0 12px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.audit-bars { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(72px, 34%) 1fr auto;
  align-items: center; gap: 10px; }
.bar-label { font-size: .82rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
/* Trilho recessivo; o dado é o preenchimento. */
.bar-track { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
/* A largura vem de --bar-pct, definida por JS via CSSOM (a CSP proíbe style=
   inline). Padrão 0 para a barra nunca aparecer cheia se o JS não rodar. */
.bar-fill { display: block; height: 100%; border-radius: 999px;
  width: var(--bar-pct, 0%);
  transition: width var(--dur-3) var(--ease-out); }
.bar-value { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted);
  min-width: 2.5ch; text-align: right; }

/* Slots categóricos — tema escuro (superfície escura). */
.bar-emergencia { background: #d55181; }
.bar-clinico    { background: #199e70; }
.bar-acesso     { background: #3987e5; }
.bar-contas     { background: #c98500; }
.bar-outros     { background: #8a8f96; }

/* Escopo dos dados: controle permanente (não um alerta). Fica visível enquanto
   houver o que recortar e mostra o estado atual — a versão anterior era uma
   faixa de aviso cujo botão sumia junto com ela ao ser usado, prendendo o
   usuário no estado oposto. */
.audit-scope { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.audit-scope-label { color: var(--muted); font-size: .82rem; }
/* Segmentado: as duas opções sempre visíveis, a ativa em destaque — o usuário
   vê o que está selecionado E o que pode selecionar, sem descobrir por clique. */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--glass-border); }
.seg-opt { background: none; border: none; border-radius: 999px; cursor: pointer;
  padding: 6px 14px; font: inherit; font-size: .8rem; font-weight: 600; color: var(--muted);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.seg-opt:hover { color: var(--text); }
.seg-opt.is-on { background: var(--accent); color: #fff; }

/* Paginação */
.audit-pager { display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 16px; }
.audit-pager .btn { width: auto; }
.audit-pager .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Cartão de emergência: QR + carteira (conta.html) ---------- */
.ec-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.ec-qr { margin: 0; text-align: center; flex: 0 0 auto; }
/* Fundo branco sempre: um QR sobre superfície escura não é lido por leitor
   nenhum — o contraste do código precisa ser preto sobre branco. */
.ec-qr img { display: block; background: #fff; padding: 10px; border-radius: 12px;
  border: 1px solid var(--glass-border); }
.ec-qr figcaption { margin-top: 8px; max-width: 200px; }
.ec-side { flex: 1 1 260px; min-width: 0; }
.ec-link { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; margin-top: 6px; }
.ec-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ec-actions .btn { width: auto; }
.ec-danger { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--glass-border); }
.ec-danger .btn { width: auto; }

/* ---------- Modal de gestão ---------- */
.admin-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop { position: absolute; inset: 0; background: rgba(6,10,14,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.admin-sheet { position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto;
  background: var(--glass); border: 1px solid var(--dock-border); border-radius: 20px;
  box-shadow: var(--shadow-2); backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  animation: sheet-in var(--dur-3) var(--ease-spring); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.admin-sheet-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; background: inherit; }
.admin-sheet-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.admin-sheet-body { padding: 6px 22px 22px; }
.icon-close { background: var(--glass-2); border: 1px solid var(--glass-border); color: var(--text);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: .9rem; line-height: 1; }
.icon-close:hover { background: var(--surface-2); }

.admin-group { padding: 16px 0; border-bottom: 1px solid var(--glass-border); }
.admin-group:last-child { border-bottom: none; }
.admin-group h4 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.admin-group.is-danger h4 { color: #f0a0a0; }
/* Botões de ação não esticam: cheios, competiam visualmente com os campos e
   davam peso de "ação principal" a coisas secundárias. */
.admin-group > .btn, .admin-danger-zone > .btn { width: auto; }
.admin-switch-row { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-top: 14px; }
.admin-switch-row .label { display: block; }
.admin-switch-row .muted { display: block; margin-top: 2px; }

/* Zona irreversível: fechada por padrão — abrir é um ato deliberado. */
.admin-danger-zone { margin-top: 16px; border: 1px solid rgba(214,69,69,.34);
  border-radius: 12px; padding: 12px 14px; background: rgba(214,69,69,.06); }
.admin-danger-zone > summary { cursor: pointer; font-weight: 700; color: #f0a0a0; }
.admin-danger-zone[open] > summary { margin-bottom: 10px; }
body.has-modal { overflow: hidden; }

/* Responsivo: sidebar vira topo em telas estreitas. */
@media (max-width: 720px) {
  .admin-shell { grid-template-columns: 1fr; }
  /* Estreito: avatar e identidade na 1ª linha; a ação desce para a 2ª,
     ocupando a largura do conteúdo (não a do cartão inteiro). */
  .user-card { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
  .user-manage { grid-column: 2; justify-self: start; }
  .admin-search { max-width: none; }
  .admin-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
  .admin-nav-item { padding: 8px 10px; }
  .admin-side-foot { flex-direction: row; align-items: center; gap: 10px; }
  .admin-side-foot .btn { width: auto; }
  .admin-main { padding: 20px 16px 48px; }
}

/* ---------- Páginas legais (privacidade.html, termos.html) ----------
   Coluna de leitura estreita e confortável, tipografia calma. Tema-aware. */
.legal { max-width: 760px; margin: 40px auto 0; }
.legal .updated { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.12; margin: 0 0 12px; letter-spacing: -.5px; }
.legal .lead { color: var(--muted); font-size: 1.08rem; line-height: 1.55; margin: 0 0 8px; }
.legal h2 { font-size: 1.2rem; margin: 34px 0 10px; color: var(--text); }
.legal p { color: var(--muted); line-height: 1.7; margin: 0 0 14px; }
.legal ul { color: var(--muted); line-height: 1.7; margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent); }
.legal .legal-back { margin-top: 36px; }

@media (min-width: 720px) { .hide-mobile { display: flex; } }

/* Tema claro: aplicado quando o sistema é claro (e não forçado escuro) ou
   quando a família/idoso força o tema claro. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f7; --surface: #fff; --surface-2: #eaf0f6; --text: #10151b; --muted: #45566a;
    --glass: rgba(255, 255, 255, 0.66); --glass-2: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(16, 21, 27, 0.10);
    --dock-bg: rgba(255, 255, 255, 0.62); --dock-border: rgba(255, 255, 255, 0.9);
    --ambient-a: rgba(47, 128, 237, 0.16); --ambient-b: rgba(31, 157, 107, 0.12);
    --shadow-1: 0 6px 22px rgba(20, 40, 70, 0.10); --shadow-2: 0 14px 40px rgba(20, 40, 70, 0.16);
  }
  :root:not([data-theme="dark"]) .row { border-color: #e2e9f0; }
  :root:not([data-theme="dark"]) .hero,
  :root:not([data-theme="dark"]) .feature,
  :root:not([data-theme="dark"]) .step,
  :root:not([data-theme="dark"]) .principle,
  :root:not([data-theme="dark"]) .trust { border-color: color-mix(in srgb, var(--accent) 30%, #dbe4ec); }
}
:root[data-theme="light"] {
  --bg: #eef2f7; --surface: #fff; --surface-2: #eaf0f6; --text: #10151b; --muted: #45566a;
  --glass: rgba(255, 255, 255, 0.66); --glass-2: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(16, 21, 27, 0.10);
  --dock-bg: rgba(255, 255, 255, 0.62); --dock-border: rgba(255, 255, 255, 0.9);
  --ambient-a: rgba(47, 128, 237, 0.16); --ambient-b: rgba(31, 157, 107, 0.12);
  --shadow-1: 0 6px 22px rgba(20, 40, 70, 0.10); --shadow-2: 0 14px 40px rgba(20, 40, 70, 0.16);
}
/* Etiquetas de conta no tema claro: as cores do tema escuro são claras demais
   para texto sobre fundo branco. Aqui o texto escurece e o fundo clareia,
   mantendo contraste AA em ambos os temas. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tag-real { background: rgba(46,158,91,.14); color: #1d7343; border-color: rgba(46,158,91,.34); }
  :root:not([data-theme="dark"]) .tag-seed { background: rgba(201,134,10,.15); color: #8a5c00; border-color: rgba(201,134,10,.36); }
  :root:not([data-theme="dark"]) .tag-invite { background: rgba(47,128,237,.13); color: #1a5ec4; border-color: rgba(47,128,237,.32); }
  :root:not([data-theme="dark"]) .tag-beta { background: rgba(124,58,197,.13); color: #6b2fb5; border-color: rgba(124,58,197,.32); }
  :root:not([data-theme="dark"]) .tag-plan { background: rgba(47,128,237,.14); color: #1a5ec4; border-color: rgba(47,128,237,.34); }
  :root:not([data-theme="dark"]) .tag-trial { background: rgba(201,134,10,.13); color: #8a5c00; border-color: rgba(201,134,10,.3); }
  :root:not([data-theme="dark"]) .tag-off { background: rgba(214,69,69,.13); color: #a82121; border-color: rgba(214,69,69,.34); }
  :root:not([data-theme="dark"]) .admin-group.is-danger h4,
  :root:not([data-theme="dark"]) .admin-danger-zone > summary { color: #a82121; }
}
/* Barras da auditoria no tema claro: os MESMOS cinco hues, re-escalonados para
   a superfície clara (não é inversão automática). Validados com
   validate_palette.js --mode light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bar-emergencia { background: #e87ba4; }
  :root:not([data-theme="dark"]) .bar-clinico    { background: #1baf7a; }
  :root:not([data-theme="dark"]) .bar-acesso     { background: #2a78d6; }
  :root:not([data-theme="dark"]) .bar-contas     { background: #eda100; }
  :root:not([data-theme="dark"]) .bar-outros     { background: #9aa1a9; }
}
:root[data-theme="light"] .bar-emergencia { background: #e87ba4; }
:root[data-theme="light"] .bar-clinico    { background: #1baf7a; }
:root[data-theme="light"] .bar-acesso     { background: #2a78d6; }
:root[data-theme="light"] .bar-contas     { background: #eda100; }
:root[data-theme="light"] .bar-outros     { background: #9aa1a9; }

:root[data-theme="light"] .tag-real { background: rgba(46,158,91,.14); color: #1d7343; border-color: rgba(46,158,91,.34); }
:root[data-theme="light"] .tag-seed { background: rgba(201,134,10,.15); color: #8a5c00; border-color: rgba(201,134,10,.36); }
:root[data-theme="light"] .tag-invite { background: rgba(47,128,237,.13); color: #1a5ec4; border-color: rgba(47,128,237,.32); }
:root[data-theme="light"] .tag-beta { background: rgba(124,58,197,.13); color: #6b2fb5; border-color: rgba(124,58,197,.32); }
:root[data-theme="light"] .tag-plan { background: rgba(47,128,237,.14); color: #1a5ec4; border-color: rgba(47,128,237,.34); }
:root[data-theme="light"] .tag-trial { background: rgba(201,134,10,.13); color: #8a5c00; border-color: rgba(201,134,10,.3); }
:root[data-theme="light"] .tag-off { background: rgba(214,69,69,.13); color: #a82121; border-color: rgba(214,69,69,.34); }
:root[data-theme="light"] .admin-group.is-danger h4,
:root[data-theme="light"] .admin-danger-zone > summary { color: #a82121; }

:root[data-theme="light"] .row { border-color: #e2e9f0; }
:root[data-theme="light"] .hero,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .step,
:root[data-theme="light"] .principle,
:root[data-theme="light"] .trust { border-color: color-mix(in srgb, var(--accent) 30%, #dbe4ec); }

/* ==================================================================
   ACESSIBILIDADE — configurável pela família e pelo próprio idoso.
   As preferências viram atributos em <html> e reagem por CSS.
   ================================================================== */

/* Texto em negrito reforçado (baixa visão). */
:root[data-bold="on"] body { font-weight: 600; }
:root[data-bold="on"] .muted,
:root[data-bold="on"] p,
:root[data-bold="on"] .row .label { font-weight: 700; }

/* Movimento reduzido: desliga animações/transições (também respeita o SO). */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Identidade da sessão (quem sou eu, em que papel) ----------
   Todos os perfis da demonstração cuidam da MESMA titular. Sem dizer papel e
   escopo em voz alta, entrar como Ana, Marta ou Dra. Helena parecia a mesma
   sessão — a diferença existia no backend, mas nunca aparecia na tela. */

/* Etiqueta de papel: cor por papel, para diferenciar de relance. */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  border: 1px solid var(--glass-border);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
/* Duas variáveis por papel: --role-tint pinta o fundo, --role-ink pinta o
   TEXTO. Separar as duas é o ponto — derivar a tinta do texto por color-mix
   dava cinza médio sobre pílula quase branca e o rótulo sumia. Aqui a tinta é
   sempre escura e saturada no tema claro, e clara no escuro (bloco adiante). */
.role-badge.role-idoso                 { --role-tint: var(--accent);  --role-ink: #1b4fa8; }
.role-badge.role-familiar_responsavel  { --role-tint: var(--ok);      --role-ink: #145c33; }
.role-badge.role-familiar_observador   { --role-tint: #5b6b7d;        --role-ink: #33424f; }
.role-badge.role-cuidador_profissional { --role-tint: var(--warn);    --role-ink: #7a4e00; }
.role-badge.role-profissional_saude    { --role-tint: #9b6dff;        --role-ink: #5a2fb8; }
.role-badge.role-superadmin            { --role-tint: var(--danger);  --role-ink: #9c1f1f; }
.role-badge[class*="role-"] {
  background: color-mix(in srgb, var(--role-tint, var(--muted)) 20%, transparent);
  border-color: color-mix(in srgb, var(--role-tint, var(--muted)) 50%, transparent);
  color: var(--role-ink, var(--text));
}

/* Tema escuro: a tinta escura do bloco acima seria ilegível sobre o vidro
   escuro — aqui ela vira uma versão CLARA do mesmo matiz. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .role-badge[class*="role-"] {
    color: color-mix(in srgb, var(--role-tint, var(--muted)) 55%, #ffffff);
  }
}
:root[data-theme="dark"] .role-badge[class*="role-"] {
  color: color-mix(in srgb, var(--role-tint, var(--muted)) 55%, #ffffff);
}

/* Faixa de contexto no topo do painel da família. */
.care-context {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  margin: 10px 0 4px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
/* Contêiner do rosto: tamanho FIXO e circular. Era só `font-size` (servia a um
   emoji), então a <img> da foto entrava sem dimensão e ocupava metade da tela
   no celular. flex:none impede que o flex do cartão a estique. */
.care-context-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1; background: var(--surface-2); }
/* `place-items: center` do contêiner faz o item encolher para o conteúdo e a
   altura estourava (44x53 medido). `align-self: stretch` + inset zerado prende
   a imagem ao círculo. */
.care-context-avatar img { width: 100%; height: 100%; min-width: 0; min-height: 0;
  align-self: stretch; justify-self: stretch; object-fit: cover; display: block; }
.care-context-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.care-context-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.care-context-line strong { font-size: 1.02rem; }
.care-context-sub { color: var(--muted); font-size: .84rem; }

/* Chip de conta na topbar: nome + papel, em duas linhas. */
.account-chip-name { display: block; line-height: 1.15; }
.account-chip-role {
  display: block; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); line-height: 1.15;
}

/* Cartões de conta de demonstração: nome, papel e o que muda em cada perfil. */
.demo-card {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 16px; margin: 8px 0;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.demo-card:hover { background: var(--surface-2); }
.demo-card:active { transform: translateY(1px); }
.demo-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.demo-card-icon { font-size: 1.5rem; line-height: 1.2; }
.demo-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.demo-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-card-pitch { color: var(--muted); font-size: .84rem; line-height: 1.35; }

/* ---------- Barra de seções do painel da família ----------
   Antes as seis seções ficavam empilhadas: ~5.600px de rolagem (6,9 telas de
   celular), com "Localização" só na tela 3,9. Agora uma seção por vez, com
   barra fixa no topo e menu "Mais" para o que não cabe. */
.section-bar {
  position: sticky;
  /* Cola abaixo do notch/safe-area, não sob ele. */
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  margin: 14px 0 4px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--shadow-1);
}
/* Mobile-first compacto (padrão segmented/bottom-nav do iOS/Android): a aba
   INATIVA mostra só o ÍCONE (com aria-label, então leitor de tela lê o nome); a
   aba ATIVA se expande e mostra ÍCONE + RÓTULO INTEIRO num pill destacado. Como
   só um rótulo aparece por vez, NADA trunca — resolve de vez o "Al..."/"Rem...".
   "Mais" reflete a seção ativa do overflow (nome + ícone). */
.section-tabs { display: flex; align-items: center; gap: 6px; }

.section-tab {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; min-width: 0;
  min-height: 48px; min-width: 48px;
  padding: 8px 10px;
  border: 0; border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit; font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), flex-grow var(--dur-2) var(--ease-out);
}
/* Inativa: esconde o rótulo (fica só o ícone). Badge de alertas permanece. */
.section-tab:not(.is-active):not(.section-more-btn) > span:not(.section-tab-icon):not(.section-tab-badge):not(.more-chevron),
.section-more-btn:not(.is-active) > .section-more-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Ativa: cresce para caber o rótulo e ganha destaque de accent. */
.section-tab.is-active,
.section-more-btn.is-active { flex: 1 1 auto; padding: 8px 16px; }
.section-tab:active { transform: scale(.97); }
:root[data-motion="reduced"] .section-tab { transition: none; }
.section-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.section-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.section-tab.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.section-tab-icon { flex: none; font-size: 1rem; line-height: 1; }

/* Contador de alertas: informação crítica, então não some no modo compacto. */
.section-tab-badge {
  flex: none;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 19px;
  text-align: center;
}
.section-tab.is-active .section-tab-badge { background: #fff; color: var(--danger); }

/* Overflow "Mais": menu ancorado, fecha no Esc / clique fora (ver familia.js).
   O wrapper cresce junto quando a seção ativa vive no "Mais". */
.section-more { position: relative; flex: 0 0 auto; display: flex; }
.section-more:has(.section-more-btn.is-active) { flex: 1 1 auto; }
.section-more-btn { width: 100%; }
.section-more-icon { flex: none; font-size: 1rem; line-height: 1; }
/* Quando "Mais" reflete a seção ativa, ganha destaque como as abas ativas. */
.section-more-btn.is-active { color: #fff; background: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.section-more[data-open="true"] .more-chevron { transform: rotate(180deg); }
/* Ancorado no DOCK (barra inferior), abrindo para CIMA — a barra do topo foi
   removida para não haver duas navegações com a mesma função. Fixed, e não
   absolute, porque o dock é fixed: o menu tem de acompanhar a tela, não o
   fluxo da página. Rola sozinho quando a lista é maior que o espaço livre. */
.section-more-menu {
  position: fixed; z-index: 45;
  left: 50%; transform: translateX(-50%);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px);
  width: min(360px, calc(100% - 24px));
  max-height: min(60vh, 520px); overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  animation: sheet-in var(--dur-2) var(--ease-out);
}
.section-more-menu[hidden] { display: none; }
.section-more-sep { border: 0; border-top: 1px solid var(--glass-border); margin: 6px 8px; }
.section-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 10px 12px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--text);
  font: inherit; font-size: .92rem; font-weight: 600;
  text-align: left; cursor: pointer;
}
.section-more-item:hover { background: var(--surface-2); }
.section-more-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.section-more-item.is-active { color: var(--accent); }

/* Painéis: só o ativo ocupa espaço. */
.section-panel:focus { outline: none; }
.section-panel[hidden] { display: none; }

/* Telas largas: a barra ganha ar e os rótulos não precisam abreviar. */
@media (min-width: 640px) {
  .section-tab { font-size: .9rem; padding: 8px 14px; }
}

/* ---------- Alerta colapsável (painel da família) ----------
   <details>: resumo compacto sempre visível; ações só ao expandir. Faixa
   lateral de severidade dá leitura de estado num relance. */
.alert-item { padding: 0; overflow: hidden; border-left: 4px solid var(--glass-border); }
.alert-item.sev-danger { border-left-color: var(--danger); }
.alert-item.sev-warn { border-left-color: var(--warn); }
.alert-item.sev-info { border-left-color: var(--accent); }
.alert-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none; min-height: var(--tap);
}
.alert-summary::-webkit-details-marker { display: none; }
.alert-summary::marker { content: ""; }
.alert-summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.alert-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.alert-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.alert-dot.sev-danger { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-dot.sev-warn { background: var(--warn); }
.alert-dot.sev-info { background: var(--accent); }
.alert-summary-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alert-title { font-weight: 700; font-size: 1rem; }
.alert-since { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-chevron { flex: none; color: var(--muted); transition: transform var(--dur-2) var(--ease-out); }
.alert-item[open] .alert-chevron { transform: rotate(180deg); }
.alert-body { padding: 0 16px 16px; }
.alert-body .tight-p { margin: 4px 0 12px; }
/* Emergência aberta: leve realce para não se perder na lista. */
.alert-item.sev-danger[open] { background: color-mix(in srgb, var(--danger) 7%, transparent); }
:root[data-motion="reduced"] .alert-chevron { transition: none; }

/* ---------- Hierarquia da tela do idoso ----------
   Três pesos visuais distintos, porque são três tipos de coisa diferentes:
   (1) cards de status — o que está acontecendo agora;
   (2) .btn-hero — as duas decisões do dia (estou bem / algo mudou);
   (3) .tile dentro da gaveta — navegação, que não deve competir com (2).
   Antes tudo era .btn secondary small: onze alvos de peso idêntico, com
   "Preciso de ajuda" parecendo tão importante quanto "Acessibilidade". */

/* ---------- Reserva hemodinâmica cerebral (tela do motor HIE) ---------- */
.reserve-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 18px; }
.reserve-gauge { position: relative; width: 190px; height: 190px; }
.reserve-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.reserve-track { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.reserve-fill {
  fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round;
  /* animação do preenchimento ao carregar (via dashoffset no JS). */
  transition: stroke-dashoffset 1s var(--ease-out), stroke .4s var(--ease-out);
}
.reserve-fill.band-verde { stroke: var(--ok); }
.reserve-fill.band-amarelo { stroke: var(--warn); }
.reserve-fill.band-laranja { stroke: color-mix(in srgb, var(--warn) 70%, var(--danger)); }
.reserve-fill.band-vermelho { stroke: var(--danger); }
.reserve-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; letter-spacing: -1px;
}
.reserve-num small { font-size: 1.2rem; font-weight: 700; color: var(--muted); margin-left: 2px; align-self: flex-start; margin-top: 18px; }
.reserve-band { font-size: 1.1rem; font-weight: 700; text-align: center; margin: 0; }
/* Texto da banda: no tema escuro as cores-token têm bom contraste; no tema
   claro elas ficam fracas sobre o cartão branco, então escurecem. */
.reserve-band.ok { color: var(--ok); }
.reserve-band.warn { color: var(--warn); }
.reserve-band.danger { color: var(--danger); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .reserve-band.ok { color: #1c7d43; }
  :root:not([data-theme="dark"]) .reserve-band.warn { color: #8a5e08; }
  :root:not([data-theme="dark"]) .reserve-band.danger { color: #b81f1f; }
}
:root[data-theme="light"] .reserve-band.ok { color: #1c7d43; }
:root[data-theme="light"] .reserve-band.warn { color: #8a5e08; }
:root[data-theme="light"] .reserve-band.danger { color: #b81f1f; }

.reserve-why { display: flex; flex-direction: column; gap: 2px; }
.reserve-why-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.reserve-why-row:last-child { border-bottom: none; }
.reserve-why-arrow { flex: none; width: 20px; text-align: center; font-weight: 800; }
.reserve-why-row.down .reserve-why-arrow { color: var(--danger); }
.reserve-why-row.up .reserve-why-arrow { color: var(--ok); }
.reserve-why-label { font-size: .98rem; }

.reserve-ctx { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 12px; }
.reserve-ctx-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--glass-border); cursor: pointer;
  min-height: var(--tap); font-size: 1.02rem;
}
.reserve-ctx-row:last-child { border-bottom: none; }
.reserve-check { width: 30px; height: 30px; accent-color: var(--accent); cursor: pointer; }
.reserve-physio p { line-height: 1.5; }

/* Dose atrasada: a única coisa da tela com borda de alerta. Traz a ação
   junto, porque informar sem permitir agir é o que gerava a dúvida
   "já tomei ou não?". */
.late-card {
  border: 2px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--glass));
  animation: late-in .3s ease both;
}
:root[data-motion="reduced"] .late-card { animation: none; }
@keyframes late-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.late-flag {
  display: inline-block; margin-bottom: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--warn); color: #241700;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
}
.late-name { font-size: 1.35rem; font-weight: 800; margin: 2px 0 0; }
.late-dose { margin: 0 0 10px; font-size: .9rem; }

/* Camada glanceável do remédio: foto da caixa à esquerda + texto à direita.
   Reconhecimento supera evocação — a foto e "para que serve" vêm primeiro,
   o técnico (apresentação/dose) fica na sublinha discreta. */
.med-headline { display: flex; align-items: center; gap: 14px; min-width: 0; }
.med-headtext { min-width: 0; }
.med-photo {
  flex: none; width: 68px; height: 68px; border-radius: 14px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--glass-border);
}
.med-photo--empty { display: grid; place-items: center; font-size: 2rem; }
/* "Para que serve" em linguagem simples: destaque suave, logo abaixo do nome. */
.med-purpose {
  display: inline-block; margin: 2px 0; font-size: 1.05rem; font-weight: 700;
  color: var(--accent-strong);
}
:root[data-theme="dark"] .med-purpose { color: var(--accent); }
:root[data-simple="on"] .med-photo { width: 84px; height: 84px; }
:root[data-simple="on"] .med-purpose { font-size: 1.2rem; }
:root[data-contrast="high"] .med-purpose { color: var(--text); }
/* Ações da dose empilhadas: Tomei (verde, grande) > Adiar (amarelo) > Não
   tomei (link discreto, separado — evita mis-tap com o Tomei). */
.late-card .btn { margin: 8px 0 0; }
.late-card .btn.ok { margin-top: 4px; }
/* "Não tomei" como link de texto centralizado, discreto: ação rara e negativa,
   longe visualmente do "Tomei". Alvo de toque ainda confortável (min-height). */
.btn-link {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px;
  min-height: 48px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font: inherit; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:hover { color: var(--text); }
.btn-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* Rec.1: resumo de 3+ doses atrasadas — a mais urgente aberta, o resto numa
   gaveta (usa o primitivo .collapse; aqui só o tom de alerta). */
.late-summary-title { font-size: 1.05rem; font-weight: 800; margin: 4px 0 8px; color: var(--warn); }
.late-more { margin-top: 4px; }
.late-more > .collapse-head { border-style: dashed; border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.late-more .collapse-body { display: flex; flex-direction: column; gap: 12px; }

/* Cartão "agora": responde "o que eu faço?" sem virar mais uma pilha de dados. */
.focus-card { padding: 18px; }
.focus-kicker {
  display: block; color: var(--muted);
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.focus-line { font-size: 1.2rem; font-weight: 700; margin: 6px 0 0; line-height: 1.35; }
.focus-sub { font-size: .92rem; margin: 6px 0 0; }

.primary-actions { margin: 18px 0 14px; }

/* Ferramentas de contato lado a lado (família / voz). Compactas, secundárias —
   não competem com as duas ações grandes. Uma coluna quando a voz está oculta. */
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.contact-row .btn { margin: 0; }
/* Se o botão de voz está oculto, "Falar com a família" ocupa a linha toda. */
.contact-row:has(#btnVoz[hidden]) { grid-template-columns: 1fr; }
/* Fallback para navegadores sem :has() — ainda fica utilizável em 2 colunas. */
@supports not (selector(:has(*))) { .contact-row { grid-template-columns: 1fr; } }
/* No modo simples, empilha para alvos maiores. */
:root[data-simple="on"] .contact-row { grid-template-columns: 1fr; }

/* Ação primária: alvo generoso e tipografia grande — quem usa está sob
   estresse ou com alteração de memória, então a decisão precisa saltar. */
.btn-hero {
  min-height: 88px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-2);
  margin: 10px 0;
}
.btn-hero:active { transform: translateY(1px); }

/* Gaveta "Mais opções": <details> nativo — acessível por teclado e leitor de
   tela sem JS, e o estado aberto/fechado é do próprio elemento. */
/* ========== Primitivo de COLAPSO unificado (.collapse) ==========
   Um único padrão de "esconder o secundário atrás de um toque", reutilizado em
   toda a interface (antes cada colapso tinha CSS próprio e inconsistente).
   Baseado em <details> nativo: teclado, leitor de tela e "sem JS" de graça.
   Uso: <details class="collapse"><summary class="collapse-head">Título
        <span class="collapse-chevron" aria-hidden="true">⌄</span></summary>
        <div class="collapse-body">…</div></details>
   Variantes: .collapse--soft (fundo discreto), .collapse--card (dentro de card).
   Estratégia de quando colapsar:
     • Conteúdo SECUNDÁRIO ou de consulta (histórico, detalhes, ajustes).
     • Listas longas: mostrar o 1º/essencial, colapsar o resto.
     • NUNCA colapsar: ação crítica (SOS), a decisão principal da tela, alertas
       de emergência/urgentes (esses abrem por padrão). */
.collapse { margin: 12px 0; }
.collapse > .collapse-head {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 12px 16px;
  border-radius: 14px; cursor: pointer; list-style: none; user-select: none;
  border: 1px solid var(--glass-border); background: var(--glass-2);
  color: var(--text); font-weight: 700;
  transition: background var(--dur-2) var(--ease-out);
}
.collapse > .collapse-head::-webkit-details-marker { display: none; }
.collapse > .collapse-head::marker { content: ""; }
.collapse > .collapse-head:hover { background: var(--surface-2); }
.collapse > .collapse-head:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.collapse-head .collapse-title { flex: 1 1 auto; min-width: 0; }
.collapse-head .collapse-meta { color: var(--muted); font-weight: 600; font-size: .85rem; flex: none; }
.collapse-chevron { flex: none; color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform var(--dur-2) var(--ease-out); }
.collapse[open] > .collapse-head .collapse-chevron { transform: rotate(180deg); }
.collapse-body { padding: 12px 4px 4px; }
.collapse--card > .collapse-head { border-radius: var(--radius); }
:root[data-motion="reduced"] .collapse-chevron,
:root[data-motion="reduced"] .collapse > .collapse-head { transition: none; }
/* No modo simples, cabeçalhos de colapso maiores. */
:root[data-simple="on"] .collapse > .collapse-head { min-height: 64px; font-size: 1.1rem; }
/* Alto contraste: sólido, borda forte. */
:root[data-contrast="high"] .collapse > .collapse-head {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: #000; border: 2px solid #fff; color: #fff;
}

.more-drawer { margin: 22px 0 8px; }
.more-summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Remove o triângulo padrão nos dois motores (usamos o nosso chevron). */
.more-summary::-webkit-details-marker { display: none; }
.more-summary::marker { content: ""; }
.more-summary:hover { color: var(--text); background: var(--surface-2); }
.more-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.more-chevron { transition: transform .18s ease; font-size: 1.1rem; line-height: 1; }
.more-drawer[open] .more-chevron { transform: rotate(180deg); }

/* Grade de destinos: ícone + rótulo, dois por linha. Ocupa menos altura que
   sete pílulas largas e fica claro que é navegação, não ação. */
.more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 14px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.tile:hover { background: var(--surface-2); }
.tile:active { transform: translateY(1px); }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile-icon { font-size: 1.6rem; line-height: 1; }

/* Modo simples: esconde recursos secundários e amplia os alvos essenciais,
   deixando a tela do idoso com só o que importa. */
:root[data-simple="on"] [data-simple-hide] { display: none !important; }
:root[data-simple="on"] .btn.small { min-height: 60px; font-size: 1.15rem; }
:root[data-simple="on"] .btn { min-height: 72px; font-size: 1.3rem; }
/* No modo simples a gaveta fica em coluna única, com alvos ainda maiores:
   duas colunas exigem mira mais fina do que queremos pedir aqui. */
:root[data-simple="on"] .more-grid { grid-template-columns: 1fr; }
:root[data-simple="on"] .tile { min-height: 72px; flex-direction: row; gap: 12px; font-size: 1.15rem; }
:root[data-simple="on"] .btn-hero { min-height: 96px; font-size: 1.45rem; }
:root[data-simple="on"] .proto-badge,
:root[data-simple="on"] .install-btn { display: none; }

/* Alto contraste: superfícies sólidas (sem desfoque translúcido que reduz a
   legibilidade), bordas fortes, texto e foco mais nítidos. */
:root[data-contrast="high"] {
  --bg: #000; --surface: #000; --surface-2: #0c0c0c; --text: #fff; --muted: #ffe680;
  --accent: #4da3ff; --accent-strong: #2f80ed; --ok: #35d07f; --warn: #ffcc33; --danger: #ff5a5a;
  --glass: #000; --glass-2: #0c0c0c; --glass-border: #fff;
  --focus: #ffe600;
}
:root[data-contrast="high"] body::before { background: #000; }
:root[data-contrast="high"] .card,
:root[data-contrast="high"] .btn.secondary,
:root[data-contrast="high"] .tile,
:root[data-contrast="high"] .more-summary,
:root[data-contrast="high"] .care-context,
:root[data-contrast="high"] .demo-card,
:root[data-contrast="high"] .dock,
:root[data-contrast="high"] .toast {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-width: 2px;
}
/* Dock em alto contraste: sólido, sem vidro; SOS e itens com borda forte. */
:root[data-contrast="high"] .dock { background: #000; border: 2px solid #fff; box-shadow: none; }
:root[data-contrast="high"] .dock::before { display: none; }
:root[data-contrast="high"] .dock-item { color: #fff; }
:root[data-contrast="high"] .dock-item:hover { background: #1a1a1a; }
:root[data-contrast="high"] .dock-sos { background: #b81f1f; border: 2px solid #fff; box-shadow: none; }
:root[data-contrast="high"] .btn { box-shadow: none; border: 2px solid #fff; }
:root[data-contrast="high"] .btn.secondary { border: 2px solid #fff; }
/* Gaveta e destinos: sólidos, borda forte e sem sombra — mesmas regras dos
   demais alvos em alto contraste. */
:root[data-contrast="high"] .tile,
:root[data-contrast="high"] .more-summary {
  background: #000; border: 2px solid #fff; box-shadow: none;
}
:root[data-contrast="high"] .more-summary { color: #fff; }
/* Barra de seções em alto contraste: sólida, borda forte, aba ativa invertida. */
:root[data-contrast="high"] .section-bar,
:root[data-contrast="high"] .section-more-menu {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: #000; border: 2px solid #fff; box-shadow: none;
}
:root[data-contrast="high"] .section-tab { color: #fff; }
:root[data-contrast="high"] .section-tab.is-active { background: #ffe600; color: #000; box-shadow: none; }
:root[data-contrast="high"] .section-tab.is-active .section-tab-badge { background: #000; color: #ffe600; }
:root[data-contrast="high"] .section-more-item { color: #fff; }
:root[data-contrast="high"] .section-more-item:hover { background: #1a1a1a; }
/* Etiquetas de papel em alto contraste: o color-mix translúcido não garante
   contraste sobre preto — aqui vira amarelo sólido sobre fundo preto. */
:root[data-contrast="high"] .care-context,
:root[data-contrast="high"] .demo-card { background: #000; border: 2px solid #fff; box-shadow: none; }
:root[data-contrast="high"] .role-badge {
  background: #000 !important; color: #ffe680 !important; border: 2px solid #ffe680 !important;
}
:root[data-contrast="high"] .demo-card-pitch,
:root[data-contrast="high"] .care-context-sub,
:root[data-contrast="high"] .account-chip-role { color: #ffe680; }
:root[data-contrast="high"] .muted { color: #ffe680; }
:root[data-contrast="high"] .btn:focus-visible,
:root[data-contrast="high"] a:focus-visible,
:root[data-contrast="high"] [tabindex]:focus-visible { outline-width: 5px; }

/* ==================================================================
   Painel de acessibilidade (botão flutuante + folha inferior).
   ================================================================== */
.a11y-fab {
  position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 60; width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-2); color: var(--text);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-2); cursor: pointer;
  font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.a11y-fab:active { transform: scale(.96); }
.a11y-fab.on-family { bottom: calc(20px + env(safe-area-inset-bottom)); }
/* Na home do idoso o dock (nav + SOS) ocupa o rodapé: sobe o FAB para não
   colidir (acima do dock inteiro). */
body:has(#dock:not(.hidden)) .a11y-fab {
  bottom: calc(210px + env(safe-area-inset-bottom, 0px));
}
@supports not (selector(:has(*))) {
  body:has(#dock) .a11y-fab { bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }
}

.a11y-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
.a11y-overlay[hidden] { display: none; }
.a11y-sheet {
  width: 100%; max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  /* Nunca rola na horizontal: a folha é a largura da tela, e conteúdo largo
     deve quebrar, não gerar barra horizontal. */
  overflow-x: hidden;
  /* Superfície SÓLIDA: o vidro translúcido deixava o app aparecer por trás e
     competir com os rótulos (a tela de ajustes é densa em texto). */
  background: var(--surface); color: var(--text);
  border: 1px solid var(--glass-border); border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-2);
  padding: 8px 18px calc(16px + env(safe-area-inset-bottom));
  animation: a11y-rise .22s ease;
}
.a11y-sheet * { min-width: 0; }
:root[data-motion="reduced"] .a11y-sheet { animation: none; }
@keyframes a11y-rise { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.a11y-grabber { width: 44px; height: 5px; border-radius: 999px; background: var(--muted); opacity: .5; margin: 8px auto 6px; }
.a11y-sheet h2 { text-align: center; color: var(--text); font-size: 1.4rem; margin: 4px 0 2px; }
.a11y-sheet .a11y-sub { text-align: center; color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.a11y-managed {
  background: rgba(47, 128, 237, 0.14); border: 1px solid rgba(47, 128, 237, 0.35);
  color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: .85rem; margin-bottom: 12px;
}
.a11y-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--glass-border);
}
.a11y-row:last-of-type { border-bottom: none; }
/* O texto encolhe; o controle nunca. Sem isto, rótulos longos empurravam o
   interruptor para fora da folha. */
.a11y-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.a11y-row .a11y-label { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.a11y-row .a11y-hint { color: var(--muted); font-size: .82rem; margin-top: 3px; line-height: 1.35; }
/* Linha inteira clicável dá alvo grande sem depender de mirar no interruptor. */
.a11y-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 12px; }
.a11y-size { display: flex; align-items: center; gap: 8px; flex: none; }
.a11y-size button {
  flex: none;
  width: 52px; height: 52px; border-radius: 14px; font-size: 1.4rem; font-weight: 800;
  border: 1px solid var(--glass-border); background: var(--surface-2); color: var(--text); cursor: pointer;
}
.a11y-size button:hover:not(:disabled) { background: var(--glass-2); border-color: var(--accent); }
.a11y-size button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-size .a11y-size-val { min-width: 52px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Interruptor grande e claro (acessível a idosos). */
.a11y-toggle {
  flex: none; width: 74px; height: 42px; border-radius: 999px; position: relative;
  border: 2px solid var(--glass-border); background: var(--surface-2); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.a11y-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 32px; height: 32px;
  border-radius: 50%; background: #fff; transition: transform .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.a11y-toggle[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.a11y-toggle[aria-checked="true"]::after { transform: translateX(32px); }
:root[data-motion="reduced"] .a11y-toggle,
:root[data-motion="reduced"] .a11y-toggle::after { transition: none; }
/* Tema: a linha vira coluna, senão os três botões espremem o rótulo "Tema". */
.a11y-row.a11y-row-stacked { flex-direction: column; align-items: stretch; gap: 10px; }
.a11y-theme { display: flex; gap: 8px; width: 100%; }
.a11y-theme button {
  flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--glass-border); background: var(--surface-2); color: var(--text);
  font-size: .9rem;
}
.a11y-theme button:hover[aria-pressed="false"] { border-color: var(--accent); }
.a11y-theme button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Rodapé da folha: os dois botões dividem a largura. Antes .a11y-reset era
   flex:none e o .btn tem width:100%, então "Restaurar padrão" mantinha a
   largura inteira e empurrava "Concluído" para fora da folha (aparecia
   cortado, com barra de rolagem horizontal). */
.a11y-actions {
  display: flex; gap: 10px; margin-top: 18px;
  /* Fica visível ao rolar a lista de ajustes, que é longa. */
  position: sticky; bottom: 0;
  padding: 12px 0 4px;
  background: linear-gradient(to top, var(--surface) 62%, transparent);
}
.a11y-actions .btn { margin: 0; min-width: 0; }
.a11y-reset { flex: 1 1 40%; }
.a11y-actions [data-a11y-close] { flex: 1 1 60%; }

/* Cartão de acessibilidade embutido (usado no painel da família). */
.a11y-embed .a11y-row:first-of-type { padding-top: 4px; }


/* ---------- Melhorias de UX (idoso + família) ---------- */

/* Conteúdo só para leitores de tela. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Contador de copos de água. */
/* Bloco "Minha rotina de hoje": as duas ações diárias juntas e no topo. */
.today-block { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; }
.today-heading {
  margin: 6px 0 0; font-size: 1rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.today-block .btn-hero { margin: 0; }
/* Card da água: contagem no topo, ações (Bebi água + tirar copo) numa linha. */
.water-card { margin: 0; }
.water-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.water-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.water-add { flex: 1 1 auto; margin: 0; }
.water-remove {
  flex: none; width: 64px; height: auto; min-height: var(--tap); border-radius: 16px;
  font-size: 2rem; font-weight: 700;
}
.water-cups { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; }
.water-count { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.water-dots { font-size: 1.35rem; letter-spacing: 3px; line-height: 1; }
:root[data-simple="on"] .water-count { font-size: 1.3rem; }
:root[data-simple="on"] .water-remove { width: 76px; }

/* Confirmação de dose em tela cheia: feedback persistente + Desfazer. */
.dose-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 24, 15, 0.96);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dose-overlay-inner { max-width: 440px; width: 100%; text-align: center; }
.dose-check {
  width: 110px; height: 110px; margin: 0 auto 14px; border-radius: 50%;
  background: #1e7e46; color: #fff; font-size: 4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(30, 126, 70, .5);
}
.dose-overlay h2 { font-size: 1.6rem; margin: 6px 0; }
.dose-overlay-text { font-size: 1.25rem; }

/* Card de pedido de localização (decisão do titular). */
.location-request { border-color: var(--accent); }

/* Triagem neurológica (BE-FAST): grade de sinais toggláveis + resultado. */
.triage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.triage-sign {
  min-height: 52px; padding: 10px 10px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 2px solid var(--glass-border);
  font-size: .92rem; font-weight: 600; text-align: center;
  /* Rótulos longos (ex.: "Fraqueza/dormência") quebram em vez de cortar. */
  overflow-wrap: anywhere; hyphens: auto; line-height: 1.15;
}
.triage-sign.is-on { background: var(--danger); color: #fff; border-color: var(--danger-strong); }
.triage-sign:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.triage-lkw { display: block; margin: 12px 0; }
.triage-lkw > span { display: block; margin-bottom: 4px; font-weight: 600; }
.triage-run { width: 100%; margin-top: 4px; }
/* Resultado: cor da borda/topo pela urgência (classe, nunca inline — CSP). */
.triage-result { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); border: 2px solid var(--glass-border); background: var(--surface); }
.triage-result.triage-emergencia { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.triage-result.triage-urgente { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.triage-result.triage-avaliar { border-color: var(--ok); }
.triage-urg { font-size: 1.2rem; font-weight: 800; margin: 0 0 6px; }
.triage-emergencia .triage-urg { color: var(--danger-strong); }
.triage-urgente .triage-urg { color: #8a5a00; }
:root[data-theme="dark"] .triage-urgente .triage-urg { color: var(--warn); }
.triage-ai { background: var(--surface-2); border-left: 4px solid var(--accent); padding: 10px 12px; border-radius: 8px; }
.triage-signs-list { margin: 4px 0 10px; padding-left: 20px; }
.triage-actions { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.triage-actions .btn { margin: 0; }
.triage-samu { font-size: 1.15rem; font-weight: 800; }
:root[data-contrast="high"] .triage-emergencia .triage-urg,
:root[data-contrast="high"] .triage-urgente .triage-urg { color: var(--text); }

/* Status de aviso do alerta (estilo entregue/lido do WhatsApp). */
.alert-notify {
  margin: 4px 0 8px; font-size: .88rem; font-weight: 600; color: var(--muted);
}
.alert-notify.assumido { color: var(--ok); }
:root[data-contrast="high"] .alert-notify.assumido { color: var(--text); }

/* Faixa de pressão (Onda B): linhas rótulo + máx/mín. */
.th-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.th-row-label { font-weight: 600; flex: 1 1 140px; }
.th-row-inputs { display: flex; align-items: center; gap: 6px; }
.th-input { width: 68px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.th-slash { color: var(--muted); font-weight: 700; }

/* Preparar consulta: resumo com quebras preservadas. */
.prep-summary { white-space: pre-wrap; margin: 8px 0 0; }

/* Auditoria: uma linha por acesso. */
.audit-row { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.audit-row + .audit-row { margin-top: 6px; }
.audit-action { font-weight: 600; }

/* Cadastro de fotos (painel "Fotos" da família/profissional). */
.photo-row { padding: 14px 16px; }
.photo-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photo-row-text { flex: 1 1 120px; min-width: 0; }
.photo-row-text .label { overflow-wrap: anywhere; }
.photo-thumb {
  flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--glass-border);
}
.photo-thumb--empty { display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: var(--muted); }
.photo-btn { flex: none; }
.photo-purpose-field { display: block; margin-top: 12px; }
.photo-purpose-row { display: flex; gap: 8px; margin-top: 4px; }
.photo-purpose-input { flex: 1 1 auto; }
.photo-purpose-save { flex: none; }
/* Input de arquivo escondido do PhotoUpload (o clique vem do botão). */
.photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Analista de Bula (por remédio). O card de resultado reusa .triage-result. */
.bula-field { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--glass-border); }
.bula-btn { flex: none; }
.bula-result { margin-top: 12px; }
/* Card de pergunta (precisa de PDF / confirmar / erro): neutro, com moldura leve. */
.bula-ask { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--surface); }
.bula-ask p { margin: 0 0 8px; }
/* Estado de carregamento visível no próprio card. */
.bula-loading { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--surface); }
.bula-loading-row { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); }
/* Seções da explicação: título forte + corpo, com respiro entre elas. */
.bula-secs { margin: 8px 0 4px; }
.bula-sec + .bula-sec { margin-top: 10px; }
.bula-sec-title { margin: 0 0 2px; font-size: .82rem; font-weight: 700; letter-spacing: .01em; color: var(--text); }
.bula-sec-body { margin: 0; line-height: 1.5; }
/* Seção de pontos de atenção: leve destaque (é o núcleo de segurança). */
.bula-sec-atencao { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, transparent); border-left: 3px solid var(--warn); }
.triage-emergencia .bula-sec-atencao { background: color-mix(in srgb, var(--danger) 8%, transparent); border-left-color: var(--danger); }
.triage-avaliar .bula-sec-atencao { background: color-mix(in srgb, var(--ok) 8%, transparent); border-left-color: var(--ok); }
.bula-source { margin: 8px 0 4px; }
.bula-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Spinner leve reutilizável (respeita "menos movimento"). */
.spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent); animation: spinner-rotate 0.7s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
:root[data-motion="reduced"] .spinner { animation: none; }

/* Avatar por inicial nos contatos ("rostos" grandes > nomes). */
.avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #fff; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* Rosto real do familiar quando há foto: o idoso vê QUEM vai chamar. Maior que
   a inicial — reconhecimento é o ponto. */
.avatar-photo { object-fit: cover; }
.contact-head .avatar { width: 64px; height: 64px; }
:root[data-simple="on"] .contact-head .avatar { width: 80px; height: 80px; }
.call-card { flex-direction: row; align-items: center; gap: 14px; }
.call-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* Cartão de contato: membro + duas ações grandes (Ligar / WhatsApp). Facilita
   ao máximo — o idoso toca uma vez e a ligação chama ou o WhatsApp abre com a
   mensagem já escrita. */
.contact-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-1);
}
.contact-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.contact-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info .call-name { font-size: 1.2rem; font-weight: 700; }
.contact-actions { display: flex; gap: 10px; }
.contact-actions .btn { flex: 1 1 0; margin: 0; }
/* WhatsApp com a cor da marca (verde), mantendo contraste do texto branco.
   .btn.contact-wa: dobra a especificidade para vencer .btn.secondary. */
.btn.contact-wa {
  background: #1f9d54; color: #fff; border: 1px solid transparent;
}
.btn.contact-wa:hover { filter: brightness(1.08); }
:root[data-simple="on"] .contact-actions { flex-direction: column; }
:root[data-contrast="high"] .contact-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #000; border: 2px solid #fff; box-shadow: none; }
:root[data-contrast="high"] .contact-wa { background: #0a7a3a; border: 2px solid #fff; }

/* Campos de pressão com rótulo visível (placeholder some ao digitar). */
.bp-field label { display: block; margin-bottom: 6px; line-height: 1.2; min-height: 2.4em; }
.bp-field-name { display: block; font-size: 1rem; font-weight: 700; color: var(--text); }
.bp-field-sub { display: block; font-size: .75rem; color: var(--muted); }

/* Leitura recente: valor GRANDE e legível + palavra de status (não só cor) +
   borda colorida à esquerda. Antes era uma pílula pálida com o valor dentro,
   difícil de ler e com cor que confundia (amarelo em leitura quase normal). */
.bp-read {
  padding: 12px 14px; border-radius: 14px; background: var(--surface-2);
  border-left: 6px solid var(--glass-border); margin: 0;
}
.bp-read + .bp-read { margin-top: 8px; }
.bp-read-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.bp-read-value { font-size: 1.7rem; font-weight: 800; color: var(--text); letter-spacing: .5px; }
.bp-read-slash { color: var(--muted); font-weight: 600; margin: 0 2px; }
.bp-read-unit { font-size: .9rem; color: var(--muted); }
.bp-read-meta { margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.bp-read-pulse { font-weight: 600; }
/* Chip de status com PALAVRA e contraste forte (fundo sólido, não pálido). */
.bp-read-status {
  margin-left: auto; padding: 3px 12px; border-radius: 999px;
  font-size: .85rem; font-weight: 800; white-space: nowrap;
}
/* Lista "aparelhos compatíveis" alimentada pelo catálogo declarativo. */
#bleCompat summary { cursor: pointer; color: var(--muted); font-size: .95rem; }
.ble-compat-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ble-compat-name { font-weight: 600; }
.ble-compat-badge {
  padding: 2px 10px; border-radius: 999px; font-size: .8rem;
  border: 1px solid var(--glass-border); color: var(--muted);
}
.ble-compat-badge.is-tested { border-color: var(--ok); color: var(--ok); }

/* Medição sinalizada pelo próprio aferidor (movimento, braçadeira frouxa,
   batimento irregular): marcada com PALAVRA + ícone, visível sem depender de
   cor — salva e marcada, nunca escondida. */
.bp-read-flag {
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .82rem; font-weight: 800;
  background: var(--surface); color: var(--warn);
  border: 1px dashed var(--warn);
}
.bp-read-status.band-ok { background: var(--ok); color: #05271a; }
.bp-read-status.band-warn { background: var(--warn); color: #3a2800; }
.bp-read-status.band-danger { background: var(--danger); color: #fff; }
.bp-read-status.band-muted { background: var(--surface); color: var(--muted); }
.band-border-ok { border-left-color: var(--ok); }
.band-border-warn { border-left-color: var(--warn); }
.band-border-danger { border-left-color: var(--danger); }

/* Cabeçalho da faixa vigente: etiqueta clara + a faixa em texto legível. */
#bpBandInfo { display: flex; flex-direction: column; gap: 6px; }
.bp-band-tag {
  align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 800;
}
.bp-band-tag.band-personal { background: var(--accent); color: #fff; }
.bp-band-tag.band-default { background: var(--surface-2); color: var(--text); border: 1px solid var(--glass-border); }
.bp-band-range { font-size: .92rem; color: var(--text); }

/* Diálogo próprio do painel (substitui prompt/alert). */
.modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-inner {
  background: var(--surface); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 22px; max-width: 440px; width: 100%;
  box-shadow: var(--shadow-2);
}
.modal-inner h3 { margin-top: 0; }
.modal-select, .modal-input {
  width: 100%; padding: 12px; margin-top: 8px; border-radius: 12px;
  border: 1px solid #3a4855; background: var(--surface-2); color: var(--text); font-size: 1rem;
}

/* Mapa da família (Leaflet). */
.map { height: 300px; border-radius: 14px; }
.map-card { padding: 10px; }
.leaflet-container { background: #17202a; border-radius: 14px; }

/* Cartão de status de localização — emoji + estado, integrado (menos "texto seco"). */
.loc-status {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: 8px 0 4px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--glass-border);
}
.loc-status.ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.loc-status.danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.loc-status-emoji { font-size: 1.8rem; line-height: 1; flex: none; }

/* Pino lúdico do titular no mapa (emoji num balão colorido em vez do pino azul). */
.map-pin-wrap { background: none; border: none; }
.map-pin {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pin);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  display: grid; place-items: center;
  border: 2px solid #fff;
}
/* Cor por classe (CSP: sem style inline). Verde em casa/dentro, vermelho fora. */
.map-pin-in { --pin: #2e9e5b; }
.map-pin-out { --pin: #d64545; }
.map-pin span { transform: rotate(45deg); font-size: 1.15rem; line-height: 1; }
/* Pulso suave no pino (desligado em menos-movimento). */
.map-pin::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid var(--pin); opacity: .5;
  animation: pin-pulse 2.4s var(--ease-out) infinite;
}
@keyframes pin-pulse { 0% { transform: scale(.9); opacity: .5; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pin::after { animation: none; } }
:root[data-motion="reduced"] .map-pin::after { animation: none; }

/* ---------- Onboarding, convites e assinatura (UI dos fluxos da API) ---------- */

/* Rótulo de campo de formulário. */
.label { display: block; font-weight: 600; font-size: .92rem; margin-top: 4px; }

/* Rótulo + link auxiliar na mesma linha (ex.: "Senha … Esqueci minha senha").
   Mantém a ajuda no ponto onde a dúvida acontece, sem roubar a linha inteira. */
.label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 4px;
}
.label-row .label { margin-top: 0; }
.label-link {
  color: var(--muted); font-size: .82rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  /* Alvo confortável sem esticar a linha do rótulo. */
  padding: 6px 2px;
}
.label-link:hover { color: var(--text); text-decoration: underline; }
.label-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Seções do formulário de criação de conta ("quem cuida" / "quem é cuidado"). */
.form-section { border: 0; padding: 0; margin: 0 0 6px; }
.form-section legend {
  font-weight: 700; font-size: 1.05rem; padding: 0;
  margin: 10px 0 2px; color: var(--text);
}
.form-section .hint { color: var(--muted); font-size: .82rem; margin: 0 0 8px; }

/* Links sob os cartões de autenticação (criar conta, convite, esqueci a senha). */
.auth-links { text-align: center; margin-top: 18px; }
.auth-links a { color: var(--muted); }
.auth-links a:hover { color: var(--text); }
.auth-links .sep { margin: 0 8px; color: var(--muted); opacity: .5; }

/* Código de convite: grande, copiável, imperdível. */
.invite-code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border: 1px dashed var(--accent);
  border-radius: 12px; padding: 12px 14px; margin: 10px 0;
}
.invite-code-box code { font-size: 1.4rem; font-weight: 800; letter-spacing: 3px; }
.copy-btn {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid #3a4855; background: var(--surface); color: var(--text);
  font-size: .9rem; font-weight: 600;
}
.copy-btn:hover { background: var(--surface-2); }

/* Lista de convites pendentes. */
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; }
.invite-row:last-child { border-bottom: none; }
.invite-row code { font-weight: 800; letter-spacing: 2px; }

/* ---------- Wizard mobile-first (criar conta / convite) ---------- */

/* Progresso do wizard: barra + rótulo por etapa. */
.wizard-progress {
  list-style: none; display: flex; gap: 8px;
  padding: 0; margin: 16px 0 6px;
}
.wizard-progress li { flex: 1; min-width: 0; }
.wizard-progress .wp-bar {
  display: block; height: 5px; border-radius: 999px;
  background: var(--surface-2); transition: background .18s ease;
}
.wizard-progress .wp-label {
  display: block; margin-top: 6px; font-size: .74rem; font-weight: 600;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wizard-progress li.done .wp-bar,
.wizard-progress li.active .wp-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.wizard-progress li.active .wp-label { color: var(--text); }

/* Etapas: entram deslizando (desligado em movimento reduzido). */
.wizard-step { animation: wiz-in .24s ease; }
@keyframes wiz-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
:root[data-motion="reduced"] .wizard-step { animation: none; }

/* Barra de ação fixa ao rolar, com respiro da safe area — polegar alcança. */
.wizard-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center;
  margin: 4px -4px 0; padding: 10px 4px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.wizard-actions .btn { margin: 0; }
.wizard-actions .btn.secondary { flex: 0 0 auto; width: auto; min-width: 108px; }
/* Botão desabilitado (aceite não marcado): claramente inativo, mas legível. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: saturate(.7); }

/* Aceite dos termos: checkbox grande (alvo confortável) + texto com links. */
.consent {
  display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 4px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--glass-border); cursor: pointer;
}
.consent-check { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent-text { font-size: .95rem; line-height: 1.45; color: var(--text); }
.consent-text a { color: var(--accent); font-weight: 600; }
.consent:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Validação inline: erro junto do campo, sem alert. */
.field-error { color: var(--danger); font-weight: 600; font-size: .84rem; margin: -8px 0 10px; }
.field-input.invalid, .password-wrap.invalid .field-input { border-color: var(--danger); }

/* Medidor de força da senha (4 segmentos). */
.pass-meter { display: flex; gap: 6px; margin: 2px 0 4px; }
.pass-meter span { height: 6px; flex: 1; border-radius: 999px; background: var(--surface-2); }
.pass-meter.l1 span.on { background: var(--danger); }
.pass-meter.l2 span.on { background: var(--warn); }
.pass-meter.l3 span.on { background: #7cb94d; }
.pass-meter.l4 span.on { background: var(--ok); }
.pass-hint { color: var(--muted); font-size: .8rem; margin: 0 0 12px; }

/* Escolha de plano no wizard: cartões-rádio grandes, selecionáveis por toque. */
.plan-options { display: grid; gap: 10px; margin: 12px 0 4px; }
.plan-option {
  position: relative; display: block;
  background: var(--glass-2); border: 2px solid var(--glass-border);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.plan-option.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .22);
}
.plan-option:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan-opt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.05rem; }
.plan-opt-price { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.plan-opt-price small { font-weight: 500; color: var(--muted); font-size: .74rem; }
.plan-opt-desc { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.plan-badge {
  position: absolute; top: -10px; right: 12px;
  background: linear-gradient(90deg, #7b5cf5, var(--accent)); color: #fff;
  border-radius: 999px; padding: 3px 10px; font-size: .7rem; font-weight: 700;
}

/* Checklist de recursos de um plano (wizard e "Minha conta"). */
.plan-features { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.plan-features li { position: relative; color: var(--muted); font-size: .85rem; padding-left: 22px; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

/* Resumo antes de concluir ("confira antes de criar"). */
.wizard-summary { margin: 4px 0 8px; }
.wizard-summary .row { padding: 10px 0; border-color: var(--glass-border); }
.wizard-summary .row .value { text-align: right; overflow-wrap: anywhere; }

/* Tela de sucesso: fechamento com destaque. */
.done-hero { text-align: center; }
.done-check {
  width: 96px; height: 96px; margin: 6px auto 12px; border-radius: 50%;
  background: linear-gradient(180deg, var(--ok), #1e7e46); color: #fff;
  font-size: 3.2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 36px rgba(30, 126, 70, .45);
}

/* Planos (billing): grade de cartões com o atual destacado. */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 16px;
}
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 128, 237, .35); }
.plan-card h4 { margin: 0; font-size: 1.05rem; }
.plan-card .plan-price { font-size: 1.35rem; font-weight: 800; }
.plan-card .plan-price small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.plan-card .plan-desc { color: var(--muted); font-size: .84rem; flex: 1; margin: 0; }
.plan-card .btn.small { margin: 10px 0 0; }
.plan-current-pill {
  position: absolute; top: -10px; right: 10px;
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: .72rem; font-weight: 700;
}

/* Relatório imprimível: invisível na tela, único conteúdo na impressão. */
.report-print { display: none; }
@media print {
  body * { visibility: hidden; }
  .report-print, .report-print * { visibility: visible; }
  .report-print {
    display: block; position: absolute; inset: 0; padding: 24px;
    background: #fff; color: #000;
  }
  .report-print table { border-collapse: collapse; width: 100%; margin: 8px 0; }
  .report-print th, .report-print td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
}

/* ------------------------------------------------------------------ */
/* OCR de receita no wizard (criar-conta): rascunho conferível.        */
.ocr-textarea { min-height: 96px; resize: vertical; font-family: inherit; }
.ocr-draft { display: grid; gap: 8px; margin: 12px 0; }
.ocr-item {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 12px 14px;
}
.ocr-item input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); }
.ocr-item-body { display: grid; gap: 2px; }
.ocr-times { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ------------------------------------------------------------------ */
/* Utilitárias: substituem os antigos style= inline — o CSP da PWA é   */
/* style-src 'self' (sem 'unsafe-inline'), então HTML/JS não podem     */
/* carregar atributos de estilo.                                       */
.u-m-0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-8 { margin-bottom: 8px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-26 { margin-top: 26px; }
.u-center { text-align: center; }
.u-left { text-align: left; }
.u-w-auto { width: auto; }
.u-text-xs { font-size: .8rem; }
.u-text-sm { font-size: .85rem; }
.u-text-lg { font-size: 1.2rem; }
.u-break { word-break: break-all; }

/* Larguras de página (main.app). */
.app.narrow { max-width: 520px; }
.app.narrow-sm { max-width: 460px; }
.app.wide { max-width: 720px; }

/* Variações pontuais que eram inline. */
.row.no-line { border-bottom: none; }
.row.head { border-bottom: none; padding-bottom: 6px; }
.row.compact { padding: 8px 0; }
.card.danger-border { border-color: var(--danger); }
.card.snug { margin: 0; padding: 14px 16px; }
.split-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Cartão compacto de "ativar notificações": UMA linha (texto à esquerda que
   trunca, botão à direita) — não empilha nem ocupa altura à toa. Sino só uma
   vez (no texto), nunca duplicado no botão. */
.notif-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: nowrap; padding: 10px 14px; margin: 0 0 12px;
}
.notif-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.notif-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-card .btn { flex: none; }
.stat-value { font-size: 1.6rem; font-weight: 800; }
.status-quiet-title { margin: 0; color: var(--muted); }
.status-headline { font-size: 1.4rem; font-weight: 700; margin: 8px 0; }
.summary-title { font-size: 1rem; margin: 14px 0 2px; }
.field-gap { margin: 6px 0 12px; }
.offline-logo { margin: 32px auto 8px; display: block; border-radius: 22px; }
.hr-soft { border-color: #2a3742; }
.grow-right { flex: 1; text-align: right; }
.tight-p { margin: 2px 0; }

/* "Quem viu meus dados" (app do idoso): uma linha por acesso, com quem e
   quando. Texto grande porque é tela de pessoa idosa — não é um log técnico. */
.access-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--glass-border); }
.access-row:last-child { border-bottom: none; }
.access-what { flex: 1 1 auto; }
.access-when { flex: 0 0 auto; white-space: nowrap; font-size: .9rem; }

/* ---------- Barra inferior do painel da família ----------
   As abas do topo rolam com a página; em listas longas quem cuida perdia o
   acesso às seções e ao SAMU. Esta barra é fixa e reusa o vocabulário do dock
   do app do idoso (vidro, blur, alvo grande). */
.fam-dock { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(10px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; gap: 4px; padding: 6px;
  /* 5 posições (Alertas, Remédios, Triagem, Mais, SAMU) — no Modo Simples
     "Remédios" some e sobram 4, sem quebrar o layout. */
  width: min(600px, calc(100% - 16px));
  background: var(--dock-bg); border: 1px solid var(--dock-border);
  border-radius: 999px; box-shadow: var(--shadow-2);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.fam-dock-item { position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; border: none; border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.fam-dock-item:hover { color: var(--text); }
.fam-dock-item.is-active { background: var(--accent); color: #fff; }
.fam-dock-icon { font-size: 1.15rem; line-height: 1; }
/* SAMU sempre em destaque: é a ação que não pode depender de procurar. */
.fam-dock-sos { background: var(--danger); color: #fff; }
.fam-dock-sos:hover { background: var(--danger-strong); color: #fff; }
.fam-dock-badge { position: absolute; top: 2px; right: 12px;
  background: var(--danger); color: #fff; font-size: .62rem; font-weight: 800;
  min-width: 16px; padding: 1px 4px; border-radius: 999px; }
/* Espaço para a barra não cobrir o fim do conteúdo. */
body:has(.fam-dock) main { padding-bottom: 92px; }

/* Grupo de alertas: uma linha por alerta dentro do cartão agrupado. */
.alert-group-list { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.alert-group-row { display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--glass-border); }
.alert-group-when { flex: 0 0 auto; font-size: .8rem; white-space: nowrap; }
.alert-group-why { flex: 1 1 auto; min-width: 0; font-size: .88rem; }
.alert-group-row .btn { flex: 0 0 auto; width: auto; }

/* ---------- Wall de pacientes (portal profissional) ----------
   Cada paciente abre NO LUGAR: quem acompanha vários não troca de aba a cada
   um, e o preview (gravidade, alertas, doses, check-in) fica sempre visível. */
.paciente-details > .paciente-summary { list-style: none; cursor: pointer;
  display: block; position: relative; padding-right: 28px; }
.paciente-details > .paciente-summary::-webkit-details-marker { display: none; }
.paciente-chevron { position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); color: var(--muted); transition: transform var(--dur-2) var(--ease-out); }
.paciente-details[open] .paciente-chevron { transform: translateY(-50%) rotate(180deg); }
/* O detalhe aberto recua um pouco: fica claro que pertence àquele paciente. */
.paciente-inline { margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--glass-border); }
.paciente-details[open] { }

/* ---------- Barra de plano (conta.html) ----------
   O plano atual e o próximo passo em destaque, acima da grade. Antes o estado
   era uma linha de texto solta e não havia convite nenhum para melhorar. */
.plan-bar { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--glass-border);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, transparent), var(--glass-2)); }
.plan-bar-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-bar-label { color: var(--muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.plan-bar-now strong { font-size: 1.1rem; }
.plan-bar-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-bar-cta .btn { width: auto; }

/* A garantia de que socorro nunca é pago: selo, não nota de rodapé — é o que
   diferencia o produto de um app que corta emergência por falta de pagamento. */
.plan-guarantee { display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  font-size: .88rem; line-height: 1.45; }
.plan-guarantee-icon { font-size: 1.1rem; line-height: 1.3; flex: 0 0 auto; }

/* ---------- Configurações colapsáveis (conta.html) ----------
   Eram 6 cartões abertos empilhados: chegar ao plano exigia rolar a tela toda.
   Fechados, cada bloco mostra título + estado, então dá para saber como está
   sem abrir. "Plano" começa aberto (é a seção com ação de negócio). */
.conf-block > .conf-summary { list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-right: 26px; position: relative; }
.conf-block > .conf-summary::-webkit-details-marker { display: none; }
.conf-title { font-weight: 700; font-size: 1.05rem; }
.conf-state { font-size: .85rem; }
.conf-chevron { position: absolute; right: 0; top: 2px; color: var(--muted);
  transition: transform var(--dur-2) var(--ease-out); }
.conf-block[open] .conf-chevron { transform: rotate(180deg); }
.conf-block[open] > .conf-summary { margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--glass-border); }

/* ---------- Faixa de contexto do paciente (portal profissional) ----------
   Alergia, pressão, doses pendentes e a última dose dada — SEMPRE visíveis ao
   abrir o paciente. Antes esses dados estavam colapsados no fim da tela: quem
   está junto da pessoa precisava rolar e expandir para saber o básico. */
.paciente-vitals { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pv-item { font-size: .82rem; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--glass-border); white-space: nowrap; }
/* Alergia confirmada salta: é o que muda a conduta em segundos. */
.pv-alergia.is-on { background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--text); font-weight: 700; }

/* Resumo do paciente na wall: os dados eram texto corrido e se aglutinavam
   ("40 alerta(s) aberto(s) 4 dose(s) sem confirmar hoje — sem check-in"). */
.paciente-metas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.paciente-meta { font-size: .8rem; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--glass-border);
  color: var(--muted); white-space: nowrap; }
.paciente-meta.warn { background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--text); }
.paciente-meta.ok { background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-color: color-mix(in srgb, var(--ok) 36%, transparent); color: var(--text); }

/* Cabeçalho de casa na wall (home care: vários endereços). */
.wall-local { margin: 20px 0 8px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.wall-local:first-child { margin-top: 0; }

/* ---------- Avatar do perfil (conta) e variantes ----------
   Reusa .avatar. `avatar-lg` é o do próprio perfil; a <img> preenche o círculo
   sem deformar (a foto vem do celular, em qualquer proporção). */
.avatar-lg { width: 76px; height: 76px; font-size: 2rem; overflow: hidden; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initial { line-height: 1; }
.perfil-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.perfil-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Avatar pequeno em listas (wall de pacientes, círculo, alertas). */
.avatar-sm { width: 40px; height: 40px; font-size: 1.05rem; overflow: hidden; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cartão da wall com avatar: foto/inicial à esquerda, dados no meio, seta à
   direita. Reconhecer pelo rosto é mais rápido que ler o nome — e evita agir
   no paciente errado quando se atende várias pessoas. */
.paciente-details > .paciente-summary { display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.paciente-avatar { align-self: start; }
.paciente-info { min-width: 0; }
.paciente-chevron { position: static; transform: none; }
.paciente-details[open] .paciente-chevron { transform: rotate(180deg); }
.paciente-nome { font-size: 1.02rem; }
.paciente-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Subseções dentro de um bloco de configuração (ex.: MFA e passkeys dentro de
   "Segurança"). Separadas por uma linha fina: são assuntos irmãos, não blocos
   independentes — juntá-los evitou abrir dois lugares para entender uma coisa. */
.conf-sub + .conf-sub { margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--glass-border); }
.conf-sub-title { margin: 0 0 4px; font-size: .95rem; font-weight: 700; }
/* Conta protegida só por senha: o resumo avisa sem precisar abrir. */
.conf-state.is-warn { color: #c9860a; font-weight: 600; }

/* Perfil no topo da conta: nome grande + etiqueta do papel. O "Login por: pwd"
   saiu daqui (foi para Segurança, em português) — era sigla de OAuth ao lado
   do nome da pessoa. */
.perfil-nome { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.perfil-body { gap: 6px; align-items: flex-start; }
.perfil-body .role-badge { align-self: flex-start; }
/* Estado positivo no resumo fechado (ex.: notificações chegando). */
.conf-state.is-ok { color: #2e9e5b; font-weight: 600; }

/* ==================================================================
   CARTÃO DE EMERGÊNCIA
   Lido por um socorrista sob pressão — às vezes impresso na geladeira,
   às vezes no celular de alguém que nunca viu o app. A hierarquia é
   quem-é → alergia → quadro → quem chamar, não a de um formulário.
   ================================================================== */
.ec-card { display: flex; flex-direction: column; gap: 14px; }
.ec-id { display: flex; align-items: center; gap: 14px; }
.ec-face { width: 72px; height: 72px; font-size: 1.9rem; overflow: hidden; flex: none; }
.ec-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-id-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-nome { font-size: 1.35rem; line-height: 1.15; }

/* ALERGIA: o dado que muda a conduta em segundos — nunca na mesma
   tipografia do convênio, como estava antes. */
.ec-alergia { display: flex; flex-direction: column; gap: 2px; margin: 0;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border-left: 5px solid var(--muted); }
.ec-alergia.is-on { background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-left-color: var(--danger); }
.ec-alergia-rot { font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.ec-alergia.is-on .ec-alergia-rot { color: var(--danger); }
.ec-alergia-val { font-size: 1.1rem; font-weight: 700; }

.ec-linha { display: flex; flex-direction: column; gap: 3px; }
.ec-rot { font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.ec-meds { margin: 2px 0 0; padding-left: 20px; }
.ec-meds li { margin-bottom: 2px; }

/* Círculo de cuidado: rosto + telefone tocável, o SAMU sempre no topo. */
.ec-circulo-titulo { margin: 4px 0 0; font-size: .82rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ec-circulo { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
/* Grid (não flex): o telefone tem coluna própria e nunca sobe por cima do
   nome. Com flex, um nome longo empurrava o número para dentro do texto. */
.ec-contato { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--glass-border); }
.ec-contato.is-samu { background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
/* Largura explícita: como item de GRID, o .avatar (display:flex na regra base)
   colapsava e o telefone subia por cima do nome. */
.ec-contato .avatar { width: 40px; height: 40px; flex: none; overflow: hidden; }
.ec-contato .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-contato-body { min-width: 0; display: flex; flex-direction: column; }
.ec-contato-nome { font-weight: 700; }
.ec-contato-tel { font-weight: 800; font-size: 1.02rem;
  text-decoration: none; color: var(--accent); white-space: nowrap; justify-self: end; }
/* Em telas estreitas o telefone (que não quebra) espremia o nome até partir
   palavras no meio — "Feli/pe/(filh/o)". Aqui ele desce para a própria linha,
   alinhado sob o nome, e os dois ficam legíveis. */
@media (max-width: 460px) {
  .ec-contato { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .ec-contato-tel { grid-column: 2; justify-self: start; }
}
.ec-contato.is-samu .ec-contato-tel { color: var(--danger); font-size: 1.2rem; }
.ec-aviso { margin: 4px 0 0; font-size: .78rem; color: var(--muted); }

/* IMPRESSÃO: só o cartão sai no papel — sem topbar, dock, menu ou botões.
   Cores forçadas para o vermelho da alergia não virar cinza na impressora. */
@media print {
  /* `visibility: hidden` em body * escondia os ANCESTRAIS do cartão, e a
     seção #cartao ainda estava com .hidden (display:none) do roteamento por
     tela — resultado: folha em branco. Agora: esconde os IRMÃOS em cada nível
     e força a cadeia do cartão a aparecer. */
  /* A regra de impressão do RELATÓRIO (acima) aplica `visibility: hidden` a
     `body *`, e visibility é HERDADA — só mexer em `display` não bastava, e a
     folha saía em branco. Restaura a visibilidade na cadeia do cartão. */
  body > *:not(.app) { display: none !important; }
  .app { visibility: visible !important; }
  .app > *:not(#cartao) { display: none !important; }
  #cartao { display: block !important; visibility: visible !important; }
  #cartao > *:not(#emergencyCard) { display: none !important; }
  #emergencyCard, #emergencyCard * { visibility: visible !important; }
  #emergencyCard { display: block !important; box-shadow: none; border: none;
    margin: 0; padding: 0; background: #fff; color: #000; }
  .dock, .topbar, .no-print, #btnPrintCard { display: none !important; }
  /* Sem as cores, a alergia (o dado mais importante) sairia cinza. */
  .ec-alergia, .ec-contato, .ec-face, .ec-contato .avatar {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ec-contato-tel { color: #000 !important; }
  .ec-card { gap: 10px; }
  @page { margin: 12mm; }
}

/* Membros do círculo na tela de conta: quem JÁ entrou, antes dos convites
   pendentes — sem isto era fácil convidar de novo quem já está dentro. */
.circle-list { list-style: none; margin: 6px 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.circle-item { display: flex; align-items: center; gap: 10px; }
.circle-item .avatar { overflow: hidden; }
.circle-item .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circle-body { display: flex; flex-direction: column; min-width: 0; }
.circle-nome { font-weight: 600; }

/* MODO SÓ-CARTÃO: quem abre pelo QR é um SOCORRISTA, não a titular. O app
   inteiro (dock, SOS, menu, voz, "voltar") é ruído no pior momento — e vários
   desses botões nem funcionam sem sessão. Fica só o cartão. */
body.so-cartao .dock,
body.so-cartao .topbar,
body.so-cartao .voice-chip,
body.so-cartao [data-nav="home"],
body.so-cartao .a11y-fab { display: none !important; }
body.so-cartao .app { padding-top: 16px; }

/* ---------- Membros do círculo no mapa (só durante ocorrência) ----------
   Redondo e menor que o pino da titular (que é gota, 40px): num relance tem de
   ficar claro quem é a pessoa cuidada e quem está indo até ela. */
.map-pin-member {
  width: 34px; height: 34px; border-radius: 50%; transform: none;
  background: var(--accent); border: 3px solid #fff; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .95rem;
}
.map-pin-member img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-pin-member span { transform: none; }

/* Rótulo do grupo de atalhos no menu "Mais" (nome do paciente aberto). */
.section-more-label-group { margin: 4px 12px 6px; font-size: .74rem;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }

/* ---------------------------------------------------------------------------
   RESERVA CEREBRAL (motor HIE) na tela inicial.
   Sóbrio por decisão de produto: é protótipo de pesquisa e não pode parecer
   um veredito clínico. Por isso o índice é discreto (não é um número gigante
   em vermelho), a faixa dá a leitura em palavras, e a tendência resume a
   trajetória — que é o que informa, mais do que o valor isolado.
--------------------------------------------------------------------------- */
.hie-card {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  border-left: 3px solid var(--glass-border);
  transition: border-color .3s var(--ease-out), transform .15s var(--ease-out);
}
.hie-card:active { transform: scale(.995); }
.hie-card.band-verde { border-left-color: var(--ok); }
.hie-card.band-amarelo { border-left-color: var(--warn); }
.hie-card.band-laranja { border-left-color: color-mix(in srgb, var(--warn) 70%, var(--danger)); }
.hie-card.band-vermelho { border-left-color: var(--danger); }

.hie-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hie-kicker {
  color: var(--muted); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}
.hie-trend { font-size: .8rem; font-weight: 700; color: var(--muted); }
.hie-trend.up { color: var(--ok); }
.hie-trend.down { color: var(--danger); }

.hie-body { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
/* Disco compacto: comunica "índice" sem o peso do medidor grande da tela
   dedicada, que aqui competiria com "Estou bem". */
.hie-dial {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--glass-border);
}
.hie-card.band-verde .hie-dial { border-color: var(--ok); }
.hie-card.band-amarelo .hie-dial { border-color: var(--warn); }
.hie-card.band-laranja .hie-dial { border-color: color-mix(in srgb, var(--warn) 70%, var(--danger)); }
.hie-card.band-vermelho .hie-dial { border-color: var(--danger); }
.hie-dial-num { font-size: 1.25rem; font-weight: 800; line-height: 1; }

.hie-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hie-band { font-size: 1.02rem; font-weight: 700; }
.hie-why { font-size: .86rem; }

/* Minigráfico da tendência: barras finas, sem eixo nem número — o detalhe
   vive na tela da reserva. Aqui só a forma da trajetória. */
.hie-spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 12px; }
.hie-spark-bar {
  flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
  background: var(--surface-2);
}
.hie-spark-bar.band-verde { background: var(--ok); }
.hie-spark-bar.band-amarelo { background: var(--warn); }
.hie-spark-bar.band-laranja { background: color-mix(in srgb, var(--warn) 70%, var(--danger)); }
.hie-spark-bar.band-vermelho { background: var(--danger); }

/* Vigilância passiva: convite, não alarme. Tom de atenção (nunca vermelho de
   emergência) para não competir com o SOS nem banalizar a cor crítica. */
.hie-watch { border-left: 3px solid var(--warn); }
.hie-watch-title { font-weight: 700; margin: 0 0 4px; }
.hie-watch .btn { margin-top: 10px; }