/* ============================================================
   Modo noturno — navy da marca.

   COMO FUNCIONA, E POR QUE ASSIM: as telas do Maind trazem a cor LITERAL no estilo
   inline (style="background: #fff"), herança do desenho no protótipo. Reescrever as 56
   telas pra usar variáveis seria refatoração enorme e arriscada, então o tema REMAPEIA
   os literais: casa pelo valor que o navegador serializa no atributo style. É por isso
   que os seletores falam rgb(255, 255, 255) e não #fff — o navegador normaliza pra rgb()
   ao serializar, e o seletor precisa casar com a forma RENDERIZADA, não com a escrita.

   CONSEQUÊNCIA PRA MANUTENÇÃO: cor nova numa tela não escurece sozinha. Se você usar um
   tom que não está mapeado aqui, ele aparece claro no escuro. Ou reaproveite um tom que
   já existe, ou acrescente a linha correspondente neste arquivo.

   Fundo #060a24 · superfície #0b1030 · elevada #131a3a
   ============================================================ */

html[data-tema="escuro"] {
  --fundo: #060a24;
  --superficie: #0b1030;
  --elevada: #131a3a;
  --linha: rgba(243, 247, 255, .10);
  --texto: #f3f7ff;
  --texto-2: #c3c5d6;
  --texto-3: #8f93aa;
}

html[data-tema="escuro"],
html[data-tema="escuro"] body { background: #060a24 !important; color: #e8e9f2 !important; }

html[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: #232a4d; border-color: #060a24; }

/* ---- superfícies ---- */
html[data-tema="escuro"] [style*="background: rgb(255, 255, 255)"] { background: #0b1030 !important; }
html[data-tema="escuro"] [style*="background: rgb(250, 250, 250)"],
html[data-tema="escuro"] [style*="background: rgb(249, 250, 251)"] { background: #0e1433 !important; }
html[data-tema="escuro"] [style*="background: rgb(244, 244, 245)"],
html[data-tema="escuro"] [style*="background: rgb(243, 247, 255)"],
html[data-tema="escuro"] [style*="background: rgb(242, 242, 242)"],
html[data-tema="escuro"] [style*="background: rgb(245, 246, 248)"],
html[data-tema="escuro"] [style*="background: rgb(236, 236, 240)"],
/* cinzas de trilho e de faixa alternada que estavam passando claros no escuro — cada tom
   novo usado numa tela precisa ser mapeado aqui, senão ele não escurece (ver o topo). */
html[data-tema="escuro"] [style*="background: rgb(241, 242, 244)"],
html[data-tema="escuro"] [style*="background: rgb(241, 242, 245)"],
html[data-tema="escuro"] [style*="background: rgb(245, 245, 247)"],
html[data-tema="escuro"] [style*="background: rgb(247, 247, 249)"],
html[data-tema="escuro"] [style*="background: rgb(248, 248, 250)"],
html[data-tema="escuro"] [style*="background: rgb(228, 228, 231)"] { background: #131a3a !important; }

/* ---- bordas ---- */
html[data-tema="escuro"] [style*="rgb(228, 228, 231)"],
html[data-tema="escuro"] [style*="rgb(231, 231, 235)"],
html[data-tema="escuro"] [style*="rgb(244, 244, 245)"],
html[data-tema="escuro"] [style*="rgb(236, 236, 240)"],
html[data-tema="escuro"] [style*="rgb(250, 250, 250)"] { border-color: rgba(243, 247, 255, .10) !important; }

/* ---- texto ----
   Exigir início da string ou "; " antes evita casar com background-color, que também
   contém a palavra "color" e faria o seletor pintar o fundo como se fosse texto. */
html[data-tema="escuro"] [style^="color: rgb(3, 6, 51)"],
html[data-tema="escuro"] [style*="; color: rgb(3, 6, 51)"] { color: #f3f7ff !important; }
html[data-tema="escuro"] [style^="color: rgb(24, 24, 27)"],
html[data-tema="escuro"] [style*="; color: rgb(24, 24, 27)"] { color: #e6e7f0 !important; }
html[data-tema="escuro"] [style^="color: rgb(39, 39, 42)"],
html[data-tema="escuro"] [style*="; color: rgb(39, 39, 42)"] { color: #dcdee9 !important; }
html[data-tema="escuro"] [style^="color: rgb(63, 63, 70)"],
html[data-tema="escuro"] [style*="; color: rgb(63, 63, 70)"] { color: #c3c5d6 !important; }
html[data-tema="escuro"] [style^="color: rgb(82, 82, 91)"],
html[data-tema="escuro"] [style*="; color: rgb(82, 82, 91)"] { color: #aeb2c6 !important; }
html[data-tema="escuro"] [style^="color: rgb(113, 113, 122)"],
html[data-tema="escuro"] [style*="; color: rgb(113, 113, 122)"] { color: #9296ac !important; }
html[data-tema="escuro"] [style^="color: rgb(161, 161, 170)"],
html[data-tema="escuro"] [style*="; color: rgb(161, 161, 170)"] { color: #767a91 !important; }
html[data-tema="escuro"] [style^="color: rgb(55, 96, 169)"],
html[data-tema="escuro"] [style*="; color: rgb(55, 96, 169)"] { color: #8fb4f5 !important; }
html[data-tema="escuro"] [style^="color: rgb(29, 78, 216)"],
html[data-tema="escuro"] [style*="; color: rgb(29, 78, 216)"] { color: #8fb4f5 !important; }

/* ---- campos ---- */
html[data-tema="escuro"] input,
html[data-tema="escuro"] textarea,
html[data-tema="escuro"] select {
  background: #0e1433 !important;
  color: #e8e9f2 !important;
  border-color: rgba(243, 247, 255, .12) !important;
}
html[data-tema="escuro"] input::placeholder,
html[data-tema="escuro"] textarea::placeholder { color: #6e7288 !important; }

/* ---- ícones de traço cinza somem no escuro ---- */
html[data-tema="escuro"] svg[stroke="#a1a1aa"] { stroke: #7b7f96 !important; }
html[data-tema="escuro"] svg[stroke="#71717a"] { stroke: #9296ac !important; }

/* ---- pílulas de estado: escurece o fundo pastel, clareia o texto ---- */
html[data-tema="escuro"] [style*="background: rgb(254, 243, 199)"] { background: rgba(251, 191, 36, .16) !important; }
html[data-tema="escuro"] [style^="color: rgb(180, 83, 9)"],
html[data-tema="escuro"] [style*="; color: rgb(180, 83, 9)"] { color: #fbbf24 !important; }
html[data-tema="escuro"] [style*="background: rgb(254, 226, 226)"] { background: rgba(248, 113, 113, .16) !important; }
html[data-tema="escuro"] [style^="color: rgb(153, 27, 27)"],
html[data-tema="escuro"] [style*="; color: rgb(153, 27, 27)"] { color: #fca5a5 !important; }
html[data-tema="escuro"] [style*="background: rgb(220, 252, 231)"] { background: rgba(52, 211, 153, .14) !important; }
html[data-tema="escuro"] [style^="color: rgb(15, 118, 110)"],
html[data-tema="escuro"] [style*="; color: rgb(15, 118, 110)"] { color: #80e1c6 !important; }
html[data-tema="escuro"] [style^="color: rgb(21, 128, 61)"],
html[data-tema="escuro"] [style*="; color: rgb(21, 128, 61)"] { color: #6ee7b7 !important; }
html[data-tema="escuro"] [style*="background: rgb(219, 234, 254)"] { background: rgba(86, 147, 237, .16) !important; }
html[data-tema="escuro"] [style*="background: rgb(255, 237, 213)"] { background: rgba(251, 146, 60, .16) !important; }
/* pastéis dos cartões de indicador do Painel de Ponto */
html[data-tema="escuro"] [style*="background: rgb(230, 237, 251)"] { background: rgba(86, 147, 237, .16) !important; }
html[data-tema="escuro"] [style*="background: rgb(220, 245, 236)"] { background: rgba(52, 211, 153, .14) !important; }
html[data-tema="escuro"] [style*="background: rgb(253, 240, 220)"] { background: rgba(251, 191, 36, .16) !important; }
html[data-tema="escuro"] [style*="background: rgb(253, 232, 232)"] { background: rgba(248, 113, 113, .16) !important; }
html[data-tema="escuro"] [style^="color: rgb(13, 122, 99)"],
html[data-tema="escuro"] [style*="; color: rgb(13, 122, 99)"] { color: #80e1c6 !important; }
html[data-tema="escuro"] [style^="color: rgb(185, 28, 28)"],
html[data-tema="escuro"] [style*="; color: rgb(185, 28, 28)"] { color: #fca5a5 !important; }

/* ---- TARJAS DE AVISO: o tier -50, mais claro que as pílulas acima ----
   Este bloco conserta o pior defeito de contraste do modo escuro, e ele é do tipo que só aparece
   no escuro: o TEXTO destas tarjas JÁ era remapeado pra claro (#b45309 → #fbbf24, #b91c1c →
   #fca5a5, logo acima), mas o FUNDO delas não estava mapeado. Resultado: âmbar claro sobre
   quase-branco, e vermelho claro sobre quase-branco — ilegível, justamente nos avisos, que são o
   que mais precisa ser lido.

   Por que passou tanto tempo: as pílulas usam o tier -100 (#fef3c7, #fee2e2), que está mapeado
   desde sempre. As tarjas de aviso usam o tier -50 (#fffbeb, #fef2f2), um degrau mais claro — e
   "cor nova não escurece sozinha" (ver o topo deste arquivo).

   A tinta é mais fraca que a das pílulas (.10 contra .16) porque a superfície é MAIOR: a mesma
   opacidade num painel inteiro pesa demais sobre o navy.
   Usados em: RH, Recursos, Ponto, Admin, Contatos, CRMInbox, Documentos e mais 20 telas. */
html[data-tema="escuro"] [style*="background: rgb(255, 251, 235)"] { background: rgba(251, 191, 36, .10) !important; }
html[data-tema="escuro"] [style*="background: rgb(254, 242, 242)"] { background: rgba(248, 113, 113, .10) !important; }
/* #fde68a também aparece como FUNDO (barra de progresso em CRMPipeline/RegistroDiario): ali é
   preenchimento sólido, então recebe a tinta de pílula, mais forte. */
html[data-tema="escuro"] [style*="background: rgb(253, 230, 138)"] { background: rgba(251, 191, 36, .16) !important; }
/* #d4d4d8 como fundo é trilho de barra (3 telas) — mesmo alvo dos outros cinzas de trilho. */
html[data-tema="escuro"] [style*="background: rgb(212, 212, 216)"] { background: #131a3a !important; }

/* ---- bordas das tarjas e o cinza de traço mais escuro ----
   Sem estas linhas a tarja escurece mas fica com um contorno claro em volta, que no navy lê como
   um retângulo brilhante. As bordas de aviso mantêm a cor da família (é o que distingue um aviso
   de um painel comum), com opacidade suficiente pra desenhar sem gritar. */
html[data-tema="escuro"] [style*="rgb(253, 230, 138)"] { border-color: rgba(251, 191, 36, .32) !important; }
html[data-tema="escuro"] [style*="rgb(254, 202, 202)"] { border-color: rgba(248, 113, 113, .32) !important; }
/* #d4d4d8 é o cinza de borda um degrau mais escuro que o #e4e4e7 já mapeado — 45 telas usam. */
html[data-tema="escuro"] [style*="rgb(212, 212, 216)"] { border-color: rgba(243, 247, 255, .10) !important; }

/* ---- azuis e cinzas claros das telas novas (Recursos, Ponto) ----
   Mesma regra do bloco acima: tom novo não escurece sozinho. Estes entraram com a Central de
   Recursos e com a assinatura do espelho, e ficariam claros no navy. */
html[data-tema="escuro"] [style*="background: rgb(238, 244, 254)"] { background: rgba(86, 147, 237, .12) !important; }
/* Pilha de navy TRANSLÚCIDO (o chip de papel "Direção", em Pessoas). No claro é navy a 8% sobre
   branco e lê como pílula; no escuro, navy a 8% sobre a superfície navy é INVISÍVEL — o chip
   perderia o fundo e os três papéis ficariam visualmente iguais, que é justamente o que a
   pílula colorida existe pra evitar. O valor exato (0.08) e não o prefixo "rgba(3, 6, 51":
   aquele casaria também o véu do modal (.45), que deve continuar escuro. */
html[data-tema="escuro"] [style*="background: rgba(3, 6, 51, 0.08)"] { background: rgba(243, 247, 255, .10) !important; }
html[data-tema="escuro"] [style*="background: rgb(248, 250, 252)"],
html[data-tema="escuro"] [style*="background: rgb(241, 245, 249)"] { background: #0e1433 !important; }
/* #c3d5f5 é preenchimento sólido de barra (não superfície), então leva tinta mais forte */
html[data-tema="escuro"] [style*="background: rgb(195, 213, 245)"] { background: rgba(86, 147, 237, .32) !important; }
html[data-tema="escuro"] [style*="rgb(219, 231, 251)"],
html[data-tema="escuro"] [style*="rgb(241, 245, 249)"] { border-color: rgba(86, 147, 237, .28) !important; }

/* ---- sombras claras não funcionam sobre navy ---- */
html[data-tema="escuro"] [style*="box-shadow: rgba(3, 6, 51"] { box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .6) !important; }

/* ---- telas que usam tokens próprios (Ponto: --tinta) ---- */
html[data-tema="escuro"] [style^="color: var(--tinta)"],
html[data-tema="escuro"] [style*="; color: var(--tinta)"] { color: #f3f7ff !important; }
html[data-tema="escuro"] [style*="background: var(--tinta)"] { background: #0b1030 !important; }
/* avatares e botões com superfície clara mantêm o texto escuro */
html[data-tema="escuro"] [style*="linear-gradient(135deg, var(--azul)"],
html[data-tema="escuro"] [style*="background: var(--menta)"],
html[data-tema="escuro"] [style*="background: rgb(128, 225, 198)"] { color: #03261f !important; }

/* O header do shell JÁ é navy no claro — não deve escurecer de novo nem perder contraste. */
/* ⚠️ NAVY COMO FUNDO DE "SELECIONADO" — achado em 20/08 e vale pra APP INTEIRA, não só pra uma
   tela. `background: #030633` é o estado escolhido em toda a casa (chip de filtro, dia do
   calendário, aba ativa) e só estava remapeado DENTRO do header, que tem a regra abaixo. Fora
   dele, navy (3,6,51) sobre a superfície navy do escuro (11,16,48) é praticamente o mesmo tom:
   o item selecionado perdia o destaque e ficava indistinguível dos outros.
   O alvo é um navy MAIS CLARO, não o azul da marca: headers e toasts também usam este fundo de
   propósito, e trocá-los por azul mudaria a identidade deles. Assim os dois casos funcionam —
   o selecionado aparece, e o que é escuro por decisão continua escuro.
   A regra do header vem DEPOIS e é mais específica, então ela continua vencendo lá. */
html[data-tema="escuro"] [style*="background: rgb(3, 6, 51)"] { background: #1b2450 !important; }
html[data-tema="escuro"] .cuida-header [style*="background: rgb(3, 6, 51)"] { background: #060a24 !important; }

/* ---- relógio de ponto (card de hoje do Meu Ponto) ----
   As ações do card ganharam `data-primaria` porque no escuro não dá pra distinguir a ação
   principal das secundárias só pelo estilo inline: o primário é `background: var(--menta)`,
   que o bloco de superfícies acima já remapeia, e o secundário é transparente sobre um card
   que também escureceu. O atributo dá ao tema um gancho explícito, em vez de adivinhar por
   cor literal. Só o card do Ponto usa o atributo hoje.
   O ANEL não precisa de regra: a trilha já é rgba(243,247,255,.12) e o traço é var(--menta) —
   ambos nasceram pra viver sobre navy. */
html[data-tema="escuro"] button[data-primaria="1"] {
  background: #80e1c6 !important;
  border-color: #80e1c6 !important;
  color: #03261f !important;
}
html[data-tema="escuro"] button[data-primaria="0"] {
  background: rgba(243, 247, 255, .05) !important;
  border-color: rgba(243, 247, 255, .16) !important;
  color: #e8e9f2 !important;
}

/* ---- Configurações (13/08/2026): tons que a tela trouxe e não escureciam ----
   Sem estas linhas o cabeçalho da tabela, o item de menu selecionado e as três caixas de recado
   (informação, sucesso, erro) ficavam CLARAS sobre o navy — exatamente a dívida descrita no topo
   deste arquivo. As caixas coloridas viram LAVAGEM da própria cor, não superfície neutra: pintar a
   caixa de erro de navy apagaria o vermelho, que é o recado. */
html[data-tema="escuro"] [style*="background: rgb(250, 251, 252)"] { background: #131a3a !important; } /* #fafbfc cabeçalho de tabela */
html[data-tema="escuro"] [style*="background: rgb(244, 247, 254)"], /* #f4f7fe item de menu selecionado */
html[data-tema="escuro"] [style*="background: rgb(244, 248, 255)"], /* #f4f8ff caixa de informação */
html[data-tema="escuro"] [style*="background: rgb(232, 240, 253)"] { background: rgba(86, 147, 237, .16) !important; } /* #e8f0fd engrenagem ligada */
html[data-tema="escuro"] [style*="background: rgb(236, 253, 245)"] { background: rgba(52, 211, 153, .14) !important; } /* #ecfdf5 sucesso */
html[data-tema="escuro"] [style*="background: rgb(254, 246, 246)"] { background: rgba(248, 113, 113, .16) !important; } /* #fef6f6 erro */
/* bordas pastel das mesmas caixas: no claro elas delimitam, no escuro estouram de brilho */
html[data-tema="escuro"] [style*="rgb(207, 224, 251)"] { border-color: rgba(86, 147, 237, .38) !important; }  /* #cfe0fb */
html[data-tema="escuro"] [style*="rgb(167, 243, 208)"] { border-color: rgba(52, 211, 153, .35) !important; }  /* #a7f3d0 */
html[data-tema="escuro"] [style*="rgb(240, 211, 211)"] { border-color: rgba(248, 113, 113, .38) !important; } /* #f0d3d3 */
html[data-tema="escuro"] [style*="rgb(245, 217, 171)"] { border-color: rgba(251, 191, 36, .38) !important; }  /* #f5d9ab */
html[data-tema="escuro"] [style*="rgb(6, 95, 70)"] { color: #6ee7b7 !important; }  /* #065f46 texto do sucesso */
html[data-tema="escuro"] [style*="rgb(124, 74, 6)"] { color: #fbbf24 !important; } /* #7c4a06 texto do aviso */
html[data-tema="escuro"] [style*="rgb(47, 86, 152)"] { color: #8fb4f5 !important; } /* #2f5698 texto da informação */

/* transição sutil só nas superfícies; `*` deixaria a troca pesada em telas grandes */
html[data-tema="escuro"] body { transition: background-color .15s ease-out; }

/* ─── Tons medidos em 22/08: 20 fundos claros que ainda não escureciam ──────────────
   Eram 21 no app (o 21º, #eef6f2, só aparece em "Revisão do Projeto.dc.html", que não é
   tela registrada no shell — mapear tom de arquivo morto é regra que nunca roda).

   ⚠️ O acordo do guarda era "não mapear todos de uma vez, porque seria adivinhar a intenção
   de design de cada um". Aqui não houve adivinhação: cada tom tem um IRMÃO já mapeado a
   poucos pontos de distância, e o destino é o MESMO da família dele — citado em cada grupo
   pra dar pra conferir. O que continua valendo é a outra metade do acordo: tom novo numa tela
   nova precisa entrar aqui, senão ele não escurece.

   ⚠️ E este arquivo NÃO alcança cor que vem do script: o seletor casa `style` no markup, e tom
   que o `renderVals` injeta nunca aparece lá (a lição de 20/08, achada por mutação). */
/* superfície LEVE (quase branco) — irmão já mapeado: #f9fafb */
html[data-tema="escuro"] [style*="background: rgb(252, 252, 253)"],
html[data-tema="escuro"] [style*="background: rgb(247, 248, 251)"],
html[data-tema="escuro"] [style*="background: rgb(247, 248, 250)"] { background: #0e1433 !important; }
/* superfície ELEVADA (cinza de trilho, faixa alternada, cabeçalho) — irmão: #f4f4f5 */
html[data-tema="escuro"] [style*="background: rgb(244, 244, 246)"],
html[data-tema="escuro"] [style*="background: rgb(241, 241, 244)"],
html[data-tema="escuro"] [style*="background: rgb(246, 247, 249)"],
html[data-tema="escuro"] [style*="background: rgb(234, 234, 239)"] { background: #131a3a !important; }
/* azul da marca (item selecionado, caixa de informação) — irmão: #f4f7fe */
html[data-tema="escuro"] [style*="background: rgb(244, 248, 254)"],
html[data-tema="escuro"] [style*="background: rgb(238, 242, 248)"],
html[data-tema="escuro"] [style*="background: rgb(239, 246, 255)"] { background: rgba(86, 147, 237, .16) !important; }
/* menta de sucesso — irmão: #ecfdf5 */
html[data-tema="escuro"] [style*="background: rgb(242, 251, 247)"],
html[data-tema="escuro"] [style*="background: rgb(230, 250, 243)"],
html[data-tema="escuro"] [style*="background: rgb(240, 253, 250)"] { background: rgba(52, 211, 153, .14) !important; }
/* menta PREENCHIDA (indicador, não superfície) — mesma família, alfa maior */
html[data-tema="escuro"] [style*="background: rgb(204, 251, 241)"] { background: rgba(52, 211, 153, .24) !important; }
/* âmbar de atenção — irmão: #fdf0dc */
html[data-tema="escuro"] [style*="background: rgb(254, 252, 232)"],
html[data-tema="escuro"] [style*="background: rgb(254, 249, 195)"],
html[data-tema="escuro"] [style*="background: rgb(253, 246, 227)"],
html[data-tema="escuro"] [style*="background: rgb(255, 253, 245)"] { background: rgba(251, 191, 36, .16) !important; }
/* laranja de aviso — irmão: #ffedd5 */
html[data-tema="escuro"] [style*="background: rgb(255, 247, 237)"] { background: rgba(251, 146, 60, .16) !important; }
/* laranja PREENCHIDO (indicador) — mesma família, alfa maior */
html[data-tema="escuro"] [style*="background: rgb(252, 217, 163)"] { background: rgba(251, 146, 60, .26) !important; }