/* ===========================================================================
   moderno.css — design v2 (camada 4, chaveável)
   ---------------------------------------------------------------------------
   Carregado DEPOIS de redesign.css e SOMENTE com DESIGN_V2 ligada (ver
   base.html). Nada aqui muda comportamento: é profundidade (sombras em duas
   camadas), a família de UI própria (Plus Jakarta Sans), o hero navy com
   brilho dourado, a aba inferior flutuante com o Gestor no centro, a busca
   global (d2-busca) e o MODO NOTURNO.

   Modo noturno: html[data-tema="escuro"] redefine os MESMOS tokens --rd-* do
   redesign.css — todo componente que já lê token escurece de graça; o que
   usa cor literal (camadas legadas do app.css/mobile_parity.css) recebe
   override pontual no bloco escuro no fim deste arquivo. A preferência mora
   no localStorage do navegador (design2.js), nunca no servidor.

   Convenção: classes novas usam prefixo .d2-. DESIGN_V2=0 remove este
   arquivo inteiro do carregamento e o portal volta ao visual v1.
   =========================================================================== */

:root {
  /* Tipografia: Playfair continua nos títulos/números (--rd-serif intocada);
     o corpo ganha família própria para ter a mesma cara em todo aparelho. */
  --rd-sans: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", sans-serif;

  /* Profundidade em duas camadas: contato + ambiente. */
  --d2-sombra: 0 1px 2px rgba(20, 17, 12, 0.05), 0 10px 28px rgba(20, 17, 12, 0.06);
  --d2-sombra-lg: 0 2px 4px rgba(20, 17, 12, 0.06), 0 18px 44px rgba(20, 17, 12, 0.10);
  --d2-hero-grad: linear-gradient(165deg, #16223f 0%, #0e1730 70%);
  --d2-hero-borda: rgba(185, 144, 42, 0.22);
  --d2-hero-glow: radial-gradient(circle at 88% -30%, rgba(185, 144, 42, 0.18) 0%, rgba(185, 144, 42, 0) 55%);
  --d2-ouro-suave: rgba(185, 144, 42, 0.12);
  --d2-lateral: linear-gradient(180deg, #111c38 0%, #0b1226 100%);
}

/* ===========================================================================
   1. Página e superfícies (tema claro)
   =========================================================================== */

body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(185, 144, 42, 0.06) 0%, rgba(185, 144, 42, 0) 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(16, 25, 47, 0.045) 0%, rgba(16, 25, 47, 0) 55%),
    var(--rd-page);
}

.rd-card,
.rd-stat,
.rd-empty,
.rd-tablewrap {
  border-color: var(--rd-line-soft);
  box-shadow: var(--d2-sombra);
}

.rd-doc {
  border-color: var(--rd-line-soft);
  border-radius: 14px;
  box-shadow: var(--d2-sombra);
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}

.rd-doc:hover {
  box-shadow: var(--d2-sombra-lg);
}

/* As bordas de estado da linha de documento (vencido/a vencer) continuam:
   o inset delas vive em border-left, que não conflita com a sombra. */

.app-shell .panel.neon-card,
.app-shell .documents-section {
  box-shadow: var(--d2-sombra);
}

/* Heroes navy: gradiente + borda dourada + brilho radial, sem pseudo-elemento
   (o glow entra como primeira camada do background — zero risco de stacking). */
.rd-hero {
  background: var(--d2-hero-glow), var(--d2-hero-grad);
  border: 1px solid var(--d2-hero-borda);
  border-radius: 20px;
  box-shadow: var(--d2-sombra-lg);
}

.rd-hero--danger {
  background: radial-gradient(circle at 88% -30%, rgba(240, 185, 168, 0.14) 0%, rgba(240, 185, 168, 0) 55%),
    linear-gradient(165deg, #3d1a12 0%, #24100a 75%);
  border-color: rgba(240, 185, 168, 0.30);
}

.rd-balhero {
  background: var(--d2-hero-glow), var(--d2-hero-grad);
  border: 1px solid var(--d2-hero-borda);
  box-shadow: var(--d2-sombra-lg);
}

/* Botões: primário ganha sombra dourada e leve resposta ao passar o mouse. */
.rd-btn--primary,
.btn.btn-primary {
  box-shadow: 0 6px 16px rgba(143, 108, 28, 0.28);
}

.rd-btn,
.btn {
  transition: background 160ms ease-out, border-color 160ms ease-out,
    box-shadow 160ms ease-out, transform 120ms ease-out;
}

.rd-btn--primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(143, 108, 28, 0.34);
}

.rd-btn--primary:active,
.btn.btn-primary:active {
  transform: translateY(0);
}

.rd-periodbar__pill,
.period-picker__trigger {
  box-shadow: var(--d2-sombra);
}

.rd-menu__panel,
.period-picker__panel {
  box-shadow: var(--d2-sombra-lg);
}

/* ===========================================================================
   2. Barra lateral (desktop) e trilho (tablet)
   =========================================================================== */

@media (min-width: 641px) {
  .app-shell .sidebar {
    background: var(--d2-lateral);
  }
}

@media (min-width: 1024px) {
  .app-shell .sidebar .nav-link.is-active {
    color: var(--rd-on-navy);
    box-shadow: inset 3px 0 0 var(--rd-gold-bright);
  }

  .app-shell .sidebar .nav-link.is-active .nav-icon {
    color: var(--rd-gold-bright);
  }
}

/* Ícones da navegação monocromáticos (protótipo): o tile colorido por
   módulo (verde/teal/vermelho/roxo do v1) sai; o ícone segue a cor do
   próprio item — creme apagado no repouso, dourado no ativo (regra do
   is-active mais acima). Vale para a barra lateral, o trilho do tablet e
   as folhas do celular. */
.app-shell .sidebar .nav-link .nav-icon,
.rd-sheet .rd-menu__item .nav-icon,
.rd-tabbar .rd-tabbar__item .nav-icon {
  background: transparent;
  box-shadow: none;
  border: 0;
  color: inherit;
}

/* Cartões de módulo da home: tile navy com ícone dourado, como no desenho. */
.rd-modcard__icon {
  background: var(--rd-navy);
  border: 0;
  color: #e0b54a;
}

html[data-tema="escuro"] .rd-modcard__icon {
  background: var(--rd-navy-surface);
}

/* Cartão do Gestor na home: "Ver análise" é a ação primária — dourada. */
.rd-home__gestor-actions .rd-btn--navy {
  border-color: var(--rd-gold);
  background: var(--rd-gold);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(143, 108, 28, 0.28);
}

.rd-home__gestor-actions .rd-btn--navy:hover {
  border-color: #7d5d16;
  background: #7d5d16;
}

html[data-tema="escuro"] .rd-home__gestor-actions .rd-btn--navy {
  border-color: var(--rd-gold-bright);
  background: var(--rd-gold-bright);
  color: #10192f;
}

/* ---------------------------------------------------------------------------
   Painel administrativo: resquícios da paleta roxa antiga
   ---------------------------------------------------------------------------
   app.css ainda pinta pílulas e pontos das tabelas do admin com o roxo
   (#8b5cf6 / #d4bbff) e o menta (#6ee7b7) de um tema ESCURO que não existe
   mais — sobre o papel claro do .admin-module-page essas cores ficam quase
   ilegíveis. Aqui elas voltam ao vocabulário da marca: navy para o papel de
   administrador, verde para cliente, âmbar para superadmin, exatamente os
   mesmos tons dos .rd-badge do resto do portal.
   --------------------------------------------------------------------------- */

.admin-pill--role-admin {
  background: var(--gold-soft, rgba(185, 144, 42, 0.14));
  border-color: rgba(185, 144, 42, 0.38);
  color: var(--rd-gold);
}

.admin-pill--role-superadmin {
  background: var(--rd-warn-bg);
  border-color: var(--rd-warn-line);
  color: var(--rd-warn-text);
}

.admin-pill--role-client {
  background: var(--rd-ok-bg);
  border-color: var(--rd-ok-line);
  color: var(--rd-ok-text);
}

.admin-table-dot--admin {
  background: var(--rd-gold);
}

.admin-table-dot--superadmin {
  background: var(--rd-warn-text);
}

.admin-table-dot--client,
.admin-table-dot--active {
  background: var(--rd-ok-text);
}

.admin-table-dot--inactive {
  background: var(--rd-line-strong);
}

/* Tile do cabeçalho de seção: mesmo tile navy + ícone dourado dos cartões
   de módulo, em vez do quadrado roxo. */
.admin-section-page-icon {
  background: var(--rd-navy);
  border-color: var(--rd-navy);
  color: var(--rd-gold-bright);
}

/* Pill de busca da barra lateral (só desktop). */
.d2-buscapill {
  display: none;
}

@media (min-width: 1024px) {
  .d2-buscapill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 11px;
    border: 1px solid rgba(245, 241, 230, 0.14);
    border-radius: 12px;
    background: transparent;
    color: rgba(245, 241, 230, 0.45);
    font-family: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease-out, color 160ms ease-out;
  }

  .d2-buscapill:hover {
    border-color: rgba(185, 144, 42, 0.5);
    color: var(--rd-on-navy);
  }

  .d2-buscapill span {
    flex: 1;
  }

  .d2-buscapill kbd {
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(245, 241, 230, 0.2);
    border-radius: 5px;
    padding: 1px 5px;
  }
}

/* Botões de ícone do v2 (busca e tema na topbar; tema no rodapé lateral). */
.d2-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rd-line-strong);
  border-radius: 12px;
  background: var(--rd-card);
  color: var(--rd-text-2);
  cursor: pointer;
  box-shadow: var(--d2-sombra);
}

.d2-iconbtn:hover {
  color: var(--rd-text);
}

/* No rodapé da barra lateral (fundo navy) o botão adota o vocabulário navy. */
.rd-sidefoot .d2-sidefoot-tema {
  border-color: rgba(245, 241, 230, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(245, 241, 230, 0.6);
  box-shadow: none;
  flex: none;
}

.rd-sidefoot .d2-sidefoot-tema:hover {
  color: var(--rd-on-navy);
}

/* Ícones sol/lua: a lua aparece no claro, o sol no escuro. */
.d2-icone-sol {
  display: none;
}

html[data-tema="escuro"] .d2-icone-sol {
  display: inline-block;
}

html[data-tema="escuro"] .d2-icone-lua {
  display: none;
}

/* ===========================================================================
   3. Aba inferior do celular: pílula flutuante + Gestor no centro
   =========================================================================== */

@media (max-width: 640px) {
  .rd-tabbar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: repeat(5, 1fr);
    padding: 10px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--rd-line-strong);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--d2-sombra-lg);
  }

  /* A pílula flutua: o conteúdo precisa de folga extra embaixo. */
  .app-shell .content,
  .app-shell .admin-content {
    padding-bottom: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom, 0px) + 34px);
  }
}

.d2-tabbar-gestor {
  position: relative;
}

.d2-tabbar-gestor span:last-child {
  color: var(--rd-gold);
  font-weight: 700;
}

.d2-tabbar-gestor__fab {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(160deg, #cfa63e, #8f6c1c);
  color: #10192f;
  box-shadow: 0 10px 24px rgba(143, 108, 28, 0.45), 0 0 0 5px var(--rd-page);
}

.d2-tabbar-gestor > span:last-of-type {
  margin-top: 24px;
  font-size: 9.5px;
}

@media (min-width: 641px) {
  .d2-tabbar-gestor {
    display: none;
  }
}

/* Gestor em tela cheia pelo botão central (pedido 29/08): no celular a aba
   continua POR CIMA do chat maximizado — é o que permite tocar no botão
   dourado de novo para fechar — e o compositor ganha folga para não ficar
   atrás da pílula flutuante. Só no celular: no desktop o maximizar segue
   cobrindo tudo, como sempre. */
@media (max-width: 640px) {
  body.gia-no-scroll .rd-tabbar {
    z-index: 1300;
  }

  .gia-chat.is-maximized {
    padding-bottom: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom, 0px) + 26px);
  }
}

/* ===========================================================================
   4. Busca global (Ctrl K)
   =========================================================================== */

.d2-busca {
  position: fixed;
  inset: 0;
  z-index: 160;
}

.d2-busca[hidden] {
  display: none;
}

.d2-busca__fundo {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 26, 0.45);
  backdrop-filter: blur(3px);
}

.d2-busca__painel {
  position: absolute;
  left: 50%;
  top: min(14vh, 120px);
  transform: translateX(-50%);
  width: min(580px, calc(100vw - 24px));
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rd-line-strong);
  border-radius: 18px;
  background: var(--rd-card);
  box-shadow: var(--d2-sombra-lg);
}

.d2-busca__campo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rd-line);
  color: var(--rd-gold);
}

.d2-busca__campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--rd-text);
  font-family: inherit;
  font-size: 15px;
}

.d2-busca__campo input::placeholder {
  color: var(--rd-text-3);
}

.d2-busca__campo kbd {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--rd-text-3);
  border: 1px solid var(--rd-line-strong);
  border-radius: 5px;
  padding: 2px 6px;
}

.d2-busca__resultados {
  overflow-y: auto;
  padding: 8px;
  min-height: 90px;
  scrollbar-width: thin;
}

.d2-busca__grupo {
  padding: 9px 10px 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-text-3);
}

.d2-busca__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.d2-busca__item:hover,
.d2-busca__item.is-selecionado {
  background: var(--d2-ouro-suave);
}

.d2-busca__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--rd-navy);
  color: var(--rd-gold-bright);
}

.d2-busca__icone svg,
.d2-busca__icone .icon-svg {
  width: 15px;
  height: 15px;
}

.d2-busca__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.d2-busca__texto strong {
  font-size: 13px;
  color: var(--rd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d2-busca__texto span {
  font-size: 11px;
  color: var(--rd-text-2);
}

.d2-busca__rodape {
  display: flex;
  gap: 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--rd-line);
  font-size: 10px;
  color: var(--rd-text-3);
}

/* ===========================================================================
   5. Setas de mês na barra de competência do celular (design2.js injeta)
   =========================================================================== */

.d2-periodbar-seta {
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--rd-line);
  border-radius: 11px;
  background: var(--rd-card);
  color: var(--rd-text-2);
  cursor: pointer;
  box-shadow: var(--d2-sombra);
}

@media (max-width: 640px) {
  .d2-periodbar-seta {
    min-height: 44px;
  }
}

/* ===========================================================================
   6. MODO NOTURNO — tokens + overrides das camadas legadas
   ---------------------------------------------------------------------------
   Derivado do navy da marca, não de um cinza genérico. Quem lê token escurece
   sozinho; abaixo do bloco de tokens ficam os overrides do que usa literal.
   =========================================================================== */

html[data-tema="escuro"] {
  color-scheme: dark;

  --rd-page: #0a101f;
  --rd-navy: #101a35;
  --rd-navy-surface: #14203c;
  --rd-card: #121a30;
  --rd-soft: #182242;
  --rd-upload-bg: #151e39;
  --rd-upload-line: #4a4a68;

  --rd-text: #f0ecdf;
  --rd-text-2: rgba(240, 236, 223, 0.62);
  --rd-text-3: rgba(240, 236, 223, 0.42);
  --rd-text-support: rgba(240, 236, 223, 0.55);

  --rd-gold: #b9902a;
  --rd-gold-bright: #cfa63e;

  --rd-line: rgba(245, 241, 230, 0.09);
  --rd-line-strong: rgba(245, 241, 230, 0.16);
  --rd-line-soft: rgba(245, 241, 230, 0.06);

  --rd-ok-text: #7fc79a;
  --rd-ok-bg: rgba(127, 199, 154, 0.12);
  --rd-ok-line: rgba(127, 199, 154, 0.25);
  --rd-warn-text: #e8b34a;
  --rd-warn-bg: rgba(232, 179, 74, 0.12);
  --rd-warn-line: rgba(232, 179, 74, 0.25);
  --rd-danger-text: #f0b9a8;
  --rd-danger-bg: rgba(240, 185, 168, 0.12);
  --rd-danger-line: rgba(240, 185, 168, 0.25);
  --rd-neutral-text: rgba(240, 236, 223, 0.62);
  --rd-neutral-bg: rgba(245, 241, 230, 0.06);
  --rd-neutral-line: rgba(245, 241, 230, 0.12);
  --rd-info-text: #8fb4e8;
  --rd-info-bg: rgba(143, 180, 232, 0.12);
  --rd-info-line: rgba(143, 180, 232, 0.25);

  --d2-sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  --d2-sombra-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45);
  --d2-hero-grad: linear-gradient(165deg, #1a2648 0%, #101a35 70%);
  --d2-ouro-suave: rgba(185, 144, 42, 0.16);
  --d2-lateral: linear-gradient(180deg, #0d1730 0%, #080e1d 100%);

  /* Tokens da camada mobile_parity.css, que ate aqui nao tinham versao
     escura NENHUMA -- 171 usos presos ao claro. O modo noturno vinha sendo
     corrigido componente a componente aqui embaixo (.chart-wrap,
     .documents-section, .panel.neon-card...), sempre depois de o defeito
     aparecer, e quem nao foi lembrado ficou branco: o cartao "Importar
     arquivos" (.upload-form) era um bloco BRANCO com texto creme por cima,
     ou seja, texto invisivel, em toda ficha que aceita upload.

     Redefinir os tokens resolve os 171 de uma vez, e e a mesma tecnica que
     este arquivo ja usa para os --admin-*. Os overrides por componente
     continuam validos (apontam para --rd-*, que dao no mesmo). */
  --mobile-bg: #0a101f;
  --mobile-header-bg: #0f1830;
  --mobile-header-text: #f5f1e6;
  --mobile-header-muted: rgba(245, 241, 230, 0.72);
  --mobile-header-line: rgba(245, 241, 230, 0.16);
  --mobile-text: #f0ecdf;
  --mobile-muted: rgba(240, 236, 223, 0.62);
  --mobile-panel-bg: #121a30;
  --mobile-line: rgba(245, 241, 230, 0.12);
  --mobile-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  --mobile-gold: #cfa63e;
  --mobile-gold-deep: #b9902a;
  /* --mobile-navy vira a cor do TEXTO em .btn-outline/.btn-soft (o
     "navy sobre creme" do claro); no escuro tem de ser clara, senao o botao
     fica navy sobre navy -- contraste 1,2 medido na Auditoria SPED, onde
     "Ver" e "Excluir" simplesmente sumiam. */
  --mobile-navy: #f0ecdf;
  --mobile-navy-soft: rgba(245, 241, 230, 0.08);
}

/* Os literais que sobraram na camada legada: status em vermelho/verde/azul
   escuros, feitos para fundo creme. Sobre o navy do noturno ficavam entre
   2,0 e 2,1 de contraste (o minimo legivel e 4,5), que na pratica e um
   retangulo colorido sem texto. Reaproveitam os tokens de status que ja
   existem nos dois temas. */
html[data-tema="escuro"] .alert-error {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

html[data-tema="escuro"] .alert-success {
  border-color: var(--rd-ok-line);
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

html[data-tema="escuro"] .alert-info {
  border-color: var(--rd-info-line);
  background: var(--rd-info-bg);
  color: var(--rd-info-text);
}

html[data-tema="escuro"] .btn-soft,
html[data-tema="escuro"] .btn-outline,
html[data-tema="escuro"] .btn-inline {
  color: var(--rd-text);
  border-color: var(--rd-line-strong);
  background: rgba(245, 241, 230, 0.06);
}

html[data-tema="escuro"] .btn-inline-danger,
html[data-tema="escuro"] .btn-danger,
html[data-tema="escuro"] .record-delete-button {
  color: var(--rd-danger-text);
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
}

html[data-tema="escuro"] .alert-inline--error {
  color: var(--rd-danger-text);
}

html[data-tema="escuro"] body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(185, 144, 42, 0.07) 0%, rgba(185, 144, 42, 0) 60%),
    var(--rd-page);
  color: var(--rd-text);
}

/* Botão primário no escuro: ouro vivo com texto navy (contraste melhor que
   branco sobre ouro escuro). */
html[data-tema="escuro"] .rd-btn--primary {
  border-color: var(--rd-gold-bright);
  background: var(--rd-gold-bright);
  color: #10192f;
  box-shadow: 0 6px 18px rgba(185, 144, 42, 0.3);
}

html[data-tema="escuro"] .rd-btn--primary:hover {
  border-color: #dcb654;
  background: #dcb654;
}

/* Superfícies legadas (app.css / mobile_parity.css usam literais).
   .page-hero/.hero-panel ficam de fora: são os cartões navy de cabeçalho,
   que continuam navy nos dois temas. */
html[data-tema="escuro"] .app-shell .panel.neon-card:not(.page-hero):not(.hero-panel),
html[data-tema="escuro"] .app-shell .documents-section,
html[data-tema="escuro"] .chart-wrap {
  background: var(--rd-card);
  border-color: var(--rd-line);
  color: var(--rd-text);
}

html[data-tema="escuro"] .app-shell .topbar {
  background: rgba(10, 16, 31, 0.92);
  border-color: var(--rd-line);
  color: var(--rd-text);
}

/* A rampa da rosca de despesas nasce escura para o fundo claro; no noturno
   os dois primeiros tons somem contra o cartão, então ela inteira sobe. */
html[data-tema="escuro"] .rd-despesas {
  --fatia-1: #b28d2c;
  --fatia-2: #c9a94f;
  --fatia-3: #dcc47d;
  --fatia-4: #e9d9a6;
  --fatia-5: #f2e8c9;
  --fatia-6: #f8f2e2;
}

html[data-tema="escuro"] .rd-tabbar {
  background: rgba(18, 26, 48, 0.92);
  border-color: var(--rd-line-strong);
}

html[data-tema="escuro"] .d2-tabbar-gestor__fab {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 0 5px var(--rd-page);
}

html[data-tema="escuro"] .rd-sheet__panel,
html[data-tema="escuro"] .finance-modal__dialog,
html[data-tema="escuro"] .account-settings-dialog,
html[data-tema="escuro"] .notification-menu-dropdown,
html[data-tema="escuro"] .user-menu-dropdown,
html[data-tema="escuro"] .org-profile-panel {
  background: var(--rd-card);
  border-color: var(--rd-line-strong);
  color: var(--rd-text);
}

html[data-tema="escuro"] .rd-input,
html[data-tema="escuro"] input:not([type="checkbox"]):not([type="radio"]),
html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea {
  background-color: var(--rd-soft);
  border-color: var(--rd-line-strong);
  color: var(--rd-text);
}

html[data-tema="escuro"] .upload-zone {
  background: var(--rd-upload-bg);
  border-color: rgba(185, 144, 42, 0.4);
  color: var(--rd-text-2);
}

/* Cabeçalho interno das fichas, textos de apoio e afins que herdam cor de
   longe nas camadas legadas. */
html[data-tema="escuro"] .muted-text,
html[data-tema="escuro"] .rd-support {
  color: var(--rd-text-2);
}

html[data-tema="escuro"] .breadcrumb,
html[data-tema="escuro"] .breadcrumb__item {
  color: var(--rd-text-2);
}

/* Chat do Gestor (cliente e widget do escritório): corpo das mensagens. */
html[data-tema="escuro"] .gia-msg__body {
  background: var(--rd-card);
  border-color: var(--rd-line);
  color: var(--rd-text);
}

html[data-tema="escuro"] .gia-chat__messages {
  background: transparent;
}

/* Cabeçalho das fichas do cliente: o .page-hero foi achatado pelo redesign
   (fundo transparente) mas a TINTA continua literal escura — no escuro o
   título sumia. O comando hero navy do admin herda cor clara igual, então
   a regra vale para os dois sem ressalva. */
html[data-tema="escuro"] .app-shell .page-hero,
html[data-tema="escuro"] .app-shell .page-hero h1 {
  color: var(--rd-text);
}

html[data-tema="escuro"] .app-shell .page-hero__hint,
html[data-tema="escuro"] .app-shell .page-hero p {
  color: var(--rd-text-2);
}

/* Formulário de período dentro do cabeçalho: fundo branco literal virava
   uma caixa clara flutuando no escuro. */
html[data-tema="escuro"] .app-shell .filter-grid,
html[data-tema="escuro"] .app-shell .page-hero__filter-form {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-tema="escuro"] .documents-section__summary,
html[data-tema="escuro"] .documents-section__titleblock p {
  color: var(--rd-text-2);
}

/* Painel administrativo: as telas do admin têm paleta própria em variáveis
   --admin-* (papel claro). No escuro elas apontam para os tokens escuros —
   os componentes do admin escurecem em bloco, sem regra por componente.
   Os gradientes navy (hero de comando, botão primário) ficam como estão:
   já são escuros com texto claro nos dois temas. */
html[data-tema="escuro"] .admin-module-page {
  --admin-paper: #0a101f;
  --admin-paper-strong: #121a30;
  --admin-paper-soft: #182242;
  --admin-ink: #f0ecdf;
  --admin-ink-soft: rgba(240, 236, 223, 0.62);
  --admin-line: rgba(245, 241, 230, 0.14);
  --admin-green-soft: rgba(245, 241, 230, 0.08);
  --admin-brass-soft: rgba(185, 144, 42, 0.18);
}

/* A moldura das tabelas do admin usa creme literal (rgba(247,241,233,.92))
   — era a "ilha clara" no meio do painel escuro. */
html[data-tema="escuro"] .admin-table-wrap {
  background: #121a30;
  border-color: rgba(245, 241, 230, 0.14);
}

html[data-tema="escuro"] .admin-data-table,
html[data-tema="escuro"] .admin-data-table tbody tr,
html[data-tema="escuro"] .admin-data-table td {
  background: transparent;
  border-color: rgba(245, 241, 230, 0.10);
}

html[data-tema="escuro"] .admin-data-table th {
  background: rgba(245, 241, 230, 0.05);
}

html[data-tema="escuro"] .admin-data-table tbody tr:hover td {
  background: rgba(245, 241, 230, 0.04);
}

/* Barra de rolagem discreta no escuro. */
html[data-tema="escuro"] * {
  scrollbar-color: rgba(245, 241, 230, 0.18) transparent;
}