/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM — ÓRBITTA
   Identidade: gradiente laranja→rosa→roxo, azul-marinho
   institucional (#12131A), Poppins, cantos bem redondos.
   Cor só onde precisa chamar atenção; base clara e limpa.
   ═══════════════════════════════════════════════════ */
:root {
  /* roxo da marca = cor de ação/interação (botões, links, ativo) */
  --fonte: 'Poppins', sans-serif;
  --brand:        #8A2BFF;
  --brand-dark:   #6E1FD1;
  --brand-light:  #A866FF;
  --brand-faint:  #F5EEFF;
  --brand-ring:   rgba(138,43,255,0.18);

  /* gradiente oficial da marca (laranja → rosa → roxo) */
  --grad-brand: linear-gradient(135deg, #FF4D00 0%, #FF008F 52%, #8A2BFF 100%);

  /* sidebar escura no azul-marinho institucional */
  --sidebar-bg:     #12131A;
  --sidebar-line:   rgba(255,255,255,0.08);
  --sidebar-hover:  rgba(255,255,255,0.06);
  --sidebar-text:   rgba(255,255,255,0.72);
  --sidebar-muted:  rgba(255,255,255,0.42);

  --bg:             #F7F7FA;
  --surface:        #FFFFFF;
  --surface-hover:  #FAF9FD;
  --border:         #EAEAF0;
  --border-strong:  #D9D9E3;

  --text-primary:   #12131A;   /* azul-marinho institucional */
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  --success:        #1F9D5B;
  --success-bg:     #E8F7EF;
  --warning:        #D97706;
  --warning-bg:     #FEF3C7;
  --error:          #DE3B3B;
  --error-bg:       #FDEEEE;

  /* type colors — as 4 cores de apoio do manual, escurecidas
     só o bastante pra dar contraste de texto sobre fundo claro */
  --reel:       #E64500;   /* laranja  #FF4D00 */
  --reel-bg:    #FFEFE7;
  --stories:    #E60081;   /* rosa     #FF008F */
  --stories-bg: #FFE9F4;
  --feed:       #0092CC;   /* azul     #00C2FF */
  --feed-bg:    #E5F7FF;
  --carousel:   #8A2BFF;   /* roxo */
  --carousel-bg:#F5EEFF;

  /* etapas do conteúdo — as mesmas 5 no cartão do cliente, no filtro e na agenda.
     "Criando" é de propósito o cinza (é o estado normal, não precisa gritar);
     a cor cresce conforme o conteúdo avança até o roxo da marca em finalizado. */
  --et-criando:        #6B7280;
  --et-criando-bg:     #F3F4F6;
  --et-aprovacao:      #E60081;
  --et-aprovacao-bg:   #FFE9F4;
  --et-aprovados:      #1F9D5B;
  --et-aprovados-bg:   #E8F7EF;
  --et-agendados:      #0092CC;
  --et-agendados-bg:   #E5F7FF;
  --et-finalizados:    #8A2BFF;
  --et-finalizados-bg: #F5EEFF;

  --reuniao:    #3B5BDB;
  --reuniao-bg: #EBEFFC;
  --gravacao:   #B08900;   /* amarelo #FFD600 escurecido p/ leitura */
  --gravacao-bg:#FFF6D6;

  --sidebar-w: 230px;
  /* largura máxima do espaço do cliente (link secreto / "Ver como cliente"):
     lá não existe barra lateral, então sem esse teto a tela se estica de
     ponta a ponta do monitor. Ver as regras em body.mode-client #...Section */
  --client-max: 1280px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 3px rgba(18,19,26,0.06);
  --shadow:    0 4px 16px rgba(18,19,26,0.08);
  --shadow-lg: 0 12px 40px rgba(18,19,26,0.12);
  --shadow-xl: 0 24px 64px rgba(18,19,26,0.16);

  --transition: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  font-size: 14px;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
}