/* =============================================================================
   Central Star — tema escuro.
   Ativo quando <html data-tema="escuro">, ou data-tema="sistema" com o aparelho no modo escuro.
   Só troca cores: o layout é o mesmo do tema claro.
   ============================================================================= */
html[data-tema="escuro"] {
  --cs-primaria: #26a0a5;
  --cs-primaria-esc: #1f8a8f;
  --cs-primaria-clara: rgba(38, 160, 165, .16);
  --cs-primaria-texto: #6fd3d7;
  --cs-fundo: #0e1316;
  --cs-superficie: #151b1f;
  --cs-superficie-2: #1b2227;
  --cs-borda: #262f36;
  --cs-borda-forte: #36424b;
  --cs-texto: #e7ebee;
  --cs-texto-2: #c1c9d0;
  --cs-muted: #8a959f;
  --cs-sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --cs-laranja: #f2a65f;  --cs-laranja-bg: rgba(242, 166, 95, .14);  --cs-laranja-borda: rgba(242, 166, 95, .32);
  --cs-azul: #7fa8ff;     --cs-azul-bg: rgba(127, 168, 255, .15);
  --cs-verde: #5fd08d;    --cs-verde-bg: rgba(95, 208, 141, .14);
  --cs-vermelho: #ff7b82; --cs-vermelho-bg: rgba(255, 123, 130, .14);
  --cs-roxo: #b99cff;     --cs-roxo-bg: rgba(185, 156, 255, .15);
  --cs-cinza-bg: #232b31;
  --cs-destaque: #1a2126;
  --cs-faixa: #182025;
  --cs-nova: rgba(38, 160, 165, .10);
  --ch-azul: var(--cs-primaria); --ch-verde: var(--cs-verde); --ch-ambar: var(--cs-laranja); --ch-vermelho: var(--cs-vermelho);
  --ch-borda: var(--cs-borda); --ch-fundo: var(--cs-superficie-2); --ch-muted: var(--cs-muted); --muted: var(--cs-muted);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-tema="sistema"] {
    --cs-primaria: #26a0a5; --cs-primaria-esc: #1f8a8f; --cs-primaria-clara: rgba(38, 160, 165, .16); --cs-primaria-texto: #6fd3d7;
    --cs-fundo: #0e1316; --cs-superficie: #151b1f; --cs-superficie-2: #1b2227; --cs-borda: #262f36; --cs-borda-forte: #36424b;
    --cs-texto: #e7ebee; --cs-texto-2: #c1c9d0; --cs-muted: #8a959f; --cs-sombra: 0 1px 2px rgba(0, 0, 0, .35);
    --cs-laranja: #f2a65f; --cs-laranja-bg: rgba(242, 166, 95, .14); --cs-laranja-borda: rgba(242, 166, 95, .32);
    --cs-azul: #7fa8ff; --cs-azul-bg: rgba(127, 168, 255, .15); --cs-verde: #5fd08d; --cs-verde-bg: rgba(95, 208, 141, .14);
    --cs-vermelho: #ff7b82; --cs-vermelho-bg: rgba(255, 123, 130, .14); --cs-roxo: #b99cff; --cs-roxo-bg: rgba(185, 156, 255, .15);
    --cs-cinza-bg: #232b31; --cs-destaque: #1a2126; --cs-faixa: #182025; --cs-nova: rgba(38, 160, 165, .10);
    --ch-azul: var(--cs-primaria); --ch-verde: var(--cs-verde); --ch-ambar: var(--cs-laranja); --ch-vermelho: var(--cs-vermelho);
    --ch-borda: var(--cs-borda); --ch-fundo: var(--cs-superficie-2); --ch-muted: var(--cs-muted); --muted: var(--cs-muted);
    color-scheme: dark;
  }
}

/* Cores fixas do tema claro que precisam de versão escura */
html[data-tema="escuro"] .cs-comunicado.fixado { background: var(--cs-destaque); }
html[data-tema="escuro"] .cs-faixa-app { background: var(--cs-faixa); }
html[data-tema="escuro"] .cs-notificacao.nova { background: var(--cs-nova); }
html[data-tema="escuro"] .btn-danger { border-color: rgba(255, 123, 130, .4); }
html[data-tema="escuro"] .ch-alerta-ok { border-color: rgba(95, 208, 141, .35); }
html[data-tema="escuro"] .ch-alerta-erro { border-color: rgba(255, 123, 130, .35); }
html[data-tema="escuro"] .ch-msg.ch-proprio { border-color: rgba(38, 160, 165, .45); }
html[data-tema="escuro"] .ch-etapas li.feito { border-color: rgba(95, 208, 141, .35); }
html[data-tema="escuro"] .cs-notificacoes { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
html[data-tema="escuro"] .ch-bottom-nav { box-shadow: 0 -2px 12px rgba(0, 0, 0, .4); }
html[data-tema="escuro"] .ch-nivel { background: transparent; }
html[data-tema="escuro"] .ch-envio-lote { background: var(--cs-primaria-clara); border-color: rgba(38, 160, 165, .35); }
html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder { color: #6b7680; }
@media (prefers-color-scheme: dark) {
  html[data-tema="sistema"] .cs-comunicado.fixado { background: var(--cs-destaque); }
  html[data-tema="sistema"] .cs-faixa-app { background: var(--cs-faixa); }
  html[data-tema="sistema"] .cs-notificacao.nova { background: var(--cs-nova); }
  html[data-tema="sistema"] .btn-danger { border-color: rgba(255, 123, 130, .4); }
  html[data-tema="sistema"] .ch-alerta-ok { border-color: rgba(95, 208, 141, .35); }
  html[data-tema="sistema"] .ch-alerta-erro { border-color: rgba(255, 123, 130, .35); }
  html[data-tema="sistema"] .ch-msg.ch-proprio { border-color: rgba(38, 160, 165, .45); }
  html[data-tema="sistema"] .ch-etapas li.feito { border-color: rgba(95, 208, 141, .35); }
  html[data-tema="sistema"] .cs-notificacoes { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
  html[data-tema="sistema"] .ch-nivel { background: transparent; }
  html[data-tema="sistema"] .ch-envio-lote { background: var(--cs-primaria-clara); border-color: rgba(38, 160, 165, .35); }
}