/* ADAPTE Board · TEMA ESCURO, páginas estáticas (PO-30, fatia 4). Vem DEPOIS da sb-tema-escuro.css, que traz os
   tokens, e só é carregada pelas 13 páginas (creditos, aceite, medir, aparelhos, privacidade, entrar, idiomas,
   offline, dor, painel, meusdados, diario, acompanho). Mesmo contrato da folha principal: tudo em @media screen, prefixo
   :root[data-tema="escuro"] body, sem !important. Cada regra aqui responde a um achado da varredura
   (tools/e2e/tema_escuro_paginas.js): cor escrita à mão no <style> da página, que a folha principal não alcança. */
@media screen {
  /* Títulos e ênfase: as páginas pintam #041534 (navy) à mão; no escuro, navy sobre a superfície mede 1,09:1. */
  :root[data-tema="escuro"] body[data-sb-ui] main h1,
  :root[data-tema="escuro"] body[data-sb-ui] main h2,
  :root[data-tema="escuro"] body[data-sb-ui] main h3,
  :root[data-tema="escuro"] body[data-sb-ui] main strong,
  :root[data-tema="escuro"] body[data-sb-ui] main b,
  :root[data-tema="escuro"] body[data-sb-ui] main .card > div,
  :root[data-tema="escuro"] body[data-sb-ui] h1,
  :root[data-tema="escuro"] body[data-sb-ui] h2 { color: var(--sb-color-title); }

  /* Texto de apoio: #5b6b7a e #7a8794 medem 3,01 e 4,50:1 no escuro; o muted escuro mede 8,02:1. */
  :root[data-tema="escuro"] body[data-sb-ui] .sub,
  :root[data-tema="escuro"] body[data-sb-ui] .lead,
  :root[data-tema="escuro"] body[data-sb-ui] .note,
  :root[data-tema="escuro"] body[data-sb-ui] .lic,
  :root[data-tema="escuro"] body[data-sb-ui] .upd,
  :root[data-tema="escuro"] body[data-sb-ui] .muted,
  :root[data-tema="escuro"] body[data-sb-ui] .cardsub,
  :root[data-tema="escuro"] body[data-sb-ui] .actiontxt,
  :root[data-tema="escuro"] body[data-sb-ui] .empty,
  :root[data-tema="escuro"] body[data-sb-ui] .quieto,
  :root[data-tema="escuro"] body[data-sb-ui] .saida,
  :root[data-tema="escuro"] body[data-sb-ui] main small,
  :root[data-tema="escuro"] body[data-sb-ui] main dt,
  :root[data-tema="escuro"] body[data-sb-ui="offline"] main p,
  :root[data-tema="escuro"] body[data-sb-ui] .aqui,
  :root[data-tema="escuro"] body[data-sb-ui] .aqui .ico,
  :root[data-tema="escuro"] body[data-sb-ui] .legend,
  :root[data-tema="escuro"] body[data-sb-ui] .hora-l,
  :root[data-tema="escuro"] body[data-sb-ui] .fr-h,
  :root[data-tema="escuro"] body[data-sb-ui] footer,
  :root[data-tema="escuro"] body[data-sb-ui] footer a { color: var(--sb-color-muted); }
  :root[data-tema="escuro"] body[data-sb-ui] .sub strong,
  :root[data-tema="escuro"] body[data-sb-ui] .lead strong,
  :root[data-tema="escuro"] body[data-sb-ui] .note strong { color: var(--sb-color-title); }

  /* Links do texto: a cor de ação do escuro (9,55:1 sobre a superfície). */
  :root[data-tema="escuro"] body[data-sb-ui] main a:not(.btn):not([class*="btn"]) { color: var(--sb-color-primary); }

  /* Caixas tingidas: a mesma família de cor, no tom escuro do estado, com o texto do tema. */
  :root[data-tema="escuro"] body[data-sb-ui] .note,
  :root[data-tema="escuro"] body[data-sb-ui] .intro,
  :root[data-tema="escuro"] body[data-sb-ui] .notice.caa { background: var(--sb-color-primary-soft); color: var(--sb-color-ink); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .box,
  :root[data-tema="escuro"] body[data-sb-ui] .caixa { background: var(--sb-surface-float); color: var(--sb-color-ink); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .box.alerta,
  :root[data-tema="escuro"] body[data-sb-ui] .notice.clin,
  :root[data-tema="escuro"] body[data-sb-ui] .msg.aviso,
  :root[data-tema="escuro"] body[data-sb-ui] main em { background: var(--sb-color-warning-soft); color: var(--sb-color-ink); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .msg.err { background: var(--sb-color-danger-soft); color: var(--sb-color-ink); border-color: var(--sb-border); }

  /* Botão secundário branco (aceite, "sem conta"): vira controle neutro, com a borda forte (3:1). */
  :root[data-tema="escuro"] body[data-sb-ui] .btn-sem-conta { background: var(--sb-control); color: var(--sb-color-ink); border-color: var(--sb-border-strong); }

  /* Menus do cabeçalho (língua e conta), escritos à mão em cada página: abrem brancos sobre a página escura. */
  :root[data-tema="escuro"] body[data-sb-ui] .lgpop,
  :root[data-tema="escuro"] body[data-sb-ui] .sb-acctmenu { background: var(--sb-surface-float); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .lgpop button,
  :root[data-tema="escuro"] body[data-sb-ui] .sb-acctmenu .mi { background: transparent; color: var(--sb-color-ink); }
  :root[data-tema="escuro"] body[data-sb-ui] .sb-acctmenu .mhead { color: var(--sb-color-muted); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .sb-acctmenu .mi.sair { color: var(--sb-color-danger); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .lgpop .lgchk { color: var(--sb-color-primary); }

  /* CRIS-356: o que o JS desenha no diario, acompanho, meusdados e aparelhos (relatório da fono, quem vê, listas,
     aparelhos). As cores vêm do <style> da página e da sb-diario.css: navy mede 1,09:1, #5b6b7a 3,01:1, e a tinta
     clara do escuro sobre o pastel da chave de Fitzgerald ou o #f7f9fc da lista mede 1,05 a 1,39:1. */
  :root[data-tema="escuro"] body[data-sb-ui] ul.quem .q-n,
  :root[data-tema="escuro"] body[data-sb-ui] .fono label.inc,
  :root[data-tema="escuro"] body[data-sb-ui] .card .devname,
  :root[data-tema="escuro"] body[data-sb-ui] .mesh,
  :root[data-tema="escuro"] body[data-sb-ui] .rs-v,
  :root[data-tema="escuro"] body[data-sb-ui] .codigo .cd-v,
  :root[data-tema="escuro"] body[data-sb-ui] h3.sub3,
  :root[data-tema="escuro"] body[data-sb-ui] p.so strong,
  :root[data-tema="escuro"] body[data-sb-ui] .kpi .big { color: var(--sb-color-title); }
  :root[data-tema="escuro"] body[data-sb-ui] ul.quem .q-d,
  :root[data-tema="escuro"] body[data-sb-ui] .card .devmeta,
  :root[data-tema="escuro"] body[data-sb-ui] .fr-h,
  :root[data-tema="escuro"] body[data-sb-ui] .mesn,
  :root[data-tema="escuro"] body[data-sb-ui] p.so,
  :root[data-tema="escuro"] body[data-sb-ui] h3.dia,
  :root[data-tema="escuro"] body[data-sb-ui] .periodo,
  :root[data-tema="escuro"] body[data-sb-ui] .kpi .lbl,
  :root[data-tema="escuro"] body[data-sb-ui] ul.mdlist li .n,
  :root[data-tema="escuro"] body[data-sb-ui] ul.mdlist li .t.ilegivel { color: var(--sb-color-muted); }
  :root[data-tema="escuro"] body[data-sb-ui] ul.mdlist li,
  :root[data-tema="escuro"] body[data-sb-ui] .kpi { background: var(--sb-control); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .rs { background: var(--sb-control); border-color: var(--sb-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .rs-l { color: var(--sb-color-muted); }
  :root[data-tema="escuro"] body[data-sb-ui] ul.mdlist li .x { color: var(--sb-color-danger); }
  :root[data-tema="escuro"] body[data-sb-ui] .fr-x { background: var(--sb-control); border-color: var(--sb-border-strong); color: var(--sb-color-danger); }
  /* Gráficos: o trilho e a barra neutra no tom de controle; as barras de cor (viva, tempo) ficam, são o dado. */
  :root[data-tema="escuro"] body[data-sb-ui] .hora-w,
  :root[data-tema="escuro"] body[data-sb-ui] .dcol { background: var(--sb-control); }
  :root[data-tema="escuro"] body[data-sb-ui] .hora-b,
  :root[data-tema="escuro"] body[data-sb-ui] .dbar { background: var(--sb-border-strong); }
  :root[data-tema="escuro"] body[data-sb-ui] .hora-b.viva,
  :root[data-tema="escuro"] body[data-sb-ui] .dbar.tempo { background: var(--sb-color-primary); }
  :root[data-tema="escuro"] body[data-sb-ui] .dbar.viva { background: var(--sb-color-success); }
  :root[data-tema="escuro"] body[data-sb-ui] .badge { background: var(--sb-color-success-soft); border-color: var(--sb-border); color: var(--sb-color-success); }
  :root[data-tema="escuro"] body[data-sb-ui] .chip { background: var(--sb-color-primary-soft); border-color: var(--sb-border-strong); color: var(--sb-color-ink); }
  :root[data-tema="escuro"] body[data-sb-ui] li.fr { border-color: var(--sb-border); }
  /* As palavras do relatório: a mesma família de cor, no tom escuro da prancha (--sb-fz-*), com a tinta do cartão. */
  :root[data-tema="escuro"] body[data-sb-ui] .c-gray { --f-bg: var(--sb-control); --f-br: var(--sb-fz-gray-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-yellow { --f-bg: var(--sb-fz-yellow); --f-br: var(--sb-fz-yellow-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-green { --f-bg: var(--sb-fz-green); --f-br: var(--sb-fz-green-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-blue { --f-bg: var(--sb-fz-blue); --f-br: var(--sb-fz-blue-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-purple { --f-bg: var(--sb-fz-purple); --f-br: var(--sb-fz-purple-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-red { --f-bg: var(--sb-fz-red); --f-br: var(--sb-fz-red-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-teal { --f-bg: var(--sb-fz-teal); --f-br: var(--sb-fz-teal-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-orange { --f-bg: var(--sb-fz-orange); --f-br: var(--sb-fz-orange-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .c-pink { --f-bg: var(--sb-fz-pink); --f-br: var(--sb-fz-pink-border); }
  :root[data-tema="escuro"] body[data-sb-ui] .pw-w { color: var(--sb-card-ink); }
  :root[data-tema="escuro"] body[data-sb-ui] .pw-n { background: var(--sb-surface-float); color: var(--sb-color-ink); }
}