/* ============================================================================
   Loob Free V2 — linguagem visual cinematográfica
   ----------------------------------------------------------------------------
   Revisão do T14: o dono reabriu o DSY-68 e pediu profundidade, vidro e
   abertura cinematográfica. Esta folha executa isso — mas com disciplina:
   a transparência vive na CHROME (barra, dock, painéis flutuantes), nunca
   atrás de texto longo, e todo par de cor continua medido para AA.

   Camadas de token preservadas do T14 (DSY-27):
   primitivo → semântico → componente. Nenhum componente lê primitivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVOS
   ------------------------------------------------------------------------ */
:root {
  --violet-50:  #F4F2FE;
  --violet-100: #EAE6FD;
  --violet-200: #D6CEFB;
  --violet-300: #B7A9F9;
  --violet-400: #8B5CF6;
  --violet-500: #7A63F6;  /* identidade */
  --violet-600: #6B4FE8;  /* 5.37:1 — texto e link */
  --violet-700: #5A3FE0;  /* 6.52:1 — preenchimento primário */
  --violet-800: #4A31B8;
  --violet-900: #2E1F73;

  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFBF9;
  --neutral-50:  #F7F7F4;
  --neutral-100: #EFEFEC;
  --neutral-200: #DCDCD8;
  --neutral-300: #C4C4C0;
  --neutral-350: #8F8F8B;
  --neutral-400: #83837F;
  --neutral-500: #6E6F75;
  --neutral-600: #52535C;
  --neutral-700: #3A3B47;
  --neutral-800: #22243A;
  --neutral-900: #0B1230;

  --green-50:  #E8F7F0;
  --green-500: #0E9E63;
  --green-700: #0B7A4D;
  --red-50:  #FDECEE;
  --red-500: #E5223A;
  --red-700: #C81E33;
  --amber-50:  #FDF3E3;
  --amber-700: #8A5A08;
  --gold-300: #F6E3A8;
  --gold-400: #E8C56B;
  --gold-500: #D4A93A;
  --gold-700: #8A6A15;

  /* Identidade oficial da marca */
  --navy-900: #0E2A66;   /* azul-marinho profundo — a cor do logotipo */
  --navy-950: #071A44;
  --brand-green: #25C39A; /* verde conexão — só no ponto de conexão */
  --graphite: #1A1F2E;
}

/* --------------------------------------------------------------------------
   2. SEMÂNTICOS + a camada de profundidade
   ------------------------------------------------------------------------ */
:root {
  --surface-page:    var(--neutral-50);
  --surface-raised:  var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-hover:   var(--neutral-100);

  --text-strong:   var(--neutral-900);
  --text-muted:    var(--neutral-600);
  /* Era o neutral-500 (#6E6F75): 5,3:1 no branco puro, mas 4,3:1 assim que
     cai sobre qualquer superfície levemente tingida — a linha de conversa
     selecionada, o bloco de fechamento. Um degrau mais escuro passa nos dois
     e continua distinto do --text-muted. */
  --text-subtle:   #63646C;
  --text-disabled: var(--neutral-400);
  --text-on-fill:  var(--neutral-0);
  /* Apelidos. As camadas novas (Aurora, Business, ADM) foram escritas com estes
     nomes e eles não existiam — todo uso caía no texto herdado, o que fazia
     "secundário" sair na força total do primário. */
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text-muted);

  --action-primary:       var(--violet-700);
  --action-primary-hover: var(--violet-800);
  --action-text:          var(--violet-600);
  --accent:               var(--violet-500);
  --accent-soft:          var(--violet-100);
  --accent-softer:        var(--violet-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-control: var(--neutral-350);

  --success: var(--green-500); --success-text: var(--green-700); --success-bg: var(--green-50);
  --danger:  var(--red-500);   --danger-text:  var(--red-700);   --danger-bg:  var(--red-50);
  --warning-text: var(--amber-700); --warning-bg: var(--amber-50);

  /* ---- PROFUNDIDADE — o que o dono reabriu -------------------------------
     Três materiais, e só três. Cada um com um trabalho.                    */
  --glass:        rgba(255, 255, 255, .70);   /* chrome flutuante */
  --glass-strong: rgba(255, 255, 255, .86);   /* painel com conteúdo */
  --glass-blur:   saturate(180%) blur(24px);
  --glass-edge:   rgba(255, 255, 255, .75);   /* luz de borda superior */
  --glass-ring:   rgba(11, 18, 48, .06);      /* contorno que segura a forma */

  /* ---- VÉUS — a camada que faltava ---------------------------------------
     Quase toda superfície elevada desta folha era `rgba(255,255,255,.x)`
     escrito na unha. Isso funciona no claro e RUÍNA no escuro: o fundo fica
     branco, o texto fica gelo e some. Era o buraco que o tema escuro tapava
     com uma lista de exceções — lista que, por definição, sempre esquece uma.

     Aqui o véu é um token. No claro ele clareia; no escuro ele escurece.
     Nenhum componente precisa saber em qual tema está.

     Regra: `--veu-*` é FUNDO de superfície. Brilho especular (o reflexo no
     topo de um botão, a luz no canto de um ícone) continua branco literal —
     ali branco é a luz, não a superfície, e no escuro ele também é branco. */
  --veu-solido: rgba(255, 255, 255, .96);
  --veu-forte:  rgba(255, 255, 255, .86);
  --veu-medio:  rgba(255, 255, 255, .78);
  --veu-leve:   rgba(255, 255, 255, .62);
  --veu-tenue:  rgba(255, 255, 255, .40);
  /* Preenchimento de estado (hover, trilho, barra de progresso): no claro é
     uma sombra do conteúdo; no escuro é uma luz. Por isso é token à parte. */
  --preench-1: rgba(11, 18, 48, .05);
  --preench-2: rgba(11, 18, 48, .09);
  /* Tinta sobre um fundo LEVEMENTE tingido de acento (o bloco "por que isto
     apareceu", a bolha da conversa). No claro é o violeta escuro; no escuro
     tem que ser o claro, senão vira roxo sobre roxo. */
  --tinta-acento: var(--violet-900);

  /* Elevação cinematográfica. Cada degrau tem TRÊS sombras, não uma:
       (1) contato — curta e escura, é o que cola o objeto no plano;
       (2) ambiente — longa e difusa, é o que diz a que altura ele está;
       (3) cor — o roxo do palco devolvido pela superfície, muito fraco.
     Sombra única em cinza dá recorte de adesivo; a terceira camada é o que
     faz a peça parecer no mesmo ambiente que o fundo, e não colada por cima.
     Os degraus foram afastados: antes 1→4 iam de .08 a .28 de opacidade, o
     que fazia quatro níveis parecerem dois. */
  --lift-1: 0 1px 2px rgba(11,18,48,.07), 0 3px 8px -2px rgba(11,18,48,.09),
            0 6px 16px -8px rgba(90,63,224,.10);
  --lift-2: 0 2px 4px rgba(11,18,48,.08), 0 10px 24px -6px rgba(11,18,48,.16),
            0 18px 40px -14px rgba(90,63,224,.18);
  --lift-3: 0 4px 8px rgba(11,18,48,.10), 0 22px 46px -12px rgba(11,18,48,.26),
            0 36px 72px -22px rgba(90,63,224,.26);
  --lift-4: 0 10px 20px rgba(11,18,48,.12), 0 44px 88px -18px rgba(11,18,48,.38),
            0 64px 120px -30px rgba(90,63,224,.32);

  --spot: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 60%);

  --space-0: 0;    --space-05: 2px; --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;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --radius-xl: 26px; --radius-window: 22px; --radius-full: 999px;

  --container-reading:  760px;
  --container-document: 900px;
  --container-standard: 1120px;
  --container-wide:     1400px;
  --measure: 68ch;

  --dur-fast: 140ms; --dur-standard: 240ms; --dur-slow: 420ms; --dur-cine: 900ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --topbar-h: 68px;
  --dock-h: 76px;
  --bottomnav-h: 62px;

  --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-boot: 900;
}

/* --------------------------------------------------------------------------
   3. RESET E BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Inter, "Inter var", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 24px;
  color: var(--text-strong);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  min-height: 100vh;
}

/* ---- PALCO ---------------------------------------------------------------
   O fundo é iluminação, não papel de parede. Três camadas:
   (1) base fria com profundidade vertical;
   (2) focos de luz colorida que dão a temperatura cinematográfica;
   (3) vinheta, que escurece as bordas e empurra o olho para o centro.
   Nada disso passa por cima de conteúdo — tudo vive em z-index negativo. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 42% at 8% -8%,   rgba(122, 99, 246, .38), transparent 64%),
    radial-gradient(52% 40% at 96% -4%,  rgba(139, 92, 246, .30), transparent 62%),
    radial-gradient(46% 38% at 78% 34%,  rgba(90, 63, 224, .16),  transparent 66%),
    radial-gradient(70% 50% at 20% 96%,  rgba(14, 158, 99, .16),  transparent 68%),
    radial-gradient(60% 44% at 88% 104%, rgba(240, 106, 139, .12), transparent 66%),
    linear-gradient(178deg, #F6F5FB 0%, #EEECF6 38%, #E7E5F1 72%, #E2E0EE 100%);
  animation: derivar 26s var(--ease-in-out) infinite alternate;
}
/* Deriva lentíssima: dá vida ao palco sem chamar atenção para si. */
@keyframes derivar {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
}
/* Vinheta + grão fino: é o que separa "gradiente de site" de "cena". */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 88% at 50% 42%, transparent 42%, rgba(11, 18, 48, .13) 100%),
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 22%);
}

img, svg { display: block; max-width: 100%; }
svg.ico { display: inline-block; vertical-align: -.15em; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--action-text); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.t-display { font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -.025em; }
.t-h1 { font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; }
.t-h2 { font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.01em; }
.t-h3 { font-size: 17px; line-height: 24px; font-weight: 650; }
.t-body-lg { font-size: 18px; line-height: 28px; }
.t-body { font-size: 16px; line-height: 24px; }
.t-small { font-size: 14px; line-height: 20px; }
.t-caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .01em; }

.muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); }
.strong { color: var(--text-strong); }
.tabular { font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); }
.upper { text-transform: uppercase; letter-spacing: .06em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: var(--z-toast);
  background: var(--surface-raised); padding: 12px 16px; border-radius: var(--radius-md); }
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   4. ABERTURA CINEMATOGRÁFICA — a marca aparece antes do produto
   ------------------------------------------------------------------------ */
#boot {
  position: fixed; inset: 0; z-index: var(--z-boot);
  display: grid; place-items: center;
  background: linear-gradient(170deg, #14102B 0%, #1E1846 45%, #0B1230 100%);
}
#boot::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 40% at 50% 45%, rgba(122,99,246,.30), transparent 70%);
}
.boot-mark {
  position: relative; z-index: 1; text-align: center;
  animation: bootIn 1100ms var(--ease-out) both;
}
.boot-word { display: block; }
.boot-word img { width: min(320px, 62vw); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 40px rgba(155,123,246,.55)); }
.boot-tag { margin-top: 10px; font-size: 13px; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
@keyframes bootIn {
  from { opacity: 0; transform: scale(.94) translateY(8px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes sheen { 0% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
#boot.is-out { animation: bootOut 620ms var(--ease-in-out) forwards; }
@keyframes bootOut {
  to { opacity: 0; transform: scale(1.06); filter: blur(10px); visibility: hidden; }
}
/* O app entra atrás da abertura, não depois dela — a animação cobre latência
   que já existiria e nunca a cria (MOT-09 / AU-05).

   SEM `both`: fill-mode deixaria um transform de matriz identidade no #app, e
   qualquer transform cria bloco de contenção — a barra inferior `fixed` para
   de se posicionar pela viewport e some abaixo da dobra. */
.app-reveal { animation: appIn var(--dur-cine) var(--ease-out); }
@keyframes appIn { from { opacity: 0; transform: scale(.985); } }

/* --------------------------------------------------------------------------
   5. MATERIAIS — vidro e janela
   ------------------------------------------------------------------------ */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.85);
}
/* Janela: superfície de CONTEÚDO. Mais opaca de propósito — texto longo não
   pode ficar sobre fundo que se move. */
.window {
  position: relative;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-window);
  box-shadow: var(--lift-3), 0 0 0 1px var(--glass-ring);
  overflow: hidden;
}
.window::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--spot); opacity: .5;
}
.window-pad { padding: var(--space-8); }
@media (max-width: 767px) { .window-pad { padding: var(--space-5); } }

.window-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--veu-leve), transparent);
}
.window-dots { display: flex; gap: 6px; flex: none; }
.window-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.window-dots i:nth-child(1) { background: #F0655B; }
.window-dots i:nth-child(2) { background: #F2BE4C; }
.window-dots i:nth-child(3) { background: #62C554; }
.window-title { font-size: 13px; font-weight: 650; color: var(--text-muted);
  letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   6. TOPBAR DE VIDRO — flutua, não encosta
   ------------------------------------------------------------------------ */
/* A CHROME ANCORADA — barra + doca descem junto com a rolagem.
   ----------------------------------------------------------------------------
   Antes só a barra de busca grudava; a doca subia com a página. Quem estava no
   fim de um feed longo e queria trocar de módulo tinha que rolar tudo de volta.
   Agora as duas vivem no mesmo bloco fixo, e ele sozinho decide a altura.

   O `::before` é o que faz o conteúdo "ganhar transparência" ao passar por
   baixo: um desfoque com máscara que se dissolve na borda inferior. Sem ele, o
   texto do feed aparecia nítido nos vãos entre os ícones da doca e disputava a
   leitura com o menu. */
.chrome-topo {
  position: sticky; top: 0; z-index: var(--z-sticky);
  width: min(var(--container-wide), calc(100% - 32px)); margin: 0 auto;
  padding: var(--space-3) 0 var(--space-4);
}
.chrome-topo::before {
  content: ""; position: absolute; inset: -2px -16px 0; z-index: -1;
  pointer-events: none;
  /* 16px é a MENOR folga que a casca deixa: ela é `min(1400px, 100% - 32px)`,
     então a margem lateral nunca é menor que 16px. Com -20px o desfoque
     passava 4px além da janela em telas de 1024 e criava rolagem horizontal
     na página inteira — 4px que ninguém vê e todo mundo sente. */
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
}
.chrome-topo .dock-wrap { padding-top: var(--space-4); margin-bottom: 0; }

.topbar {
  position: relative; z-index: 1;
  margin: 0; width: 100%;
  height: var(--topbar-h); border-radius: var(--radius-full);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 10px 0 var(--space-6);
  background: linear-gradient(180deg, var(--veu-forte), var(--veu-leve));
  -webkit-backdrop-filter: saturate(200%) blur(30px); backdrop-filter: saturate(200%) blur(30px);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 6px rgba(11,18,48,.05),
    0 16px 36px -14px rgba(11,18,48,.24);
}
.topbar .search-box .input { height: 46px; background: var(--veu-leve);
  border-color: rgba(11,18,48,.10);
  box-shadow: inset 0 1px 2px rgba(11,18,48,.05); }
.topbar .search-box .input:focus { background: var(--veu-solido); }
.brandmark { display: flex; align-items: center; flex: none; }
.brand-logo { height: 34px; width: auto; display: block; }
.mtop .brand-logo { height: 27px; }

.topbar .search-box .input { height: 46px; background: var(--veu-leve);
  border-color: rgba(11,18,48,.10);
  box-shadow: inset 0 1px 2px rgba(11,18,48,.05); }
.topbar .search-box .input:focus { background: var(--veu-solido); }
.brandmark { display: flex; align-items: center; gap: 9px; flex: none; }
.loob-mark { flex: none; filter: drop-shadow(0 2px 6px rgba(14,42,102,.35)); }
/* Gradiente de assinatura: azul profundo → roxo elétrico */
.brand-word {
  font-size: 24px; font-weight: 800; letter-spacing: -.05em;
  background: linear-gradient(96deg, var(--navy-900) 0%, #2B3F9E 46%, var(--violet-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar .search-box { flex: 1; max-width: 620px; margin: 0 auto; }

.credits {
  display: inline-flex; align-items: center; gap: 6px; height: 38px;
  padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: linear-gradient(180deg, #FBF0D2, #F2DFAB);
  border: 1px solid rgba(138,106,21,.30);
  color: var(--gold-700); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   7. DOCK — substitui a sidebar. Atalhos como ícones.
   ------------------------------------------------------------------------ */
/* Dock menor, com magnificação por proximidade do cursor — o comportamento
   do dock do macOS. O fator vem do JS em --m (1 = repouso). */
.dock-wrap { display: block; margin-bottom: var(--space-8); padding-top: 30px; }
/* Vidro do dock: luz no topo, sombra de contato embaixo, e um halo suave que
   o descola do palco. É a diferença entre "barra translúcida" e "objeto". */
.dock {
  position: relative;
  /* Largura cheia: o dock centrado deixava espaço morto dos dois lados. */
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2px;
  padding: 8px 14px; border-radius: 22px;
  background: linear-gradient(180deg, var(--veu-medio), var(--veu-leve));
  -webkit-backdrop-filter: saturate(200%) blur(30px); backdrop-filter: saturate(200%) blur(30px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(11,18,48,.05) inset,
    0 2px 6px rgba(11,18,48,.06),
    0 18px 40px -12px rgba(11,18,48,.28),
    0 36px 70px -24px rgba(90,63,224,.26);
}
/* Reflexo de vidro na metade de cima */
.dock::before {
  content: ""; position: absolute; inset: 1px 1px auto 1px; height: 46%;
  border-radius: 23px 23px 40% 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}
/* Sombra de contato: o dock projeta no palco, não flutua no vácuo */
.dock::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 22px;
  border-radius: 50%; pointer-events: none; filter: blur(12px);
  background: radial-gradient(60% 100% at 50% 50%, rgba(11,18,48,.22), transparent 70%);
}
.dock-item {
  --m: 1;
  position: relative; flex: 1 1 0; min-width: 0;
  padding: 2px; transform-origin: bottom center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: var(--radius-md); color: var(--text-muted);
  font-size: 10px; font-weight: 600; text-align: center; line-height: 12px;
  transform: translateY(calc(-9px * (var(--m) - 1)));
  transition: transform 80ms linear;
}
.dock-item:hover { text-decoration: none; color: var(--text-strong); }
.dock-tile {
  position: relative; overflow: hidden;
  width: calc(34px * var(--m)); height: calc(34px * var(--m));
  border-radius: calc(10.5px * var(--m));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 2px 5px rgba(11,18,48,.18), 0 8px 18px -6px rgba(11,18,48,.22);
  transition: width 90ms linear, height 90ms linear, border-radius 90ms linear,
              box-shadow var(--dur-fast) var(--ease-out);
}
.dock-item:hover .dock-tile {
  box-shadow: 0 4px 10px rgba(11,18,48,.22), 0 18px 34px -8px rgba(11,18,48,.34),
              0 0 26px -4px rgba(122,99,246,.5); }
.dock-tile svg { position: relative; z-index: 1;
  width: calc(17px * var(--m)); height: calc(17px * var(--m)); }
/* Luz especular no ícone — o que faz parecer superfície, não retângulo */
.dock-tile::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(255,255,255,.42), transparent 52%); }
.dock-tile::after { content: ""; position: absolute; left: -30%; top: -60%;
  width: 160%; height: 90%; border-radius: 50%; opacity: .30;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), transparent); }
/* O rótulo só aparece no item sob o cursor, como no macOS */
/* Rótulo permanente. Trunca com reticências no aperto — o title= e o texto
   acessível continuam inteiros, então nada se perde para quem precisa. */
.dock-item .dock-nome {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out);
}
.dock-item:hover .dock-nome { color: var(--text-strong); }
.dock-item[aria-current="page"] .dock-nome { color: var(--text-strong); font-weight: 700; }
.dock-item[aria-current="page"]::after {
  content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.dock-badge { position: absolute; top: -2px; right: calc(50% - 20px * var(--m)); }

/* --------------------------------------------------------------------------
   7b. FAB COM ATALHOS — máscara escura e leque de ações
   ------------------------------------------------------------------------ */
/* Máscara negra: o conteúdo tem que sair da disputa, senão os atalhos
   competem com a tela inteira em vez de serem a única coisa legível. */
.fab-mask {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 10);
  background: radial-gradient(130% 100% at 88% 92%, rgba(8,10,28,.80), rgba(4,5,16,.94));
  -webkit-backdrop-filter: blur(18px) saturate(50%); backdrop-filter: blur(18px) saturate(50%);
  animation: fade var(--dur-standard) var(--ease-out);
}
/* O leque ocupa a tela: com a máscara negra, atalhos pequenos no canto
   desperdiçam o espaço que a máscara acabou de liberar. */
.fab-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 11);
  /* max-content, não 1fr: com 1fr as colunas esticam na largura da tela e
     abrem um vão enorme entre os cartões. */
  display: grid; place-content: center; justify-items: center;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-5); padding: var(--space-6);
  /* Ocupando a tela inteira, o contêiner engoliria o clique na área escura e
     o leque deixaria de fechar clicando fora. Só os cartões recebem ponteiro. */
  pointer-events: none;
}
.fab-menu > * { pointer-events: auto; }
.fab-menu .titulo { pointer-events: none; }
@media (max-width: 639px) { .fab-menu { grid-template-columns: max-content;
  gap: var(--space-4); align-content: center; } }
.fab-menu .titulo {
  grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.62);
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: var(--space-4); opacity: 0;
  animation: fabIn 400ms var(--ease-out) forwards;
}
.fab-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  width: 300px; padding: var(--space-6); border-radius: 24px;
  color: #fff; font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(22px) scale(.94);
  animation: fabIn 420ms var(--ease-out) forwards;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
@media (max-width: 639px) {
  .fab-action { width: min(320px, 78vw); flex-direction: row; align-items: center;
    padding: var(--space-4) var(--space-5); font-size: 17px; }
}
.fab-action:hover { text-decoration: none; background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30); }
.fab-action span.desc { display: block; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.62); margin-top: 4px; letter-spacing: 0; }
@media (max-width: 639px) { .fab-action span.desc { display: none; } }
.fab-action span.bolha {
  width: 62px; height: 62px; border-radius: 19px; display: grid; place-items: center;
  flex: none;
  box-shadow: 0 10px 26px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform var(--dur-standard) var(--ease-out);
}
@media (max-width: 639px) { .fab-action span.bolha { width: 50px; height: 50px;
  border-radius: 15px; } }
.fab-action:hover span.bolha { transform: scale(1.09) rotate(-3deg); }
@keyframes fabIn { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   7c. O MENU COMO TELA DE CELULAR — máscara escura e uma grade de aplicativos
   --------------------------------------------------------------------------
   Mesma família do "+": máscara negra com desfoque, conteúdo flutuando sobre
   ela. A diferença é de onde vem a luz — no "+" ela nasce embaixo à direita,
   onde fica o botão; aqui em cima à direita, onde fica o hambúrguer. É o que
   faz as duas parecerem a mesma casa sem serem a mesma tela.
   ------------------------------------------------------------------------ */
.apps-mask {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 10);
  background: radial-gradient(120% 90% at 92% 4%, rgba(8,10,28,.80), rgba(4,5,16,.95));
  -webkit-backdrop-filter: blur(18px) saturate(50%); backdrop-filter: blur(18px) saturate(50%);
  animation: fade var(--dur-standard) var(--ease-out);
}
/* `overflow-y:auto` com `safe center`: em treze ícones num telefone de 667px a
   grade passa da altura da tela. Com `center` puro, o navegador corta o TOPO e
   a primeira fileira fica inalcançável — o `safe` desiste de centralizar
   quando não cabe, e o conteúdo volta a começar no começo. */
.apps-tela {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 11);
  display: grid; justify-content: center;
  align-content: center; align-content: safe center;
  overflow-y: auto; overscroll-behavior: contain;
  /* `--space-8`, não `--space-7`: a paleta pula do 6 para o 8, e uma variável
     que não existe invalida a declaração inteira — o padding virava ZERO, e a
     margem de segurança do topo do celular sumia junto. */
  padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-5)
           calc(var(--space-8) + env(safe-area-inset-bottom));
  /* Ocupando a tela inteira, este contêiner engoliria o clique na área escura
     e o menu deixaria de fechar clicando fora. Só os filhos recebem ponteiro. */
  pointer-events: none;
}
.apps-tela > * { pointer-events: auto; }
.apps-titulo {
  text-align: center; color: rgba(255,255,255,.62);
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: var(--space-6); opacity: 0; pointer-events: none;
  animation: fabIn 400ms var(--ease-out) forwards;
}
/* Três colunas é o que a tela de um telefone tem, e é o que faz o ícone ficar
   com 64px sem apertar em 390px de largura. */
.apps-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-4);
  width: min(360px, 86vw);
}
@media (min-width: 640px) {
  .apps-grade { grid-template-columns: repeat(4, 1fr); width: min(520px, 80vw); }
}
.app-icone {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: #fff; text-align: center; min-width: 0;
  opacity: 0; transform: translateY(16px) scale(.9);
  animation: fabIn 380ms var(--ease-out) forwards;
}
.app-icone:hover { text-decoration: none; }
/* O QUADRO é o aplicativo. O raio de 20 em 64px é a mesma proporção do ícone
   de um telefone — mais quadrado do que um botão, mais redondo do que um
   cartão. A sombra por baixo e o brilho por dentro é o que faz ele parecer
   pousado sobre a máscara, e não desenhado nela. */
.app-quadro {
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform var(--dur-standard) var(--ease-out);
}
.app-icone:hover .app-quadro,
.app-icone:focus-visible .app-quadro { transform: scale(1.08) translateY(-2px); }
.app-icone:active .app-quadro { transform: scale(.94); }
.app-nome {
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  color: rgba(255,255,255,.92); letter-spacing: -.01em;
  /* Duas linhas no máximo: "Oportunidades" cabe em uma quebra e o alinhamento
     da fileira não pode depender do tamanho da palavra. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-icone:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 6px;
  border-radius: 14px; }
/* A cor que faltava: nenhum módulo tinha quadro para o Suporte, porque ele não
   é módulo. (Havia também um `.tile-privac`, para Privacidade — ela saiu do
   menu quando Comunidades entrou, e a regra saiu junto. Privacidade continua
   em Configurações → "Ver tudo sobre privacidade".) */
.tile-suporte { background: linear-gradient(160deg, #F0B45E, #C4761A); }
/* Aberto: gira para virar "fechar", e clareia — sobre a máscara negra um
   botão escuro desapareceria. */
/* z-index no .is-open, não no .fab: a regra base do botão vem depois nesta
   folha e sobrescreveria um override de mesma especificidade — o botão ficava
   embaixo da máscara e não dava para fechar clicando nele. */
.fab.is-open {
  z-index: calc(var(--z-overlay) + 12);
  transform: rotate(135deg);
  background: linear-gradient(155deg, #FFFFFF, #DCDCD8); color: var(--neutral-900);
  box-shadow: var(--lift-4), 0 0 0 1px rgba(255,255,255,.5);
}
.fab.is-open:hover { transform: rotate(135deg) scale(1.05); }

/* Cada área tem seu material, como ícone de app — nunca cor de status */
.tile-inicio  { background: linear-gradient(160deg, #8B5CF6, #5A3FE0); }
.tile-opp     { background: linear-gradient(160deg, #6B8BF6, #3F55E0); }
.tile-rede    { background: linear-gradient(160deg, #4FC3A1, #0E9E63); }
.tile-msg     { background: linear-gradient(160deg, #F0A35E, #E06A2F); }
.tile-agenda  { background: linear-gradient(160deg, #F06A8B, #D62F63); }
.tile-eventos { background: linear-gradient(160deg, #9B7BF0, #6B3FD0); }
.tile-loob    { background: linear-gradient(160deg, #7A8AA0, #3A3B47); }
.tile-criar   { background: linear-gradient(160deg, #7A63F6, #4A31B8); }

/* --------------------------------------------------------------------------
   8. LAYOUT
   ------------------------------------------------------------------------ */
.app { min-height: 100vh; }
.shell { width: min(var(--container-wide), calc(100% - 32px)); margin: 0 auto;
  padding-bottom: var(--space-16); }
.view { animation: viewIn var(--dur-standard) var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px) scale(.995); } }

.split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--space-5);
  align-items: start; }
@media (max-width: 1199px) { .split { grid-template-columns: minmax(0,1fr); }
  .rail { display: none; } }

.container { max-width: var(--container-standard); margin: 0 auto; }
.container-document { max-width: var(--container-document); margin: 0 auto; }
.container-reading { max-width: var(--container-reading); margin: 0 auto; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; }

.stack { display: flex; flex-direction: column; }
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; } .flex1 { flex: 1; min-width: 0; } .center { text-align: center; }
/* 24px entre blocos era o ritmo do desktop aplicado ao celular. Numa tela de
   844px cada vão desses é 3% da altura — quatro deles somam meia publicação. */
.blocks { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1024px) { .blocks { gap: var(--space-6); } }
.block-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4); }
.grid { display: grid; gap: var(--space-4); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px) { .grid-3, .grid-2 { grid-template-columns: minmax(0,1fr); } }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   9. LAUNCHPAD — atalhos em ícone, no lugar do menu lateral
   ------------------------------------------------------------------------ */
.pad { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); }
@media (max-width: 639px) { .pad { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pad-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--space-4) var(--space-2); border-radius: var(--radius-md);
  color: var(--text-strong); font-size: 12px; font-weight: 600; text-align: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pad-item:hover { text-decoration: none; background: var(--veu-leve);
  transform: translateY(-3px); }
.pad-tile { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.42); }

/* --------------------------------------------------------------------------
   10. BOTÕES
   ------------------------------------------------------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: 42px; padding: 0 var(--space-4);
  border-radius: var(--radius-full); font-size: 15px; font-weight: 650; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-lg { height: 50px; padding: 0 var(--space-6); font-size: 16px; }
.btn-sm { height: 34px; padding: 0 var(--space-3); font-size: 14px; }
.btn-primary {
  background: linear-gradient(180deg, var(--violet-600), var(--action-primary));
  color: var(--text-on-fill);
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--action-primary), var(--violet-800));
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-secondary { background: var(--veu-medio); color: var(--text-strong);
  border: 1px solid rgba(11,18,48,.12); box-shadow: var(--lift-1); }
.btn-secondary:hover { background: var(--veu-solido); }
.btn-ghost { background: transparent; color: var(--text-strong); }
.btn-ghost:hover { background: var(--veu-leve); }
.btn-danger { background: var(--veu-medio); color: var(--danger-text);
  border: 1px solid rgba(200,30,51,.28); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.btn-icon:hover { background: var(--veu-leve); color: var(--text-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn[data-loading="1"] { pointer-events: none; }
.btn[data-loading="1"] .btn-label { visibility: hidden; }
.btn[data-loading="1"]::after { content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* FAB — o "+" flutuante, em todas as telas */
.fab {
  position: fixed; right: 22px; z-index: calc(var(--z-sticky) + 5);
  bottom: calc(var(--bottomnav-h) + 18px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(155deg, #A98BFF, #5A3FE0 58%, #3F27A8);
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.5),
              0 0 30px -6px rgba(122,99,246,.75);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fab::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(122,99,246,.75), transparent 72%);
  filter: blur(10px); animation: pulsarFab 2600ms var(--ease-in-out) infinite;
}
@keyframes pulsarFab {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.16); }
}
.fab:hover { transform: translateY(-3px) scale(1.06);
  box-shadow: var(--lift-4), 0 0 40px -4px rgba(122,99,246,.85); }
.fab:active { transform: scale(.96); }
@media (min-width: 1024px) { .fab { bottom: 26px; right: 26px; } }

/* --------------------------------------------------------------------------
   11. INPUTS
   ------------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 14px; font-weight: 650; }
.input, .textarea, .select {
  height: 48px; padding: 0 var(--space-4); width: 100%; font-size: 16px;
  background: var(--veu-forte); border: 1px solid var(--border-control);
  border-radius: var(--radius-md); color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { height: auto; min-height: 118px; padding: var(--space-3) var(--space-4);
  line-height: 24px; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--neutral-500); }
.input:focus, .textarea:focus { box-shadow: 0 0 0 4px rgba(122,99,246,.16); }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.field-error { display: flex; align-items: center; gap: var(--space-2);
  font-size: 14px; color: var(--danger-text); }

.search-box { position: relative; display: flex; align-items: center; }
.search-box .ico { position: absolute; left: var(--space-4); color: var(--text-subtle);
  pointer-events: none; }
.search-box .input { padding-left: 46px; height: 44px; font-size: 15px;
  border-radius: var(--radius-full); background: var(--veu-medio); }

.check { display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 44px; padding: var(--space-2) 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { appearance: none; width: 46px; height: 28px; border-radius: var(--radius-full);
  background: var(--neutral-300); position: relative; flex: none;
  transition: background var(--dur-fast) var(--ease-out); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(11,18,48,.3);
  transition: transform var(--dur-fast) var(--ease-out); }
.switch input:checked { background: var(--action-primary); }
.switch input:checked::after { transform: translateX(18px); }

/* --------------------------------------------------------------------------
   12. CARDS, CHIPS, BADGES
   ------------------------------------------------------------------------ */
.card {
  background: var(--veu-medio);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--lift-1), 0 0 0 1px var(--glass-ring);
}
.card-interactive { display: block; width: 100%; text-align: left; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.card-interactive:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--lift-2), 0 0 0 1px var(--glass-ring); }

.chip { display: inline-flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-full);
  font-size: 14px; font-weight: 550; background: var(--veu-leve);
  border: 1px solid rgba(11,18,48,.10); color: var(--text-muted); white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out); }
.chip:hover { background: var(--veu-solido); color: var(--text-strong); }
.chip[aria-pressed="true"], .chip.is-on {
  background: linear-gradient(180deg, var(--violet-600), var(--action-primary));
  border-color: transparent; color: #fff; box-shadow: var(--lift-1); }
.chip-static { background: var(--veu-leve); }

/* Abas em pílula, estilo Apple */
.pilltabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; margin-bottom: var(--space-5); }
/* No desktop as abas dividem a linha inteira: centradas, sobrava espaço morto */
@media (min-width: 1024px) {
  .pilltabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    overflow: visible; gap: var(--space-3); }
  .pilltabs .pilltab { justify-content: center; }
}
.pilltabs::-webkit-scrollbar { display: none; }
.pilltab { height: 48px; padding: 0 var(--space-5); border-radius: 13px;
  font-size: 15px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  background: var(--veu-leve); border: 1px solid var(--veu-tenue);
  box-shadow: var(--lift-1); transition: all var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; }
.pilltab:hover { text-decoration: none; color: var(--text-strong); background: var(--veu-solido); }
.pilltab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--violet-600), var(--action-primary));
  color: #fff; border-color: transparent; box-shadow: var(--lift-2); }

.badge { display: inline-flex; align-items: center; gap: var(--space-1);
  height: 24px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 650; white-space: nowrap; }
.badge-neutral { background: rgba(11,18,48,.06); color: var(--text-muted); }
.badge-accent  { background: var(--accent-soft); color: var(--tinta-acento); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-danger  { background: var(--danger-bg); color: var(--danger-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.nav-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(229,34,58,.5); }
.nav-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 1px 4px rgba(229,34,58,.5); }

.avatar { border-radius: 50%; flex: none; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 650; color: #fff; overflow: hidden;
  background: var(--neutral-500); user-select: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), var(--lift-1); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* As classes de tamanho (.av-40, .av-96...) saíram: o tamanho agora vai no
   estilo, direto de `avatar()`. Elas cobriam seis medidas e o código pedia
   quinze — nas outras nove a bolinha ficava com largura zero. */
.logo-sq { border-radius: 14px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; background: var(--veu-medio);
  color: var(--text-muted); overflow: hidden; box-shadow: var(--lift-1); }
/* Idem para os logotipos — `logo()` mede em px. Uma sobrou: a `.lg-40` do
   cartão de oportunidade sem empresa, que não passa por `logo()`. */
.lg-40{width:40px;height:40px;font-size:15px}
.divider { height: 1px; background: rgba(11,18,48,.08); border: 0; }

/* --------------------------------------------------------------------------
   13. PUBLICIDADE — declarada, nunca disfarçada de conteúdo
   ------------------------------------------------------------------------ */
.ad {
  position: relative; border-radius: var(--radius-window); overflow: hidden;
  box-shadow: var(--lift-3); border: 1px solid rgba(255,255,255,.5);
}
.ad-flag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  height: 22px; padding: 0 10px; border-radius: var(--radius-full);
  background: rgba(11,18,48,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  display: inline-flex; align-items: center; text-transform: uppercase;
}
.ad-body { padding: var(--space-8) var(--space-6) var(--space-6); }
.ad-1 { background: linear-gradient(135deg, #12103A 0%, #2A1E63 48%, #0E3B2E 100%); }
.ad-2 { background: linear-gradient(135deg, #1B1440 0%, #3A2578 100%); }
.ad h3 { color: #fff; font-size: 24px; line-height: 30px; font-weight: 750;
  letter-spacing: -.02em; }
.ad p { color: rgba(255,255,255,.76); font-size: 14px; line-height: 21px; margin-top: 8px; }
.ad-feats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
  margin-top: var(--space-5); }
.ad-feat { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 12px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 550; }
.ad-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-5);
  height: 46px; padding: 0 var(--space-5); border-radius: var(--radius-full);
  background: linear-gradient(180deg, #2BD07C, #0E9E63); color: #062;
  color: #04301F; font-weight: 750; font-size: 15px; box-shadow: var(--lift-2); }
.ad-cta:hover { text-decoration: none; filter: brightness(1.06); }

/* Faixa de marca — o banner do topo */
/* ---- COCKPIT ---------------------------------------------------------------
   Abertura do Feed. Era faixa decorativa + quatro cartões brancos, empilhados;
   virou um painel só, escuro, onde os números ACENDEM. Escuro não é estilo
   aqui: número claro sobre fundo escuro tem mais contraste do que número
   escuro sobre branco, e é o que faz o olho pousar neles primeiro.

   A luz é montada em três camadas — foco superior, brilho de borda e sombra
   de contato — porque uma sombra só achata; três dão volume. */
.cockpit {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-window);
  padding: var(--space-6) var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
  background: linear-gradient(128deg, #171233 0%, #241A55 46%, #0B1230 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 2px 4px rgba(11,18,48,.20), 0 26px 56px -18px rgba(11,18,48,.55),
              inset 0 1px 0 rgba(255,255,255,.16);
  color: #F4F4F8;
}
/* Foco de luz: entra por cima e à esquerda, como um refletor de estúdio. */
.cockpit-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 120% at 12% -20%, rgba(122,99,246,.50), transparent 62%),
    radial-gradient(50% 90% at 92% 0%, rgba(37,195,154,.20), transparent 64%),
    radial-gradient(90% 140% at 50% 130%, rgba(11,18,48,.55), transparent 60%); }
.cockpit-cab { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.cockpit-parte { color: rgba(244,244,248,.72); }
.cockpit-nome { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1; font-weight: 750;
  letter-spacing: -.03em; margin-top: 2px; color: #fff; }
.cockpit-lema { font-family: Georgia, "Times New Roman", serif; letter-spacing: .14em;
  text-transform: uppercase; font-size: clamp(11px, 1.1vw, 14px); font-weight: 350;
  white-space: nowrap; }

/* Os números. Linha única, separados por filete de luz — não por cartão.
   Cartão dentro de cartão é ruído; o filete basta para separar. */
.cockpit-nums { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-5);
  padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.12); }
.cknum { position: relative; min-width: 0; padding-left: var(--space-4); }
.cknum:first-child { padding-left: 0; }
.cknum::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent); }
.cknum:first-child::before { display: none; }
.cknum-n { display: block; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.05;
  font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: linear-gradient(150deg, #fff 20%, #C9BFFF);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cknum-r { display: block; margin-top: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(244,244,248,.78); }
.cknum-s { display: block; margin-top: 3px; font-size: 12px; line-height: 16px;
  color: rgba(244,244,248,.62); overflow: hidden; text-overflow: ellipsis; }
.cknum-s .kpi-up { color: #6FE3B0; font-weight: 700; }
/* O ponto dourado marca o que só existe porque a pessoa assina. */
.cknum-pro::after { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(232,197,107,.22); }
.selo-pro-claro { background: rgba(232,197,107,.16); color: var(--gold-300);
  border-color: rgba(232,197,107,.36); }

@media (max-width: 1023px) {
  .cockpit { padding: var(--space-5) var(--space-5) var(--space-4);
    margin-bottom: var(--space-4); border-radius: var(--radius-lg); }
  .cockpit-lema { display: none; }
  /* No celular os oito números do Pro não cabem em oito colunas. Viram quatro
     por linha, que é o limite antes de "67%" quebrar no meio. */
  .cockpit-nums { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3);
    margin-top: var(--space-4); padding-top: var(--space-4); row-gap: var(--space-4); }
  .cknum { padding-left: var(--space-3); }
  .cknum-n { font-size: 24px; }
  /* "PARA VOCÊ" quebrava em duas linhas e desalinhava a fileira inteira —
     uma coluna com duas linhas de rótulo empurra as outras três. */
  .cknum-r { font-size: 9.5px; letter-spacing: .04em; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* A terceira linha (o subtítulo) é o que estoura a altura no celular e é a
     menos necessária: o rótulo já diz o que o número é. */
  .cknum-s { display: none; }
}

.hero-band {
  border-radius: var(--radius-window); overflow: hidden; position: relative;
  background: linear-gradient(120deg, #14102B 0%, #241A55 50%, #0B1230 100%);
  padding: var(--space-10) var(--space-6); text-align: center;
  box-shadow: var(--lift-3);
}
.hero-band::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(122,99,246,.34), transparent 70%); }
.hero-band span { position: relative; z-index: 1; font-size: clamp(19px, 3.4vw, 34px);
  font-weight: 350; letter-spacing: .16em; text-transform: uppercase;
  font-family: Georgia, "Times New Roman", serif; }
.hb-1 { background: linear-gradient(90deg, #E8C56B, #F5DFA6);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-2 { background: linear-gradient(90deg, #4FC3A1, #A8E6CF);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-3 { background: linear-gradient(90deg, #B7A9F9, #8B5CF6);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-x { color: rgba(255,255,255,.5); }

/* --------------------------------------------------------------------------
   14. RAIL — widgets à direita
   ------------------------------------------------------------------------ */
/* A coluna é FIXA: ela fica parada enquanto o feed rola. Isso é bom — o
   contexto não some — mas cobra um preço: o que não cabe na altura da tela
   fica inalcançável para sempre, porque não há rolagem que o traga.

   Por isso ela tem altura máxima e rolagem PRÓPRIA. Em tela alta nada rola e
   ela se comporta como antes; em notebook de 13" o último bloco continua
   acessível em vez de ficar preso embaixo da dobra. A barra fica escondida
   para não cortar o vidro. */
/* O `top` tem que descontar a CHROME INTEIRA — barra de busca E doca — porque
   as duas são fixas no topo. Descontando só a barra, a coluna parava 73px
   acima do lugar certo e o primeiro widget deslizava por baixo da doca ao
   rolar: exatamente o que o dono viu. */
.rail { display: flex; flex-direction: column; gap: var(--space-3); position: sticky;
  /* `--chrome-h` é MEDIDO no navegador (app.js, medirChrome). A conta antiga
     somava topbar + doca e esquecia os respiros entre as duas: dava 164px
     para uma chrome de 185, e a coluna deslizava 21px POR BAIXO do menu ao
     rolar. Era exatamente isso que se via. O valor de reserva só vale no
     primeiro quadro, antes da medição. */
  top: calc(var(--chrome-h, 188px) + 16px);
  max-height: calc(100vh - var(--chrome-h, 188px) - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; padding-right: 2px; }
.rail::-webkit-scrollbar { display: none; }
/* Coluna flex COM teto de altura esmaga os filhos em vez de rolar: o padrão
   de um item flex é encolher. Sem isto, cada bloco ficava com metade da
   altura e o conteúdo saía cortado por dentro. */
.rail > * { flex: 0 0 auto; }

.widget { padding: var(--space-5); }
.widget h3 { font-size: 15px; font-weight: 700; margin-bottom: var(--space-3); }
/* Versão densa: mesma informação, menos ar. É o que fez os cinco blocos
   caberem na altura de uma tela em vez de seis não caberem. */
.widget-densa { padding: var(--space-4); }
.widget-densa h3 { font-size: 13.5px; margin-bottom: var(--space-2);
  display: flex; align-items: center; gap: 6px; }
.rail-linha { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rail-linha:hover { text-decoration: none; }
.rail-porque { padding-left: 42px; line-height: 1.35; }
.rail-mais { display: inline-block; margin-top: 8px; font-weight: 600; }
/* Faixa: uma linha, altura de um botão. Para o que é chamada, não conteúdo. */
.widget-faixa { display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-4); }
.widget-faixa .faixa-ico { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; flex: none; background: var(--preench-1); color: var(--gold-700); }
.widget-faixa b { display: block; font-weight: 700; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: var(--radius-full);
  flex: none; }
.date-mini { width: 40px; padding: 4px 0; }
.date-mini .dow { font-size: 9.5px; }
.date-mini .dom { font-size: 17px; line-height: 20px; }

.ring { --p: 67; width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--preench-2) 0); }
.ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--veu-solido); }
.ring span { position: relative; z-index: 1; font-size: 17px; font-weight: 750;
  font-variant-numeric: tabular-nums; }
.ring-sm { width: 62px; height: 62px; }
.ring-sm::after { inset: 6px; }
.ring-sm span { font-size: 14px; }

/* --------------------------------------------------------------------------
   15. MOBILE — topo e barra inferior
   ------------------------------------------------------------------------ */
.mtop { display: none; }
.bottom-nav { display: none; }

@media (max-width: 1023px) {
  .dock-wrap { display: none; }
  .topbar { display: none; }
  .shell { width: calc(100% - 24px); padding-bottom: calc(var(--bottomnav-h) + 40px); }

  /* Topo mobile: buscar à ESQUERDA, notificações à DIREITA, marca ao centro */
  .mtop {
    display: flex; align-items: center; gap: var(--space-3);
    position: sticky; top: 0; z-index: var(--z-sticky);
    margin: 0 -12px var(--space-4); padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 1px 12px rgba(11,18,48,.06);
  }
  .mtop .brand-word { font-size: 22px; }
  .mtop-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .mtop-btn { width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: var(--text-strong);
    background: var(--veu-medio); box-shadow: var(--lift-1); position: relative; }

  /* A BARRA DESCEU. Ela flutuava a 10px MAIS a área segura do aparelho — no
     iPhone com barra de gestos são 44px de ar embaixo, e a barra parecia solta
     no meio da tela. Agora ela encosta na área segura, que é o limite até onde
     dá para descer sem o dedo esbarrar no gesto de voltar do sistema. */
  .bottom-nav {
    display: flex; position: fixed; left: 12px; right: 12px;
    bottom: calc(2px + env(safe-area-inset-bottom, 0px) * 0.55);
    height: var(--bottomnav-h); z-index: var(--z-sticky);
    border-radius: var(--radius-xl);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.85);
  }
  .bottom-nav a, .bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; color: var(--text-subtle);
    font-size: 10px; font-weight: 600; min-height: 44px; position: relative;
    border-radius: var(--radius-md);
  }
  /* E O DESFOQUE EMBAIXO DELA. Entre a barra e a borda do celular passava
     conteúdo nítido, e a barra ficava recortada no meio do feed. Esta faixa
     borra o que passa por baixo e apaga para cima, para não virar uma segunda
     barra: o olho lê como profundidade, não como outro elemento.
     `z-index:-1` a põe atrás da barra, que tem fundo próprio. */
  .bottom-nav::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
    height: calc(22px + env(safe-area-inset-bottom, 0px));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent);
    mask-image: linear-gradient(to top, #000 45%, transparent);
    pointer-events: none;
  }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav a[aria-current="page"] { color: var(--accent); }
  .bottom-nav .nav-badge, .bottom-nav .nav-dot { position: absolute; top: 6px; left: 56%; }
  .nav-create { color: transparent !important; }
  .nav-create .plus {
    position: relative; width: 54px; height: 54px; margin-top: -24px; border-radius: 50%;
    background: linear-gradient(155deg, #A98BFF, #5A3FE0 58%, #3F27A8); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(90,63,224,.5), 0 14px 34px -8px rgba(90,63,224,.55),
                inset 0 1px 0 rgba(255,255,255,.5), 0 0 26px -4px rgba(122,99,246,.8);
  }
  .nav-create .plus::after {
    content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
    background: radial-gradient(closest-side, rgba(122,99,246,.8), transparent 70%);
    filter: blur(9px); animation: pulsarFab 2600ms var(--ease-in-out) infinite;
  }
  /* Com a bottom nav flutuante, o FAB sairia em cima dela */
  .fab { display: none; }
}
@media (min-width: 1024px) { .only-mobile { display: none !important; } }
@media (max-width: 1023px) {
  .only-desktop { display: none !important; }
  /* Um <span class="only-desktop"> dentro de texto corrido precisa voltar a
     ser inline quando aparece, senão ele quebra a linha do rótulo. */
  span.only-desktop { display: none !important; }
}
span.only-desktop { display: inline; }

/* --------------------------------------------------------------------------
   16. ESTADOS
   ------------------------------------------------------------------------ */
.skel { background: rgba(11,18,48,.09); border-radius: var(--radius-sm);
  animation: pulse 1500ms var(--ease-in-out) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.skel-line { height: 14px; } .skel-title { height: 20px; }
.state { text-align: center; padding: var(--space-12) var(--space-4); max-width: 420px;
  margin: 0 auto; }
.state .ico-lg { color: var(--neutral-400); margin: 0 auto var(--space-4); }
.state h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--space-2); }
.state p { color: var(--text-muted); font-size: 15px; margin-bottom: var(--space-5); }
.state-inline { border-radius: var(--radius-lg); background: var(--veu-medio);
  border: 1px solid var(--veu-tenue); padding: var(--space-6); text-align: center;
  box-shadow: var(--lift-1); }
.offline-bar { position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-toast);
  background: rgba(34,36,58,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; font-size: 13px; font-weight: 550; padding: var(--space-2) var(--space-4);
  text-align: center; }
body.is-offline { padding-top: 34px; }
.stale-note { display: flex; align-items: center; gap: var(--space-2);
  font-size: 13px; color: var(--text-subtle); padding: var(--space-2) 0; }

/* --------------------------------------------------------------------------
   17. SUPERFÍCIES FLUTUANTES
   ------------------------------------------------------------------------ */
.scrim { position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(11,18,48,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade var(--dur-standard) var(--ease-out); }
@keyframes fade { from { opacity: 0; } }
.modal {
  position: fixed; z-index: var(--z-modal); left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); overflow: auto;
  background: var(--veu-solido);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-window); box-shadow: var(--lift-4); padding: var(--space-6);
  animation: modalIn var(--dur-standard) var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.94); } }
.modal h2 { font-size: 21px; font-weight: 700; margin-bottom: var(--space-3); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end;
  margin-top: var(--space-6); }
@media (max-width: 639px) {
  .modal { top: auto; bottom: 0; left: 0; transform: none; width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 88vh;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    animation: rise var(--dur-standard) var(--ease-out); }
  .modal::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px;
    background: rgba(11,18,48,.18); margin: 0 auto var(--space-4); }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: 46px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  font-size: 15px; color: var(--text-strong); }
.menu-item:hover { background: rgba(11,18,48,.05); text-decoration: none; }
.menu-item.is-danger { color: var(--danger-text); }

.toasts { position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + 26px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--space-2); width: max-content;
  max-width: calc(100vw - 32px); }
@media (min-width: 1024px) { .toasts { left: auto; right: 26px; transform: none; bottom: 100px; } }
.toast { display: flex; align-items: center; gap: var(--space-4);
  background: rgba(34,36,58,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff; font-size: 14px; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); box-shadow: var(--lift-3);
  animation: rise var(--dur-standard) var(--ease-out); }
.toast button { color: #fff; font-weight: 700; text-decoration: underline;
  min-height: 32px; padding: 0 var(--space-1); }

/* --------------------------------------------------------------------------
   18. DOMÍNIO
   ------------------------------------------------------------------------ */
.opp-card { display: flex; flex-direction: column; gap: var(--space-3); }
.opp-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 13px;
  color: var(--text-subtle); flex-wrap: wrap; }
.opp-title { font-size: 18px; font-weight: 700; line-height: 25px; letter-spacing: -.01em;
  color: var(--text-strong); }
.opp-title:hover { color: var(--action-text); }
.opp-why { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px;
  color: var(--tinta-acento); background: rgba(122,99,246,.10);
  border: 1px solid rgba(122,99,246,.18);
  border-radius: var(--radius-md); padding: var(--space-3); }
.opp-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.date-block { flex: none; width: 60px; text-align: center; border-radius: var(--radius-md);
  padding: var(--space-2) 0; background: var(--veu-medio);
  border: 1px solid rgba(11,18,48,.08); box-shadow: var(--lift-1); }
.date-block .dow { font-size: 11px; font-weight: 700; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .06em; }
.date-block .dom { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }

.doc-section { padding: var(--space-8) 0; border-top: 1px solid rgba(11,18,48,.08); }
.doc-section:first-of-type { border-top: 0; }
.doc-section h2 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-5); }
.timeline { display: flex; flex-direction: column; gap: var(--space-6); }
.timeline-item { display: flex; gap: var(--space-4); }
.hero { display: flex; gap: var(--space-5); align-items: flex-start;
  padding: var(--space-6) 0 var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); min-height: 42px; align-items: center;
  flex-wrap: wrap; }
/* No mobile o avatar de 96 rouba largura demais e as ações caem uma por
   linha. Empilhar dá a cada botão a largura inteira. */
@media (max-width: 639px) {
  .hero { flex-direction: column; gap: var(--space-4); }
  .hero-actions .btn { flex: 1 1 auto; }
}

.msg-layout { display: grid; grid-template-columns: 340px 1fr; height: 640px; }
.msg-list { border-right: 1px solid rgba(11,18,48,.07); overflow-y: auto; }
.msg-thread { display: flex; flex-direction: column; overflow: hidden; }
.msg-row { display: flex; gap: var(--space-3); padding: var(--space-4);
  border-bottom: 1px solid rgba(11,18,48,.06); width: 100%; text-align: left; }
.msg-row:hover { background: var(--veu-leve); text-decoration: none; }
.msg-row[aria-current="true"] { background: rgba(122,99,246,.07); box-shadow: inset 3px 0 0 var(--acc-cheio); }
.msg-row.is-unread .msg-name { font-weight: 750; }
/* `min-height: 0` não é detalhe: sem ele, um filho `flex: 1` cresce até o
   tamanho do conteúdo em vez de rolar, e a conversa longa empurra o campo de
   escrever para fora da tela. */
.bubbles { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); }
.bubble { max-width: min(560px, 78%); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); font-size: 15px; line-height: 22px;
  box-shadow: var(--lift-1); }
.bubble-me { align-self: flex-end; background: var(--accent-soft); color: var(--tinta-acento);
  border-bottom-right-radius: var(--radius-sm); }
.bubble-them { align-self: flex-start; background: var(--veu-forte); color: var(--text-strong);
  border-bottom-left-radius: var(--radius-sm); }
.bubble-time { font-size: 11px; color: var(--text-subtle); margin-top: 4px;
  font-variant-numeric: tabular-nums; }
.thread-sep { display: flex; align-items: center; gap: var(--space-3); color: var(--text-subtle);
  font-size: 12px; font-weight: 550; margin: var(--space-3) 0; }
.thread-sep::before, .thread-sep::after { content: ""; flex: 1; height: 1px;
  background: rgba(11,18,48,.10); }
.composer { display: flex; gap: var(--space-3); align-items: flex-end; padding: var(--space-4);
  border-top: 1px solid var(--border-subtle); background: var(--veu-leve); }
.composer .textarea { min-height: 48px; max-height: 140px; }
.msg-mobile { height: calc(100vh - 150px); }
.msg-mobile > .msg-thread { height: 100%; }
.msg-mobile > .msg-list { height: 100%; overflow-y: auto; border-right: 0; }

/* Cabeçalho da conversa: o mesmo objeto no computador e no celular, para não
   existirem dois desenhos da mesma barra. `flex: none` porque ele é a única
   parte que NÃO rola — a conversa rola por baixo dele. */
.msg-thread-cab { display: flex; align-items: center; gap: var(--space-3); flex: none;
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised); }
.msg-cab-quem { display: flex; align-items: center; gap: var(--space-3);
  flex: 1; min-width: 0; color: inherit; }
.msg-cab-quem:hover { text-decoration: none; }
.msg-cab-quem b { display: block; font-weight: 600; }
.msg-cab-quem .t-caption { display: block; }
/* Conversa sem mensagem nenhuma: o rosto de quem está do outro lado, no meio
   do espaço vazio. É o que o Instagram mostra, e resolve a pergunta "abriu
   errado?" que um retângulo cinza deixa no ar. */
.thread-inicio { margin: auto; text-align: center; max-width: 320px; padding: 32px 16px; }

/* --------------------------------------------------------------------------
   CONVERSA EM TELA CHEIA NO CELULAR
   --------------------------------------------------------------------------
   Era uma caixa de altura calculada dentro da página, com a barra do topo
   grudada em cima e a barra flutuante de baixo por fora. Três alturas somadas
   à mão, e elas não fechavam: o topo saía pela borda de cima e o menu de baixo
   pousava em cima do campo de escrever.

   Aqui a conversa sai do fluxo e vira a janela inteira — cabeçalho fixo com a
   área segura do aparelho, bolhas rolando no meio, campo colado embaixo. O
   `100dvh` é o que acompanha a barra de endereço do navegador quando ela
   encolhe; `100vh` sozinho deixa o campo de escrever debaixo dela no iOS.
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  /* `--vv-h` e `--vv-top` vêm do `medirTeclado` (app.js) e são a altura que
     sobra depois do teclado. `100dvh` sozinho ignora o teclado: a conversa
     ficava com a altura toda, o campo de escrever ia para debaixo dele e o
     iOS rolava a página — a faixa branca com o cursor solto que ele viu.
     Sem `visualViewport`, as variáveis não existem e o `100dvh` continua
     valendo, que é o comportamento de antes. */
  .msg-mobile.has-thread {
    position: fixed; left: 0; right: 0; bottom: auto;
    top: var(--vv-top, 0px); z-index: calc(var(--z-sticky) + 1);
    height: var(--vv-h, 100dvh); background: var(--surface); }
  .msg-mobile.has-thread > .msg-thread { height: 100%; }
  .msg-mobile.has-thread .msg-thread-cab {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  /* Fundo SÓLIDO no campo de escrever: em tela cheia as bolhas passam por
     baixo dele ao rolar, e um véu translúcido deixa o texto de trás aparecer
     atrás do que está sendo digitado. */
  .msg-mobile.has-thread .composer,
  .msg-mobile.has-thread .chat-bruna-campo {
    background: var(--surface-raised);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  /* Com a conversa aberta, a barra de navegação sai. Ninguém troca de aba no
     meio de uma mensagem — e é ela que estava por cima do campo de escrever. */
  body.chat-cheio .bottom-nav { display: none; }
  body.chat-cheio .shell { padding-bottom: 0; }
  body.chat-cheio { overflow: hidden; }
}

.agenda-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(11,18,48,.07); align-items: flex-start; }
.agenda-time { flex: none; width: 58px; font-size: 14px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; text-align: right; padding-top: 2px; }
.agenda-accent { flex: none; width: 3px; align-self: stretch; border-radius: 2px;
  background: rgba(11,18,48,.16); min-height: 40px; }
.agenda-day-head { padding: var(--space-4) 0 var(--space-2); font-size: 12px; font-weight: 700;
  color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; }

.notif { display: flex; gap: var(--space-3); padding: var(--space-4);
  border-bottom: 1px solid rgba(11,18,48,.06); align-items: flex-start; }
.notif.is-new { background: rgba(122,99,246,.08); }
.notif-ico { flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--veu-forte); color: var(--text-muted); display: grid;
  place-items: center; box-shadow: var(--lift-1); }

/* Sem margem negativa: ela estourava a largura em 375 px. O CTA flutua
   dentro do próprio container, acima da barra inferior. */
.sticky-cta { position: sticky; bottom: calc(var(--bottomnav-h) + 16px);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--radius-xl);
  padding: var(--space-3); box-shadow: var(--lift-3);
  z-index: calc(var(--z-sticky) - 2); margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   19. PAINEL DE CENÁRIOS — só da demonstração
   ------------------------------------------------------------------------ */
.proto-fab { display: none; position: fixed; left: 16px; z-index: var(--z-toast);
  bottom: calc(var(--bottomnav-h) + 34px + env(safe-area-inset-bottom, 0px));
  height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: rgba(34,36,58,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; font-size: 12px; font-weight: 650; display: flex; align-items: center;
  gap: 6px; box-shadow: var(--lift-2); }
.proto-fab:hover { text-decoration: none; }
@media (min-width: 1024px) { .proto-fab { bottom: 26px; left: 26px; } }
.proto-panel { display: grid; gap: var(--space-5); }
.proto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: var(--space-2); }
.proto-grid button { border: 1px solid rgba(11,18,48,.12); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: 13px; text-align: left; min-height: 44px;
  background: var(--veu-leve); }
.proto-grid button[aria-pressed="true"] { border-color: var(--accent);
  background: rgba(122,99,246,.12); font-weight: 650; }

/* --------------------------------------------------------------------------
   20. MOTION — o cinematográfico desliga inteiro sob Reduce Motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .skel { opacity: .7; }
  .boot-word { animation: none; }
}

/* Sem suporte a backdrop-filter, o vidro vira superfície sólida — nunca some */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .window, .modal, .topbar, .bottom-nav, .mtop { background: var(--veu-solido); }
  .card { background: var(--veu-solido); }
}

/* ==========================================================================
   21. KPIs — cada área abre dizendo onde você está
   ========================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3);
  margin-bottom: var(--space-6); }
@media (max-width: 1023px) { .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kpi {
  position: relative; overflow: hidden;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--veu-medio);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--veu-tenue);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Luz que entra pelo canto — a "iluminação" da linguagem nova */
.kpi::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.9), transparent 55%); }
.kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  position: relative; z-index: 1; }
.kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; flex: none; box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.4); }
.kpi-rot { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subtle); }
.kpi-num { position: relative; z-index: 1; font-size: 30px; line-height: 34px; font-weight: 750;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-sub { position: relative; z-index: 1; font-size: 12px; color: var(--text-muted);
  margin-top: 2px; }
.kpi-up { color: var(--success-text); font-weight: 650; }

/* Cabeçalho de área com respiro e luz */
.area-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.area-head .sub { color: var(--text-muted); font-size: 15px; margin-top: 4px; }

/* ---- O cabeçalho de área no celular ------------------------------------
   Olho + título de 34px + três linhas de descrição comem 230px antes do
   primeiro cartão — e isso se repete em Oportunidades, Eventos, Empresas,
   Clientes e Financeiro. A descrição serve a quem chega pela primeira vez;
   a partir da segunda ela é um pedágio. Fica em duas linhas, com o resto
   acessível por toque, e o título desce para o tamanho de app.

   Detalhe: o clamp precisa de `display: -webkit-box`, e ele sobrescreve o
   `prose` (max-width em ch) — que no celular não fazia nada mesmo, porque a
   tela é mais estreita que a medida. */
@media (max-width: 767px) {
  .area-head { margin-bottom: var(--space-4); gap: var(--space-3); }
  .area-head h1.t-h1 { font-size: 23px; line-height: 29px; }
  .area-head .area-olho { font-size: 10px; }
  .area-head .sub {
    font-size: 14px; line-height: 20px; margin-top: 6px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .area-head .sub.aberta { -webkit-line-clamp: unset; }
  .area-mais { display: inline-block; margin-top: 2px; font-size: 13px;
    font-weight: 600; color: var(--action-text); }
}
@media (min-width: 768px) { .area-mais { display: none; } }

/* Bloco de recomendação do sistema */
.reco { display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(122,99,246,.16), rgba(139,92,246,.07));
  border: 1px solid rgba(122,99,246,.24); box-shadow: var(--lift-1); }
.reco-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid;
  place-items: center; color: #fff; background: linear-gradient(160deg, #9B7BF6, #5A3FE0);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.4); }

/* ==========================================================================
   22. FEED MOBILE — faixas de empresas e de conexões
   ========================================================================== */
.strip { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none;
  padding: 4px 0 8px; }
.strip::-webkit-scrollbar { display: none; }
.strip-item { flex: none; width: 60px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center; color: var(--text-strong); }
.strip-item:hover { text-decoration: none; }
.strip-item .nome { font-size: 10px; line-height: 13px; font-weight: 600;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--action-text); }
/* Anel de destaque, como story */
/* padding 5px com anel branco de 2px: sobram 3px de gradiente visível.
   Iguais, o branco cobriria o gradiente inteiro e o anel sumia. */
.strip-ring { width: 52px; height: 52px; border-radius: 50%; padding: 4px;
  background: linear-gradient(150deg, #9B7BF6, #5A3FE0 55%, #0E9E63);
  box-shadow: var(--lift-2); }
.strip-ring > * { width: 100%; height: 100%; border-radius: 50%;
  /* O anel de separação é a COR DA PÁGINA, não branco: ele existe para abrir
     um vão entre o aro colorido e o logotipo, e um vão tem a cor do fundo. */
  box-shadow: 0 0 0 2px var(--surface-page); }
.strip-ring .logo-sq { border-radius: 50%; background: var(--surface-hover);
  color: var(--text-muted); font-size: 13px; }
.strip-ring .avatar { font-size: 14px; }

/* ---- Faixa compacta do celular ---------------------------------------
   Uma faixa no lugar de duas. O aro encolheu de 52 para 44 e o rótulo de
   10 para 9,5 — a faixa inteira cabe em 96px, contra 220px das duas. */
.faixa-rede { margin-bottom: var(--space-4); }
.block-head-fino { margin-bottom: var(--space-2); }
.strip-compacta { gap: var(--space-2); padding: 2px 0 4px; }
.strip-compacta .strip-item { width: 54px; gap: 5px; }
.strip-compacta .strip-ring { width: 44px; height: 44px; padding: 3px; }
.strip-compacta .strip-item .nome { font-size: 9.5px; line-height: 12px; }
/* Empresa é quadrado arredondado; pessoa é círculo. A forma diz o que é
   antes de o nome ser lido. */
.strip-ring-emp { border-radius: 15px; }
.strip-ring-emp > * { border-radius: 12px; }

/* ---- Compositor de postagem -------------------------------------------
   Estilo Threads/X: o campo é a página, não uma caixinha. Avatar à esquerda,
   linha de escrita ampla, e as affordances embaixo — não um botão de enviar
   antes de existir o que enviar. */
.composer-card {
  display: block; width: 100%; text-align: left;
  padding: var(--space-5); border-radius: var(--radius-window);
  background: linear-gradient(180deg, var(--veu-solido), var(--veu-medio));
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 2px 6px rgba(11,18,48,.05),
              0 18px 40px -16px rgba(11,18,48,.24);
  transition: box-shadow var(--dur-standard) var(--ease-out),
              transform var(--dur-standard) var(--ease-out);
}
.composer-card:hover { transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 4px 10px rgba(11,18,48,.06),
              0 26px 56px -18px rgba(11,18,48,.30),
              0 0 0 1px rgba(122,99,246,.16); }
.composer-topo { display: flex; gap: var(--space-4); align-items: flex-start; }
.composer-fake { flex: 1; min-width: 0; padding-top: 8px;
  color: var(--text-muted); font-size: 19px; line-height: 26px; letter-spacing: -.01em; }
/* No escuro o cartão do compositor tem fundo próprio, mais claro que a página,
   e o cinza de legenda cai para 3,4:1 em cima dele. É o convite para publicar
   — a frase mais importante do topo do feed — então ela usa a tinta forte. */
:root[data-tema="escuro"] .composer-fake { color: var(--text-strong); opacity: .78; }
.composer-linha { height: 1px; background: var(--border-subtle);
  margin: var(--space-4) 0 var(--space-3); }
.composer-pe { display: flex; align-items: center; gap: var(--space-1); }
.composer-pe .opt { width: 38px; height: 38px; border-radius: 50%; display: grid;
  place-items: center; color: var(--text-subtle);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.composer-card:hover .composer-pe .opt { color: var(--action-text); }
.composer-pe .opt:hover { background: rgba(122,99,246,.12); }
.composer-send { margin-left: auto; height: 38px; padding: 0 var(--space-5); flex: none;
  border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 14px; font-weight: 700;
  background: linear-gradient(180deg, var(--violet-600), var(--action-primary));
  box-shadow: 0 2px 8px rgba(90,63,224,.4), inset 0 1px 0 rgba(255,255,255,.3); }

/* ==========================================================================
   23. NOME DO USUÁRIO — aparece uma vez, com animação
   ========================================================================== */
.saudacao { margin-bottom: var(--space-5); }
.saudacao .ola { font-size: 14px; color: var(--text-muted); font-weight: 550;
  opacity: 0; animation: subir 520ms var(--ease-out) 80ms forwards; }
.saudacao .nome {
  display: block; font-size: 30px; line-height: 38px; font-weight: 800;
  letter-spacing: -.03em; opacity: 0;
  background: linear-gradient(96deg, var(--violet-700), var(--violet-400) 50%, var(--violet-600));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: subir 620ms var(--ease-out) 200ms forwards,
             sheen 3200ms var(--ease-in-out) 900ms infinite;
}
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   24. PERFIL — capa, bio, currículo
   ========================================================================== */
.perfil-capa {
  position: relative; height: 168px; border-radius: var(--radius-window);
  background: linear-gradient(120deg, #14102B 0%, #34216E 45%, #0E3B2E 100%);
  overflow: hidden; box-shadow: var(--lift-3);
}
.perfil-capa::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 20% 0%, rgba(155,123,246,.5), transparent 60%),
              radial-gradient(60% 100% at 90% 100%, rgba(14,158,99,.35), transparent 60%); }
@media (max-width: 639px) { .perfil-capa { height: 132px; } }
/* Só o AVATAR sobe para dentro da capa. Antes o bloco inteiro subia -46px, e
   junto com ele o nome e o cargo — que iam parar em cima da capa escura, em
   tinta escura. O avatar montando na borda é o efeito desejado; o nome
   ilegível era o preço que ninguém pediu para pagar. */
.perfil-topo { padding: 0 var(--space-5); position: relative; z-index: 1; }
.perfil-ava { margin-top: -46px; }
.perfil-topo .avatar { box-shadow: 0 0 0 4px var(--surface-page), var(--lift-3); }
.perfil-stats { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.perfil-stat { text-align: left; }
.perfil-stat b { display: block; font-size: 20px; font-weight: 750;
  font-variant-numeric: tabular-nums; line-height: 26px; }
.perfil-stat span { font-size: 12px; color: var(--text-subtle); }

/* Bloco do currículo, com o consentimento explícito */
.cv-box { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  background: var(--veu-medio); border: 1px solid var(--veu-tenue);
  box-shadow: var(--lift-1); }
.cv-off { background: rgba(11,18,48,.04); border-style: dashed;
  border-color: rgba(11,18,48,.14); box-shadow: none; }

/* No celular as quatro abas dividem a linha, sem rolagem.

   Antes era uma tira que rolava na horizontal com o texto em `nowrap`. Só que
   ela rolava DENTRO de uma largura que já era a da tela: "Oportunidades"
   ficava cortada na borda direita e "Eventos" nem aparecia — e nada na tela
   dizia que havia mais coisa ali. Aba escondida é aba que não existe.

   Agora são quatro colunas iguais e a fonte encolhe com a tela (o `clamp`),
   então a palavra mais longa cabe em qualquer largura de celular em vez de a
   última aba sair pela direita. */
@media (max-width: 639px) {
  .pilltabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px; overflow: visible;
  }
  .pilltab {
    height: 42px; padding: 0 4px; border-radius: 12px;
    font-size: clamp(10.5px, 3.15vw, 13.5px);
    justify-content: center; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; min-width: 0;
  }
  /* Quando são só duas ou três, elas não precisam se espremer em quatro. */
  .pilltabs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pilltabs:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* A tira que ROLA de propósito (filtros longos) continua rolando. */
  .pilltabs-scroll { display: flex; overflow-x: auto; }
  .pilltabs-scroll .pilltab { font-size: 13.5px; padding: 0 var(--space-4); }
}

/* Barra de voltar do desktop. Fica dentro do conteúdo, não na chrome: ela
   pertence à página aberta, e some junto com ela. */
.voltar-linha { display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-5); }
.btn-voltar {
  display: inline-flex; align-items: center; gap: 7px; height: 38px;
  padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: var(--lift-1);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-voltar:hover { background: var(--veu-solido); color: var(--text-strong);
  transform: translateX(-2px); }
.btn-voltar .ico { flex: none; }
.voltar-onde { color: var(--text-subtle); }
@media (max-width: 1023px) { .voltar-linha { display: none; } }

/* Cabeçalho de bloco no mobile: com título longo, "Ver todas" quebrava junto
   e o par virava quatro linhas. Título menor e o link sem quebra resolvem. */
@media (max-width: 639px) {
  .block-head { align-items: center; }
  .block-head h2 { font-size: 17px; line-height: 23px; }
  .block-head a { white-space: nowrap; flex: none; }
}

/* ==========================================================================
   25. IDENTIDADE OFICIAL — materiais dos novos atalhos e o dourado
   ========================================================================== */
.tile-empresa { background: linear-gradient(160deg, #5C6FE8, #2B3F9E); }
.tile-salvos  { background: linear-gradient(160deg, #E8A85C, #B8701F); }
.tile-busca   { background: linear-gradient(160deg, #6FD7C4, #178F76); }
.tile-notif   { background: linear-gradient(160deg, #F0879B, #C2364F); }
.tile-config  { background: linear-gradient(160deg, #8E97AD, #4A5570); }
/* A Bruna é a única cor verde-WhatsApp da doca, e é de propósito: ela
   mora lá, e a cor é a pista mais barata de que aquilo abre uma conversa. */
.tile-bruna   { background: linear-gradient(160deg, #4FE39B, #128C7E); }

/* Botão dourado — reservado ao convite. Não é cor de plano, é cor de prêmio.
   Texto grafite sobre ouro dá 8.9:1; ouro com texto branco reprovaria AA. */
.btn-ouro {
  background: linear-gradient(180deg, #FBEFC4 0%, #E8C56B 42%, #C99C24 100%);
  color: #3A2C05; border: 1px solid rgba(138,106,21,.42);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
              0 2px 6px rgba(138,106,21,.28),
              0 8px 20px -6px rgba(201,156,36,.5);
  font-weight: 750;
}
.btn-ouro:hover { filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,
              0 3px 10px rgba(138,106,21,.34),
              0 14px 30px -8px rgba(201,156,36,.66); }
.btn-ouro .ico { color: #7A5C08; }

/* O widget do convite ganha um brilho quente para se destacar no rail */
.widget-ouro { position: relative; overflow: hidden; }
.widget-ouro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 90% at 88% 8%, rgba(232,197,107,.30), transparent 62%);
}
.widget-ouro h3 { color: var(--gold-700); }

/* Créditos: mesma família do dourado, para o par ler como um sistema */
.credits { background: linear-gradient(180deg, #FBEFC4, #E8C56B);
  border-color: rgba(138,106,21,.38); color: #3A2C05; }



/* Faixa de empresas no desktop: ícones maiores, com o contador de
   oportunidades abertas — é o que torna "acompanhar" acionável. */
.strip-lg { gap: var(--space-5); }
.strip-lg .strip-item { width: 86px; }
.strip-lg .strip-ring { width: 72px; height: 72px; padding: 5px; }
.strip-lg .strip-item .nome { font-size: 12px; line-height: 15px; }
.strip-item { position: relative; }
.strip-tag {
  position: absolute; top: -2px; right: 6px;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--violet-600), var(--action-primary));
  color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(90,63,224,.5), 0 0 0 2px rgba(255,255,255,.9);
}

/* A faixa de empresas acompanhadas não precisa da largura da coluna: com três
   ou quatro logos, o bloco cheio deixa dois terços de vazio à direita. */
@media (min-width: 1024px) {
  .bloco-empresas { width: fit-content; min-width: 340px; max-width: 100%; }
}

/* ==========================================================================
   26. FEED DE INTENÇÃO — necessidade, fechamento e o fim do feed
   ========================================================================== */
.nec-card { border-left: 3px solid transparent; }
/* Compatibilidade alta ganha a borda de identidade — sem número, sem score */
.nec-forte { border-left-color: var(--accent);
  box-shadow: var(--lift-2), 0 0 0 1px var(--glass-ring), -6px 0 24px -12px rgba(122,99,246,.55); }
.chip-casa { background: rgba(37,195,154,.14); border-color: rgba(37,195,154,.32);
  color: var(--success-text); font-weight: 650; }
.chip-casa .ico { color: #128F63; }

.fechamento { background: linear-gradient(135deg, rgba(37,195,154,.12), var(--veu-forte));
  border-color: rgba(37,195,154,.28); }
.fechamento .ico { color: var(--success-text); flex: none; }
/* Sobre a lavagem verde o cinza mais claro cai para 3,9:1. Dentro deste
   bloco o texto secundário sobe um degrau. */
.fechamento .subtle { color: var(--text-muted); }
.fech-par { display: flex; flex: none; }
.fech-par > *:last-child { margin-left: -12px; box-shadow: 0 0 0 2.5px var(--surface-raised); }

/* Fim do feed: dizer que acabou é o desenho, não um estado vazio */
.fim-feed { text-align: center; padding: var(--space-10) var(--space-5);
  border-radius: var(--radius-window); border: 1px dashed var(--border-default);
  background: var(--veu-tenue); }
.fim-feed > .ico { color: var(--success); }

/* "Seja Pro" — dourado, no lugar dos créditos */
.seja-pro {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full);
  background: linear-gradient(180deg, #FBEFC4 0%, #E8C56B 44%, #C99C24 100%);
  color: #3A2C05; font-weight: 750; font-size: 14px; white-space: nowrap;
  border: 1px solid rgba(138,106,21,.42);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
              0 2px 6px rgba(138,106,21,.26),
              0 8px 20px -6px rgba(201,156,36,.45);
  transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.seja-pro:hover { text-decoration: none; filter: brightness(1.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,
              0 3px 10px rgba(138,106,21,.32),
              0 14px 30px -8px rgba(201,156,36,.6); }
.seja-pro .ico { color: #7A5C08; }

/* Disponibilidade com prazo, no perfil */
.disponivel { display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-full);
  background: rgba(37,195,154,.14); border: 1px solid rgba(37,195,154,.3);
  color: var(--success-text); font-size: 13px; font-weight: 650; }
.disponivel .ico { color: var(--success-text); }

/* Item sem correspondência: continua explicado, mas sem o realce de
   recomendação — não pode se disfarçar do que não é. */
.opp-why-neutro { background: rgba(11,18,48,.045); border-color: rgba(11,18,48,.08);
  color: var(--text-muted); }

/* ==========================================================================
   27. SITE PÚBLICO — a terceira superfície
   ========================================================================== */
.public-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 16px rgba(11,18,48,.07);
  padding-top: env(safe-area-inset-top, 0px);
}
.public-top .inner, .public-pe .inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-6); max-width: var(--container-wide); margin: 0 auto;
}
.public-pe { margin-top: var(--space-16); border-top: 1px solid rgba(11,18,48,.08);
  background: var(--veu-leve); }
.public-pe .inner { padding: var(--space-6); }

/* ==========================================================================
   28. PLANOS E ASSINATURA
   ========================================================================== */
.planos-topo { text-align: center; padding: var(--space-8) 0 var(--space-10); }
/* `align-items: stretch` (o padrão) e não `start`: com `start` cada cartão
   terminava na altura do próprio conteúdo, e a fileira ficava com três
   rodapés em alturas diferentes. Agora os três têm a MESMA altura, e o que
   alinha as linhas de dentro é a estrutura do cartão — fileira do selo com
   espaço reservado, chamada com altura mínima e o pé colado embaixo. */
.planos-grade { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-5); align-items: stretch; }
@media (max-width: 1023px) { .planos-grade { grid-template-columns: minmax(0,1fr); } }

.plano {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8) var(--space-6); border-radius: var(--radius-window);
  background: var(--veu-forte);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--veu-tenue);
  box-shadow: var(--lift-2), 0 0 0 1px var(--glass-ring);
}
/* O plano em destaque sobe e ganha o dourado — é a decisão que queremos */
.plano-destaque {
  border-color: rgba(201,156,36,.42);
  box-shadow: var(--lift-4), 0 0 0 1px rgba(201,156,36,.28),
              0 0 60px -18px rgba(232,197,107,.7);
  transform: translateY(-10px);
}
@media (max-width: 1023px) { .plano-destaque { transform: none; } }
.plano-meu { border-color: rgba(122,99,246,.4); }
.plano-selo {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  height: 26px; padding: 0 14px; border-radius: var(--radius-full);
  background: linear-gradient(180deg, #FBEFC4, #E8C56B 46%, #C99C24);
  color: #3A2C05; font-size: 11px; font-weight: 750; letter-spacing: .04em;
  display: inline-flex; align-items: center; text-transform: uppercase;
  box-shadow: 0 4px 12px -2px rgba(201,156,36,.6);
}
.plano-nome { font-size: 15px; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-subtle); }
.plano-preco { display: flex; align-items: baseline; gap: 4px; }
.plano-preco .cifra { font-size: 18px; font-weight: 650; color: var(--text-muted); }
.plano-preco .valor { font-size: 42px; line-height: 46px; font-weight: 800;
  letter-spacing: -.04em; }
.plano-preco .por { font-size: 14px; color: var(--text-subtle); font-weight: 550; }
.plano-chamada { font-size: 15px; color: var(--text-muted); }
.plano-lista { list-style: none; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.plano-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
  line-height: 20px; }
.plano-lista .ico { color: var(--success); margin-top: 2px; }
.plano-destaque .plano-lista .ico { color: var(--gold-700); }
.plano-rodape { display: block; text-align: center; padding: 0 0 12px; }
/* A fileira do selo existe em TODO cartão, com ou sem selo: é ela que mantém
   os três preços na mesma linha. Sem ela, o cartão com "Mais escolhido"
   empurrava o próprio preço para baixo e os outros dois ficavam mais altos. */
.plano-marca { height: 26px; display: flex; justify-content: center; align-items: center;
  margin: -6px 0 2px; }
.plano-selo { position: static; transform: none; }
.plano-selo-meu { background: linear-gradient(180deg, #EAE6FD, #D6CEFB 60%, #B7A9F9);
  color: var(--violet-900); box-shadow: 0 4px 12px -3px rgba(122,99,246,.5); }
/* A chamada reserva TRÊS linhas — é o que a descrição mais longa do catálogo
   ocupa. Com duas, o cartão do Business empurrava a própria lista 28px para
   baixo e as três listas começavam em alturas diferentes. Reservar o espaço
   alinha sem cortar texto de ninguém: uma descrição maior faz aquele cartão
   crescer, e o pé continua colado embaixo, então os botões seguem juntos. */
.plano-chamada { min-height: 66px; line-height: 22px; }
/* O pé desce até o fim: é ele que põe os três botões na mesma linha, mesmo com
   listas de tamanhos diferentes. */
.plano-pe { margin-top: auto; padding-top: var(--space-4); }

/* A janela de assinatura: as três formas de pagar, uma embaixo da outra, com
   a explicação do que cada uma faz. "Cartão" e "Pix" não são a mesma compra —
   um renova sozinho, o outro é uma cobrança por mês. */
.modal-assinar, .modal-doc { max-width: 480px; }
.as-metodos { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.as-metodo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  cursor: pointer; }
.as-metodo:hover { background: var(--veu-leve); }
.as-metodo input { margin-top: 3px; flex: none; }
.as-metodo b { display: block; font-size: 14px; font-weight: 650; }
.as-metodo small { display: block; font-size: 12px; color: var(--text-muted); }
.as-metodo:has(input:checked) { border-color: var(--accent);
  background: var(--accent-softer); }

.assinatura-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  color: var(--text-strong); font-weight: 650; font-size: 14px; white-space: nowrap;
  box-shadow: var(--lift-1);
}
.assinatura-chip:hover { text-decoration: none; background: var(--veu-solido); }
.assinatura-chip .ico { color: var(--gold-700); }
.assinatura-chip.is-atrasada { background: var(--warning-bg);
  border-color: rgba(138,90,8,.3); color: var(--warning-text); }
.assinatura-chip.is-atrasada .ico { color: var(--warning-text); }

/* Cor dos módulos de gestão */
.tile-gestao { background: linear-gradient(160deg, #C9A24A, #8A6A15); }
.tile-fin    { background: linear-gradient(160deg, #3FC48A, #0B7A4D); }

/* ==========================================================================
   GESTÃO · FINANCEIRO · CRM
   O verde do Financeiro e o violeta do CRM são os mesmos do app atual
   (GMOD_COR): a cor do cartão é a cor do módulo, e a pessoa reconhece para
   onde vai antes de ler o nome.
   ========================================================================== */
.tile-crm { background: linear-gradient(160deg, #A78BFA, #6D28D9); }

.area-olho { font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--action-text); margin-bottom: 6px; }

.gmod { display: block; padding: 26px; }
.gmod-go { color: var(--action-text); font-weight: 650; margin-top: 20px; }
.gmod:hover .gmod-go .ico { transform: translateX(3px); }
.gmod-go .ico { transition: transform var(--dur-2) var(--ease-out); }

/* Fileira de escopo — os "tiles" do renderEscopoIconsFinanceiro */
.esc-fileira { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 20px; }
.esc-tile { display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-radius: var(--radius-3); border: 1px solid var(--border-subtle);
  background: var(--surface-raised); color: var(--text-primary);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.esc-tile > span { display: flex; flex-direction: column; line-height: 1.25; }
.esc-tile b { font-size: 13.5px; font-weight: 700; }
.esc-tile small { font-size: 11.5px; color: var(--text-secondary); }
.esc-tile .ico { color: var(--text-secondary); flex: 0 0 auto; }
.esc-tile:hover { border-color: var(--action-primary); }
.esc-tile.on { border-color: var(--action-primary);
  box-shadow: inset 0 0 0 1px var(--action-primary); }
.esc-tile.on .ico { color: var(--action-text); }
.esc-tile.esc-lock { opacity: .6; cursor: default; }
.esc-tile.esc-lock:hover { border-color: var(--border-subtle); }

.fin-resumo { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px; margin-top: 14px; }
.fin-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border-radius: var(--radius-3); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); }
.fin-kpi .t-display { font-size: 26px; line-height: 1.1; }
.val-pos { color: var(--success-text); }
.val-neg { color: var(--danger-text, #B42318); }

.pilltabs-scroll { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.pilltabs-scroll::-webkit-scrollbar { display: none; }
.pilltabs-scroll .pilltab { white-space: nowrap; flex: 0 0 auto; }

.lanc { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.lanc:last-child { border-bottom: 0; }
.lanc-dia { flex: 0 0 46px; color: var(--text-secondary); }

.lead-row { padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.lead-row:last-child { border-bottom: 0; }
.lead-wpp { display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; flex: 0 0 auto; color: var(--success-text);
  background: rgba(37,211,102,.12); }
.lead-wpp:hover { background: rgba(37,211,102,.22); }
/* Tinta sobre lavagem de acento: --action-text é medido contra o FUNDO DA
   PÁGINA, e sobre a lavagem violeta ele cai para 4,4:1. --tinta-acento é o
   token feito para este caso, e inverte junto com o tema. */
.badge-rede { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: rgba(90,63,224,.12); color: var(--tinta-acento); vertical-align: middle; }

/* ==========================================================================
   BRUNA IA — verde do WhatsApp, o mesmo do app atual (#25D366 / #128C7E)
   ========================================================================== */
.bruna-card { display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-4);
  border: 1px solid rgba(37,211,102,.34); background: rgba(37,211,102,.07);
  color: var(--text-primary);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.bruna-card:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(37,211,102,.5); }
.bruna-card.compacta { margin-top: 0; padding: 12px 14px; }
.bruna-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 13px; color: #fff;
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 6px 16px rgba(37,211,102,.35); }
.bruna-card b { display: block; font-size: 14.5px; font-weight: 800; color: var(--success-text); }
.bruna-card small { display: block; font-size: 11.5px; color: var(--text-secondary);
  line-height: 1.4; }
.bruna-seta { color: var(--success-text); flex: 0 0 auto; }

.widget-bruna { border-color: rgba(37,211,102,.3); }
.bruna-olho { display: flex; align-items: center; gap: 7px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--success-text); margin-bottom: 8px; }
.bruna-dot { width: 7px; height: 7px; border-radius: 50%; background: #25D366;
  box-shadow: 0 0 8px #25D366; }
.bruna-tit { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.bruna-tit b { color: var(--success-text); }
.bruna-atalhos { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.bruna-atalho { font-size: 12px; padding: 7px 11px; border-radius: 20px;
  border: 1px dashed rgba(37,211,102,.5); color: var(--text-secondary);
  background: rgba(37,211,102,.05); }
.bruna-atalho:hover { text-decoration: none; color: var(--success-text);
  border-style: solid; background: rgba(37,211,102,.11); }
/* Na coluna fixa a Bruna vira um cartão de convite, não uma demonstração:
   um exemplo, título menor e o botão logo abaixo. */
.widget-densa.widget-bruna .bruna-tit { font-size: 15px; margin-bottom: 4px; }
.widget-densa .bruna-atalhos { margin: 9px 0; }
/* No rail o título do evento fica em UMA linha: duas linhas por evento
   custavam 40px cada, e é altura que o bloco seguinte perde. */
.rail .clamp-2 { -webkit-line-clamp: 1; }
.btn-wpp { background: linear-gradient(135deg, #25D366, #128C7E); color: #04120b;
  border: none; font-weight: 800; }
.btn-wpp:hover { filter: brightness(1.05); }
.btn-wpp .ico { color: #04120b; }

.fab-bruna { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 12px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
  color: #04120b; background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.7);
  animation: fabIn var(--dur-3) var(--ease-out) both; }
.fab-bruna:hover { text-decoration: none; transform: translateY(-1px); }

/* ==========================================================================
   QUEM VIU SEU PERFIL
   ========================================================================== */
.upsell-card { border: 1px dashed rgba(138,106,21,.45);
  background: linear-gradient(180deg, rgba(251,239,196,.5), var(--surface-raised)); }
.upsell-tit { display: flex; align-items: center; gap: 8px; font-size: 15px;
  font-weight: 750; margin-bottom: 6px; }
.upsell-tit .ico { color: var(--gold-700); flex: 0 0 auto; }
.upsell-card .btn { margin-top: 14px; }

/* O borrão do Free é decorativo: não há nome nenhum embaixo dele, porque o
   servidor não manda identidade para quem não pode ver. */
.viu-borrado { display: flex; flex-direction: column; gap: 12px; margin: 14px 0;
  filter: blur(5px); opacity: .55; user-select: none; }
.viu-fake { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 6px; align-items: center; }
.viu-ava { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%;
  background: var(--neutral-300, #C9CAD2); }
.viu-l1 { height: 11px; width: 46%; border-radius: 99px; background: var(--neutral-300, #C9CAD2); }
.viu-l2 { height: 9px;  width: 30%; border-radius: 99px; background: var(--surface-sunken); }

.barra { height: 8px; border-radius: 99px; background: var(--surface-sunken);
  overflow: hidden; margin-top: 12px; }
.barra > span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--violet-600, #6B4FE8), var(--action-primary)); }

@media (max-width: 767px) {
  .fin-resumo { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Painéis de alturas diferentes lado a lado: cada um fica com a sua, em vez de
   o mais curto esticar até o rodapé do mais alto. */
.grid-topo { align-items: start; }

/* ==========================================================================
   AURORA — a linguagem premium do app atual, trazida para esta camada.
   ----------------------------------------------------------------------------
   O sistema inteiro é UMA variável: `--acc`. Cada ambiente a redefine no
   `<main data-mod="…">`, e todo cartão, anel, brilho e gráfico lê dali. É o
   mesmo mecanismo do `#main[data-mod=…]` do legado: entrar no Financeiro deixa
   a tela verde, entrar no CRM deixa violeta, sem um único componente saber
   disso. `--acc` é primitivo de ambiente, não de componente — a regra de
   dependência do DSY-27 continua de pé.
   ========================================================================== */
/* Duas famílias, e a distinção é a razão de a coisa ser acessível:
     --acc / --acc2 / --acc-glow  → LUZ. Halo, anel, traço de gráfico, fundo de
        cartão escuro. Nunca carregam texto, então o contraste não se aplica.
     --acc-ink                    → TINTA. Toda vez que a cor vira texto sobre
        claro ou preenchimento com texto branco por cima. Cada valor abaixo foi
        medido contra o branco e passa AA (≥ 4,5:1) — os números estão ao lado.
   Duas cores de identidade falhavam como tinta e por isso têm um par escuro:
   o verde da Rede (#0E9E63, 3,45:1) e o laranja das Mensagens (#E06A2F,
   3,35:1). A luz continua com o tom claro; só a tinta escurece. */
/* O `:root` entra junto com o `[data-mod]` porque nem tudo vive dentro do
   <main>: o modal, o toast e o leque do "+" são pendurados no <body>. Sem o
   valor na raiz, `var(--acc-cheio)` lá dentro não resolve para nada — e um
   `background` que não resolve some, deixando texto branco sobre branco. Foi
   o que aconteceu com os dias da semana no formulário de rotina. */
:root,
[data-mod] {
  --acc:      #5A3FE0;
  --acc2:     #A78BFA;
  --acc-ink:  #5A3FE0;   /* 6,52:1 — TINTA: a cor quando vira texto */
  --acc-cheio:#5A3FE0;   /* PREENCHIMENTO: a cor quando é fundo de texto branco.
                            Nasce igual à tinta porque contraste é simétrico —
                            o que lê bem sobre branco recebe branco bem. Mas ela
                            NÃO inverte no tema escuro, e a tinta inverte: por
                            isso são dois tokens e não um. */
  --acc-soft: rgba(90,63,224,.10);
  --acc-glow: rgba(90,63,224,.30);
}
[data-mod="financeiro"] { --acc:#0B7A4D; --acc2:#3FC48A; --acc-ink:#0B7A4D; --acc-cheio:#0B7A4D; /* 5,38 */ --acc-soft:rgba(11,122,77,.10);  --acc-glow:rgba(63,196,138,.34); }
[data-mod="crm"]        { --acc:#6D28D9; --acc2:#A78BFA; --acc-ink:#6D28D9; --acc-cheio:#6D28D9; /* 7,10 */ --acc-soft:rgba(109,40,217,.10); --acc-glow:rgba(167,139,250,.36); }
[data-mod="gestao"]     { --acc:#8A6A15; --acc2:#E8C56B; --acc-ink:#8A6A15; --acc-cheio:#8A6A15; /* 5,06 */ --acc-soft:rgba(138,106,21,.10); --acc-glow:rgba(232,197,107,.36); }
[data-mod="oportunidades"] { --acc:#3F55E0; --acc2:#6B8BF6; --acc-ink:#3F55E0; --acc-cheio:#3F55E0; /* 5,85 */ --acc-soft:rgba(63,85,224,.10); --acc-glow:rgba(107,139,246,.34); }
[data-mod="rede"]       { --acc:#0E9E63; --acc2:#4FC3A1; --acc-ink:#0A6E45; --acc-cheio:#0A6E45; /* 6,31 */ --acc-soft:rgba(14,158,99,.10);  --acc-glow:rgba(79,195,161,.34); }
[data-mod="empresas"]   { --acc:#2B3F9E; --acc2:#5C6FE8; --acc-ink:#2B3F9E; --acc-cheio:#2B3F9E; /* 9,10 */ --acc-soft:rgba(43,63,158,.10);  --acc-glow:rgba(92,111,232,.34); }
[data-mod="eventos"]    { --acc:#6B3FD0; --acc2:#9B7BF0; --acc-ink:#6B3FD0; --acc-cheio:#6B3FD0; /* 6,47 */ --acc-soft:rgba(107,63,208,.10); --acc-glow:rgba(155,123,240,.34); }
[data-mod="mensagens"]  { --acc:#E06A2F; --acc2:#F0A35E; --acc-ink:#A8481A; --acc-cheio:#A8481A; /* 5,82 */ --acc-soft:rgba(224,106,47,.10); --acc-glow:rgba(240,163,94,.34); }
[data-mod="agenda"]     { --acc:#D62F63; --acc2:#F06A8B; --acc-ink:#B82551; --acc-cheio:#B82551; /* 6,14 */ --acc-soft:rgba(214,47,99,.10);  --acc-glow:rgba(240,106,139,.34); }
[data-mod="meu-loob"]   { --acc:#3A3B47; --acc2:#7A8AA0; --acc-ink:#3A3B47; --acc-cheio:#3A3B47; /* 11,07 */ --acc-soft:rgba(58,59,71,.10);  --acc-glow:rgba(122,138,160,.32); }

/* ---- Grade bento: hero grande + satélites, com entrada escalonada -------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--space-4); grid-auto-flow: dense; margin-bottom: var(--space-6); }
.b-2 { grid-column: span 2; } .b-3 { grid-column: span 3; } .b-4 { grid-column: span 4; }
/* TRÊS EM UMA LINHA.
   `.bento-3` já era usada pelas abas de Investimentos e Dívidas e não existia
   no CSS: os três cards de número caíam empilhados como blocos soltos. Ela é a
   irmã de `.bento` para quando o conteúdo é TRÊS — três dentro de `.bento`,
   que tem quatro colunas, deixa um quarto de linha em branco, exatamente o
   que o dono não quer ver. Só 3 colunas ou 1: duas traria a sobra de volta. */
.bento-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 699px) { .bento-3 { grid-template-columns: minmax(0,1fr); } }
.b-tall { grid-row: span 2; }
.bento > * { animation: bentoRise .55s cubic-bezier(.2,.75,.25,1) both; }
.bento > *:nth-child(1){animation-delay:.02s} .bento > *:nth-child(2){animation-delay:.07s}
.bento > *:nth-child(3){animation-delay:.12s} .bento > *:nth-child(4){animation-delay:.17s}
.bento > *:nth-child(5){animation-delay:.22s} .bento > *:nth-child(6){animation-delay:.27s}
.bento > *:nth-child(7){animation-delay:.32s} .bento > *:nth-child(8){animation-delay:.37s}
@keyframes bentoRise { from { opacity: 0; transform: translateY(16px) scale(.985); }
                       to   { opacity: 1; transform: none; } }

/* ---- O cartão ----------------------------------------------------------- *
   Três camadas de luz: o anel de gradiente no `::before` (máscara xor, para a
   borda receber cor sem pintar o miolo), o halo radial do `.card-glow` no canto
   e o brilho especular que entra pelo topo esquerdo. */
.card3d { position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 22px 24px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--veu-solido), var(--veu-forte));
  -webkit-backdrop-filter: blur(18px) saturate(122%); backdrop-filter: blur(18px) saturate(122%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out); }
.card3d::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; background: linear-gradient(150deg, var(--acc-glow), transparent 46%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; opacity: .9; pointer-events: none; }
.card3d::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.85), transparent 55%); }
a.card3d, button.card3d { text-align: left; color: inherit; font: inherit; cursor: pointer; }
.card3d:hover { transform: translateY(-4px);
  box-shadow: 0 34px 64px -30px rgba(20,16,43,.42), 0 0 0 1px var(--acc-glow),
              inset 0 1px 0 rgba(255,255,255,.95); }
a.card3d:hover, button.card3d:hover { text-decoration: none; }
.card-glow { position: absolute; right: -34px; bottom: -46px; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(closest-side, var(--acc-glow), transparent 70%);
  filter: blur(22px); opacity: .75; pointer-events: none; }

/* O hero é escuro. É a única superfície escura do produto, e existe para o
   número principal ter contra o que brilhar. */
.card3d.hero-card { color: #F4F4F8; border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.13), transparent 58%),
    linear-gradient(150deg, var(--acc), #14102B 68%);
  box-shadow: 0 30px 64px -30px rgba(12,9,32,.75), inset 0 1px 0 rgba(255,255,255,.14); }
.hero-card::after { background: radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.14), transparent 55%); }
.hero-card .card-eyebrow, .hero-card .card-lbl, .hero-card .card-foot { color: rgba(244,244,248,.66); }
.hero-card .card-glow { opacity: 1; }

.card-eyebrow { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--text-subtle); }
.card-big { position: relative; z-index: 1; margin: 12px 0 4px;
  font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fff, var(--acc2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-num { position: relative; z-index: 1; margin-top: 10px; font-size: 30px; line-height: 1.05;
  font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.card-lbl  { position: relative; z-index: 1; margin-top: 3px; font-size: 11.5px;
  color: var(--text-muted); }
.card-foot { position: relative; z-index: 1; margin-top: auto; padding-top: 12px;
  font-size: 11.5px; color: var(--text-muted); }
.card3d .card-head { position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.card3d .card-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.card3d .corpo { position: relative; z-index: 1; }

.pill { display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc-ink); }
.hero-card .pill { background: rgba(255,255,255,.14); color: #fff; }

/* ---- Gráficos ----------------------------------------------------------- */
.spark { display: block; position: relative; z-index: 1; width: 100%; height: 44px; margin-top: 12px; }
.spark path.line { stroke-dasharray: 1; animation: sparkDraw 1.1s var(--ease-out) forwards; }
@keyframes sparkDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.barsvg rect { transform-origin: bottom; animation: barGrow .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .bento > *, .spark path.line, .barsvg rect { animation: none !important; }
}
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .b-3, .b-4 { grid-column: span 2; }
  .b-tall { grid-row: auto; }
}
@media (max-width: 559px) {
  .bento { grid-template-columns: minmax(0,1fr); }
  .b-2, .b-3, .b-4 { grid-column: span 1; }
}

/* ---- Linha de KPI: sempre UMA linha ------------------------------------- *
   `--n` vem do JS com a contagem real, então a grade acompanha quatro ou oito
   sem uma media query por número. A variante densa encolhe tipografia e ícone
   em vez de quebrar a fileira. */
.kpis { grid-template-columns: repeat(var(--n, 4), minmax(0,1fr)); }
.kpis-densa { gap: 10px; }
.kpis-densa .kpi { padding: 14px 15px; }
.kpis-densa .kpi-top { gap: 7px; margin-bottom: 8px; }
.kpis-densa .kpi-ico { width: 24px; height: 24px; border-radius: 7px; }
.kpis-densa .kpi-ico .ico { width: 13px; height: 13px; }
.kpis-densa .kpi-rot { font-size: 9.5px; letter-spacing: .05em; }
.kpis-densa .kpi-num { font-size: 25px; line-height: 28px; }
.kpis-densa .kpi-sub { font-size: 11px; }
@media (max-width: 1279px) { .kpis, .kpis-densa { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1023px)  { .kpis, .kpis-densa { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- Barra de proporção ------------------------------------------------- */
.prog-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.prog-top span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-secondary); }
.prog-top span:last-child { flex: none; font-weight: 650; }
.barra > span { background: linear-gradient(90deg, var(--acc), var(--acc2)); }

/* A fileira de empresas agora vive dentro de um card3d */
.card3d .strip { position: relative; z-index: 1; }
.card3d .card-head .t-small { color: var(--acc-ink); font-weight: 650; }

/* Dentro do hero escuro o texto do rodapé precisa do contraste do fundo */
.hero-card .card-foot a { color: var(--acc2); }

/* Barra de proporção: duas partes de um todo, com legenda. Serve onde um
   gráfico de linha não teria o que contar. */
.prop { position: relative; z-index: 1; display: flex; height: 10px; margin-top: 16px;
  border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.14); }
.prop-a { background: linear-gradient(90deg, var(--acc2), #fff); }
.prop-b { background: rgba(255,255,255,.26); }
.prop-leg { position: relative; z-index: 1; display: flex; gap: 16px; margin-top: 10px; }
.prop-leg span { display: inline-flex; align-items: center; gap: 6px; }
.prop-leg i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pt-a { background: var(--acc2); } .pt-b { background: rgba(255,255,255,.34); }

/* Rótulo de KPI em duas palavras quebrava a linha e desalinhava os números da
   fileira. A altura do topo é reservada para duas linhas: o rótulo quebra à
   vontade e todo número continua começando na mesma altura. */
.kpis-densa .kpi-top { min-height: 34px; align-items: flex-start; }
.kpis-densa .kpi-rot { line-height: 1.25; }

/* Último item da fileira de empresas: a porta para seguir mais */
.strip-mais .strip-ring { border-style: dashed; border-color: var(--border-strong, #C9CAD2);
  background: transparent; color: var(--text-subtle);
  display: grid; place-items: center; }
.strip-mais:hover .strip-ring { border-color: var(--acc-ink); color: var(--acc-ink); }
.strip-mais .nome { color: var(--text-subtle); }

/* ==========================================================================
   A LINGUAGEM VALE PARA O PROJETO INTEIRO
   ----------------------------------------------------------------------------
   As superfícies que já existiam — janela, cartão, KPI — passam a beber do
   mesmo `--acc` do ambiente. Não é um tema novo por cima: é a mesma variável
   que o `.card3d` usa, então entrar no Financeiro esverdeia a tela inteira e
   entrar no CRM a deixa violeta, sem nenhum componente saber onde está.
   ========================================================================== */

/* Anel de luz na quina superior, na cor do ambiente */
.window::after, .card::after, .kpi::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; background: linear-gradient(150deg, var(--acc-glow), transparent 44%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; opacity: .8; pointer-events: none;
}
.card, .kpi { position: relative; overflow: hidden; }

/* Hover com a mesma física do card3d: sobe 2px e o anel acende */
.card-interactive:hover, .widget:hover {
  box-shadow: var(--lift-2), 0 0 0 1px var(--acc-glow);
}
.window:hover { box-shadow: var(--lift-3), 0 0 0 1px var(--acc-glow); }
.window { transition: box-shadow var(--dur-3) var(--ease-out); }

/* Detalhes que eram violeta fixo passam a seguir o ambiente */
/* PREENCHIMENTO, não tinta: aqui a cor é o fundo e o texto é branco por
   cima. --acc-ink inverte no tema escuro (vira a versão clara) e deixaria
   branco sobre lavanda. --acc é saturado nos dois temas. */
.pilltab[aria-selected="true"] { background: var(--acc-cheio); border-color: transparent; }
.area-olho { color: var(--acc-ink); }
.ring { --ring-cor: var(--acc-ink); }
.reco-ico { color: var(--acc-ink); }
.kpi-num { color: var(--text-primary); }

/* ==========================================================================
   O PAINEL DE QUEM ASSINA
   ----------------------------------------------------------------------------
   O dourado é o único lugar do produto onde ele significa alguma coisa: marca
   o que a assinatura pagou. Usado em qualquer outro canto, vira decoração e
   para de comunicar.
   ========================================================================== */

/* O "+" dourado. O ícone é GRAFITE, não branco, e isso não é gosto: branco
   sobre o dourado claro dá 1,31:1 — ilegível. Grafite dá de 7,68:1 (na ponta
   escura) a 14,04:1 (na clara). */
.fab-pro {
  color: #14102B;
  background: linear-gradient(155deg, #FBEFC4, #E8C56B 52%, #C9A24A);
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.75),
              0 0 34px -6px rgba(232,197,107,.85);
}
.fab-pro::after { background: radial-gradient(closest-side, rgba(232,197,107,.85), transparent 72%); }
.fab-pro:hover { box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.85),
                             0 0 44px -4px rgba(232,197,107,.95); }

/* Selo no alto da faixa do hero. Dourado CLARO, porque o fundo é escuro:
   #F5DFA6 dá 14,04:1 ali, e o #8A6A15 daria 3,65:1. */
.hero-pro { box-shadow: var(--lift-3), 0 0 0 1px rgba(232,197,107,.34); }
.hero-pro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%, rgba(232,197,107,.28), transparent 62%);
}
/* Precisa ser `.hero-band .selo-pro` e não só `.selo-pro`: a regra
   `.hero-band span` é mais específica (classe + tipo) e venceria o
   `position`, jogando o selo para dentro do texto centralizado. */
.hero-band .selo-pro {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  font-family: inherit;
  color: #F5DFA6; background: rgba(232,197,107,.14);
  border: 1px solid rgba(232,197,107,.42);
}
.hero-band .selo-pro .ico { width: 12px; height: 12px; }

/* A FAIXA DOURADA DA ASSINATURA saiu daqui junto com o `faixaPro()` do app.js.
   Ela mostrava "viram seu perfil · aparições em buscas · conexões" logo abaixo
   do painel — os mesmos três números que o painel já dava, num segundo
   desenho. Ele pediu para tirar; a função tinha só dois chamadores e os dois
   eram o feed, então nada mais aponta para `.faixa-pro` nem para `.fp-*`.
   Levar o CSS junto é o que impede a próxima pessoa de achar que a faixa
   ainda existe em algum lugar. */

/* O ponto dourado nos KPIs que só existem com assinatura */
.kpi-pro { border-color: rgba(201,162,74,.42); }
.kpi-pro::before { background: linear-gradient(150deg, rgba(232,197,107,.5), transparent 46%); }
/* O ponto vai no rodapé, não no topo: em 121px de largura, "PUBLICADAS" é uma
   palavra que não quebra e passa por baixo de qualquer coisa no canto de cima.
   Embaixo, os subtítulos são curtos ("no ar", "sem teto") e sobra espaço. */
.kpi-selo { position: absolute; bottom: 12px; right: 12px; z-index: 2;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(180deg, #FBEFC4, #C9A24A);
  box-shadow: 0 0 0 2px rgba(232,197,107,.24); }
.kpi-pro .kpi-sub { padding-right: 16px; }

/* O "+" dourado também no celular. Precisa entrar na mesma media query do
   `.nav-create`, senão a regra base (que só existe abaixo de 1024px) vence. */
@media (max-width: 1023px) {
  .nav-create-pro .plus {
    color: #14102B;
    background: linear-gradient(155deg, #FBEFC4, #E8C56B 52%, #C9A24A);
    box-shadow: 0 6px 16px rgba(201,162,74,.5), 0 14px 34px -8px rgba(201,162,74,.55),
                inset 0 1px 0 rgba(255,255,255,.8), 0 0 26px -4px rgba(232,197,107,.85);
  }
  .nav-create-pro .plus::after {
    background: radial-gradient(closest-side, rgba(232,197,107,.85), transparent 72%);
  }
}

/* ==========================================================================
   SELOS DE VERIFICAÇÃO
   Violeta na PESSOA que assina o Pro, verde na EMPRESA verificada no Business.
   Alinhado ao texto pelo baseline, com uma folga à esquerda — colado no nome
   ele lê como pontuação, e longe demais lê como ícone de outra coisa.
   ========================================================================== */
/* O tamanho subiu: o selo é a marca de quem assina, e em 17px ele lia como
   pontuação do nome em vez de crachá. */
.selo { display: inline-block; width: 20px; height: 20px; margin-left: 7px;
  vertical-align: -4px; flex: none; }
.t-h1 .selo { width: 29px; height: 29px; margin-left: 10px; vertical-align: -4px; }
.t-h2 .selo { width: 24px; height: 24px; margin-left: 8px; vertical-align: -4px; }
.t-small .selo, .t-caption .selo { width: 16px; height: 16px; margin-left: 5px; vertical-align: -3px; }
/* No nome do perfil o selo acompanha a letra: o nome é `clamp(24px, 3vw, 34px)`
   e um tamanho fixo ficaria pequeno no computador e grande no celular. */
.perfil-nome .selo { width: .84em; height: .84em; margin-left: .28em; vertical-align: -.1em; }
/* Dentro da bolha do comentário o nome e o texto correm na mesma linha: sem
   uma folga do outro lado, o selo cola na primeira palavra do comentário. */
.pub-com-bolha .selo { width: 16px; height: 16px; margin: 0 6px 0 3px; vertical-align: -3px; }
.pub-citado-cab .selo { width: 16px; height: 16px; margin-left: 0; vertical-align: -3px; }

/* ==========================================================================
   BUSINESS — o verde é a cor do painel da empresa
   ========================================================================== */
[data-mod="business"] { --acc:#0E7A52; --acc2:#4FC39A; --acc-ink:#0A6144; --acc-cheio:#0A6144; /* 7,3:1 */
  --acc-soft:rgba(14,122,82,.10); --acc-glow:rgba(79,195,154,.34); }

/* A porta: duas escolhas, e só isso na tela */
.porta-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-8); }
.porta-cards { display: grid; grid-template-columns: repeat(2, minmax(0,340px));
  gap: var(--space-6); }
.porta-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 34px 32px 28px; border-radius: 26px; color: inherit;
  background: linear-gradient(160deg, var(--veu-solido), var(--veu-forte));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.porta-card:hover { text-decoration: none; transform: translateY(-5px);
  box-shadow: 0 36px 68px -30px rgba(20,16,43,.4); }
.porta-brilho { position: absolute; right: -50px; bottom: -60px; width: 230px; height: 230px;
  border-radius: 50%; filter: blur(26px); pointer-events: none; }
.porta-social .porta-brilho { background: radial-gradient(closest-side, rgba(122,99,246,.42), transparent 70%); }
.porta-biz .porta-brilho    { background: radial-gradient(closest-side, rgba(79,195,154,.46), transparent 70%); }
.porta-ic { position: relative; z-index: 1; display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 19px; color: #fff; margin-bottom: 26px;
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.4); }
.porta-social .porta-ic { background: linear-gradient(160deg, #8B5CF6, #5A3FE0); }
.porta-biz .porta-ic    { background: linear-gradient(160deg, #4FC39A, #0E7A52); }
.porta-nome { position: relative; z-index: 1; font-size: 30px; font-weight: 800;
  letter-spacing: -.03em; margin-bottom: 8px; }
.porta-sub { position: relative; z-index: 1; font-size: 14px; color: var(--text-secondary);
  line-height: 1.55; margin-bottom: 30px; }
.porta-go { position: relative; z-index: 1; margin-top: auto; display: inline-flex;
  align-items: center; gap: 7px; font-weight: 700; font-size: 15px; }
.porta-social .porta-go { color: var(--violet-700, #5A3FE0); }
.porta-biz .porta-go    { color: #0A6144; }
@media (max-width: 767px) { .porta-cards { grid-template-columns: minmax(0,1fr); } }

/* Escolha de ecossistema e de empresa — a lista de verdade que um <select>
   nativo não conseguia ser */
.biz-escolha { max-width: 720px; margin: 0 auto; padding: 64px var(--space-6) var(--space-10); }
.biz-escolha .t-display { margin: 18px 0 6px; }
.biz-voltar { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--text-secondary); }
.biz-voltar:hover { color: var(--acc-ink); text-decoration: none; }
.biz-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.biz-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 20px; border-radius: var(--radius-lg); color: inherit; font: inherit;
  cursor: pointer; background: var(--veu-forte);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out); }
.biz-card:hover { text-decoration: none; transform: translateY(-2px);
  border-color: var(--acc); box-shadow: var(--lift-2), 0 0 0 1px var(--acc-glow); }
.biz-card b { display: block; font-size: 16px; font-weight: 700; }
.biz-card small { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.biz-card .flex1 { min-width: 0; }
.biz-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 13px; color: var(--acc-ink); background: var(--acc-soft); }
.biz-card > .ico { color: var(--text-subtle); flex: none; }
.biz-novo { background: transparent; border-style: dashed; }
.biz-novo .biz-ic { background: transparent; border: 1px dashed var(--border-strong, #C9CAD2);
  color: var(--text-subtle); }

/* Painel da empresa */
.biz-topo { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.biz-secao { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-subtle); margin: 36px 0 10px; }
.biz-grade { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.biz-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 18px; border-radius: var(--radius-lg); color: inherit;
  font: inherit; cursor: pointer; background: var(--veu-forte);
  border: 1px solid var(--border-subtle); box-shadow: var(--lift-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out); }
.biz-mod:hover { text-decoration: none; transform: translateY(-3px);
  border-color: var(--acc); box-shadow: var(--lift-2), 0 0 0 1px var(--acc-glow); }
.biz-mod .pad-tile { width: 42px; height: 42px; margin-bottom: 12px; }
.biz-mod-nome { font-size: 15px; font-weight: 700; }
.biz-mod-sub { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* Ferramentas: o custo é a primeira coisa que se lê */
.fer-grade { grid-template-columns: repeat(4, minmax(0,1fr)); }
.fer { position: relative; padding-top: 18px; }
.fer-custo { position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc-ink); font-variant-numeric: tabular-nums; }
.fer .biz-mod-nome { margin-top: 2px; padding-right: 42px; }

.barra-clara { background: rgba(255,255,255,.2); }
.chip-estatico { cursor: default; }
.ava-txt { display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; font-weight: 700; font-size: 14px;
  color: var(--acc-ink); background: var(--acc-soft); }

@media (max-width: 1023px) { .biz-grade, .fer-grade { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 559px)  { .biz-grade, .fer-grade { grid-template-columns: minmax(0,1fr); } }

/* Ladrilho do painel Business no dock, para as duas entradas próprias da
   empresa (Painel e Ferramentas) não pegarem emprestada a cor de um módulo. */
.tile-biz { background: linear-gradient(160deg, #4FC39A, #0A6144); }

/* O dock do Business é o mesmo objeto, com a luz da casa: o contorno segue o
   verde do ambiente em vez do violeta do social. */
.dock-biz { box-shadow: var(--lift-3), 0 0 0 1px rgba(79,195,154,.28); }
.bottom-nav-biz { box-shadow: 0 -1px 0 rgba(79,195,154,.3), var(--lift-3); }

/* ==========================================================================
   ADM — GESTÃO DA PLATAFORMA
   Menu lateral fixo, e não dock: o dock serve para navegar entre áreas de uso;
   aqui a pessoa administra listas longas e precisa do menu visível o tempo
   todo, sem passar o mouse para descobrir onde está.
   ========================================================================== */
[data-mod="adm"] { --acc:#5A3FE0; --acc2:#A78BFA; --acc-ink:#5A3FE0; --acc-cheio:#5A3FE0;
  --acc-soft:rgba(90,63,224,.10); --acc-glow:rgba(122,99,246,.28); }

.adm { display: grid; grid-template-columns: 258px minmax(0,1fr); min-height: 100vh; }
.adm-menu { position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; padding: 22px 14px 18px;
  background: var(--surface-raised); border-right: 1px solid var(--border-subtle); }
.adm-marca { display: block; padding: 0 8px 20px; }
.adm-marca .brand-logo { width: 116px; height: auto; }
.adm-secao { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-subtle); padding: 0 10px; margin-bottom: 10px; }
.adm-menu nav { display: flex; flex-direction: column; gap: 2px; }
.adm-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--radius-2); font-size: 14.5px; font-weight: 600;
  color: var(--text-secondary);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.adm-item:hover { text-decoration: none; background: var(--surface-hover); color: var(--text-primary); }
.adm-item .ico { flex: none; color: var(--text-subtle); }
.adm-item.on { color: var(--acc-ink); background: var(--acc-soft);
  box-shadow: inset 3px 0 0 var(--acc-ink); }
.adm-item.on .ico { color: var(--acc-ink); }
.adm-pe { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid var(--border-subtle); }
.adm-on { display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--text-muted); margin-bottom: 12px; }
.adm-on i { width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 8px var(--success); }
.adm-conteudo { padding: 34px 40px; min-width: 0; }

/* Uma linha de usuário: identidade à esquerda, plano no meio, ações à direita */
.adm-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); }
.adm-linha:hover { border-color: var(--acc); }
/* A cor da linha diz o plano antes de qualquer leitura. É um VÉU, não um
   fundo cheio: em cima dele ainda correm nome, e-mail, um <select> e sete
   botões, e cor forte aí embaixo derruba o contraste de todos eles de uma vez.
   Por isso a marca de verdade é a barra da esquerda. */
.adm-linha.e-pro { background: linear-gradient(90deg, rgba(14,158,99,.10), var(--surface-raised) 42%);
  border-color: rgba(14,158,99,.30); box-shadow: inset 3px 0 0 var(--success); }
.adm-linha.e-business { background: linear-gradient(90deg, rgba(122,99,246,.12), var(--surface-raised) 42%);
  border-color: rgba(122,99,246,.32); box-shadow: inset 3px 0 0 var(--violet-500, #7A63F6); }
/* Bloqueado ganha de todos: é a informação que muda o que você vai fazer. */
.adm-linha.is-bloqueado.e-pro,
.adm-linha.is-bloqueado.e-business { background: var(--surface-raised); box-shadow: none; }
/* O véu de cor levanta o fundo, e a legenda cinza da linha (e-mail, telefone,
   cargo) caía para 4,0:1 em cima dele. Dentro das linhas coloridas ela usa a
   tinta de texto normal, que passa dos 4,5 nos dois véus. */
.adm-linha.e-pro .t-caption,
.adm-linha.e-business .t-caption { color: var(--text-muted); }
.badge-biz { background: var(--accent-softer); color: var(--tinta-acento); }
.adm-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-plano { max-width: 150px; }
.btn-perigo { color: var(--danger-text); }
.btn-perigo:hover { background: var(--danger-bg); }

.tabela-rolagem { overflow-x: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-raised); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; padding: 13px 16px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.tabela td { padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--surface-hover); }

/* Saúde do sistema. A cor NÃO é o único sinal: cada item traz o número e a
   faixa por escrito, porque quem não distingue verde de vermelho também
   precisa saber que o disco está em 78%. */
.saude { padding: 14px 16px; border-radius: var(--radius-3);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.saude .barra { margin: 10px 0 8px; }
.saude .barra > span.f-bom     { background: linear-gradient(90deg, #3FC48A, #0B7A4D); }
.saude .barra > span.f-atencao { background: linear-gradient(90deg, #F5C563, #B8860B); }
.saude .barra > span.f-ruim    { background: linear-gradient(90deg, #F0879B, #C2364F); }
.f-legenda { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: -1px; margin-right: 3px; }
.f-legenda.f-bom { background: #0B7A4D; }
.f-legenda.f-atencao { background: #B8860B; }
.f-legenda.f-ruim { background: #C2364F; }

@media (max-width: 1023px) {
  .adm { grid-template-columns: minmax(0,1fr); }
  .adm-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px; border-right: 0;
    border-bottom: 1px solid var(--border-subtle); padding: 14px 16px; }
  .adm-marca { padding: 0 8px 0 0; }
  .adm-marca .brand-logo { width: 84px; }
  .adm-secao, .adm-pe { display: none; }
  .adm-menu nav { flex-direction: row; overflow-x: auto; gap: 4px; flex: 1 1 100%; }
  .adm-item { white-space: nowrap; }
  .adm-item.on { box-shadow: inset 0 -3px 0 var(--acc-ink); }
  .adm-conteudo { padding: 22px 16px; }
}

/* ==========================================================================
   CONFIGURAÇÕES DA CONTA
   ========================================================================== */
.opcoes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.opcoes-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* Quatro idiomas, quatro colunas, UMA linha. Em três colunas o quarto card
   caía sozinho na linha de baixo e a escolha parecia ter dois grupos. */
.opcoes-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* No celular a linha continua sendo UMA — o que sai é a legenda de baixo, que
   em 90px de largura quebrava em três linhas e empurrava tudo. O nome do
   idioma sozinho já diz o que o cartão faz. */
@media (max-width: 560px) {
  .opcoes-4 { gap: 7px; }
  .opcoes-4 .opcao { padding: 12px 8px; align-items: center; text-align: center; }
  .opcoes-4 .opcao b { font-size: 13px; }
  .opcoes-4 .opcao small { display: none; }
}
.opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px; border-radius: var(--radius-3); cursor: pointer; text-align: left;
  font: inherit; color: inherit; background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.opcao:hover { border-color: var(--acc); }
.opcao.on { border-color: var(--acc-ink); box-shadow: inset 0 0 0 1px var(--acc-ink); }
.opcao b { font-size: 14px; font-weight: 700; }
.opcao small { font-size: 11.5px; color: var(--text-muted); }
.opcao-amostra { width: 100%; height: 34px; border-radius: 8px; margin-bottom: 8px;
  border: 1px solid var(--border-subtle); }
.amostra-claro  { background: linear-gradient(135deg, #FFFFFF, #F2F2F7); }
.amostra-escuro { background: linear-gradient(135deg, #2A2740, #14102B); }
.amostra-auto   { background: linear-gradient(135deg, #FFFFFF 0 50%, #14102B 50% 100%); }

.opt { padding: 12px 2px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.opt:last-child { border-bottom: 0; }
.chave { appearance: none; -webkit-appearance: none; flex: none; cursor: pointer;
  width: 46px; height: 27px; border-radius: 99px; background: var(--neutral-300, #C9CAD2);
  position: relative; transition: background var(--dur-2) var(--ease-out); }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: var(--lift-1);
  transition: transform var(--dur-2) var(--ease-out); }
.chave:checked { background: var(--acc-cheio); }   /* trilho, não tinta */
.chave:checked::after { transform: translateX(19px); }
.chave:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }

/* ==========================================================================
   TEMA ESCURO
   --------------------------------------------------------------------------
   Só a camada SEMÂNTICA muda. Nenhum componente foi tocado, e é exatamente
   isso que a arquitetura de duas camadas do DSY-27 existia para permitir: o
   primitivo alimenta o semântico, o semântico alimenta o componente, e trocar
   o tema é reescrever o meio.

   UM seletor só. O "Automático" resolve no JS (`temaEfetivo()` em app.js) e
   escreve `claro` ou `escuro` no <html> — inclusive antes da primeira pintura,
   pelo script no topo do index.html.

   Isto era duas árvores: `[data-tema="escuro"]` e um bloco de media para o
   automático. As cores de TEXTO estavam nas duas; as cinquenta regras que
   consertam superfície estavam só na primeira. Quem ficava no automático com o
   sistema escuro recebia texto gelo sobre cartão branco — ilegível, e sem
   nenhuma forma de descobrir isso lendo o CSS, porque cada metade parecia
   completa sozinha. Uma árvore só torna esse erro impossível.
   ========================================================================== */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --surface-page:    #0E0B1C;
  --surface-raised:  #171331;
  --surface-overlay: #1D1840;
  --surface-sunken:  #120E28;
  --surface-hover:   #211B47;

  --text-strong:   #F3F2FA;
  --text-muted:    #A9A5C4;
  --text-subtle:   #9C97BE;
  --text-disabled: #5D5980;

  --border-subtle:  rgba(255,255,255,.10);
  --border-default: rgba(255,255,255,.16);
  --border-control: rgba(255,255,255,.22);
  --border-strong:  rgba(255,255,255,.24);
  --neutral-300:    rgba(255,255,255,.20);

  --glass:        rgba(28, 23, 60, .70);
  --glass-strong: rgba(28, 23, 60, .86);
  --glass-edge:   rgba(255, 255, 255, .12);
  --glass-ring:   rgba(0, 0, 0, .45);
  --spot: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.07), transparent 60%);

  /* No escuro a sombra sozinha não separa — preto sobre preto some. Ela
     continua, mais funda, mas quem faz a separação é a LUZ DE BORDA no topo
     de cada superfície (o `inset 0 1px 0` de cada componente). Sem os quatro
     degraus redefinidos, os cartões herdavam o roxo do tema claro e ficavam
     com uma auréola violeta no escuro. */
  --lift-1: 0 1px 2px rgba(0,0,0,.44), 0 3px 10px -2px rgba(0,0,0,.52);
  --lift-2: 0 2px 5px rgba(0,0,0,.48), 0 12px 28px -8px rgba(0,0,0,.62);
  --lift-3: 0 4px 10px rgba(0,0,0,.52), 0 26px 54px -14px rgba(0,0,0,.72);
  --lift-4: 0 10px 22px rgba(0,0,0,.55), 0 48px 96px -22px rgba(0,0,0,.80);

  --success-bg: rgba(11,122,77,.22);
  --danger-bg:  rgba(194,54,79,.22);
  --warning-bg: rgba(184,134,11,.22);
  --success-text: #6FE0AE; --danger-text: #FF9DAE; --warning-text: #F2CE72;
  --action-text: #B6A2FF;

  /* Os véus invertem: no claro clareiam, aqui escurecem. Os dois primeiros
     são PAINEL (cartão, janela, modal) e por isso têm cor própria; os três
     de baixo são preenchimento leve e continuam sendo uma lavagem de luz. */
  --veu-solido: rgba(31, 26, 66, .96);
  --veu-forte:  rgba(31, 26, 66, .88);
  --veu-medio:  rgba(255, 255, 255, .085);
  --veu-leve:   rgba(255, 255, 255, .06);
  --veu-tenue:  rgba(255, 255, 255, .045);
  --preench-1:  rgba(255, 255, 255, .07);
  --preench-2:  rgba(255, 255, 255, .13);
  --tinta-acento: #D9CEFF;

  /* O dourado e o violeta escuro do texto foram escolhidos contra branco.
     Aqui a mesma família, do lado claro da escala. */
  --gold-700: #E8C56B;
  --violet-900: #D9CEFF;
  /* A lavagem de acento era o violeta-100: clara por definição. No escuro ela
     precisa ser uma lavagem do acento SOBRE o escuro, não uma placa clara. */
  --accent-soft:   rgba(122, 99, 246, .24);
  --accent-softer: rgba(122, 99, 246, .13);
}

/* --acc-ink é a TINTA do ambiente: cada módulo tem a sua, e todas foram
   medidas contra branco (5:1 a 11:1). Sobre o palco escuro elas caem para
   2,5:1. A luz do mesmo ambiente — --acc2 — já é a versão clara, então no
   escuro a tinta passa a ser ela.

   O seletor precisa do descendente: as regras `[data-mod="..."]` redefinem
   --acc-ink dentro da própria subárvore e venceriam um :root sozinho. */
:root[data-tema="escuro"],
:root[data-tema="escuro"] [data-mod] { --acc-ink: var(--acc2); }

/* Blocos de realce que eram "tinta escura sobre lavagem clara". No escuro a
   lavagem some no fundo e a tinta some junto. */
:root[data-tema="escuro"] .opp-why-neutro {
  background: var(--veu-leve); border-color: var(--border-subtle); }

/* As superfícies que foram escritas com branco literal, e por isso não seguem
   o token. São poucas e ficam listadas aqui em vez de espalhadas. */
:root[data-tema="escuro"] .card3d,
:root[data-tema="escuro"] .porta-card,
:root[data-tema="escuro"] .kpi {
  background: linear-gradient(160deg, rgba(35,29,72,.94), rgba(23,19,49,.9));
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-tema="escuro"] .card3d::after,
:root[data-tema="escuro"] .kpi::after {
  background: radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.08), transparent 55%);
}
:root[data-tema="escuro"] .card,
:root[data-tema="escuro"] .biz-card,
:root[data-tema="escuro"] .biz-mod,
:root[data-tema="escuro"] .opcao,
:root[data-tema="escuro"] .esc-tile,
:root[data-tema="escuro"] .adm-linha,
:root[data-tema="escuro"] .tabela-rolagem,
:root[data-tema="escuro"] .widget {
  background: var(--surface-raised); border-color: var(--border-subtle);
}
:root[data-tema="escuro"] body::after { opacity: .5; }

/* O palco e a chrome. Estas superfícies foram escritas com branco e gradiente
   claros literais — não passam por token, então precisam da versão escura
   explícita. Ficam todas juntas aqui em vez de espalhadas pelo arquivo. */
:root[data-tema="escuro"] body::before {
  background:
    radial-gradient(58% 42% at 8% -8%,   rgba(122, 99, 246, .30), transparent 64%),
    radial-gradient(52% 40% at 96% -4%,  rgba(139, 92, 246, .24), transparent 62%),
    radial-gradient(46% 38% at 78% 34%,  rgba(90, 63, 224, .18),  transparent 66%),
    radial-gradient(70% 50% at 20% 96%,  rgba(14, 158, 99, .14),  transparent 68%),
    radial-gradient(60% 44% at 88% 104%, rgba(240, 106, 139, .10), transparent 66%),
    linear-gradient(178deg, #100C22 0%, #0D0A1D 38%, #0B0818 72%, #090713 100%);
}
:root[data-tema="escuro"] body::after {
  background:
    radial-gradient(120% 88% at 50% 42%, transparent 42%, rgba(0, 0, 0, .42) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%);
}
:root[data-tema="escuro"] .topbar,
:root[data-tema="escuro"] .dock,
:root[data-tema="escuro"] .bottom-nav,
:root[data-tema="escuro"] .mtop {
  background: linear-gradient(180deg, rgba(34,28,72,.86), rgba(23,19,49,.7));
  border-color: rgba(255,255,255,.10);
}
:root[data-tema="escuro"] .topbar .search-box .input {
  background: rgba(255,255,255,.07); color: var(--text-strong);
}
:root[data-tema="escuro"] .topbar .search-box .input:focus { background: rgba(255,255,255,.12); }
:root[data-tema="escuro"] .pilltab {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10);
}
:root[data-tema="escuro"] .pilltab:hover { background: rgba(255,255,255,.12); }
:root[data-tema="escuro"] .strip-ring,
:root[data-tema="escuro"] .ava-txt,
:root[data-tema="escuro"] .composer,
:root[data-tema="escuro"] .window,
:root[data-tema="escuro"] .modal,
:root[data-tema="escuro"] .input,
:root[data-tema="escuro"] .chip,
:root[data-tema="escuro"] .search-box {
  background: var(--surface-raised); border-color: var(--border-subtle);
  color: var(--text-strong);
}
:root[data-tema="escuro"] .btn-secondary,
:root[data-tema="escuro"] .btn-ghost { color: var(--text-strong); }
:root[data-tema="escuro"] .btn-secondary { background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14); }
:root[data-tema="escuro"] .adm-menu { background: var(--surface-raised); }
/* A faixa dourada do Pro é clara por natureza: no escuro ela vira o
   contorno, não o preenchimento, senão brilha mais que o conteúdo. */

/* O logotipo segue o tema. As duas versões ficam no DOM e o CSS escolhe — é o
   que faz o "Automático" acompanhar o sistema sem o JS precisar saber. */
.marca-escura { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-clara  { display: none; }
  :root:not([data-tema="claro"]) .marca-escura { display: block; }
}
:root[data-tema="escuro"] .marca-clara  { display: none; }
:root[data-tema="escuro"] .marca-escura { display: block; }
:root[data-tema="claro"]  .marca-clara  { display: block; }
:root[data-tema="claro"]  .marca-escura { display: none; }

/* Sobraram brancos literais nestas duas: o anel da fileira de empresas e o
   compositor. */
:root[data-tema="escuro"] .strip-ring { background: var(--surface-hover);
  border-color: rgba(255,255,255,.18); color: var(--text-strong); }
:root[data-tema="escuro"] .composer,
:root[data-tema="escuro"] .composer-campo,
:root[data-tema="escuro"] .composer .input,
:root[data-tema="escuro"] .card-composer {
  background: var(--surface-raised) !important; color: var(--text-strong);
  border-color: var(--border-subtle);
}

/* ---- Publicação, perfil, estrutura e notas do Business ------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
/* Só o RÓTULO vira caixa alta. A regra pegava também o texto de ajuda embaixo
   do campo, e frase inteira em maiúscula é mais lenta de ler justamente onde
   a pessoa mais precisa entender. */
.campo > label.t-caption { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.campo > span.t-caption { line-height: 1.5; }

/* A carteira do Asaas vem ANTES do formulário do evento: descobrir que o
   ingresso pago não recebe depois de preencher tudo é o pior momento. */
.aviso-carteira { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-3);
  background: var(--warning-bg); border: 1px solid rgba(184,134,11,.34); }
.aviso-carteira > .ico { color: var(--warning-text); flex: none; margin-top: 2px; }
.aviso-carteira strong { display: block; font-size: 13.5px; margin-bottom: 10px;
  color: var(--warning-text); }

.logo-vazio { display: grid; place-items: center; width: 64px; height: 64px; flex: none;
  border-radius: 18px; color: var(--text-subtle);
  background: var(--surface-sunken); border: 1px dashed var(--border-default); }
.fotos { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px; }
.foto-vazia { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 96px; height: 96px; border-radius: var(--radius-3); cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-subtle);
  background: var(--surface-sunken); border: 1px dashed var(--border-default); }
.foto-vazia:hover { border-color: var(--acc); color: var(--acc-ink); }

.arvore { margin-top: 8px; }
.arv-raiz { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius-lg); background: var(--acc-soft);
  border: 1px solid var(--acc-glow); }
.arv-raiz .ico { color: var(--acc-ink); }
.arv-raiz b { display: block; font-size: 16px; }
.arv-raiz small { font-size: 12px; color: var(--text-muted); }
.arv-filhos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0 30px;
  padding-left: 22px; border-left: 2px solid var(--border-subtle); }
.arv-no { display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  border-radius: var(--radius-3); color: inherit; font: inherit; text-align: left;
  cursor: pointer; background: var(--surface-raised); border: 1px solid var(--border-subtle); }
.arv-no:hover { text-decoration: none; border-color: var(--acc); }
.arv-no b { display: block; font-size: 14.5px; }
.arv-no small { font-size: 12px; color: var(--text-muted); }
.arv-no > span { flex: 1; min-width: 0; }
.arv-novo { border-style: dashed; background: transparent; color: var(--text-secondary); }

.notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.nota { padding: 18px; border-radius: 4px 18px 18px 18px; min-height: 130px;
  box-shadow: var(--lift-1); font-size: 14px; line-height: 1.5; }
.nota p { margin: 0; }
.nota-amarelo { background: #FDF3C7; color: #4A3B00; }
.nota-verde   { background: #D6F3E4; color: #0B3D28; }
.nota-violeta { background: #E7E0FF; color: #2C1A6B; }
.nota-rosa    { background: #FDE0EA; color: #5A1030; }

/* ---- ADM: estados de linha e o botão destrutivo ------------------------- */
.adm-linha.is-bloqueado { opacity: .62; }
.adm-linha.is-bloqueado .t-h3 { text-decoration: line-through; text-decoration-thickness: 1px; }
.badge-perigo { background: var(--danger-bg); color: var(--danger-text); }
.btn-perigo-cheio { background: var(--danger-text); color: #fff; border: none; }
.btn-perigo-cheio:hover { filter: brightness(1.08); }

/* ---- Extrato de créditos ------------------------------------------------
   Data à esquerda em largura fixa, descrição elástica, quantidade à direita.
   Os números são tabulares porque a coluna só se lê quando alinha; e a
   entrada é a única que muda de cor, porque é a única boa notícia. */
.extrato { display: flex; flex-direction: column; margin-top: 12px; }
.extrato-linha {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.extrato-linha:last-child { border-bottom: none; }
.extrato-quando { flex: 0 0 96px; }
.extrato-oque   { min-width: 0; font-size: 14px; color: var(--text-primary); }
.extrato-qtd    { flex: 0 0 auto; font-weight: 700; font-size: 14px; color: var(--text-secondary); }
.extrato-qtd.is-entrada { color: var(--success-text); }
@media (max-width: 560px) {
  .extrato-linha { flex-wrap: wrap; gap: 4px 12px; }
  .extrato-quando { flex-basis: 100%; order: -1; }
}

/* ==========================================================================
   30. AGENDA — o calendário desenhado
   --------------------------------------------------------------------------
   Dia e semana são a MESMA grade: uma coluna de horas à esquerda e N colunas
   de dia à direita, com os blocos posicionados por minuto (`top`) e altos na
   proporção da duração (`height`). É essa proporção que faz a grade valer
   mais que a lista — nela dá para ver o buraco entre dois compromissos sem
   ninguém somar nada.

   O tipo NÃO vira cor de fundo: são sete tipos, e sete preenchimentos numa
   tela cheia de blocos viram confete. O tipo vive na barra da esquerda e no
   ícone; o fundo é sempre o mesmo. É a mesma regra do CMP-61, agora com a
   rotina e o aniversário incluídos.
   ========================================================================== */
.ag-barra { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.ag-barra-esq { min-width: 0; }
.ag-barra-dir { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ag-periodo { color: var(--text-muted); margin-top: 2px; }
.ag-passos { display: flex; align-items: center; gap: 4px; }
.btn-icon-sm { width: 34px; height: 34px; }

/* Controle segmentado: existia no HTML da agenda antiga e nunca teve estilo —
   saía como três botões soltos. */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-full);
  background: var(--preench-1); border: 1px solid var(--border-subtle); }
.segmented button { height: 30px; padding: 0 13px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted); font: inherit; font-size: 13px;
  font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.segmented button:hover { color: var(--text-strong); }
.segmented button[aria-pressed="true"] { background: var(--veu-solido);
  color: var(--text-strong); box-shadow: var(--lift-1); }
.segmented-cheio { display: flex; width: 100%; }
.segmented-cheio button { flex: 1; }

/* O MENU DO MÓDULO — cards, e TODOS visíveis.
   Menu que precisa arrastar de lado esconde metade das opções de quem nunca
   viu a tela. Aqui a grade QUEBRA EM LINHA em vez de rolar: cinco cards no
   computador, dois no celular, e nenhum escondido.

   O vocabulário é o da doca — ladrilho colorido, ícone branco, rótulo — porque
   é o que a pessoa já aprendeu a ler no topo da tela. */
/* A GRADE SEM SOBRA.
   `repeat(auto-fit, minmax(168px,1fr))` quebrava onde coubesse e deixava a
   última linha pela metade — seis cards em cima, um sozinho embaixo e um rasgo
   branco do lado. O dono viu isso e foi direto: "não quero os espaços em
   branco".

   A correção é aritmética, não estética. Com C colunas e N cards, a última
   linha só fecha se o PRIMEIRO card ocupar a sobra:

       S = C − ((N − 1) mod C)

   O primeiro é o "Visão geral", que é a página onde a pessoa cai — ser o card
   maior é hierarquia, não enfeite. CSS não faz módulo, então C e S vêm
   escritos por largura e por `data-n` (a quantidade de abas ativas, que o JS
   carimba no `<nav>`). São só três larguras e três contagens possíveis — as 9
   abas de `FIN_ABAS` são o teto —, e cada linha abaixo é uma conta fechada. */
.fin-menu { display: grid; gap: 10px; margin: 6px 0 22px;
  grid-template-columns: repeat(var(--fin-cols, 2), minmax(0, 1fr)); }
.fin-menu > :first-child { grid-column: span var(--fin-primeiro, 1);
  justify-content: var(--fin-just, flex-start); }
/* Quando o primeiro card ocupa mais de uma coluna ele fica largo, e o ícone
   com duas linhas de texto encostado à esquerda deixa um vão do lado direito
   — o mesmo branco, agora DENTRO do card. Centralizado, a folga se divide nos
   dois lados e lê como respiro. Por isso `--fin-just` anda junto de
   `--fin-primeiro`: quem ocupa uma coluna só continua alinhado à esquerda,
   igual aos outros. Variável de CSS herda, então cada regra escreve as duas. */
/* celular — 2 colunas */
.fin-menu { --fin-cols: 2; }
.fin-menu[data-n="7"] { --fin-primeiro: 2; --fin-just: center; }  /* 2+6 = 8 */
.fin-menu[data-n="8"] { --fin-primeiro: 1; --fin-just: flex-start; }
.fin-menu[data-n="9"] { --fin-primeiro: 2; --fin-just: center; }  /* 2+8 = 10 */
@media (min-width: 621px) {                    /* tablet — 3 colunas */
  .fin-menu { --fin-cols: 3; }
  .fin-menu[data-n="7"] { --fin-primeiro: 3; --fin-just: center; }
  .fin-menu[data-n="8"] { --fin-primeiro: 2; --fin-just: center; }
  .fin-menu[data-n="9"] { --fin-primeiro: 1; --fin-just: flex-start; }
}
@media (min-width: 900px) {                    /* daqui para cima — 4 colunas */
  .fin-menu { --fin-cols: 4; }
  .fin-menu[data-n="7"] { --fin-primeiro: 2; --fin-just: center; }
  .fin-menu[data-n="8"] { --fin-primeiro: 1; --fin-just: flex-start; }
  .fin-menu[data-n="9"] { --fin-primeiro: 4; --fin-just: center; }
}
/* Não há degrau de sete colunas em tela larga. Tentei: cabe, fecha na borda e
   some com o branco — e corta os rótulos em "Lançamen…", "Investimen…". Nome
   cortado é pior do que card largo, porque o menu existe para ser lido. */
.fin-menu-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 11px 13px; border-radius: var(--radius-lg);
  background: var(--veu-medio);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--lift-1), 0 0 0 1px var(--glass-ring);
  color: var(--text-strong); font: inherit; cursor: pointer; min-width: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out); }
.fin-menu-card:hover { transform: translateY(-1px);
  box-shadow: var(--lift-2), 0 0 0 1px var(--glass-ring); }
.fin-menu-card .dock-tile { --m: .82; flex: none; }
.fin-menu-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fin-menu-txt b { font-size: 13.5px; font-weight: 650; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-menu-txt .t-caption { line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* O card ATUAL: mesma marcação de "você está aqui" que a doca usa — sem trocar
   a cor do ladrilho, que é a identidade da seção. */
/* O card ATUAL: o mesmo anel de acento que o app usa para "você está aqui",
   sem trocar a cor do ladrilho — ela é a identidade da seção. */
.fin-menu-card.on { background: var(--veu-solido);
  box-shadow: var(--lift-2), 0 0 0 2px var(--tinta-acento); }
.fin-menu-card.on .fin-menu-txt b { color: var(--tinta-acento); }

/* ---- AS CONTAS COMO CARTÃO ------------------------------------------------
   Proporção de cartão de verdade (85,6 × 53,98 mm = 1,586). A cor vem do banco
   e é injetada em `--cc` pelo JS: uma lista de linhas iguais obriga a LER para
   achar a conta; um cartão roxo ao lado de um preto se acha pela cor. É o
   mesmo motivo de a doca ter ladrilhos coloridos. */
.conta-grade { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.conta-cartao {
  position: relative; overflow: hidden; text-align: left;
  aspect-ratio: 1.586; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 18px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--cc, linear-gradient(150deg, #6B5BD6, #2F2470));
  color: #fff; font: inherit;
  box-shadow: 0 6px 16px -6px rgba(11,18,48,.45), 0 22px 40px -22px rgba(11,18,48,.55);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out); }
.conta-cartao:hover { transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(11,18,48,.5), 0 30px 56px -24px rgba(11,18,48,.6); }
/* O brilho diagonal — é o que faz parecer plástico e não retângulo colorido */
.conta-cartao::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(148deg, rgba(255,255,255,.26), transparent 46%); }
.conta-cartao::after { content: ""; position: absolute; right: -18%; bottom: -46%;
  width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%); }
.conta-cartao > * { position: relative; z-index: 1; }
.cc-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cc-banco { font-size: 14px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tipo { font-size: 11px; opacity: .78; white-space: nowrap; }
/* O chip dourado. Detalhe pequeno, e é ele que faz o olho dizer "cartão". */
.cc-chip { width: 34px; height: 25px; border-radius: 5px; align-self: flex-start;
  background: linear-gradient(145deg, #E8CE86, #B08F3C);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25); }
.cc-pe { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-nome { font-size: 12.5px; opacity: .86; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-linha { display: flex; align-items: baseline; gap: 7px; }
.cc-linha b { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.cc-rot { font-size: 11px; opacity: .74; }
.cc-rende { display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; opacity: .82; margin-top: 2px; }
.cc-rende svg { width: 12px; height: 12px; }

/* ---- O ASSISTENTE DE CADASTRO -------------------------------------------- */
.fin-trilha { display: flex; gap: 6px; margin-top: 12px; }
.fin-trilha i { height: 3px; flex: 1; border-radius: 2px; background: var(--preench-2); }
.fin-trilha i.on { background: var(--tinta-acento); }
.fin-tipos { display: grid; gap: 8px; }
.fin-tipo-card { display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 11px 13px; border-radius: var(--radius-lg); cursor: pointer; font: inherit;
  background: var(--preench-1); border: 1px solid var(--border-subtle);
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out); }
.fin-tipo-card:hover { background: var(--veu-solido); }
.fin-tipo-card.on { box-shadow: 0 0 0 2px var(--tinta-acento); }
.fin-tipo-card .dock-tile { --m: .8; flex: none; }
/* Os bancos: bolinha com a cor da marca e o nome. Reconhecer pela cor é mais
   rápido do que ler doze nomes numa lista. */
.fin-bancos { display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.fin-banco { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-md); cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--preench-1); border: 1px solid var(--border-subtle);
  color: var(--text-strong); text-align: left; min-width: 0; }
.fin-banco:hover { background: var(--veu-solido); }
.fin-banco.on { box-shadow: 0 0 0 2px var(--tinta-acento); }
.fin-banco i { width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--cb, #888); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.fin-banco span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 620px) {
  .conta-grade { grid-template-columns: 1fr; }
  .conta-cartao { max-width: none; }
  .fin-menu { gap: 8px; }
  .fin-menu-card { padding: 9px 10px; gap: 9px; }
  .fin-menu-card .dock-tile { --m: .74; }
  .fin-menu-txt b { font-size: 12.5px; }
  /* Em duas colunas o subtítulo rouba a linha do nome. O nome é o que importa.
     No primeiro card não: ele ocupa a linha inteira e tem espaço de sobra —
     esconder o subtítulo ali seria deixar branco onde cabia informação. */
  .fin-menu-txt .t-caption { display: none; }
  .fin-menu > :first-child .fin-menu-txt .t-caption { display: block; }
}

.ag-quadro { overflow: hidden; }
.ag-cabeca-dia { display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.ag-cabeca-dia b { font-size: 16px; }

/* A grade: 60px de coluna de horas + as colunas de dia. As duas visões usam a
   mesma variável, então nada pode sair do lugar entre uma e outra. */
.ag-grade { display: grid; overflow-x: auto; overflow-y: hidden; position: relative; }
.ag-grade-1 { grid-template-columns: 60px minmax(0, 1fr); }
.ag-grade-7 { grid-template-columns: 60px repeat(7, minmax(96px, 1fr)); }
.ag-horas { position: relative; }
.ag-hora { position: relative; border-right: 1px solid var(--border-subtle); }
.ag-hora span { position: absolute; top: -7px; right: 8px; font-size: 11px;
  color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.ag-hora:first-child span { top: 2px; }

/* As linhas de hora são o FUNDO da coluna, não elementos: 15 divs por coluna
   × 7 colunas seriam 105 nós para desenhar 15 traços. */
.ag-col { position: relative; border-right: 1px solid var(--border-subtle);
  background-image: repeating-linear-gradient(to bottom,
    var(--border-subtle) 0 1px, transparent 1px 56px); }
.ag-col:last-child { border-right: 0; }
.ag-col.e-hoje { background-color: var(--accent-softer); }

.ag-cabecas { display: grid; grid-template-columns: 60px repeat(7, minmax(96px, 1fr));
  border-bottom: 1px solid var(--border-subtle); }
.ag-cabeca-vazia { border-right: 1px solid var(--border-subtle); }
.ag-cab { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px; border: 0; border-right: 1px solid var(--border-subtle);
  background: transparent; font: inherit; cursor: pointer; color: var(--text-muted); }
.ag-cab:last-child { border-right: 0; }
.ag-cab:hover { background: var(--preench-1); }
.ag-cab-dow { font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.ag-cab-num { font-size: 18px; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums; line-height: 22px; }
.ag-cab.e-hoje .ag-cab-num { background: var(--acc-cheio); color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center; line-height: 1; }
.ag-cab.e-hoje .ag-cab-dow { color: var(--acc-ink); }

.ag-bloco { position: absolute; left: 3px; right: 3px; overflow: hidden;
  display: flex; gap: 5px; padding: 4px 6px; border-radius: 8px;
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-subtle);
  box-shadow: var(--lift-1); font-size: 11.5px; line-height: 14px; }
.ag-bloco-ico { flex: none; color: var(--text-subtle); padding-top: 1px; }
.ag-bloco-txt { min-width: 0; }
.ag-bloco-txt b { display: block; font-weight: 700; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-bloco-txt span { display: block; color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Faixa do dia inteiro: aniversário e lembrete sem hora não têm onde começar
   na grade, então moram acima dela — como em qualquer calendário. */
.ag-diainteiro { display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px var(--space-5); border-bottom: 1px solid var(--border-subtle);
  background: var(--preench-1); }
/* Na semana a faixa repete a grade de 7 colunas, para o item cair embaixo do
   dia a que pertence. */
.ag-diainteiro-7 { display: grid; grid-template-columns: 60px repeat(7, minmax(96px, 1fr));
  padding: 0; align-items: start; }
.ag-diainteiro-7 .ag-cabeca-vazia { border-right: 1px solid var(--border-subtle); }
.ag-solto-col { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 6px 4px; border-right: 1px solid var(--border-subtle); min-height: 22px; }
.ag-solto-col:last-child { border-right: 0; }
.ag-marca { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-subtle); color: var(--text-muted);
  overflow: hidden; }
.ag-marca b { flex: none; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ag-marca-ico { flex: none; display: flex; color: var(--text-subtle); }
/* É o TEXTO que corta, não a pílula: cortar a pílula a empurrava para fora
   da célula do mês em vez de encolher o título dentro dela. */
.ag-marca-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Onde o tipo aparece: só na barra da esquerda e no ícone. */
.ag-compromisso { border-left-color: #5A3FE0; }
.ag-reuniao     { border-left-color: #0E9E63; }
.ag-entrevista  { border-left-color: #3F55E0; }
.ag-evento      { border-left-color: #6B3FD0; }
.ag-lembrete    { border-left-color: #D62F63; }
.ag-rotina      { border-left-color: #8A6A15; }
.ag-aniversario { border-left-color: #E06A2F; }
.ag-bloco.ag-compromisso .ag-bloco-ico { color: #5A3FE0; }
.ag-bloco.ag-reuniao     .ag-bloco-ico { color: #0E9E63; }
.ag-bloco.ag-entrevista  .ag-bloco-ico { color: #3F55E0; }
.ag-bloco.ag-evento      .ag-bloco-ico { color: #6B3FD0; }
.ag-bloco.ag-lembrete    .ag-bloco-ico { color: #D62F63; }
.ag-bloco.ag-rotina      .ag-bloco-ico { color: #8A6A15; }
.ag-bloco.ag-aniversario .ag-bloco-ico { color: #E06A2F; }

/* A linha de agora. Só na coluna de hoje, e só se a hora couber na faixa
   desenhada — fora dela ela apontaria para o lugar errado. */
.ag-agora { position: absolute; left: 0; right: 0; height: 2px; z-index: 3;
  background: var(--danger); pointer-events: none; }
.ag-agora i { position: absolute; left: -4px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); }

/* Mês: seis semanas fixas. Cinco não bastam para o mês que começa no sábado,
   e um número variável faria o quadro pular de altura ao trocar de mês. */
.ag-mes-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-subtle); }
.ag-mes-dow span { padding: 9px 0; text-align: center; font-size: 10px; font-weight: 750;
  letter-spacing: .06em; color: var(--text-subtle); }
.ag-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto); }
.ag-cel { display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 6px; border: 0; border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle); background: transparent;
  font: inherit; text-align: left; cursor: pointer; min-width: 0; overflow: hidden; }
.ag-cel:nth-child(7n) { border-right: 0; }
.ag-cel:nth-last-child(-n+7) { border-bottom: 0; }
.ag-cel:hover { background: var(--preench-1); }
.ag-cel.e-fora { opacity: .42; }
.ag-cel.e-hoje { background: var(--accent-softer); }
.ag-cel-num { font-size: 13px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; align-self: flex-start; }
.ag-cel.e-hoje .ag-cel-num { background: var(--acc-cheio); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center; }
.ag-cel-itens { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-cel-itens .ag-marca { font-size: 10.5px; padding: 1px 6px; }
.ag-mais { font-size: 10px; font-weight: 700; color: var(--text-subtle); padding-left: 4px; }

.ag-legenda { display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-4); font-size: 12px; color: var(--text-subtle); }
.ag-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.ag-ponto { width: 9px; height: 3px; border-radius: 2px; display: block;
  background: var(--text-subtle); }
.ag-ponto.ag-compromisso { background: #5A3FE0; }
.ag-ponto.ag-reuniao     { background: #0E9E63; }
.ag-ponto.ag-entrevista  { background: #3F55E0; }
.ag-ponto.ag-evento      { background: #6B3FD0; }
.ag-ponto.ag-lembrete    { background: #D62F63; }
.ag-ponto.ag-rotina      { background: #8A6A15; }
.ag-ponto.ag-aniversario { background: #E06A2F; }

/* Escolher os dias da rotina */
.ag-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-dia-btn { height: 38px; border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--veu-leve); color: var(--text-muted); font: inherit; font-size: 11px;
  font-weight: 700; cursor: pointer; }
.ag-dia-btn[aria-pressed="true"] { background: var(--acc-cheio); color: #fff;
  border-color: transparent; }

/* No celular a semana inteira não cabe em colunas legíveis: 7 × 96px são 672px
   de grade num aparelho de 390. Ela rola na horizontal, com a coluna de horas
   presa à esquerda para a pessoa não perder a referência ao arrastar. */
@media (max-width: 767px) {
  .ag-barra-dir { width: 100%; justify-content: space-between; }
  .ag-grade-7, .ag-cabecas, .ag-diainteiro-7 {
    grid-template-columns: 52px repeat(7, minmax(74px, 1fr)); }
  .ag-horas { position: sticky; left: 0; z-index: 2; background: var(--veu-solido); }
  .ag-mes { grid-auto-rows: minmax(74px, auto); }
  .ag-cel-itens .ag-marca { font-size: 9.5px; padding: 1px 4px; }
  .ag-legenda { gap: var(--space-3); font-size: 11px; }
}

/* Tema escuro: o que era um traço claro sobre branco precisa continuar sendo
   um traço visível sobre o palco escuro. */
:root[data-tema="escuro"] .ag-bloco,
:root[data-tema="escuro"] .ag-marca { background: var(--surface-hover); }
:root[data-tema="escuro"] .ag-col.e-hoje,
:root[data-tema="escuro"] .ag-cel.e-hoje { background-color: rgba(122,99,246,.14); }
:root[data-tema="escuro"] .ag-horas { background: transparent; }
@media (max-width: 767px) {
  :root[data-tema="escuro"] .ag-horas { background: var(--surface-raised); }
}

/* ==========================================================================
   31. PAINEL DE NOTIFICAÇÕES — flutuante, não uma tela
   --------------------------------------------------------------------------
   Abrir uma página inteira para ler um aviso cobra o contexto: você perde de
   onde estava e precisa voltar. O painel abre por cima e um clique fora fecha.
   No celular ele vira folha subindo do rodapé — um popover ancorado num sino
   de 20px é impossível de acertar com o polegar.
   ========================================================================== */
.notif-mask { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); }
.notif-pop {
  position: fixed; z-index: var(--z-overlay);
  width: min(400px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--veu-solido);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--lift-4), 0 0 0 1px var(--glass-ring);
  animation: notifEntra 160ms var(--ease-out);
}
@keyframes notifEntra { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.notif-pop-cab { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle); flex: none; }
.notif-pop-cab b { font-size: 16px; font-weight: 750; }
.notif-pop-lista { overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.notif-pop-lista .notif:last-child { border-bottom: 0; }
.notif-pop-pe { padding: 10px var(--space-5); border-top: 1px solid var(--border-subtle);
  flex: none; }

@media (max-width: 1023px) {
  .notif-pop {
    top: auto !important; right: 0 !important; left: 0; bottom: 0;
    width: 100%; max-height: 76vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: folhaEntra 200ms var(--ease-out);
  }
  @keyframes folhaEntra { from { transform: translateY(100%); } }
  .notif-mask { background: rgba(11,18,48,.32); }
}

/* ==========================================================================
   32. NETWORKING — o baralho
   --------------------------------------------------------------------------
   Uma pessoa por vez. A grade de nove cartões pequenos parecia mais eficiente
   e não era: ninguém lê nove biografias lado a lado, e o formato transformava
   gente em resultado de busca. Aqui a tela inteira serve uma decisão.

   A "pilha" atrás do cartão não é enfeite: ela diz, sem texto, que existe mais
   gente na fila — informação que a grade dava de graça e o baralho perderia.
   ========================================================================== */
.baralho { position: relative; max-width: 560px; margin: 0 auto; padding-top: 10px; }
.baralho-pilha { position: absolute; inset: 0 0 auto; height: 100%; pointer-events: none; }
.baralho-fantasma { position: absolute; left: 0; right: 0; top: 0; height: 200px;
  border-radius: var(--radius-window); background: var(--veu-leve);
  border: 1px solid var(--border-subtle); box-shadow: var(--lift-1); }
.baralho-fantasma.f1 { transform: translateY(-8px) scale(.965); opacity: .75; }
.baralho-fantasma.f2 { transform: translateY(-16px) scale(.93); opacity: .45; }

.baralho-card { position: relative; z-index: 1; overflow: hidden;
  border-radius: var(--radius-window); background: var(--veu-solido);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--lift-3), 0 0 0 1px var(--glass-ring);
  animation: baralhoEntra 260ms var(--ease-out); }
@keyframes baralhoEntra { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.baralho-capa { height: 96px;
  background: linear-gradient(120deg, var(--acc), var(--acc2) 55%, var(--brand-green)); }
.baralho-corpo { padding: 0 var(--space-6) var(--space-5); }
.baralho-ava { margin-top: -48px; }
.baralho-ava .avatar { box-shadow: 0 0 0 4px var(--surface-raised), var(--lift-2); }
.baralho-bloco { margin-top: var(--space-4); }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }

/* As duas saídas ficam presas no pé do cartão: decidir é o trabalho da tela,
   e o botão de decidir não pode depender de rolagem. */
.baralho-acoes { display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle); background: var(--veu-leve); }
.baralho-acoes .btn-primary, .baralho-acoes .btn-secondary { flex: 1 1 0; justify-content: center; }
.baralho-acoes .btn-ghost { flex: 0 0 auto; }
.baralho-vazio { max-width: 560px; margin: 0 auto; }

@media (max-width: 639px) {
  .baralho-acoes { flex-wrap: wrap; }
  .baralho-acoes .btn-ghost { order: 3; width: 100%; justify-content: center; }
}

/* Mural de empresas: o comunicado é um cartão de leitura, não um registro de
   cadastro. Rodapé com as reações separado por linha para o corpo do texto
   respirar. */
.comunicado { padding: var(--space-5); }
.comunicado-pe { display: flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle); }

/* Busca por intenção — a caixa grande de Oportunidades e Eventos.
   Ela é maior que a busca da chrome de propósito: aqui procurar É a tarefa,
   não um atalho para outra tela. */
.busca-intencao { margin-bottom: var(--space-5); }
.search-grande .input { height: 56px; font-size: 16px; padding-left: 52px; }
.search-grande .ico { left: 18px; }
.busca-limpa { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--preench-1); color: var(--text-muted); }
.busca-limpa:hover { background: var(--preench-2); color: var(--text-strong); }
.chip-sm { height: 30px; padding: 0 12px; font-size: 13px; }

/* ==========================================================================
   33. EVENTOS — cartão de descoberta
   --------------------------------------------------------------------------
   O cartão anterior era uma linha de agenda: bloco de data, título, local. Ele
   servia para quem JÁ sabia que ia. Para descobrir, faltam três coisas que a
   pessoa decide antes de clicar: quanto custa, de que tema é, e se ainda tem
   vaga. Elas entram como selo, não como texto corrido — decisão se lê de
   relance.

   A capa é um gradiente por categoria, não uma foto: foto de banco de imagem
   num evento de verdade é a forma mais rápida de a página parecer falsa.
   ========================================================================== */
.evento-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.evento-capa { position: relative; height: 108px; display: block;
  background: linear-gradient(135deg, var(--acc), var(--acc2)); }
.evento-capa::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 90% 0%, rgba(255,255,255,.30), transparent 62%); }
.cat-produto     { background: linear-gradient(135deg, #5A3FE0, #A78BFA); }
.cat-tecnologia  { background: linear-gradient(135deg, #2B3F9E, #6B8BF6); }
.cat-vendas      { background: linear-gradient(135deg, #E06A2F, #F0A35E); }
.cat-negócios    { background: linear-gradient(135deg, #0B7A4D, #4FC3A1); }
.cat-negocios    { background: linear-gradient(135deg, #0B7A4D, #4FC3A1); }
.cat-jurídico    { background: linear-gradient(135deg, #6D28D9, #A78BFA); }
.cat-juridico    { background: linear-gradient(135deg, #6D28D9, #A78BFA); }
.cat-engenharia  { background: linear-gradient(135deg, #8A6A15, #E8C56B); }
/* A data fica NA capa: é o dado que ordena a decisão, e ali ele não disputa
   espaço com o título. */
.evento-data { position: absolute; left: 14px; bottom: -1px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 8px 12px 7px; border-radius: 12px 12px 0 0;
  background: var(--veu-solido); box-shadow: var(--lift-1); }
.evento-data b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-strong); }
.evento-data span { font-size: 9.5px; font-weight: 750; letter-spacing: .08em;
  color: var(--text-subtle); margin-top: 2px; }
.evento-corpo { padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; flex: 1; }
.evento-tit { display: block; color: inherit; font-weight: 750; }
.evento-tit:hover { text-decoration: none; color: var(--acc-ink); }
.evento-vagas { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.evento-vagas .barra { flex: 1; height: 5px; border-radius: 99px; overflow: hidden;
  background: var(--preench-1); }
.evento-vagas .barra i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.evento-pe { display: flex; align-items: center; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-4); }
.evento-pe .btn-primary, .evento-pe .btn-secondary { flex: 1; justify-content: center; }
.e-cancelado .evento-capa { filter: grayscale(1); opacity: .55; }
.e-cancelado .evento-tit { text-decoration: line-through; }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
/* O filtro "Gratuitos" é a primeira pergunta de quem está começando, e por
   isso é o único chip com cor própria. */
.chip-gratis[aria-pressed="true"] { background: var(--success-text);
  border-color: transparent; color: #062b1c; }
:root[data-tema="escuro"] .chip-gratis[aria-pressed="true"] { color: #04150d; }
.chip[aria-pressed="true"] { background: var(--acc-cheio); color: #fff; border-color: transparent; }

/* ==========================================================================
   34. BRUNA IA — a página dela
   --------------------------------------------------------------------------
   Três trabalhos numa página: apresentar, vender e deixar experimentar. A
   ordem importa — quem chega sem saber quem é ela não compra, e quem já sabe
   não quer ler de novo antes de testar.

   O "telefone" do topo não é ilustração decorativa: é a única forma honesta de
   mostrar o produto, porque o produto É uma conversa. Fotografia de mulher
   sorrindo no lugar dele esconderia exatamente o que se está vendendo.
   ========================================================================== */
.bruna-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: var(--space-8); align-items: center; padding: var(--space-8) 0 var(--space-6); }
@media (max-width: 900px) { .bruna-hero { grid-template-columns: minmax(0,1fr); }
  .bruna-hero-fone { display: none; } }
.bruna-nome { background: linear-gradient(100deg, #25D366, #0B7A4D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; padding-right: .06em; margin-right: -.06em; }
:root[data-tema="escuro"] .bruna-nome {
  background: linear-gradient(100deg, #6FE0AE, #25D366);
  -webkit-background-clip: text; background-clip: text; }

.fone { border-radius: 30px; overflow: hidden; max-width: 320px; margin: 0 auto;
  background: linear-gradient(170deg, #0E3D2C, #071C14);
  border: 8px solid #10151f; box-shadow: var(--lift-4); }
.fone-topo { display: flex; align-items: center; gap: 10px; padding: 14px;
  background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.fone-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, #4FE39B, #128C7E); color: #04120b;
  font-weight: 800; flex: none; }
.fone-topo b { display: block; color: #fff; font-size: 14px; }
.fone-topo i { display: block; font-style: normal; font-size: 11px; color: #7FE3B4; }
.fone-msgs { padding: 16px 14px 22px; display: flex; flex-direction: column; gap: 8px; }
.fb { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 18px; }
.fb-eu { align-self: flex-end; background: #1F6B4F; color: #EAFBF3;
  border-bottom-right-radius: 4px; }
.fb-ela { align-self: flex-start; background: rgba(255,255,255,.10); color: #E8F4EE;
  border-bottom-left-radius: 4px; }

.bruna-faz-card { padding: var(--space-5); }
.bruna-exemplo { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px;
  line-height: 17px; color: var(--text-muted); padding: 6px 10px; border-radius: 10px;
  background: rgba(37,211,102,.07); border: 1px dashed rgba(37,211,102,.32); }
.bruna-exemplo .ico { flex: none; margin-top: 2px; color: var(--success-text); }

/* O chat de experimentação */
.bruna-testar { margin: 56px 0; }
.chat-bruna { border-radius: var(--radius-window); overflow: hidden;
  background: var(--veu-solido); border: 1px solid var(--glass-edge);
  box-shadow: var(--lift-3), 0 0 0 1px var(--glass-ring); }
.chat-bruna-msgs { height: 340px; overflow-y: auto; padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: linear-gradient(180deg, rgba(37,211,102,.05), transparent 40%); }
.chat-bruna.e-compacto .chat-bruna-msgs { height: 260px; }
.chat-bruna-vazio { margin: auto; text-align: center; max-width: 320px; }
/* `pre-wrap` porque a Bruna responde com QUEBRA DE LINHA — a resposta dela no
   WhatsApp é uma lista ("• 14h reunião / • 16h ligar para o Davi"), e sem isto
   tudo virava um parágrafo só, com os itens grudados. `overflow-wrap` para um
   endereço longo não estourar a largura da bolha. */
.bolha { max-width: 76%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px;
  line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Verde, não a cor do ambiente. Dentro de Mensagens o `--acc-cheio` é o
   laranja-tinta do módulo, e uma bolha laranja escura lê como erro. Verde é a
   promessa visual da tela: isto é o seu WhatsApp, só que aqui dentro.
   #0E7A63 com texto branco dá 5,0:1. */
.bolha-eu { align-self: flex-end; background: #0E7A63; color: #fff;
  border-bottom-right-radius: 5px; }
.bolha-ela { align-self: flex-start; background: var(--veu-medio); color: var(--text-strong);
  border: 1px solid var(--border-subtle); border-bottom-left-radius: 5px; }
.bolha-quem { display: block; font-size: 11px; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--success-text); margin-bottom: 3px; }
/* Falha da Bruna: a bolha diz que é falha, não finge resposta. */
.bolha-erro { background: var(--danger-bg); border-color: var(--danger-text);
  color: var(--danger-text); }
.bolha-erro .bolha-quem { color: var(--danger-text); }
/* Os três pontinhos de "digitando". A Bruna de verdade consulta agenda e
   financeiro antes de responder, e isso leva alguns segundos — sem sinal
   nenhum na tela, a pessoa acha que a mensagem não foi. */
.bolha-pensando { display: inline-flex; flex-direction: column; }
.pensa { display: inline-flex; align-items: center; gap: 4px; height: 21px; }
.pensa i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle);
  animation: pensa 1.05s infinite ease-in-out; }
.pensa i:nth-child(2) { animation-delay: .16s; }
.pensa i:nth-child(3) { animation-delay: .32s; }
@keyframes pensa { 0%, 60%, 100% { opacity: .28; transform: translateY(0); }
                   30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pensa i { animation: none; opacity: .5; } }
.chat-bruna-atalhos { display: flex; gap: 6px; flex-wrap: wrap;
  padding: var(--space-3) var(--space-5) 0; }
.chat-bruna-campo { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.chat-bruna-campo .input { flex: 1; }
.chat-bruna-campo .btn { flex: none; width: 46px; padding: 0; justify-content: center; }

.bruna-plano { margin: 56px 0 0; padding: var(--space-8);
  border-radius: var(--radius-window);
  background: linear-gradient(150deg, rgba(232,197,107,.16), var(--veu-forte) 62%);
  border: 1px solid rgba(232,197,107,.36); box-shadow: var(--lift-2); }
.bruna-plano-txt { max-width: 640px; }
.bruna-lista { list-style: none; margin-top: var(--space-4); display: grid; gap: 8px; }
.bruna-lista li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px;
  line-height: 21px; color: var(--text-muted); }
.bruna-lista .ico { flex: none; margin-top: 3px; color: var(--gold-700); }

/* Cinco na fileira da Agenda: quatro contadores e uma ação. */
.kpis-5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--space-3); margin-bottom: var(--space-6); }
@media (max-width: 1199px) { .kpis-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---- Fileiras de número no celular ------------------------------------
   Empilhadas em duas colunas, cinco cartões viram três fileiras altas: 560px,
   a tela inteira, antes de aparecer o calendário — que é o motivo de a pessoa
   ter aberto a Agenda. Viram uma FILEIRA QUE ROLA de lado, como no app de
   banco: 112px de altura, o primeiro cartão inteiro e o segundo meio à mostra,
   que é o que ensina que rola sem precisar de seta. */
@media (max-width: 767px) {
  .kpis, .kpis-5 {
    display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; padding: 2px 0 8px;
    margin-bottom: var(--space-4);
  }
  .kpis::-webkit-scrollbar, .kpis-5::-webkit-scrollbar { display: none; }
  .kpis > *, .kpis-5 > * {
    flex: 0 0 auto; width: 45vw; min-width: 138px; max-width: 186px;
    scroll-snap-align: start; padding: var(--space-3) var(--space-4);
  }
  /* Ícone e rótulo lado a lado deixam ~120px para o texto, e "COMPROMISSOS
     HOJE" não cabe — quebrava em duas linhas e desalinhava a fileira. Em
     coluna o rótulo recebe a largura inteira do cartão. */
  .kpi-top { margin-bottom: 6px; gap: 6px; flex-direction: column; align-items: flex-start; }
  .kpi-rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .kpi-ico { width: 26px; height: 26px; border-radius: 8px; }
  .kpi-rot { font-size: 10px; letter-spacing: .05em; }
  .kpi-num { font-size: 26px; line-height: 30px; }
  .kpi-sub { font-size: 11.5px; line-height: 15px; }
}
/* O cartão da Bruna é o único clicável da fileira, e por isso é o único que
   se move no hover: a diferença tem que ser sentida antes de ser lida. */
.kpi-bruna { display: block; color: inherit; cursor: pointer;
  border-color: rgba(37,211,102,.34);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.kpi-bruna:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(37,211,102,.4); }
.kpi-acao { display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 15px; font-weight: 750; color: var(--success-text); }
.kpi-acao .ico { flex: none; }

/* No celular, o cabeçalho da Agenda somava 250px antes do calendário: título
   grande, período, passos, quatro abas e o botão Novo, cada um na sua linha.
   O título sai — a barra de baixo já diz "Agenda", e repetir o nome da tela
   dentro dela é o espaço mais caro que existe. O período vira o título. */
@media (max-width: 767px) {
  .ag-barra-esq h1.t-h1 { display: none; }
  .ag-periodo { font-size: 17px; line-height: 24px; font-weight: 700;
    color: var(--text-strong); letter-spacing: -.01em; }
  .ag-barra { gap: var(--space-3); }
  .ag-barra-dir { gap: var(--space-2); }
}

/* Avisos do dia — abaixo do calendário, nunca dentro dele. */
.avisos-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4); margin-top: var(--space-5); }
.aviso-bloco { padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--veu-medio); border: 1px solid var(--border-subtle); }
.aviso-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: var(--text-muted); }
.aviso-cab b { font-size: 13.5px; font-weight: 750; color: var(--text-strong); }
.aviso-itens { display: flex; flex-direction: column; gap: 10px; }
.aviso-item { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------
   O DIAGNÓSTICO DA INSTÂNCIA, no ADM → WhatsApp.
   Fica na tela em vez de virar toast: quem está caçando o motivo de a Bruna
   ter emudecido precisa ler a resposta com calma, e às vezes comparar duas.
   -------------------------------------------------------------------------- */
.wa-diag { padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  font-size: 13.5px; line-height: 1.55; color: var(--text-muted);
  overflow-wrap: anywhere; }
.wa-diag b { color: var(--text-strong); font-weight: 700; }
.wa-diag-ruim { background: var(--danger-bg); border-color: var(--danger);
  color: var(--danger-text); }
.wa-diag-ruim b { color: var(--danger-text); }
.wa-diag + .wa-diag { margin-top: 10px; }
.wa-qr { text-align: center; margin-top: 12px; }
.wa-qr img { max-width: 260px; width: 100%; border-radius: var(--radius-lg); }

/* Cartão de contato do WhatsApp, no envio pela conversa */
.cartao-wpp { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--radius-lg); background: rgba(37,211,102,.10);
  border: 1px solid rgba(37,211,102,.32); color: var(--success-text); }
.cartao-wpp b { display: block; color: var(--text-strong); font-size: 15px; }
.cartao-wpp span { display: block; color: var(--text-muted); font-size: 13.5px;
  font-variant-numeric: tabular-nums; }

/* ==========================================================================
   35. O VÉU DO PRO
   --------------------------------------------------------------------------
   O Free ENTRA na aba e vê a tela — com uma camada por cima que impede
   navegar. É deliberadamente diferente de barrar a porta: quem nunca viu o
   Financeiro não tem como querer o Financeiro.

   O conteúdo atrás é real, não borrão genérico. E ele leva `inert` no HTML,
   não só `pointer-events:none`: sem isso o Tab entraria por baixo do véu e o
   leitor de tela leria a tela inteira como se estivesse aberta.
   ========================================================================== */
.veu-wrap { position: relative; }
.veu-conteudo { filter: blur(3px) saturate(.7); opacity: .5; user-select: none;
  pointer-events: none; max-height: 900px; overflow: hidden; }
.veu-conteudo::after { content: ""; position: absolute; inset: auto 0 0; height: 220px;
  background: linear-gradient(180deg, transparent, var(--surface-page)); pointer-events: none; }
.veu-pro { position: absolute; inset: 0; display: grid; place-items: start center;
  padding: clamp(60px, 14vh, 160px) 12px 0; }
/* `min(560px, 100%)` e não `560px`: com `justify-items: center` o cartão é
   dimensionado pelo conteúdo, e o rótulo longo do botão dourado o empurrava
   para 326px numa tela de 320. */
.veu-pro-cartao { position: sticky; top: 180px; max-width: min(560px, 100%);
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-window);
  background: var(--veu-solido);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(232,197,107,.4);
  box-shadow: var(--lift-4), 0 0 0 1px var(--glass-ring); }
.veu-pro-cartao .pad-tile { margin: 0 auto; }
/* O botão pode quebrar em duas linhas em tela estreita — é melhor que a
   página inteira ganhar rolagem horizontal por causa dele. */
.veu-pro-cartao .btn { max-width: 100%; white-space: normal; }

/* Saúde financeira: três sinais, não uma nota. */
.sinal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.sinal b { display: block; font-size: 14px; font-weight: 700; }
.sinal small { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.sinal .ico { flex: none; margin-top: 2px; }
.sinal.e-ok { background: var(--success-bg); border-color: rgba(14,158,99,.28); }
.sinal.e-ok .ico { color: var(--success-text); }
.sinal.e-nao { background: var(--warning-bg); border-color: rgba(184,134,11,.30); }
.sinal.e-nao .ico { color: var(--warning-text); }

/* Comparativo dos meses: duas barras por mês. Receita e despesa lado a lado
   dizem mais que uma linha de saldo — a linha esconde se o mês foi bom por
   vender mais ou por gastar menos. */
.colunas-mes { display: flex; align-items: flex-end; gap: var(--space-3); height: 150px; }
.col-mes { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 6px; height: 100%; justify-content: flex-end; }
.col-par { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%;
  justify-content: center; }
.col-par i { display: block; width: 12px; border-radius: 4px 4px 0 0; min-height: 3px; }
.col-r { background: linear-gradient(180deg, var(--acc2), var(--acc)); }
.col-d { background: var(--preench-2); }
.col-rot { font-size: 10.5px; font-weight: 700; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .04em; }
.col-val { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.leg { width: 10px; height: 10px; border-radius: 3px; display: block; }
.leg-r { background: var(--acc); } .leg-d { background: var(--preench-2); }

/* Contas a pagar e a receber */
.conta-linha { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle); }
.conta-linha:last-child { border-bottom: 0; }
.conta-quando { flex: none; width: 42px; text-align: center; padding: 4px 0;
  border-radius: 10px; background: var(--preench-1); line-height: 1.1; }
.conta-quando b { display: block; font-size: 15px; font-weight: 750;
  font-variant-numeric: tabular-nums; }
.conta-quando { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  color: var(--text-subtle); letter-spacing: .04em; }
/* O que vence em até três dias muda de cor: é o único caso em que a data
   sozinha não basta para a pessoa reagir. */
.conta-quando.e-urgente { background: var(--danger-bg); color: var(--danger-text); }
.conta-quando.e-urgente b { color: var(--danger-text); }

/* ==========================================================================
   36. CLIENTES — dois funis, lista ou kanban
   --------------------------------------------------------------------------
   O kanban rola na horizontal com colunas de largura fixa. Colunas elásticas
   ficariam ilegíveis com cinco etapas, e empilhar no celular destruiria a
   única coisa que o kanban tem de diferente da lista: ver as etapas lado a
   lado.

   Mover é por MENU, não por arrastar. Arrastar num quadro que rola na
   horizontal é onde todo kanban de celular quebra — e um menu funciona no
   teclado, que o arrasto nunca funcionou.
   ========================================================================== */
.crm-barra { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.crm-card { padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); }
.crm-pe { display: flex; align-items: center; gap: 6px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.crm-frio { color: var(--warning-text); font-weight: 650; }

.kanban { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x proximate; }
.kanban-col { flex: 0 0 288px; scroll-snap-align: start; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--preench-1);
  border: 1px solid var(--border-subtle); }
.kanban-cab { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.kanban-cab b { font-size: 14px; font-weight: 750; }
/* Sem `grid-row: 1`: com ele o contador entrava na primeira célula por
   colocação automática e empurrava o título para a coluna da direita. */
.kanban-n { justify-self: end; font-size: 12px; font-weight: 750; color: var(--text-subtle);
  background: var(--preench-2); border-radius: 99px; padding: 1px 9px; }
.kanban-cab small { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-subtle); }
.kanban-itens { padding: var(--space-3); display: flex; flex-direction: column;
  gap: var(--space-3); min-height: 90px; }
.kanban-vazio { text-align: center; padding: 18px 0; }

.crm-importar { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; font: inherit;
  background: var(--veu-leve); border: 1px solid var(--border-subtle); color: inherit; }
.crm-importar:hover { background: var(--veu-solido); border-color: var(--acc-cheio); }
.crm-importar b { display: block; font-size: 14px; font-weight: 700; }
.crm-importar small { display: block; font-size: 12px; color: var(--text-muted); }
.crm-importar .ico { flex: none; color: var(--acc-ink); }

/* ==========================================================================
   37. MEU LOOB — a tela inteira, em duas colunas
   --------------------------------------------------------------------------
   O perfil vivia numa faixa de 900px no meio de 1400, com vazio dos dois
   lados. Ocupar a largura toda com o MESMO texto seria pior — linha de 1400px
   se lê mal. A coluna lateral resolve os dois: enche o espaço com o que
   precisa estar sempre à vista (contato, disponibilidade, números) e mantém o
   documento na largura em que ele se lê.
   ========================================================================== */
.perfil-largo .perfil-capa { height: 220px; border-radius: 0 0 var(--radius-window) var(--radius-window);
  background-size: cover; background-position: center; }
/* 150px de capa num celular de 844 é 18% da tela gasto em gradiente. 112px
   ainda dá o respiro que separa a capa do conteúdo, e devolve o nome, o
   cargo e a bio para dentro da primeira dobra. */
@media (max-width: 639px) {
  .perfil-largo .perfil-capa { height: 112px; }
  .perfil-largo .perfil-ava { margin-top: -38px; }
  .perfil-largo .perfil-topo { padding-left: var(--space-4); padding-right: var(--space-4); }
}
/* ---- A FOTO -----------------------------------------------------------
   Ela é o que diferencia esta tela de qualquer outro perfil por aí, e o
   dono pediu isso de propósito: em vez da bolinha de 120px espremida no
   canto, uma foto de 200px que sobe metade da altura da capa e fica no
   centro da atenção. O anel branco grosso e a sombra de três camadas
   fazem ela FLUTUAR sobre a capa em vez de estar colada nela. */
.perfil-largo .perfil-topo { padding: 0 var(--space-6); }
.perfil-largo .perfil-ava { margin-top: -104px; }
.perfil-largo .perfil-ava .avatar { width: 200px; height: 200px; font-size: 66px; }
@media (max-width: 639px) {
  .perfil-largo .perfil-ava { margin-top: -60px; }
  .perfil-largo .perfil-ava .avatar { width: 132px; height: 132px; font-size: 44px; }
}

.perfil-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8); align-items: start; margin-top: var(--space-6);
  padding: 0 var(--space-6); }
/* 1023px é o MESMO ponto de `.only-desktop`. Se fossem diferentes, existiria
   uma faixa de larguras em que a disponibilidade aparece duas vezes, e outra
   em que não aparece nenhuma. */
@media (max-width: 1023px) {
  .perfil-grade { grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
    padding: 0 var(--space-4); }
}
/* Sem coluna lateral, o documento fica com a largura toda. Antes da poda dos
   blocos isso nunca acontecia; agora é o caso comum, e a faixa de 340px vazia
   ao lado do texto era exatamente o vazio que ele apontou. */
.perfil-grade.e-sem-lado { grid-template-columns: minmax(0, 1fr); }
/* O documento OCUPA a coluna. Ele tinha teto de 720px dentro de uma coluna
   de ~950px, e o que sobrava era uma faixa branca entre ele e a coluna da
   direita — exatamente o buraco que o dono viu. Quem precisa de largura de
   leitura é o TEXTO CORRIDO, não o cartão nem a grade; então o teto mudou de
   lugar: saiu do bloco e foi para os parágrafos. */
.perfil-doc { max-width: none; min-width: 0; }
.perfil-doc > .prose,
.perfil-doc .doc-section > .prose { max-width: 74ch; }

.perfil-lado { display: flex; flex-direction: column; gap: var(--space-3);
  position: sticky; top: calc(var(--chrome-h, 188px) + 16px);
  max-height: calc(100vh - var(--chrome-h, 188px) - 32px);
  overflow-y: auto; scrollbar-width: none; }
.perfil-lado::-webkit-scrollbar { display: none; }
.perfil-lado > * { flex: 0 0 auto; }
@media (max-width: 1023px) { .perfil-lado { position: static; max-height: none; } }

.lado-bloco { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); }
.lado-cab { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.lado-cab b { font-size: 12.5px; font-weight: 750; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-subtle); }
.lado-disp { border-color: rgba(14,158,99,.32); background: var(--success-bg); }
.lado-disp .lado-cab, .lado-disp .lado-cab b { color: var(--success-text); }
/* `.lado-nums`, `.lado-tg` e `.lado-editar` saíram junto com os blocos deles
   na coluna lateral do perfil. `.lado-contato*` FICA: o modal de contato, o
   que abre pelo ícone de envelope no topo da conversa, usa as mesmas linhas. */
.lado-contatos { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); }
.lado-contato { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-md); color: inherit; }
a.lado-contato:hover { text-decoration: none; background: var(--veu-solido); }
.lado-contato > .ico { flex: none; color: var(--acc-ink); }
.lado-contato small { display: block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.lado-contato b { display: block; font-size: 13.5px; font-weight: 600; }

/* Editar meu Loob — blocos que salvam sozinhos.
   Formulário longo com um "Salvar" único no fim é onde a pessoa perde meia
   hora de digitação por causa de um campo obrigatório lá em cima. */
/* A grade era `auto-fit minmax(360px, 1fr)`: o navegador escolhia quantas
   colunas cabiam e cada cartão terminava na altura que quisesse, com os botões
   Salvar espalhados em alturas diferentes. Agora a linha é DECIDIDA — 12
   colunas, cada bloco declara se ocupa a linha toda ou metade — e dentro de
   uma linha os dois cartões têm a mesma altura, porque o grid estica os itens
   e o rodapé é empurrado para baixo pelo `margin-top:auto`. É isso que faz os
   botões ficarem alinhados: não é sorte de conteúdo. */
.ed-grade { display: grid; gap: var(--space-4); grid-template-columns: repeat(12, 1fr); }
.ed-bloco { grid-column: span 12; display: flex; flex-direction: column;
  padding: var(--space-5); border-radius: var(--radius-window);
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); }
.ed-bloco.e-meio { grid-column: span 6; }
@media (max-width: 900px) { .ed-bloco.e-meio { grid-column: span 12; } }
.ed-corpo { flex: 1; }
.ed-cab { margin-bottom: var(--space-4); }
.ed-cab p { margin-top: 2px; }
.ed-pe { display: flex; justify-content: flex-end; margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }

/* A barra de completude. Não é medalha: cada item que falta é um jeito a menos
   de alguém te achar, e é isso que o texto do chip diz. */
.ed-progresso { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-window); border: 1px solid var(--border-subtle);
  background: linear-gradient(120deg, rgba(14,158,99,.10), var(--veu-solido) 55%); }
.ed-prog-topo { display: flex; align-items: flex-start; gap: var(--space-4); }
.ed-prog-topo > div:first-child { flex: 1; }
.ed-prog-num { font-size: 28px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.ed-prog-num span { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.ed-prog-barra { height: 8px; border-radius: 999px; background: var(--preench-1);
  margin-top: var(--space-3); overflow: hidden; }
.ed-prog-barra i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), var(--brand-green));
  transition: width .4s ease; }
.ed-prog-faltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.ed-falta { gap: 5px; }

/* Ofertas e buscas: a linha é [área] [o quê] [x]. Em telas estreitas a área
   fica em cima, porque um select de 22 itens espremido em 40% da largura não
   dá para ler. */
.ed-net { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ed-net-item { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap: 8px; align-items: center; }
@media (max-width: 620px) { .ed-net-item { grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "cat cat" "sub x"; }
  .ed-net-item .ed-net-cat { grid-area: cat; }
  .ed-net-item .ed-net-sub { grid-area: sub; }
  .ed-net-item .ed-net-x   { grid-area: x; } }
.ed-net-x { color: var(--text-subtle); }
.ed-net-x:hover { color: var(--danger-text); background: var(--preench-2); }

/* --------------------------------------------------------------------------
   A ABA DO CURRÍCULO
   --------------------------------------------------------------------------
   Cinco grupos empilhados, e cada linha é uma grade que se adapta ao que
   aquele grupo pede: experiência tem cargo, empresa, duas datas e um texto;
   habilidade tem um campo e o botão de remover. Uma grade só para todos
   deixaria o campo de "idioma" com a largura do campo de "descrição".
   ------------------------------------------------------------------------ */
.cv-editor { display: flex; flex-direction: column; gap: var(--space-5); }
.cv-topo { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.cv-topo-foto { flex: none; }
.cv-grupo { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.cv-grupo-cab { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3); }
.cv-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.cv-item { display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--veu-leve); border: 1px solid var(--border-subtle); }
.cv-item-campos { flex: 1; min-width: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.cv-item.e-compacto .cv-item-campos { grid-template-columns: minmax(0, 1fr); }
.cv-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-campo-largo { grid-column: 1 / -1; }
.cv-atual { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text-muted); padding-bottom: 10px; }
.cv-atual input { width: 16px; height: 16px; flex: none; }
.cv-x { flex: none; color: var(--text-subtle); margin-top: 18px; }
.cv-x:hover { color: var(--danger-text); background: var(--preench-2); }
.cv-dica { margin-top: 8px; display: block; }
.cv-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5); }
.cv-publicar { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.cv-publicar b { display: block; }
.cv-publicar span { display: block; }
@media (max-width: 720px) {
  .cv-item-campos { grid-template-columns: minmax(0, 1fr); }
  .cv-dois { grid-template-columns: minmax(0, 1fr); }
  .cv-x { margin-top: 0; }
}
/* No celular a fileira [foto][texto][botão] não cabe: o nome quebrava uma
   palavra por linha para dar espaço ao botão. Quebrando a linha, cada um fica
   com a largura inteira. */
@media (max-width: 560px) {
  .cv-topo { flex-wrap: wrap; }
  .cv-topo > .flex1 { flex: 1 1 60%; min-width: 0; }
  .cv-topo .btn { flex: 1 0 100%; justify-content: center; }
  .cv-publicar { flex-wrap: wrap; }
  .cv-publicar .btn { flex: 1 0 100%; justify-content: center; }
}

/* O termo de consentimento. A lista respira porque é para ser LIDA — texto
   corrido de cinco linhas dentro de um modal ninguém lê. */
.modal-termo { max-width: 560px; }
.termo-caixa { margin-top: 14px; padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); max-height: 42vh; overflow-y: auto; }
.termo-caixa ul { margin: 0; padding-left: 18px; }
.termo-caixa li { margin-bottom: 8px; font-size: 14px; line-height: 1.5;
  color: var(--text-muted); }
.termo-caixa p { margin: 10px 0 0; }
.termo-aceite { margin-top: 14px; display: flex; align-items: flex-start;
  gap: 10px; }
.termo-aceite a { text-decoration: underline; }
/* O termo inteiro cabe numa janela rolável: quem quer ler, lê; quem não quer,
   não é obrigado a rolar a tela toda para achar o botão. */
.termo-longo { max-height: 52vh; font-size: 13.5px; line-height: 1.6;
  color: var(--text-muted); white-space: normal; }
/* Dois cartões ocupam metade cada, e num quadro mais estreito: três colunas
   esticadas para dois planos deixa cada cartão com 620px e a lista de
   benefícios vira uma linha só de texto atravessando a tela. */
.planos-dois { grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px; margin: 0 auto; }
@media (max-width: 1023px) { .planos-dois { grid-template-columns: minmax(0,1fr); } }

/* Contato fechado: o bloco existe, e o que ele oferece é a conversa. Sumir a
   seção faria parecer que a pessoa não tem contato nenhum. */
.lado-contato-fechado { border-style: dashed; }

/* --------------------------------------------------------------------------
   O CURRÍCULO — a folha
   --------------------------------------------------------------------------
   Uma página com endereço próprio (#/curriculo/<id>), sem a moldura do app.
   Na tela é uma FOLHA branca sobre o fundo do Loob, como um editor de
   documentos; na impressora é só o documento.

   As cores são as da plataforma — violeta 700 e o azul-marinho da marca, os
   mesmos tokens do app — porque um currículo saído do Loob tem de parecer
   saído do Loob. Aqui elas são escritas em HEX, e não em var(--token): a
   folha é branca em qualquer tema, e herdar o token faria o documento virar
   escuro no tema escuro e sair ilegível ao imprimir.
   ------------------------------------------------------------------------ */
/* O `env(safe-area-inset-top)` NÃO é detalhe: esta rota não tem app shell, e
   com `viewport-fit=cover` o alto da página fica DEBAixo da barra de status do
   telefone. Sem ele a pastilha de voltar subia por cima do relógio — foi o que
   apareceu no print, e é o tipo de coisa que faz uma tela inteira parecer mal
   acabada. Todo o resto do app já respeita a área segura; esta tela não. */
.cv-pagina { max-width: 880px; margin: 0 auto;
  padding: calc(var(--space-6) + env(safe-area-inset-top, 0px)) var(--space-4) 64px; }
/* A barra de voltar GRUDA no alto. A folha tem duas telas de altura e a rota
   não tem app shell (nem topo, nem barra de baixo): sem grudar, a segunda tela
   do currículo não tinha saída nenhuma — o que no celular, onde o currículo
   abre na mesma aba, é ficar sem app. */
.cv-barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  margin: calc(var(--space-6) * -1) 0 var(--space-4); padding: 12px 0 10px; }
/* O botão é uma pastilha com fundo próprio, e não um link solto: ele passa por
   cima da folha branca e do fundo do app enquanto a página rola, e nos dois
   casos precisa continuar legível sozinho. */
.cv-voltar { display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1);
  font-size: 14px; font-weight: 600; color: var(--text-strong); }
.cv-voltar svg { flex: none; }
.cv-folha {
  position: relative; background: #fff; color: #0B1230;
  border-radius: var(--radius-window); padding: 44px 48px 40px;
  box-shadow: var(--lift-3); border: 1px solid rgba(11,18,48,.08);
  font-size: 15px; line-height: 1.55;
}
.cv-vazia { text-align: center; padding: 64px 32px; }
.cv-imprimir { position: absolute; top: -6px; right: 0; transform: translateY(-100%); }
.cv-faixa { height: 5px; border-radius: 3px; margin-bottom: 24px;
  background: linear-gradient(96deg, #0E2A66 0%, #2B3F9E 46%, #7A63F6 100%); }
.cv-cab { display: flex; gap: 22px; align-items: center;
  border-bottom: 1px solid #DCDCD8; padding-bottom: 18px; margin-bottom: 6px; }
.cv-retrato { width: 104px; height: 104px; flex: none; border-radius: 50%; object-fit: cover;
  background: #F4F2FE; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #7A63F6; }
.cv-ident { flex: 1; min-width: 0; }
.cv-folha h1 { font-size: 30px; line-height: 1.15; margin: 0 0 4px;
  letter-spacing: -.02em; color: #0B1230; }
.cv-cargo { font-size: 16px; color: #4A31B8; font-weight: 600; margin: 0 0 10px; }
.cv-linhas { font-size: 13px; color: #52535C; display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* A marca: 26px de altura. O documento é da pessoa; o Loob assina. */
.cv-marca { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cv-marca img { height: 26px; width: auto; display: block; }
.cv-marca small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6E6F75; }
.cv-folha section { page-break-inside: avoid; }
.cv-folha h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: #4A31B8; margin: 22px 0 10px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; }
.cv-folha h2::after { content: ""; flex: 1; height: 1px; background: #EAE6FD; }
.cv-folha p { margin: 0 0 10px; }
.cv-folha ul { margin: 0; padding-left: 18px; }
.cv-folha li { margin-bottom: 4px; }
.cv-resumo { border-left: 3px solid #7A63F6; padding-left: 14px; color: #3A3B47; }
.cv-entrada { margin-bottom: 14px; page-break-inside: avoid; }
.cv-entrada-topo { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.cv-entrada-topo b { font-size: 16px; color: #0B1230; }
.cv-quando { font-size: 12px; color: #52535C; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.cv-onde { font-size: 13px; color: #52535C; margin-bottom: 4px; }
.cv-entrada p { font-size: 14px; color: #3A3B47; margin: 0; }
.cv-duas { display: flex; gap: 32px; flex-wrap: wrap; }
.cv-duas > section { flex: 1; min-width: 220px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chips span { border: 1px solid #D6CEFB; background: #F4F2FE; color: #2E1F73;
  border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.cv-rodape { margin-top: 32px; padding-top: 12px; border-top: 1px solid #DCDCD8;
  font-size: 11px; color: #52535C; display: flex; align-items: center; gap: 8px; }
.cv-rodape img { height: 14px; width: auto; opacity: .75; }
@media (max-width: 720px) {
  .cv-folha { padding: 28px 22px 26px; }
  .cv-cab { gap: 16px; }
  .cv-imprimir { position: static; transform: none; margin-bottom: 14px; }
  /* No celular a folha ocupa a largura toda, e a pastilha em tamanho de botão
     ficava do tamanho do "Imprimir ou salvar em PDF" logo abaixo — dois botões
     de mesmo peso, um deles secundário. Aqui ela encolhe para o que é: uma
     saída, não uma ação. */
  .cv-pagina { padding-left: 12px; padding-right: 12px;
    padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); }
  .cv-barra { margin: calc(var(--space-4) * -1) 0 10px; padding: 8px 0 6px; }
  .cv-voltar { font-size: 13px; gap: 5px; padding: 6px 12px 6px 8px; }
  /* No celular a fileira do cabeçalho tem 346px úteis: retrato de 104, nome de
     30px e a marca não cabem juntos, e o nome quebrava no meio. O retrato
     encolhe, o nome também, e a marca perde a legenda — ela continua sendo
     assinatura, e assinatura não precisa de rótulo. */
  .cv-retrato { width: 76px; height: 76px; }
  .cv-folha h1 { font-size: 24px; }
  .cv-marca img { height: 20px; }
  .cv-marca small { display: none; }
}
/* Na impressora sobra o documento: sem fundo do app, sem botão, sem borda.
   `print-color-adjust: exact` é o que faz a faixa e a foto saírem no PDF — sem
   ele o navegador "economiza tinta" e a identidade some justamente no arquivo
   que a pessoa manda. */
@media print {
  @page { margin: 14mm 12mm; }
  body { background: #fff !important; }
  .cv-pagina { max-width: none; padding: 0; }
  .cv-barra, .cv-voltar, .cv-imprimir { display: none !important; }
  .cv-folha { box-shadow: none; border: 0; border-radius: 0; padding: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Localização e verificação: dois cartões dentro do cartão. Fundo próprio para
   dizer "isto aqui é um pedido de permissão", não mais um campo. */
.ed-geo, .ed-verif { margin-top: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--surface-sunken); }
.ed-geo.e-ligado { border-color: rgba(14,158,99,.34);
  background: linear-gradient(120deg, rgba(14,158,99,.10), var(--surface-sunken) 60%); }
.ed-verif.e-ok { border-color: rgba(14,158,99,.34);
  background: linear-gradient(120deg, rgba(14,158,99,.10), var(--surface-sunken) 60%); }
.ed-geo .ico, .ed-verif .ico { flex: none; }

/* O @ — campo com moldura fixa. O arroba é do CAMPO, não do texto: assim
   ninguém digita "@@bruno" e ninguém precisa lembrar de pôr o @. */
.ed-arroba { display: flex; align-items: center; gap: 8px; }
.ed-arroba .input { flex: 1; min-width: 0; padding-left: 26px; }
.ed-arroba-fixo { position: absolute; margin-left: 11px; pointer-events: none;
  color: var(--text-muted); font-weight: 600; }
.ed-arroba .btn { flex: none; }
.ed-arroba-nao { padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface-sunken); border: 1px dashed var(--border-default); }
.ed-ar-ok   { color: var(--success-text); display: block; margin-top: 6px; }
.ed-ar-erro { color: var(--danger-text);  display: block; margin-top: 6px; }
.ed-achavel-linha { width: 100%; padding: 14px 0 2px; margin-top: 4px;
  border-top: 1px solid var(--border-subtle); }

/* O QR precisa de fundo claro e margem, sempre: leitor de câmera não lê um
   código transparente sobre tema escuro. Por isso o branco é do desenho, e
   não do tema. */
.qr-img { display: block; margin: 0 auto; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border-subtle); }

/* As autorizações ao lado do dado que elas liberam. */
.lado-consent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.lado-consent-linha { width: 100%; padding: 8px 0; }

/* Trilha: a bolinha diz o que aconteceu antes de qualquer leitura. */
.hist-lista { display: flex; flex-direction: column; gap: 2px; }
.hist-linha { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle); }
.hist-linha:last-child { border-bottom: 0; }
.hist-bola { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none;
  background: var(--text-subtle); }
.hist-bola.e-sim { background: var(--success-text); }
.hist-bola.e-adm { background: var(--violet-500, #7A63F6); }

/* A ficha de cadastro. Janela mais larga porque é leitura, não confirmação. */
.modal.modal-largo { max-width: 720px; width: min(720px, calc(100vw - 32px)); }
.ficha section { margin-bottom: 20px; }
.ficha h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 8px; }
.ficha-linha { display: flex; gap: 12px; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.ficha-linha span { color: var(--text-muted); flex: none; }
.ficha-linha b { text-align: right; word-break: break-word; font-weight: 600; }
.ficha-cons { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px;
  border-radius: 10px; background: var(--surface-sunken); margin-bottom: 6px;
  color: var(--text-muted); }
.ficha-cons.e-sim { background: rgba(14,158,99,.10); color: var(--success-text); }
.ficha-cons b { display: block; font-size: 14px; color: var(--text-default); }
.ficha-cons small { font-size: 12px; color: var(--text-muted); }
.ficha-abriu { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.chip.is-on { background: var(--acc); color: #fff; border-color: transparent; }

/* Conta de operação: cinza, sem cor de plano — ela não é cliente. */
.adm-linha.e-operacao { background: var(--surface-sunken);
  box-shadow: inset 3px 0 0 var(--text-subtle); }

/* Excluir a conta. Fica no fim do cartão, separada por uma linha: quem
   procura isso procura de propósito, e quem não está procurando não tropeça. */
.conta-perigo { margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle); }
.conta-perigo p { margin-top: 2px; }

/* O que vai e o que fica, lado a lado — a pessoa decide vendo os dois. */
.exc-listas { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .exc-listas { grid-template-columns: 1fr; } }
.exc-bloco { padding: 12px 14px; border-radius: var(--radius-lg);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.exc-bloco b { display: flex; align-items: center; gap: 6px; font-size: 13px;
  margin-bottom: 8px; }
.exc-bloco ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6;
  color: var(--text-muted); }
.exc-bloco.e-vai b { color: var(--danger-text); }
.exc-bloco.e-fica b { color: var(--text-muted); }
.exc-bloco p { margin-top: 8px; }
/* O termo é para ser LIDO: fonte um pouco menor, caixa própria, e rolagem
   se ele crescer — não um parágrafo perdido no meio da janela. */
.exc-termo { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--preench-1); border: 1px solid var(--border-subtle);
  font-size: 13px; line-height: 1.55; color: var(--text-default);
  max-height: 160px; overflow-y: auto; }

/* O @ no perfil: abaixo do nome, discreto, e clicável porque serve para ser
   copiado e passado adiante. */
.perfil-arroba { display: inline-block; margin-top: 2px; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; font-size: 15px;
  font-weight: 600; color: var(--text-muted); letter-spacing: -.01em; }
.perfil-arroba:hover { color: var(--acc); text-decoration: underline; }
/* Botão de permissão tem rótulo longo por natureza — ele quebra em duas
   linhas em vez de o texto ser cortado no meio da palavra. */
.ed-geo .btn, .ed-verif .btn { white-space: normal; max-width: 100%; }
.ed-imagens { position: relative; }
.ed-capa { height: 120px; border-radius: var(--radius-lg); display: grid; place-items: center;
  position: relative; overflow: hidden; }
/* O botão fica sobre uma capa colorida (ou sobre a foto que a pessoa enviar),
   então ele não pode depender do véu translúcido: precisa de fundo próprio,
   senão o contraste muda com a imagem de fundo. */
/* `:root` na frente é para GANHAR de `:root[data-tema="escuro"] .btn-secondary`,
   que tem especificidade (0,3,0). Sem ele, no tema escuro o botão voltava a
   ser translúcido em cima da capa colorida e o rótulo caía para 3,4:1. */
:root .ed-capa .btn-secondary { position: relative; z-index: 1;
  background: var(--surface-raised); border-color: var(--border-default); }
.ed-capa::before { content: ""; position: absolute; inset: 0;
  background: rgba(11,18,48,.18); }
.ed-capa {
  background: linear-gradient(120deg, var(--acc), var(--acc2) 60%, var(--brand-green));
  background-size: cover; background-position: center; }
.ed-capa.e-vazia { border: 1px dashed var(--border-default); }
.ed-foto { display: flex; align-items: center; gap: var(--space-3); margin-top: -34px;
  padding-left: var(--space-4); position: relative; }
.ed-foto .avatar { box-shadow: 0 0 0 4px var(--surface-raised), var(--lift-2); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ed-chip { padding-right: 4px; }
.ed-chip-x { border: 0; background: transparent; cursor: pointer; padding: 2px;
  margin-left: 4px; border-radius: 50%; color: var(--text-subtle); display: inline-flex; }
.ed-chip-x:hover { background: var(--preench-2); color: var(--danger-text); }
.ed-chip-mais { border-style: dashed; }
.ed-tg { display: flex; flex-direction: column; gap: var(--space-3); }
.ed-tg-topo { display: flex; align-items: center; gap: var(--space-3); }
.ed-tg .campo { margin: 0; }
.textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; padding-top: 12px; }

/* A Bruna fixada no topo de Mensagens */
.msg-bruna { border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(90deg, rgba(37,211,102,.10), transparent 70%); }
.msg-bruna[aria-current="true"] { box-shadow: inset 3px 0 0 var(--success-text); }
.bruna-ava { width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #04120b;
  background: linear-gradient(160deg, #4FE39B, #128C7E); }
.msg-thread-bruna .chat-bruna { border: 0; border-radius: 0; box-shadow: none;
  background: transparent; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.msg-thread-bruna .chat-bruna-msgs { height: auto; flex: 1; min-height: 0; }
.msg-thread-bruna .chat-bruna-campo { flex: none; }
.msg-thread-bruna .chat-bruna-atalhos { flex: none; }

/* Cartão de KPI que é ATALHO. O único da fileira que se move no hover, porque
   é o único onde clicar leva a algum lugar. */
.kpi-acaocard { display: block; color: inherit; cursor: pointer;
  border-color: rgba(90,63,224,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.kpi-acaocard:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--lift-2), 0 0 0 1px var(--acc-glow); }
.kpi-acao-lnk { display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--acc-ink); }
.kpi-acao-lnk .ico { flex: none; }

/* ==========================================================================
   38. PÁGINA DO EVENTO
   --------------------------------------------------------------------------
   A caixa de inscrição fica FIXA na lateral. Em página longa, o botão que
   decide não pode depender de a pessoa lembrar de rolar de volta — e é a
   mesma razão de a lateral do perfil ser fixa.
   ========================================================================== */
.ev-topo { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-window); margin: var(--space-4) 0 var(--space-6);
  background: linear-gradient(135deg, var(--acc), var(--acc2)); position: relative;
  overflow: hidden; }
.ev-topo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 88% 0%, rgba(255,255,255,.28), transparent 62%); }
/* O bloco de texto ganha uma placa própria: sobre gradiente colorido, texto
   escuro solto muda de contraste com a cor da categoria. */
.ev-topo-txt { position: relative; z-index: 1; max-width: 720px;
  background: var(--veu-solido); padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg); box-shadow: var(--lift-2); }
.ev-topo-data { position: relative; z-index: 1; flex: none; text-align: center;
  padding: 12px 18px; border-radius: var(--radius-lg); line-height: 1;
  background: var(--veu-solido); box-shadow: var(--lift-2); }
.ev-topo-data b { display: block; font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.ev-topo-data span { display: block; font-size: 11px; font-weight: 750;
  letter-spacing: .08em; color: var(--text-subtle); margin-top: 3px; }
@media (max-width: 767px) {
  .ev-topo { flex-direction: column; align-items: stretch; padding: var(--space-4); }
  .ev-topo-data { align-self: flex-start; }
}

.ev-grade { display: grid; grid-template-columns: minmax(0,1fr) 320px;
  gap: var(--space-8); align-items: start; }
@media (max-width: 1023px) {
  .ev-grade { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
  .ev-caixa { order: -1; }
}
.ev-doc { max-width: 720px; }
.ev-caixa { position: sticky; top: calc(var(--chrome-h, 188px) + 16px); }
@media (max-width: 1023px) { .ev-caixa { position: static; } }
.ev-caixa-cartao { padding: var(--space-5); border-radius: var(--radius-window);
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-2); }
.ev-preco { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ev-preco span { font-size: 14px; font-weight: 500; color: var(--text-subtle); margin-left: 6px; }
.ev-vagas { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ev-vagas .barra { height: 6px; border-radius: 99px; overflow: hidden; background: var(--preench-1); }
.ev-vagas .barra i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.ev-caixa-cartao .btn-lg { width: 100%; justify-content: center; }
.ev-confirmado { display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  border-radius: var(--radius-lg); background: var(--success-bg);
  border: 1px solid rgba(14,158,99,.3); }
.ev-confirmado > .ico { flex: none; color: var(--success-text); margin-top: 1px; }
.ev-confirmado b { display: block; font-size: 14.5px; color: var(--text-strong); }
.ev-confirmado span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.btn-block { width: 100%; justify-content: center; }

/* ==========================================================================
   39. BRUNA IA — a página, na ordem do dono
   --------------------------------------------------------------------------
   A foto dela não é enfeite: o produto é uma conversa com alguém, e um ícone
   abstrato no lugar do rosto esconde exatamente isso. Ela entra com fundo
   transparente sobre um halo verde, para não parecer recorte colado.
   ========================================================================== */
.bruna-alto { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: var(--space-8); align-items: center; padding: var(--space-6) 0 var(--space-8); }
@media (max-width: 900px) {
  .bruna-alto { grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
  .bruna-alto-foto { order: -1; max-width: 320px; margin: 0 auto; }
}
/* A foto oficial é um retrato COM fundo, não um recorte. Por isso ela ganha
   moldura arredondada e o brilho escapa por trás — o halo redondo de antes
   existia para preencher o vazio de um PNG transparente que não existe mais. */
.bruna-alto-foto { position: relative; }
.bruna-alto-foto::before { content: ""; position: absolute; inset: 10% -5% -5% 5%;
  border-radius: var(--radius-window); z-index: 0;
  background: linear-gradient(150deg, rgba(37,211,102,.34), rgba(107,92,255,.26));
  filter: blur(28px); }
.bruna-alto-foto img { position: relative; z-index: 1; width: 100%; height: auto;
  display: block; border-radius: var(--radius-window);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 26px 54px -22px rgba(11,18,48,.45); }
.bruna-selos { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.bruna-selos span { display: flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--text-muted); }
.bruna-selos .ico { flex: none; color: var(--success-text); }

.bruna-conversa { margin: 8px 0 56px; }
/* Onde a conversa vive. Responde antes de a pessoa perguntar. */
.bruna-fixada { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: var(--space-3); padding: 14px var(--space-5);
  border-radius: var(--radius-lg); background: rgba(37,211,102,.08);
  border: 1px dashed rgba(37,211,102,.35); }
.bruna-fixada > .ico { flex: none; color: var(--success-text); }
.bruna-fixada b { display: block; font-size: 14px; }
.bruna-fixada span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---- COMO A BRUNA TE TRATA ------------------------------------------------
   A configuração fica logo depois da conversa. Ela é um cartão sóbrio de
   propósito: o que manda a página é a conversa acima e a oferta abaixo, e um
   painel de ajustes com cor forte no meio roubaria os dois. */
.bruna-config { margin: 0 0 56px; }
.bruna-cfg-grade { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bruna-cfg-bloco { padding: var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-raised);
  display: flex; flex-direction: column; gap: var(--space-4); }
.bruna-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
/* A pastilha escolhida. `e-on` e não `:focus`: a escolha continua visível
   depois de o dedo sair do botão, que é justamente quando ela importa. */
.bruna-chips .chip.e-on { background: var(--accent-soft); border-color: var(--accent);
  color: var(--violet-900); font-weight: 650; }
/* O contador do Free. Ele NÃO é vermelho enquanto sobra conversa: uma barra de
   alerta o dia inteiro ensina a pessoa a ignorar a barra. Vira aviso só no
   fim, que é quando ela tem alguma coisa a dizer. */
.bruna-teto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--space-4); padding: 14px var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--accent-softer), var(--surface-raised) 70%);
  border: 1px solid var(--border-subtle); }
.bruna-teto > .ico { flex: none; color: var(--action-text); }
.bruna-teto b { display: block; }
.bruna-teto span { display: block; margin-top: 2px; }
.bruna-teto.e-fim { background: var(--warning-bg); border-color: rgba(180,120,10,.28); }
.bruna-teto.e-fim > .ico { color: var(--warning-text); }

.bruna-canais { padding: var(--space-8) var(--space-6); border-radius: var(--radius-window);
  background: linear-gradient(150deg, rgba(232,197,107,.14), var(--veu-forte) 58%);
  border: 1px solid rgba(232,197,107,.34); box-shadow: var(--lift-2); }
.bruna-canais-cab { max-width: 620px; }
.bruna-canais-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr));
  gap: var(--space-3); margin-top: var(--space-5); }
.canal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--veu-solido); border: 1px solid var(--border-subtle); }
.canal b { font-size: 16px; font-weight: 750; }
.canal small { font-size: 12.5px; color: var(--text-muted); }
.canal .btn { margin-top: 10px; }
.canal-wpp > .ico { color: var(--success-text); }
.canal-tg > .ico { color: #14688F; }
:root[data-tema="escuro"] .canal-tg > .ico { color: #6FC9EF; }
.bruna-preco { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5);
  padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }

/* As frases de exemplo viraram BOTÃO: tocar manda a frase na conversa lá em
   cima. Exemplo que só se lê é propaganda; exemplo que se usa é demonstração. */
.bruna-exemplo { display: flex; align-items: center; gap: 7px; width: 100%;
  font-size: 12.5px; line-height: 17px; color: var(--text-muted); text-align: left;
  padding: 7px 10px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: rgba(37,211,102,.07); border: 1px dashed rgba(37,211,102,.32); }
.bruna-exemplo:hover { background: rgba(37,211,102,.14); color: var(--text-strong);
  border-style: solid; }
.bruna-exemplo > .ico:first-child { flex: none; color: var(--success-text); }
.bruna-exemplo > .ico:last-child { flex: none; margin-left: auto; opacity: .5; }
.bruna-exemplo span { min-width: 0; }

.bruna-duvidas { margin: 56px 0 0; }
.duvida { border-radius: var(--radius-lg); background: var(--veu-medio);
  border: 1px solid var(--border-subtle); overflow: hidden; }
.duvida summary { display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: var(--space-4) var(--space-5); font-size: 15px; font-weight: 650;
  list-style: none; }
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary .ico { margin-left: auto; flex: none; color: var(--text-subtle);
  transition: transform var(--dur-fast) var(--ease-out); }
.duvida[open] summary .ico { transform: rotate(90deg); }
.duvida p { padding: 0 var(--space-5) var(--space-5); }

/* O rosto dela, onde ela aparece como contato */
.bruna-rosto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto; box-shadow: 0 0 0 3px rgba(37,211,102,.35); }
img.bruna-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  flex: none; box-shadow: 0 0 0 2px rgba(37,211,102,.4); }
.kpi-ico-foto { border-radius: 50%; object-fit: cover; width: 28px; height: 28px;
  box-shadow: 0 0 0 2px rgba(37,211,102,.4); }

/* ============================================================================
   PORTA DE ENTRADA
   ----------------------------------------------------------------------------
   É a primeira tela que alguém vê do Loob — e, para quem chega por indicação,
   pode ser a única. Por isso ela recebe a mesma luz do resto do produto em vez
   de ser um formulário cinza: o palco atrás, o cartão de vidro na frente.

   O botão do Google vem primeiro e é branco, com a marca dele. Isso não é
   preferência estética: é o botão que as pessoas reconhecem sem ler, e
   redesenhá-lo com a cor do Loob faria as pessoas não o reconhecerem.
   ========================================================================== */
.porta-entrada {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}
.porta-luz { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 38% at 50% 0%, rgba(122,99,246,.30), transparent 66%),
    radial-gradient(40% 30% at 12% 92%, rgba(14,158,99,.16), transparent 68%); }

.porta-cartao {
  position: relative; z-index: 1; width: 100%; max-width: 408px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-window);
  background: var(--veu-solido);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--veu-tenue);
  box-shadow: var(--lift-4), inset 0 1px 0 rgba(255,255,255,.85);
}
.porta-marca { display: flex; justify-content: center; }
.porta-marca img { height: auto; }
.porta-lema { margin: 10px 0 22px; }

.porta-aviso { display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: var(--radius-md); margin-bottom: var(--space-4);
  background: var(--accent-softer); color: var(--tinta-acento);
  font-size: 13.5px; line-height: 19px; }
.porta-aviso .ico { flex: none; margin-top: 2px; }
.porta-aviso-alerta { background: var(--warning-bg); color: var(--warning-text); }

/* O erro fica ACIMA dos campos e some ao primeiro clique seguinte. Erro que
   aparece embaixo do botão, fora da tela num celular, é erro que não existe. */
.porta-erro { padding: 11px 13px; border-radius: var(--radius-md);
  margin-bottom: var(--space-4); background: var(--danger-bg); color: var(--danger-text);
  font-size: 13.5px; line-height: 19px; font-weight: 500; }
.porta-erro[hidden] { display: none; }

.btn-google { background: #fff; color: #1F1F1F; border: 1px solid var(--border-default);
  box-shadow: var(--lift-1); font-weight: 600; }
.btn-google:hover { background: #F7F7F7; box-shadow: var(--lift-2); }
.btn-google .ico { flex: none; }
:root[data-tema="escuro"] .btn-google { background: #fff; color: #1F1F1F;
  border-color: rgba(0,0,0,.2); }
:root[data-tema="escuro"] .btn-google:hover { background: #EFEFEF; }

.porta-ou { display: flex; align-items: center; gap: 12px; margin: var(--space-5) 0; }
.porta-ou::before, .porta-ou::after { content: ""; flex: 1; height: 1px;
  background: var(--border-subtle); }
.porta-ou span { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

.porta-abas { width: 100%; margin-bottom: var(--space-4); }
.porta-abas button { flex: 1; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input { margin-top: 3px; flex: none; width: 16px; height: 16px;
  accent-color: var(--action-primary); }

.porta-esperando { text-align: center; padding-top: var(--space-10);
  padding-bottom: var(--space-10); }
.carregando-anel { width: 30px; height: 30px; margin: var(--space-6) auto var(--space-4);
  border-radius: 50%; border: 3px solid var(--preench-2);
  border-top-color: var(--accent); animation: girar 800ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carregando-anel { animation-duration: 2.4s; } }

@media (max-width: 420px) {
  .porta-cartao { padding: var(--space-6) var(--space-5) var(--space-5); }
}

/* Fileira de atalhos que rola de lado em vez de quebrar em duas linhas. */
.chips-fila { display: flex; align-items: center; gap: var(--space-2);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chips-fila::-webkit-scrollbar { display: none; }
.chips-fila > * { flex: 0 0 auto; }
.chips-rotulo { align-self: center; }
@media (max-width: 767px) { .chips-rotulo { display: none; } }

/* ---- Área ainda no sistema antigo ---------------------------------------
   Existe para dizer a verdade, não para pedir desculpa. Ela é discreta de
   propósito: quanto menos parecer erro, mais fácil é seguir para o botão. */
.migracao { text-align: center; padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-window); margin-top: var(--space-6);
  background: var(--veu-forte); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-2); }
.migracao-ico { display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 18px; margin-bottom: var(--space-5); color: var(--action-text);
  background: var(--accent-softer); border: 1px solid var(--accent-soft); }
.migracao .prose { margin-left: auto; margin-right: auto; }

/* A inicial fica ATRÁS da foto: se a imagem carregar, ela cobre; se falhar, o
   onerror remove a <img> e a inicial aparece sozinha. Sem estado intermediário
   e sem quadrado quebrado. */
.avatar, .logo-sq { position: relative; overflow: hidden; }
.avatar > img, .logo-sq > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; }
.ava-ini { position: absolute; inset: 0; display: grid; place-items: center;
  font: inherit; font-style: normal; z-index: 0; }

/* A legenda da agenda virou filtro: ela já dizia o que cada cor significa,
   faltava poder clicar. O estado ligado usa preenchimento, não só cor — quem
   não distingue as sete cores continua sabendo o que está ativo. */
.ag-legenda-item { display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radius-full); cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-muted);
  border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ag-legenda-item:hover { background: var(--preench-1); color: var(--text-strong); }
.ag-legenda-item.on { background: var(--preench-2); color: var(--text-strong);
  font-weight: 650; border-color: var(--border-default); }
.ag-legenda-limpa { color: var(--action-text); font-weight: 600; }

/* ---- O BOTÃO DOS AVISOS DA BRUNA ----------------------------------------
   Ele mora na mesma linha da legenda, encostado à direita: `margin-left:auto`
   come o espaço que sobra, e é isso — e não uma segunda barra — que o coloca
   do lado direito, debaixo do calendário, sem inventar uma faixa vazia quando
   a legenda ocupa a linha inteira.

   O contorno é o que o separa das sete pastilhas de filtro. As pastilhas
   ligam e desligam; este abre uma tela. Se tivesse a mesma aparência, a
   pessoa tentaria filtrar por "Avisos da Bruna". */
.ag-followup { margin-left: auto; display: inline-flex; align-items: center;
  gap: 10px; padding: 7px 12px 7px 8px; border-radius: var(--radius-full);
  border: 1px solid var(--border-default); background: var(--veu-leve);
  color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer;
  text-align: left; transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out); }
.ag-followup:hover { background: var(--preench-1); border-color: var(--border-strong); }
.ag-followup .dock-tile { --m: .62; flex: none; }
.ag-followup > svg:last-child { color: var(--text-subtle); flex: none; }
.ag-fu-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ag-fu-txt b { color: var(--text-strong); font-weight: 650; font-size: 12.5px; }
.ag-fu-txt small { color: var(--text-subtle); font-size: 11px; }

/* ---- OS AVISOS, UM POR TIPO (o modal) -----------------------------------
   Seis linhas, cada uma com quatro escolhas. No computador a linha é uma só:
   quem é à esquerda, quanto antes à direita — dá para varrer a coluna da
   direita de cima a baixo e ver todas as antecedências sem ler os nomes. */
/* O recado para quem ainda é Free. Fica visível, não escondido num cinza que
   se confunde com a legenda de cima: é a diferença entre "escolhi e vai
   funcionar" e "escolhi e começa quando eu assinar". */
.fu-so-pro { margin-top: 10px; padding: 8px 11px; border-radius: 10px;
  background: var(--preench-1); border: 1px solid var(--border-subtle);
  color: var(--text-muted); }
.fu-lista { display: flex; flex-direction: column; margin-top: 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  overflow: hidden; }
.fu-linha { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: 10px 12px; }
.fu-linha + .fu-linha { border-top: 1px solid var(--border-subtle); }
.fu-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fu-quem .dock-tile { --m: .66; flex: none; }
.fu-nome { font-size: 13.5px; font-weight: 600; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-ops { display: flex; gap: 4px; flex: none; }
.fu-op { min-width: 56px; height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--border-subtle); background: var(--veu-leve);
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out); }
.fu-op:hover { background: var(--preench-1); color: var(--text-strong); }
.fu-op.on { background: var(--acc-cheio); border-color: transparent; color: #fff; }
/* Desligar não é uma antecedência — é a ausência dela. Fica ao lado das
   outras porque é a mesma pergunta, mas mais estreito e sem número, para não
   ser lido como "uma quarta opção de tempo". */
.fu-off { min-width: 38px; color: var(--text-subtle); }
.fu-off.on { background: var(--text-subtle); }

/* No celular a legenda já quebra em várias linhas. Um botão pequeno espremido
   depois de sete pastilhas coloridas seria caçada, não escolha: ele desce
   sozinho e ocupa a largura toda, com o chevron no canto direito dizendo que
   abre alguma coisa.

   No modal, quatro pastilhas de 56px não cabem ao lado de "Aniversários" numa
   tela de 390. A linha vira duas: o nome em cima, as escolhas embaixo numa
   grade de quatro colunas iguais, cada uma com altura de dedo. */
@media (max-width: 767px) {
  .ag-followup { margin-left: 0; flex-basis: 100%; width: 100%;
    justify-content: flex-start; padding: 10px 12px; border-radius: var(--radius-md);
    margin-top: 4px; }
  .ag-followup .dock-tile { --m: .7; }
  .ag-followup > svg:last-child { margin-left: auto; }
  .fu-linha { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .fu-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 46px; }
  .fu-op { min-width: 0; height: 40px; }
  /* Seis linhas de duas alturas passam dos 88vh da gaveta, e o Salvar sai da
     tela. Rolar a LISTA em vez do modal inteiro mantém o botão onde ele
     precisa estar: quem escolhe as seis antecedências e não encontra o
     Salvar acha que a tela travou. */
  .modal-fu .fu-lista { max-height: 46vh; overflow-y: auto; }
}

/* Blocos e itens da agenda agora são botões — precisam parecer clicáveis. */
button.ag-bloco, button.agenda-item, button.ag-marca { cursor: pointer;
  font: inherit; text-align: left; width: 100%; }
button.ag-bloco { display: flex; }
button.agenda-item:hover { background: var(--preench-1); }
button.ag-marca:hover { filter: brightness(.97); }
.modal-actions-3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.btn-perigo { color: var(--danger-text); }

/* Fonte que falhou. Discreta de propósito: ela informa, não alarma — e o
   conteúdo que deu certo continua sendo o assunto principal da tela. */
.falha-faixa { display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4);
  background: var(--warning-bg); color: var(--warning-text);
  border: 1px solid rgba(184,134,11,.28); }
.falha-faixa .ico { flex: none; margin-top: 2px; }
.falha-faixa b { display: block; font-size: 14px; }
.falha-faixa .t-small { display: block; opacity: .92; word-break: break-word; }
.falha-faixa .btn { flex: none; }

/* O valor da faixa Pro é um RECIBO, não um preço em oferta: rótulo primeiro,
   número depois, e a saída para gerenciar. */
.fp-ger { font-size: 12px; font-weight: 650; color: var(--action-text); }

/* ---- Publicação do feed ---------------------------------------------------
   Era um bloco separado só por uma linha, sem ação nenhuma. Ganhou respiro,
   imagem e as duas ações que existem no banco (curtir e o contador de
   comentários). Continua sem moldura: o feed é uma sequência, não uma pilha
   de caixas. */
.pub { display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.pub:last-child { border-bottom: 0; }
.pub-autor-linha { display: flex; align-items: center; gap: 0; min-width: 0; }
.pub-autor-linha .selo { flex: none; }
.pub-autor { font-weight: 650; color: var(--text-strong); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-autor:hover { color: var(--action-text); }
.pub-txt { white-space: pre-wrap; }
.pub-img { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); }
.pub-img img { width: 100%; height: auto; display: block; max-height: 460px; object-fit: cover; }

/* Atividade (alguém passou a oferecer algo, fechou sociedade) tem cara
   diferente de publicação escrita — é o sistema contando, não a pessoa. */
.pub-ativ .pub-txt { font-weight: 550; }
.pub-ativ-ico { flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; color: var(--action-text);
  background: var(--accent-softer); border: 1px solid var(--accent-soft); }

.pub-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pub-acao { display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full); font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  border: 1px solid var(--border-subtle); background: var(--veu-leve); }
.pub-acao:hover { color: var(--text-strong); background: var(--preench-1); }
.pub-acao.on { color: var(--success-text); border-color: rgba(14,158,99,.35);
  background: var(--success-bg); }
.pub-acao-info { cursor: default; }
.pub-acao-info:hover { color: var(--text-muted); background: var(--veu-leve); }

/* Widget vazio continua na coluna: ele convida em vez de sumir. */
.rail-vazio { padding: 10px 0 4px; line-height: 18px; }



/* ============================================================================
   MÊS — no formato de calendário de verdade
   ----------------------------------------------------------------------------
   Antes cada item era uma pílula com fundo, borda e raio cheio. Numa célula de
   96px isso vira um bloco: cabiam dois, e o dia parecia lotado com dois itens.

   Agora cada item é uma LINHA — ponto colorido, hora em negrito, título
   cortando — que é o que o Google Agenda faz e pelo mesmo motivo: densidade.
   Quatro cabem sem aperto, e o dia se lê de relance.
   ========================================================================== */
.ag-cel { position: relative; }
/* O fundo clicável cobre a célula inteira e fica ATRÁS dos itens: clicar no
   vazio abre o dia, clicar num item abre o item. */
.ag-cel-fundo { position: absolute; inset: 0; z-index: 0; border: 0;
  background: transparent; cursor: pointer; }
.ag-cel-num, .ag-cel-itens { position: relative; z-index: 1; }
.ag-cel-itens { gap: 1px; }

.ag-linha { display: flex; align-items: center; gap: 5px; width: 100%;
  min-width: 0; padding: 2px 4px; border: 0; border-radius: 4px;
  background: transparent; font: inherit; font-size: 11.5px; line-height: 16px;
  color: var(--text-strong); cursor: pointer; text-align: left; }
.ag-linha:hover { background: var(--preench-2); }
.ag-linha b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-muted); font-size: 11px; }
.ag-linha-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 550; }
.ag-linha-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-subtle); }
/* Dia inteiro (aniversário, lembrete sem hora) é BARRA preenchida, não ponto —
   é assim que se distingue "acontece às 10h" de "acontece neste dia". */
.ag-linha-barra { flex: none; width: 4px; align-self: stretch; min-height: 14px;
  border-radius: 2px; background: var(--text-subtle); }

.ag-linha.ag-compromisso .ag-linha-ponto, .ag-linha.ag-compromisso .ag-linha-barra { background: #5A3FE0; }
.ag-linha.ag-reuniao     .ag-linha-ponto, .ag-linha.ag-reuniao     .ag-linha-barra { background: #0E9E63; }
.ag-linha.ag-entrevista  .ag-linha-ponto, .ag-linha.ag-entrevista  .ag-linha-barra { background: #3F55E0; }
.ag-linha.ag-evento      .ag-linha-ponto, .ag-linha.ag-evento      .ag-linha-barra { background: #6B3FD0; }
.ag-linha.ag-lembrete    .ag-linha-ponto, .ag-linha.ag-lembrete    .ag-linha-barra { background: #D62F63; }
.ag-linha.ag-rotina      .ag-linha-ponto, .ag-linha.ag-rotina      .ag-linha-barra { background: #8A6A15; }
.ag-linha.ag-aniversario .ag-linha-ponto, .ag-linha.ag-aniversario .ag-linha-barra { background: #C2367B; }
/* Aniversário é o único que ganha fundo: ele é o dia inteiro e é o que a
   pessoa procura na tela do mês. */
.ag-linha.ag-aniversario { background: rgba(194,54,123,.10); }
.ag-linha.ag-aniversario:hover { background: rgba(194,54,123,.18); }

.ag-mais { display: block; width: 100%; text-align: left; padding: 1px 6px;
  border: 0; background: transparent; font: inherit; font-size: 10.5px;
  font-weight: 700; color: var(--action-text); cursor: pointer; }
.ag-mais:hover { text-decoration: underline; }

/* A célula respira mais: 96px cabia dois itens e um "+3". */
.ag-mes { grid-auto-rows: minmax(118px, auto); }
.ag-cel.e-hoje { background: transparent; }
/* Hoje é o NÚMERO que muda, não a célula inteira — célula tingida briga com a
   cor dos itens dentro dela. */
.ag-cel.e-hoje .ag-cel-num { background: var(--acc-cheio); color: #fff; }

@media (max-width: 767px) {
  .ag-mes { grid-auto-rows: minmax(84px, auto); }
  .ag-linha b { display: none; }
  .ag-linha-txt { font-size: 10.5px; }
}

/* ============================================================================
   LISTA DA AGENDA
   ----------------------------------------------------------------------------
   Forma de agenda impressa: a data numa coluna à esquerda, os itens do dia à
   direita. A coluna fixa é o que dá ritmo — sem ela, trinta dias viram uma
   pilha de linhas iguais em que nada se destaca.
   ========================================================================== */
.ag-lista { display: flex; flex-direction: column; }

.ag-lista-mes { font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle);
  padding: var(--space-6) 0 var(--space-3); }
.ag-lista > .ag-lista-mes:first-child { padding-top: 0; }

.ag-dia { display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-4); padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle); }
.ag-dia:first-of-type { border-top: 0; }

.ag-dia-data { display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding-top: 6px; }
.ag-dia-dow { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  color: var(--text-subtle); }
.ag-dia-num { font-size: 26px; line-height: 1; font-weight: 750;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.ag-dia-tag { margin-top: 4px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px;
  border-radius: var(--radius-full); background: var(--acc-cheio); color: #fff; }
.ag-dia-tag.e-amanha { background: var(--preench-2); color: var(--text-muted); }

/* Hoje ganha uma faixa de cor à esquerda do bloco inteiro. */
.ag-dia.e-hoje { position: relative; }
.ag-dia.e-hoje::before { content: ""; position: absolute; left: -14px; top: 10px;
  bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc-cheio); }

.ag-dia-itens { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.ag-item { display: grid; grid-template-columns: 56px minmax(0,1fr) 18px;
  align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: 12px var(--space-4); border-radius: var(--radius-md); font: inherit;
  cursor: pointer; background: var(--veu-medio);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--text-subtle);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out); }
.ag-item:hover { transform: translateX(2px); box-shadow: var(--lift-1); }
.ag-item > .ico { color: var(--text-subtle); }

.ag-item-hora { display: flex; flex-direction: column; align-items: flex-start;
  font-variant-numeric: tabular-nums; }
.ag-item-hora b { font-size: 15px; font-weight: 750; color: var(--text-strong); }
.ag-item-hora small { font-size: 11.5px; color: var(--text-subtle); }
.ag-item-hora b.e-dia { font-size: 10px; font-weight: 800; line-height: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }

.ag-item-corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-item-tit { font-size: 15px; font-weight: 650; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item-sub .ico { flex: none; }
.ag-item-nota { font-size: 12.5px; color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A barra da esquerda carrega o tipo — mesma leitura da semana e do mês. */
.ag-item.ag-compromisso { border-left-color: #5A3FE0; }
.ag-item.ag-reuniao     { border-left-color: #0E9E63; }
.ag-item.ag-entrevista  { border-left-color: #3F55E0; }
.ag-item.ag-evento      { border-left-color: #6B3FD0; }
.ag-item.ag-lembrete    { border-left-color: #D62F63; }
.ag-item.ag-rotina      { border-left-color: #8A6A15; }
.ag-item.ag-aniversario { border-left-color: #C2367B; }

@media (max-width: 767px) {
  .ag-dia { grid-template-columns: 46px minmax(0,1fr); gap: var(--space-3); }
  .ag-dia-num { font-size: 21px; }
  .ag-item { grid-template-columns: 46px minmax(0,1fr) 16px; padding: 10px var(--space-3); }
  .ag-item-hora b { font-size: 13.5px; }
  .ag-item-nota { display: none; }
}

/* ---- Bruna na coluna: uma linha, não um cartão ---------------------------- */
.widget-bruna-linha { display: flex; align-items: center; gap: 11px;
  padding: 11px var(--space-4); color: inherit; }
.widget-bruna-linha:hover { text-decoration: none; border-color: rgba(37,211,102,.45); }
.wbl-nome { display: flex; align-items: center; gap: 7px; font-size: 14px;
  font-weight: 700; color: var(--text-strong); }
.wbl-nome .bruna-dot { position: static; }
.wbl-sub { display: block; font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbl-ir { flex: none; color: var(--text-subtle); display: flex; }

/* ---- A coluna cabe na tela ------------------------------------------------
   O pedido era que nada precisasse rolar. Isso não se resolve com CSS de
   rolagem: resolve-se cortando altura. Os widgets ficaram mais baixos, o
   respiro entre eles menor, e as listas mostram três itens — o quarto está a
   um clique em "Ver mais". A rolagem própria continua como rede de segurança
   para telas muito baixas. */
.rail { gap: var(--space-2); }
.rail .widget { padding: var(--space-4); }
.rail .widget h3 { font-size: 14px; margin-bottom: 10px; }
.rail .rail-linha { padding: 5px 0; }
.rail .rail-porque { padding-left: 40px; font-size: 11px; margin-top: -2px; }
.rail .rail-mais { margin-top: 6px; font-size: 12.5px; }
.rail .rail-vazio { padding: 4px 0 2px; font-size: 12.5px; }
.rail .stack.gap-3 { gap: 10px; }

/* ---- A publicação citada --------------------------------------------------
   Compartilhar aqui é DENTRO da rede: o post que cita outro carrega o
   original junto, num cartão de borda mais leve. A diferença de peso é o que
   diz, sem legenda, que aquilo é de outra pessoa. */
.pub-citado { display: block; margin-top: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--surface-sunken); color: inherit; text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease); }
.pub-citado:hover { border-color: var(--border-default); background: var(--veu-medio);
  text-decoration: none; }
.pub-citado-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pub-citado-cab b { font-size: 13.5px; font-weight: 680; color: var(--text-strong); }
.pub-citado-txt { display: -webkit-box; font-size: 14px; line-height: 21px;
  color: var(--text-muted); white-space: pre-wrap; word-break: break-word; }
.pub-citado-img { display: block; margin-top: 10px; border-radius: var(--radius-2);
  overflow: hidden; }
.pub-citado-img img { display: block; width: 100%; max-height: 260px; object-fit: cover; }

/* A mesma citação, dentro da janela de compartilhar — antes de publicar. */
.rp-citado { margin-top: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--surface-sunken); }

/* ============================================================================
   COMENTÁRIOS SOB A PUBLICAÇÃO
   ----------------------------------------------------------------------------
   Antes: uma linha de texto com o nome em cima e um X de apagar. Sem foto de
   quem escreveu, sem curtir, sem responder — dava para falar, não para
   conversar. Agora é o formato que todo mundo já sabe usar: foto, bolha com
   nome e texto juntos, e embaixo, em letra pequena, o que dá para fazer.
   Duas alturas no máximo (comentário e resposta) — a terceira vira sanfona.
   ========================================================================== */
.pub-coms { display: flex; flex-direction: column; gap: 12px;
  padding: var(--space-3) 0 2px; margin-top: 2px;
  border-top: 1px dashed var(--border-subtle); }
.pub-com { display: flex; align-items: flex-start; gap: 10px; }
.pub-com-corpo { flex: 1; min-width: 0; }

/* A bolha. Nome e texto correm na MESMA linha — é o que faz o comentário
   ocupar duas linhas em vez de quatro, e no celular isso é metade da tela. */
.pub-com-bolha { display: block; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: 4px 16px 16px 16px;
  padding: 8px 13px; font-size: 14px; line-height: 20px; }
.pub-com-nome { font-weight: 680; color: var(--text-strong); text-decoration: none;
  margin-right: 6px; }
a.pub-com-nome:hover { text-decoration: underline; }
.pub-com-txt { color: var(--text-muted); white-space: pre-wrap; word-break: break-word; }

/* O rodapé é discreto de propósito: ele existe para quem procura, não para
   competir com o que a pessoa escreveu. */
.pub-com-rodape { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 5px 4px 0 13px; font-size: 12px; color: var(--text-subtle); }
.pub-com-rodape button { font-size: 12px; font-weight: 650; color: var(--text-subtle);
  cursor: pointer; padding: 2px 0; border-radius: 4px; }
.pub-com-rodape button:hover { color: var(--text-strong); text-decoration: underline; }
.pub-com-rodape .pub-com-apagar:hover { color: var(--danger-text); }

/* O coração. Vazio é traço; curtido preenche e ganha cor — a diferença tem que
   ser visível de relance, sem ler nada. */
.pub-com-curtir { flex: none; margin-top: 7px; color: var(--text-subtle);
  padding: 3px; border-radius: 50%; cursor: pointer;
  transition: color .16s var(--ease), transform .16s var(--ease); }
.pub-com-curtir:hover { color: var(--danger-text); transform: scale(1.12); }
.pub-com-curtir.on { color: var(--danger-text); }
.pub-com-curtir.on svg { fill: currentColor; }

/* As respostas. O recuo vem da linha à esquerda: ela diz "isto pende daquilo"
   sem gastar 40px de largura, que no celular não existem. */
.pub-com-filhos { display: flex; flex-direction: column; gap: 10px;
  margin: 10px 0 2px; padding-left: 14px;
  border-left: 2px solid var(--border-subtle); }
.pub-com-resp .pub-com-bolha { padding: 7px 12px; font-size: 13.5px; line-height: 19px; }
.pub-com-resp .pub-com-rodape { padding-left: 12px; }

.pub-com-campo { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.pub-com-campo .input { flex: 1; min-width: 0; height: 40px; padding: 0 16px;
  border-radius: var(--radius-full); font-size: 14px; }
.pub-com-campo .btn { flex: none; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; justify-content: center; }
.pub-com-campo-resp { margin: 10px 0 2px; padding-left: 14px;
  border-left: 2px solid var(--border-subtle); }
.pub-com-campo-resp .input { height: 36px; font-size: 13.5px; }
.pub-com-campo-resp .btn { width: 36px; height: 36px; }
.pub-com-x { flex: none; color: var(--text-subtle); padding: 4px; border-radius: 8px;
  cursor: pointer; }
.pub-com-x:hover { color: var(--danger-text); background: var(--danger-bg); }

/* ============================================================================
   PERFIL — o topo
   ----------------------------------------------------------------------------
   Antes: capa, e colada nela uma foto de 96px com nome, cargo, bio, números e
   botões espremidos numa coluna à direita. Tudo longe e apertado ao mesmo
   tempo. Agora a foto é grande e monta sobre a capa, a identidade fica na
   linha de base dela, e cada coisa tem a sua faixa.
   ========================================================================== */
.perfil-largo .perfil-capa { position: relative; }
/* Degradê no pé da capa: o que encosta nela precisa de algo sobre o que se
   apoiar, senão o branco da foto some contra a capa clara. */
.perfil-largo .perfil-capa::after { content: ""; position: absolute; inset: auto 0 0 0;
  height: 55%; background: linear-gradient(180deg, transparent, rgba(11,18,48,.28)); }
.perfil-capa.e-sem-capa { background:
  radial-gradient(80% 140% at 15% 0%, rgba(122,99,246,.45), transparent 62%),
  linear-gradient(120deg, var(--violet-800), var(--navy-900)); }
.perfil-capa-editar { position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--radius-full); font-size: 12.5px; font-weight: 650;
  background: rgba(11,18,48,.55); color: #fff; backdrop-filter: blur(8px); }
.perfil-capa-editar:hover { background: rgba(11,18,48,.72); text-decoration: none; }

.perfil-cabeca { display: flex; align-items: flex-end; gap: var(--space-5);
  flex-wrap: wrap; }
.perfil-largo .perfil-ava { position: relative; margin-top: -74px; flex: none; }
.perfil-largo .perfil-ava .avatar { box-shadow: 0 0 0 6px var(--surface-page), var(--lift-3); }
/* O ponto de "disponível" acompanha a foto: numa bolinha de 200px, 8px do
   canto cai FORA do círculo. 14px o traz de volta para cima da borda. */
.perfil-ponto { position: absolute; right: 16px; bottom: 16px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--success); border: 5px solid var(--surface-page); }
@media (max-width: 767px) { .perfil-ponto { right: 10px; bottom: 10px; width: 22px; height: 22px;
  border-width: 4px; } }

.perfil-ident { flex: 1; min-width: 220px; padding-bottom: 4px; }
.perfil-nome { font-size: clamp(24px, 3vw, 34px); line-height: 1.12; font-weight: 750;
  letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perfil-cargo { font-size: 17px; color: var(--text-muted); margin-top: 4px; }
.perfil-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: 8px; }
.perfil-meta span { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--text-subtle); }
.perfil-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-bottom: 4px; }

.perfil-bio { margin-top: var(--space-5); font-size: 16.5px; line-height: 26px;
  color: var(--text-muted); }

/* Os números viraram cartões: como texto solto pareciam legenda. */
.perfil-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3); margin-top: var(--space-5); }
.perfil-num { display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); }
.perfil-num-ico { color: var(--action-text); display: flex; margin-bottom: 4px; }
.perfil-num b { font-size: 26px; line-height: 1; font-weight: 750; letter-spacing: -.03em; }
.perfil-num span:last-child { font-size: 12.5px; color: var(--text-muted); }

/* ---- Ofereço × procuro ----------------------------------------------------
   Duas etiquetas cinzas não dizem se aquilo é oferta ou pedido. Dois cartões
   com cor e verbo próprios dizem — e é essa distinção que faz duas pessoas se
   acharem no Loob. */
.perfil-troca { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4); margin: var(--space-6) 0; }
.troca-card { padding: var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); box-shadow: var(--lift-1); }
.troca-ofereco { background: linear-gradient(150deg, rgba(14,158,99,.12), var(--veu-forte) 60%);
  border-color: rgba(14,158,99,.28); }
.troca-procuro { background: linear-gradient(150deg, rgba(122,99,246,.14), var(--veu-forte) 60%);
  border-color: rgba(122,99,246,.28); }
.troca-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-4); }
.troca-cab .ico { flex: none; margin-top: 2px; }
.troca-ofereco .troca-cab .ico { color: var(--success-text); }
.troca-procuro .troca-cab .ico { color: var(--action-text); }
.troca-cab b { display: block; font-size: 15.5px; font-weight: 700; }
.troca-cab span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.troca-itens { display: flex; flex-wrap: wrap; gap: 7px; }
.troca-item { display: inline-flex; align-items: center; padding: 6px 13px;
  border-radius: var(--radius-full); font-size: 13.5px; font-weight: 600;
  background: var(--veu-solido); border: 1px solid var(--border-subtle); }
.troca-cta { margin-top: var(--space-4); width: 100%; }
/* O aviso mora sobre o cartão roxo do "o que eu procuro", e ali o cinza de
   legenda cai para 4,1:1. Com a tinta de texto normal ele passa dos 4,5. */
.troca-nota { margin-top: var(--space-4); display: flex; align-items: center; gap: 6px;
  color: var(--text-muted); }

/* ---- Depoimentos ----------------------------------------------------------
   Prova social de gente real. O cartão é uma citação: aspas grandes, o texto
   com peso, e quem falou no pé — nessa ordem, porque o que foi dito importa
   mais do que quem disse até a pessoa decidir se acredita. */
.dep-secao { }
.dep-cab { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.dep-cab h2 { margin-bottom: 2px; }
.dep-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4); }
.dep { position: relative; padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); overflow: hidden; }
.dep-aspas { position: absolute; top: -14px; right: 12px; font-size: 84px; line-height: 1;
  font-family: Georgia, serif; color: var(--accent-soft); opacity: .55; pointer-events: none; }
.dep-txt { position: relative; z-index: 1; font-size: 15px; line-height: 24px;
  color: var(--text-strong); }
.dep-pe { display: flex; align-items: center; gap: 10px; margin-top: var(--space-4);
  padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dep-pe b { display: block; font-size: 13.5px; font-weight: 650; }
.dep-quando { flex: none; }
.dep-vazio { text-align: center; padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-lg); border: 1px dashed var(--border-default);
  color: var(--text-subtle); }
.dep-vazio .prose { max-width: 46ch; }

/* Quantos são, ao lado do título — a contagem é a primeira coisa que quem
   chega quer saber, e ela some no meio de um parágrafo. */
.dep-n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 7px; margin-left: 6px;
  border-radius: var(--radius-full); background: var(--accent-softer);
  color: var(--tinta-acento); font-size: 12.5px; font-weight: 700; vertical-align: 2px; }

/* As ações do depoimento aparecem só para quem tem direito a elas: editar e
   apagar para quem escreveu, pedir avaliação para quem recebeu. Discretas —
   o texto é o que importa no cartão. */
.dep-acoes { display: flex; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border-subtle); }
.dep-acao { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  border-radius: var(--radius-full); font-size: 12.5px; font-weight: 620;
  color: var(--text-subtle); cursor: pointer; }
.dep-acao:hover { background: var(--surface-sunken); color: var(--text-strong); }
.dep-acao-x:hover { background: var(--danger-bg); color: var(--danger-text); }
.dep-avaliando { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
  border-radius: var(--radius-full); background: var(--warning-bg);
  color: var(--warning-text); font-size: 12.5px; font-weight: 620; }

@media (max-width: 767px) {
  .perfil-largo .perfil-ava { margin-top: -72px; }
  .perfil-largo .perfil-ava .avatar { width: 156px; height: 156px; font-size: 52px; }
  .perfil-cabeca { gap: var(--space-4); }
  .perfil-acoes { width: 100%; }
  .perfil-acoes .btn { flex: 1; justify-content: center; }
  .perfil-nums { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* ---- OS TRÊS CARTÕES CABEM NUMA LINHA -------------------------------
     São três, e ele pediu UMA linha. Em 390px cada um fica com ~118px, que é
     largura para um número de dois dígitos e um rótulo de duas palavras
     quebradas. Menos padding e um rótulo menor é o que faz caber sem apertar.
     `minmax(0, 1fr)` é o que impede a coluna de crescer com o conteúdo — sem
     ele, "comunidades" empurra a linha e o terceiro cartão cai. */
  .perfil-nums-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .perfil-nums-3 .perfil-num { padding: 12px 10px; }
  .perfil-nums-3 .perfil-num b { font-size: 22px; }
  .perfil-nums-3 .perfil-num span:last-child { font-size: 11px; line-height: 1.25; }
  .perfil-nums-3 .perfil-num-seta { display: none; }

  /* ---- O PERFIL DE OUTRA PESSOA: TUDO NO CENTRO -----------------------
     Sem o convite de reunião e sem a coluna lateral, a cabeça ficava com a
     foto encostada na esquerda e metade da largura vazia à direita — foi o que
     ele circulou de verde. Centralizar não é enfeite: é o que faz a foto voltar
     a ser o assunto quando não há nada para pôr ao lado dela. */
  .perfil-outro .perfil-cabeca { flex-direction: column; align-items: center;
    text-align: center; gap: var(--space-3); }
  .perfil-outro .perfil-ident { min-width: 0; width: 100%; padding-bottom: 0; }
  .perfil-outro .perfil-nome,
  .perfil-outro .perfil-meta { justify-content: center; }
  .perfil-outro .perfil-bio { text-align: center; }

  /* ---- O MEU PERFIL: O BOTÃO OCUPA O VAZIO ----------------------------
     Aqui é o contrário. A foto continua à esquerda, e o espaço ao lado dela —
     que estava vazio — recebe o nome e o Editar. É uma linha só: foto,
     identidade, ação. */
  .perfil-eu .perfil-cabeca { flex-wrap: nowrap; align-items: flex-end; }
  .perfil-eu .perfil-ident { min-width: 0; }
  .perfil-eu .perfil-acoes { width: auto; flex: none; flex-direction: column;
    align-items: stretch; gap: 6px; padding-bottom: 6px; }
  .perfil-eu .perfil-acoes .btn { flex: none; white-space: nowrap; }
  /* O rótulo do Compartilhar cabe no desktop e não cabe aqui: em 390px, com a
     foto de 156px ao lado, sobra pouco mais que o ícone. */
  .perfil-eu .perfil-acoes .btn-ghost .btn-label { display: none; }
}

/* A capa tinha 220px no desktop e ocupava um terço da primeira dobra do
   perfil. 180px continua dando a moldura sem empurrar a pessoa para baixo. */
.perfil-largo .perfil-capa { height: 180px; }
@media (min-width: 1440px) { .perfil-largo .perfil-capa { height: 200px; } }

/* Miniatura do banner na lista do ADM. Sem ela a imagem entrava em tamanho
   natural e empurrava a linha inteira para fora da tela. */
.adm-ban-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border-subtle); flex: none; background: var(--surface-sunken); }

/* A porta do ADM na barra de cima. Ela é violeta cheia de propósito: é a
   única coisa ali que leva para FORA do app da pessoa, para a operação da
   plataforma inteira — e quem tem esse botão precisa achá-lo de relance. */
.btn-adm { background: var(--accent-softer); color: var(--tinta-acento); }
.btn-adm:hover { background: var(--accent-soft); }

/* O diagnóstico da porta fechada do ADM. Ele é uma FICHA TÉCNICA, e parece
   uma: fundo neutro, rótulo e valor lado a lado, e o SQL num bloco que dá
   para copiar com os olhos antes de copiar com o botão. */
.adm-diag { margin-top: var(--space-6); padding: var(--space-5);
  border-radius: var(--radius-lg); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); text-align: left; }
.adm-diag h3 { margin-bottom: var(--space-4); }
.adm-diag-lista { display: grid; gap: 8px; margin-bottom: var(--space-4); }
.adm-diag-lista > div { display: flex; gap: var(--space-4); align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px dashed var(--border-subtle); }
.adm-diag-lista dt { font-size: 13px; color: var(--text-muted); }
.adm-diag-lista dd { font-size: 13.5px; font-weight: 650; color: var(--text-strong);
  margin: 0; word-break: break-all; }
.adm-diag-sql { margin: var(--space-3) 0; padding: 12px 14px; border-radius: var(--radius-2);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  overflow-x: auto; font-size: 12.5px; line-height: 20px; }
.adm-diag-sql code { white-space: pre; color: var(--text-strong); }

/* ==========================================================================
   COMUNIDADES — o módulo que substitui o grupo de WhatsApp de networking.

   A tela tem quatro superfícies e cada uma responde a um defeito do grupo:
   AVISOS (o comunicado que não afunda), CONVERSA (o grupo em si), FOTOS (o
   álbum que não some) e MEMBROS (quem é quem). Elas dividem os mesmos
   pedaços — cartão, avatar, pastilha de camada — e é por isso que quase tudo
   aqui é reaproveitado entre as quatro.
   ========================================================================== */
.tile-com { background: linear-gradient(160deg, #7C9BF7, #3B5BDB); }

/* A pastilha do VIP. Ela não é só mais um `badge-*` de cor diferente: quem é
   VIP paga por isso, e a marca precisa se distinguir num quadro em que já há
   pastilha de papel, de tipo e de estado. Dourado, e com contorno — só a cor
   não sobrevive ao tema escuro nem a quem não distingue matizes. */
.badge-vip { background: linear-gradient(160deg, #F5C86B, #D99A1E); color: #3A2A05;
  border: 1px solid rgba(150,105,10,.35); font-weight: 700; }

.sec-titulo { margin: var(--space-6) 0 var(--space-3); }

/* ---- O CARTÃO ----------------------------------------------------------- */
.com-lista { display: grid; gap: 10px; }
.com-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--veu-solido); color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out); }
.com-card:hover { border-color: var(--border-strong); background: var(--preench-1); }
.com-card > svg:last-child { color: var(--text-subtle); flex: none; }
.com-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.com-card-txt b { font-size: 14.5px; color: var(--text-strong); }
.com-card-txt small { color: var(--text-muted); font-size: 12.5px; }

.com-ava { border-radius: 14px; object-fit: cover; flex: none;
  background: var(--preench-2); }
.com-ava-txt { display: inline-grid; place-items: center; font-weight: 700;
  font-size: 15px; color: var(--text-muted); }

.com-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.com-meta .t-caption { display: inline-flex; align-items: center; gap: 3px; }

/* O contador de não-lidas, e o de pedidos esperando. São o mesmo desenho com
   cores diferentes porque são a mesma pergunta — "tem coisa para mim aqui?" */
.com-bolha { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--acc-cheio); color: #fff;
  font-size: 11px; font-weight: 700; flex: none; margin-left: 6px; }
.com-bolha-alerta { background: #D62F63; }

/* ---- BUSCA -------------------------------------------------------------- */
.com-busca { display: flex; align-items: center; gap: 8px; position: relative;
  margin-bottom: var(--space-5); }
.com-busca .input { padding-left: 40px; flex: 1; }
.com-busca-ic { position: absolute; left: 12px; color: var(--text-subtle);
  pointer-events: none; display: flex; }

/* ---- O PERFIL DA COMUNIDADE --------------------------------------------- */
.com-capa { height: 168px; border-radius: var(--radius-lg); margin-bottom: -38px;
  background: linear-gradient(160deg, #7C9BF7, #3B5BDB) center/cover; }
.com-cabeca { display: flex; align-items: flex-end; gap: 14px; position: relative;
  padding: 0 4px var(--space-4); flex-wrap: wrap; }
.com-cabeca .com-ava { border: 3px solid var(--veu-solido); border-radius: 20px; }
.com-cabeca h1 { margin-bottom: 6px; }
.com-cabeca .btn { flex: none; }
.com-sobre { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.com-paraquem { font-size: 14px; color: var(--text-strong); margin-bottom: 6px; }

/* ---- AVISOS ------------------------------------------------------------- */
.com-avisos { display: grid; gap: 12px; margin-top: var(--space-4); }
.com-aviso { padding: 14px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--veu-solido); }
/* O fixado é marcado pela BORDA, não só pela posição: uma lista rolada perde
   a referência de "o primeiro", e aí "fixado" deixa de significar algo. */
.com-aviso.fixado { border-color: var(--acc-cheio); box-shadow: var(--lift-1); }
.com-aviso.urgente { border-left: 3px solid #D62F63; }
.com-aviso-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; }
.com-aviso h3 { margin-bottom: 6px; }

.com-eventos { display: grid; gap: 8px; margin: var(--space-4) 0; }
.com-evento { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
  background: var(--veu-leve); color: inherit; text-decoration: none; }
.com-evento:hover { background: var(--preench-1); }
.com-evento .dock-tile { --m: .6; flex: none; }
.com-evento b { display: block; font-size: 14px; color: var(--text-strong); }
.com-evento small { display: block; color: var(--text-muted); font-size: 12px; }
/* A janela de inscrição DE QUEM ESTÁ LENDO. A do VIP e a do membro são datas
   diferentes; mostrar só uma faria metade do grupo chegar atrasada. */
.com-janela { display: inline-flex !important; align-items: center; gap: 4px;
  margin-top: 3px; color: var(--text-subtle) !important; font-weight: 600; }
.com-janela.on { color: var(--ok-text, #0E9E63) !important; }

/* ---- A CONVERSA --------------------------------------------------------- */
.com-conversa { display: flex; flex-direction: column; margin-top: var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--veu-solido); }
.com-msgs { display: flex; flex-direction: column; gap: 10px; padding: 16px;
  max-height: 52vh; overflow-y: auto; }
.com-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.com-msg.meu { align-self: flex-end; flex-direction: row-reverse; }
.com-msg-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  flex: none; font-size: 11px; background: var(--preench-2); }
.com-msg-balao { padding: 8px 12px; border-radius: 16px; background: var(--preench-1);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.com-msg.meu .com-msg-balao { background: var(--acc-cheio); color: #fff; }
.com-msg.meu .com-msg-hora { color: rgba(255,255,255,.75); }
.com-msg-nome { font-size: 12px; font-weight: 700; color: var(--acc-texto, var(--action-text)); }
.com-msg-txt { font-size: 14px; line-height: 20px; word-break: break-word;
  white-space: pre-wrap; }
.com-msg-hora { font-size: 10.5px; color: var(--text-subtle); align-self: flex-end; }
.com-msg-vazio { padding: var(--space-4) 0; }

.com-escrever { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--border-subtle); background: var(--veu-leve); }
.com-escrever .input { flex: 1; }
.com-sovip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--text-muted); white-space: nowrap; }

/* ---- FOTOS -------------------------------------------------------------- */
.com-albuns { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: var(--space-4); }
.com-album { color: inherit; text-decoration: none; display: flex; flex-direction: column;
  gap: 4px; }
.com-album-capa { display: grid; place-items: center; aspect-ratio: 4/3;
  border-radius: var(--radius-md); background: var(--preench-2) center/cover;
  color: var(--text-subtle); margin-bottom: 4px; }
.com-album b { font-size: 13.5px; color: var(--text-strong); }
.com-album small { font-size: 12px; color: var(--text-muted); }

/* ---- MEMBROS E GESTÃO ---------------------------------------------------- */
.com-membros { display: grid; gap: 8px; margin-top: var(--space-4); }
.com-membro { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
  background: var(--veu-solido); flex-wrap: wrap; }
.com-membro a { color: inherit; text-decoration: none; }
.com-membro b { display: block; font-size: 14px; color: var(--text-strong); }
.com-membro small { display: block; font-size: 12px; color: var(--text-muted); }
.com-pedido-msg { font-style: italic; margin-top: 3px; }

.com-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.com-link { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); }
.com-link code { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-strong);
  overflow-x: auto; white-space: nowrap; }

.com-fin { display: grid; gap: 2px; }
.com-fin-linha { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); padding: 10px 0; border-bottom: 1px dashed var(--border-subtle); }
.com-fin-linha span { color: var(--text-muted); font-size: 13.5px; }
.com-fin-linha b { color: var(--text-strong); font-size: 15px; font-weight: 650; }
/* O que foi para a conta dele fica em destaque: é a única linha que ele
   confere contra o extrato do banco. */
.com-fin-linha.total { border-bottom: none; border-top: 1px solid var(--border-default);
  margin-top: 4px; padding-top: 12px; }
.com-fin-linha.total b { font-size: 19px; }

/* Uma opção com explicação embaixo. Um checkbox sozinho obriga a pessoa a
   adivinhar o que "urgente" faz — e "urgente" aqui manda notificação para
   trezentas pessoas. */
.check-linha { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--veu-leve); }
.check-linha input { margin-top: 3px; flex: none; }
.check-linha b { display: block; font-size: 13.5px; color: var(--text-strong); }
.check-linha small { display: block; font-size: 12px; color: var(--text-muted);
  line-height: 17px; margin-top: 2px; }

/* No celular a comunidade é onde a pessoa mais volta, e volta com uma mão só.
   A capa encolhe (ela é enfeite, e enfeite não come a primeira dobra), o botão
   principal ocupa a largura toda, e a conversa fica alta o bastante para
   caberem umas quantas mensagens sem rolar. */
@media (max-width: 767px) {
  .com-capa { height: 108px; margin-bottom: -30px; }
  .com-cabeca { align-items: flex-start; }
  .com-cabeca .btn, .com-cabeca > .btn-secondary { width: 100%; }
  .com-msg { max-width: 88%; }
  .com-msgs { max-height: 58vh; padding: 12px; }
  /* A CAIXA DE ESCREVER GRUDA EMBAIXO. No celular a conversa é uma aba abaixo
     de um cabeçalho com capa, nome e pastilhas — sem isto, o campo nasce
     depois da dobra e a pessoa rola para responder uma mensagem que está
     vendo. `overflow:hidden` no pai mataria o `sticky`, então ele sai aqui; o
     canto arredondado é o preço, e é barato. */
  .com-conversa { overflow: visible; }
  .com-escrever { position: sticky; bottom: calc(var(--bottomnav-h, 64px) + 8px);
    z-index: 3; border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
    background: var(--veu-solido); box-shadow: var(--lift-2); }
  .com-acoes .btn { flex: 1 1 calc(50% - 4px); }
  .com-albuns { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .com-busca .btn-primary { padding: 0 12px; }
}

/* No tema escuro o dourado continua sendo dourado, mas o texto sobre ele
   precisa de mais contraste — o cinza-escuro do tema claro some. */
:root[data-tema="escuro"] .badge-vip { color: #241900;
  border-color: rgba(255,220,140,.35); }
:root[data-tema="escuro"] .com-capa,
:root[data-tema="escuro"] .com-card,
:root[data-tema="escuro"] .com-aviso,
:root[data-tema="escuro"] .com-membro,
:root[data-tema="escuro"] .com-conversa { background-color: var(--veu-solido); }

/* ---- O CONVITE QUE CHEGA PELO WHATSAPP -----------------------------------
   A pessoa toca no link dentro de um grupo, quase sempre no celular, quase
   sempre sem conhecer o Loob. Então esta página é uma coluna centrada e curta:
   o que é a comunidade, quantos são, e o botão. Nada de menu, nada de barra —
   é a primeira coisa que ela vê do produto. */
.convite-cartao { text-align: center; position: relative; padding: 0 var(--space-4) var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
.convite-cartao .com-ava { border: 3px solid var(--veu-solido); border-radius: 22px;
  margin-top: -38px; margin-bottom: var(--space-3); }
.convite-cartao .area-olho { margin-bottom: 2px; }
.convite-cartao h1 { margin-bottom: 10px; }
.convite-cartao .prose { color: var(--text-muted); max-width: 46ch; }
.convite-cartao .com-paraquem { font-size: 15px; margin: 8px 0; max-width: 46ch; }
.convite-cartao .com-sobre { width: 100%; text-align: left; margin-top: var(--space-4); }
.convite-cartao > div:last-of-type, .convite-cartao .btn-block { width: 100%; max-width: 380px; }
.com-meta.center { justify-content: center; }

/* "Limitar este link" fica fechado: quem vai mandar no grupo quer o link e o
   botão do WhatsApp, e mais nada. Limite e validade são para o dia em que o
   link vazar — e nesse dia a pessoa procura por eles. */
.com-avancado { margin-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4); }
.com-avancado summary { cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text-muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.com-avancado summary::-webkit-details-marker { display: none; }
.com-avancado summary::before { content: "+"; font-size: 15px; line-height: 1; }
.com-avancado[open] summary::before { content: "−"; }
.com-avancado summary:hover { color: var(--text-strong); }

/* A oferta do VIP dentro da comunidade. Ela é um convite, não um anúncio:
   fica na primeira dobra dos avisos, com o preço à vista, e some para quem já
   é VIP e para quem administra. */
.com-oferta-vip { display: flex; align-items: center; gap: 12px; width: 100%;
  margin: var(--space-4) 0; padding: 12px 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-default); background: var(--veu-leve);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out); }
.com-oferta-vip:hover { background: var(--preench-1); border-color: var(--border-strong); }
.com-oferta-vip .dock-tile { --m: .66; flex: none; }
.com-oferta-vip b { display: block; font-size: 14px; color: var(--text-strong); }
.com-oferta-vip small { display: block; font-size: 12.5px; color: var(--text-muted);
  line-height: 17px; }
.com-oferta-vip > svg:last-child { color: var(--text-subtle); flex: none; }

@media (max-width: 767px) {
  .convite-cartao { padding-bottom: var(--space-5); }
  .convite-cartao .com-ava { margin-top: -32px; }
}

/* A BOLINHA VERMELHA DO SINO — o número, não o ponto.
   O ponto dizia "tem algo"; o número diz QUANTO, que é a diferença entre olhar
   agora e olhar depois. Ele fica na quina de cima do botão redondo, meio para
   fora, como o do WhatsApp: dentro do círculo ele brigaria com o desenho do
   sino e as duas leituras piorariam.

   A borda da cor do fundo é o que separa a bolinha do ícone quando os dois se
   encostam — sem ela o vermelho gruda no traço do sino. */
.sino-badge { position: absolute; top: 1px; right: 0; pointer-events: none;
  border: 2px solid var(--veu-solido); }
.mtop-btn { position: relative; }

/* O cartão de número que ABRE. O de conexões leva para a lista — o dono pediu
   "quero poder ver por aqui a lista de conexões realizadas", e o caminho mais
   curto para ela é o próprio número que a anuncia. A seta é o que diferencia
   os dois: sem ela, um cartão clicável e um cartão morto são idênticos. */
.perfil-num-link { text-decoration: none; color: inherit; position: relative;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out); }
.perfil-num-link:hover { background: var(--preench-1); border-color: var(--border-strong); }
.perfil-num-seta { position: absolute; top: 12px; right: 12px; color: var(--text-subtle);
  display: flex; }

/* ==========================================================================
   O FIO DA CONVERSA — agrupamento, dia, rosto e tique
   --------------------------------------------------------------------------
   O dono pediu que a troca de mensagens parecesse "uma rede social de
   verdade". O que ele via era uma bolha por linha, todas com o mesmo respiro
   e todas com a hora embaixo: cinco mensagens seguidas viravam cinco cartões
   soltos, com cinco vezes a mesma hora, espalhados numa área enorme e vazia.
   ========================================================================== */

/* A CONVERSA COMEÇA EMBAIXO. Numa caixa que rola, o conteúdo curto encosta no
   topo e deixa um vão até o campo de escrever — foi o buraco branco da tela
   dele. `margin-top:auto` no primeiro filho empurra tudo para baixo sem
   quebrar a rolagem (que `justify-content:flex-end` quebraria: o começo da
   conversa longa ficaria inalcançável). */
.bubbles { gap: 0; }
.bubbles > :first-child { margin-top: auto; }

.bubble-linha { display: flex; align-items: flex-end; gap: var(--space-2);
  margin-top: 2px; }
.bubble-linha.e-minha { justify-content: flex-end; }
/* Respiro MAIOR só quando troca de pessoa ou de bloco: é o que dá o ritmo de
   conversa em vez de lista. A marca vem do JS (`l-abre`) e não de `:has()`:
   a regra é a mesma, e esta funciona em navegador antigo também. */
.bubble-linha.l-abre { margin-top: var(--space-3); }
.bubble-linha:first-child { margin-top: auto; }

/* O rosto ocupa lugar em TODAS as linhas do bloco, mesmo vazio — senão as
   bolhas do meio ficariam mais largas que a de baixo e o bloco sairia
   escalonado. */
.bubble-rosto { flex: none; width: 26px; display: flex; align-items: flex-end; }

/* Cantos: só as pontas do bloco são redondas. É o que faz três mensagens
   seguidas lerem como uma fala só. */
.bubble { border-radius: var(--radius-lg); }
.bubble-them:not(.b-abre) { border-top-left-radius: var(--radius-sm); }
.bubble-them:not(.b-fecha) { border-bottom-left-radius: var(--radius-sm); }
.bubble-them.b-fecha { border-bottom-left-radius: var(--radius-sm); }
.bubble-me:not(.b-abre) { border-top-right-radius: var(--radius-sm); }
.bubble-me:not(.b-fecha) { border-bottom-right-radius: var(--radius-sm); }

/* A hora deixou de ser um bloco embaixo do texto e virou um rabicho no fim da
   linha, como em qualquer aplicativo de mensagem. Ela só existe na última
   bolha do bloco. */
.bubble-time { display: inline-flex; align-items: center; gap: 3px;
  margin: 0 0 -2px var(--space-3); float: right; line-height: 18px;
  transform: translateY(4px); }
.bubble-tique { font-size: 11px; letter-spacing: -2px; color: var(--text-subtle); }
.bubble-tique.e-lida { color: var(--acc-cheio); letter-spacing: -2px; }

.thread-sep { margin: var(--space-5) 0 var(--space-3); }
.thread-sep:first-child { margin-top: auto; }

/* ==========================================================================
   CONVITE DE REUNIÃO NA AGENDA (sql/229)
   A linha nasce nas duas agendas para travar o horário — então ela precisa
   dizer que ainda é proposta. Desenhada igual a uma reunião confirmada, a
   agenda estaria afirmando um combinado que não existe.
   ========================================================================== */
.ag-item-wrap { display: flex; flex-direction: column; }
.ag-selo { display: inline-block; margin-left: var(--space-2); padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 650; vertical-align: middle;
  background: var(--veu-forte); color: var(--text-subtle); }
.ag-selo.e-aguardando { background: var(--veu-forte); color: var(--text-subtle); }
.ag-selo.e-recusado { background: rgba(220,38,38,.10); color: #b91c1c; }
/* O AVISO de convite esperando. Ele não é um compromisso na agenda — é uma
   linha dizendo que há algo para responder, e onde. A reunião só entra na
   agenda depois do aceite. */
.ag-convites-faixa { display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0 0 var(--space-4); }
.ag-convite-aviso { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--accent-softer);
  color: inherit; text-decoration: none; }
.ag-convite-aviso:hover { text-decoration: none; border-color: var(--acc-cheio); }
.ag-convite-ico { flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--tinta-acento); }
.ag-convite-cta { color: var(--acc-cheio); font-weight: 650; flex: none; }
@media (max-width: 560px) { .ag-convite-cta { display: none; } }
.ag-bloco-convite { outline: 2px dashed var(--acc-cheio); outline-offset: -2px; }

/* ==========================================================================
   MENSAGEM QUE VIRA CARTÃO
   --------------------------------------------------------------------------
   O contato de WhatsApp e o convite de reunião deixaram de ser frase. Um
   número escrito no meio de um texto obriga a pessoa a selecionar, copiar e
   procurar no outro aplicativo; "responda na sua agenda" manda alguém sair da
   conversa e caçar o dia certo numa lista.
   ========================================================================== */
.bubble.bubble-cartao { max-width: min(420px, 92%); padding: 0; overflow: hidden; }
.bubble-cartao .bubble-time { float: none; display: flex; justify-content: flex-end;
  transform: none; margin: 0; padding: 0 var(--space-3) var(--space-2); }

.msg-cartao { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; }
a.msg-cartao:hover { text-decoration: none; background: var(--preench-1); }
.msg-cartao-ico { flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--veu-forte); color: var(--text-strong); }
.msg-cartao-wpp .msg-cartao-ico { background: rgba(37,211,102,.14); color: #128c4a; }
.msg-cartao-reuniao .msg-cartao-ico { background: var(--accent-soft); color: var(--tinta-acento); }
.msg-cartao-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.msg-cartao-tit { font-size: 14px; line-height: 19px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-cartao-sub { font-size: 13px; line-height: 18px; color: var(--text-subtle); }
.msg-cartao-cta { font-size: 12px; font-weight: 650; color: var(--acc-cheio);
  margin-top: 2px; text-decoration: none; }
a.msg-cartao-cta:hover { text-decoration: underline; }
.msg-cartao-wpp .msg-cartao-cta { color: #128c4a; }
.msg-cartao-cta.e-espera { color: var(--text-subtle); }
.msg-cartao-cta.e-recusado { color: #b91c1c; }

/* AS TRÊS RESPOSTAS, em grade e não em fila.
   Em fila, três botões com texto não cabem num cartão de 316px — "Aceitar
   reunião" saía pela borda direita da tela do celular, porque item de flex não
   encolhe abaixo do próprio conteúdo. A grade resolve e ainda melhora o
   desenho: as duas saídas em cima, e a resposta principal embaixo, larga e no
   caminho do polegar. */
.msg-cartao-reuniao { align-items: flex-start; flex-wrap: wrap; }
.msg-cartao-acoes { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2); margin-top: var(--space-3); width: 100%; }
.msg-cartao-acoes .btn { min-width: 0; }
/* O "Aceitar" ocupa a linha inteira, venha ele em que ordem vier no HTML. */
.msg-cartao-acoes [data-conv-sim] { grid-column: 1 / -1; }

/* ==========================================================================
   TRÊS CAMPOS DE HORÁRIO QUE CABEM NO CELULAR
   --------------------------------------------------------------------------
   Dia, Hora e Duração numa fila de três dividiam 390px em ~110px cada — e o
   seletor de data do iOS ("29 de ago. de 2026") não encolhe: ele passava por
   cima do campo da hora. Na grade, o Dia toma a linha inteira e os outros dois
   dividem a de baixo.
   ========================================================================== */
.campos-3 { display: grid; gap: var(--space-3);
  grid-template-columns: minmax(150px, 1.3fr) minmax(96px, 1fr) minmax(112px, 1fr); }
/* `min-width: 0` é o que deixa um campo encolher abaixo do próprio conteúdo —
   sem ele a grade estoura em vez de apertar. */
.campos-3 > * { min-width: 0; }
@media (max-width: 560px) {
  .campos-3 { grid-template-columns: 1fr 1fr; }
  .campos-3 > :first-child { grid-column: 1 / -1; }
}

/* O AVISO SAI DE CIMA DO BOTÃO DA JANELA.
   No celular a janela é uma gaveta colada embaixo, e o aviso mora a ~124px do
   pé da tela — exatamente em cima de "Enviar convite". Com janela aberta ele
   vai para o topo, onde não cobre nada. */
@media (max-width: 639px) {
  body.com-modal .toasts {
    bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
}

/* A GAVETA TAMBÉM RESPEITA O TECLADO. `88vh` ignora o teclado aberto, e a
   janela ficava com metade dos campos por baixo dele. */
@media (max-width: 639px) {
  .modal { max-height: min(88vh, calc(var(--vv-h, 88vh) - 24px)); }
}