/* ════════════════════════════════════════════════════════════════
   REDESIGN v21 — "Azul · Cinza · Branco · Minimal moderno"
   Carregado por ÚLTIMO: sobrepõe-se à cascata sem mexer no resto.

   Direção (escolhida pelo utilizador, ref. Domum/banking):
   • Paleta: azul-marinho no chrome (#13346B) + azul LIMPO nos botões
     (#2C66C9) + cinza-ardósia nos neutros + muito branco.
   • Estilo: minimal moderno — muito branco, contornos leves, tipografia
     em destaque, cor usada só em ações/destaques.

   Estratégia: renova a CAMADA DE TOKENS (cores/sombras/limites) e dá um
   tratamento minimal aos componentes baseados em CLASSE (cabeçalhos,
   cartões, botões, tabelas, inputs). Os cabeçalhos com cor inline
   (destaques propositados) são preservados via seletor [style*=...].
════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primária: azul LIMPO e sereno (referência Domum/banking) ──
     Menos "electric"/violeta que o anterior; combina com o azul-marinho
     do chrome e com os cinzas neutros. Contraste AA sobre branco. */
  --primary:       #2C66C9;
  --primary-dk:    #234F9E;
  --primary-lt:    #EAF1FB;
  --primary-rgb:   44, 102, 201;
  --primary-mid:   #4C84DC;
  --primary-soft:  #9CBCE8;
  --primary-glow:  rgba(44,102,201,.16);

  /* ── Secundária: verde-água (apoio/realces) ────────────────── */
  --secondary:     #0EA5A4;
  --secondary-dk:  #0C8584;
  --secondary-lt:  #E6FAF8;
  --secondary-rgb: 14,165,164;
  --teal:          #0EA5A4; --teal-dk:#0C8584; --teal-lt:#E6FAF8; --teal-rgb:14,165,164;

  /* ── Acento: âmbar quente (destaques pontuais) ─────────────── */
  --accent:        #F59E0B;
  --accent-dk:     #B45309;
  --accent-lt:     #FFF7E8;
  --accent-rgb:    245,158,11;

  /* ── Superfícies & fundo — branco + cinza neutro (não azulado) ─ */
  --bg:             #F4F6F9;
  --bg-2:           #EDF1F5;
  --bg-3:           #E4EAF0;
  --surface:        #FFFFFF;
  --surface-alt:    #F5F7FA;
  --surface-hover:  #EEF2F7;
  --surface-raised: #FFFFFF;
  --surface-elev:   #FFFFFF;
  --surface-cobalt: #F4F7FB;

  /* ── Texto — cinza-ardósia (slate) ─────────────────────────── */
  --text:        #101826;
  --text-2:      #334155;
  --text-muted:  #64748B;
  --text-xmuted: #94A3B8;

  /* ── Limites/contornos — cinza leve ────────────────────────── */
  --border-subtle: #EEF1F5;
  --border:        #E2E7ED;
  --border-strong: #D0D7E0;

  /* ── Semânticas harmonizadas ───────────────────────────────── */
  --green: #16A34A; --green-dk:#15803D; --green-lt:#ECFDF3; --green-rgb:22,163,74;
  --red:   #E11D48; --red-dk:#BE123C; --red-lt:#FEF1F3; --red-rgb:225,29,72;
  --amber: #D97706; --amber-dk:#B45309; --amber-lt:#FFF7E8; --amber-rgb:217,119,6;

  /* ── Sombras — suaves e difusas (minimal moderno) ──────────── */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(15,30,46,.04);
  --sh-2: 0 1px 3px rgba(15,30,46,.05), 0 1px 2px rgba(15,30,46,.03);
  --sh-3: 0 4px 14px rgba(15,30,46,.06), 0 2px 4px rgba(15,30,46,.04);
  --sh-4: 0 12px 30px rgba(15,30,46,.09), 0 4px 8px rgba(15,30,46,.05);
  --sh-5: 0 24px 54px rgba(15,30,46,.13), 0 8px 16px rgba(15,30,46,.06);
  --sh-brand: 0 1px 2px rgba(44,102,201,.22), 0 6px 18px rgba(44,102,201,.15);
  --sh-glow:  0 0 0 4px rgba(44,102,201,.10);

  /* ── Gradientes re-tintados para o novo azul ───────────────── */
  --grad-brand:    linear-gradient(135deg, #2C66C9 0%, #4C84DC 100%);
  --grad-brand-dk: linear-gradient(135deg, #234F9E 0%, #2C66C9 100%);
  --grad-cool:     linear-gradient(135deg, #2C66C9 0%, #4C84DC 100%);
  --grad-sky:      linear-gradient(160deg, #F4F7FB 0%, #E6EDF6 100%);

  /* ── Chrome (presença da marca) — azul-marinho profundo SERENO ─
     A cor VIVA (#1D4ED8) fica reservada a botões/destaques; as grandes
     superfícies (topbar/sidebar) usam um azul calmo e elegante. */
  --tb-bg: #13346B;            /* topbar: azul profundo sereno */
  --tb-tx: #FFFFFF;
  --sb-active: rgba(44,102,201,.32);
  --sb-actx:   #9CC0FF;
  --sb-pill:   rgba(44,102,201,.40);
  --sb-glow:   rgba(44,102,201,.12);

  /* Cabeçalhos de conteúdo: passam a CLAROS (ver regras abaixo).
     Mantemos as vars para compat de componentes que ainda as usem. */
  --wh-bg:  #FFFFFF;
  --wh-bg2: #FFFFFF;
  --wh-tx:  #0F1E2E;
}

/* ════════════════════════════════════════════════════════════════
   TIPOGRAFIA — protagonista
════════════════════════════════════════════════════════════════ */
body { background: var(--bg); color: var(--text); letter-spacing: -.005em; }

/* ════════════════════════════════════════════════════════════════
   CHROME — barra de topo SERENA (vence o gradiente vivo do palette-v9)
   Azul-marinho profundo e calmo; a cor viva fica nos botões/destaques.
════════════════════════════════════════════════════════════════ */
.topbar {
  background: linear-gradient(100deg, #0F2B5C 0%, #13346B 58%, #18407E 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 2px 14px rgba(15,30,46,.16) !important;
}

.view-title    { font-size:1.16rem; font-weight:800; letter-spacing:-.025em; }
.view-subtitle { font-size:.8rem; margin-top:3px; font-weight:500; }
/* Títulos: anular o texto-gradiente das camadas legadas (palette-v9) para
   voltarem a ser texto SÓLIDO e legível (tipografia em destaque). */
.widget-title, .view-title {
  font-size:.92rem; font-weight:700; letter-spacing:-.015em;
  color: var(--text);
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--text);
}
.view-title { font-size:1.16rem; font-weight:800; }

/* ════════════════════════════════════════════════════════════════
   CABEÇALHO DE PÁGINA (view-header) — limpo, claro, minimal
   Sempre gerado por classe (sem cor inline) → seguro tornar claro.
════════════════════════════════════════════════════════════════ */
/* !important + ordem tardia para vencer elevate-v19 (banner azul fixo). */
.view-header {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--primary) !important;
  box-shadow: var(--sh-2) !important;
  border-radius: var(--r-lg);
  padding: 16px 20px;
}
.view-header::before, .view-header::after { display:none !important; }
.view-header .view-title,
.view-header .view-title * {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  text-shadow: none !important;
}
.view-header .view-subtitle { color: var(--text-muted) !important; }
.view-header .btn-primary {
  background: var(--primary) !important; color:#fff !important; border:none !important;
  box-shadow: 0 1px 2px rgba(44,102,201,.22) !important;
}
.view-header .btn-primary:hover { background: var(--primary-dk) !important; box-shadow: 0 4px 12px rgba(44,102,201,.28) !important; }
.view-header .btn-secondary {
  background: var(--surface) !important; color: var(--text-2) !important;
  border: 1.5px solid var(--border) !important;
}
.view-header .btn-secondary:hover { background: var(--surface-alt) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }

/* ════════════════════════════════════════════════════════════════
   CARTÕES (widget) — mais brancos, contorno leve, mais espaço
════════════════════════════════════════════════════════════════ */
.widget {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-2);
}

/* Cabeçalho de cartão (default) → CLARO, com fina divisória e título escuro */
.widget-header {
  margin: -20px -20px 16px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.widget-header::before { display:none !important; }   /* remove a barra de glow azul */
.widget-title { padding-left: 0; }
/* Botões dentro de cabeçalho claro → estilo normal */
.widget-header .btn-secondary {
  background: var(--surface-alt); border:1.5px solid var(--border); color: var(--text-2);
}
.widget-header .btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.widget-header .btn-primary { background: var(--primary); color:#fff; border:none; }
.widget-header .btn-primary:hover { background: var(--primary-dk); }

/* EXCEÇÃO: cabeçalhos com COR inline (destaques propositados — ex.: recibos
   verdes). Mantêm fundo colorido e, por isso, texto/itens claros. */
.widget-header[style*="background"] .widget-title,
.widget-header[style*="gradient"]  .widget-title {
  color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important;
}
.widget-header[style*="background"] { border-bottom-color: rgba(255,255,255,.14); }
.widget-header[style*="background"] .btn-secondary {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color:#fff;
}
.widget-header[style*="background"] .btn-primary {
  background: rgba(255,255,255,.95); color: var(--primary-dk); border:none;
}

/* Grelha de gráficos de Relatórios — vários cartões de peso semelhante
   (6 gráficos), ao contrário do padrão 2fr/1fr do .dashboard-grid
   (pensado para 1 destaque + 1 lateral). Colunas iguais e responsivas. */
.dashboard-grid-charts {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ════════════════════════════════════════════════════════════════
   CARTÕES DE HIERARQUIA / ESTATÍSTICA — flat, suaves
════════════════════════════════════════════════════════════════ */
.hier-card, .stat-card, .info-panel {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--sh-2);
}
.stat-card { border-top: 1px solid var(--border-subtle); padding: 20px; }
.stat-card:hover, .hier-card:hover { box-shadow: var(--sh-4); }
.stat-value { font-weight: 800; letter-spacing: -.04em; color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   BOTÕES — primário sólido com sombra suave (sem brilho pesado)
════════════════════════════════════════════════════════════════ */
/* Vence elevate-v19 (.btn-primary:not(.view-header .btn-primary), 0,2,0) e
   palette-v9 (.btn-primary !important) → repetimos os seletores com !important. */
.btn-primary,
.btn-primary:not(.view-header .btn-primary) {
  background: var(--primary) !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(44,102,201,.22) !important;
}
.btn-primary:hover,
.btn-primary:not(.view-header .btn-primary):hover {
  background: var(--primary-dk) !important;
  filter: none !important;
  box-shadow: 0 4px 14px rgba(44,102,201,.28) !important;
}
.btn-secondary { border-width: 1.5px; box-shadow: none; }
.btn-secondary:hover { box-shadow: var(--sh-1); }

/* ════════════════════════════════════════════════════════════════
   TABELAS — cabeçalho minimal (claro, sem gradiente azul)
════════════════════════════════════════════════════════════════ */
thead tr { background: var(--surface-alt); }
th {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
td { border-bottom-color: var(--border-subtle); }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: var(--surface-alt); }

/* ════════════════════════════════════════════════════════════════
   INPUTS — limpos, fundo branco, foco azul
════════════════════════════════════════════════════════════════ */
.form-input, .form-select, .form-textarea {
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ════════════════════════════════════════════════════════════════
   CHIPS DE CONTAGEM (w-count) — tonais e discretos
════════════════════════════════════════════════════════════════ */
.w-count {
  background: var(--primary-lt); color: var(--primary-dk);
  font-weight: 700;
}
.w-count.green   { background: var(--green-lt);  color: var(--green-dk); }
.w-count.amber   { background: var(--amber-lt);  color: var(--amber-dk); }
.w-count.primary { background: var(--primary-lt); color: var(--primary-dk); }
.w-count.gray    { background: #EEF2F6; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════
   SCROLLBAR & DETALHES — coerência minimal
════════════════════════════════════════════════════════════════ */
* { scrollbar-color: var(--border-strong) transparent; }