/* ═══════════════════════════════════════════════════════════════════════════
   MAE.CSS · Vocabulário visual das SUPERFÍCIES-MÃE (UI-4 · plano 2 · 19/07/2026)
   Meu Dia · Central Financeira · Pedidos — as três telas onde a plataforma vive.
   Uma só linguagem: eyebrow dourado uppercase → título serif leve → rail de pills
   → cards/KPIs com a mesma pele. Padrão JHSF/Aman: navy profundo, dourado contido,
   serif Georgia nos momentos de voz. Tokens canônicos aqui; os módulos usam as
   classes — sem duplicar estilo inline nas três telas.
   Adoção incremental: qualquer tela futura que use .mae-* nasce alinhada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ESCALA CANÔNICA DO DOURADO (UI-1 · plano 2) ───────────────────────────
   Diagnóstico: 6 tons conviviam no código (1.212 ocorrências hardcoded) —
   #C4A35A×962 · #D2AE64×153 · #E6C988×54 · #C9A75E×26 · #E0C27E×17 · #c4a35a×120.
   Não são 6 intenções, são 3: BASE (o dourado institucional), BRIGHT (hover/ênfase)
   e SOFT (fundo de estado ativo). A escala abaixo é o ALVO ÚNICO da varredura
   mecânica: todo hex dourado no código deve virar uma destas variáveis.
   Mapa de conversão para quem varrer:
     #C4A35A · #c4a35a · #C9A75E          → var(--gold)
     #D2AE64 · #E6C988 · #E0C27E          → var(--gold-bright)
     rgba(196,163,90,.0x–.15)             → var(--gold-soft)
     rgba(196,163,90,.16–.30)             → var(--gold-line)
   Nomes curtos (--gold*) são os canônicos; os --mae-* seguem como alias para não
   quebrar o que já foi escrito hoje. */
:root{
  --gold:        #C4A35A;                 /* base institucional */
  --gold-bright: #E0C27E;                 /* hover / ênfase */
  --gold-soft:   rgba(196,163,90,.12);    /* fundo de estado ativo */
  --gold-line:   rgba(196,163,90,.24);    /* bordas padrão */
  --gold-line-soft: rgba(196,163,90,.14); /* bordas discretas */

  /* alias (mantidos: já em uso nas superfícies-mãe) */
  --mae-gold:        var(--gold);
  --mae-gold-bright: var(--gold-bright);
  --mae-gold-soft:   var(--gold-soft);
  --mae-line:        var(--gold-line);
  --mae-line-soft:   var(--gold-line-soft);
}

/* ── Cabeçalho-mãe: eyebrow → título → contexto ── */
.mae-head{ margin-bottom:18px; }
.mae-eyebrow{
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mae-gold); font-weight:700; margin-bottom:4px;
}
.mae-title{
  font-family:var(--sf,Georgia,serif); font-weight:300; font-size:1.5rem;
  color:var(--txt,inherit); margin:0; line-height:1.15; letter-spacing:-.005em;
}
.mae-sub{
  font-size:.66rem; color:var(--t3,#8a8474); text-transform:uppercase;
  letter-spacing:.14em; margin-top:6px;
}

/* ── Rail de navegação interna: grupos + pills ── */
.mae-rail{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; align-items:center; }
.mae-rail-label{
  font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mae-gold); min-width:74px; opacity:.85; font-weight:600;
}
.mae-tab{
  padding:7px 14px; border-radius:20px; border:1px solid var(--mae-line);
  background:transparent; color:var(--txt,inherit); font-size:.72rem;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:border-color .18s ease, background .18s ease;
}
.mae-tab:hover{ border-color:var(--mae-gold-bright); background:rgba(196,163,90,.06); }
.mae-tab.on{
  border-color:var(--mae-gold); background:var(--mae-gold-soft); font-weight:600;
}

/* ── KPIs: a mesma pele nas três telas ── */
.mae-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px; margin-bottom:20px;
}
.mae-kpi{
  padding:14px 16px; border:1px solid var(--mae-line-soft); border-radius:12px;
  background:rgba(196,163,90,.03);
  flex:1 1 170px; min-width:150px;   /* convive em containers grid E flex */
}
.mae-kpi-l{
  font-size:.56rem; color:var(--t3,#8a8474); text-transform:uppercase;
  letter-spacing:.14em; margin-bottom:5px; font-weight:600;
}
.mae-kpi-v{
  font-family:var(--sf,Georgia,serif); font-weight:300; font-size:1.35rem;
  color:var(--txt,inherit); line-height:1; letter-spacing:-.01em;
}
.mae-kpi-s{ font-size:.56rem; color:var(--t3,#8a8474); margin-top:4px; }

/* ── Página-mãe: larguras canônicas ── */
.mae-page{ max-width:1280px; margin:0 auto; padding:20px 24px 40px; }
.mae-page--focada{ max-width:880px; }   /* Meu Dia: foco deliberado (doutrina ≤10) */

/* mobile: pills conservam toque confortável */
@media (max-width:640px){
  .mae-tab{ padding:8px 14px; }
  .mae-rail-label{ min-width:100%; }
}