/* ============================================================
   Sentinela · App de campo — UI mobile-first
   Alvos >=56px (luva/sol), alto contraste, reduced-motion.
   Tipografia em `rem` (P2): base 16px = 1rem; escala com o
   Dynamic Type / zoom de texto do iOS. Sub/meta nunca < 0.75rem (~12px).
   ============================================================ */
*{box-sizing:border-box}
/* permite o ajuste de tamanho de texto do iOS (Dynamic Type) sem travar em 100% */
html{-webkit-text-size-adjust:100%}
svg.ico{width:18px;height:18px;flex:none;vertical-align:middle}
.app-root{display:flex;flex-direction:column;height:100%;background:var(--surface-2);color:var(--ink);
  font-family:var(--font-sans);font-size:1rem;position:relative;overflow:hidden}

/* topbar do app (dentro da tela) — safe-area p/ notch/Dynamic Island (P1) */
.app-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:max(8px,env(safe-area-inset-top)) 16px 10px;background:var(--surface)}
.app-top .title{font:700 1rem var(--font-sans);color:var(--blue-900)}
.app-top .top-actions{display:flex;align-items:center;gap:10px}
#sync-badge{cursor:default}

/* sino de Alertas — ponto de entrada fixo p/ A4 de qualquer tela (P0-4) */
.app-bell{position:relative;flex:none;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--r-pill);border:1px solid var(--line); /* era 40px — abaixo de WCAG 44px e do alvo de campo 56px */
  background:var(--surface);color:var(--blue-800);cursor:pointer}
.app-bell .ico{width:20px;height:20px}
.app-bell__count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--risk-critical);color:#fff;border:2px solid var(--surface);
  font:700 .625rem var(--font-mono);display:flex;align-items:center;justify-content:center}
.app-bell__count[hidden]{display:none}

/* área de view com scroll */
.view{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 96px;scroll-behavior:smooth}
.view h2{font:700 1.25rem var(--font-sans);letter-spacing:-.01em;color:var(--blue-900);margin:2px 0 2px}
.view .sub{font:400 .8125rem var(--font-sans);color:var(--muted);margin:0 0 14px}

/* glossário inline — sigla com tooltip/"o que é isto?" (P2 microcopy) */
.term{text-decoration:underline dotted;text-underline-offset:.15em;cursor:help;
  font:inherit;color:inherit;background:none;border:0;padding:0}

/* pull-to-sync hint */
.pull-hint{height:0;overflow:hidden;text-align:center;color:var(--muted);font:600 .75rem var(--font-sans);
  transition:height var(--motion) var(--ease)}
.pull-hint.show{height:30px;line-height:30px}

/* cards do app */
.c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:12px}
.c.flat{box-shadow:var(--sh-1)}
.c h3{font:600 .9375rem var(--font-sans);margin:0 0 6px;color:var(--blue-900)}
.c .meta{font:500 .75rem var(--font-mono);color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font:500 .8125rem var(--font-sans)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)} .kv .v{font-weight:600;text-align:right}

/* listras de perigo / item com hierarquia de controle */
.hazard{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:10px;background:var(--surface)}
.hazard .rank{flex:none;width:26px;height:26px;border-radius:8px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font:700 .8125rem var(--font-mono);color:var(--muted)}
.hazard .body{flex:1;min-width:0}
.hazard .name{font:600 .875rem var(--font-sans);color:var(--ink)}
.hazard .ctrl{font:500 .75rem var(--font-sans);color:var(--muted);margin-top:3px}

/* tri-estado EPI */
.epi{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:10px;background:var(--surface)}
.epi .ico-epi{flex:none;width:30px;height:30px;color:var(--blue-800)}
.epi .body{flex:1;min-width:0}
.epi .name{font:600 .875rem var(--font-sans)}
.epi .ca{font:500 .8125rem var(--font-mono);color:var(--muted)} /* era .75rem (12px, dupla falha AA); .8125rem = 13px passa tamanho mínimo */
.epi.state-ok{border-color:var(--risk-low-bd);background:var(--risk-low-bg)}
.epi.state-attention{border-color:var(--risk-medium-bd);background:var(--risk-medium-bg)}
.epi.state-inconclusive{border-color:var(--offline-bd);background:var(--offline-bg)}
/* EPI crítico: exige interação probatória individual (P0-1) */
.epi-critico{display:inline-flex;align-items:center;gap:4px;font:700 .625rem var(--font-mono);
  color:var(--risk-critical);background:var(--risk-critical-bg);border:1px solid var(--risk-critical-bd);
  border-radius:var(--r-sm);padding:1px 6px;margin-left:6px;text-transform:uppercase;letter-spacing:.04em}
/* foco-guia ao "Conferir os que faltam" — chama atenção sem marcar estado */
.epi--focus{outline:3px solid var(--blue-500);outline-offset:2px;
  animation:epiPulse var(--motion-slow) var(--ease)}
@keyframes epiPulse{from{outline-color:transparent}to{outline-color:var(--blue-500)}}

/* tri-estado: alvo de campo 56px (luva/sol · P0-3) */
.tri{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.tri-btns{display:flex;gap:10px}
.tri button{min-width:var(--tap-field);min-height:var(--tap-field);border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tri button .ico{width:22px;height:22px}
.tri button[aria-pressed="true"].ok{border-color:var(--risk-low);color:#fff;background:var(--risk-low)}
.tri button[aria-pressed="true"].at{border-color:var(--risk-medium);color:#fff;background:var(--risk-medium)}
.tri button[aria-pressed="true"].nc{border-color:var(--offline);color:#fff;background:var(--offline)}
/* rótulo textual do tri-estado (P0-2) — consome o componente .tri-label do DS
   (Time 3): cor + GLIFO + rótulo, via tokens --inconclusive/--attention.
   O estado "pendente" não tem variante no DS; variante neutra local que só
   consome tokens existentes (sem reescrever o CSS do DS). */
.tri .tri-label{align-self:flex-end}
.tri-label--pending{color:var(--muted);background:var(--surface-2);border-color:var(--line)}

/* botão "Ouvir" TTS onipresente — alvo de campo 56px (P0-3) */
.listen{display:inline-flex;align-items:center;gap:8px;font:600 .8125rem var(--font-sans);color:var(--blue-800);
  background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-pill);
  padding:8px 16px;min-height:var(--tap-field);cursor:pointer}
.listen .ico{width:18px;height:18px}

/* aviso LGPD / assist */
.assist{display:flex;gap:9px;align-items:flex-start;background:var(--blue-50);border:1px solid var(--blue-100);
  border-radius:var(--r-md);padding:11px 13px;font:500 .75rem/1.45 var(--font-sans);color:var(--blue-800);margin:10px 0}
.assist .ico{width:18px;height:18px;flex:none;margin-top:1px}

/* bottom nav — <button> acessível (P0/P1-8) */
.bottom-nav{position:absolute;left:0;right:0;bottom:0;height:64px;background:var(--surface);
  border-top:1px solid var(--line);display:flex;z-index:25;padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--muted);font:600 .625rem var(--font-sans);cursor:pointer;
  background:none;border:0;font-family:var(--font-sans)}
.bottom-nav button .ico{width:24px;height:24px}
.bottom-nav button.active{color:var(--blue-800)}
.bottom-nav button[aria-current="page"]{color:var(--blue-800)}

/* FAB SOS persistente */
.fab-sos{position:absolute;right:16px;bottom:78px;width:64px;height:64px;border-radius:var(--r-pill);
  background:var(--risk-critical);color:#fff;border:3px solid #fff;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;z-index:26}
.fab-sos .ico{width:22px;height:22px}
.fab-sos span{font:700 .625rem var(--font-sans);letter-spacing:.04em}

/* SOS view */
.sos-big{width:200px;height:200px;border-radius:var(--r-pill);background:var(--risk-critical);color:#fff;
  border:6px solid #fff;box-shadow:var(--sh-3);margin:8px auto 4px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;cursor:pointer;position:relative;overflow:hidden;user-select:none}
.sos-big b{font:800 1.875rem var(--font-sans);letter-spacing:.06em;position:relative;z-index:1}
.sos-big small{font:600 .75rem var(--font-sans);opacity:.9;position:relative;z-index:1}
/* anel de progresso de alto contraste (navy escuro sobre vermelho · P1-7) */
.sos-big .ring{position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(rgba(14,42,78,.92) var(--p,0%), transparent 0)}
/* anel externo que CRESCE em área (não só cor) enquanto pressiona */
.sos-big.is-arming{box-shadow:0 0 0 calc(4px + var(--grow,0px)) var(--blue-900),var(--sh-3)}
/* contagem regressiva 3·2·1 sobreposta ao botão */
.sos-big .countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 4.5rem var(--font-mono);color:#fff;z-index:2;pointer-events:none;opacity:0}
.sos-big.is-arming .countdown{opacity:1}
.sos-big.is-arming b,.sos-big.is-arming small{opacity:.15}
.tier{display:flex;align-items:center;gap:6px;font:600 .6875rem var(--font-sans);padding:4px 10px;border-radius:var(--r-pill)}
.tier--offline{color:var(--synced);background:var(--synced-bg);border:1px solid var(--risk-low-bd)}
.tier--online{color:var(--offline-text);background:var(--offline-bg);border:1px solid var(--offline-bd)}
.tel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px;border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:9px;text-decoration:none;color:var(--ink);background:var(--surface);min-height:var(--tap-field)}
.tel .n{font:600 .875rem var(--font-sans)} .tel .d{font:500 .75rem var(--font-mono);color:var(--muted)}
.tel .call{display:inline-flex;align-items:center;gap:6px;font:700 .8125rem var(--font-sans);color:#fff;
  background:var(--risk-low);padding:8px 14px;border-radius:10px;text-decoration:none;min-height:var(--tap)}
.tel .call .ico{width:16px;height:16px}

/* captura de foto */
.viewfinder{position:relative;width:100%;aspect-ratio:4/3;background:#0E1726;border-radius:var(--r-md);
  overflow:hidden;display:flex;align-items:center;justify-content:center;color:#9fb0c8}
.viewfinder .guide{position:absolute;inset:14px;border:2px dashed rgba(255,255,255,.4);border-radius:10px}
.quality{display:flex;gap:8px;margin-top:10px}
.quality .q{flex:1;text-align:center;font:600 .75rem var(--font-sans);padding:9px;border-radius:10px;border:1px solid var(--line)}
.quality .q.good{color:var(--risk-low);background:var(--risk-low-bg);border-color:var(--risk-low-bd)}
.quality .q.bad{color:var(--risk-medium-text);background:var(--risk-medium-bg);border-color:var(--risk-medium-bd)}

/* presença turma */
.member{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px}
.member .av{width:34px;height:34px;border-radius:var(--r-pill);background:var(--blue-50);color:var(--blue-800);
  display:flex;align-items:center;justify-content:center;font:700 .8125rem var(--font-sans);flex:none}
.member .nm{flex:1;font:600 .8125rem var(--font-sans)}

/* utilitários */
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.sticky-cta{position:sticky;bottom:0;background:linear-gradient(transparent,var(--surface-2) 24%);padding-top:14px}
.toast{position:absolute;left:50%;bottom:140px;transform:translateX(-50%) translateY(10px);opacity:0;
  background:var(--blue-900);color:#fff;font:600 .8125rem var(--font-sans);padding:11px 16px;border-radius:var(--r-pill);
  box-shadow:var(--sh-2);z-index:40;transition:opacity var(--motion),transform var(--motion);pointer-events:none;max-width:88%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.count{font:700 .875rem var(--font-mono);color:var(--blue-800)}

/* onboarding first-run (P2-9) — 3 cartões: Ouvir, SOS, tri-estado */
.onb{position:absolute;inset:0;z-index:60;background:rgba(14,42,78,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:16px}
.onb__card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  width:100%;max-width:340px;padding:22px 20px 18px;text-align:center}
.onb__ico{width:56px;height:56px;margin:2px auto 10px;border-radius:var(--r-pill);background:var(--blue-50);
  color:var(--blue-800);display:flex;align-items:center;justify-content:center}
.onb__ico .ico{width:28px;height:28px}
.onb__card h3{font:700 1.125rem var(--font-sans);color:var(--blue-900);margin:0 0 6px}
.onb__card p{font:500 .8125rem/1.5 var(--font-sans);color:var(--muted);margin:0 0 16px}
.onb__dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.onb__dots i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--line);display:block}
.onb__dots i.on{background:var(--blue-500)}
.onb__nav{display:flex;gap:10px}
.onb__skip{flex:none}

/* ============================================================
   Modo "Sol" — alto contraste p/ uso sob luz direta (P2).
   Toggle na tela "Eu", persistido em IndexedDB; aplicado como
   classe no root do app (.app-root.app--sun). Aumenta peso,
   tamanho e contraste. Redefine neutros SÓ no escopo do app
   (consumo local de tokens — não reescreve o DS).
   ============================================================ */
.app-root.app--sun{
  font-size:1.0625rem;                 /* ~17px base, escala com Dynamic Type */
  --ink:#0A1A33; --muted:#2E3744; --muted-2:#46505F;
  --line:#C2C9D4; --line-2:#D6DBE3;
}
.app-root.app--sun .view h2,
.app-root.app--sun .c h3,
.app-root.app--sun .app-top .title,
.app-root.app--sun .hazard .name,
.app-root.app--sun .epi .name,
.app-root.app--sun .tel .n{font-weight:800}
.app-root.app--sun .view .sub,
.app-root.app--sun .kv,
.app-root.app--sun .hazard .ctrl,
.app-root.app--sun .c .meta,
.app-root.app--sun .tel .d{font-weight:600}
.app-root.app--sun .listen,
.app-root.app--sun .risk-badge,
.app-root.app--sun .tri-label,
.app-root.app--sun .ca-badge,
.app-root.app--sun .bottom-nav button{font-weight:700}
.app-root.app--sun .c,
.app-root.app--sun .hazard,
.app-root.app--sun .epi,
.app-root.app--sun .tel,
.app-root.app--sun .app-bell{border-width:1.5px}