/*
 * EF CAPITAL — Sistema de Design Centralizado
 * Todos os tokens de cor, tipografia e espaçamento em um lugar.
 * Importe este arquivo em cada página: <link rel="stylesheet" href="/assets/ef-brand.css">
 */

/* ── Google Fonts ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ── Tokens Primitivos ────────────────────────── */
:root {
  /* Cores base */
  --color-blue-900:  #040D9A;
  --color-blue-700:  #2A38C9;
  --color-gold-500:  #C8A951;
  --color-gold-400:  #D4BA68;
  --color-white:     #FFFFFF;
  --color-grey-50:   #F7F8FC;
  --color-grey-100:  #F0F2F9;
  --color-grey-200:  #E5E7F1;
  --color-grey-300:  #EEF0F8;
  --color-grey-500:  #8589A0;
  --color-grey-600:  #A6AABE;
  --color-ink-900:   #11131C;
  --color-ink-600:   #4B4E5E;

  /* Semânticos — Status */
  --color-green:     #16A36A;
  --color-green-bg:  rgba(22,163,106,0.09);
  --color-amber:     #D97706;
  --color-amber-bg:  rgba(217,119,6,0.09);
  --color-purple:    #7C3AED;
  --color-purple-bg: rgba(124,58,237,0.09);
  --color-red:       #C0394A;
  --color-red-bg:    rgba(192,57,74,0.08);

  /* ── Tokens Semânticos ── */
  --bg:          var(--color-grey-50);
  --bg-2:        var(--color-white);
  --surface:     var(--color-white);
  --surface-2:   var(--color-grey-100);
  --ink:         var(--color-ink-900);
  --ink-soft:    var(--color-ink-600);
  --grey:        var(--color-grey-500);
  --grey-dim:    var(--color-grey-600);
  --border:      var(--color-grey-200);
  --border-row:  var(--color-grey-300);

  /* Primária */
  --blue:        var(--color-blue-900);
  --blue-light:  var(--color-blue-700);
  --blue-soft:   rgba(4,13,154,0.05);
  --blue-soft-2: rgba(4,13,154,0.09);
  --blue-border: rgba(4,13,154,0.18);

  /* Acento — Ouro da marca EF Capital */
  --gold:        var(--color-gold-500);
  --gold-light:  var(--color-gold-400);
  --gold-soft:   rgba(200,169,81,0.10);
  --gold-border: rgba(200,169,81,0.25);

  /* Tipografia */
  --font:        'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fd:          'Poppins',Arial,sans-serif;

  /* Dimensões */
  --radius:      6px;
  --radius-lg:   10px;

  /* Sombras */
  --shadow-sm:   0 1px 3px rgba(17,19,28,0.05);
  --shadow-md:   0 8px 28px rgba(4,13,154,0.08);
  --shadow-lg:   0 20px 60px rgba(4,13,154,0.14);
}

/* ── Reset base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,h2,h3,h4 { font-family: var(--fd); }

/* ── Componentes base compartilhados ─────────── */

/* Botões */
.ef-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--radius);
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .2s, transform .15s;
}
.ef-btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); }

.ef-btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: var(--gold); color: var(--ink); border: none;
  border-radius: var(--radius);
  font-family: var(--fd); font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background .2s, transform .15s;
}
.ef-btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }

.ef-btn-sm {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 12px;
  cursor: pointer; text-decoration: none;
  transition: all .2s; white-space: nowrap;
}
.ef-btn-sm:hover { border-color: var(--blue-border); color: var(--blue); }

/* KPI com acento ouro para o valor principal */
.kpi-gold-accent {
  position: relative;
}
.kpi-gold-accent .kpi-value {
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
}
.kpi-gold-accent::after {
  background: var(--gold) !important;
}

/* Linha de acento ouro no header */
.ef-gold-line {
  display: block;
  width: 32px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 8px;
}

/* Badge ouro */
.ef-badge-gold {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-border);
  background: var(--gold-soft);
  border-radius: 99px; padding: 3px 12px;
}

/* Número grande (KPI display) */
.ef-kpi-num {
  font-family: var(--fd);
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px; line-height: 1;
}

/* Seção label com linha */
.ef-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--grey); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.ef-section-label::after {
  content:''; flex:1; height: 1px; background: var(--border);
}

/* Loader padrão */
.ef-loader {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4rem; gap: 12px;
  color: var(--grey); font-size: 13px;
}
.ef-spin {
  width: 28px; height: 28px;
  border: 2.5px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: ef-spin .9s linear infinite;
}
@keyframes ef-spin { to { transform: rotate(360deg); } }

/* ── Responsivo global ─────────────────────────── */
@media (max-width: 768px) {
  .ef-hide-mobile { display: none !important; }
}