/* ============================================================
   Modo escuro. Liga sozinho quando o celular/computador está no
   escuro, ou pelo botão da lua no topo (a escolha fica salva).
   Tudo aqui vale só com <html data-tema="escuro">.
   ============================================================ */
html[data-tema="escuro"] {
  color-scheme: dark;
  --papel: #16213A;
  --fundo: #101A2E;
  --pagina: #0A1222;
  --tinta: #E8EDF7;
  --cinza: #A5B0C4;
  --linha: #2A3856;
  --azul: #9DB8FF;            /* azul como TEXTO (links, rótulos) fica claro para ler no escuro */
  --azul-claro: #1E2C4C;
  --alerta: #FFB37E;
  --alerta-fundo: #3A2416;
  --sombra-suave: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 34px rgba(0, 0, 0, .5);
  --texto-verde: #6BE29C;
}
html[data-tema="escuro"] body, html[data-tema="escuro"] .painel, html[data-tema="escuro"] #conteudo { background: var(--pagina); }

/* topo: mesmo verde, mais fundo */
html[data-tema="escuro"] .faixa {
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(255, 223, 0, .18), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(19, 50, 140, .6), transparent 65%),
    linear-gradient(135deg, #00602D 0%, #04503A 50%, #0A3550 100%);
}
html[data-tema="escuro"] .busca { background: rgba(10, 18, 34, .35); border-color: rgba(255, 255, 255, .16); }
html[data-tema="escuro"] .busca input[type="text"], html[data-tema="escuro"] .busca input:not([type]),
html[data-tema="escuro"] .icone { background: #1B2844; color: var(--tinta); }
html[data-tema="escuro"] .busca input::placeholder { color: #8391AA; }
html[data-tema="escuro"] .raios input:checked + label,
html[data-tema="escuro"] .abas button[aria-pressed="true"] { background: #E8EDF7; color: #13328C; }

/* cartões */
html[data-tema="escuro"] .posto, html[data-tema="escuro"] .posto:hover, html[data-tema="escuro"] .posto.ativo,
html[data-tema="escuro"] .resumo, html[data-tema="escuro"] .sem-info, html[data-tema="escuro"] .fp,
html[data-tema="escuro"] .rota-receita, html[data-tema="escuro"] .lembrete-corpo, html[data-tema="escuro"] .busca-posto,
html[data-tema="escuro"] .detalhe { background: var(--papel); }
html[data-tema="escuro"] .posto { border: 1px solid rgba(255, 255, 255, .05); }
html[data-tema="escuro"] .posto.ativo { box-shadow: 0 0 0 2px #6F93FF, var(--sombra-alta); }
html[data-tema="escuro"] .abas { background: rgba(22, 33, 58, .85); }
html[data-tema="escuro"] .abas button { color: var(--cinza); }

/* botões claros viram botões escuros com borda */
html[data-tema="escuro"] .botao-ouvir { background: linear-gradient(180deg, #22325A, #1A2747); color: #DCE5FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 0 #0A1430, 0 8px 14px rgba(0, 0, 0, .4); border-color: #4C6AC4; }
html[data-tema="escuro"] .acoes a.rota { background: #1F2D4D; color: #C9D7FF; }
html[data-tema="escuro"] .acoes a.rota:hover { background: #283A63; }
html[data-tema="escuro"] .r-botoes button { background: transparent; color: #C9D7FF; border-color: #6F93FF; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
html[data-tema="escuro"] .r-botoes button[data-tinha="1"]:hover { background: #12351F; color: var(--texto-verde); border-color: var(--texto-verde); }
html[data-tema="escuro"] .r-botoes button[data-tinha="0"]:hover { background: var(--alerta-fundo); }
html[data-tema="escuro"] .lembrete-dias button.ativo,
html[data-tema="escuro"] .pino.ativo { background: #2448B8; color: #FFE45C; }

/* textos verdes e notas coloridas legíveis no escuro */
html[data-tema="escuro"] .st-aberto, html[data-tema="escuro"] .r-sim, html[data-tema="escuro"] .r-obrigado,
html[data-tema="escuro"] .corrigido, html[data-tema="escuro"] .ok-corrigido,
html[data-tema="escuro"] .chips-receita .ok, html[data-tema="escuro"] .checklist .ok { color: var(--texto-verde); }
html[data-tema="escuro"] .chips-receita .ok { background: #12351F; border-color: #2E9E5E; }
html[data-tema="escuro"] .nota-central, html[data-tema="escuro"] .fp .fp-selo, html[data-tema="escuro"] .marca-aviso {
  background: #3A3110; color: #FFE9A3; }
html[data-tema="escuro"] .nota-comp { background: #1E2C4C; color: #C9D7FF; }
html[data-tema="escuro"] .fp { border-color: #2E9E5E; }
html[data-tema="escuro"] .fp h2, html[data-tema="escuro"] .fp h3, html[data-tema="escuro"] .fp-titulo { color: var(--texto-verde); }
html[data-tema="escuro"] mark.m-errado { background: #5A1E1A; color: #FFB4AB; }
html[data-tema="escuro"] .caixinha .frente { background: #2A1F3A; color: #E7C6F2; }
html[data-tema="escuro"] .dist, html[data-tema="escuro"] .palavra-anim { color: var(--tinta); }

/* mapa: ruas em tons escuros (inverte as cores dos azulejos do OpenStreetMap) */
html[data-tema="escuro"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.7); }
html[data-tema="escuro"] .leaflet-container { background: #0E1626; }
html[data-tema="escuro"] .legenda { background: rgba(22, 33, 58, .88) !important; color: var(--tinta); }
html[data-tema="escuro"] .leaflet-bar a { background: var(--papel); color: var(--tinta); border-color: var(--linha); }
html[data-tema="escuro"] .leaflet-popup-content-wrapper, html[data-tema="escuro"] .leaflet-popup-tip { background: var(--papel); color: var(--tinta); }
html[data-tema="escuro"] .leaflet-control-attribution { background: rgba(22, 33, 58, .8) !important; color: var(--cinza); }
html[data-tema="escuro"] .leaflet-control-attribution a { color: #9DB8FF; }

/* sugestões de endereço */
html[data-tema="escuro"] .sug-end { border-color: #4C6AC4; }

/* painel do gestor */
html[data-tema="escuro"] .card, html[data-tema="escuro"] .bloco { background: var(--papel) !important; }
html[data-tema="escuro"] .filtros select, html[data-tema="escuro"] .periodo button,
html[data-tema="escuro"] .btn-acessos, html[data-tema="escuro"] .teste-rel { background: var(--papel); color: var(--tinta); border-color: #4C6AC4; }
html[data-tema="escuro"] .periodo button[aria-pressed="true"],
html[data-tema="escuro"] .btn-acessos[aria-expanded="true"] { background: #E8EDF7; color: #13328C; }
html[data-tema="escuro"] .alerta-faixa { background: #3A3110; color: #FFE9A3; }
html[data-tema="escuro"] .faixa-velho-p { background: #3A3110; color: #FFE9A3; border-color: #8A6D00; }
html[data-tema="escuro"] .cmp-l.eu { background: #1E2C4C; }
html[data-tema="escuro"] .cmp-l.uf { background: #121C31; }
html[data-tema="escuro"] .cmp-barra, html[data-tema="escuro"] .barra { background: #0E1626; }
html[data-tema="escuro"] .cmp-l.eu .cmp-barra div { background: linear-gradient(90deg, #6F93FF, #9DB8FF); }
html[data-tema="escuro"] .card .val { color: #C9D7FF; }
html[data-tema="escuro"] #telaAcessos input { background: #1B2844; color: var(--tinta); border-color: var(--linha); }
html[data-tema="escuro"] .chips-c span { background: #1E2C4C; color: #C9D7FF; }
html[data-tema="escuro"] .chips-c button { color: #C9D7FF; }
html[data-tema="escuro"] .btn-mini { background: var(--papel); color: #C9D7FF; border-color: var(--linha); }
html[data-tema="escuro"] .card .val.ruim, html[data-tema="escuro"] .linha .num i { color: #FF8A80; }

/* botão da lua/sol no topo */
.btn-tema {
  min-width: 44px; height: 36px; padding: 0 8px; border-radius: 18px; border: 2px solid #fff;
  background: transparent; color: #fff; cursor: pointer; display: inline-grid; place-items: center; flex: none;
}
.btn-tema svg { width: 18px; height: 18px; }
.btn-tema:hover { background: rgba(255, 255, 255, .14); }
html[data-tema="escuro"] .btn-tema { background: #E8EDF7; color: #13328C; border-color: #E8EDF7; }

/* fundo amarelo continua com texto azul-escuro (o --azul claro não lê no amarelo) */
html[data-tema="escuro"] .buscar, html[data-tema="escuro"] .botao-aviso,
html[data-tema="escuro"] .pino { color: #13328C; border-color: #13328C; }
html[data-tema="escuro"] .pino.ativo { color: #FFE45C; border-color: #FFE45C; }