/* ==========================================================================
   Avenna Design System — a ÚNICA fonte da verdade visual do Universo.
   Cores e tipografia conferidas no BRANDBOOK_AVENNA (2025), não inventadas.

   TIPOGRAFIA (o que o brandbook manda):
     • "Futura Book é a nossa fonte PRINCIPAL para a marca."
     • "Ofelia Text Bold foi escolhida para dar apoio em títulos que exigem
        destaque e impacto. Ofelia Text Regular é fonte de apoio, usada no
        nosso logo; também em materiais gráficos e textos."
   As duas são licenciadas (Futura é paga; Ofelia Text vive no Adobe Fonts),
   então a web usa as substitutas geométricas mais próximas do Google Fonts:
     • Futura Book      → Jost    (desenhada como interpretação da Futura)
     • Ofelia Text Bold → Poppins (geométrica, para títulos de impacto)
   Se um dia houver licença web da Futura/Ofelia, troque SÓ as duas linhas
   de --font-display / --font-body e o @import. Nada mais no portal muda.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  /* ── Navy (oficiais do brandbook) ──────────────────────────────────────
     #20274D é o navy do logotipo. #1C2526 é o escuro profundo que o
     brandbook chama de "fundo azul escuro". Os demais são derivados,
     usados só para dar profundidade ao céu noturno. */
  --navy-950: #0B0E1C;   /* derivado — o fundo do espaço */
  --navy-900: #12172F;   /* derivado */
  --navy-800: #20274D;   /* OFICIAL — navy da marca */
  --navy-700: #2A3260;   /* derivado */
  --navy-600: #343E75;   /* derivado */
  --charcoal: #1C2526;   /* OFICIAL — escuro profundo */

  /* ── Azuis (oficiais) ──────────────────────────────────────────────────
     O gradiente da marca vai do azul escuro ao azul claro. */
  --blue-600: #2B4B9B;   /* OFICIAL — azul médio */
  --blue-500: #3A83C4;   /* OFICIAL — azul da marca */
  --blue-400: #6E91CB;   /* OFICIAL — azul claro */
  --blue-300: #93B2DA;   /* derivado (sweep / fita) */
  --blue-200: #B7CCE7;   /* derivado */
  --blue-100: #DAE6F3;   /* derivado */
  --blue-050: #EEF4FA;   /* derivado */

  /* ── Creme (oficial) ── */
  --cream-500: #FDFBE9;  /* OFICIAL — texto sobre escuro */
  --cream-300: #FBF8EE;  /* derivado */
  --cream-100: #FDFCF6;  /* derivado */

  /* ── Cinzas (BBBBBA é oficial; o resto é a escala de apoio) ── */
  --gray-600: #6B7280;
  --gray-500: #9CA3AF;
  --gray-400: #BBBBBA;   /* OFICIAL */
  --gray-300: #D0D2D4;
  --gray-200: #E4E6E8;
  --gray-100: #F3F4F5;
  --gray-050: #FAFAFA;

  --white: #FFFFFF;
  --black: #000000;

  /* ── Semânticos ── */
  --color-brand:          var(--blue-500);
  --color-brand-dark:     var(--navy-800);
  --color-text-primary:   var(--navy-800);
  --color-text-secondary: var(--gray-600);
  --color-text-on-dark:   var(--cream-500);
  --color-surface:        var(--white);
  --color-border:         var(--gray-200);
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;

  /* ── Tipografia ── */
  --font-display: 'Poppins', 'Jost', system-ui, sans-serif;  /* ↔ Ofelia Text Bold */
  --font-body:    'Jost', system-ui, sans-serif;             /* ↔ Futura Book */
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem;
  --text-4xl: 3rem; --text-5xl: 3.75rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --weight-bold: 700; --weight-extrabold: 800;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -.02em; --tracking-wide: .04em; --tracking-wider: .08em; --tracking-widest: .15em;

  /* ── Espaçamento (grade 4px) ── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* ── Raio ── */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

  /* ── Sombras (navy-tinted, nunca preto puro) ── */
  --shadow-sm:   0 1px 3px rgba(32,39,77,.08), 0 1px 2px rgba(32,39,77,.06);
  --shadow-md:   0 4px 12px rgba(32,39,77,.12), 0 2px 4px rgba(32,39,77,.08);
  --shadow-lg:   0 8px 24px rgba(32,39,77,.16), 0 4px 8px rgba(32,39,77,.10);
  --shadow-blue: 0 8px 24px rgba(58,131,196,.35);
  --shadow-navy: 0 8px 32px rgba(32,39,77,.35);

  --transition-base: 200ms ease;
  --transition-fast: 150ms ease;
}

/* ==========================================================================
   CAMADA "CÉU NOTURNO" — usada pelas telas de chegada (login e hub).
   As telas internas continuam claras: elas têm muito texto, e a proposta
   é impressa em PDF pelo navegador (fundo escuro sairia uma página preta).
   ========================================================================== */

/* O espaço: navy profundo + duas nebulosas azuis fora de centro.
   Nebulosa não é decoração gratuita — ela cria a hierarquia de foco,
   puxando o olho pro topo, onde fica a saudação. */
.ceu {
  min-height: 100vh;
  color: var(--cream-500);
  background:
    radial-gradient(1200px 700px at 72% -10%, rgba(58,131,196,.28) 0%, rgba(58,131,196,0) 62%),
    radial-gradient(900px 600px at 12% 8%,   rgba(43,75,155,.32)  0%, rgba(43,75,155,0)  58%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 55%, var(--charcoal) 100%);
  background-attachment: fixed;
}

/* As estrelas: três camadas de radial-gradient repetido, em densidades e
   tamanhos diferentes. Três declarações substituem centenas de box-shadow,
   e o navegador compõe tudo em GPU — não pesa no celular. */
.ceu::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%,  rgba(253,251,233,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 74% 12%,  rgba(253,251,233,.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 42% 78%,  rgba(147,178,218,.75), transparent 60%),
    radial-gradient(1px 1px   at 88% 62%,    rgba(253,251,233,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 68%,   rgba(253,251,233,.60), transparent 60%),
    radial-gradient(1px 1px   at 58% 38%,    rgba(147,178,218,.55), transparent 60%);
  background-size: 340px 340px, 260px 260px, 420px 420px, 300px 300px, 380px 380px, 240px 240px;
  animation: cintilar 7s ease-in-out infinite alternate;
}
@keyframes cintilar { from { opacity: .55; } to { opacity: 1; } }

/* Uma estrela isolada, maior, que respira. Só uma — duas viram enfeite. */
.ceu::after {
  content: '✦';
  position: fixed; top: 16%; right: 12%; z-index: 0;
  font-size: 14px; color: var(--blue-300); opacity: .5;
  pointer-events: none;
  animation: respirar 5s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: .75; transform: scale(1.25); }
}

/* Quem prefere menos movimento não vê nenhum. */
@media (prefers-reduced-motion: reduce) {
  .ceu::before, .ceu::after { animation: none; }
}

/* Tudo que é conteúdo flutua acima do céu. */
.ceu > * { position: relative; z-index: 1; }

/* ── A barra do topo, igual em TODAS as páginas internas ──────────────────
   As telas internas são claras (muito texto, e a proposta vira PDF), mas o
   topo é o mesmo céu do hub. É o que costura o portal: você entra num
   sistema e continua no Universo, não num site diferente.
   Cada página só precisa do markup — nada de .topo no <style> local. */
.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-950) 70%, var(--charcoal));
  border-bottom: 1px solid rgba(253, 251, 233, .1);
  overflow: hidden;
}
/* As mesmas estrelas do hub, em dose menor: a barra é fina. */
.topo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 22% 40%, rgba(253,251,233,.7), transparent 60%),
    radial-gradient(1px 1px   at 68% 24%, rgba(147,178,218,.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 70%, rgba(253,251,233,.5), transparent 60%);
  background-size: 180px 180px, 240px 240px, 300px 300px;
  opacity: .8;
}
/* Um véu azul no canto, ecoando a nebulosa do hub. */
.topo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 120px at 88% -40%, rgba(58,131,196,.35), transparent 70%);
}
.topo > * { position: relative; z-index: 1; }
.topo img { height: 28px; }
.topo .u { color: var(--blue-300); font-size: 14px; }
.topo .u a {
  color: var(--cream-500); text-decoration: none; margin-left: 14px; font-weight: 500;
  border: 1px solid rgba(253, 251, 233, .2); border-radius: var(--radius-md);
  padding: 6px 13px;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.topo .u a:hover { background: rgba(255,255,255,.08); border-color: var(--blue-400); }

@media print { .topo { display: none; } }

/* Celular: nome do usuário + 1-2 links de ação cabiam bem numa fileira só em
   tela larga; no celular, .u precisa poder quebrar pra baixo do logo sem
   apertar os links até ficarem ilegíveis (achado real, 04/08 — auditoria
   mobile do portal inteiro). */
@media (max-width: 480px) {
  .topo { flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
  .topo .u { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .topo .u a { margin-left: 0; }
}

/* ── Vidro fosco: a superfície dos "planetas" ── */
.vidro {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(253, 251, 233, .13);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ── Botões e cartões base (herdados do DS anterior) ── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  font-size: var(--text-base); padding: 12px 24px; border-radius: var(--radius-lg);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.ds-btn--primary { background: var(--blue-500); color: #fff; box-shadow: var(--shadow-blue); }
.ds-btn--primary:hover { background: var(--blue-400); }
.ds-btn--navy { background: var(--navy-800); color: var(--cream-500); box-shadow: var(--shadow-navy); }
.ds-btn--navy:hover { background: var(--navy-700); }
.ds-btn--outline { background: transparent; color: var(--blue-500); border: 2px solid var(--blue-500); }
.ds-btn--outline:hover { background: var(--blue-050); }

.ds-card {
  display: flex; flex-direction: column; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}

.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); border-radius: var(--radius-full);
  font-size: 12px; padding: 4px 10px;
}
.ds-badge--blue    { background: var(--blue-100);  color: var(--navy-700); }
.ds-badge--navy    { background: var(--navy-800);  color: var(--cream-500); }
.ds-badge--success { background: #DCFCE7; color: #166534; }
.ds-badge--warning { background: #FEF3C7; color: #92400E; }
.ds-badge--neutral { background: var(--gray-200); color: var(--gray-600); }