/* ADAPTE Board · TEMA ESCURO (PO-30, fatia 1). Proposta, medições e capturas em
   _docs/UX/modo-escuro-po30-2026-09-17/; spec em _docs/SPEC-PO-30-Modo-Escuro-Fatia-1_2026-09-18.md.

   Contrato:
   - É a ÚLTIMA folha da página, e tudo mora dentro de @media screen: a impressão NUNCA fica escura.
   - O gancho é um só: o atributo data-tema="escuro" do <html>, escrito pelo sb-tema.js antes da
     primeira pintura, seja pela escolha da pessoa, seja pelo Automático resolvido.
     A proposta tinha também um bloco @media (prefers-color-scheme: dark) de reserva. Ele saiu de
     propósito: sem o sb-tema.js, ele trocaria os tokens de texto para claro enquanto as superfícies
     com cor fixa continuariam claras. Letra clara em fundo claro é pior que tela clara.
   - A janela branca da figura continua branca: o pictograma ARASAAC é PNG com fundo transparente e
     traço preto, e sobre o escuro o traço some.
   - Nenhum handler inline, nenhum JS aqui. CSP intocada. */

@media screen {

  /* ===== 1. TOKENS ===== */
  :root[data-tema="escuro"] {
    color-scheme: dark;
    /* superfícies */
    --sb-canvas:#12161d;            /* fundo da página */
    --sb-surface:#1b1f27;           /* barra da frase, caixas, cartões de UI */
    --sb-surface-float:#242a34;     /* diálogo, popover, painel de dor e de recursos */
    --sb-control:#2b3340;           /* botão neutro, campo */
    --sb-surface-glass:rgba(27,31,39,.92);
    /* texto */
    --sb-color-ink:#e9eef6;
    --sb-color-title:#f4f7fb;       /* título; NÃO redefinimos --sb-color-navy: ele é FUNDO de marca */
    --sb-color-muted:#a9b6c8;
    /* ação */
    --sb-color-primary:#9dbcff;
    --sb-color-primary-hover:#c3d6ff;
    --sb-color-primary-soft:#1e2a44;
    --sb-color-on-primary:#041534;  /* texto sobre a primária */
    --sb-focus:3px solid #9dbcff;
    /* linhas */
    --sb-border:#39414f;
    --sb-border-strong:#7d8ba0;
    /* estado */
    --sb-color-success:#7bd18a;  --sb-color-success-soft:#16301c;
    --sb-color-danger:#ff9d94;   --sb-color-danger-soft:#33201e;
    --sb-color-warning:#e8b04b;  --sb-color-warning-soft:#332a14;
    --chip-borda-sem-cartao:#8d9aac;
    /* Chave de Fitzgerald: fundo do cartão + borda (-b). Mesma matiz do claro. */
    --yellow:#635321; --yellow-b:#d4a411;
    --green:#3a5b31;  --green-b:#56be3c;
    --bluec:#335773;  --bluec-b:#6eafe3;
    --purple:#503d70; --purple-b:#a689d9;
    --teal:#275e4c;   --teal-b:#1fc18e;
    --orange:#734b29; --orange-b:#ee9444;
    --pink:#7f2f4e;   --pink-b:#f174a6;
    --gray:#505458;   --gray-b:#9faab4;
    --red:#793535;    --red-b:#e77e7f;
    --sb-fz-yellow:#635321; --sb-fz-yellow-border:#d4a411;
    --sb-fz-green:#3a5b31;  --sb-fz-green-border:#56be3c;
    --sb-fz-blue:#335773;   --sb-fz-blue-border:#6eafe3;
    --sb-fz-purple:#503d70; --sb-fz-purple-border:#a689d9;
    --sb-fz-teal:#275e4c;   --sb-fz-teal-border:#1fc18e;
    --sb-fz-orange:#734b29; --sb-fz-orange-border:#ee9444;
    --sb-fz-pink:#7f2f4e;   --sb-fz-pink-border:#f174a6;
    --sb-fz-red:#793535;    --sb-fz-red-border:#e77e7f;
    --sb-fz-gray:#505458;   --sb-fz-gray-border:#9faab4;
    /* rótulo do cartão: um só valor, porque todo fundo escuro da chave passa de 7:1 com ele */
    --sb-card-ink:#f4f7fb;
    /* selo de classe (CRIS-086, base.css): o glifo navy some no cartão escuro; claro, mede de 7,00 a 8,23:1 como o rótulo */
    --sb-selo:#f4f7fb;
    /* sombra: no escuro a sombra não separa; a linha separa */
    --sb-shadow:0 2px 10px #0006; --sb-shadow-float:0 6px 20px #0008; --sb-shadow-dialog:0 24px 80px #000a;
  }
  /* Daqui para baixo, TUDO usa só os tokens. O gancho é o atributo data-tema="escuro" do <html>,
     escrito pelo sb-tema.js ANTES da primeira pintura (Automático resolvido, ou a escolha da
     pessoa). Regra escura nunca vaza para o tema claro, e a impressão nunca a vê. */

  /* ===== 2. PÁGINA, CABEÇALHO E BARRAS ===== */
  html[data-tema="escuro"] body{background:var(--sb-canvas);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body.sb-shell{background:var(--sb-canvas);}
  /* o cabeçalho continua NAVY nos dois temas: é a marca, e já é escuro (branco sobre ele: 18,07:1) */
  html[data-tema="escuro"] body .config{background:var(--sb-surface);border-bottom:1px solid var(--sb-border);}
  html[data-tema="escuro"] body .hint,html[data-tema="escuro"] body .optgrp,html[data-tema="escuro"] body .predtitle,
  html[data-tema="escuro"] body .breadcrumb,html[data-tema="escuro"] body .tp-status{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .bc-cur{color:var(--sb-color-title);}
  html[data-tema="escuro"] body .bc-link{color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .bc-link:hover,html[data-tema="escuro"] body .bc-link:focus-visible{background:var(--sb-color-primary-soft);}
  html[data-tema="escuro"] body footer.credit,html[data-tema="escuro"] body .credit a{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .credit a{color:var(--sb-color-primary);}

  /* ===== 3. BARRA DA FRASE E CHIPS ===== */
  html[data-tema="escuro"] body .sentence,html[data-tema="escuro"] body .predbox,html[data-tema="escuro"] body .quickbox{
    background:var(--sb-surface);border-color:var(--sb-border-strong);box-shadow:var(--sb-shadow);}
  html[data-tema="escuro"] body .chip span{color:var(--sb-color-ink);}
  /* "Toque para buscar": o index-app.js (render) e o index.html pintam a cor por style inline (#566472,
     2,72:1 sobre o escuro). Estilo inline só se vence com !important; é a única exceção da folha. */
  html[data-tema="escuro"] body #slots > span{color:var(--sb-color-muted) !important;}
  html[data-tema="escuro"] body .chip .imgwrap,html[data-tema="escuro"] body .chip img{background:#fff;}   /* janela branca: decisão §2 */
  html[data-tema="escuro"] body .chip.chip-txt{background:var(--sb-surface);color:var(--sb-color-title);
    border:2px dashed var(--chip-borda-sem-cartao);}
  html[data-tema="escuro"] body .chip-capa{background:var(--sb-control);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-mic{background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border);}
  html[data-tema="escuro"] body button.ctrl.alt{background:var(--sb-control);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body button.ctrl:not(.alt),html[data-tema="escuro"] body .btn,html[data-tema="escuro"] body .sb-button--primary,
  html[data-tema="escuro"] body .pin-ok,html[data-tema="escuro"] body .sr-primary,html[data-tema="escuro"] body .gate-btn{
    background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body button.ctrl:not(.alt):hover,html[data-tema="escuro"] body .btn:hover{
    background:var(--sb-color-primary-hover);border-color:var(--sb-color-primary-hover);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .sb-message-expand,html[data-tema="escuro"] body .sb-message-view-back{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .sb-message-expand:hover{background:var(--sb-control);}
  html[data-tema="escuro"] body .sb-message-restore,html[data-tema="escuro"] body .sb-message-view-speak,
  html[data-tema="escuro"] body .sb-message-view-natural{background:var(--sb-color-primary-soft);
    border-color:var(--sb-color-primary);color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sb-message-view,html[data-tema="escuro"] body .sb-message-view-head{
    background:var(--sb-surface);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .yesno.yes{background:#2e7d32;box-shadow:inset 0 0 0 2px var(--sb-color-success);}
  html[data-tema="escuro"] body .yesno.no{background:#c62828;box-shadow:inset 0 0 0 2px #f28b82;}
  html[data-tema="escuro"] body .yesno.type{background:var(--sb-control);color:var(--sb-color-ink);
    box-shadow:inset 0 0 0 1px var(--sb-border-strong);}

  /* ===== 4. CARTÕES DA PRANCHA ===== */
  /* As classes .yellow/.green/... já leem --cell-b e as variáveis da paleta: trocar o token
     troca o cartão. Aqui só o que é hex fixo no index.html. */
  html[data-tema="escuro"] body .cell{color:var(--sb-card-ink);box-shadow:none;}
  html[data-tema="escuro"] body .cell .lbl,html[data-tema="escuro"] body .cell .sublbl{color:var(--sb-card-ink);}
  html[data-tema="escuro"] body .cell img,html[data-tema="escuro"] body .cell .imgwrap,
  html[data-tema="escuro"] body .imgwrap>img{background:#fff;}                 /* janela branca: decisão §2 */
  html[data-tema="escuro"] body .cell img:not([data-ok]){background:#c9d3e0;}  /* HIG-C10: figura a caminho */
  html[data-tema="escuro"] body .cell:hover{box-shadow:0 3px 10px #000a;}
  html[data-tema="escuro"] body .cell-follow .folmark{color:#cbd6e6;}
  html[data-tema="escuro"] body .cell-alvo .alvomark{color:var(--sb-card-ink);}
  html[data-tema="escuro"] body .cell.cell-txt .lbl{color:var(--sb-card-ink);}
  html[data-tema="escuro"] body .tp-card{background:var(--sb-surface-float);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .tp-card span{color:var(--sb-color-title);}
  html[data-tema="escuro"] body .tp-card.tp-text,html[data-tema="escuro"] body .tp-card.tp-text .tp-aa{color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .tp-card .tp-src,html[data-tema="escuro"] body .tp-card .tp-where{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .swatch{border-color:#ffffff40;}
  html[data-tema="escuro"] body .legend{color:var(--sb-color-ink);}

  /* ===== 5. DOCK ===== */
  /* os quatro botões de cor GUARDAM a cor que a família aprendeu; ganham contorno claro para
     o limite passar 3:1 contra a barra escura (1.4.11). */
  html[data-tema="escuro"] body.sb-shell{--sb-controls-surface:var(--sb-surface-glass);}
  html[data-tema="escuro"] body.sb-shell #sbShellBar::before{border-color:var(--sb-border-strong);background:var(--sb-controls-surface);}
  html[data-tema="escuro"] body .sb-shellbtn{background:var(--sb-control);color:var(--sb-color-ink);
    box-shadow:inset 0 0 0 1px var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-shellbtn.sim{background:#2e7d32;color:#fff;box-shadow:inset 0 0 0 2px #7bd18a;}
  html[data-tema="escuro"] body .sb-shellbtn.nao{background:#c62828;color:#fff;box-shadow:inset 0 0 0 2px #f28b82;}
  html[data-tema="escuro"] body .sb-shellbtn.urg{background:#8e1414;color:#fff;box-shadow:inset 0 0 0 2px #ff8a80;}
  html[data-tema="escuro"] body .sb-shellbtn.fra{background:#7b52c4;color:#fff;box-shadow:inset 0 0 0 2px #a689d9;}
  html[data-tema="escuro"] body .sb-shellbtn.rap .sbi{color:#ffa35c;}
  html[data-tema="escuro"] body .sb-dockhandle{background:var(--sb-control);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sb-dockhandle:hover{background:#3a4354;color:#fff;}
  html[data-tema="escuro"] body.sb-shell .sb-pathspanel{background:var(--sb-surface-float);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body.sb-shell .sb-pathstitle,html[data-tema="escuro"] body.sb-shell .sb-pathsclose{color:var(--sb-color-muted);}

  /* ===== 6. PAINÉIS E DIÁLOGOS ===== */
  html[data-tema="escuro"] body .cfg-adv,html[data-tema="escuro"] body .sb-config-card,html[data-tema="escuro"] body .sb-config-head,
  html[data-tema="escuro"] body .config.open,html[data-tema="escuro"] body .pin-card,html[data-tema="escuro"] body .sbsp-sheet,
  html[data-tema="escuro"] body .sbsp-bar,html[data-tema="escuro"] body .lgpop,html[data-tema="escuro"] body .ctxdd-pop,
  html[data-tema="escuro"] body .sb-acctmenu,html[data-tema="escuro"] body .sb-resource-dialog,html[data-tema="escuro"] body .sb-paincard{
    background:var(--sb-surface-float);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-config-dialog,html[data-tema="escuro"] body .pinmodal,html[data-tema="escuro"] body .sbsp{background:#000c;}
  html[data-tema="escuro"] body .cfg-adv .cfgsec{border-bottom-color:var(--sb-border);}
  html[data-tema="escuro"] body .cfgseclbl,html[data-tema="escuro"] body .sb-acctmenu .mhead,html[data-tema="escuro"] body .pin-sub,
  html[data-tema="escuro"] body .sbsp-dica,html[data-tema="escuro"] body .sb-painsub,html[data-tema="escuro"] body .sb-painnum,
  html[data-tema="escuro"] body .mt-sugestoes-titulo{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .pin-title,html[data-tema="escuro"] body .sbsp-title,
  html[data-tema="escuro"] body .sb-config-head h2,html[data-tema="escuro"] body .tp-title{color:var(--sb-color-title);}
  /* O painel corporal chega depois desta folha e usa seletores com ID. Estes seletores espelham
     essa especificidade para o título e os controles não voltarem às cores claras do componente. */
  html[data-tema="escuro"] body #sbPainPanel .sb-paintitle{color:var(--sb-color-title);}
  html[data-tema="escuro"] body .sr-body-location button.sr-body-control,
  html[data-tema="escuro"] body .sr-body-location button.sr-body-choice{
    background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .seg,html[data-tema="escuro"] body .ctxdd-btn,html[data-tema="escuro"] body .ctxsel,
  html[data-tema="escuro"] body .hcbtn,html[data-tema="escuro"] body .appearance-toggle,html[data-tema="escuro"] body .sb-modebar button,
  html[data-tema="escuro"] body #sbModeToggle,html[data-tema="escuro"] body .sb-mode-settings,html[data-tema="escuro"] body .cfgadv-btn,
  html[data-tema="escuro"] body .tpbtn,html[data-tema="escuro"] body button.print,html[data-tema="escuro"] body .pwabtn,
  html[data-tema="escuro"] body .sb-button,html[data-tema="escuro"] body .forgetbtn,html[data-tema="escuro"] body .sb-shellbtn,
  html[data-tema="escuro"] body .sb-reading-preview,html[data-tema="escuro"] body .sb-offline-section,
  html[data-tema="escuro"] body .sr-tools button,html[data-tema="escuro"] body .sb-paincell,html[data-tema="escuro"] body select,
  html[data-tema="escuro"] body input[type=text],html[data-tema="escuro"] body textarea,html[data-tema="escuro"] body #tps,
  html[data-tema="escuro"] body #pinInput,html[data-tema="escuro"] body .seg button,html[data-tema="escuro"] body .ctxdd-opt,
  html[data-tema="escuro"] body .lgpop button,html[data-tema="escuro"] body .sb-acctmenu .mi{
    background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .seg{border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .seg button.on,html[data-tema="escuro"] body .ctxdd-opt[aria-checked="true"],
  html[data-tema="escuro"] body .hcbtn[aria-pressed="true"],html[data-tema="escuro"] body .appearance-toggle[aria-pressed="true"],
  html[data-tema="escuro"] body .tp-scope [aria-pressed="true"],html[data-tema="escuro"] body .sr-tools button[aria-pressed="true"]{
    background:var(--sb-color-primary);color:var(--sb-color-on-primary);border-color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .seg button:not(.on){background:var(--sb-control);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sb-config-back{background:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .forgetbtn{color:#ff9d94;border-color:#6b3b38;}
  html[data-tema="escuro"] body .sb-acctmenu .mi.sair{color:#ff9d94;}
  html[data-tema="escuro"] body .typepanel{background:var(--sb-surface-float);border-color:#7a6326;}
  html[data-tema="escuro"] body .sbvoicewarn{background:var(--sb-color-warning-soft);border-color:var(--sb-color-warning);color:#ffd9a0;}
  html[data-tema="escuro"] body .sbplace,html[data-tema="escuro"] body .sbgeohint{background:#16281a;border-color:#4d7a45;color:#bfe3b4;}
  html[data-tema="escuro"] body .sbplace-chip{background:var(--sb-control);border-color:#4d7a45;color:#d6f0cd;}
  html[data-tema="escuro"] body .pin-help{background:var(--sb-color-primary-soft);border-color:#33487a;color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .pin-msg{color:var(--sb-color-danger);}
  html[data-tema="escuro"] body .sbconsent{background:var(--sb-surface-float);border-top:1px solid var(--sb-border-strong);}

  /* painel de dor: a barra de intensidade e a face não mudam de cor (são o dado) */
  html[data-tema="escuro"] body .sb-paincell{background:var(--sb-surface-float);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-painlbl{color:var(--sb-color-title);}
  html[data-tema="escuro"] body .sb-painface svg,html[data-tema="escuro"] body .sb-painface path,
  html[data-tema="escuro"] body .sb-painface circle,html[data-tema="escuro"] body .sb-painface ellipse{stroke:var(--sb-color-title);}
  html[data-tema="escuro"] body .sb-pain-dot{border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-painclose,html[data-tema="escuro"] body .tp-close,html[data-tema="escuro"] body .sbsp-x{
    background:var(--sb-control);color:var(--sb-color-ink);}

  /* ===== 7. FOCO ===== */
  html[data-tema="escuro"] body :focus-visible{outline-color:#9dbcff;}
  html[data-tema="escuro"] body .hcbtn:focus-visible,html[data-tema="escuro"] body .appearance-toggle:focus-visible,
  html[data-tema="escuro"] body .sb-shellbtn:focus-visible,html[data-tema="escuro"] body .sb-dockhandle:focus-visible{outline-color:#F9BA1C;}

  /* ===== 8. ALTO CONTRASTE DENTRO DO ESCURO =====
     Alto contraste não desliga o tema: no escuro ele vira preto puro com letra branca (21:1),
     que é o que o Windows faz no tema escuro de alto contraste. */
  html[data-tema="escuro"] body.sb-hc{background:#000;}
  html[data-tema="escuro"] body.sb-hc .cell{background:#000 !important;border-width:4px;}
  html[data-tema="escuro"] body.sb-hc .cell .lbl{color:#fff;font-weight:800;}
  html[data-tema="escuro"] body.sb-hc .cell.cell-gestalt{background:#000 !important;}
  html[data-tema="escuro"] body.sb-hc .sentence,html[data-tema="escuro"] body.sb-hc .predbox,html[data-tema="escuro"] body.sb-hc .quickbox,
  html[data-tema="escuro"] body.sb-hc .cfg-adv,html[data-tema="escuro"] body.sb-hc .sb-config-card,html[data-tema="escuro"] body.sb-hc .sb-paincard{
    background:#000;border-color:#fff;color:#fff;}
  html[data-tema="escuro"] body.sb-hc .chip.chip-txt{background:#000;color:#fff;border-width:3px;border-color:#fff;}
  html[data-tema="escuro"] body.sb-hc.sb-shell{--sb-controls-surface:#000;--sb-controls-blur:none;}
  html[data-tema="escuro"] body.sb-hc .sb-shellbtn{background:#000;color:#fff;box-shadow:inset 0 0 0 2px #fff;}
  @media (prefers-contrast:more){
    html[data-tema="escuro"] body.sb-shell{--sb-controls-surface:var(--sb-surface);--sb-controls-blur:none;}
    html[data-tema="escuro"] body .chip.chip-txt{border-width:3px;}
  }
  @media (prefers-reduced-transparency:reduce){
    html[data-tema="escuro"] body.sb-shell{--sb-controls-surface:var(--sb-surface);--sb-controls-blur:none;}
  }

  /* ===== 9. FAMÍLIAS DE BOTÃO DO sb-ui.css =====
     O sb-ui.css pinta estas famílias com `html .sb-ui[data-sb-ui] :is(...)` (0,3,1). Para vencer
     sem !important, o tema repete o seletor com a classe do tema no body. */
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--primary,.btn:not(.alt):not(.neutro):not(.danger):not(.btn-sec):not(.btn-ghost):not(.btn-danger),.gate-btn:not(.ghost),.pin-ok,.ctrl:not(.alt),.sr-primary){
    background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--primary,.btn:not(.alt),.gate-btn:not(.ghost),.pin-ok,.ctrl:not(.alt),.sr-primary):hover:not(:disabled){
    background:var(--sb-color-primary-hover);border-color:var(--sb-color-primary-hover);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button,.btn,.gate-btn,.mini,.linkbtn,.icon-button:not(.sb-loginm),.ctrl,.sb-modebar button,.cfg-quick button,.tp-scope button,.sb-varall,.mt-acoes button,.mt-textos button,.sr-create button,.sr-model-note button,.sr-model-list button,.sb-resource-dialog button:not(.sr-visual),.pin-ok,.pin-cancel,.pwabtn,.cfgadv-btn){
    border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--secondary,.btn.alt,.btn.neutro,.btn.btn-sec,.btn.btn-ghost,.gate-btn.ghost,.pin-cancel,.ctrl.alt){
    background:var(--sb-control);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--soft,.sair:not(.mi)){background:var(--sb-control);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--danger,.btn.danger,.btn.btn-danger,.icon-button--danger){
    background:var(--sb-color-danger-soft);border-color:#6b3b38;color:var(--sb-color-danger);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--success,.mini.ok){
    background:var(--sb-color-success-soft);border-color:#2f5c39;color:var(--sb-color-success);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-button--ghost,.linkbtn){background:transparent;border-color:transparent;color:var(--sb-color-primary);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-panel,.sb-notice,.sb-field input,.sb-field textarea,.sb-field select){
    background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  /* a barra da frase e as caixas moram sob `html body.sb-shell` (0,2,2) no board-ux.css */
  html[data-tema="escuro"] body.sb-shell :is(.sentence,.predbox,.quickbox,.sb-message-view,.sb-message-view-head){
    background:var(--sb-surface);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body.sb-shell .sb-shellbar{background:transparent;}
  html[data-tema="escuro"] body.sb-shell .sb-shellbtn{background:var(--sb-control);color:var(--sb-color-ink);box-shadow:inset 0 0 0 1px var(--sb-border-strong);}
  html[data-tema="escuro"] body.sb-shell .sb-shellbtn.sim{background:#2e7d32;color:#fff;box-shadow:inset 0 0 0 2px #7bd18a;}
  html[data-tema="escuro"] body.sb-shell .sb-shellbtn.nao{background:#c62828;color:#fff;box-shadow:inset 0 0 0 2px #f28b82;}
  html[data-tema="escuro"] body.sb-shell .sb-shellbtn.urg{background:#8e1414;color:#fff;box-shadow:inset 0 0 0 2px #ff8a80;}
  html[data-tema="escuro"] body.sb-shell .sb-shellbtn.fra{background:#7b52c4;color:#fff;box-shadow:inset 0 0 0 2px #a689d9;}
  html[data-tema="escuro"] body.sb-shell :is(.sb-config-card,.sb-config-head,.config.open,#config.open){
    background:var(--sb-surface-float);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body.sb-shell .sb-config-head button{background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body.sb-shell :is(.tp-scope button,.sb-varall,.sb-varhead,.sb-modebar button,#sbModeToggle){
    background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body.sb-shell .tp-scope [aria-pressed="true"]{background:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body.sb-shell .sb-reading-preview{background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}

  /* ===== 10. REGRAS DE ID (especificidade alta no app) =====
     Estas existem porque o app pinta com seletor de ID; sem repetir o ID, o tema perde. */
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] :is(.sb-tab[aria-selected="true"],.srcchip[aria-selected="true"],.seg button.on){
    background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .sb-config-dialog #cfgAdv .cfgseclbl{color:var(--sb-color-title);}
  html[data-tema="escuro"] body .sb-config-dialog #cfgAdv .cfgsec{border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-config-dialog #config.open{background:var(--sb-surface-float);}
  html[data-tema="escuro"] body.sb-shell :is(.sb-modebar button,#sbModeToggle){background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body #modotexto .mt-textos{background:var(--sb-surface-float);}
  html[data-tema="escuro"] body #mtBuffer{background:var(--sb-control);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body #mtTextosVazio{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body.mt-on #modotexto .mt-entrada select{background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body.mt-on #modotexto .mt-entrada option{color:var(--sb-color-ink);}
  html[data-tema="escuro"] body #tps{background:var(--sb-control);color:var(--sb-color-ink);border-color:#a08533;}
  html[data-tema="escuro"] body #pinInput{background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-acctlogin{background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body #sbPainPanel .sr-tools button,html[data-tema="escuro"] body #sbResourcePanel .sr-tools button{
    background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body #sbPainPanel .sr-tools button[aria-pressed="true"]{
    background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body #sbPainPanel .sb-paincard,html[data-tema="escuro"] body #sbPainPanel .sb-paincell{
    background:var(--sb-surface-float);border-color:var(--sb-border-strong);}
  /* a barra de intensidade e as bolinhas do medidor NÃO mudam: são o dado que a criança aponta */

  /* ===== 11. A PRANCHA DA CRIANÇA (fatia 2) =====
     Achados da varredura tools/e2e/tema_escuro_prancha.js. O que o app escreve em style="" ou com
     !important lê uma variável com o valor claro de hoje como reserva; aqui só se troca a variável. */
  :root[data-tema="escuro"] {
    /* canto ⋯ do cartão: a borda da classe dá 2,4 a 3,0:1 no fundo escuro; a tinta do rótulo passa de 7:1 */
    --sb-var-trigger-cor:var(--sb-card-ink);
    /* menu de formas (UX-03) e o do Gestalt */
    --sb-varpop-fundo:var(--sb-surface-float); --sb-varpop-borda:var(--sb-border-strong); --sb-varpop-suave:var(--sb-color-muted);
    --sb-varitem-fundo:var(--sb-control); --sb-varitem-tinta:var(--sb-color-ink); --sb-var-line:var(--sb-border);
    /* borda do item: as -e do claro são escuras para o branco; no escuro vale a -b da classe */
    --yellow-e:#d4a411; --green-e:#56be3c; --bluec-e:#6eafe3; --purple-e:#a689d9; --teal-e:#1fc18e;
    --orange-e:#ee9444; --pink-e:#f174a6; --red-e:#e77e7f; --gray-e:#9faab4;
    /* cartão Gestalt: a mesma matiz do #BAC6E0, fundo escuro e borda clara, como a chave de Fitzgerald */
    --sb-gestalt-fundo:#2d3953; --sb-gestalt-borda:#bac6e0; --sb-gestalt-tinta:var(--sb-card-ink);
  }
  /* a janela da figura continua branca também no menu de formas */
  html[data-tema="escuro"] body .sb-varpop button img{background:#fff;}
  html[data-tema="escuro"] body .navmark{background:var(--sb-control);border-color:var(--sb-border-strong);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sb-skip{background:var(--sb-surface-float);color:var(--sb-color-title);border-color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sb-pager{background:var(--sb-surface);border-top-color:var(--sb-border);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sb-pager .sb-pager-info{color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sb-pager button{color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sb-pager button:focus-visible{outline-color:var(--sb-color-primary);}
}
@media screen {
  /* ===== 12. PAINÉIS DO ADULTO, APOIOS VISUAIS E MODO TEXTO (fatia 3) =====
     Achados da varredura tools/e2e/tema_escuro_prancha.js nos estados da fatia 3. Onde o app pinta com
     style="" ou !important, a cor virou variável com o valor claro de hoje como reserva. */
  :root[data-tema="escuro"] {
    /* cartão de apoio visual na prancha (sb-resource.css, !important) */
    --sb-recurso-fundo:var(--sb-control); --sb-recurso-borda:var(--sb-border-strong);
    /* cartões desenhados pelo app ("Quanto dói?" e "Zonas"): o cartão segue o tema; o desenho fica numa janela branca */
    --sb-desenho-fundo:var(--sb-control); --sb-desenho-borda:var(--sb-border-strong);
  }
  html[data-tema="escuro"] body .sb-resource-dialog{--sr-premio-fundo:var(--sb-color-warning-soft);--sr-premio-borda:var(--sb-color-warning);
    --sr-premio-fundo-pronto:#4a3b12;--sr-premio-borda-pronto:var(--sb-color-warning);}
  html[data-tema="escuro"] body .sr-trilha-h{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .sr-premio-nome{color:var(--sb-color-title);}
  /* puxador do dock, rotas e ampliar a mensagem: #42566f do board-ux.css dava 2,20:1 no escuro */
  html[data-tema="escuro"] body.sb-shell :is(.sb-dockhandle,.sb-pathstitle,.sb-pathsclose,.sb-message-expand),
  html[data-tema="escuro"] body.sb-shell.sb-dockshut .sb-dockhandle{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .pcell-painface,html[data-tema="escuro"] body .pcell-zonas{background:#fff;border-radius:10px;}

  /* Ajustes, PIN, Trocar prancha e língua (CRIS-128: Esquecer aprendizado e Feedback) */
  html[data-tema="escuro"] body .forgetbtn{background:var(--sb-control);border-color:var(--sb-border-strong);color:var(--sb-color-danger);}
  html[data-tema="escuro"] body .forgetbtn[data-act="fbOpen"]{color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .forgetbtn:hover{background:#3a4354;}
  html[data-tema="escuro"] body .pin-forgot{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .ctxdd-sep{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .lgchk{color:var(--sb-color-primary);}

  /* Salvar frase */
  html[data-tema="escuro"] body .sbsp-body{background:var(--sb-surface-float);}
  html[data-tema="escuro"] body .sbsp-step{background:var(--sb-surface);border-color:var(--sb-border);}
  html[data-tema="escuro"] body .sbsp-hn{background:var(--sb-color-primary-soft);color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sbsp-step.open .sbsp-hn{background:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .sbsp-ht{color:var(--sb-color-title);}
  html[data-tema="escuro"] body :is(.sbsp-sum,.sbsp-flbl,.sbsp-hint,.sbsp-modehint,.sbsp-phint,.sbsp-alabel,.sbcs-status,.sbcs-src){color:var(--sb-color-muted);}
  html[data-tema="escuro"] body :is(.sbsp-text,.sbcs-q){background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body :is(.sbsp-modebtn,.sbcs-chip){background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body :is(.sbsp-modebtn,.sbcs-chip).on{background:var(--sb-color-primary-soft);border-color:var(--sb-color-primary);color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sbsp-trecho{background:var(--sb-control);border-color:var(--sb-border-strong);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sbsp-trecho-txt{color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sbsp-pcard{background:var(--sb-gestalt-fundo);border-color:var(--sb-gestalt-borda);}
  html[data-tema="escuro"] body :is(.sbsp-pbadge,.sbsp-plbl,.sbcs-lbl){color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sbsp-audio{border-top-color:var(--sb-border);}
  html[data-tema="escuro"] body .sbsp-abtn{background:var(--sb-control);border-color:var(--sb-border-strong);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sbsp-aclear{color:var(--sb-color-danger);}
  html[data-tema="escuro"] body .sbsp-save{background:var(--sb-color-success);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .sbsp-save:disabled{background:var(--sb-control);color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .sbsp-login{background:rgba(27,31,39,.97);}
  html[data-tema="escuro"] body .sbsp-loginmsg{color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sbsp-loginbtn{background:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .sbsp-logincancel{background:var(--sb-control);border-color:var(--sb-border-strong);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body :is(.sbcs-act,.sbcs-card){background:var(--sb-control);border-color:var(--sb-border-strong);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sbcs-card img{background:#fff;border-radius:8px;}

  /* Apoios visuais (sb-resource.css) */
  html[data-tema="escuro"] body .sb-resource-dialog .sr-item{background:var(--sb-surface);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .sb-resource-dialog .sr-item>button.sr-visual{background:transparent;color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .sb-resource-dialog .sr-item.sr-current{outline-color:var(--sb-color-primary);}
  html[data-tema="escuro"] body .sb-resource-dialog .sr-item.sr-done{border-color:var(--sb-color-success);}
  html[data-tema="escuro"] body .sb-resource-dialog .sr-image{background:#fff;border-radius:10px;}
  html[data-tema="escuro"] body .sr-done-count{color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .sr-trilha-conta{color:var(--sb-color-title);}
  html[data-tema="escuro"] body .sr-premio-tag{color:var(--sb-color-warning);}
  html[data-tema="escuro"] body .sr-account-note{background:var(--sb-color-primary-soft);}
  html[data-tema="escuro"] body .sr-map-heading>span:last-child{background:var(--sb-control);}
  /* o número do mapa vira texto grande (19 px, negrito) sobre a cor do caminho, que é significado */
  html[data-tema="escuro"] body .sr-map-badge{font-size:19px;}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] .sr-iconography .sr-resource-actions [data-sr-action="listen"]{color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] .sr-iconography .sr-item .sr-command[data-sr-action="done"]{background:var(--sb-color-success-soft);color:var(--sb-color-success);border-color:var(--sb-color-success);}

  /* Modo Texto */
  html[data-tema="escuro"] body #modotexto{background:var(--sb-canvas);color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .mt-entrada-icone{color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .mt-titulo{color:var(--sb-color-title);}
  html[data-tema="escuro"] body :is(.mt-cfg,.mt-modo){background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body :is(.mt-compositor label,.mt-status,.mt-sugestoes-titulo,.mt-fantasma){color:var(--sb-color-muted);}
  html[data-tema="escuro"] body .mt-natural{color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .mt-campo{background:var(--sb-control);}
  html[data-tema="escuro"] body .mt-seta-aceite{background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .mt-seta-aceite:focus-visible{outline-color:#F9BA1C;}
  html[data-tema="escuro"] body .mt-chip{background:var(--sb-control);color:var(--sb-color-ink);border-color:var(--sb-border-strong);}
  html[data-tema="escuro"] body .mt-chip.mt-prim{box-shadow:inset 0 0 0 2px var(--sb-color-primary);}
  html[data-tema="escuro"] body.sb-ui[data-sb-ui] .mt-acoes button[data-act="mtFalar"]{background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:var(--sb-color-on-primary);}
  html[data-tema="escuro"] body .mt-acoes button.danger,html[data-tema="escuro"] body .mt-texto-apagar{background:var(--sb-color-danger-soft);border-color:#6b3b38;color:var(--sb-color-danger);}
  html[data-tema="escuro"] body :is(.mt-textos,.mt-teclado){background:var(--sb-surface);border-color:var(--sb-border);}
  html[data-tema="escuro"] body :is(.mt-tecla,.mt-espaco){background:var(--sb-control);color:var(--sb-color-ink);box-shadow:0 1px 2px #000a;}
  html[data-tema="escuro"] body .mt-esp{background:#3a4354;color:var(--sb-color-ink);}
  html[data-tema="escuro"] body .mt-esp.mt-ativa,html[data-tema="escuro"] body .mt-cam[aria-pressed="true"]{background:var(--sb-color-primary);color:var(--sb-color-on-primary);}
}
@media screen and (orientation:landscape) and (max-height:400px) {
  /* celular deitado: a faixa da previsão fica fixa e pinta o fundo da página (board-ux.css, CRIS-101) */
  html[data-tema="escuro"] body.sb-shell .predzone{background:var(--sb-canvas);}
}