/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-0);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ============ THEME — NUPER DIGITAL ============ */
:root {
  --bg-0: #000000;
  --bg-1: #07181a;
  --bg-2: #0f2a2e;
  --bg-3: #154145;
  --line: #1d4d52;
  --text: #ffffff;
  --text-dim: #9bc2c4;
  --text-faded: #5e898c;
  --on-turquoise: #0F2A2E;
  --turquoise: #04DDD2;
  --turquoise-soft: #5fede6;
  --petrol: #006D6A;
  --mint: #CFF5F2;
  --navy: #0F2A2E;
  --accent: #04DDD2;
  --accent-2: #5fede6;
  --accent-grad: linear-gradient(135deg, #04DDD2 0%, #006D6A 100%);
  --accent-grad-soft: linear-gradient(135deg, #04DDD2 0%, #5fede6 100%);
  --danger: #ff6b8a;
  --success: #04DDD2;
  --shadow: 0 8px 32px rgba(4, 221, 210, 0.25);

  /* Tokens estruturais (antes indefinidos — causavam divisórias invisíveis) */
  --border: #1d4d52;            /* mesma cor de --line */
  --surface: #07181a;           /* painéis */
  --surface-2: #0f2a2e;         /* fundo sutil (cabeçalhos, listras) */
  --card: #0f2a2e;              /* cartões */
  --grid-line: rgba(255,255,255,0.10);  /* linhas de grade da tabela */
  --hover: rgba(255,255,255,0.06);      /* hover sutil */
  --hover-strong: rgba(255,255,255,0.14);
  --accent-soft: rgba(4,221,210,0.12);  /* destaque translúcido */
  --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
  --on-accent: #0F2A2E;         /* texto sobre o turquesa */
}

/* ============ TEMA GLOBAL (claro / escuro) ============ */
/* body.intops-light = tema claro no SISTEMA INTEIRO (HUB, portal, login, operação). */
/* Sem a classe = tema escuro (padrão da marca, definido no :root acima). */
/* POR ORA: plataforma sempre no tema claro; botão de troca escondido.
   Pra reativar o tema escuro, remova esta regra e restaure a lógica em applyIntopsTheme(). */
.theme-toggle { display: none !important; }

body.intops-light {
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #f4f6f8;
  --bg-3: #eaeef1;
  --line: #cbd5e1;
  --border: #cbd5e1;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --card: #ffffff;
  --text: #0f172a;
  --text-dim: #334155;
  --text-faded: #64748b;
  --grid-line: #d2d9e1;
  --hover: rgba(15,23,42,0.05);
  --hover-strong: rgba(15,23,42,0.10);
  --accent-soft: rgba(8,138,143,0.18);
  --card-shadow: 0 1px 3px rgba(15,23,42,0.08);
  /* Teal mais escuro p/ legibilidade como texto/destaque sobre branco */
  --turquoise: #0a8a8f;
  --turquoise-soft: #0d9aa0;
  --accent: #0a8a8f;
  --accent-2: #0d9aa0;
  --on-turquoise: #ffffff;
  --on-accent: #ffffff;
}

/* Etiquetas de status/cargo — texto mais escuro p/ contraste no tema claro */
body.intops-light #page-clients .client-status-ativo      { background: rgba(34,197,94,0.14);  color: #15803d; }
body.intops-light #page-clients .client-status-pausado    { background: rgba(234,179,8,0.16);  color: #a16207; }
body.intops-light #page-clients .client-status-negociacao { background: rgba(59,130,246,0.14); color: #1d4ed8; }
body.intops-light #page-clients .client-status-onboarding { background: rgba(168,85,247,0.14); color: #7e22ce; }
body.intops-light #page-clients .client-status-cancelado  { background: rgba(239,68,68,0.14);  color: #b91c1c; }
body.intops-light #page-team .team-role-badge.client { background: rgba(100,116,139,0.16); color: #475569; }
body.intops-light #page-team .team-role-badge.admin  { background: rgba(202,138,4,0.16);   color: #a16207; }

/* Ajustes de superfícies "chumbadas" em escuro para o tema claro global */
body.intops-light .topbar { background: rgba(255,255,255,0.88); }
body.intops-light .lm-nuper { color: #0f172a; }
body.intops-light .main { background: var(--bg-0); color: var(--text); }

/* SUPERFÍCIES SEMPRE ESCURAS (banner do HUB, card de login, placeholder de vídeo):
   têm fundo escuro fixo, então no tema claro os tokens de texto/destaque
   ficariam escuros e ilegíveis. Aqui redeclaramos os tokens LOCALMENTE de volta
   pro claro — conserta título, descrição, botões e labels de uma vez só. */
body.intops-light .hero,
body.intops-light .login-card,
body.intops-light .video-empty {
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.80);
  --text-faded: rgba(255,255,255,0.55);
  --line: rgba(255,255,255,0.16);
  --border: rgba(255,255,255,0.16);
  --hover: rgba(255,255,255,0.10);
  --hover-strong: rgba(255,255,255,0.18);
  --turquoise: #04DDD2;
  --turquoise-soft: #5fede6;
  --accent: #04DDD2;
  --accent-2: #5fede6;
}
/* A logo "nuper" fica branca dentro do card escuro de login (a regra geral acima
   deixa ela escura, o que serve pra topbar clara — aqui é a exceção). */
body.intops-light .login-card .lm-nuper { color: #ffffff; }

/* Os CAMPOS dentro dos cards escuros (login, cadastro de cliente, hero) têm
   FUNDO CLARO — então o texto digitado precisa ser ESCURO (senão herda o branco
   do card e fica "transparente" no campo branco). */
body.intops-light .hero .input,
body.intops-light .login-card .input,
body.intops-light .video-empty .input { color: #0f172a; }
body.intops-light .hero .input::placeholder,
body.intops-light .login-card .input::placeholder,
body.intops-light .video-empty .input::placeholder { color: #94a3b8; }
/* Quadro de dados do convite (fundo claro dentro do card escuro): texto escuro */
body.intops-light .login-card .invite-info-value { color: #0f172a; }
body.intops-light .login-card .invite-info-label { color: #64748b; }
/* Chips de serviços no cadastro do cliente (bolinha clara dentro do card escuro): texto escuro */
body.intops-light .login-card .servico-chip { color: #0f172a; }
body.intops-light .login-card .servico-chip.active { color: #0f172a; }

/* ============ UTILITIES ============ */
.hidden { display: none !important; }

/* ============ ÍCONES (Design System) ============ */
/* Monocromáticos: herdam a cor do texto (currentColor). Nunca têm cor própria. */
.icon {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.14em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
/* Espaço quando o ícone vem antes de um texto (ex.: dentro de botão) */
.icon + * , * + .icon { margin-left: 0; }
.btn .icon, button .icon { margin-right: 6px; }
h1 .icon, h2 .icon, h3 .icon, .drive-title .icon, .clients-title .icon { margin-right: 8px; }
.form-section-title .icon,
.client-stat-label .icon,
.invite-info-label .icon,
.referral-hero-badge .icon,
.referral-hero-tag .icon,
.nav-link .icon,
.nav-dropdown-trigger .icon,
.section-title .icon,
.panel-title .icon,
label .icon { margin-right: 6px; }
/* Ícone de "carregando" girando */
.icon-spin { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* Bolinha de status (exceção colorida — cor = informação, ver Design System §3) */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  background: var(--text-faded);
}
.status-dot.green  { background: #22c55e; }
.status-dot.yellow { background: #eab308; }
.status-dot.red    { background: #ef4444; }
.status-dot.blue   { background: #3b82f6; }
.status-dot.purple { background: #a855f7; }

/* ============ AUTH ERROR ============ */
.auth-error {
  background: rgba(255, 107, 138, 0.12);
  border: 1px solid rgba(255, 107, 138, 0.35);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.auth-success {
  background: rgba(4, 221, 210, 0.10);
  border: 1px solid rgba(4, 221, 210, 0.35);
  color: var(--turquoise);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ============ LOADING ============ */
.loading-overlay {
  position: fixed; inset: 0;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  flex-direction: column; gap: 16px;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--turquoise);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ LOGIN ============ */
#login-screen {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(4, 221, 210, 0.22), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(0, 109, 106, 0.35), transparent 60%),
    var(--bg-0);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 460px;
  background: rgba(15, 42, 46, 0.55);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(4, 221, 210, 0.18);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: var(--shadow);
  color: var(--text);
}
.brand-logo-stacked {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  user-select: none;
  text-align: left;
}
.brand-logo-stacked .lm-hub {
  display: block;
  color: var(--turquoise);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5em;
  margin-bottom: 4px;
}
.brand-logo-stacked .lm-nuper {
  display: block;
  color: #fff;
  font-size: 38px;
  margin-bottom: -10px;
  position: relative;
  z-index: 2;
}
.brand-logo-stacked .lm-digital {
  display: block;
  color: var(--turquoise);
  font-size: 34px;
  padding-left: 38px;
  opacity: 0.95;
}
.login-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.login-subtitle { color: var(--text-dim); margin-bottom: 28px; font-size: 14px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 13px; color: var(--text-dim);
  margin-bottom: 6px; font-weight: 500;
}
.input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  transition: all 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(4, 221, 210, 0.18);
}
.btn-primary {
  width: 100%;
  padding: 13px;
  background: var(--turquoise);
  color: var(--on-turquoise);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  margin-top: 8px;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--turquoise-soft); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.login-footer {
  margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-dim);
}
.login-footer a { color: var(--accent-2); cursor: pointer; }

/* ============ APP LAYOUT ============ */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand-logo-mark {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  user-select: none;
}
.brand-logo-mark .lm-nuper { color: #fff; }
.brand-logo-mark .lm-digital { color: var(--turquoise); }
.nav-links { display: flex; gap: 2px; flex: 1; align-items: center; }
.nav-divider {
  width: 1px; height: 22px; align-self: center;
  background: var(--line); margin: 0 8px;
}
.nav-group-label {
  align-self: center; padding: 0 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--turquoise); opacity: 0.75;
  white-space: nowrap;
}

/* ===== Dropdown Operação Interna ===== */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--turquoise);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.nav-dropdown:hover .nav-dropdown-trigger {
  background: var(--bg-2);
}
.nav-caret { font-size: 10px; transition: transform 0.2s; }
.nav-dropdown:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin-top: 8px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
/* ponte invisível pra não fechar ao mover o mouse até o menu */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu .nav-link {
  display: block;
  color: var(--turquoise);
  font-weight: 500;
}
.nav-dropdown-menu .nav-link:hover {
  background: var(--bg-2);
  color: var(--text);
}
.nav-link {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--bg-2); }
.nav-link.active { color: var(--text); background: var(--bg-2); }

/* Botão de tema da Operação Interna (claro/escuro) */
.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.18s ease;
}
.login-theme-toggle { position: absolute; top: 20px; right: 20px; z-index: 5; }
.theme-toggle:hover { border-color: var(--turquoise); transform: translateY(-1px); }
.topbar-search {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  width: 200px;
  flex-shrink: 0;
  color: var(--text);
  font-size: 13px;
}
.topbar-search:focus { outline: none; border-color: var(--accent); }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.user-chip:hover { border-color: var(--accent); }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--turquoise) 0%, var(--petrol) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--on-turquoise);
  flex-shrink: 0;
}
.avatar.lg { width: 96px; height: 96px; font-size: 32px; }
.avatar.md { width: 56px; height: 56px; font-size: 18px; }
.avatar.has-photo {
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.avatar.has-photo > * { display: none; }

/* === Avatar editável na página de perfil === */
.profile-avatar-wrap {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border-radius: 50%;
  transition: transform .15s ease;
}
.profile-avatar-wrap:hover { transform: scale(1.03); }
.profile-avatar-wrap:hover .profile-avatar-edit { opacity: 1; }
.profile-avatar-edit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 6px 4px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

/* === Página Indique e Ganhe === */
.referral-hero {
  padding: 48px 32px;
  margin-bottom: 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(64,224,208,0.12) 0%, rgba(0,86,86,0.18) 100%);
  border: 1px solid rgba(64,224,208,0.25);
  text-align: center;
}
.referral-hero-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(64,224,208,0.18);
  color: var(--turquoise);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.referral-hero-title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff 0%, var(--turquoise) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.referral-hero-sub {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

.referral-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 720px) { .referral-rewards { grid-template-columns: 1fr; } }
.referral-reward-card {
  padding: 32px 28px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform .2s, border-color .2s;
}
.referral-reward-card:hover { transform: translateY(-4px); border-color: var(--turquoise); }
.referral-reward-card.highlight {
  background: linear-gradient(135deg, rgba(64,224,208,0.10) 0%, var(--bg-2) 100%);
  border-color: rgba(64,224,208,0.4);
}
.referral-reward-icon { font-size: 40px; margin-bottom: 12px; }
.referral-reward-value {
  font-size: 56px;
  font-weight: 800;
  color: var(--turquoise);
  line-height: 1;
  margin-bottom: 6px;
}
.referral-reward-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.referral-reward-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}
.referral-reward-desc strong { color: var(--text); }

.referral-how { margin-bottom: 32px; }
.referral-section-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
}
.referral-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.referral-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.referral-step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--on-turquoise);
  display: flex;
  align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.referral-step-content { flex: 1; }
.referral-step-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.referral-step-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}

.referral-example {
  padding: 24px 28px;
  border-radius: 12px;
  background: var(--bg-2);
  border-left: 4px solid var(--turquoise);
  margin-bottom: 32px;
}
.referral-example-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--turquoise);
  margin-bottom: 10px;
}
.referral-example-body {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.55;
}
.referral-example-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.referral-example-list li {
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.referral-example-list strong { color: var(--text); }

.referral-footer {
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
  font-size: 14px;
}

/* === Botão WhatsApp no card da Comunidade === */
.whatsapp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #25D366;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s, opacity .15s;
  border: none;
}
.whatsapp-pill:hover { transform: scale(1.04); opacity: 0.92; }

/* === Benefício oferecido no card da Comunidade === */
.client-offered-benefit {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(64, 224, 208, 0.08);
  border-left: 3px solid var(--turquoise);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.client-offered-benefit-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--turquoise);
  margin-bottom: 4px;
}
.user-chip-name { font-size: 13px; font-weight: 500; }
.main { flex: 1; }

/* ============ HOME ============ */
.hero {
  position: relative;
  min-height: 480px;
  padding: 80px 56px 56px;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(4, 221, 210, 0.30), transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(0, 109, 106, 0.45), transparent 60%),
    linear-gradient(180deg, #07181a 0%, #000000 100%);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.hero-content { max-width: 640px; position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(4, 221, 210, 0.15);
  border: 1px solid rgba(4, 221, 210, 0.45);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--turquoise);
  margin-bottom: 18px;
}
.hero-title {
  font-size: 44px; font-weight: 800; line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hero-title span {
  background: linear-gradient(135deg, #04DDD2 0%, #5fede6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--turquoise);
}
.hero-desc { color: var(--text-dim); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 12px; }
.btn {
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-fill { background: var(--turquoise); color: var(--on-turquoise); font-weight: 700; }
.btn-fill:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--turquoise-soft); }
.btn-ghost { background: var(--hover); border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--hover-strong); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }

.section { padding: 40px 56px; }
.section-header {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 18px;
}
.section-title { font-size: 22px; font-weight: 700; }
.section-link { color: var(--accent-2); font-size: 13px; cursor: pointer; }

.row {
  display: flex; gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
}
.row::-webkit-scrollbar { height: 6px; }
.row::-webkit-scrollbar-track { background: transparent; }
.row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.card {
  flex: 0 0 280px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.card-thumb {
  height: 160px;
  position: relative;
  display: flex; align-items: end;
  padding: 14px;
  color: #fff;
  overflow: hidden;
}
.card-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.thumb-1 { background: linear-gradient(135deg, #04DDD2 0%, #006D6A 100%); }
.thumb-2 { background: linear-gradient(135deg, #006D6A 0%, #0F2A2E 100%); }
.thumb-3 { background: linear-gradient(135deg, #04DDD2 0%, #0F2A2E 100%); }
.thumb-4 { background: linear-gradient(135deg, #5fede6 0%, #006D6A 100%); }
.thumb-5 { background: linear-gradient(160deg, #0F2A2E 0%, #04DDD2 100%); }
.thumb-6 { background: linear-gradient(135deg, #04DDD2 0%, #5fede6 100%); }
.thumb-7 { background: linear-gradient(135deg, #006D6A 0%, #04DDD2 100%); }
.thumb-8 { background: linear-gradient(135deg, #0F2A2E 0%, #006D6A 100%); }
.thumb-9 { background: linear-gradient(135deg, #04DDD2 0%, #0F2A2E 50%, #006D6A 100%); }
.card-duration {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  z-index: 1;
}
.card-tag {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  opacity: 0.9;
}
.card-body { padding: 14px; }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
.card-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 10px; align-items: center; }
.progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.progress > div { height: 100%; background: var(--accent-grad); border-radius: 2px; }

/* ============ PLAYER ============ */
.player-shell { padding: 32px 56px 56px; }
.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  color: var(--text-dim); font-size: 13px; margin-bottom: 18px;
}
.breadcrumb a { cursor: pointer; }
.breadcrumb a:hover { color: var(--text); }
.player-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
}
@media (max-width: 1024px) {
  .player-grid { grid-template-columns: 1fr; }
}
.video-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; padding: 24px; text-align: center;
  background: linear-gradient(135deg, #0F2A2E 0%, #07181a 100%);
  color: var(--text-dim); font-size: 13px;
}
.video-empty strong { color: var(--text); font-size: 15px; }

.lesson-info { margin-top: 24px; }
.lesson-title { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.lesson-meta {
  display: flex; gap: 14px; color: var(--text-dim); font-size: 13px; margin-bottom: 20px;
}
.lesson-desc { color: #c4c4d4; line-height: 1.7; font-size: 14px; }

.admin-row {
  margin-top: 24px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.admin-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.admin-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  background: rgba(4, 221, 210, 0.15);
  border: 1px solid rgba(4, 221, 210, 0.45);
  color: var(--turquoise);
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.admin-row-title { font-size: 14px; font-weight: 600; }
.admin-row-help { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.admin-row-help code {
  background: var(--bg-3); padding: 1px 5px; border-radius: 4px;
  font-size: 11px; color: var(--accent-2);
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 14px;
}
.admin-link-row {
  display: flex; gap: 12px; align-items: stretch;
}
.admin-link-row .input { flex: 1; }
.admin-thumb {
  width: 88px; height: 50px;
  border-radius: 6px;
  background: var(--bg-3) center/cover no-repeat;
  border: 1px solid var(--line);
  flex-shrink: 0;
  position: relative;
}
.admin-thumb::after {
  content: 'sem vídeo';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-faded);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.admin-thumb.has-video::after { content: ''; }
.admin-actions {
  margin-top: 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-row-status { font-size: 12px; min-height: 16px; }
.admin-row-status.ok { color: var(--success); }
.admin-row-status.err { color: var(--danger); }
@media (max-width: 600px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-link-row { flex-direction: column; }
  .admin-thumb { width: 100%; height: 120px; }
}

.module-list {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.module-list-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 14px;
}
.lesson-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover { background: var(--bg-2); }
.lesson-item.current { background: rgba(4, 221, 210, 0.10); border-left: 2px solid var(--turquoise); }
.lesson-num {
  width: 28px; height: 28px;
  background: var(--bg-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  flex-shrink: 0;
}
.lesson-item.current .lesson-num { background: var(--turquoise); color: var(--on-turquoise); }
.lesson-item.done .lesson-num { background: var(--petrol); color: #fff; }
.lesson-item-info { flex: 1; min-width: 0; }
.lesson-item-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.lesson-item-time { font-size: 11px; color: var(--text-dim); }

/* ============ DIRECTORY ============ */
.dir-header { padding: 48px 56px 24px; }
.dir-header-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.dir-header h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.dir-header p { color: var(--text-dim); font-size: 15px; max-width: 680px; }
@media (max-width: 768px) {
  .dir-header-top { flex-direction: column; align-items: stretch; }
}
.filters {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 0 56px 24px;
  align-items: center;
}
.filter-search {
  flex: 1; min-width: 280px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
}
.filter-search:focus { outline: none; border-color: var(--accent); }
.filter-pill {
  padding: 9px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.filter-pill:hover { border-color: var(--accent); color: var(--text); }
.filter-pill.active {
  background: rgba(4, 221, 210, 0.15);
  border-color: var(--turquoise);
  color: var(--turquoise);
}
.client-grid {
  padding: 0 56px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.client-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.2s;
}
.client-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.client-head {
  display: flex; gap: 14px; align-items: center; margin-bottom: 14px;
}
.client-name { font-size: 15px; font-weight: 600; }
.client-segment { font-size: 12px; color: var(--text-dim); }
.client-bio {
  font-size: 13px; color: #c4c4d4;
  line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.client-links { display: flex; gap: 8px; flex-wrap: wrap; }
.link-pill {
  padding: 5px 10px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 5px;
}
.client-card-actions { display: flex; gap: 6px; margin-top: 12px; }

/* ============ BENEFÍCIOS ============ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  padding: 0 56px 56px;
}
.benefit-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, transform .2s;
}
.benefit-card:hover {
  border-color: var(--turquoise);
  transform: translateY(-2px);
}
.benefit-partner {
  font-size: 12px;
  color: var(--turquoise);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .5px;
}
.benefit-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.benefit-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
}
.benefit-coupon {
  background: linear-gradient(135deg, rgba(4,221,210,0.12), rgba(0,109,106,0.12));
  border: 1px dashed var(--turquoise);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.benefit-coupon-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.benefit-coupon-code {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--turquoise);
  letter-spacing: 1px;
}
.benefit-coupon-btn {
  background: var(--turquoise);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.benefit-coupon-btn:hover { background: #5fede6; }
.benefit-howto {
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg-3);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--turquoise);
}
.benefit-link-btn {
  display: inline-block;
  background: var(--turquoise);
  color: var(--navy);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  transition: background .2s;
  margin-top: 4px;
}
.benefit-link-btn:hover { background: #5fede6; }
.benefit-admin-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-dim);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  font-size: 14px;
}
.icon-btn:hover { background: var(--turquoise); color: var(--on-turquoise); border-color: var(--turquoise); }
.icon-btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.empty-state {
  grid-column: 1 / -1;
  padding: 48px;
  text-align: center;
  color: var(--text-dim);
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
.modal-card.lg { max-width: 640px; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--text-dim);
}
.modal-close:hover { background: var(--line); color: var(--text); }
.modal-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--line); margin-top: 20px;
}
.modal-actions .spacer { flex: 1; }
.btn.danger { background: rgba(255, 107, 138, 0.12); color: var(--danger); border: 1px solid rgba(255, 107, 138, 0.3); }
.btn.danger:hover { background: var(--danger); color: #fff; }

/* ============ PROFILE ============ */
.profile-shell { padding: 48px 56px; max-width: 900px; }
.profile-head {
  display: flex; gap: 24px; align-items: center; margin-bottom: 32px;
}
.profile-name { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.profile-role { color: var(--text-dim); font-size: 14px; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.stat-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.stat-num {
  font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg, #04DDD2 0%, #5fede6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--turquoise);
}
.stat-label { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}
.panel h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.field-row .form-group { margin: 0; }
.form-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); margin-bottom: 12px; font-weight: 600;
}
.form-section { margin-bottom: 22px; }
.confirm-box {
  padding: 16px;
  background: rgba(255, 107, 138, 0.08);
  border: 1px solid rgba(255, 107, 138, 0.3);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.confirm-box strong { color: var(--danger); }

/* ============ RESPONSIVE ============ */
/* ============ ADMIN PANEL ============ */
.admin-shell { padding: 48px 56px; max-width: 960px; }
.admin-page-header { margin-bottom: 28px; }
.admin-page-header h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.admin-page-header p { color: var(--text-dim); font-size: 14px; }

.admin-tabs-nav {
  display: flex; gap: 8px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.admin-tab-btn {
  padding: 10px 20px;
  border-radius: 10px 10px 0 0;
  font-size: 14px; font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active {
  color: var(--turquoise);
  background: var(--bg-1);
  border-color: var(--line);
  border-bottom-color: var(--bg-1);
}

.admin-tab-panel { }
.admin-tab-panel.hidden { display: none; }

.admin-panel-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.admin-panel-box-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 14px;
}

.admin-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.admin-item:last-child { border-bottom: none; }
.admin-item:hover { background: var(--bg-2); }
.admin-item-info { flex: 1; min-width: 0; }
.admin-item-title { font-size: 14px; font-weight: 500; }
.admin-item-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.admin-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

.admin-add-form {
  display: flex; gap: 10px;
  padding: 16px 20px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.admin-add-form .input { flex: 1; }

.thumb-picker {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.thumb-option {
  width: 40px; height: 40px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.thumb-option.selected { border-color: #fff; transform: scale(1.1); }
.thumb-option:hover { transform: scale(1.05); }

/* === Upload de capa do curso === */
.cover-uploader {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: var(--bg-3) center/cover no-repeat;
  border: 2px dashed var(--line);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  color: var(--text-dim);
  transition: all .15s;
  overflow: hidden;
}
.cover-uploader:hover { border-color: var(--turquoise); color: var(--turquoise); }
.cover-uploader.has-image { border-style: solid; border-color: var(--turquoise); }
.cover-uploader.has-image .cover-uploader-hint { display: none; }
.cover-uploader.has-image .cover-uploader-overlay { opacity: 0; }
.cover-uploader.has-image:hover .cover-uploader-overlay { opacity: 1; }
.cover-uploader-hint {
  font-size: 13px; font-weight: 500;
}
.cover-uploader-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity .15s;
}
.cover-status { font-size: 12px; margin-top: 6px; min-height: 16px; }
.cover-status.ok  { color: var(--turquoise); }
.cover-status.err { color: var(--danger); }

/* === Accordion de cursos (Admin) === */
.admin-course-row {
  border-bottom: 1px solid var(--line);
}
.admin-course-row:last-child { border-bottom: none; }
.admin-course-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.admin-course-header:hover { background: var(--bg-2); }
.admin-course-chevron {
  font-size: 12px;
  color: var(--text-dim);
  transition: transform .2s ease;
  flex-shrink: 0;
  width: 16px; text-align: center;
}
.admin-course-row.open .admin-course-chevron { transform: rotate(90deg); color: var(--turquoise); }
.admin-course-lessons {
  display: none;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 14px 20px 16px 50px;
}
.admin-course-row.open .admin-course-lessons { display: block; }
.admin-course-lessons-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.admin-course-lessons-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim);
}
.admin-lesson-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  margin-bottom: 6px;
}
.admin-lesson-item:last-child { margin-bottom: 0; }
.admin-lesson-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  background: var(--bg);
  border-radius: 8px;
}

.admin-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .topbar { padding: 12px 18px; gap: 12px; }
  .nav-links { display: none; }
  .topbar-search { display: none; }
  .hero, .section, .player-shell, .dir-header, .filters, .client-grid, .profile-shell, .admin-shell {
    padding-left: 18px; padding-right: 18px;
  }
  .hero-title { font-size: 32px; }
  .field-row { grid-template-columns: 1fr; }
  .login-card { padding: 32px 24px; }
}

/* ============ PROGRAMA DE INDICAÇÃO — FORMULÁRIO E LEADS ============ */
.referral-hero-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--turquoise);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--accent);
}

.referral-form-panel {
  margin-top: 32px;
}

.referral-form-help {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 20px;
}

.referral-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ============ LISTA DE LEADS — LAYOUT NOVO ============ */
.referral-leads-grid {
  display: grid;
  gap: 20px;
}

.referral-lead-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .15s, transform .15s;
}
.referral-lead-card:hover {
  border-color: var(--accent);
}

/* Header: nome + status */
.referral-lead-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.referral-lead-title {
  flex: 1;
  min-width: 0;
}

.referral-lead-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.referral-lead-company {
  font-size: 14px;
  color: var(--turquoise);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.referral-lead-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

/* Bloco de informações principais */
.referral-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.referral-lead-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.referral-lead-field-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.referral-lead-field-value {
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}

/* Observações em bloco separado */
.referral-lead-obs {
  background: var(--accent-soft);
  border-left: 3px solid var(--turquoise);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
.referral-lead-obs-label {
  display: block;
  color: var(--turquoise);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Footer: data + indicador (admin) + ações */
.referral-lead-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.referral-lead-meta {
  font-size: 12px;
  color: var(--text-dim);
}
.referral-lead-meta strong { color: var(--text); }

.referral-lead-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.referral-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
}
.referral-btn-action:hover {
  border-color: var(--turquoise);
  color: var(--turquoise);
}
.referral-btn-action.danger {
  border-color: rgba(255, 107, 138, 0.25);
  color: #f87171;
}
.referral-btn-action.danger:hover {
  background: rgba(255, 107, 138, 0.12);
  border-color: var(--danger);
  color: var(--danger);
}

/* Badge de status (maior, mais visível) */
.referral-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.referral-status-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.referral-status-novo        { background: rgba(100, 116, 139, 0.18); color: #94a3b8; }
.referral-status-em_contato  { background: rgba(59, 130, 246, 0.18);  color: #60a5fa; }
.referral-status-qualificado { background: rgba(34, 197, 94, 0.18);   color: #4ade80; }
.referral-status-fechado     { background: rgba(168, 85, 247, 0.18);  color: #c084fc; }
.referral-status-descartado  { background: rgba(239, 68, 68, 0.15);   color: #f87171; }

/* Select de status (admin) */
.referral-admin-select {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-width: 140px;
}
.referral-admin-select:hover { border-color: var(--turquoise); }

/* Tag de quem indicou (admin) */
.referral-admin-indicador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text);
}
.referral-admin-indicador strong { color: var(--turquoise); font-weight: 700; }

@media (max-width: 600px) {
  .referral-lead-card { padding: 18px 16px; }
  .referral-lead-grid { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .referral-lead-status-wrap { align-items: flex-start; }
  .referral-lead-footer { flex-direction: column; align-items: flex-start; }
}

/* ============ GESTÃO DE CLIENTES (CRM) ============ */
.clients-shell {
  padding: 48px 56px;
  max-width: 1280px;
  margin: 0 auto;
}

.clients-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.clients-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--text);
}
.clients-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}

/* Métricas rápidas */
.clients-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.client-stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color .15s;
}
.client-stat:hover { border-color: var(--accent); }
.client-stat.highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.client-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.client-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.client-stat.highlight .client-stat-value { color: var(--turquoise); }

/* Filtros */
.clients-filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.clients-search { width: 100%; }
.clients-status-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Lista / cards de cliente */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.client-card-item {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .15s;
  cursor: pointer;
}
.client-card-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.client-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.client-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.client-card-segment {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.client-card-body {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}
.client-card-body strong { color: var(--text); font-weight: 600; }

.client-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.client-card-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--turquoise);
}
.client-card-value-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.client-card-actions {
  display: flex;
  gap: 6px;
}

/* Badges de status do cliente */
.client-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.client-status-badge::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.client-status-ativo      { background: rgba(34, 197, 94, 0.18);  color: #4ade80; }
.client-status-pausado    { background: rgba(234, 179, 8, 0.18);  color: #facc15; }
.client-status-negociacao { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.client-status-onboarding { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.client-status-cancelado  { background: rgba(239, 68, 68, 0.18);  color: #f87171; }

/* Form section title (usado no modal) */
.form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--turquoise);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 20px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent-soft);
}
.form-section-title:first-child { margin-top: 0; }

/* Modal de visualização detalhada do cliente */
.client-view-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.client-view-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.client-view-section {
  margin-bottom: 22px;
}
.client-view-section-title {
  font-size: 12px;
  color: var(--turquoise);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.client-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.client-view-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.client-view-field-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.client-view-field-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.client-view-field-value.empty { color: var(--text-dim); font-style: italic; }
.client-view-text-block {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.client-view-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 22px;
}

@media (max-width: 900px) {
  .clients-shell { padding: 32px 20px; }
  .clients-stats { grid-template-columns: repeat(2, 1fr); }
  .client-view-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .clients-stats { grid-template-columns: 1fr; }
  .clients-header { flex-direction: column; align-items: stretch; }
}

/* ============ TAGS DE SERVIÇOS (CHIPS) ============ */
.servicos-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.servico-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.servico-chip:hover {
  border-color: var(--accent);
}
.servico-chip.active {
  background: var(--accent-soft);
  border-color: var(--turquoise);
  color: var(--turquoise);
  font-weight: 600;
}
.servico-chip-remove {
  margin-left: 4px;
  opacity: 0.6;
  cursor: pointer;
  font-weight: bold;
}
.servico-chip-remove:hover { opacity: 1; color: var(--danger); }

.servicos-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.servicos-add-row .input { flex: 1; min-width: 200px; }

/* Chips de visualização (sem hover/click) */
.servico-chip-view {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--turquoise);
}

/* Chips compactos no card de lista */
.servico-chip-mini {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--turquoise);
  margin-right: 4px;
  margin-bottom: 4px;
}

/* Carteira do cliente (categorização interna) */
.carteira-badge {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  color: var(--ck, #64748b);
  background: color-mix(in srgb, var(--ck, #64748b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ck, #64748b) 45%, transparent);
}
/* ===== Início da Operação Interna (home da equipe) ===== */
.ops-hero { margin-bottom: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ops-date {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; color: var(--text-dim); font-size: 13px; font-weight: 600;
}
.ops-date .icon { width: 15px; height: 15px; color: var(--accent); }

/* Mini-dashboard: minhas próximas tarefas */
.ops-tasks { margin-top: 28px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; }
.ops-tasks-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--text);
}
.ops-tasks-head > span { display: inline-flex; align-items: center; gap: 8px; }
.ops-tasks-head .icon { width: 18px; height: 18px; }
.ops-tasks-all { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.ops-tasks-all .icon { width: 14px; height: 14px; }
.ops-tasks-empty { padding: 22px 20px; color: var(--text-dim); font-size: 14px; }
.ops-task { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; }
.ops-task:last-child { border-bottom: none; }
.ops-task:hover { background: var(--hover); }
.ops-task-due {
  flex: 0 0 auto; min-width: 108px; text-align: center;
  padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--bg-3); color: var(--text-dim);
}
.ops-task-due.late  { background: rgba(239,68,68,0.15);  color: #b91c1c; }
.ops-task-due.today { background: rgba(245,158,11,0.16); color: #a16207; }
.ops-task-due.soon  { background: rgba(6,182,212,0.16);  color: #0e7490; }
.ops-task-main { flex: 1; min-width: 0; }
.ops-task-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-task-sub { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.ops-task-sub .icon { width: 12px; height: 12px; }
.ops-task-status { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ops-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.ops-hero-badge .icon { width: 14px; height: 14px; }
.ops-hero-title { font-size: 30px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.ops-hero-sub { font-size: 15px; color: var(--text-dim); margin: 0; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.ops-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; box-shadow: var(--card-shadow); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ops-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.ops-card-ic {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.ops-card-ic .icon { width: 22px; height: 22px; }
.ops-card-t { font-size: 16px; font-weight: 700; color: var(--text); }
.ops-card-d { font-size: 13px; color: var(--text-dim); line-height: 1.4; }

/* ===== Financeiro (Super Admin) ===== */
.fin-monthnav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.fin-nav-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fin-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.fin-nav-btn .icon { width: 15px; height: 15px; }
.fin-month-lbl { font-size: 18px; font-weight: 700; color: var(--text); min-width: 180px; text-align: center; }
.fin-today { margin-left: 4px; }

.fin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.fin-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--card-shadow); border-left: 4px solid var(--border); }
.fin-card-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin-bottom: 6px; }
.fin-card-val { font-size: 24px; font-weight: 800; color: var(--text); }
.fin-card.rec { border-left-color: #10b981; }
.fin-card.rec .fin-card-val { color: #047857; }
.fin-card.desp { border-left-color: #ef4444; }
.fin-card.desp .fin-card-val { color: #b91c1c; }
.fin-card.res.pos { border-left-color: #10b981; }
.fin-card.res.neg { border-left-color: #ef4444; }
.fin-card.res.neg .fin-card-val { color: #b91c1c; }
.fin-card.caixa { border-left-color: #3b82f6; }
.fin-card.caixa.pos .fin-card-val { color: #047857; }
.fin-card.caixa.neg .fin-card-val { color: #b91c1c; }
.fin-card-sub { font-size: 11px; font-weight: 500; color: var(--text-dim); margin-top: 4px; }

.fin-chart { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px 12px; box-shadow: var(--card-shadow); margin-bottom: 20px; }
.fin-chart-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--turquoise); margin-bottom: 12px; }
.fin-chart-head .icon { width: 16px; height: 16px; color: var(--accent); }
.fin-legend { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.fin-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fin-dot.rec { background: #10b981; } .fin-dot.desp { background: #ef4444; }
.fin-chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.fin-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.fin-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.fin-bar { width: 40%; max-width: 26px; min-height: 2px; border-radius: 4px 4px 0 0; }
.fin-bar.rec { background: #10b981; } .fin-bar.desp { background: #ef4444; }
.fin-bar-col.cur .fin-bar-lbl { color: var(--accent); font-weight: 700; }
.fin-bar-lbl { font-size: 11px; color: var(--text-dim); }
/* Gráfico com linha do caixa acumulado (amarela) sobre as barras */
.fin-dot.caixa { background: #eab308; }
.fin-chart-plot { position: relative; display: flex; align-items: flex-end; gap: 0; height: 130px; }
.fin-chart-plot .fin-bar-col { gap: 0; }
.fin-caixa-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fin-caixa-dots { position: absolute; inset: 0; pointer-events: none; }
.fin-caixa-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #eab308; border: 2px solid var(--card); transform: translate(-50%, 50%); box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: pointer; }
.fin-bar { transition: opacity .12s; cursor: pointer; }
.fin-bar:hover { opacity: .82; }
/* Eixo Y (valores de referência) + linhas de grade */
.fin-chart-body { display: flex; align-items: stretch; gap: 8px; }
.fin-yaxis { position: relative; width: 58px; flex: none; height: 130px; }
.fin-ytick { position: absolute; right: 0; transform: translateY(50%); font-size: 10px; color: var(--text-dim); white-space: nowrap; line-height: 1; }
.fin-plot-col { flex: 1; min-width: 0; }
.fin-plot-wrap { position: relative; height: 130px; }
.fin-gridlines { position: absolute; inset: 0; pointer-events: none; }
.fin-gridline { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.fin-gridline.zero { background: var(--text-dim); opacity: .5; }
.fin-chart-xlabels { display: flex; gap: 0; margin-top: 6px; }
.fin-chart-xlabels .fin-xlabel { flex: 1; text-align: center; font-size: 11px; color: var(--text-dim); }
.fin-chart-xlabels .fin-xlabel.cur { color: var(--accent); font-weight: 700; }
/* Tooltip customizado do gráfico */
.fin-tip { position: fixed; transform: translate(-50%, -100%); background: #0f172a; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 9px; border-radius: 8px; pointer-events: none; z-index: 9999; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: none; }

.fin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.fin-columns .fin-section { margin-bottom: 0; }
.fin-section { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow); margin-bottom: 18px; overflow: hidden; }
.fin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fin-section-title { font-size: 15px; font-weight: 700; color: var(--turquoise); }
.fin-section.receita .fin-section-title { color: #047857; }
.fin-section.despesa .fin-section-title { color: #b91c1c; }
.fin-section-actions { display: inline-flex; gap: 8px; }
.fin-table-scroll { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; }
.fin-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; padding: 10px 7px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.fin-table td { padding: 8px 7px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: middle; }
/* Coluna da lixeira fixada à direita — nunca é cortada, mesmo se a tabela rolar */
.fin-table th:last-child, .fin-table td:last-child { border-right: none; border-left: 1px solid var(--border); position: sticky; right: 0; background: var(--card); }
.fin-table tr:last-child td { border-bottom: none; }
.fin-status { border: none; cursor: pointer; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; transition: filter .12s; }
.fin-status.paid { background: #dcfce7; color: #047857; }
.fin-status.pend { background: #fef3c7; color: #b45309; }
.fin-status.late { background: #fee2e2; color: #b91c1c; }
.fin-dia-pgto { width: 54px; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 4px; -moz-appearance: textfield; }
.fin-dia-pgto::-webkit-inner-spin-button, .fin-dia-pgto::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fin-dia-pgto.late { color: #b91c1c; font-weight: 800; border-color: rgba(185, 28, 28, .35); }
.fin-resumo-atraso strong { color: #b91c1c; }
.fin-status:hover { filter: brightness(0.96); }
.fin-inp { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px 9px; color: var(--text); font-size: 13px; }
.fin-inp:hover { border-color: var(--border); }
.fin-inp:focus { border-color: var(--accent); outline: none; background: var(--surface-2); }
.fin-val { text-align: right; font-weight: 600; }
.fin-val-cell { text-align: right; }
/* Larguras das colunas (agora nos cabeçalhos com classe) */
.fin-th-desc { min-width: 140px; }
.fin-th-cat { min-width: 132px; }
.fin-th-num { min-width: 100px; text-align: right; }
.fin-th-center { min-width: 78px; text-align: center; }
.fin-th-dia { width: 64px; text-align: center !important; }
/* Cabeçalho clicável (ordenar) */
.fin-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.fin-sortable:hover { color: var(--text); }
.fin-sort-arrow { margin-left: 3px; color: var(--accent); font-weight: 800; }
/* Alça de arrastar + indicador de drop */
.fin-desc-cell { display: flex; align-items: center; gap: 4px; }
.fin-drag { flex: none; display: inline-flex; align-items: center; color: var(--text-dim); cursor: grab; opacity: .55; }
.fin-drag:hover { opacity: 1; color: var(--text); }
.fin-drag:active { cursor: grabbing; }
.fin-table tbody tr.fin-drag-over > td { box-shadow: inset 0 2px 0 0 var(--accent); }
/* Desfazer / refazer + versões */
.fin-hist-btns { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.fin-ver-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }
.fin-ver-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.fin-ver-item.atual { border-color: var(--accent); background: var(--hover); }
.fin-ver-label { font-size: 13px; font-weight: 600; color: var(--text); }
.fin-ver-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); margin-left: 6px; }
.fin-ver-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.fin-ver-preview { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); background: var(--hover); border-radius: 10px; padding: 10px 14px; }
.fin-ver-preview strong { color: var(--text); }
.fin-nav-btn:disabled { opacity: .35; cursor: default; }
.fin-nav-btn:disabled:hover { background: var(--bg-3); }
/* Seleção em massa */
.fin-sel-th, .fin-sel-td { width: 36px; text-align: center !important; }
.fin-selbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
.fin-bulk-del { margin-left: auto; background: var(--danger); color: #fff; border: none; font-weight: 700; }
.fin-bulk-del:hover { filter: brightness(0.95); }
/* Coluna # (conferência dos lançamentos) */
.fin-num-th { width: 34px; text-align: center !important; }
.fin-num { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-dim); }
/* Filtro por categoria no cabeçalho da tabela */
.fin-filtro-cat { width: auto; min-width: 150px; padding: 7px 9px; font-size: 12.5px; }
/* Rodapé-resumo da tabela */
.fin-resumo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); background: var(--surface-2, var(--hover)); }
.fin-resumo strong { color: var(--text); }
.fin-resumo-pago strong { color: #047857; }
.fin-resumo-pend strong { color: #b45309; }
.fin-resumo em { font-style: normal; font-size: 11px; color: var(--accent); font-weight: 700; }
.fin-fixo { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
.fin-del { width: 30px; height: 30px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--border); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fin-del:hover { background: rgba(255,107,138,0.15); border-color: var(--danger); }
.fin-del .icon { width: 15px; height: 15px; }
.btn-danger { background: var(--danger); color: #fff; border: none; }
.btn-danger:hover { filter: brightness(0.95); }
.fin-empty { text-align: center; color: var(--text-dim); font-style: italic; padding: 18px; }
@media (max-width: 1024px) { .fin-columns { grid-template-columns: 1fr; } .fin-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fin-cards { grid-template-columns: 1fr; } }

/* ===== Desempenho (campanhas + redes) ===== */
.perf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.perf-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perf-sel { width: auto; min-width: 170px; padding: 8px 10px; font-size: 13px; }
.perf-date { width: auto; padding: 7px 10px; font-size: 13px; }
.perf-date-sep { font-size: 12px; color: var(--text-dim); }
/* Buscador de cliente/conta */
.perf-combo { position: relative; display: inline-block; }
.perf-combo-inp { width: 260px; padding: 8px 10px; font-size: 13px; }
.perf-combo-inp::-webkit-search-cancel-button { display: none; } /* esconde o X nativo do type=search */
.perf-combo-list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 320px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 80; }
.perf-combo-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); padding: 8px 12px 4px; }
.perf-combo-item { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--text); }
.perf-combo-item:hover { background: var(--hover); }
.perf-combo-item.sel { color: var(--accent); font-weight: 700; }
.perf-combo-vazio { padding: 10px 12px; font-size: 13px; color: var(--text-dim); font-style: italic; }
/* E-mail de login do cliente (ficha e edição) */
.client-access-email { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); margin: 8px 0; flex-wrap: wrap; }
.client-access-email .icon { width: 15px; height: 15px; color: var(--accent); }
.client-access-email strong { color: var(--text); word-break: break-all; }
.client-access-copy { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; cursor: pointer; color: var(--text-dim); display: inline-flex; }
.client-access-copy:hover { border-color: var(--accent); color: var(--accent); }
.client-access-copy.ok { color: #047857; border-color: #047857; }
.client-access-copy .icon { width: 13px; height: 13px; }

/* Liberar os resultados no portal do cliente */
.portal-toggle-linha { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.portal-toggle-linha:hover { background: var(--hover); }
.portal-toggle-linha input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; flex: none; }
.portal-toggle-linha strong { display: block; font-size: 13px; color: var(--text); }
.portal-toggle-linha small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }

/* Vincular conta ↔ cliente */
.perf-badge-avulsas { background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.perf-vinc-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.perf-vinc-busca { flex: 1; min-width: 200px; padding: 8px 10px; font-size: 13px; }
.perf-vinc-busca::-webkit-search-cancel-button { display: none; }
.perf-vinc-tabs { display: inline-flex; gap: 6px; }
.perf-vinc-grupo { margin-bottom: 16px; }
.perf-vinc-grupo-t { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin-bottom: 8px; }
.perf-vinc-grupo-t .icon { width: 14px; height: 14px; color: var(--accent); }
.perf-vinc-grupo-t small { font-weight: 600; opacity: .7; }
.perf-vinc-item { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; transition: background .15s; }
.perf-vinc-item:hover { background: var(--hover); }
.perf-vinc-item.salvando { opacity: .5; }
.perf-vinc-item.ok { background: #dcfce7; }
.perf-vinc-nome { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-vinc-sel { width: 230px; flex: none; padding: 6px 8px; font-size: 12.5px; }
@media (max-width: 640px) { .perf-vinc-item { flex-direction: column; align-items: stretch; gap: 4px; } .perf-vinc-sel { width: 100%; } }

/* Métricas manuais — cards iguais aos do Meta, só com o lápis de editar */
.perf-man-card .perf-card-lbl { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.perf-man-edit { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; display: inline-flex; opacity: .6; }
.perf-man-edit:hover { opacity: 1; color: var(--accent); }
.perf-man-edit .icon { width: 13px; height: 13px; }
.perf-conv-sub { font-size: 10px; font-weight: 600; color: var(--text-dim); line-height: 1.2; margin-top: 1px; }
.perf-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.perf-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.perf-pill.on { background: #dcfce7; color: #047857; }
.perf-pill.wait { background: #fef3c7; color: #b45309; }
.perf-banner { display: flex; align-items: center; gap: 8px; background: var(--surface-2, var(--hover)); border: 1px dashed var(--border); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }
.perf-banner .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.perf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.perf-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--card-shadow); border-left: 4px solid var(--accent); }
.perf-card-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin-bottom: 6px; }
.perf-card-val { font-size: 22px; font-weight: 800; color: var(--text); }
.perf-bar-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.perf-bar { width: 62%; max-width: 22px; min-height: 2px; border-radius: 3px 3px 0 0; background: #04ddd2; cursor: pointer; transition: opacity .12s; }
.perf-bar:hover { opacity: .8; }
.perf-conv-dot { background: #8b5cf6; }
.perf-camp .fin-section-head { padding: 12px 16px; }
.perf-hint { font-size: 12px; color: var(--text-dim); }
.perf-table { width: 100%; border-collapse: collapse; }
.perf-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; padding: 10px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; }
.perf-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.perf-table th:last-child, .perf-table td:last-child { border-right: none; }
.perf-table tr:last-child td { border-bottom: none; }
.perf-camp-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.perf-plat { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.perf-plat.meta { background: #e6f1fb; color: #0c447c; }
.perf-plat.google { background: #fef3c7; color: #92400e; }
.perf-plat.tiktok { background: #fce7f3; color: #9d174d; }
.perf-social-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); padding: 14px 4px; }
.perf-social-hint .icon { width: 15px; height: 15px; }
.perf-org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perf-org-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--card-shadow); }
.perf-org-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.perf-org-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
.perf-org-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.perf-org-stats span { display: flex; flex-direction: column; gap: 2px; }
.perf-org-stats small { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.perf-org-stats b { font-size: 17px; color: var(--text); }
.perf-delta { font-style: normal; font-size: 11px; font-weight: 700; }
.perf-delta.up { color: #047857; }
.perf-delta.down { color: #b91c1c; }
.perf-met-group { margin-bottom: 16px; }
.perf-met-title { font-size: 13px; font-weight: 700; color: var(--turquoise); margin-bottom: 8px; }
.perf-met-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; }
.perf-met-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.perf-met-opt input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 1024px) { .perf-cards { grid-template-columns: repeat(2, 1fr); } .perf-org-grid { grid-template-columns: 1fr; } .perf-met-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .perf-cards { grid-template-columns: 1fr; } }

/* ===== ATAs de Reuniões ===== */
.ata-folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.ata-folder {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
}
.ata-folder .icon { width: 15px; height: 15px; }
.ata-folder:hover { border-color: var(--accent); color: var(--accent); }
.ata-folder.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ata-folder-new { border-style: dashed; }
.ata-board-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 30px; }
.ata-board-name { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.ata-board-actions { display: inline-flex; gap: 4px; }
.ata-board-actions button {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.ata-board-actions button:hover { border-color: var(--accent); color: var(--accent); }
.ata-board-actions .icon { width: 14px; height: 14px; }

.ata-group { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; overflow: hidden; background: var(--card); box-shadow: var(--card-shadow); }
.ata-group-head {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-weight: 700; color: var(--accent); font-size: 14px; user-select: none;
}
.ata-group.collapsed .ata-group-head { border-bottom: none; }
.ata-table tbody tr:hover td { background: var(--hover); }
.ata-group-arrow .icon { width: 12px; height: 12px; opacity: .6; }
.ata-group-count { background: var(--accent-soft); color: var(--accent); padding: 2px 10px; border-radius: 10px; font-size: 11px; }
.ata-table-scroll { overflow-x: auto; }
.ata-table { width: 100%; border-collapse: collapse; }
.ata-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-dim); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.ata-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.ata-table tr:last-child td { border-bottom: none; }
.ata-titulo, .ata-cli, .ata-data {
  width: 100%; background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 6px 8px; color: var(--text); font-size: 13px;
}
.ata-titulo { font-weight: 600; }
.ata-titulo:hover, .ata-cli:hover, .ata-data:hover { border-color: var(--border); }
.ata-titulo:focus, .ata-cli:focus, .ata-data:focus { border-color: var(--accent); outline: none; background: var(--surface-2); }
.ata-cell-data { text-align: center; }
.ata-dim { color: var(--text-dim); }
.ata-file { display: inline-flex; align-items: center; gap: 6px; }
.ata-file-link {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
}
.ata-file-link .icon { width: 13px; height: 13px; }
.ata-file-rm, .ata-del {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  background: var(--bg-3); color: var(--text-dim); border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ata-file-rm:hover, .ata-del:hover { background: rgba(255,107,138,0.15); color: var(--danger); }
.ata-file-rm .icon, .ata-del .icon { width: 13px; height: 13px; }
.ata-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--surface-2); border: 1px dashed var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
}
.ata-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.ata-upload-btn .icon { width: 13px; height: 13px; }
.ata-empty { color: var(--text-dim); font-style: italic; padding: 24px 8px; text-align: center; }
.ata-toolbar { margin-bottom: 14px; }
/* Datas + ordenação do Drive */
.drive-sort {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-dim); font-weight: 600;
}
.drive-sort .icon { width: 14px; height: 14px; }
.drive-sort select {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 4px 8px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.drive-sort select:hover { border-color: var(--accent); }
.drive-novo {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 5px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px;
}

/* Progresso do download de pasta (.zip) — caixinha flutuante */
.zip-status {
  position: fixed; right: 18px; bottom: 18px; z-index: 6900;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow);
}
.zip-status .icon { width: 16px; height: 16px; color: var(--accent); }

.ata-newmonth {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border: 1.5px dashed var(--border); border-radius: 999px;
  background: transparent; font-family: inherit;
  color: var(--text-dim); font-size: 13px; font-weight: 600;
}
.ata-newmonth:hover { border-color: var(--accent); color: var(--accent); }
.ata-newmonth .icon { width: 15px; height: 15px; }

/* Seletor de mês/ano das ATAs */
.ata-mes-card { max-width: 320px; }
.ata-mes-ano {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 4px 0 12px;
}
.ata-mes-ano-num { font-size: 17px; font-weight: 700; color: var(--text); min-width: 56px; text-align: center; }
.ata-mes-nav {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.ata-mes-nav:hover { border-color: var(--accent); color: var(--accent); }
.ata-mes-nav .icon { width: 15px; height: 15px; }
.ata-mes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ata-mes-btn {
  padding: 10px 0; border-radius: 9px; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 600;
}
.ata-mes-btn:hover { border-color: var(--accent); color: var(--accent); }
.ata-mes-btn.atual { border-color: var(--accent); }
.ata-mes-btn.ja-tem { opacity: .45; }
.ata-month-rm {
  margin-left: auto; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: transparent; border: none; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.ata-month-rm:hover { background: rgba(255,107,138,0.15); color: var(--danger); }
.ata-month-rm .icon { width: 13px; height: 13px; }
.ata-add-row { padding: 8px 12px 12px; }
.ata-add-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: none; color: var(--accent); font-weight: 700; font-size: 13px; padding: 4px;
}

.carteira-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.carteira-chip {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700;
  background: var(--surface-2); color: var(--text-dim);
  border: 1.5px solid var(--border);
}
.carteira-chip:hover { border-color: var(--ck, var(--accent)); color: var(--ck, var(--accent)); }
.carteira-chip.on {
  color: var(--ck, var(--accent)); border-color: var(--ck, var(--accent));
  background: color-mix(in srgb, var(--ck, var(--accent)) 15%, transparent);
}

.client-card-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* ============ UPLOAD DE CONTRATO PDF ============ */
.contrato-upload-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.contrato-existing {
  padding: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
}

.contrato-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--turquoise);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
}
.contrato-view-link:hover {
  background: var(--accent-soft);
}

/* ============ EQUIPE (TEAM) ============ */
.team-shell { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
.team-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.team-title { font-size: 28px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.team-sub { color: var(--text-dim); font-size: 14px; margin: 0; }

.team-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.team-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.team-stat.highlight { background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft)); border-color: var(--accent); }
.team-stat-label { color: var(--text-dim); font-size: 13px; margin-bottom: 6px; }
.team-stat-value { font-size: 24px; font-weight: 700; color: var(--text); }
.team-stat.highlight .team-stat-value { color: var(--turquoise); }

.team-filters { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.team-search { flex: 1; min-width: 240px; }
.team-role-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.team-person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: transform .12s, border-color .12s;
}
.team-person-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.team-person-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text); flex-shrink: 0;
  background-size: cover; background-position: center;
}
.team-person-info { flex: 1; min-width: 0; }
.team-person-name { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.team-person-meta { font-size: 13px; color: var(--text-dim); }
.team-person-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.team-role-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}
.team-role-badge.staff { background: var(--accent-soft); color: var(--turquoise); }
.team-role-badge.client { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.team-role-badge.admin { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.team-person-cargo { font-size: 12px; color: var(--text-dim); }
.team-person-actions { display: flex; gap: 8px; flex-shrink: 0; }
.team-btn-action {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.team-btn-action:hover { background: var(--accent-soft); border-color: var(--turquoise); color: var(--turquoise); }
.team-btn-action.danger:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #ef4444; }

/* Modal de Permissões */
.team-modal-card { max-width: 720px; }
.team-modal-person {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.team-modal-person .team-person-avatar { width: 40px; height: 40px; font-size: 14px; }
.team-perm-help { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.5; }
.team-perm-grid { display: grid; gap: 10px; margin-bottom: 18px; }
.team-perm-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
}
.team-perm-label { font-size: 14px; font-weight: 600; color: var(--text); }
.team-perm-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.team-perm-row select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.form-row-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

@media (max-width: 600px) {
  .team-perm-row { grid-template-columns: 1fr; }
  .team-perm-row select { width: 100%; }
}

/* ============ CONVITES DA EQUIPE ============ */
.invites-panel {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft));
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.invites-panel-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.invites-panel-title { font-size: 15px; font-weight: 700; color: var(--turquoise); }
.invites-panel-count {
  background: var(--accent-soft);
  color: var(--turquoise);
  font-size: 12px; font-weight: 700;
  padding: 2px 10px; border-radius: 20px;
}

.invite-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.invite-row-main { flex: 1; min-width: 200px; }
.invite-row-email { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.invite-row-meta { font-size: 12px; color: var(--text-dim); }
.invite-row-actions { display: flex; gap: 6px; }
.invite-row-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.invite-row-btn:hover { background: var(--accent-soft); border-color: var(--turquoise); color: var(--turquoise); }
.invite-row-btn.danger:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; color: #ef4444; }

/* Caixa de sucesso ao gerar convite */
.invite-success-box { text-align: center; padding: 12px 0; }
.invite-success-icon { font-size: 48px; margin-bottom: 12px; }
.invite-success-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.invite-success-text { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.invite-link-box {
  display: flex; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  align-items: center;
}
.invite-link-input {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  background: transparent !important;
  border: none !important;
}
.invite-link-input:focus { outline: none; }

/* ============ TELA DE ACEITE ============ */
#invite-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.invite-hero {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.invite-hero-emoji { font-size: 56px; margin-bottom: 8px; }
.invite-hero-text { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 4px 0 16px; }
.invite-info-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
}
.invite-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
}
.invite-info-row + .invite-info-row { border-top: 1px solid var(--border); }
.invite-info-label { font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.invite-info-value { font-size: 14px; color: var(--text); font-weight: 600; }


/* ============================================================
   GESTÃO DE TAREFAS (Monday/Notion style)
   ============================================================ */

.tasks-shell { padding: 24px 32px; max-width: 1500px; margin: 0 auto; }

.tasks-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.tasks-title { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.tasks-sub   { font-size: 14px; color: var(--text-dim); margin: 0; }

/* === Stats === */
.tasks-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.tasks-stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.tasks-stat-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.3px; }
.tasks-stat-value { font-size: 26px; font-weight: 700; color: var(--text); }
.tasks-stat.warn   .tasks-stat-value { color: #f59e0b; }
.tasks-stat.danger .tasks-stat-value { color: #ef4444; }
.tasks-stat.ok     .tasks-stat-value { color: #10b981; }

/* === Toolbar (filtros + toggle de visão) === */
.tasks-toolbar {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.tasks-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 1;
}
.tasks-filters .input { min-width: 160px; max-width: 240px; }
.tasks-filters #tasks-search { min-width: 220px; }

/* Ferramentas da tabela: Ordenar / Colunas */
.tasks-table-tools { display: inline-flex; gap: 8px; }
.tasks-table-tools .btn.active { background: var(--accent-soft); color: var(--accent); }

/* Popover dos menus (Ordenar / Colunas) */
.task-menu-popover {
  position: absolute; z-index: 200;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; min-width: 220px; box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}
.task-menu-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); padding: 8px 10px 4px;
}
.task-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; background: transparent; border: none;
  color: var(--text); font-size: 13px; cursor: pointer;
}
/* Nome da tabela de origem, nas colunas personalizadas do menu */
.task-menu-sub { margin-left: auto; font-size: 11px; color: var(--text-dim); font-weight: 600; }
.task-menu-item:hover { background: var(--hover); }
.task-menu-check { width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.task-menu-check .icon { width: 14px; height: 14px; }
.task-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Célula "Última atualização" */
.task-cell-updated { text-align: center; }
.task-updated { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.task-updated .task-resp-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #006D6A);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #0F2A2E;
  border: 2px solid rgba(255,255,255,0.10); flex: 0 0 auto;
}
.task-updated-time { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* Subitens — setinha de expandir na linha + dropdown inline */
.task-title-line { display: flex; align-items: center; gap: 6px; }
.task-expand-btn {
  width: 22px; height: 22px; flex: 0 0 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-dim); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.task-expand-btn:hover { background: var(--hover); color: var(--text); }
.task-expand-btn .icon { width: 14px; height: 14px; }
.task-expand-btn.open { transform: rotate(90deg); color: var(--accent); }

.subitem-expand-row > td { padding: 0 !important; background: var(--surface-2); }
.subitems-inline { padding: 12px 16px 14px 44px; border-left: 3px solid var(--accent); }
.subitems-inline .subitems-list { max-height: none; margin-bottom: 10px; }

/* Subitens (checklist dentro da tarefa) */
.subitem-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-3); border-radius: 999px; padding: 1px 7px; margin-left: 6px;
  vertical-align: middle;
}
.subitem-badge .icon { width: 12px; height: 12px; }
.subitem-badge.complete { color: #10b981; background: rgba(16,185,129,0.14); }

.subitems-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.subitems-bar { flex: 1; height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.subitems-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.2s ease; }
.subitems-count-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.subitems-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 360px; overflow-y: auto; }
.subitem-row { display: flex; align-items: center; gap: 8px; }
.subitem-check { width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; accent-color: var(--accent); }
.subitem-title { flex: 1; min-width: 0; }
.subitem-row.done .subitem-title { text-decoration: line-through; color: var(--text-dim); }
.subitem-resp { flex: 0 0 150px; max-width: 150px; }
.subitem-prazo { flex: 0 0 140px; }
.subitem-del {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg-3); color: var(--text-dim); cursor: pointer;
}
.subitem-del:hover { background: rgba(255,107,138,0.15); color: var(--danger); }
.subitem-composer { display: flex; gap: 8px; }
.subitem-composer .input { flex: 1; }

/* Aba Histórico (linha do tempo de alterações) */
.activity-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.activity-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 6px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-avatar .task-resp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #006D6A);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #0F2A2E; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,0.10);
}
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 13px; color: var(--text); line-height: 1.45; }
.activity-text strong { font-weight: 700; }
.activity-from { color: var(--text-dim); }
.activity-to { color: var(--accent); font-weight: 600; }
.activity-time { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.tasks-view-toggle {
  display: inline-flex; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px; gap: 2px;
}
.tasks-view-btn {
  border: none; background: transparent; color: var(--text-dim);
  padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.18s ease;
}
.tasks-view-btn:hover { color: var(--text); }
.tasks-view-btn.active {
  background: var(--accent); color: var(--on-accent);
}

.tasks-view.hidden { display: none; }

/* ============================================================
   TABELA — vibe Monday (dark Nuper)
   ============================================================ */
.tasks-table-wrap {
  background: transparent; border: none;
  border-radius: 12px; overflow: visible;
  display: flex; flex-direction: column; gap: 18px;
}

/* Header de grupo (estilo Monday: barra colorida lateral + título do grupo) */
.tasks-group {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  position: relative;
}
.tasks-group::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--group-color, var(--accent));
}
.tasks-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 14px 22px;
  font-size: 14px; font-weight: 700;
  color: var(--group-color, var(--accent)); letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer; user-select: none;
}
.tasks-group-header:hover { background: var(--hover); }
.tasks-group-header .task-resp-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #006D6A);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #0F2A2E;
  border: 2px solid rgba(255,255,255,0.10); flex: 0 0 auto;
}
.tasks-group.collapsed .tasks-group-header { border-bottom: none; }
.tasks-group-header .tasks-group-arrow { transition: transform 0.15s ease; }
.tasks-group-header .tasks-group-count {
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.tasks-group-header .tasks-group-arrow {
  font-size: 10px; opacity: 0.6;
}
.tasks-group-header .tasks-group-count {
  background: var(--group-color, var(--accent));
  color: #fff; opacity: 0.95;
}

/* Ações do board (renomear / cor / excluir) — aparecem no hover do header */
.tasks-group-actions {
  margin-left: auto; display: inline-flex; gap: 4px;
  opacity: 0; transition: opacity 0.15s ease;
}
.tasks-group:hover .tasks-group-actions { opacity: 1; }
.tasks-group-actions button {
  border: none; background: var(--hover);
  color: var(--text); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.tasks-group-actions button:hover { background: var(--hover-strong); }
.tasks-group-actions button.gf-active {
  background: var(--accent); color: var(--on-accent);
}

/* Linha de filtros por tabela (por coluna) */
.tasks-group-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 18px 10px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tasks-group-filters select {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
  max-width: 180px;
}
.tasks-group-filters select:focus { outline: none; border-color: var(--accent); }
.tasks-group-filters .gf-clear {
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 10px;
  border-radius: 8px;
}
.tasks-group-filters .gf-clear:hover { color: var(--text); background: var(--hover); }

/* Toolbar com botão "Nova tabela" */
.tasks-board-toolbar { display: flex; justify-content: flex-end; }
.btn-new-board {
  border: 1px dashed var(--border); background: transparent;
  color: var(--accent); cursor: pointer;
  padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600;
  transition: all 0.18s ease;
}
.btn-new-board:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Grupo/board sem tarefas */
.tasks-group-empty {
  padding: 22px; text-align: center; color: var(--text-dim);
  font-size: 13px; font-style: italic;
}

/* Popover de seleção de cor (clientes e tabelas) */
.color-popover {
  position: absolute; z-index: 6500; /* acima de modais e tooltips */
  max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.color-popover .cp-swatch {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 2px solid var(--border);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.color-popover .cp-swatch:hover { transform: scale(1.15); border-color: var(--text); }

/* Pílula de cliente clicável (com cor escolhida) */
.task-client-pill[onclick] { cursor: pointer; }
.task-client-pill[onclick]:hover { filter: brightness(1.1); }

/* Tabela em si */
.tasks-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  table-layout: fixed;
}
.tasks-table thead th {
  text-align: left; padding: 10px 14px;
  background: var(--surface-2);
  color: var(--text-dim); font-weight: 600; font-size: 11px;
  letter-spacing: 0.5px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--grid-line);
  white-space: nowrap;
}
.tasks-table thead th:last-child { border-right: none; }
.tasks-table thead th:first-child { padding-left: 28px; }
/* Arrastar tarefas (reordenar / mover entre tabelas) */
.task-drag { flex: none; display: inline-flex; align-items: center; color: var(--text-dim); cursor: grab; opacity: .45; margin-right: 2px; }
.task-drag:hover { opacity: 1; color: var(--text); }
.task-drag:active { cursor: grabbing; }
.tasks-table tbody tr.task-drag-over > td { box-shadow: inset 0 2px 0 0 var(--accent); }
.tasks-group.task-drop-zone { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 12px; }

/* Colunas personalizadas (criadas por você em cada tabela) */
.tasks-table thead th.task-col-custom, .tasks-table thead th.task-col-fixa { padding-right: 34px; }
.task-col-custom .tcc-acoes, .task-col-fixa .tcc-acoes { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.tasks-table thead th.task-col-custom:hover .tcc-acoes, .tasks-table thead th.task-col-fixa:hover .tcc-acoes { display: inline-flex; }
.task-col-custom .tcc-acoes button, .task-col-fixa .tcc-acoes button { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 2px; display: inline-flex; border-radius: 4px; }
.task-col-custom .tcc-acoes button:hover, .task-col-fixa .tcc-acoes button:hover { color: var(--accent); background: var(--hover); }
.task-col-custom .tcc-acoes .icon, .task-col-fixa .tcc-acoes .icon { width: 12px; height: 12px; }
.tasks-table thead th.task-col-add { width: 42px; text-align: center; }
.task-col-add button { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius: 6px; display: inline-flex; }
.task-col-add button:hover { color: var(--accent); background: var(--hover); }
.task-col-add .icon { width: 15px; height: 15px; }
.task-cell-custom { padding: 0 !important; }
.tcc-input { width: 100%; height: 100%; min-height: 42px; background: transparent; border: none; padding: 0 12px; color: var(--text); font-size: 13px; font-family: inherit; }
.tcc-input:focus { outline: none; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tcc-texto { display: block; padding: 0 12px; font-size: 13px; color: var(--text); }

/* Puxador pra ajustar a largura da coluna (arrastar a borda do cabeçalho) */
/* qualquer cabeçalho com puxador precisa ser âncora do posicionamento */
.tasks-table thead th, .fin-table thead th, .cq-table thead th { position: relative; }
.col-resizer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 9px;
  transform: translateX(4px);   /* metade pra fora: fica fácil de pegar */
  cursor: col-resize; user-select: none; z-index: 3;
}
.col-resizer::after {
  content: ''; position: absolute; top: 18%; bottom: 18%; left: 50%;
  width: 2px; border-radius: 2px; background: transparent; transition: background .12s;
}
.col-resizer:hover::after { background: var(--accent); }
body.resizing-col, body.resizing-col * { cursor: col-resize !important; user-select: none !important; }

.tasks-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
.tasks-table tbody tr:hover { background: var(--accent-soft); }
.tasks-table tbody td {
  padding: 0; color: var(--text); vertical-align: middle;
  height: 44px;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  position: relative;
}
.tasks-table tbody td:last-child { border-right: none; }
.tasks-table tbody tr:last-child td { border-bottom: none; }

/* Célula do título — padding com especificidade alta pra barra lateral não cortar */
.tasks-table tbody td.task-cell-title {
  padding: 8px 14px 8px 28px;
  font-weight: 600; color: var(--text);
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; text-overflow: ellipsis;
}
.task-cell-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-cell-title-desc { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Células coloridas inteiras (status, prioridade) — estilo Monday === */
.task-cell-colored {
  padding: 0; height: 100%;
  text-align: center;
}
.task-cell-colored select {
  width: 100%; height: 44px;
  border: none; background: transparent;
  color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px; cursor: pointer;
  padding: 0 14px; text-align: center; text-align-last: center;
  appearance: none; -webkit-appearance: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.task-cell-colored select:focus { outline: 2px solid rgba(255,255,255,0.5); outline-offset: -3px; }
.task-cell-colored select option { background: #0F2A2E; color: #fff; }

/* Cores fortes nas células (preenche cell inteira) */
td.task-st-a_fazer            { background: linear-gradient(135deg, #6b7280, #475569); }
td.task-st-em_andamento       { background: linear-gradient(135deg, #f59e0b, #d97706); }
td.task-st-aguardando_cliente { background: linear-gradient(135deg, #06b6d4, #0891b2); }
td.task-st-em_revisao         { background: linear-gradient(135deg, #a855f7, #7e22ce); }
td.task-st-ajuste             { background: linear-gradient(135deg, #ec4899, #be185d); }
td.task-st-concluido          { background: linear-gradient(135deg, #10b981, #047857); }
td.task-st-bloqueado          { background: linear-gradient(135deg, #ef4444, #b91c1c); }

/* SLA — célula colorida (igual Monday) */
td.task-sla-24h    { background: linear-gradient(135deg, #f43f5e, #be123c); }
td.task-sla-72h    { background: linear-gradient(135deg, #f59e0b, #d97706); }
td.task-sla-5d     { background: linear-gradient(135deg, #06b6d4, #0891b2); }
td.task-sla-7_10d  { background: linear-gradient(135deg, #10b981, #047857); }
td.task-sla-none   { background: transparent; }
td.task-sla-none select { color: var(--text-dim); text-shadow: none; }

/* Saúde da tarefa — pílula (calculada) */
.task-cell-saude { text-align: center; }
.task-saude { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.task-saude-atrasado { background: rgba(239,68,68,0.18);  color: #f87171; }
.task-saude-no_prazo { background: rgba(6,182,212,0.18);  color: #22d3ee; }
.task-saude-pausado  { background: rgba(148,163,184,0.20); color: #cbd5e1; }
body.intops-light .task-saude-atrasado { background: rgba(239,68,68,0.14);  color: #b91c1c; }
body.intops-light .task-saude-no_prazo { background: rgba(6,182,212,0.16);  color: #0e7490; }
body.intops-light .task-saude-pausado  { background: rgba(100,116,139,0.16); color: #475569; }

/* ===== Gerenciador de Etiquetas ===== */
.label-set { padding: 16px 0; border-bottom: 1px solid var(--line); }
.label-set:last-child { border-bottom: none; }
.label-set-title { font-size: 15px; font-weight: 700; }
.label-set-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.label-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.label-row { display: flex; align-items: center; gap: 10px; }
.label-color {
  width: 34px; height: 34px; flex: 0 0 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer;
}
.label-color::-webkit-color-swatch-wrapper { padding: 3px; }
.label-color::-webkit-color-swatch { border: none; border-radius: 5px; }
.label-name { flex: 1; }
.label-lock, .label-del {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--text-dim);
}
.label-lock { opacity: 0.5; }
.label-del { background: var(--bg-3); cursor: pointer; }
.label-del:hover { background: rgba(255,107,138,0.15); color: var(--danger); }
.label-add { margin-top: 2px; }
.btn.btn-sm { padding: 6px 12px; font-size: 13px; }
.tasks-header-actions { display: flex; gap: 10px; align-items: center; }

/* Data de início inline + scroll horizontal da tabela */
.task-cell-inicio { text-align: center; }
.task-cell-inicio input { border: none; background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; text-align: center; }
.tasks-table-scroll { overflow-x: auto; }

td.task-pr-baixa    { background: linear-gradient(135deg, #34d399, #10b981); }
td.task-pr-media    { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
td.task-pr-alta     { background: linear-gradient(135deg, #fb7185, #e11d48); }
td.task-pr-urgente  { background: linear-gradient(135deg, #f97316, #c2410c); }

/* Célula de cliente — pílula colorida (cor varia por hash) */
.tasks-table tbody td.task-cell-client { padding: 8px 14px; }
.task-client-pill {
  display: inline-block; padding: 4px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #fff;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcp-0 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.tcp-1 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.tcp-2 { background: linear-gradient(135deg, #ec4899, #be185d); }
.tcp-3 { background: linear-gradient(135deg, #f59e0b, #b45309); }
.tcp-4 { background: linear-gradient(135deg, #10b981, #047857); }
.tcp-5 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tcp-6 { background: linear-gradient(135deg, #f43f5e, #be123c); }
.tcp-7 { background: linear-gradient(135deg, #14b8a6, #0f766e); }

.task-cell-empty { color: var(--text-dim); font-size: 12px; padding: 8px 14px; font-style: italic; }

/* Célula do responsável — só avatar circular (Monday-style) */
.tasks-table tbody td.task-cell-resp { padding: 8px 14px; text-align: center; }
.task-cell-resp .task-resp-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #006D6A);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #0F2A2E;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,0.08);
  position: relative; cursor: help;
}
.task-cell-resp .task-resp-avatar[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #0F2A2E; color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
  border: 1px solid var(--border); z-index: 5;
}
.task-cell-resp .task-resp-avatar:hover::after { opacity: 1; }

/* Célula de prazo */
.tasks-table tbody td.task-cell-prazo {
  padding: 8px 14px; font-size: 12px; font-weight: 600; text-align: center;
  color: var(--text);
}
.task-cell-prazo.late { color: #ef4444; }
.task-cell-prazo.soon { color: #fbbf24; }
.task-cell-prazo.none { color: var(--text-dim); font-weight: 400; }

/* Datepicker inline */
.task-cell-prazo input[type="date"] {
  background: transparent; border: none; color: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
  width: 100%; text-align: center;
}
.task-cell-prazo input[type="date"]:hover { background: var(--hover); }
.task-cell-prazo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6); cursor: pointer;
}

/* Footer da tabela: "+ Nova tarefa" inline (estilo Monday) */
.tasks-group-footer {
  padding: 10px 22px;
  border-top: 1px dashed var(--border);
  display: flex; gap: 14px; align-items: center;
  font-size: 12px; color: var(--text-dim);
}
.tasks-group-footer .footer-add {
  background: transparent; border: none; color: var(--accent);
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 4px 0;
}
.tasks-group-footer .footer-add:hover { text-decoration: underline; }

/* === KANBAN === */
.kanban-board {
  display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr));
  gap: 14px; min-height: 480px;
  overflow-x: auto; padding-bottom: 10px;
}
.kanban-col {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; display: flex; flex-direction: column;
  min-height: 200px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.kanban-col.dragover { background: var(--accent-soft); border-color: var(--accent); }
.kanban-col-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.kanban-col-title {
  font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.3px;
}
.kanban-col-count {
  background: var(--hover); color: var(--text-dim);
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.kanban-col-strip {
  height: 3px; border-radius: 3px; margin-bottom: 10px;
}
.kanban-col[data-status="a_fazer"]      .kanban-col-strip { background: #94a3b8; }
.kanban-col[data-status="em_andamento"] .kanban-col-strip { background: #f59e0b; }
.kanban-col[data-status="em_revisao"]   .kanban-col-strip { background: #a855f7; }
.kanban-col[data-status="concluido"]    .kanban-col-strip { background: #10b981; }
.kanban-col[data-status="bloqueado"]    .kanban-col-strip { background: #ef4444; }

.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; flex: 1; }

.kanban-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  border-color: var(--accent);
}
.kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
.kanban-card-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  margin-bottom: 8px; line-height: 1.35;
}
.kanban-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11px; color: var(--text-dim);
}
.kanban-card-cliente {
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: 8px; font-weight: 600;
}
.kanban-card-prazo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.kanban-card-prazo .icon { width: 12px; height: 12px; }
.kanban-card-prazo.late { color: #ef4444; font-weight: 600; }
.kanban-card-prazo.soon { color: #f59e0b; font-weight: 600; }

/* Card do Kanban — paridade com a tabela */
.kanban-card-cliente-row { margin-bottom: 8px; }
.kanban-card-cliente-row .task-client-pill { font-size: 11px; }
.kanban-card-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.kanban-card-badges:empty { display: none; }
.kanban-card-badges .task-prio-badge,
.kanban-card-badges .kanban-card-sla { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.kanban-card-badges .task-saude { font-size: 10px; padding: 2px 8px; }
.kanban-card-sla { background: var(--bg-3); color: var(--text-dim); }

.kanban-card-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.kanban-card-upd {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; font-size: 10.5px; color: var(--text-dim);
}
.kanban-card-upd .icon { width: 11px; height: 11px; }

.kanban-empty {
  text-align: center; color: var(--text-dim); font-size: 12px;
  padding: 24px 8px; font-style: italic;
}

/* === Modal de tarefa === */
.task-modal-card { max-width: 760px; width: 100%; }

.task-tabs {
  display: flex; gap: 2px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.task-tab {
  background: transparent; border: none; color: var(--text-dim);
  padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 600;
  border-bottom: 2px solid transparent; transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.task-tab:hover { color: var(--text); }
.task-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.task-tab-count {
  background: var(--hover); padding: 1px 7px;
  border-radius: 10px; font-size: 10px; font-weight: 700;
}
.task-tab-pane.hidden { display: none; }

/* Comentários */
.comments-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto; margin-bottom: 12px;
}
.comment-item {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.comment-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px; font-size: 11px;
}
.comment-author { color: var(--accent); font-weight: 600; }
.comment-date   { color: var(--text-dim); }
.comment-body   { color: var(--text); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.comment-delete {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 14px; padding: 0 4px; margin-left: 6px;
}
.comment-delete:hover { color: #ef4444; }
.comment-composer {
  display: flex; gap: 10px; align-items: flex-end;
}
.comment-composer textarea { flex: 1; }

/* Anexos */
.attach-uploader {
  display: flex; gap: 10px; align-items: center; margin-bottom: 14px;
}
.attach-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 340px; overflow-y: auto;
}
.attach-item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.attach-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.attach-icon { font-size: 22px; }
.attach-name { color: var(--text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-meta { color: var(--text-dim); font-size: 11px; }
.attach-actions { display: flex; gap: 6px; }
.attach-actions .icon-btn { padding: 4px 8px; }

@media (max-width: 900px) {
  .kanban-board { grid-template-columns: repeat(5, 280px); }
  .tasks-filters .input { max-width: none; flex: 1 1 140px; }
}

/* ============ ARQUIVOS (DRIVE INTERNO) ============ */
.drive-shell { padding: 28px 32px; max-width: 1400px; margin: 0 auto; }
.drive-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.drive-title { font-size: 26px; font-weight: 800; margin: 0; color: var(--text); }
.drive-subtitle { color: var(--text-dim); font-size: 14px; margin: 4px 0 0; }
.drive-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.drive-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; font-size: 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.drive-crumb { cursor: pointer; color: var(--accent); font-weight: 600; }
.drive-crumb:hover { text-decoration: underline; }
.drive-crumb.current { color: var(--text); cursor: default; }
.drive-crumb.current:hover { text-decoration: none; }
.drive-crumb-sep { color: var(--text-dim); }

.drive-status { font-size: 13px; color: var(--text-dim); min-height: 18px; margin-bottom: 8px; }

.drive-grid { display: flex; flex-direction: column; gap: 24px; }
.drive-grid-inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.drive-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--turquoise); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.drive-section-count {
  font-size: 11px; font-weight: 600; color: var(--text-faded);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.drive-empty-sm { color: var(--text-faded); font-size: 13px; padding: 6px 0 2px; }
.drive-empty {
  grid-column: 1 / -1; text-align: center; color: var(--text-dim);
  padding: 56px 0; font-size: 15px;
}
.drive-item {
  position: relative; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 14px 14px; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
}
.drive-item:hover { border-color: var(--accent); background: var(--hover); }
.drive-item:active { transform: scale(.98); }
.drive-item-icon { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.drive-item-name {
  font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.drive-item-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.drive-item-menu { position: absolute; top: 6px; right: 6px; display: none; gap: 2px; z-index: 5; }
.drive-item:hover .drive-item-menu { display: flex; }
.drive-item-menu button {
  font-size: 13px; padding: 3px 6px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border);
}
.drive-item-menu button:hover { background: var(--hover-strong); }

/* ===== Área do Cliente (Meu Projeto) ===== */
.project-shell { max-width: 1000px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
.project-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.project-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; }
.project-title { font-size: 30px; font-weight: 700; margin: 12px 0 6px; color: var(--text); }
.project-subtitle { color: var(--text-dim); font-size: 15px; margin: 0; }
.project-status { margin-top: 6px; }
.project-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.project-card-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.project-card-value { font-size: 16px; color: var(--text); font-weight: 600; }
.project-objetivo-text { font-size: 15px; color: var(--text); line-height: 1.6; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.project-servicos { display: flex; flex-wrap: wrap; gap: 8px; }
.project-servico-chip { background: var(--accent-soft); color: var(--turquoise); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.project-soon { text-align: center; color: var(--text-dim); font-size: 14px; padding: 20px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface); }
.project-loading, .project-empty { padding: 48px; color: var(--text-dim); text-align: center; line-height: 1.6; }

/* ===== Acesso do cliente (login / convite) ===== */
.client-access-status { display: inline-block; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 10px; }
.client-access-status.active { color: #0a8a8f; background: var(--accent-soft); border-color: var(--turquoise); }
.client-access-status.pending { color: #b9770a; background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.4); }
.client-access-status.none { color: var(--text-dim); background: var(--surface); }
.client-access-hint { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.client-access-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.client-access-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 14px; line-height: 1.4; }
.client-access-check input { margin-top: 2px; flex-shrink: 0; }
.client-access-check span { color: var(--text); }
.client-access-check small { display: block; color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.client-access-box { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.client-access-box .client-view-section-title { margin-bottom: 12px; }
.client-access-note { margin-top: 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border); }

/* ============ ROADMAP (Super Admin) ============ */
.roadmap-shell { max-width: 1100px; margin: 0 auto; padding: 28px 32px 60px; }
.roadmap-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.roadmap-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; }
.roadmap-subtitle { color: var(--text-dim); font-size: 14px; margin-top: 6px; max-width: 620px; }
.roadmap-list { display: flex; flex-direction: column; gap: 26px; }
.roadmap-section-title {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim);
  margin-bottom: 12px; padding-left: 10px; border-left: 3px solid var(--accent);
}
.roadmap-count {
  font-size: 11px; font-weight: 600; color: var(--text-faded);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.roadmap-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.roadmap-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; box-shadow: var(--card-shadow);
}
.roadmap-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.roadmap-card-actions { display: flex; gap: 4px; }
.roadmap-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.roadmap-card-desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; white-space: pre-wrap; }
.roadmap-card-foot { margin-top: 12px; }
.roadmap-move { font-size: 11px; color: var(--text-faded); display: flex; flex-direction: column; gap: 4px; }
.roadmap-move select { font-size: 13px; }
.roadmap-prio { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.roadmap-prio.prio-baixa { background: rgba(100,116,139,.16); color: #475569; }
.roadmap-prio.prio-media { background: rgba(59,130,246,.14); color: #1d4ed8; }
.roadmap-prio.prio-alta  { background: rgba(239,68,68,.14);  color: #b91c1c; }
.roadmap-empty { text-align: center; color: var(--text-dim); padding: 56px 0; font-size: 15px; }
.roadmap-empty-sm { color: var(--text-faded); font-size: 13px; padding: 2px 0 0 10px; }
.roadmap-toolbar { margin-bottom: 22px; }
.roadmap-filter-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); max-width: 260px; }
.roadmap-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.roadmap-area { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }

/* ============ CONTEÚDO / PRÉVIA DO INSTAGRAM ============ */
.content-shell { max-width: 900px; margin: 0 auto; padding: 28px 32px 60px; }
.content-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.content-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; }
.content-subtitle { color: var(--text-dim); font-size: 14px; margin-top: 6px; max-width: 560px; }
.content-toolbar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.content-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); }
.content-field .input { min-width: 200px; }
.content-empty { text-align: center; color: var(--text-dim); padding: 48px 16px; font-size: 15px; }
.content-form-row { display: flex; gap: 14px; }
.content-form-row .form-group { flex: 1; }

/* Uploader de arte */
.content-art-uploader {
  border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2);
  min-height: 160px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; text-align: center;
}
.content-art-uploader:hover { border-color: var(--accent); }
.content-art-preview { width: 100%; max-height: 320px; object-fit: contain; display: block; }
.content-art-hint { color: var(--text-dim); font-size: 13px; line-height: 1.6; padding: 24px; }

/* Simulação do feed (perfil estilo Instagram) */
.insta-frame {
  max-width: 470px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow);
}
.insta-profile { display: flex; align-items: center; gap: 16px; padding: 18px 18px 16px; border-bottom: 1px solid var(--border); }
.insta-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border: 2px solid var(--accent);
}
.insta-avatar .icon { width: 26px; height: 26px; }
.insta-handle { font-weight: 700; font-size: 15px; }
.insta-stats { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--border); }
.insta-cell {
  position: relative; aspect-ratio: 1 / 1; background: var(--surface-2);
  cursor: pointer; overflow: hidden;
}
.insta-cell-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insta-cell-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-faded); }
.insta-cell:hover .insta-cell-img { opacity: .85; }
.insta-cell-type { position: absolute; top: 6px; right: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.insta-cell-type .icon { width: 16px; height: 16px; }
.insta-cell-status { position: absolute; bottom: 6px; left: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.insta-cell-status.st-aguardando { background: #eab308; }
.insta-cell-status.st-aprovado   { background: #22c55e; }
.insta-cell-status.st-reprovado  { background: #ef4444; }

/* Modal de ver post */
.content-view-card { max-width: 460px; }
.content-view-img { width: 100%; max-height: 380px; object-fit: contain; border-radius: 10px; background: var(--surface-2); display: block; }
.content-view-noimg { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; color: var(--text-faded); background: var(--surface-2); border-radius: 10px; }
.content-view-meta { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 13px; color: var(--text-dim); }
.content-status-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.content-status-badge.st-aguardando { background: rgba(234,179,8,.16); color: #a16207; }
.content-status-badge.st-aprovado   { background: rgba(34,197,94,.14); color: #15803d; }
.content-status-badge.st-reprovado  { background: rgba(239,68,68,.14); color: #b91c1c; }
.content-view-caption { font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 12px; }
.content-view-comment { font-size: 13px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.content-approve-box { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.content-approve-box label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); display: block; margin-bottom: 5px; }

/* --- Perfil profissional (bio, stories, destaques, abas, reels) --- */
.content-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.insta-top { display: flex; align-items: center; gap: 20px; padding: 18px 18px 12px; }
.insta-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.insta-top .insta-avatar { width: 72px; height: 72px; }
.insta-top-info { flex: 1; }
.insta-counts { display: flex; gap: 18px; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.insta-counts strong { color: var(--text); }
.insta-bio { padding: 0 18px 12px; }
.insta-bio-name { font-weight: 700; font-size: 14px; }
.insta-bio-cat { font-size: 13px; color: var(--text-dim); }
.insta-bio-text { font-size: 13px; line-height: 1.5; white-space: pre-line; margin-top: 3px; }
.insta-bio-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 4px; cursor: pointer; }
.insta-bio-link .icon { width: 14px; height: 14px; }
.insta-default-row { display: flex; gap: 6px; padding: 0 18px 12px; }
.insta-default-btn { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.insta-default-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.insta-default-btn.narrow { flex: 0 0 auto; width: 40px; display: inline-flex; align-items: center; justify-content: center; }
.insta-action-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.insta-action-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }

.insta-stories, .insta-highlights { display: flex; gap: 14px; padding: 12px 18px; overflow-x: auto; border-top: 1px solid var(--border); }
.insta-story, .insta-highlight { flex: 0 0 auto; text-align: center; cursor: pointer; width: 68px; }
.insta-story-ring, .insta-highlight-cover {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0 auto;
  padding: 2px; border: 2px solid var(--border); background: var(--surface);
}
.insta-story-ring { padding: 3px; border-width: 2px; }
.insta-story-ring.st-aguardando, .insta-highlight-cover.st-aguardando { border-color: #eab308; }
.insta-story-ring.st-aprovado,   .insta-highlight-cover.st-aprovado   { border-color: #22c55e; }
.insta-story-ring.st-reprovado,  .insta-highlight-cover.st-reprovado  { border-color: #ef4444; }
.insta-story-ring img, .insta-highlight-cover img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.insta-circle-noimg { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-faded); }
.insta-circle-label { font-size: 11px; color: var(--text-dim); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.insta-tabs { display: flex; border-top: 1px solid var(--border); }
.insta-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faded); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.insta-tab.active { color: var(--text); border-bottom-color: var(--text); }
.insta-tab .icon { width: 16px; height: 16px; }
.insta-cell.reel { aspect-ratio: 9 / 16; }

.content-avatar-uploader { width: 96px; height: 96px; border-radius: 50%; border: 1px dashed var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.content-avatar-uploader:hover { border-color: var(--accent); }
.content-avatar-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-avatar-hint { color: var(--text-faded); display: flex; align-items: center; justify-content: center; }
.content-avatar-hint .icon { width: 26px; height: 26px; }

/* --- Central do Cliente (360): abas + listas --- */
.client-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 6px 0 16px; flex-wrap: wrap; }
.client-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.client-tab:hover { color: var(--text); }
.client-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.client-tab .icon { width: 15px; height: 15px; }
.client-list { display: flex; flex-direction: column; gap: 8px; }
.client-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.client-list-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; min-width: 0; color: var(--text); }
.client-list-title .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); }
.client-list-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.client-sub-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--turquoise); margin: 8px 0 8px; }

/* Alternador de visão (Cartões / Quadro) na Gestão de Clientes */
.clients-view-toggle { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; margin-left: auto; }
.cv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: none; border: none; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; }
.cv-btn .icon { width: 15px; height: 15px; }
.cv-btn.active { background: var(--accent); color: var(--on-accent); }

/* Visão Quadro (tabela agrupada estilo Monday) */
.cq-group { margin-bottom: 22px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cq-group-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface-2); border-left: 4px solid var(--text-dim); font-weight: 700; cursor: pointer; }
.cq-group-arrow { display: inline-flex; color: var(--text-dim); }
.cq-group-arrow .icon { width: 16px; height: 16px; }
.cq-st-ativo .cq-group-head { border-left-color: #00c875; }
.cq-st-pausado .cq-group-head { border-left-color: #e8a710; }
.cq-st-negociacao .cq-group-head { border-left-color: #579bfc; }
.cq-st-cancelado .cq-group-head { border-left-color: #e2445c; }
.cq-group-count { font-size: 11px; font-weight: 600; color: var(--text-faded); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.cq-scroll { overflow-x: auto; }
.cq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cq-table th { text-align: left; padding: 10px 14px; color: var(--text-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.cq-row { cursor: pointer; }
.cq-row:hover .cq-cell:not(.cq-colored) { background: var(--hover); }
.cq-cell { padding: 8px 12px; color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--bg-0); border-right: 1px solid var(--bg-0); }
.cq-name { font-weight: 600; min-width: 160px; }
.cq-colored { color: #fff; font-weight: 600; text-align: center; }
.cq-num { text-align: right; }
.cq-dim { color: var(--text-faded); }
.cq-chips { display: flex; gap: 4px; flex-wrap: nowrap; }
.cq-chip { display: inline-block; font-size: 11px; color: #fff; font-weight: 600; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.cq-chip-more { background: var(--text-faded) !important; }
.cq-add-row .cq-cell { color: var(--text-dim); font-size: 13px; cursor: pointer; }
.cq-add-row:hover .cq-cell { color: var(--accent); }
.cq-table tfoot td { padding: 10px 12px; border-top: 1px solid var(--border); }
.cq-total { text-align: right; color: var(--text); font-weight: 700; }
.cq-total-lbl { font-size: 10px; font-weight: 500; color: var(--text-faded); text-transform: uppercase; }
.cq-dist { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.cq-dist-seg { height: 100%; }

/* --- Construtor de formulários --- */
.forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--card-shadow); }
.form-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.form-card-title { font-size: 15px; font-weight: 600; }
.form-card-desc { font-size: 13px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
.form-card-meta { font-size: 12px; color: var(--text-faded); margin-top: 10px; }
.form-empty-hint { color: var(--text-faded); font-size: 13px; padding: 8px 0; }
.fb-field { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: var(--surface); }
.fb-field-row { display: flex; gap: 8px; align-items: center; }
.fb-field-row .input { flex: 1; }
.fb-field-row .fb-type { flex: 0 0 150px; }
.fb-opts { margin-top: 8px; }
.fb-req { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.fb-multi { display: flex; flex-direction: column; gap: 6px; }

/* Onboarding no portal do cliente (segue o padrão .project-card) */
.onboarding-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.onboarding-cta-text { color: var(--text-dim); font-size: 14px; flex: 1; min-width: 200px; }
.onboarding-done-msg { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); flex: 1; min-width: 200px; }
.onboarding-inner .btn { flex-shrink: 0; }

/* Personalização do portal do cliente */
.project-banner { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 18px; overflow: hidden; background: var(--bg-2); }
.project-banner img { display: block; width: 100%; height: 200px; object-fit: cover; }
.project-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.project-wpp { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }
.project-welcome { cursor: pointer; }
.project-welcome:hover { border-color: var(--accent); }
.project-welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.project-welcome-text { color: var(--text-dim); font-size: 14px; flex: 1; min-width: 200px; }
.welcome-text { white-space: pre-wrap; line-height: 1.7; font-size: 15px; color: var(--text); }
.portal-logo-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-logo-prev { max-height: 72px; max-width: 220px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--surface-2); }
.portal-logo-empty { color: var(--text-faded); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 14px 18px; border: 1px dashed var(--border); border-radius: 8px; }

/* Briefing (perguntas e respostas) na aba Estratégia */
.brief-qa { padding: 10px 0; border-bottom: 1px solid var(--border); }
.brief-qa:last-child { border-bottom: none; }
.brief-q { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim); margin-bottom: 3px; }
.brief-a { font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--text); }
.brief-section-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin: 16px 0 6px; }
.form-section-head { font-size: 15px; font-weight: 800; color: var(--accent); margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Mapa mental / Planejamento */
.mm-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mm-toolbar .mm-hint { font-size: 12px; color: var(--text-dim); }
/* Desfazer / Refazer */
.mm-undo-group { display: inline-flex; gap: 4px; }
.mm-undo-btn {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-undo-btn .icon { width: 16px; height: 16px; }
.mm-undo-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mm-undo-btn:disabled { opacity: 0.4; cursor: default; }
.mm-save-status { font-size: 12px; font-weight: 600; color: var(--text-dim); min-width: 70px; }
.mm-save-status.ok  { color: #10b981; }
.mm-save-status.err { color: var(--danger); }
.mm-toolbar .mm-active { border-color: var(--accent); color: var(--accent); }
.mm-canvas { position: relative; height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: grab; }
.mm-canvas.mm-panning { cursor: grabbing; }
.mm-canvas.mm-panning .mm-node { pointer-events: none; }
.mm-world { position: relative; width: 6000px; height: 4000px; }
.mm-edges { position: absolute; top: 0; left: 0; pointer-events: none; }
.mm-edge-line { stroke: var(--text-faded); stroke-width: 2; }
.mm-edge-temp { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
/* Ramos (hierarquia) = curvas; setas relacionais = tracejado com ponta */
.mm-branch { fill: none; stroke-width: 2.5; opacity: 0.85; }
.mm-rel { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 5 4; }
.mm-editor-page { padding: 20px 24px 40px; }
.mm-zoom { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.mm-zoom-btn { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.mm-zoom-btn:hover { border-color: var(--accent); color: var(--accent); }
.mm-zoom #mm-zoom-lbl { font-size: 13px; color: var(--text-dim); min-width: 42px; text-align: center; }
.mm-toolbar-ro { justify-content: flex-end; }
.mm-node { position: absolute; min-width: 90px; max-width: 280px; background: #04ddd2; border: 2px solid #04ddd2; border-radius: 10px; padding: 9px 13px; box-shadow: var(--card-shadow); cursor: grab; user-select: none; z-index: 2; }
.mm-node:active { cursor: grabbing; }
.mm-node.root { border-radius: 14px; padding: 12px 18px; z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
/* Subtópico: sem caixa, só linha embaixo + bolinha colorida */
.mm-node.line {
  border-width: 0; border-bottom-width: 2.5px; border-bottom-style: solid;
  border-radius: 0; box-shadow: none; padding: 4px 10px 6px 27px; min-width: 60px;
}
.mm-node.line .mm-node-text { color: var(--text); text-shadow: none; font-weight: 600; display: block; }
.mm-node.line:hover { background: var(--hover) !important; }
/* Bolinha do subtópico: fora do texto editável, alinhada à 1ª linha */
.mm-bullet { position: absolute; left: 10px; top: 8px; width: 10px; height: 10px; border-radius: 50%; }
.mm-node.selected { outline: 3px solid rgba(255,255,255,0.75); outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent), var(--card-shadow); }
/* Quebra de texto natural: só em espaços (e no meio de palavras APENAS se a
   palavra não couber na largura). white-space:pre-wrap respeita o Enter. */
.mm-node-text { font-size: 13px; color: #fff; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; word-break: normal; white-space: pre-wrap; text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.mm-node.root .mm-node-text { font-size: 15px; font-weight: 700; }
.mm-node-text[contenteditable="true"] { outline: none; cursor: text; }
.mm-node-actions { position: absolute; top: -12px; right: -6px; display: none; gap: 2px; z-index: 4; }
.mm-node:hover .mm-node-actions,
.mm-node.selected .mm-node-actions { display: flex; }
.mm-mini { width: 22px; height: 22px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mm-mini .icon { width: 13px; height: 13px; }
.mm-mini.danger:hover { color: var(--danger); border-color: var(--danger); }
/* Botão "+" para criar filho (aparece no hover) */
.mm-add { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 2px solid var(--card); font-size: 16px; line-height: 1; font-weight: 700; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 4; }
.mm-node:hover .mm-add { display: flex; }
/* Caret de recolher/expandir ramo */
.mm-caret { position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 4; }
.mm-caret:hover { color: var(--accent); border-color: var(--accent); }
.mm-canvas.readonly .mm-node { cursor: default; }
/* Alça de redimensionar (canto inferior direito) */
/* Alça de largura: faixa na borda DIREITA do tópico (a altura é automática) */
.mm-resize { position: absolute; right: -6px; top: 0; bottom: 0; width: 12px; cursor: ew-resize; opacity: 0; z-index: 5; }
.mm-resize::after { content: ''; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 3px; background: var(--accent); }
.mm-node:hover .mm-resize, .mm-node.selected .mm-resize { opacity: 0.9; }
.mm-sp-tip { font-size: 11px; color: var(--text-dim); }

/* Painel de estilo do nó (cor, texto, alinhamento) */
.mm-style-panel {
  position: absolute; z-index: 220; width: 288px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; box-shadow: 0 14px 38px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; gap: 8px;
}
.mm-sp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mm-sp-row.col { flex-direction: column; align-items: stretch; gap: 5px; }
.mm-sp-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; min-width: 58px; }
.mm-sp-btn {
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mm-sp-btn .icon { width: 15px; height: 15px; }
.mm-sp-btn:hover { border-color: var(--accent); }
.mm-sp-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mm-sp-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.mm-sw-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.mm-sw { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.mm-sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--accent); }
.mm-sw-auto { height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 11px; font-weight: 700; cursor: pointer; }
.mm-sw-auto.on { border-color: var(--accent); color: var(--accent); }
.mm-sw-custom {
  width: 22px; height: 22px; border-radius: 6px; border: 1px dashed var(--border);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-dim); font-weight: 700; position: relative; overflow: hidden;
}
.mm-sw-custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mm-empty { position: absolute; top: 40px; left: 0; right: 0; text-align: center; color: var(--text-dim); font-size: 14px; }
.mm-canvas.big { height: 72vh; min-height: 460px; }

/* Galeria de mapas (Planejamentos) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.plan-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; cursor: pointer; box-shadow: var(--card-shadow); transition: border-color .15s, transform .1s; }
.plan-card:hover { border-color: var(--accent); }
.plan-card:active { transform: scale(.99); }
.plan-card-icon { color: var(--accent); }
.plan-card-icon .icon { width: 30px; height: 30px; }
.plan-card-title { font-size: 15px; font-weight: 700; margin-top: 10px; }
.plan-card-client { font-size: 12px; color: var(--text-dim); margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.plan-card-client .icon { width: 14px; height: 14px; }
.plan-card-date { font-size: 11px; color: var(--text-faded); margin-top: 8px; }
.plan-card-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); display: none; align-items: center; justify-content: center; cursor: pointer; }
.plan-card:hover .plan-card-del { display: inline-flex; }
.plan-card-del:hover { color: var(--danger); border-color: var(--danger); }
.plan-card-dup { position: absolute; top: 8px; right: 40px; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); display: none; align-items: center; justify-content: center; cursor: pointer; }
.plan-card:hover .plan-card-dup { display: inline-flex; }
.plan-card-dup:hover { color: var(--accent); border-color: var(--accent); }

/* Barra do editor de mapa */
.mm-editor-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mm-title-input { flex: 1; min-width: 200px; font-weight: 600; }
.mm-client-sel { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim); }
.mm-client-sel select { min-width: 180px; }

/* Visualizador em tela cheia */
#mindmap-viewer { align-items: stretch; justify-content: stretch; padding: 24px; }
.mm-viewer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.mm-viewer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.mm-viewer-head h2 { font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.mm-viewer-host { flex: 1; padding: 14px; overflow: hidden; }
.mm-viewer-host .mm-canvas.big { height: 100%; }

/* ============================================================
   EDITOR DE DOCUMENTOS (estilo Google Docs) — Arquivos
   ============================================================ */
.doc-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg-1); flex-direction: column; }
.doc-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.doc-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.doc-back:hover { background: var(--hover); }
.doc-top-icon { width: 20px; height: 20px; color: var(--accent); }
.doc-title-input { flex: 1; min-width: 80px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-size: 16px; font-weight: 600; padding: 7px 10px; font-family: inherit; }
.doc-title-input:hover { border-color: var(--border); }
.doc-title-input:focus { outline: none; border-color: var(--accent); background: var(--card); }
.doc-save-status { font-size: 12px; color: var(--text-faded); white-space: nowrap; min-width: 60px; text-align: right; }
.doc-save-status.saved { color: #16a34a; }
.doc-save-btn { flex-shrink: 0; }

.doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.doc-tb-group { display: flex; align-items: center; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--border); }
.doc-tb-group:last-child { border-right: none; }
.doc-tb-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; border-radius: 7px; border: none; background: transparent; color: var(--text); cursor: pointer; }
.doc-tb-btn .icon { width: 17px; height: 17px; }
.doc-tb-btn:hover { background: var(--hover); }
.doc-tb-btn.active { background: var(--accent-soft); color: var(--accent); }
.doc-tb-select { height: 32px; border-radius: 7px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; padding: 0 6px; cursor: pointer; font-family: inherit; max-width: 150px; }
.doc-tb-font { min-width: 118px; }
.doc-tb-size { width: 58px; }
.doc-color-btn { flex-direction: column; }
.doc-color-bar { position: absolute; bottom: 4px; left: 7px; right: 7px; height: 3px; border-radius: 2px; }

.doc-pop-wrap { position: relative; }
.doc-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 8px; }
.doc-color-pop { display: grid; grid-template-columns: repeat(8, 22px); gap: 5px; }
.doc-swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.doc-swatch:hover { transform: scale(1.12); }
.doc-swatch-none { display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--text-dim); font-size: 10px; }
.doc-emoji-pop { width: 268px; max-height: 240px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.doc-emoji-btn { font-size: 19px; line-height: 1; padding: 4px; border: none; background: transparent; border-radius: 6px; cursor: pointer; }
.doc-emoji-btn:hover { background: var(--hover); }
.doc-icon-pop { width: 240px; max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.doc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; border-radius: 7px; color: var(--text); cursor: pointer; }
.doc-icon-btn .icon { width: 18px; height: 18px; }
.doc-icon-btn:hover { background: var(--hover); color: var(--accent); }

.doc-page-scroll { flex: 1; overflow: auto; padding: 32px 16px 80px; display: flex; flex-direction: column; align-items: center; }
.doc-page { background: var(--card); width: 816px; max-width: 100%; min-height: 1056px; box-shadow: 0 2px 14px rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 2px; }
.doc-margin-normal { padding: 76px 96px; }
.doc-margin-narrow { padding: 40px 54px; }
.doc-margin-wide { padding: 100px 150px; }
.doc-body { outline: none; min-height: 400px; color: var(--text); font-family: 'Poppins', system-ui, sans-serif; font-size: 11pt; line-height: 1.55; word-wrap: break-word; }
.doc-body:empty:before { content: attr(data-placeholder); color: var(--text-faded); pointer-events: none; }
.doc-body:focus { outline: none; }
.doc-body h1 { font-size: 24pt; font-weight: 700; margin: 14px 0 6px; line-height: 1.25; }
.doc-body h2 { font-size: 18pt; font-weight: 700; margin: 12px 0 5px; line-height: 1.3; }
.doc-body h3 { font-size: 14pt; font-weight: 600; margin: 10px 0 4px; color: var(--text-dim); }
.doc-body p { margin: 0 0 4px; }
.doc-body ul, .doc-body ol { padding-left: 26px; margin: 4px 0; }
.doc-body li { margin: 2px 0; }
.doc-body a { color: var(--accent); text-decoration: underline; }
.doc-body img { max-width: 100%; height: auto; border-radius: 4px; }
.doc-body hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.doc-body blockquote { margin: 8px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: var(--text-dim); font-style: italic; }
.doc-check-item { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; }
.doc-check-box { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--text-faded); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; user-select: none; }
.doc-check-box:hover { border-color: var(--accent); }
.doc-check-item.done .doc-check-box { background: var(--accent); border-color: var(--accent); }
.doc-check-item.done .doc-check-box:after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; }
.doc-check-txt { flex: 1; }
.doc-check-item.done .doc-check-txt { text-decoration: line-through; color: var(--text-faded); }

/* Item de documento na grade do Drive */
.drive-item.drive-doc .drive-item-icon { color: var(--accent); }

@media (max-width: 900px) {
  .doc-margin-normal { padding: 48px 40px; }
  .doc-margin-wide { padding: 60px 60px; }
  .doc-page-scroll { padding: 16px 8px 60px; }
}

/* ============================================================
   LIXEIRA de clientes (exclusão segura / soft-delete)
   ============================================================ */
.btn-lixeira { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-lixeira .icon { width: 15px; height: 15px; }
.btn-lixeira:hover { background: var(--hover); color: var(--text); }
.btn-lixeira.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.lixeira-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e2445c; color: #fff; font-size: 11px; font-weight: 700; }
.btn-lixeira.active .lixeira-badge { background: var(--accent); }

.lixeira-head { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text-dim); font-size: 13px; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lixeira-head .icon { width: 16px; height: 16px; }
.lixeira-head strong { color: var(--text); }
.lixeira-list { display: flex; flex-direction: column; gap: 10px; }
.lixeira-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.lixeira-name { font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.lixeira-name .icon { width: 16px; height: 16px; color: var(--text-dim); }
.lixeira-meta { color: var(--text-faded); font-size: 12px; margin-top: 3px; }
.lixeira-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lixeira-actions .icon { width: 15px; height: 15px; }

/* Editor de opções (perguntas de escolha/múltipla) no construtor de formulários */
.fb-options { margin: 8px 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.fb-options-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.fb-options-label .icon { width: 14px; height: 14px; flex-shrink: 0; }
.fb-options-label strong { color: var(--text); }
.fb-opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fb-opt-bullet { color: var(--text-faded); width: 16px; text-align: center; flex-shrink: 0; font-size: 15px; }
.fb-opt-input { flex: 1; }
.fb-add-opt { margin-top: 4px; font-size: 13px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
.fb-add-opt .icon { width: 15px; height: 15px; }

/* ============================================================
   CHECKLIST DE PROGRESSO no portal do cliente (visual)
   ============================================================ */

/* Separadores de seção no cadastro de cliente (tela de login) */
.cs-sep { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border-top: 1px solid var(--border); padding-top: 14px; }
.cs-sep:first-of-type { border-top: none; padding-top: 0; }
.clients-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Indicador de rascunho no modal de preenchimento de formulário */
.ff-draft-status { margin-left: auto; margin-right: 12px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ============ PROJETOS (competições internas da equipe) ============ */
.proj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.proj-title { font-size: 26px; font-weight: 700; color: var(--text); margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.proj-sub { color: var(--text-dim); font-size: 14px; margin: 0; }
.proj-tabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.proj-tab { border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.proj-tab:hover { color: var(--text); background: var(--hover); }
.proj-tab.on { background: var(--accent); color: var(--on-turquoise, #fff); }
.proj-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.proj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.proj-mes-label { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 14px; font-weight: 600; }
.proj-inp { padding: 8px 10px; font-size: 14px; }
.proj-inp-grande { flex: 1; min-width: 220px; }
.proj-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.proj-status { color: var(--text-dim); font-size: 13px; }
.proj-winner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--turquoise-soft, var(--hover)); border: 1px solid var(--accent); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.proj-winner small { color: var(--text-dim); }
.proj-win-x { border: none; background: transparent; color: var(--text-dim); cursor: pointer; padding: 2px 4px; border-radius: 6px; margin-left: auto; }
.proj-win-x:hover { color: var(--danger); background: var(--hover); }
.proj-declare { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text); margin-bottom: 14px; }
.proj-h2 { font-size: 20px; font-weight: 700; color: var(--turquoise); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.proj-h3 { font-size: 15px; font-weight: 700; color: var(--turquoise); margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; }
.proj-texto { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.proj-rank { display: flex; flex-direction: column; gap: 6px; }
.proj-rank-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 14px; color: var(--text); }
.proj-rank-row.lead { border-color: var(--accent); background: var(--turquoise-soft, var(--hover)); font-weight: 600; }
.proj-rank-pos { width: 28px; text-align: center; font-weight: 700; color: var(--text-dim); flex-shrink: 0; }
.proj-rank-row.lead .proj-rank-pos { color: var(--accent); }
.proj-rank-nome { flex: 1; }
.proj-rank-qtd { color: var(--text-dim); font-size: 13px; }
.proj-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.proj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.proj-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: var(--surface); padding: 9px 12px; border-bottom: 1px solid var(--border); }
.proj-table td { padding: 9px 12px; border-bottom: 1px solid var(--line, var(--border)); color: var(--text); }
.proj-table tbody tr:last-child td { border-bottom: none; }
.proj-table tbody tr:hover td { background: var(--hover); }
.proj-num { color: var(--text-dim); width: 34px; }
.proj-td-titulo { font-weight: 600; }
.proj-td-acoes { width: 40px; text-align: right; }
.proj-linha-off td { opacity: .55; }
.proj-arq { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.proj-arq:hover { text-decoration: underline; }
.proj-dim { color: var(--text-faded, var(--text-dim)); }
.proj-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); }
.proj-badge.ok { color: var(--success); border-color: var(--success); background: transparent; }
.proj-badge.off { color: var(--danger); border-color: var(--danger); background: transparent; }
button.proj-badge { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
button.proj-badge:hover { background: var(--hover); }
.proj-del { border: none; background: transparent; color: var(--text-dim); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.proj-del:hover { color: var(--danger); background: var(--hover); }
.proj-empty { color: var(--text-dim); font-size: 14px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 14px; }
.proj-hist { display: flex; flex-direction: column; gap: 6px; }
.proj-hist-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 14px; color: var(--text); }
.proj-hist-mes { font-weight: 700; min-width: 130px; }
.proj-hist-nome { flex: 1; display: inline-flex; align-items: center; gap: 6px; }
.proj-hist-obs { color: var(--text-dim); font-size: 13px; }
.proj-hist-premio { font-weight: 700; color: var(--success); }
@media (max-width: 720px) {
  .proj-head { flex-direction: column; align-items: stretch; }
  .proj-tabs { align-self: flex-start; }
}

/* Filtros extras da tela de Clientes (Carteira e Serviço) — valem pras 2 visões */
.clients-filter-sep { width: 1px; align-self: stretch; background: var(--line, var(--border)); margin: 2px 4px; }
.clients-extra-filter {
  padding: 9px 14px; background: var(--bg-2, var(--surface)); border: 1px solid var(--line, var(--border));
  border-radius: 999px; color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; max-width: 200px;
}
.clients-extra-filter:hover { border-color: var(--accent); }
.clients-extra-filter:focus { outline: none; border-color: var(--accent); }

/* Modais: rótulos dos campos no verde da marca (teal legível do tema claro —
   o mesmo dos títulos de seção da ficha de cliente). Vale pra TODOS os modais
   (são cartões claros); páginas comuns e superfícies escuras (login/hero) ficam fora. */
.modal-overlay .form-group label {
  color: var(--turquoise);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mapa mental — enquanto EDITA um tópico, ele ganha espaço garantido pra
   digitar: largura mínima utilizável e crescimento livre (a largura salva/máxima
   volta a valer quando a edição termina e o mapa redesenha). */
.mm-node:has(> .mm-node-text[contenteditable="true"]) {
  min-width: 160px !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

/* ============ FORMULÁRIOS DA EQUIPE ============ */
/* Card no Início da Operação (lado do membro) */
.ops-team-forms-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-top: 18px; }
.ops-tf-head { font-size: 15px; font-weight: 700; color: var(--turquoise); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ops-tf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line, var(--border)); }
.ops-tf-row:first-of-type { border-top: none; }
.ops-tf-title { flex: 1; min-width: 200px; font-weight: 600; color: var(--text); font-size: 14px; }
.ops-tf-title small { color: var(--text-dim); font-weight: 500; }
/* Modal do admin: lista de membros com checkbox e status */
.team-form-people { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.team-form-person { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.team-form-person:hover { border-color: var(--accent); }
.team-form-nome { flex: 1; font-weight: 600; color: var(--text); font-size: 14px; }
.team-form-st { font-size: 12px; color: var(--text-dim); display: inline-flex; gap: 5px; align-items: center; }
.team-form-st.ok { color: var(--success); }
.team-form-st.ok a { color: var(--accent); cursor: pointer; font-weight: 700; }

/* Arquivos: nome das PASTAS no verde da marca (arquivos e docs seguem neutros) */
.drive-folder .drive-item-name { color: var(--turquoise); }

/* Separação de páginas do editor de documentos (estilo Google Docs):
   o vão entre as folhas usa o fundo do editor + bordas/sombras das folhas */
.doc-page { position: relative; }
#doc-guides { position: absolute; inset: 0; pointer-events: none; }
.doc-gap {
  position: absolute; left: -1px; right: -1px;
  background: var(--bg-2); /* cinza do tema: lê como o espaço ENTRE duas folhas */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 7px 7px -7px rgba(0,0,0,.14), inset 0 -7px 7px -7px rgba(0,0,0,.14);
}
.doc-body { position: relative; z-index: 1; }
/* O vão fica POR CIMA do fluxo do texto (o texto foi empurrado, o espaço é vazio) */
#doc-guides { z-index: 2; }

/* Marca d'água da Nuper no canto superior direito de cada página do documento */
.doc-marca {
  position: absolute; right: 24px;
  font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 13px;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--navy); opacity: 0.5;
  pointer-events: none; user-select: none;
}
.doc-marca b { color: var(--turquoise); font-weight: 900; }

/* Projetos: aviso da disputa em andamento (mês corrente, vencedor automático) */
.proj-winner.proj-disputa { background: var(--surface); border-color: var(--border); color: var(--text-dim); }

/* ============ GALERIA DE CRIATIVOS (Desempenho) ============ */
.perf-camp-click { cursor: pointer; }
.perf-camp-click:hover { color: var(--accent); }
.perf-cr-link { font-size: 11px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; opacity: 0; transition: opacity .12s; }
.perf-camp-click:hover .perf-cr-link { opacity: 1; }
.perf-cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.perf-cr-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.perf-cr-img { width: 100%; height: 170px; object-fit: cover; background: var(--hover); display: block; }
.perf-cr-noimg { width: 100%; height: 170px; display: flex; align-items: center; justify-content: center; color: var(--text-faded); font-size: 34px; background: var(--hover); }
.perf-cr-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.perf-cr-nome { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.perf-cr-st { align-self: flex-start; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--hover); color: var(--text-dim); text-transform: capitalize; }
.perf-cr-st.on { background: rgba(34,197,94,0.14); color: #15803d; }
.perf-cr-mets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.perf-cr-met { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; border-bottom: 1px dashed var(--line, var(--border)); padding-bottom: 3px; }
.perf-cr-met span { color: var(--text-dim); }
.perf-cr-met strong { color: var(--text); font-weight: 700; white-space: nowrap; }

/* ============ DIÁLOGOS DO HUB (alert/confirm/prompt com a cara da marca) ============ */
.hub-dialog-overlay { z-index: 6000; }
.hub-dialog-card { max-width: 460px; width: calc(100% - 40px); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.hub-dialog-msg { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.6; white-space: pre-line; }
.hub-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Botão "Copiar link" no cabeçalho do modal de tarefa */
#task-modal .modal-header h2 { flex: 1; }
.task-link-btn { margin-right: 10px; font-size: 13px; padding: 8px 14px; white-space: nowrap; }

/* ============ ÁREA DE CX/CS ============ */
/* A tabela usa as classes do quadro de tarefas (.tasks-table etc.) — aqui só o que é específico */
.cx-titulo { font-weight: 600; }
.cx-cli-sel { width: 100%; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cx-cli-sel:focus { outline: none; }
.cx-files-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.cx-files-btn:hover { border-color: var(--accent); color: var(--accent); }

/* CX: célula de etiqueta colorida (mesmo visual das células de status das tarefas) */
.cx-et-sel { width: 100%; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; }
.cx-et-sel.on { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.cx-et-sel:focus { outline: none; }
.cx-et-sel option { color: var(--text); background: var(--card); font-weight: 500; }

/* CX: indicadores de arraste de linha (ordem manual) */
.cx-table tr.cx-drop-acima td { border-top: 2px solid var(--accent) !important; }
.cx-table tr.cx-drop-abaixo td { border-bottom: 2px solid var(--accent) !important; }

/* Saúde das contas (Desempenho) */
.saude-st { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--hover); color: var(--text-dim); }
.saude-st.ok { background: rgba(34,197,94,0.14); color: #15803d; }
.saude-st.warn { background: rgba(234,179,8,0.16); color: #a16207; }
.saude-st.err { background: rgba(239,68,68,0.14); color: #b91c1c; }
tr.saude-alerta td { background: rgba(239,68,68,0.05); }

/* Portal do cliente: barra de upload nos arquivos */
.client-upload-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }

/* Formulário (preencher/ver respostas) abre POR CIMA da ficha do cliente —
   sem precisar fechar o card (pedido da equipe, ago/2026) */
#form-fill-modal { z-index: 3200; }

/* Drive: miniaturas reais de fotos e vídeos (no lugar do ícone genérico) */
.drive-thumb-box { position: relative; z-index: 0; width: 100%; height: 96px; border-radius: 10px; overflow: hidden; background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: 0; }
.drive-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.drive-thumb-play { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.drive-thumb-play .icon { width: 16px; height: 16px; }

/* Visualizador de foto/vídeo do Drive (clique na miniatura) */
.drive-preview-overlay { position: fixed; inset: 0; z-index: 6800; background: rgba(10,14,18,0.92); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.drive-preview-bar { display: flex; align-items: center; gap: 12px; width: min(1100px, 94vw); }
.drive-preview-nome { flex: 1; color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-preview-x { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.drive-preview-x:hover { background: rgba(255,255,255,0.22); }
.drive-preview-media { max-width: min(1100px, 94vw); max-height: 82vh; object-fit: contain; border-radius: 10px; background: #000; }

/* Linhas de arquivo clicáveis na ficha do cliente */
.client-list-clicavel { cursor: pointer; }
.client-list-clicavel:hover { background: var(--hover); }

/* Campo obrigatório destacado (sem pop-up): borda vermelha + dica embaixo */
.campo-obrigatorio { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important; }
.campo-obrigatorio-hint { color: var(--danger); font-size: 12px; font-weight: 600; margin-top: 6px; }

/* ============ FORMULÁRIO PÚBLICO (link compartilhável) ============ */
#public-form-screen { position: fixed; inset: 0; z-index: 500; overflow-y: auto; background: var(--bg-2, #f4f6f8); }
.public-form-shell { max-width: 720px; margin: 0 auto; padding: 40px 20px 60px; }
.public-form-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; box-shadow: 0 8px 30px rgba(15,23,42,0.08); }
.public-form-titulo { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.public-form-card .btn-ghost { display: none; } /* sem "Cancelar" na tela pública */
.public-form-rodape { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 16px; }
.public-form-obrigado { text-align: center; padding: 48px 30px; }
.public-form-obrigado h2 { color: var(--text); font-size: 22px; margin: 0 0 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.public-form-obrigado p { color: var(--text-dim); font-size: 14px; margin: 0; }

/* Pasta compartilhada (link público) */
.public-pasta-shell { max-width: 1000px; }
.public-doc-leitura { background: var(--card); max-width: min(820px, 94vw); max-height: 80vh; overflow-y: auto; border-radius: 12px; padding: 40px 48px; }