/* ============================================================
   AFFECTION • DESIGN TOKENS
   Sistema de design oficial da Central Affection
   Versão 2.0 — Recriação do zero — 29/06/2026
   
   VOAR: Visão · Organização · Aceleração · Resultados
   ============================================================ */

/* ---------- FONTES ---------- */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- CORES VOAR (marca oficial) ---------- */
  --aff-bordo:        #532137;  /* V — Visão (primária) */
  --aff-bordo-hover:  #3d1828;
  --aff-bordo-claro:  #6d2f48;
  --aff-bordo-suave:  rgba(83, 33, 55, 0.08);

  --aff-rosa:         #dd597d;  /* O — Organização */
  --aff-rosa-hover:   #c7456a;
  --aff-rosa-claro:   #f4c5d2;
  --aff-rosa-suave:   rgba(221, 89, 125, 0.08);

  --aff-amarelo:      #f9a01b;  /* A — Aceleração (acento/ponto da logo) */
  --aff-amarelo-hover:#e08e0d;
  --aff-amarelo-claro:#fde2b3;
  --aff-amarelo-suave:rgba(249, 160, 27, 0.10);

  --aff-grafite:      #2c2c2a;  /* R — Resultados (texto principal) */
  --aff-grafite-suave:rgba(44, 44, 42, 0.65);

  --aff-dourado-claro:#f6d9a6;  /* destaque sobre bordô (palavras italic) */

  /* ---------- NEUTROS (Opção B — off-white) ---------- */
  --aff-fundo:        #f1efe8;  /* fundo geral da aplicação */
  --aff-papel:        #ffffff;  /* cards, modais, inputs */
  --aff-papel-2:      #faf9f4;  /* segundo plano sutil */
  --aff-borda:        #d3d1c7;  /* bordas padrão */
  --aff-borda-suave:  #e6e4dc;  /* divisórias delicadas */
  --aff-texto:        #2c2c2a;  /* texto principal */
  --aff-texto-suave:  #6b6a63;  /* texto secundário */
  --aff-texto-mute:   #9b9a91;  /* placeholders, hints */
  --aff-overlay:      rgba(44, 44, 42, 0.55);

  /* ---------- SEMÂNTICAS ---------- */
  --aff-sucesso:      #2d7d57;
  --aff-sucesso-bg:   #e3f2eb;
  --aff-erro:         #b8334a;
  --aff-erro-bg:      #fbe8ec;
  --aff-aviso:        #c47a06;
  --aff-aviso-bg:     #fdf1d8;
  --aff-info:         #2c5f8a;
  --aff-info-bg:      #e1edf6;

  /* ---------- TIPOGRAFIA ---------- */
  --ff-logo:    'League Spartan', system-ui, sans-serif;   /* Logo Affection. */
  --ff-titulo:  'Lora', Georgia, serif;                    /* H1-H4 + ênfase italic */
  --ff-corpo:   'DM Sans', system-ui, -apple-system, sans-serif; /* UI + corpo */
  --ff-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  38px;
  --fs-5xl:  48px;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.55;
  --lh-relax:  1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ---------- ESPAÇAMENTOS (escala 4px) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- RAIOS ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 999px;

  /* ---------- SOMBRAS (suaves, premium) ---------- */
  --sh-xs:  0 1px 2px rgba(44, 44, 42, 0.04);
  --sh-sm:  0 1px 3px rgba(44, 44, 42, 0.06), 0 1px 2px rgba(44, 44, 42, 0.04);
  --sh-md:  0 4px 12px rgba(44, 44, 42, 0.07), 0 2px 4px rgba(44, 44, 42, 0.04);
  --sh-lg:  0 12px 28px rgba(44, 44, 42, 0.09), 0 4px 10px rgba(44, 44, 42, 0.05);
  --sh-xl:  0 24px 48px rgba(44, 44, 42, 0.14);
  --sh-bordo: 0 8px 24px rgba(83, 33, 55, 0.18);
  --sh-foco:  0 0 0 3px rgba(221, 89, 125, 0.20);

  /* ---------- TRANSIÇÕES ---------- */
  --t-rapida:  120ms ease;
  --t-padrao:  200ms ease;
  --t-suave:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- LAYOUT ---------- */
  --w-sidebar:        252px;
  --w-sidebar-min:    72px;
  --h-topbar:         60px;
  --w-conteudo-max:   1440px;
  --z-base:    1;
  --z-sidebar: 40;
  --z-topbar:  50;
  --z-modal:   100;
  --z-toast:   200;
}

/* ============================================================
   RESET ENXUTO + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-corpo);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--aff-texto);
  background: var(--aff-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--ff-titulo);
  color: var(--aff-bordo);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5, h6 {
  font-family: var(--ff-corpo);
  font-weight: var(--fw-semi);
  color: var(--aff-grafite);
  margin: 0 0 var(--sp-2);
}
p { margin: 0 0 var(--sp-3); }
em.aff-enfase, .aff-italic-bordo {
  font-family: var(--ff-titulo);
  font-style: italic;
  color: var(--aff-bordo);
  font-weight: var(--fw-medium);
}
a {
  color: var(--aff-bordo);
  text-decoration: none;
  transition: color var(--t-rapida);
}
a:hover { color: var(--aff-rosa); }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--aff-borda-suave); margin: var(--sp-6) 0; }

/* ============================================================
   LOGO OFICIAL "Affection."
   ============================================================ */
.aff-logo {
  font-family: var(--ff-logo);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aff-bordo);
  font-size: var(--fs-2xl);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  user-select: none;
}
.aff-logo .ponto {
  color: var(--aff-amarelo);
  margin-left: 1px;
}
.aff-logo--branco { color: #ffffff; }
.aff-logo--branco .ponto { color: var(--aff-amarelo); }
.aff-logo--lg { font-size: var(--fs-4xl); }
.aff-logo--xl { font-size: var(--fs-5xl); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--ff-corpo);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--t-padrao);
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-foco); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primario {
  background: var(--aff-bordo);
  color: #ffffff;
}
.btn-primario:hover:not(:disabled) {
  background: var(--aff-bordo-hover);
  box-shadow: var(--sh-bordo);
  transform: translateY(-1px);
}

.btn-secundario {
  background: var(--aff-papel);
  color: var(--aff-bordo);
  border-color: var(--aff-borda);
}
.btn-secundario:hover:not(:disabled) {
  border-color: var(--aff-bordo);
  background: var(--aff-bordo-suave);
}

.btn-rosa {
  background: var(--aff-rosa);
  color: #ffffff;
}
.btn-rosa:hover:not(:disabled) {
  background: var(--aff-rosa-hover);
  transform: translateY(-1px);
}

.btn-amarelo {
  background: var(--aff-amarelo);
  color: var(--aff-grafite);
}
.btn-amarelo:hover:not(:disabled) {
  background: var(--aff-amarelo-hover);
  transform: translateY(-1px);
}

.btn-fantasma {
  background: transparent;
  color: var(--aff-texto-suave);
}
.btn-fantasma:hover:not(:disabled) {
  background: var(--aff-bordo-suave);
  color: var(--aff-bordo);
}

.btn-perigo {
  background: var(--aff-papel);
  color: var(--aff-erro);
  border-color: var(--aff-borda);
}
.btn-perigo:hover:not(:disabled) {
  background: var(--aff-erro-bg);
  border-color: var(--aff-erro);
}

.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 14px 24px; font-size: var(--fs-md); }
.btn-bloco { width: 100%; }
.btn-icone {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--r-md);
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.campo { margin-bottom: var(--sp-5); }
.campo label, .label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--aff-texto-suave);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.01em;
}
.label-obrig::after {
  content: ' *';
  color: var(--aff-rosa);
}
.input, .textarea, .select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--aff-borda);
  border-radius: var(--r-md);
  background: var(--aff-papel);
  color: var(--aff-texto);
  font-family: var(--ff-corpo);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.input::placeholder, .textarea::placeholder {
  color: var(--aff-texto-mute);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--aff-rosa);
  box-shadow: var(--sh-foco);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--aff-fundo);
  cursor: not-allowed;
}
.textarea { min-height: 96px; resize: vertical; font-family: var(--ff-corpo); }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6a63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.dica {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--aff-texto-mute);
}
.erro-msg {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--aff-erro);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--aff-papel);
  border: 1px solid var(--aff-borda-suave);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: box-shadow var(--t-padrao), border-color var(--t-padrao);
}
.card-clicavel { cursor: pointer; }
.card-clicavel:hover {
  border-color: var(--aff-borda);
  box-shadow: var(--sh-md);
}
.card-plano { box-shadow: var(--sh-xs); }
.card-destaque {
  border-color: var(--aff-bordo);
  box-shadow: var(--sh-bordo);
}
.card-cabec {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-4);
}
.card-titulo {
  font-family: var(--ff-titulo);
  font-size: var(--fs-xl);
  color: var(--aff-bordo);
  margin: 0;
}

/* ============================================================
   TAGS / BADGES / PILLS
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--aff-bordo-suave);
  color: var(--aff-bordo);
  letter-spacing: 0.01em;
}
.tag-rosa     { background: var(--aff-rosa-suave);    color: var(--aff-rosa); }
.tag-amarela  { background: var(--aff-amarelo-suave); color: var(--aff-aviso); }
.tag-grafite  { background: rgba(44,44,42,0.08);      color: var(--aff-grafite); }
.tag-sucesso  { background: var(--aff-sucesso-bg);    color: var(--aff-sucesso); }
.tag-erro     { background: var(--aff-erro-bg);       color: var(--aff-erro); }
.tag-aviso    { background: var(--aff-aviso-bg);      color: var(--aff-aviso); }
.tag-info     { background: var(--aff-info-bg);       color: var(--aff-info); }

/* ============================================================
   TABELAS
   ============================================================ */
.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--aff-papel);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: var(--fs-base);
}
.tabela thead th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--aff-papel-2);
  border-bottom: 1px solid var(--aff-borda);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aff-texto-suave);
}
.tabela tbody td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--aff-borda-suave);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--aff-papel-2); }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.flex-c    { display: flex; align-items: center; }
.flex-cc   { display: flex; align-items: center; justify-content: center; }
.flex-cb   { display: flex; align-items: center; justify-content: space-between; }
.flex-1    { flex: 1; }
.grid      { display: grid; }
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)} .gap-8{gap:var(--sp-8)}
.text-xs{font-size:var(--fs-xs)} .text-sm{font-size:var(--fs-sm)} .text-base{font-size:var(--fs-base)} .text-md{font-size:var(--fs-md)} .text-lg{font-size:var(--fs-lg)} .text-xl{font-size:var(--fs-xl)} .text-2xl{font-size:var(--fs-2xl)} .text-3xl{font-size:var(--fs-3xl)}
.text-suave{color:var(--aff-texto-suave)} .text-mute{color:var(--aff-texto-mute)} .text-bordo{color:var(--aff-bordo)} .text-rosa{color:var(--aff-rosa)} .text-amarelo{color:var(--aff-amarelo)} .text-erro{color:var(--aff-erro)} .text-sucesso{color:var(--aff-sucesso)}
.fw-medium{font-weight:var(--fw-medium)} .fw-semi{font-weight:var(--fw-semi)} .fw-bold{font-weight:var(--fw-bold)}
.italic{font-style:italic}
.center{text-align:center} .right{text-align:right}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.p-3{padding:var(--sp-3)} .p-4{padding:var(--sp-4)} .p-5{padding:var(--sp-5)} .p-6{padding:var(--sp-6)} .p-8{padding:var(--sp-8)}
.full{width:100%} .hidden{display:none !important}
.borda { border: 1px solid var(--aff-borda-suave); }
.borda-top { border-top: 1px solid var(--aff-borda-suave); }
.r-md{border-radius:var(--r-md)} .r-lg{border-radius:var(--r-lg)} .r-xl{border-radius:var(--r-xl)} .r-pill{border-radius:var(--r-pill)}

/* ============================================================
   ÍCONES (SVG monocromático, stroke 1.6)
   ============================================================ */
.icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }

/* ============================================================
   AVATARES
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--aff-bordo);
  color: #ffffff;
  font-family: var(--ff-corpo);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-md); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--fs-lg); }
.avatar-rosa    { background: var(--aff-rosa); }
.avatar-amarelo { background: var(--aff-amarelo); color: var(--aff-grafite); }
.avatar-grafite { background: var(--aff-grafite); }

/* ============================================================
   TOAST / NOTIFICAÇÕES
   ============================================================ */
.toast-area {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  background: var(--aff-papel);
  border: 1px solid var(--aff-borda);
  border-left: 4px solid var(--aff-bordo);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sh-lg);
  min-width: 280px;
  max-width: 420px;
  font-size: var(--fs-base);
  color: var(--aff-texto);
  pointer-events: auto;
  animation: toast-in 240ms cubic-bezier(0.4,0,0.2,1);
}
.toast-sucesso { border-left-color: var(--aff-sucesso); }
.toast-erro    { border-left-color: var(--aff-erro); }
.toast-aviso   { border-left-color: var(--aff-aviso); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-fundo {
  position: fixed; inset: 0;
  background: var(--aff-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fade-in 200ms ease;
}
.modal {
  background: var(--aff-papel);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-in 280ms cubic-bezier(0.4,0,0.2,1);
}
.modal-cabec {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--aff-borda-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-titulo {
  font-family: var(--ff-titulo);
  font-size: var(--fs-xl);
  color: var(--aff-bordo);
  margin: 0;
}
.modal-corpo { padding: var(--sp-6); overflow-y: auto; flex: 1; }
.modal-rodape {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--aff-borda-suave);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  background: var(--aff-papel-2);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   SCROLLBAR DELICADA
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--aff-borda) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--aff-borda);
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--aff-texto-mute); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: var(--aff-rosa-claro); color: var(--aff-bordo); }

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.vazio {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--aff-texto-suave);
}
.vazio-icone {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-4);
  color: var(--aff-texto-mute);
  opacity: 0.6;
}
.vazio-titulo {
  font-family: var(--ff-titulo);
  font-size: var(--fs-lg);
  color: var(--aff-bordo);
  margin-bottom: var(--sp-2);
}
.vazio-texto {
  font-size: var(--fs-base);
  color: var(--aff-texto-suave);
  max-width: 360px;
  margin: 0 auto var(--sp-5);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--aff-papel-2) 25%, var(--aff-borda-suave) 50%, var(--aff-papel-2) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 768px) {
  :root { --w-sidebar: 100%; }
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  .modal { max-width: 100%; }
}