/* ==========================================================================
   LOVE B2B — Portal de Assessores & Fornecedores
   Design System (reaproveita os tokens oficiais da Love, layout próprio)
   ========================================================================== */

:root {
  --primary-color: #183b54;
  --primary-blue: #183b54;
  --primary-hover: #122c3f;
  --primary-blue-hover: #122c3f;
  --primary-gradient: linear-gradient(135deg, #183b54 0%, #122c3f 100%);

  --secondary-color: #27394f;
  --secondary-peach: #27394f;
  --secondary-hover: #1d2b3c;

  --coral-accent: #E11D48;
  --bg-dashboard: #FFFFFF;
  --bg-light: #f3f3f3;
  --text-dark: #18181B;
  --text-muted: #71717A;
  --border-light: #F2F3F6;
  --border-card: #E4E4E4;
  --surface-card: #FFFFFF;
  --surface-dark: #333333;

  --sidebar-width: 256px;
  --sidebar-collapsed-width: 80px;
  --topbar-height: 76px;

  --radius-card: 10px;
  --radius-control: 12px;
  --shadow-soft: 0 2px 8px rgba(16,24,40,0.08);
  --shadow-nav-active: 0 6px 14px rgba(210, 141, 92,0.28);

  /* Margens do conteúdo principal: encolhem de forma gradual conforme a
     tela estreita (em vez de pular de um valor fixo grande direto pro
     valor de mobile), pra as caixas nunca ficarem desproporcionais. */
  --b2b-content-pad-x: clamp(1.25rem, 4vw, 2rem);
  --b2b-content-pad-y: clamp(1.25rem, 4vw, 2rem);
  --b2b-dashboard-pad-x: clamp(1.25rem, 8vw, 5.5rem);
  --b2b-dashboard-pad-y: clamp(1.25rem, 3vw, 2.5rem);
}

/* Transição suave nativa do navegador entre páginas (troca de menu) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001ms !important;
  }
}

/* TEMA CLARO — cor primária cinza-escuro (era azul), escopado para não
   afetar o login (que não tem data-theme e mantém o hero azul original) */
body[data-theme="light"] {
  --primary-color: #333333;
  --primary-blue: #333333;
  --primary-hover: #262626;
  --primary-blue-hover: #262626;
  --primary-gradient: linear-gradient(135deg, #333333 0%, #262626 100%);
}

/* TEMA ESCURO */
body[data-theme="dark"] {
  --bg-dashboard: #252525;
  --surface-dark: #333333;
  --surface-card: #333333;
  --border-light: rgba(255, 255, 255, 0.12);
  --border-card: rgba(255, 255, 255, 0.10);
  --text-dark: #FFFFFF;
  --primary-color: #000000;
  --primary-blue: #000000;
  --primary-hover: #1A1A1A;
  --primary-blue-hover: #1A1A1A;
}

/* TEMA ESCURO — textos que usam --primary-blue como cor de texto (sem fundo
   próprio) ficariam pretos-sobre-preto, pois --primary-blue é preto no
   escuro. Aqui eles viram brancos para continuarem visíveis. */
body[data-theme="dark"] .dash-analytics-period-btn,
body[data-theme="dark"] .category-tab.active,
body[data-theme="dark"] .guide-link--active,
body[data-theme="dark"] .share-board-link-btn,
body[data-theme="dark"] .withdrawal-amount-message-btn,
body[data-theme="dark"] .withdrawal-alt-link,
body[data-theme="dark"] .payment-link-row-copy,
body[data-theme="dark"] .dash-analytics-boost-link,
body[data-theme="dark"] .dash-news-link,
body[data-theme="dark"] .dash-news-footer-link,
body[data-theme="dark"] .verified-badge,
body[data-theme="dark"] .wallet-eye-btn,
body[data-theme="dark"] .dash-analytics-period-popover button.is-active { color: #FFFFFF !important; }

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

html, body { height: 100%; }

html { -webkit-font-smoothing: antialiased; }

body, button, input, select, textarea, p, span, a, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  color: var(--text-dark);
  background-color: var(--bg-dashboard);
  margin: 0;
  transition: background-color .15s ease, color .15s ease;
}

body[data-theme="dark"] {
  background-color: #252525 !important;
  color: #ffffff !important;
}

p { color: #52525B; line-height: 1.6; }

/* Textos dentro de balões e caixas azuis de mensagens são sempre 100% brancos */
.bg-\[\#183b54\],
.bg-\[\#183b54\] *,
.bubble-out,
.bubble-out * {
  color: #FFFFFF !important;
}

/* Balão de mensagem enviado pelo usuário da direita (Fundo #ebf4ff + Texto na cor primária #183b54) */
.chat-bubble-user-glass {
  background: #ebf4ff !important;
  background-color: #ebf4ff !important;
  border: 1px solid #d4e5ff !important;
  box-shadow: 0 1px 3px rgba(24, 59, 84, 0.08) !important;
  color: #183b54 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

.chat-bubble-user-glass,
.chat-bubble-user-glass p,
.chat-bubble-user-glass span,
.chat-bubble-user-glass div {
  color: #183b54 !important;
  text-shadow: none !important;
}

.chat-read-check { color: var(--primary-color); }

.chat-attach-wrap { position: relative; }
#chat-attach-dropdown { display: none; top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 190px; }
#chat-attach-dropdown.show { display: flex; }

.chat-form-pick-item { cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.chat-form-pick-item:hover { border-color: var(--primary-blue); background: #F8FAFC; }
body[data-theme="dark"] .chat-form-pick-item:hover { background: #333333 !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #A1A1AA; }

/* ==========================================================================
   LOGIN
   ========================================================================== */

.login-shell {
  min-height: 100vh;
  display: flex;
}

.login-visual {
  background: var(--primary-gradient);
  position: relative;
  overflow: hidden;
}

.login-visual::before,
.login-visual::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.login-visual::before {
  width: 420px;
  height: 420px;
  top: -120px;
  right: -140px;
}

.login-visual::after {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -80px;
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   LANDING (institucional do Portal do Fornecedor, antes do login)
   ========================================================================== */

.landing-header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 1080px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(24, 59, 84, 0.08);
}

.landing-header-inner {
  padding: 0.6rem 0.6rem 0.6rem 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-logo { display: flex; align-items: center; }
.landing-logo img { height: 26px; width: auto; object-fit: contain; }

.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.landing-header-actions .btn-secondary { background: rgba(255, 255, 255, 0.6); }
.landing-header-actions .btn-primary,
.landing-header-actions .btn-secondary { padding: 0.55rem 1.1rem; }

.landing-hero {
  background:
    radial-gradient(ellipse 900px 560px at 50% 0%, #EBF4FF 0%, rgba(235, 244, 255, 0) 65%),
    radial-gradient(ellipse 500px 400px at 90% 15%, #EBF4FF 0%, rgba(235, 244, 255, 0) 60%),
    #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 11rem 1.5rem 7rem;
  text-align: center;
}

.landing-hero::before,
.landing-hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(24, 59, 84, 0.05);
  filter: blur(2px);
}

.landing-hero::before { width: 420px; height: 420px; top: -180px; right: -140px; }
.landing-hero::after { width: 320px; height: 320px; bottom: -160px; left: -100px; background: rgba(24, 59, 84, 0.04); }

.landing-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #EBF4FF;
  color: var(--primary-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.landing-hero-title {
  color: #10233A;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.landing-hero-subtitle {
  color: #52667A;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.btn-hero-primary,
.btn-hero-secondary {
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn-hero-primary {
  background: var(--primary-blue);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 20px rgba(24, 59, 84, 0.25);
}
.btn-hero-primary:hover { background: var(--primary-blue-hover); }

.btn-hero-secondary {
  background: #FFFFFF;
  color: #10233A;
  border: 1.5px solid var(--border-light);
}
.btn-hero-secondary:hover { background: #F4F4F5; }

@media (max-width: 640px) {
  .landing-hero { padding: 7.5rem 1.25rem 4rem; }
  .landing-hero-title { font-size: 2rem; }
  .landing-header { width: calc(100% - 1.5rem); top: 0.875rem; }
  .landing-header-inner { padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .landing-header-actions { gap: 0.4rem; }
  .landing-header-actions .btn-secondary,
  .landing-header-actions .btn-primary { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

/* ==========================================================================
   SIGNUP / VERIFICAÇÃO (cadastro do fornecedor)
   ========================================================================== */

.signup-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  padding: 2.5rem 1.25rem;
}

.signup-card { width: 100%; max-width: 420px; text-align: center; }

.signup-logo { display: inline-flex; margin-bottom: 1.5rem; }
.signup-logo img { height: 32px; width: auto; object-fit: contain; }

.signup-title { font-size: 1.5rem; font-weight: 800; color: #18181B; margin: 0 0 0.4rem; }
.signup-subtitle { font-size: 0.9375rem; color: #71717A; margin: 0 0 1.75rem; }

.signup-oauth { display: flex; flex-direction: column; gap: 0.75rem; }

.signup-oauth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181B;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.signup-oauth-btn:hover { background: #F4F4F5; border-color: #D4D4D8; }
.signup-oauth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.signup-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: #A1A1AA;
  font-size: 0.8125rem;
  font-weight: 600;
}
.signup-divider::before, .signup-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

.signup-email-form { display: flex; flex-direction: column; gap: 0.75rem; }

.signup-legal { font-size: 0.75rem; color: #A1A1AA; line-height: 1.5; margin: 1.5rem 0 0; }
.signup-legal a { color: #71717A; text-decoration: underline; }

.signup-footer-link { font-size: 0.875rem; color: #71717A; margin-top: 1.75rem; }
.signup-footer-link a { color: var(--primary-blue); font-weight: 600; text-decoration: none; }
.signup-footer-link a:hover { text-decoration: underline; }

.verify-code-inputs { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.75rem; }

.verify-code-box {
  width: 56px;
  height: 64px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #18181B;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.verify-code-box:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(24, 59, 84, 0.15); }

/* ==========================================================================
   ONBOARDING — modal de boas-vindas pós-cadastro
   ========================================================================== */

.onboarding-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

.onboarding-tips { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.onboarding-tips li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #52525B;
  line-height: 1.5;
  padding: 0.75rem 0.875rem;
  background: var(--bg-light);
  border-radius: var(--radius-control);
}

/* ==========================================================================
   VENDAS — Proposta comercial
   ========================================================================== */

.proposal-items-table th { white-space: nowrap; }
.proposal-items-table td { padding: 0.5rem 0.5rem; vertical-align: middle; }
.proposal-items-table td:first-child { width: 1%; }

.proposal-item-index {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: #F4F4F5; color: #71717A; font-size: 0.75rem; font-weight: 700;
}

.proposal-cell-input {
  width: 100%; min-width: 60px;
  border: 1px solid var(--border-light); border-radius: 6px;
  padding: 0.4rem 0.5rem; font-size: 0.8125rem; color: #18181B; background: #fff;
}
.proposal-cell-input:focus { outline: none; border-color: var(--primary-blue); }
.proposal-cell-readonly { background: #F4F4F5; color: #71717A; }

.proposal-cell-total { font-size: 0.8125rem; font-weight: 700; color: #18181B; white-space: nowrap; }

.proposal-item-icon-btn {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  border: none; background: transparent; color: #A1A1AA; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.proposal-item-icon-btn:hover { background: #F4F4F5; color: var(--primary-blue); }
.proposal-item-remove-btn:hover { color: #B91C1C; }

.proposal-add-item-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: none; background: transparent; color: var(--primary-blue);
  font-size: 0.8125rem; font-weight: 700; cursor: pointer; padding: 0.3rem 0;
}
.proposal-add-item-btn:hover { text-decoration: underline; }

.lead-add-product-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--primary-blue); font-size: 0.8125rem; font-weight: 700;
  margin-top: 0.5rem; text-decoration: none;
}
.lead-add-product-link:hover { text-decoration: underline; }

.proposal-client-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  padding: 0.4rem; max-height: 260px; overflow-y: auto;
}
.proposal-client-dropdown-item { padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; }
.proposal-client-dropdown-item:hover { background: #F4F4F5; }
.proposal-client-dropdown-item-name { font-size: 0.8125rem; font-weight: 600; color: #18181B; margin: 0; }
.proposal-client-dropdown-item-meta { font-size: 0.75rem; color: #71717A; margin: 0.1rem 0 0; }
.proposal-client-dropdown-add {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.6rem; border-radius: 7px; cursor: pointer;
  color: var(--primary-blue); font-weight: 700; font-size: 0.8125rem;
}
.proposal-client-dropdown-add:hover { background: #F4F4F5; }

body[data-theme="dark"] .proposal-item-index { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .proposal-cell-input { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .proposal-cell-readonly { background: #1c1c1c !important; color: #A1A1AA !important; }
body[data-theme="dark"] .proposal-client-dropdown { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .proposal-client-dropdown-item:hover,
body[data-theme="dark"] .proposal-client-dropdown-add:hover { background: #333333 !important; }
body[data-theme="dark"] .proposal-client-dropdown-item-name { color: #FFFFFF !important; }
body[data-theme="dark"] .proposal-client-dropdown-item-meta { color: #A1A1AA !important; }
body[data-theme="dark"] .proposal-cell-total { color: #FFFFFF !important; }
body[data-theme="dark"] .proposal-item-icon-btn:hover { background: #333333 !important; }

/* -------------------- Notas fiscais (Vendas) -------------------- */

.notas-fiscais-layout { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.notas-fiscais-main { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 1rem; }
.notas-fiscais-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; }

.notas-fiscais-toolbar { display: flex; gap: 0.75rem; }
.notas-fiscais-search {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-control);
  padding: 0.65rem 1rem; color: #A1A1AA;
}
.notas-fiscais-search input {
  flex: 1; border: none; outline: none; background: transparent; font-size: 0.875rem; color: #18181B;
}
.notas-fiscais-print-btn { padding: 0.65rem; }

.notas-fiscais-sidebar-title { font-size: 0.75rem; font-weight: 700; color: #A1A1AA; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.notas-fiscais-sidebar-action {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  border: none; background: transparent; padding: 0.5rem 0;
  font-size: 0.8125rem; font-weight: 600; color: #3F3F46; cursor: pointer; text-align: left;
}
.notas-fiscais-sidebar-action svg { flex-shrink: 0; color: #A1A1AA; }
.notas-fiscais-sidebar-action:hover { color: var(--primary-blue); }
.notas-fiscais-sidebar-action:hover svg { color: var(--primary-blue); }

.notas-fiscais-info-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; font-size: 0.8125rem; color: #71717A; }
.notas-fiscais-info-row strong { color: #18181B; font-size: 0.9375rem; }

body[data-theme="dark"] .notas-fiscais-search { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .notas-fiscais-search input { color: #FFFFFF !important; }
body[data-theme="dark"] .notas-fiscais-sidebar-action { color: #D4D4D8 !important; }
body[data-theme="dark"] .notas-fiscais-info-row strong { color: #FFFFFF !important; }

/* ==========================================================================
   PÁGINAS DO SITE — URL personalizada e personalização da vitrine
   ========================================================================== */

.site-url-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  overflow: hidden;
  max-width: 420px;
}

.site-url-prefix {
  background: var(--bg-light);
  color: #71717A;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-right: 1px solid var(--border-light);
  flex-shrink: 0;
}

.site-url-group input {
  border: none;
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: #18181B;
  background: #fff;
}
.site-url-group input:focus { outline: none; }

.site-upload-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-control);
  background: var(--bg-light);
  color: #71717A;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.site-upload-zone:hover { border-color: var(--primary-blue); background: #F4F4F5; }

.color-swatch-row { display: flex; align-items: center; gap: 0.75rem; }

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform .15s ease, border-color .15s ease;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.active { border-color: #18181B; }
.color-swatch.active::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 2px solid #fff;
}

.settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-card);
}
.settings-switch-row:last-child { border-bottom: none; padding-bottom: 0; }

.settings-switch-label { font-size: 0.875rem; font-weight: 600; color: #18181B; margin: 0; }
.settings-switch-desc { font-size: 0.75rem; color: #71717A; margin: 0.15rem 0 0; }

.settings-switch { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.settings-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }

.settings-switch-track {
  position: absolute;
  inset: 0;
  background: #D4D4D8;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.settings-switch-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 999px;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.settings-switch input:checked ~ .settings-switch-track { background: var(--primary-blue); }
.settings-switch input:checked ~ .settings-switch-track::before { transform: translateX(16px); }
#builder-elements-panel .settings-switch input:checked ~ .settings-switch-track { background: #ebf4ff; }

body[data-theme="dark"] .site-url-prefix { background: #333333 !important; border-right-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .site-url-group { border-color: #404040 !important; }
body[data-theme="dark"] .site-url-group input { background: #252525 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .site-upload-zone { background: #333333 !important; border-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .settings-switch-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .settings-switch-label { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-switch-track { background: #4b4b4b !important; }

.site-tab-panel { margin-top: 0; }

/* -------------------- Formulários: lista -------------------- */

.forms-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; }

.form-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: #fff;
}

.form-list-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-light);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.form-list-item-icon svg { width: 19px; height: 19px; }
.form-list-item-icon-edit { background: transparent; color: #333333; }
.form-list-item-icon-edit svg { width: 22px; height: 22px; }
body[data-theme="dark"] .form-list-item-icon-edit { color: #E4E4E7 !important; }

.form-list-item-create {
  cursor: pointer;
  border-style: dashed;
  transition: border-color .15s ease, background-color .15s ease;
}
.form-list-item-create:hover { border-color: var(--primary-blue); background: #F8FAFC; }
.form-list-item-icon-create { background: transparent; color: var(--primary-blue); }
.form-list-item-icon-create svg { width: 22px; height: 22px; }
body[data-theme="dark"] .form-list-item-create:hover { background: #333333 !important; }

.form-list-item-info { flex: 1; min-width: 0; }
.form-list-item-title { font-size: 0.9375rem; font-weight: 700; color: #18181B; margin: 0; }
.form-list-item-meta { font-size: 0.75rem; color: #71717A; margin: 0.2rem 0 0; }

.form-list-item-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.form-list-item-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: #71717A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.form-list-item-btn:hover { background: #F4F4F5; }
.form-list-item-btn svg { width: 15px; height: 15px; }

.forms-empty {
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-card);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #71717A;
  font-size: 0.875rem;
  max-width: 720px;
}

/* -------------------- Formulários: drawer lateral -------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.4);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.form-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 580px;
  background: #fff;
  background-size: cover;
  background-position: center;
  z-index: 96;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), background-color .15s ease;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.14);
}
.form-drawer.show { transform: translateX(0); }

body[data-page="produtos"] .form-drawer,
body[data-page="produtos"] .form-drawer-body { background-color: #FFFFFF; }

body[data-page="produtos"] .form-drawer-header { background-color: #FAFAFA; }

body[data-page="agenda"] .form-drawer,
body[data-page="agenda"] .form-drawer-body,
body[data-page="agenda"] .form-drawer-header { background-color: #FAFAFA; }

.form-drawer-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.form-drawer.has-custom-bg .form-drawer-header { border-bottom-color: rgba(255, 255, 255, 0.25); }

.form-drawer.has-custom-bg .form-drawer-header-main {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  backdrop-filter: blur(3px);
}

.form-drawer.has-custom-bg .form-drawer-close {
  background: rgba(255, 255, 255, 0.85);
}
.form-drawer.has-custom-bg .form-drawer-close:hover { background: #fff; }

.form-drawer.has-custom-bg .form-drawer-body,
.form-drawer.has-custom-bg .form-drawer-add-field-wrap {
  background: transparent;
}

.form-drawer-header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.form-drawer-title-input {
  width: 100%;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #18181B;
  border: none;
  outline: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}
.form-drawer-title-input:focus { border-bottom-color: var(--primary-blue); }

.form-drawer-description-input {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #71717A;
  padding: 0;
  min-height: 1.4em;
}

.form-drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #71717A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease;
}
.form-drawer-close:hover { background: #F4F4F5; }

.form-drawer-bg-field { position: relative; flex-shrink: 0; }

.form-drawer-bg-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.92);
  color: #3F3F46;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.form-drawer-bg-edit-btn:hover { background: #fff; border-color: var(--primary-blue); color: var(--primary-blue); }
.form-drawer-bg-edit-btn svg { width: 17px; height: 17px; }

.form-drawer-bg-popover { width: 220px; }

.form-drawer-bg-tabs {
  display: flex;
  gap: 0.3rem;
  background: #F4F4F5;
  border-radius: 8px;
  padding: 0.2rem;
}
.form-drawer-bg-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 0.35rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.form-drawer-bg-tab.active { background: #fff; color: #18181B; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }

.form-drawer-bg-panel { display: flex; flex-direction: column; }

.form-drawer-bg-remove {
  border: none;
  background: transparent;
  color: #B91C1C;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0 0;
  text-align: left;
}
.form-drawer-bg-remove:hover { text-decoration: underline; }

body[data-theme="dark"] .form-drawer.has-custom-bg .form-drawer-header-main { background: rgba(37, 37, 37, 0.85) !important; }
body[data-theme="dark"] .form-drawer.has-custom-bg .form-drawer-close { background: rgba(37, 37, 37, 0.9) !important; }
body[data-theme="dark"] .form-drawer-bg-edit-btn { background: rgba(37, 37, 37, 0.92) !important; border-color: #404040 !important; color: #ebf4ff !important; }
body[data-theme="dark"] .form-drawer-bg-tabs { background: #1c1c1c !important; }
body[data-theme="dark"] .form-drawer-bg-tab { color: #A1A1AA !important; }
body[data-theme="dark"] .form-drawer-bg-tab.active { background: #333333 !important; color: #FFFFFF !important; }

.form-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bg-light);
}

.form-drawer-add-field-wrap { padding: 0 1.5rem 1.5rem; background: var(--bg-light); flex-shrink: 0; }

.form-drawer-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

/* -------------------- Respostas -------------------- */

.responses-drawer-title { font-size: 1.1875rem; font-weight: 700; color: #18181B; margin: 0; }
.responses-drawer-subtitle { font-size: 0.8125rem; color: #71717A; margin: 0.25rem 0 0; }

.responses-drawer-back {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  padding: 0;
  margin-bottom: 0.5rem;
}
.responses-drawer-back:hover { color: #18181B; }
.responses-drawer-back svg { width: 14px; height: 14px; }

.response-list-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.response-list-row:hover { border-color: var(--primary-blue); background: #F8FAFC; }

.response-list-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.response-list-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.response-list-row-name { font-size: 0.875rem; font-weight: 700; color: #18181B; }
.response-list-row-email { font-size: 0.75rem; color: #71717A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.response-list-row-chevron { display: flex; color: #A1A1AA; flex-shrink: 0; }
.response-list-row-chevron svg { width: 16px; height: 16px; }

.response-answer-row {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-light);
}
.response-answer-row:last-child { border-bottom: none; padding-bottom: 0; }
.response-answer-question { font-size: 0.75rem; font-weight: 600; color: #71717A; margin: 0 0 0.25rem; }
.response-answer-value { font-size: 0.875rem; color: #18181B; margin: 0; line-height: 1.5; white-space: pre-wrap; }

body[data-theme="dark"] .responses-drawer-title { color: #FFFFFF !important; }
body[data-theme="dark"] .responses-drawer-back { color: #A1A1AA !important; }
body[data-theme="dark"] .responses-drawer-back:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .response-list-row { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .response-list-row:hover { background: #3a3a3a !important; }
body[data-theme="dark"] .response-list-row-name,
body[data-theme="dark"] .response-answer-value { color: #FFFFFF !important; }
body[data-theme="dark"] .response-answer-row { border-bottom-color: #404040 !important; }

.form-field-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 1.125rem;
  background: #fff;
}

.form-field-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.form-field-question-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #18181B;
  background: transparent;
}
.form-field-question-input:focus { outline: none; border-bottom-color: var(--primary-blue); }

.form-field-type-select {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3F3F46;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
}

.form-field-preview-line {
  border: none;
  border-bottom: 1px dashed var(--border-light);
  color: #A1A1AA;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  width: 65%;
  background: transparent;
  pointer-events: none;
}

.form-field-preview-box {
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  color: #A1A1AA;
  font-size: 0.875rem;
  padding: 0.65rem 0.875rem;
  min-height: 64px;
  background: transparent;
}

.form-field-freetext {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.65rem 0.875rem;
  font-size: 0.875rem;
  color: #18181B;
  min-height: 70px;
  font-family: inherit;
  resize: vertical;
}
.form-field-freetext:focus { outline: none; border-color: var(--primary-blue); }

.form-field-options { display: flex; flex-direction: column; gap: 0.6rem; }

.form-field-option-row { display: flex; align-items: center; gap: 0.6rem; }
.form-field-option-row .radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid #A1A1AA;
  flex-shrink: 0;
}
.form-field-option-row .checkbox-square {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #A1A1AA;
  flex-shrink: 0;
}

.form-field-option-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 0.35rem 0;
  font-size: 0.875rem;
  color: #18181B;
  background: transparent;
}
.form-field-option-input:focus { outline: none; border-bottom-color: var(--primary-blue); }

.form-field-option-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #A1A1AA;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-field-option-remove:hover { color: #B91C1C; }

.form-field-add-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #71717A;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0;
  margin-top: 0.2rem;
}
.form-field-add-option:hover { color: var(--primary-blue); }

.form-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-card);
}

.form-field-footer-actions { display: flex; align-items: center; gap: 0.3rem; }

.form-field-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #71717A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.form-field-icon-btn svg { width: 14px; height: 14px; }
.form-field-icon-btn:hover { background: #F4F4F5; color: #3F3F46; }
.form-field-icon-btn-danger:hover { background: #FEE2E2; color: #B91C1C; }

.form-field-required-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #3F3F46;
  cursor: pointer;
}

.form-fields-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 220px;
  padding: 3.5rem 1.5rem;
  text-align: center;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-card);
  color: #A1A1AA;
  background: #fff;
}
.form-fields-empty svg { width: 32px; height: 32px; color: #D4D4D8; }
.form-fields-empty span { max-width: 260px; line-height: 1.5; font-size: 0.8125rem; }

.form-add-field-btn {
  width: 100%;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-card);
  padding: 0.9rem;
  text-align: center;
  color: #71717A;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.form-add-field-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }

@media (max-width: 640px) {
  .form-drawer { max-width: 100%; }
}

body[data-theme="dark"] .form-list-item { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .form-list-item-icon { background: #252525 !important; }
body[data-theme="dark"] .form-list-item-title { color: #FFFFFF !important; }
body[data-theme="dark"] .form-list-item-btn { background: #333333 !important; border-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .form-drawer { background: #252525 !important; }
body[data-theme="dark"] .form-drawer-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .form-drawer-title-input { color: #FFFFFF !important; }
body[data-theme="dark"] .form-drawer-description-input { color: #A1A1AA !important; }
body[data-theme="dark"] .form-drawer-body,
body[data-theme="dark"] .form-drawer-add-field-wrap { background: #1c1c1c !important; }
body[data-theme="dark"] .form-drawer-footer { border-top-color: #404040 !important; }
body[data-theme="dark"] .form-field-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .form-field-question-input { color: #FFFFFF !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .form-field-type-select { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .form-field-option-input { color: #FFFFFF !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .form-field-freetext { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .form-add-field-btn { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .form-field-footer { border-top-color: #404040 !important; }
body[data-theme="dark"] .form-field-required-toggle { color: #D4D4D8 !important; }
body[data-theme="dark"] .form-field-icon-btn:hover { background: #404040 !important; }
body[data-theme="dark"] .form-fields-empty { background: #333333 !important; border-color: #404040 !important; }

/* ==========================================================================
   DASHBOARD SHELL — Sidebar fixo (ícone + texto, sem unfold)
   ========================================================================== */

.b2b-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.b2b-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
}

body[data-theme="dark"] .b2b-avatar { background: #FFFFFF; }

/* -------------------- Sidebar único (fixo, recolhível) -------------------- */

.b2b-sidebar {
  width: var(--sidebar-width);
  background-color: #181D24;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 2px 0 6px rgba(16, 24, 40, 0.04);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .b2b-sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .b2b-main { margin-left: var(--sidebar-collapsed-width); }

.sidebar-edge-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 56px;
  border-radius: 999px;
  background: #181D24;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C4C4CC;
  cursor: pointer;
  padding: 0;
  z-index: 61;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-edge-toggle:hover { background: #22282F; color: #FFFFFF; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.24); }
.sidebar-edge-toggle svg { width: 14px; height: 14px; }

.sidebar-brand-top {
  width: 100%;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.375rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.sidebar-collapsed .sidebar-brand-top { justify-content: center; padding: 0; }

.sidebar-brand-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; overflow: hidden; min-width: 0; }
.sidebar-brand-icon { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.sidebar-brand-word { height: 19px; width: auto; object-fit: contain; flex-shrink: 0; }
.sidebar-icon-dark, .sidebar-word-dark { display: none; }
body[data-theme="dark"] .sidebar-icon-light, body[data-theme="dark"] .sidebar-word-light { display: none; }
body[data-theme="dark"] .sidebar-icon-dark, body[data-theme="dark"] .sidebar-word-dark { display: block; }
body.sidebar-collapsed .sidebar-brand-word { display: none; }

/* Rail da sidebar: fundo sempre escuro (claro ou escuro), então a logo usa
   sempre a variante clara — diferente do rodapé, que segue o tema normalmente. */
.sidebar-brand-link .sidebar-icon-light, .sidebar-brand-link .sidebar-word-light { display: none !important; }
.sidebar-brand-link .sidebar-icon-dark, .sidebar-brand-link .sidebar-word-dark { display: block !important; }

/* Recolhido: só o ícone — a palavra "Love" some, em qualquer variante/tema. */
body.sidebar-collapsed .sidebar-brand-link .sidebar-word-dark,
body.sidebar-collapsed .sidebar-brand-link .sidebar-word-light { display: none !important; }

.sidebar-toggle-icon.icon-expand { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon.icon-collapse { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon.icon-expand { display: block; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 600;
  color: #C4C4CC;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sidebar-nav-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .sidebar-nav-item:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #18181B;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 120;
  pointer-events: none;
  animation: b2b-tooltip-in 0.12s ease both;
}

@keyframes b2b-tooltip-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

body.sidebar-collapsed[data-theme="dark"] .sidebar-nav-item:hover::after {
  background: #FFFFFF !important;
  color: #18181B !important;
}

.sidebar-nav-item svg:not(.sidebar-chevron) {
  width: 23px;
  height: 23px;
  stroke-width: 2.15px;
  color: #C4C4CC;
  flex-shrink: 0;
}

.sidebar-nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.sidebar-nav-item:hover svg:not(.sidebar-chevron) { color: #FFFFFF; }

.sidebar-nav-item.sidebar-nav-label { cursor: default; }
.sidebar-nav-item.sidebar-nav-label:hover { background: transparent; color: #C4C4CC; }
.sidebar-nav-item.sidebar-nav-label:hover svg:not(.sidebar-chevron) { color: rgba(255, 255, 255, 0.4); }

.sidebar-nav-item.active {
  background: transparent;
  color: #FFFFFF;
  border: none;
  box-shadow: none;
}

.sidebar-nav-item.active .sidebar-nav-icon-box {
  background: #EBF4FF;
  border: 1px solid transparent;
  box-shadow: none;
}

.sidebar-nav-item.active svg:not(.sidebar-chevron) { color: #181D24; stroke-width: 2.25px; }

.nav-badge {
  background: #BF612E;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.sidebar-nav-item .nav-badge { margin-left: auto; }

.sidebar-chevron {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.45);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidebar-subnav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.2rem 0 0.4rem 2.5rem;
}

.sidebar-subnav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: all 0.15s ease;
}

.sidebar-subnav-item:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

.sidebar-subnav-item.active {
  background: #EBF4FF;
  color: #333333;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: none;
}

.sidebar-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.sidebar-collapsed .b2b-sidebar { background-color: #181D24; }
body.sidebar-collapsed .upgrade-card { padding: 0.75rem 0.4rem; background: transparent !important; border-color: transparent !important; }
body.sidebar-collapsed .sidebar-nav-item { justify-content: center; padding: 0.25rem; }
body.sidebar-collapsed .sidebar-nav-item .sidebar-nav-text,
body.sidebar-collapsed .sidebar-chevron,
body.sidebar-collapsed .sidebar-subnav { display: none; }

body.sidebar-collapsed .upgrade-card-title,
body.sidebar-collapsed .upgrade-card-desc,
body.sidebar-collapsed .upgrade-card-btn,
body.sidebar-collapsed .upgrade-card-plan { display: none; }

body.sidebar-collapsed .upgrade-card-icon {
  background: #EBF4FF !important;
  border: none !important;
  color: #333333 !important;
}

body.sidebar-collapsed[data-theme="dark"] .upgrade-card-icon {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Presente (convidar e ganhar): sem círculo em volta, em qualquer estado. */
body.sidebar-collapsed .upgrade-card-icon--gift {
  border: none !important;
  color: #EBF4FF !important;
}

body.sidebar-collapsed[data-theme="dark"] .upgrade-card-icon--gift {
  border: none !important;
}

.upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .upgrade-card { background: rgba(255, 255, 255, 0.06); }

.upgrade-card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.upgrade-card-face--pro { display: none; }
.upgrade-card.is-pro .upgrade-card-face--free { display: none; }
.upgrade-card.is-pro .upgrade-card-face--pro { display: flex; }

.upgrade-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
  text-decoration: none;
  flex-shrink: 0;
}

.upgrade-card-icon--gift { background: transparent; color: #EBF4FF; width: auto; height: auto; }
.upgrade-card-icon svg { width: 22px; height: 22px; }
.upgrade-card-icon--gift svg { width: 32px; height: 32px; }

.upgrade-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.375rem;
}

.upgrade-card-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.upgrade-card-btn { width: 100%; justify-content: center; }

.upgrade-card-face--free .upgrade-card-btn { background: #EBF4FF; color: #333333; }
.upgrade-card-face--free .upgrade-card-btn:hover { background: #DCEAFB; }

.upgrade-card-plan {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.75rem 0 0;
}

.upgrade-card-plan strong { color: rgba(255, 255, 255, 0.8); }

body[data-theme="dark"] .upgrade-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
body[data-theme="dark"] .upgrade-card-icon { background: #4B4B4B; }
body[data-theme="dark"] .upgrade-card-icon--gift { background: transparent; color: #C7305B; }
body[data-theme="dark"] .upgrade-card-title { color: #FFFFFF; }
body[data-theme="dark"] .upgrade-card-desc { color: rgba(255, 255, 255, 0.65); }
body[data-theme="dark"] .upgrade-card-plan { color: rgba(255, 255, 255, 0.5); }
body[data-theme="dark"] .upgrade-card-plan strong { color: rgba(255, 255, 255, 0.8); }

body[data-theme="dark"] .b2b-sidebar { background-color: #181D24 !important; border-right-color: #404040 !important; }
body[data-theme="dark"] .sidebar-brand-top { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .sidebar-edge-toggle { background: #181D24 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #C4C4CC !important; }
body[data-theme="dark"] .sidebar-edge-toggle:hover { background: #262D36 !important; color: #ffffff !important; }
body[data-theme="dark"] .upgrade-card-face--free .upgrade-card-btn { background: #EBF4FF !important; color: #333333 !important; }
body[data-theme="dark"] .upgrade-card-face--free .upgrade-card-btn:hover { background: #DCEAFB !important; }
body[data-theme="dark"] .sidebar-nav-item,
body[data-theme="dark"] .sidebar-nav-item svg,
body[data-theme="dark"] .sidebar-nav-item svg * { color: #ffffff !important; stroke: #ffffff !important; }
body[data-theme="dark"] .sidebar-nav-item:hover { background: #4b4b4b !important; color: #ffffff !important; }
body[data-theme="dark"] .sidebar-nav-item.active { background: #4b4b4b !important; color: #ffffff !important; border: 1px solid #595959 !important; }
body[data-theme="dark"] .sidebar-bottom { border-top-color: #404040 !important; }
body[data-theme="dark"] .sidebar-subnav-item { color: #ffffff !important; }
body[data-theme="dark"] .sidebar-subnav-item:hover { background-color: #404040 !important; color: #ffffff !important; }
body[data-theme="dark"] .sidebar-subnav-item.active { background-color: #4b4b4b !important; color: #ffffff !important; border: 1px solid #595959 !important; }
body[data-theme="dark"] .sidebar-subnav-item .nav-badge,
body[data-theme="dark"] .sidebar-nav-item .nav-badge { background: #4b4b4b !important; color: #ffffff !important; border: 1px solid #595959 !important; }
body[data-theme="dark"] .guias-sidebar h1 { color: #ebf4ff !important; }

/* -------------------- Main / Topbar / Conteúdo -------------------- */

.b2b-main {
  flex: 1;
  height: 100vh;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bg-light);
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-topbar {
  height: var(--topbar-height);
  background: #F3F3F3;
  border-bottom: 1px solid #E4E4E4;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

body[data-theme="dark"] .b2b-topbar { background: #181D24 !important; border-bottom-color: #404040 !important; }

.b2b-content {
  padding: var(--b2b-content-pad-y) var(--b2b-content-pad-x);
  flex: 1;
  overflow-y: auto;
  background-color: var(--bg-dashboard);
  display: flex;
  flex-direction: column;
}

body[data-page="dashboard"] .b2b-content {
  padding: var(--b2b-dashboard-pad-y) var(--b2b-dashboard-pad-x);
}

body[data-page="dashboard"] .b2b-footer {
  margin: auto calc(-1 * var(--b2b-dashboard-pad-x)) calc(-1 * var(--b2b-dashboard-pad-y));
  padding: 1.75rem var(--b2b-dashboard-pad-x) 1.25rem;
}

.b2b-footer {
  flex-shrink: 0;
  margin: auto calc(-1 * var(--b2b-content-pad-x)) calc(-1 * var(--b2b-content-pad-y));
  padding: 1.75rem var(--b2b-content-pad-x) 1.25rem;
  background: #F3F3F3;
  border-top: 1px solid var(--border-light);
}

/* Barra de cabeçalho de página (título + ação principal) — mesmo padrão
   visual da plataforma logada (ex: "Meus convidados"): uma faixa cinza
   colada nas bordas, com o título e o botão de ação na mesma linha. */
.b2b-header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  min-height: 4rem;
  margin: calc(-1 * var(--b2b-content-pad-y)) calc(-1 * var(--b2b-content-pad-x)) 1.25rem;
  padding: 0.9rem var(--b2b-content-pad-x);
  background: #FAFAFA;
  border-bottom: 1px solid var(--border-card);
}
.b2b-header-bar h2 { margin: 0; }
body[data-theme="dark"] .b2b-header-bar { background: #181D24 !important; border-bottom-color: #404040 !important; }

body[data-theme="dark"] .b2b-footer {
  background: #181D24 !important;
  border-top-color: #404040 !important;
}

.b2b-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.b2b-footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.b2b-footer-logo .sidebar-icon-light, .b2b-footer-logo .sidebar-icon-dark { width: 36px; height: 36px; object-fit: contain; }
.b2b-footer-logo .sidebar-word-light, .b2b-footer-logo .sidebar-word-dark { height: 18px; width: auto; object-fit: contain; }

.b2b-footer-desc {
  font-size: 0.8125rem;
  color: #71717A;
  max-width: 380px;
  line-height: 1.5;
}
body[data-theme="dark"] .b2b-footer-desc { color: #A1A1AA !important; }

.b2b-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.b2b-footer-legal-links a {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #18181B;
  text-decoration: none;
}
.b2b-footer-legal-links a:hover { text-decoration: underline; }
body[data-theme="dark"] .b2b-footer-legal-links a { color: #FFFFFF !important; }

.b2b-footer-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.b2b-footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #18181B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .15s ease, transform .15s ease;
}
.b2b-footer-social-btn svg { width: 15px; height: 15px; }
.b2b-footer-social-btn:hover { background: var(--primary-color); transform: translateY(-2px); }
body[data-theme="dark"] .b2b-footer-social-btn { background: #4b4b4b !important; }
body[data-theme="dark"] .b2b-footer-social-btn:hover { background: var(--primary-color) !important; }

.b2b-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.75rem;
  color: #71717A;
}
body[data-theme="dark"] .b2b-footer-bottom { border-top-color: #404040 !important; color: #A1A1AA !important; }

body[data-theme="dark"] .b2b-shell,
body[data-theme="dark"] .b2b-content { background-color: #1C2125 !important; }
body[data-theme="dark"] .b2b-main { background-color: #1C2125 !important; }

.b2b-view { display: none; }
.b2b-view.active { display: block; }

/* -------------------- Barra de busca / botão upgrade / ícones topbar -------------------- */

.topbar-account-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.topbar-account-name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #52525B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
body[data-theme="dark"] .topbar-account-name { color: rgba(255, 255, 255, 0.75) !important; }

.topbar-search-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: var(--radius-card);
  padding: 0.5rem 0.875rem;
  color: #71717A;
  font-size: 0.8125rem;
  cursor: pointer;
  width: 340px;
  transition: border-color .15s ease, background-color .15s ease;
}

.topbar-search-trigger:hover { background: #F4F4F5; }
.topbar-search-trigger span { flex: 1; text-align: left; }

.topbar-search-trigger kbd {
  font-size: 0.6875rem;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  color: #A1A1AA;
}

body[data-theme="dark"] .topbar-search-trigger { background: #4E4E4E !important; color: #ffffff !important; }
body[data-theme="dark"] .topbar-search-trigger:hover { background: #5A5A5A !important; }
body[data-theme="dark"] .topbar-search-trigger kbd { background: #5A5A5A !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }

.topbar-upgrade-btn {
  display: inline-flex;
  align-items: center;
  color: var(--primary-color);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s ease;
}

.topbar-upgrade-btn:hover { color: var(--primary-hover); }

body[data-theme="dark"] .topbar-upgrade-btn { color: #FFFFFF !important; }
body[data-theme="dark"] .topbar-upgrade-btn:hover { color: rgba(255, 255, 255, 0.75) !important; }

.topbar-icon-btn-wrap { position: relative; }

.topbar-icon-plain {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease;
}

.topbar-icon-plain svg { stroke-width: 2px; }
.topbar-services-mobile-link { display: none; }
.topbar-icon-plain:hover { background: rgba(0, 0, 0, 0.06); }
body[data-theme="dark"] .topbar-icon-plain { color: #FFFFFF; }
body[data-theme="dark"] .topbar-icon-plain:hover { background: rgba(255, 255, 255, 0.12); }

.topbar-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 9999px;
  background: #C7305B;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

body[data-theme="dark"] .topbar-icon-badge { background: #C7305B !important; color: #FFFFFF !important; font-weight: 700; }

.topbar-avatar-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  padding: 0.5rem;
  z-index: 50;
}

.topbar-dropdown.show { display: block; }

body[data-theme="dark"] .topbar-dropdown { background: #333333 !important; border-color: #404040 !important; }

.topbar-dropdown-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  padding: 0.375rem 0.625rem 0.5rem;
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.625rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: #3F3F46;
  text-decoration: none;
  cursor: pointer;
}

.topbar-dropdown-item:hover { background: #F4F4F5; }
body[data-theme="dark"] .topbar-dropdown-item { color: #FFFFFF !important; }
body[data-theme="dark"] .topbar-dropdown-item:hover { background: rgba(255, 255, 255, 0.1) !important; }

.topbar-dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.375rem 0.25rem;
}

.notif-dot-info, .notif-dot-warning, .notif-dot-critical {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.notif-dot-info { background: #2563EB; }
.notif-dot-warning { background: #B45309; }
.notif-dot-critical { background: #DC2626; }

/* -------------------- Dropdown de perfil -------------------- */

.profile-dropdown { width: 300px; padding: 0.75rem; }

.profile-dropdown-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 0.75rem; }

.profile-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--primary-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

body[data-theme="dark"] .profile-dropdown-avatar { background: #000000; }

.profile-dropdown-name { display: block; font-size: 0.875rem; font-weight: 700; color: #18181B; margin: 0; text-decoration: none; }
.profile-dropdown-name:hover { text-decoration: underline; }
.profile-dropdown-email { font-size: 0.75rem; color: #71717A; margin: 0.125rem 0 0; word-break: break-all; }

body[data-theme="dark"] .profile-dropdown-name { color: #FFFFFF !important; }
body[data-theme="dark"] .profile-dropdown-email { color: rgba(255, 255, 255, 0.6) !important; }

.profile-dropdown-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.25rem 0.25rem; font-size: 0.75rem; }
.profile-dropdown-footer a { color: #71717A; text-decoration: none; }
.profile-dropdown-footer a:hover { text-decoration: underline; }
body[data-theme="dark"] .profile-dropdown-footer a:not([style]) { color: rgba(255, 255, 255, 0.6) !important; }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #F4F4F5;
  border-radius: 10px;
  padding: 0.25rem;
  margin: 0.25rem 0.375rem;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

.theme-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: none;
  background: transparent;
  color: #71717A;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.theme-toggle-btn:hover { color: #3F3F46; }

.theme-toggle-btn.active {
  background: #fff;
  color: #18181B;
  box-shadow: 0 1px 2px rgba(16,24,40,0.08);
}

body[data-theme="dark"] .theme-toggle { background-color: var(--surface-dark) !important; }
body[data-theme="dark"] .theme-toggle-btn { color: #FFFFFF !important; }
body[data-theme="dark"] .theme-toggle-btn.active { background-color: rgba(255, 255, 255, 0.16) !important; color: #FFFFFF !important; }

/* Metric cards */

.metric-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-delta {
  font-size: 0.75rem;
  font-weight: 600;
}

.metric-delta.up { color: #16A34A; }
.metric-delta.down { color: #DC2626; }

/* Status badges */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.status-novo { background: #EFF6FF; color: #2563EB; }
.status-conversa { background: #FEF3C7; color: #B45309; }
.status-proposta { background: #F3E8FF; color: #7E22CE; }
.status-fechado { background: #DCFCE7; color: #15803D; }
.status-enviado { background: #EFF6FF; color: #2563EB; }
.status-assinado { background: #DCFCE7; color: #15803D; }
.status-recusado { background: #FEE2E2; color: #B91C1C; }
.status-ativo { background: #DCFCE7; color: #15803D; }
.status-inativo { background: #F4F4F5; color: #71717A; }
.status-pendente { background: #FEF3C7; color: #B45309; }

.status-badge-plain { background: transparent !important; padding: 0.25rem 0; }

.status-text {
  display: inline; background: transparent !important; padding: 0; border-radius: 0;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}

.status-neutral-dark { color: #333333; }
body[data-theme="dark"] .status-neutral-dark { color: #FFFFFF !important; }
.status-text::before { content: none; }

.payment-progress { width: 140px; max-width: 100%; height: 6px; border-radius: 999px; background: #E4E4E7; margin-top: 0.4rem; overflow: hidden; }
.payment-progress-fill { height: 100%; background: var(--primary-blue); border-radius: 999px; }
body[data-theme="dark"] .payment-progress { background: #4B4B4B !important; }

/* Leads table */

.leads-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  text-align: left;
  padding: 0 1rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
}

.leads-table td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--border-light);
}

.leads-table tr:hover td { background: #FAFAFA; }
.leads-table tbody tr:first-child td { border-top: none; }

/* Messages / chat */

.chat-shell {
  display: flex;
  height: calc(100vh - var(--topbar-height) - 4rem);
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Mensagens ocupa 100% do espaço disponível, sem respiro ao redor */
body[data-page="mensagens"] .b2b-content {
  padding: 0;
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cabeçalho de título padrão (igual às outras páginas), mas sem o respiro
   lateral do .b2b-content genérico — aqui o padding do conteúdo é 0. */
body[data-page="mensagens"] .b2b-header-bar {
  margin: 0;
  padding: 0.9rem 1.5rem;
  flex-shrink: 0;
}

/* O rodapé padrão assume o padding genérico de 2rem do .b2b-content pra
   calcular suas margens negativas — na página de Mensagens o padding é 0
   (interface de chat em tela cheia, sem scroll), então o rodapé saía
   desalinhado. Como a tela de chat não tem espaço/sentido pra um rodapé
   de marketing, ele simplesmente não aparece aqui. */
body[data-page="mensagens"] .b2b-footer { display: none; }

body[data-page="mensagens"] .chat-shell {
  height: 100%;
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  display: flex;
  overflow: hidden;
}

#conv-list {
  width: 100%;
  overflow-y: auto;
}

.conv-item.active {
  background-color: #EBF4FF;
  border-left-color: var(--primary-color);
}

.conv-item.active h4 { color: #122c3f; }

body[data-theme="dark"] .conv-item.active {
  background-color: #EBF4FF !important;
  border-left-color: var(--primary-color) !important;
}

body[data-theme="dark"] .conv-item.active h4,
body[data-theme="dark"] .conv-item.active p,
body[data-theme="dark"] .conv-item.active span:not(.badge-b2b-unread-dot) {
  color: #122c3f !important;
}

/* Forms */

.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3F3F46;
  margin-bottom: 0.375rem;
  display: block;
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: #fff;
  color: #18181B;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(24, 59, 84, 0.15);
}

.field-textarea { resize: vertical; min-height: 220px; font-family: inherit; }

.field-input.field-locked {
  background: #F4F4F5;
  color: #71717A;
  cursor: not-allowed;
}

.field-lock-icon {
  display: inline-flex;
  vertical-align: middle;
  color: #A1A1AA;
}

.plan-billing-option:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.date-picker-field { position: relative; }
.date-picker-field input { padding-right: 2.25rem; cursor: pointer; }
.date-picker-field-icon {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  color: #71717A; cursor: pointer; pointer-events: auto;
}

.date-picker-popover {
  position: fixed;
  z-index: 1000;
  width: 260px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
  padding: 0.9rem;
}

body[data-theme="dark"] .date-picker-field-icon { color: #A1A1AA !important; }
body[data-theme="dark"] .date-picker-popover { background: #252525 !important; border-color: #404040 !important; }

.btn-primary {
  background: var(--primary-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-control);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover { background: var(--primary-blue-hover); }

body[data-theme="dark"] .btn-primary:not([style*="background"]) { background: #EBF4FF; color: #000000; }
body[data-theme="dark"] .btn-primary:not([style*="background"]):hover { background: #D6E8FF; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-secondary {
  background: #fff;
  color: #3F3F46;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-control);
  border: 1px solid #CCD5E0;
  cursor: pointer;
  transition: background-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover { background: #F4F4F5; }

/* Botões de destaque em azul clarinho */
#lead-add-btn.btn-secondary,
#product-add-btn.btn-secondary,
#share-board-btn.btn-secondary,
#agenda-add-event-btn.btn-secondary {
  background: #EBF4FF;
  color: #333333;
  border-color: transparent;
}
#lead-add-btn.btn-secondary:hover,
#product-add-btn.btn-secondary:hover,
#share-board-btn.btn-secondary:hover,
#agenda-add-event-btn.btn-secondary:hover {
  background: #DCEAFB;
}

.profile-security-action-btn { width: 150px; justify-content: center; }

/* Toast */

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #18181B;
  color: #fff;
  padding: 0.875rem 1.25rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 100;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Products grid */

.product-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-thumb {
  height: 140px;
  background: linear-gradient(135deg, #EFF6FF 0%, #FFF7ED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A1A1AA;
}

/* Modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 1.5rem;
}

.modal-backdrop.show { display: flex; }

.modal-card {
  background: #fff;
  border-radius: var(--radius-card);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.75rem;
}

/* ==========================================================================
   TOPBAR — busca, notificações, criar rápido, avatar
   ========================================================================== */

.topbar-icon-btn-wrap { position: relative; }

.topbar-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  border: none;
  background: #fff;
  color: #52525B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: background-color .15s ease;
}

.topbar-icon-btn:hover { background: #F4F4F5; }

.tarefa-add-btn {
  background: #F4F4F5;
  color: #52525B;
  border: none;
  box-shadow: none;
}

.tarefa-add-btn:hover { background: #E4E4E7; }

.topbar-icon-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--coral-accent);
  border: 1.5px solid #fff;
}

.topbar-avatar-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  padding: 0.5rem;
  z-index: 50;
}

.topbar-dropdown.show { display: block; }

.topbar-dropdown-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  padding: 0.375rem 0.625rem 0.5rem;
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.625rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: #3F3F46;
  text-decoration: none;
  cursor: pointer;
}

.topbar-dropdown-item:hover { background: #F4F4F5; }

.topbar-dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.375rem 0.25rem;
}

.notif-dot-info, .notif-dot-warning, .notif-dot-critical {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.notif-dot-info { background: #2563EB; }
.notif-dot-warning { background: #B45309; }
.notif-dot-critical { background: #DC2626; }

/* Command palette */

.command-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  padding: 0.625rem 0.625rem 0.25rem;
}

.command-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.625rem;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.command-result-item:hover { background: #F4F4F5; }

/* ==========================================================================
   DASHBOARD — saudação, estatísticas, contratos, calendário
   ========================================================================== */

.dashboard-greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.plans-intro { text-align: center; margin-bottom: 0; }

.greeting-date {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #71717A;
  margin-top: 0.25rem;
}

.greeting-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #18181B;
  letter-spacing: -0.01em;
}

.verified-badge { display: inline-flex; vertical-align: middle; margin-left: 0.3rem; color: var(--primary-blue); }

.dashboard-personalize-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181B;
  text-decoration: none;
  border: none;
  background: none;
  transition: color .15s ease;
}
.dashboard-personalize-link:hover { color: var(--primary-blue); }
.dashboard-personalize-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .15s ease, color .15s ease;
}
.dashboard-personalize-link:hover .dashboard-personalize-link-icon { transform: translateX(2px); }
body[data-theme="dark"] .dashboard-personalize-link { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-personalize-link:hover { color: var(--primary-blue) !important; }

.dash-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  min-width: 0;
}

.dashboard-panel-section { display: flex; flex-direction: column; }
.dashboard-panel-header { border-left: 3px solid #183B54; padding-left: 0.85rem; margin-bottom: 1.25rem; }
.dashboard-panel-section .dash-card { background-color: #FBFBFB; box-shadow: none; }

.dashboard-help-section { margin-top: 1.5rem; }
.dashboard-help-header { border-left: 3px solid #183B54; padding-left: 0.85rem; margin-bottom: 1.25rem; }
.dashboard-help-title { font-size: 1.0625rem; font-weight: 700; color: #18181B; }
.dashboard-help-subtitle { font-size: 0.8125rem; color: #71717A; margin-top: 0.15rem; }

.dashboard-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.dashboard-help-card { background: #FBFBFB; border: 1px solid #E4E4E4; border-radius: var(--radius-card); padding: 1.25rem; display: flex; flex-direction: column; height: 100%; box-shadow: none; }
.dashboard-help-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.dashboard-help-card-icon { color: #52525B; display: flex; flex-shrink: 0; }
.dashboard-help-card-title { font-size: 0.9375rem; font-weight: 700; color: #18181B; }
.dashboard-help-card-desc { font-size: 0.8125rem; color: #71717A; line-height: 1.5; margin-bottom: 1rem; flex: 1; }
.dashboard-help-card-desc strong { color: #3F3F46; font-weight: 700; }
.dashboard-help-card-link { font-size: 0.8125rem; font-weight: 700; color: #18181B; text-decoration: underline; align-self: flex-start; min-height: 2.4375rem; }
.dashboard-help-card-link:hover { color: var(--primary-blue); }

@media (max-width: 900px) {
  .dashboard-help-grid { grid-template-columns: 1fr; }
}

body[data-theme="dark"] .dashboard-help-title { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-help-card { background: #2A2A2A !important; }
body[data-theme="dark"] .dashboard-help-card-title { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-help-card-desc strong { color: #D4D4D8 !important; }
body[data-theme="dark"] .dashboard-help-card-link { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-help-card-icon { color: #A1A1AA !important; }

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-card);
}

.dashboard-quick-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.dashboard-quick-action-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  background: #EBF4FF;
  border: none;
  color: #181D24;
}
.dashboard-quick-action-btn:hover { background: #DCEBFF; }
.dashboard-quick-action-btn svg { flex-shrink: 0; }

.dash-card-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.accordion-card-header { cursor: pointer; user-select: none; }
.accordion-card:not(.is-open) .accordion-card-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.accordion-chevron { display: inline-flex; flex-shrink: 0; color: #A1A1AA; transition: rotate .15s ease; }
.accordion-card.is-open .accordion-chevron { rotate: 180deg; }
.accordion-card-body { display: none; }
.accordion-card.is-open .accordion-card-body { display: block; }

.dashboard-greeting-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.dashboard-greeting-mobile-avatar,
.dashboard-greeting-mobile-icons { display: none; }

/* -------------------- Métricas rápidas (Dashboard) -------------------- */

.metrics-circle-row { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.metrics-circle-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-decoration: none; flex: 1; min-width: 110px;
}

.metrics-circle-label { font-size: 0.75rem; font-weight: 600; color: #71717A; text-align: center; }

.metrics-circle-value { font-size: 1.375rem; font-weight: 700; color: #18181B; }

.metric-ring {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: conic-gradient(var(--ring-color, var(--primary-blue)) calc(var(--ring-pct, 0) * 1%), #E4E4E7 0);
}
.metric-ring-inner {
  width: 50px; height: 50px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; color: #18181B;
}

/* -------------------- Eventos e notícias (Dashboard) -------------------- */

.dash-news-card { display: flex; flex-direction: column; box-shadow: none; }
.dash-analytics-card { box-shadow: none; }
.dash-news-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; }
.dash-news-link { font-size: 0.8125rem; font-weight: 400; color: var(--primary-blue); text-decoration: none; line-height: 1.4; }
.dash-news-link:hover { text-decoration: underline; }

.dash-news-footer {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-light);
}
.dash-news-footer-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue); text-decoration: none;
}
.dash-news-footer-link:hover { text-decoration: underline; }
.dash-news-footer-link svg { flex-shrink: 0; }
.dash-news-footer-sep { color: #D4D4D8; font-size: 0.8125rem; }

.dashboard-side-stack { display: flex; flex-direction: column; gap: 1.5rem; }

/* Cartão de carteira / saldo (Dashboard) */

.wallet-card { position: relative; background-color: #FFFFFF; box-shadow: none; }

.wallet-tabs { display: flex; gap: 3rem; border-bottom: 1px solid var(--border-light); margin-bottom: 1.5rem; }
.wallet-tab {
  border: none; background: transparent; padding: 0 0 0.75rem; margin-bottom: -1px;
  font-size: 0.875rem; font-weight: 600; color: #A1A1AA; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wallet-tab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); font-weight: 700; }
.wallet-tab:hover:not(.active) { color: #52525B; }

.wallet-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wallet-balance-wrap { display: flex; align-items: center; gap: 0.5rem; }
.wallet-balance { font-size: 1.75rem; font-weight: 700; color: #18181B; text-decoration: none; display: inline-block; transition: opacity .15s ease; }
.wallet-balance:hover { opacity: 0.72; }
.wallet-balance sup { font-size: 1rem; font-weight: 700; }

.wallet-withdraw-btn {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.wallet-eye-btn { border: none; background: transparent; color: var(--primary-blue); cursor: pointer; padding: 0.3rem; margin-top: 0.25rem; flex-shrink: 0; border-radius: 999px; transition: background-color 0.15s ease; display: inline-flex; }
.wallet-eye-btn:hover { background-color: #FFFFFF; }
.wallet-eye-btn-global { position: absolute; top: 1.5rem; right: 1.5rem; margin-top: 0; }
.wallet-eye-icon-closed { display: none; }
.wallet-eye-btn.is-hidden .wallet-eye-icon-open { display: none; }
.wallet-eye-btn.is-hidden .wallet-eye-icon-closed { display: inline-flex; }
.wallet-sub { font-size: 0.8125rem; color: #71717A; margin-top: 0.5rem; }

body[data-theme="dark"] .wallet-tab { color: #71717A !important; }
body[data-theme="dark"] .wallet-tab.active { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; }
body[data-theme="dark"] .wallet-balance { color: #FFFFFF !important; }
body[data-theme="dark"] .wallet-sub { color: #A1A1AA !important; }

/* Cartão de carrossel de anúncios (Dashboard) */

.dash-ads-card { padding: 0; overflow: hidden; border: none; box-shadow: none; background: transparent; }

.dash-ads-carousel { position: relative; aspect-ratio: 16 / 9; background: var(--bg-light); }

.dash-ads-slide {
  position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden;
  transition: opacity .3s ease;
}
.dash-ads-slide.is-active { opacity: 1; visibility: visible; }
.dash-ads-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dash-ads-slide-caption {
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  padding: 0.65rem 0.85rem 0.6rem;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.dash-ads-slide-title {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #333333;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-ads-slide-subtitle {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-ads-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #18181B;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.dash-ads-nav-prev { left: 8px; }
.dash-ads-nav-next { right: 8px; }
.dash-ads-nav:hover { background: #fff; }

.dash-ads-dots { display: flex; justify-content: center; align-items: center; gap: 0.4rem; padding: 0.85rem 0; }
.dash-ads-dot { width: 6px; height: 6px; border-radius: 999px; background: #D4D4D8; border: none; padding: 0; cursor: pointer; transition: width .15s ease, background-color .15s ease; }
.dash-ads-dot.is-active { background: var(--primary-blue); width: 18px; }

/* Cartão Analytics (Dashboard) */

.dash-analytics-header { display: flex; align-items: flex-start; justify-content: space-between; }
.dash-analytics-period-label { font-size: 0.75rem; color: #71717A; margin-top: 0.2rem; }
.dash-analytics-period-wrap { position: relative; }
.dash-analytics-period-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: transparent; padding: 0; margin: 0;
  color: var(--primary-blue); cursor: pointer;
}
.dash-analytics-period-btn:hover { background: #F4F4F5; }
.dash-analytics-period-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-control);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.14); padding: 0.4rem; min-width: 160px;
  display: flex; flex-direction: column;
}
.dash-analytics-period-popover button {
  border: none; background: transparent; text-align: left; padding: 0.5rem 0.6rem; border-radius: 8px;
  font-size: 0.8125rem; color: #3F3F46; cursor: pointer;
}
.dash-analytics-period-popover button:hover { background: #F4F4F5; }
.dash-analytics-period-popover button.is-active { color: var(--primary-blue); font-weight: 700; }

.dash-analytics-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-top: 1px solid var(--border-light); }
.dash-analytics-row:first-of-type { border-top: none; padding-top: 0; }
.dash-analytics-metric-label { font-size: 0.8125rem; font-weight: 700; color: #52525B; }
.dash-analytics-metric-value { font-size: 0.9375rem; font-weight: 700; color: #18181B; }
.dash-analytics-boost-link {
  display: block; border: none; background: transparent; padding: 0 0 0.75rem; margin: -0.4rem 0 0;
  font-size: 0.75rem; font-weight: 400; color: var(--primary-blue); cursor: pointer; text-align: left;
}
.dash-analytics-boost-link:hover { text-decoration: underline; }

body[data-theme="dark"] .dash-analytics-metric-label { color: #D4D4D8 !important; }
body[data-theme="dark"] .dash-analytics-metric-value { color: #FFFFFF !important; }
body[data-theme="dark"] .dash-analytics-period-btn:hover { background: #333333 !important; }
body[data-theme="dark"] .dash-analytics-period-popover { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .dash-analytics-period-popover button:hover { background: #333333 !important; }
body[data-theme="dark"] .dash-analytics-row { border-top-color: #404040 !important; }

body[data-theme="dark"] .metrics-circle-value { color: #FFFFFF !important; }
body[data-theme="dark"] .metric-ring-inner { background: #252525 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .metric-ring { background: conic-gradient(var(--ring-color, var(--primary-blue)) calc(var(--ring-pct, 0) * 1%), #404040 0) !important; }

/* Agenda: faixa de dias + lista */

.day-strip {
  display: flex;
  gap: 0.375rem;
}

.day-strip-cell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.25rem;
  border-radius: 12px;
}

.day-strip-cell .dow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #A1A1AA;
}

.day-strip-cell .dom {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #3F3F46;
}

.day-strip-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--primary-blue);
}

.day-strip-cell.today {
  background: var(--primary-blue);
}

.day-strip-cell.today .dow,
.day-strip-cell.today .dom {
  color: #fff;
}

.day-strip-cell.today .day-strip-dot { background: #fff; }

.agenda-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-left: 3px solid var(--primary-blue);
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.agenda-item + .agenda-item { margin-top: 0.5rem; }

/* Tarefas (checklist) */

.tarefa-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-card);
}

.tarefa-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.tarefa-item:last-child { border-bottom: none; padding-bottom: 0; }
.tarefa-item:first-child { padding-top: 0; }

.tarefa-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tarefa-check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--border-card);
  flex-shrink: 0;
  margin-top: 0.0625rem;
  transition: background-color .15s ease, border-color .15s ease;
}

.tarefa-item input:checked + .tarefa-check {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

.tarefa-text {
  font-size: 0.875rem;
  color: #3F3F46;
  line-height: 1.4;
}

.tarefa-text.done {
  color: #A1A1AA;
  text-decoration: line-through;
}

.tarefa-new-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: #3F3F46;
  background: transparent;
  padding: 0;
  margin-top: 0.0625rem;
}

/* ==========================================================================
   FUNÇÕES — equipe e permissões
   ========================================================================== */

.member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #EFF6FF;
  color: #2563EB;
  white-space: nowrap;
}

.owner-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #A1A1AA;
}

.modules-summary {
  font-size: 0.8125rem;
  color: #71717A;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.permission-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #3F3F46;
  cursor: pointer;
}

.permission-check input {
  accent-color: var(--primary-blue);
  width: 16px;
  height: 16px;
}

.role-template-desc {
  font-size: 0.75rem;
  color: #71717A;
  margin-top: 0.375rem;
  line-height: 1.5;
}

/* Tarefas: excluir com hover */

.tarefa-remove {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 0.0625rem;
  border: none;
  background: transparent;
  color: #A1A1AA;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}

.tarefa-item:hover .tarefa-remove { opacity: 1; }
.tarefa-remove:hover { color: #52525B; background: #F4F4F5; }

/* Abas de submenu — texto limpo com sublinhado (sem pills) */

.category-tab {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #71717A;
  padding: 0 0 0.625rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.category-tab:hover { color: #3F3F46; }

.category-tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

.category-tabs-bar {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  margin-bottom: 1rem;
  flex-shrink: 0;
}


/* Empty state (páginas em construção) */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem;
  color: #71717A;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #F4F4F5;
  color: #A1A1AA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* Responsive */

@media (max-width: 768px) {
  .conv-list { width: 240px; }
  .bubble { max-width: 80%; }
}

/* Botão Enviar Mensagem no Chat - Cor Secundária #27394f */
#chat-send-btn {
  background-color: #27394f !important;
  color: #FFFFFF !important;
}

#chat-send-btn:hover {
  background-color: #1d2b3c !important;
}

/* ==========================================================================
   DARK MODE — overrides amplos para texto/superfícies em todas as páginas
   ========================================================================== */

body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .field-input,
body[data-theme="dark"] .field-select,
body[data-theme="dark"] .field-textarea,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .product-card,
body[data-theme="dark"] .agenda-item,
body[data-theme="dark"] .leads-table tr:hover td,
body[data-theme="dark"] .command-result-item:hover,
body[data-theme="dark"] .topbar-dropdown-item:hover {
  background-color: var(--surface-dark) !important;
  color: #FFFFFF !important;
}

body[data-theme="dark"] .text-zinc-900,
body[data-theme="dark"] .text-zinc-800,
body[data-theme="dark"] .text-zinc-700,
body[data-theme="dark"] .text-zinc-600,
body[data-theme="dark"] .text-zinc-500,
body[data-theme="dark"] .text-zinc-400,
body[data-theme="dark"] .greeting-date,
body[data-theme="dark"] .greeting-title,
body[data-theme="dark"] .field-label,
body[data-theme="dark"] .role-template-desc,
body[data-theme="dark"] .modules-summary,
body[data-theme="dark"] .owner-tag,
body[data-theme="dark"] .command-group-label,
body[data-theme="dark"] .leads-table th,
body[data-theme="dark"] .day-strip-cell .dow,
body[data-theme="dark"] .day-strip-cell .dom,
body[data-theme="dark"] .member-row p,
body[data-theme="dark"] .empty-state p,
body[data-theme="dark"] .guide-link {
  color: #FFFFFF !important;
}

body[data-theme="dark"] .dash-card {
  background-color: #181D24 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .dash-card h1,
body[data-theme="dark"] .dash-card h2,
body[data-theme="dark"] .dash-card h3,
body[data-theme="dark"] .dash-card h4,
body[data-theme="dark"] .dash-card p {
  color: #ffffff !important;
}

body[data-theme="dark"] .leads-table td { border-top-color: #404040 !important; }
body[data-theme="dark"] .dash-card-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .day-strip-cell.today { background: #4B4B4B !important; }

body[data-theme="dark"] .guide-link:hover { background: rgba(255, 255, 255, 0.1) !important; }
body[data-theme="dark"] .guide-link--active { color: #FFFFFF !important; border-left-color: #FFFFFF; }
body[data-theme="dark"] .guias-icon-badge { background: #4B4B4B; }
body[data-theme="dark"] .guias-progress-track { background: #535353; }
body[data-theme="dark"] .guide-checklist-dot { border-color: rgba(255, 255, 255, 0.3); }

body[data-theme="dark"] .faq-item { border-bottom-color: rgba(255, 255, 255, 0.14); }
body[data-theme="dark"] .faq-item summary { color: #FFFFFF; }
body[data-theme="dark"] .faq-item summary::after { color: rgba(255, 255, 255, 0.5); }
body[data-theme="dark"] .guias-faq-card .faq-item summary::after { border-color: rgba(255, 255, 255, 0.5); }
body[data-theme="dark"] .faq-item p { color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   GUIAS DE INÍCIO
   ========================================================================== */

.guias-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
}

.guias-sidebar { padding-top: 0.25rem; }

.guias-sidebar-divider {
  height: 1px;
  background: var(--border-card);
  margin: 1rem 0;
}

.guide-link {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  color: #3F3F46;
  font-size: 0.875rem;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-left: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}

.guide-link:hover { background: #F4F4F5; color: #18181B; }

.guide-link--active {
  color: var(--primary-blue);
  font-weight: 600;
  border-left-color: var(--primary-blue);
}

.guias-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--border-card);
  overflow: hidden;
}

.guias-progress-fill { background: #67974E; height: 100%; border-radius: 999px; }

.guias-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: #F4F4F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.guias-icon-badge--lg { width: 56px; height: 56px; font-size: 1.75rem; }
.guias-flat-card { box-shadow: none; border: none; }

.guias-faq-card .faq-item summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #A1A1AA;
  border-bottom: 1.5px solid #A1A1AA;
  transform: rotate(45deg);
  margin-top: -4px;
}

.guias-faq-card .faq-item[open] summary::after { transform: rotate(225deg); margin-top: 2px; }

.guide-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-card);
}

.guide-checklist-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border-card);
  flex-shrink: 0;
}

/* FAQ */

.faq-item {
  border-bottom: 1px solid var(--border-card);
  padding: 1rem 0;
}

.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item:first-child { padding-top: 0; }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #18181B;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: #A1A1AA;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  color: #52525B;
  line-height: 1.6;
}

/* ==========================================================================
   PLANOS E RECURSOS
   ========================================================================== */

.plans-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.plan-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  position: relative;
  flex: 1 1 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
}

.plans-grid .plan-card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.plans-grid .plan-card:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.plan-card.featured { background: #EBF4FF; box-shadow: var(--shadow-soft); }

.plan-card-badge {
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  transform: translateY(-100%);
  background: var(--primary-color);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
  margin: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.plan-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.plan-card-title { font-size: 1.25rem; font-weight: 700; color: #18181B; margin: 0 0 0.5rem; }

.plan-card-desc {
  font-size: 0.8125rem;
  color: #71717A;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  min-height: 2.4em;
}

.plan-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1.75rem; }
.plan-price-amount { font-size: 2.25rem; font-weight: 800; color: #18181B; }
.plan-price-period { font-size: 0.875rem; color: #71717A; }

.plan-billing-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #F4F4F5;
  border-radius: 10px;
  padding: 0.25rem;
  margin-bottom: 1.75rem;
}

.plan-billing-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.plan-billing-option:hover { color: #3F3F46; }
.plan-billing-option-title { font-size: 0.8125rem; font-weight: 600; color: #71717A; }

.plan-billing-option-discount {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #16A34A;
  background: rgba(22, 163, 74, 0.12);
  padding: 0.1rem 0.375rem;
  border-radius: 999px;
}

.plan-billing-option.active { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.plan-billing-option.active .plan-billing-option-title { color: #18181B; }

.plan-features { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: #3F3F46; }
.plan-features li svg { width: 16px; height: 16px; color: var(--primary-color); flex-shrink: 0; margin-top: 1px; }

.plan-card-cta { width: 100%; justify-content: center; margin-top: auto; }
.plan-card-cta:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

body[data-theme="dark"] .plan-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .plan-card-badge { background: #000000 !important; }
body[data-theme="dark"] .plan-card-title,
body[data-theme="dark"] .plan-price-amount { color: #FFFFFF !important; }
body[data-theme="dark"] .plan-card-desc,
body[data-theme="dark"] .plan-price-period { color: rgba(255, 255, 255, 0.65) !important; }
body[data-theme="dark"] .plan-features li { color: rgba(255, 255, 255, 0.85) !important; }
body[data-theme="dark"] .plan-features li svg { color: #FFFFFF !important; }
body[data-theme="dark"] .plan-billing-toggle { background-color: var(--surface-dark) !important; }
body[data-theme="dark"] .plan-billing-option-title { color: rgba(255, 255, 255, 0.7) !important; }
body[data-theme="dark"] .plan-billing-option-discount { background: rgba(34, 197, 94, 0.18) !important; color: #4ADE80 !important; }
body[data-theme="dark"] .plan-billing-option.active { background-color: rgba(255, 255, 255, 0.16) !important; }
body[data-theme="dark"] .plan-billing-option.active .plan-billing-option-title { color: #FFFFFF !important; }

/* ==========================================================================
   MOBILE — barra de navegação inferior + folhas deslizantes (bottom sheet)
   ========================================================================== */

.mobile-bottom-nav { display: none; }
.mobile-nav-overlay { display: none; }
.mobile-nav-sheet { display: none; }

@media (max-width: 768px) {
  .b2b-sidebar { display: none; }
  .b2b-main { margin-left: 0; background-color: var(--bg-dashboard); }
  body[data-theme="dark"] .b2b-main { background-color: #1C2125 !important; }
  .b2b-content { padding-bottom: 6rem; }
  body[data-page="dashboard"] .b2b-content { padding-bottom: 6rem; }
  .b2b-footer { display: none; }

  .b2b-topbar { padding: 0 1rem; gap: 0.5rem; }
  .topbar-account-wrap { display: none; }

  .topbar-services-mobile-link { display: flex; }
  .topbar-messages-mobile-hide { display: none; }

  /* Dashboard: o cabeçalho some — avatar/mensagens/notificações são
     realocados (via JS) para dentro da saudação "Olá, [empresa]". */
  body[data-page="dashboard"] .b2b-topbar { display: none; }
  body[data-page="dashboard"] .dashboard-greeting-actions { display: none; }

  .dashboard-greeting { align-items: center; }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .topbar-icon-btn-wrap,
  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .topbar-avatar-btn {
    width: 100%;
    height: 100%;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .b2b-avatar {
    width: 100% !important;
    height: 100% !important;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .b2b-avatar svg {
    width: 55%;
    height: 55%;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-icons:not(:empty) {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    margin-left: auto;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-icons .topbar-icon-plain {
    width: 32px;
    height: 32px;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-icons .topbar-icon-plain svg {
    width: 19px;
    height: 19px;
  }

  body[data-page="dashboard"] .dashboard-greeting-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  body[data-page="dashboard"] .greeting-title {
    font-size: 1.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dashboard-quick-action-desktop-only,
  .dashboard-quick-action-mobile-hide { display: none; }

  .dashboard-quick-action-btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    gap: 0.35rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .topbar-search-trigger {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    justify-content: center;
  }

  .topbar-search-trigger span,
  .topbar-search-trigger kbd { display: none; }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    z-index: 70;
  }

  .mobile-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: none;
    background: transparent;
    color: #71717A;
    font-size: 0.625rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    margin: 5px 3px;
    padding: 5px 0.15rem;
    border-radius: 14px;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
  }

  .mobile-nav-item span { text-align: center; line-height: 1.15; }

  .mobile-nav-item svg { width: 20px; height: 20px; stroke-width: 1.7px; flex-shrink: 0; }

  .mobile-nav-item.active,
  .mobile-nav-toggle.sheet-open { color: var(--primary-color); }

  .mobile-nav-item.active {
    background: #EBF4FF;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.04);
  }

  .mobile-nav-item .nav-badge {
    position: absolute;
    top: 2px;
    right: 22%;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
  }

  body.mobile-sheet-open .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 75;
  }

  .mobile-nav-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-card);
    border-radius: 16px 16px 0 0;
    padding: 0.75rem;
    padding-bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 76;
  }

  body.mobile-sheet-open .mobile-nav-sheet.has-open-panel { transform: translateY(0); }

  .mobile-nav-sheet-panel { display: none; flex-direction: column; gap: 0.25rem; }
  .mobile-nav-sheet-panel.active { display: flex; }

  .mobile-sheet-link {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-control);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #18181B;
    text-decoration: none;
  }

  .mobile-sheet-link:active { background: rgba(0, 0, 0, 0.045); }
  .mobile-sheet-link.active { color: var(--primary-color); background: rgba(0, 0, 0, 0.04); }

  .profile-dropdown {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
    z-index: 76;
  }

  .profile-dropdown.show { transform: translateY(0); visibility: visible; }
}

body[data-theme="dark"] .mobile-bottom-nav { background: #333333 !important; border-top-color: #404040 !important; }
body[data-theme="dark"] .mobile-nav-item { color: rgba(255, 255, 255, 0.6) !important; }
body[data-theme="dark"] .mobile-nav-item.active,
body[data-theme="dark"] .mobile-nav-toggle.sheet-open { color: #FFFFFF !important; }
body[data-theme="dark"] .mobile-nav-item.active {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
body[data-theme="dark"] .mobile-nav-sheet { background: #333333 !important; }
body[data-theme="dark"] .mobile-sheet-link { color: #FFFFFF !important; }
body[data-theme="dark"] .mobile-sheet-link:active { background: rgba(255, 255, 255, 0.08) !important; }
body[data-theme="dark"] .mobile-sheet-link.active { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; }

/* ==========================================================================
   CHAT / MENSAGENS — Light & Dark Mode (Portal Fornecedor B2B)
   Light: Lista de conversas #FAFAFA | Fundo das mensagens #FFFFFF
   Dark:  Lista de conversas #252525 | Fundo das mensagens #252525 | Header/Input #333333
   ========================================================================== */
body:not([data-theme="dark"]) .b2b-chat-contacts-column,
body:not([data-theme="dark"]) .b2b-chat-contacts-header,
body:not([data-theme="dark"]) #conv-list {
  background-color: #FAFAFA !important;
}

body[data-theme="dark"] .chat-shell,
body[data-theme="dark"] .b2b-chat-contacts-column,
body[data-theme="dark"] .b2b-chat-contacts-header,
body[data-theme="dark"] #conv-list,
body[data-theme="dark"] #chat-messages {
  background-color: #252525 !important;
  background: #252525 !important;
}

body[data-theme="dark"] .chat-shell .border-zinc-200,
body[data-theme="dark"] .chat-shell .border-zinc-200\/70,
body[data-theme="dark"] .chat-shell .border-zinc-200\/60,
body[data-theme="dark"] .chat-shell .divide-zinc-200\/60 > * {
  border-color: #404040 !important;
}

/* Header do Chat */
body[data-theme="dark"] .chat-shell .h-\[64px\] {
  background-color: #333333 !important;
  border-color: #404040 !important;
}

body[data-theme="dark"] #chat-header-name {
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-header-status {
  color: #a1a1aa !important;
}

/* Header da lista de conversas */
body[data-theme="dark"] .chat-shell h3 {
  color: #ffffff !important;
}

/* Busca nas conversas */
body[data-theme="dark"] #chat-search-input {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-search-input::placeholder {
  color: #a1a1aa !important;
}

/* Itens da lista de contatos */
body[data-theme="dark"] #conv-list > div:hover {
  background-color: #333333 !important;
}

body[data-theme="dark"] #conv-list > div.bg-\[\#EBF4FF\] {
  background-color: #333333 !important;
  border-left-color: #537bae !important;
}

body[data-theme="dark"] #conv-list h4 {
  color: #ffffff !important;
}

body[data-theme="dark"] #conv-list p {
  color: #a1a1aa !important;
}

body[data-theme="dark"] #conv-list span.bg-white\/70 {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #d4d4d8 !important;
}

/* Fundo das Mensagens (#252525) */
body[data-theme="dark"] #chat-messages {
  background-color: #252525 !important;
  background: #252525 !important;
}

/* Badge de data ("Hoje") */
body[data-theme="dark"] #chat-messages span.bg-white {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #a1a1aa !important;
}

/* Balão do outro contato */
body[data-theme="dark"] #chat-messages .bg-white.border {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-messages .bg-white.border p {
  color: #ffffff !important;
}

/* Barra inferior de envio */
body[data-theme="dark"] .chat-shell .p-4.bg-white.border-t {
  background-color: #333333 !important;
  border-color: #404040 !important;
}

body[data-theme="dark"] #chat-input {
  background-color: #404040 !important;
  border-color: #4f4f4f !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-input::placeholder {
  color: #a1a1aa !important;
}

body[data-theme="dark"] #chat-attach-btn {
  background-color: #404040 !important;
  border-color: #4f4f4f !important;
  color: #ffffff !important;
}

/* Balão de mensagem do usuário à direita no Dark Mode (Texto em #ebf4ff) */
body[data-theme="dark"] .chat-bubble-user-glass {
  background: #252525 !important;
  background-color: #252525 !important;
  border: 1px solid #404040 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  color: #ebf4ff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-theme="dark"] .chat-bubble-user-glass,
body[data-theme="dark"] .chat-bubble-user-glass p,
body[data-theme="dark"] .chat-bubble-user-glass span,
body[data-theme="dark"] .chat-bubble-user-glass div {
  color: #ebf4ff !important;
  text-shadow: none !important;
}

/* Barra de rolagem nos chats (#000000 no Dark Mode) */
body[data-theme="dark"] .chat-shell ::-webkit-scrollbar-thumb,
body[data-theme="dark"] #chat-messages::-webkit-scrollbar-thumb,
body[data-theme="dark"] #conv-list::-webkit-scrollbar-thumb {
  background-color: #000000 !important;
  background: #000000 !important;
  border-radius: 9999px !important;
}

body[data-theme="dark"] .chat-shell ::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] #chat-messages::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] #conv-list::-webkit-scrollbar-thumb:hover {
  background-color: #000000 !important;
  background: #000000 !important;
}

body[data-theme="dark"] .chat-shell ::-webkit-scrollbar-track,
body[data-theme="dark"] #chat-messages::-webkit-scrollbar-track,
body[data-theme="dark"] #conv-list::-webkit-scrollbar-track {
  background: transparent !important;
}

body[data-theme="dark"] #chat-messages,
body[data-theme="dark"] #conv-list {
  scrollbar-color: #000000 transparent !important;
}

/* ==========================================================================
   TEMA ESCURO: MENUS ATIVOS & ABAS DE SUBMENU (#ebf4ff no texto e barra embaixo)
   ========================================================================== */
body[data-theme="dark"] .category-tab.active,
body[data-theme="dark"] button.category-tab.active,
body[data-theme="dark"] .b2b-category-pill.active,
body[data-theme="dark"] button.b2b-category-pill.active,
body[data-theme="dark"] .love-tab-item.active,
body[data-theme="dark"] button.love-tab-item.active,
body[data-theme="dark"] .subnav-item.active,
body[data-theme="dark"] [role="tab"].active,
body[data-theme="dark"] [role="tab"][aria-selected="true"],
body[data-theme="dark"] .active[class*="border-b"],
body[data-theme="dark"] [class*="border-b"].active,
body[data-theme="dark"] .active[class*="border-b-2"],
body[data-theme="dark"] [class*="border-b-2"].active {
  color: #ebf4ff !important;
  border-bottom-color: #ebf4ff !important;
  border-color: #ebf4ff !important;
}

body[data-theme="dark"] .category-tab.active *,
body[data-theme="dark"] .b2b-category-pill.active *,
body[data-theme="dark"] .active[class*="border-b"] *,
body[data-theme="dark"] [class*="border-b"].active *,
body[data-theme="dark"] .active[class*="border-b-2"] *,
body[data-theme="dark"] [class*="border-b-2"].active * {
  color: #ebf4ff !important;
}

/* ==========================================================================
   Construtor visual — Editar meu site (page builder)
   ========================================================================== */

.builder-narrow-notice { display: none; }

@media (max-width: 1180px) {
  .builder-wrap { display: none; }
  .builder-narrow-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
  }
}

.builder-wrap {
  border: none;
  border-top: 1px solid var(--border-card);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 1.25rem -2rem 0;
  width: calc(100% + 4rem);
}

/* -------------------- Toolbar -------------------- */

.builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-card);
  background: #FAFAFA;
  flex-wrap: wrap;
}

.builder-page-switcher { position: relative; display: inline-block; }

.builder-page-name {
  border: 1px solid transparent;
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  color: #18181B;
  font-family: inherit;
  padding: 0.4rem 1.75rem 0.4rem 0.6rem;
  border-radius: 8px;
  min-width: 140px;
  max-width: 220px;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
}
.builder-page-name:hover { background-color: #F4F4F5; }
.builder-page-name:focus { outline: none; border-color: var(--border-light); background-color: #fff; }
.builder-page-switcher[aria-expanded="true"] .builder-page-name,
.builder-page-name[aria-expanded="true"] { background-color: #F4F4F5; }

#builder-page-dropdown {
  display: none;
  left: 0;
  right: auto;
  min-width: 180px;
  width: max-content;
}
#builder-page-dropdown.show { display: flex; }
.kanban-list-dropdown-item.active { background: #F4F4F5; font-weight: 700; }

.builder-device-toggle { display: flex; align-items: center; gap: 0.25rem; background: #F4F4F5; padding: 0.25rem; border-radius: 10px; }
.builder-device-btn {
  width: 32px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; color: #71717A; background: transparent; border: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.builder-device-btn svg { width: 16px; height: 16px; }
.builder-device-btn:hover { color: #18181B; }
.builder-device-btn.active { background: #fff; color: #18181B; box-shadow: var(--shadow-soft); }

.builder-toolbar-right { display: flex; align-items: center; gap: 0.4rem; }
.builder-tool-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #52525B; background: transparent; border: 1px solid transparent; cursor: pointer;
}
.builder-tool-btn svg { width: 16px; height: 16px; }
.builder-tool-btn:hover:not(:disabled) { background: #F4F4F5; }
.builder-tool-btn:disabled { color: #D4D4D8; cursor: default; }
.builder-toolbar-divider { width: 1px; height: 20px; background: var(--border-light); margin: 0 0.15rem; }
.builder-toolbar-btn { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
.builder-toolbar-btn svg { width: 15px; height: 15px; }
.builder-toolbar-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.builder-toolbar-btn.active:hover { background: var(--primary-blue-hover); }

/* -------------------- Corpo: sidebar + canvas + inspector -------------------- */

.builder-body { display: flex; min-height: 0; height: 640px; }

.builder-elements-panel {
  width: 312px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-card);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.builder-panel-tabs { display: flex; gap: 0.25rem; padding: 0.6rem; margin: 0.65rem 0.65rem 0; background: #fff; border: 1px solid var(--border-card); border-radius: 10px; flex-shrink: 0; }
.builder-panel-tab {
  flex: 1;
  padding: 0.5rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #71717A;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.builder-panel-tab:hover { color: #3F3F46; }
.builder-panel-tab.active { color: #18181B; background: #ebf4ff; }

.builder-panel-tab-body { padding: 0.9rem 0.25rem 0.9rem 0.75rem; overflow-y: auto; flex: 1; min-height: 0; }
.builder-panel-tab-body-estilo { display: flex; flex-direction: column; gap: 1.4rem; }

.builder-estilo-section { display: flex; flex-direction: column; gap: 1.15rem; }
.builder-estilo-section .inspector-hint { margin-bottom: 0.15rem; }

.builder-el-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  padding: 0.5rem 0.4rem 0.4rem;
}
.builder-el-group-title svg { width: 14px; height: 14px; flex-shrink: 0; }

.builder-el-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.4rem; }

.builder-el-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.95rem 0.3rem;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: #fff;
  cursor: grab;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.builder-el-item svg { width: 17px; height: 17px; color: #52525B; }
.builder-el-item span { font-size: 0.6875rem; font-weight: 600; color: #3F3F46; line-height: 1.15; }
.builder-el-item:hover { border-color: var(--primary-blue); background: #F8FAFC; transform: translateY(-1px); }
.builder-el-item:active { cursor: grabbing; }
.builder-el-item.sortable-chosen { opacity: 0.4; }

.builder-el-item.is-structural { cursor: pointer; }
.builder-el-item.is-structural:active { cursor: pointer; }

/* -------------------- Canvas -------------------- */

.builder-canvas-viewport {
  flex: 1;
  min-width: 0;
  background: #EDEDF0;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: center;
}

.builder-canvas-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  transform: translateZ(0);
  transition: max-width .2s ease;
}
.builder-canvas-frame[data-device="tablet"] { max-width: 768px; }
.builder-canvas-frame[data-device="mobile"] { max-width: 375px; }

.builder-canvas-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

.builder-canvas {
  width: 100%;
  background: #fff;
  min-height: 100%;
  box-shadow: 0 0 0 1px var(--border-card);
}

.builder-fixed-header {
  --header-bg: #FAFAFA;
  --header-text: #3F3F46;
  --header-cta-bg: var(--bx-primary, var(--primary-blue));
  --header-cta-text: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 1px 0 rgba(16,24,40,0.03);
  cursor: pointer;
}
#site-builder-root .builder-fixed-header:hover,
.builder-fixed-header.is-selected { outline: 2px dashed #D4D4D8; outline-offset: -2px; }
.builder-fixed-header[data-style="flutuante"] {
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 16px auto 0;
  border-radius: var(--bx-radius, 16px);
  border-bottom: none;
  box-shadow: 0 12px 28px rgba(16,24,40,0.18);
  position: relative;
  z-index: 20;
}
.builder-fixed-header[data-sticky="false"] { position: static; }
.builder-fixed-header[data-style="flutuante"][data-sticky="true"] { position: sticky; top: 16px; }
.builder-canvas[data-page-key="checkout"] .builder-fixed-header { position: static !important; }
#site-builder-root .builder-fixed-header[data-style="flutuante"]:hover,
.builder-fixed-header[data-style="flutuante"].is-selected { outline: 2px dashed #D4D4D8; outline-offset: -2px; }
.builder-fixed-header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 1.75rem;
  max-width: 1080px;
  margin: 0 auto;
}
.builder-fixed-header-logo-frame { width: 148px; height: 40px; overflow: hidden; flex-shrink: 0; }
.builder-fixed-header-logo-frame .builder-fixed-header-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1)) translate(var(--logo-x, 0%), var(--logo-y, 0%));
  transform-origin: center;
}
.builder-fixed-header-logo-placeholder {
  font-size: 0.75rem; font-weight: 600; color: var(--header-text); white-space: nowrap;
  border: 1.5px dashed currentColor; opacity: 0.7; border-radius: 8px; padding: 0.5rem 0.85rem; flex-shrink: 0;
}
.builder-fixed-header-menu { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.builder-fixed-header-menu a { font-size: 0.8125rem; color: var(--header-text); text-decoration: none; white-space: nowrap; opacity: 0.9; }
.builder-fixed-header-menu a:hover { opacity: 1; }
.builder-fixed-header-menu a,
.builder-fixed-header-cta,
.builder-mobile-menu-drawer-links a,
.builder-mobile-menu-drawer-cta {
  font-family: var(--menu-font-family, inherit);
  font-weight: var(--menu-font-weight, 600);
  font-style: var(--menu-font-style, normal);
  text-decoration: var(--menu-text-decoration, none);
}
.builder-fixed-header-menu[data-menu-style="flutuante"] {
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--bx-radius, 999px);
  background: color-mix(in srgb, var(--header-text) 8%, transparent);
}
.builder-fixed-header-menu[data-menu-style="flutuante"] a {
  padding: 0.4rem 0.9rem;
  border-radius: var(--bx-radius, 999px);
  opacity: 0.85;
}
.builder-fixed-header-menu[data-menu-style="flutuante"] a:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--header-text) 10%, transparent);
}
.builder-fixed-header-menu[data-menu-style="botoes"] { gap: 0.5rem; }
.builder-fixed-header-menu[data-menu-style="botoes"] a {
  padding: 0.45rem 1rem;
  border-radius: var(--bx-radius, 8px);
  background: color-mix(in srgb, var(--header-text) 8%, transparent);
  opacity: 1;
}
.builder-fixed-header-menu[data-menu-style="botoes"] a:hover {
  background: color-mix(in srgb, var(--header-text) 16%, transparent);
}
.builder-fixed-header-cta {
  flex-shrink: 0;
  font-size: 0.8125rem; color: var(--header-cta-text);
  background: var(--header-cta-bg);
  padding: 0.55rem 1.15rem; border-radius: var(--bx-radius, 999px);
  white-space: nowrap;
}

.builder-fixed-header-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: none; color: var(--header-text); cursor: pointer; padding: 0;
}
.builder-fixed-header-burger svg { width: 22px; height: 22px; }

.builder-canvas[data-device="mobile"] .builder-fixed-header-menu,
.builder-canvas[data-device="mobile"] .builder-fixed-header-inner > .builder-fixed-header-cta { display: none; }
.builder-canvas[data-device="mobile"] .builder-fixed-header-burger { display: flex; }

.builder-fixed-footer {
  background: #18181B;
  padding: 1.75rem 1.5rem;
  cursor: default;
}
.builder-fixed-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  row-gap: 0.35rem;
  text-align: left;
}
.builder-fixed-footer-logo { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.builder-fixed-footer-madewith { font-size: 0.75rem; font-weight: 500; color: #A1A1AA; }
.builder-fixed-footer-word { height: 22px; width: auto; object-fit: contain; }
.builder-fixed-footer-text p, .builder-fixed-footer-text span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #A1A1AA;
}

.builder-mobile-menu-root { position: absolute; inset: 0; pointer-events: none; }

.builder-mobile-menu-backdrop {
  display: block;
  position: fixed; inset: 0;
  background: rgba(24,24,27,0.45);
  z-index: 29;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.builder-mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.builder-mobile-menu-drawer {
  display: flex;
  flex-direction: column;
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 78%; max-width: 300px;
  background: var(--header-bg-solid, var(--header-bg, #fff));
  z-index: 30;
  box-shadow: -8px 0 24px rgba(16,24,40,0.18);
  padding: 1.25rem;
  transform: translateX(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.builder-mobile-menu-drawer.is-open { transform: translateX(0); pointer-events: auto; }

.builder-mobile-menu-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-shrink: 0; }
.builder-mobile-menu-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--header-text);
}
.builder-mobile-menu-close svg { width: 18px; height: 18px; }
.builder-mobile-menu-drawer-links { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1.5rem; }
.builder-mobile-menu-drawer-links a {
  font-size: 0.9375rem; color: var(--header-text);
  padding: 0.8rem 0.15rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.builder-mobile-menu-drawer-cta { text-align: center; margin-top: auto; }

.builder-empty-canvas {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 4rem 1.5rem; color: #A1A1AA; text-align: center;
}
.builder-empty-canvas svg { width: 34px; height: 34px; color: #D4D4D8; }
.builder-empty-canvas p { font-size: 0.8125rem; max-width: 260px; }

.builder-elements-list.is-empty-section {
  flex-direction: column;
  gap: 0.6rem;
  min-height: 220px;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.builder-elements-list.is-empty-section svg { width: 32px; height: 32px; color: #D4D4D8; }
.builder-elements-list.is-empty-section span { max-width: 260px; line-height: 1.5; font-size: 0.8125rem; }

.builder-section {
  position: relative;
  z-index: 0;
  border: 1px dashed transparent;
  padding: var(--bx-section-spacing) 0;
  /* seção ocupa a tela cheia e centraliza o conteúdo */
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#site-builder-root .builder-section:hover { border-color: #CFE1F0; }
.builder-section.is-selected { border-color: var(--primary-blue); border-style: solid; }
.builder-section-bg-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}
.builder-section-overlay {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* carrossel de imagens de fundo: camadas empilhadas alternam com fade */
.builder-section-bg-carousel-layer { opacity: 0; }
.builder-section[data-bg-carousel-count="2"] .builder-section-bg-carousel-layer:nth-child(1) { animation: bgCarousel2Layer1 10s infinite; }
.builder-section[data-bg-carousel-count="2"] .builder-section-bg-carousel-layer:nth-child(2) { animation: bgCarousel2Layer2 10s infinite; }
.builder-section[data-bg-carousel-count="3"] .builder-section-bg-carousel-layer:nth-child(1) { animation: bgCarousel3Layer1 15s infinite; }
.builder-section[data-bg-carousel-count="3"] .builder-section-bg-carousel-layer:nth-child(2) { animation: bgCarousel3Layer2 15s infinite; }
.builder-section[data-bg-carousel-count="3"] .builder-section-bg-carousel-layer:nth-child(3) { animation: bgCarousel3Layer3 15s infinite; }
@keyframes bgCarousel2Layer1 { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bgCarousel2Layer2 { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bgCarousel3Layer1 { 0%, 26% { opacity: 1; } 33%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bgCarousel3Layer2 { 0%, 26% { opacity: 0; } 33%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes bgCarousel3Layer3 { 0%, 60% { opacity: 0; } 66%, 93% { opacity: 1; } 100% { opacity: 0; } }

/* container: conteúdo centralizado, largura máxima e padding lateral de segurança */
.builder-section > .builder-columns-row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* mobile: seção usa altura dinâmica da viewport e padding lateral menor */
.builder-canvas[data-device="mobile"] .builder-section { min-height: 100dvh; }
.builder-canvas[data-device="mobile"] .builder-section > .builder-columns-row { max-width: 100%; padding: 0 16px; }

.builder-canvas[data-page-key="checkout"][data-device="mobile"] .builder-columns-row { flex-direction: column; }
.builder-canvas[data-page-key="checkout"][data-device="mobile"] .builder-column { flex: 0 0 100% !important; max-width: 100% !important; }
.builder-canvas[data-page-key="checkout"] .builder-section { min-height: 0; }

/* Informações de cobrança / Você está contratando ficam dentro de uma caixa
   branca sobre o fundo colorido da seção — igual ao site principal. */
.builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row {
  gap: 24px;
}
.builder-canvas[data-page-key="checkout"][data-device="desktop"] [data-fixed-key="checkout"] > .builder-columns-row,
.builder-canvas[data-page-key="checkout"][data-device="tablet"] [data-fixed-key="checkout"] > .builder-columns-row {
  align-items: flex-start;
}
.builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row > .builder-column {
  background: #ffffff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.08);
}
/* A regra genérica #site-builder-root .builder-column:hover deixa o fundo
   meio transparente pra indicar "hover" — mas aqui a caixa precisa continuar
   branca sempre, então sobrescreve com a mesma especificidade (ID). */
#site-builder-root .builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row > .builder-column:hover {
  background: #ffffff;
  border-color: transparent;
}
@media (max-width: 768px) {
  .builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row > .builder-column { padding: 20px; }
}
@media (max-width: 768px) {
  .builder-section { min-height: 100dvh; }
  .builder-section > .builder-columns-row { max-width: 100%; padding: 0 16px; }
}

/* botões: altura mínima de toque no mobile */
.builder-canvas[data-device="mobile"] .be-button { min-height: 44px; }
@media (max-width: 768px) {
  .be-button { min-height: 44px; }
}

.builder-elements-list > * { margin-bottom: 1rem; }
.builder-elements-list > *:last-child { margin-bottom: 0; }

.builder-block-toolbar {
  position: absolute;
  top: -13px;
  right: 10px;
  display: none;
  align-items: center;
  gap: 1px;
  background: var(--primary-blue);
  border-radius: 6px;
  padding: 2px;
  z-index: 12;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.builder-section:hover:not(:has(:is(.builder-column, .builder-element):hover)) > .builder-block-toolbar,
.builder-section.is-selected > .builder-block-toolbar,
.builder-column:hover:not(:has(:is(.builder-column, .builder-element):hover)) > .builder-block-toolbar,
.builder-column.is-selected > .builder-block-toolbar,
.builder-element:hover:not(:has(:is(.builder-column, .builder-element):hover)) > .builder-block-toolbar,
.builder-element.is-selected > .builder-block-toolbar { display: flex; }

.builder-block-toolbar-tag {
  font-size: 0.625rem; font-weight: 700; color: #fff; padding: 0 0.4rem; text-transform: uppercase; letter-spacing: .03em;
}
.builder-block-toolbar button {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #EBF4FF; background: transparent; border: none; border-radius: 4px; cursor: pointer;
}
.builder-block-toolbar button svg { width: 12px; height: 12px; }
.builder-block-toolbar button:hover { background: rgba(255,255,255,0.18); color: #fff; }
.builder-block-toolbar button.el-drag-handle { cursor: grab; }
.el-lock-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #EBF4FF; }
.el-lock-icon svg { width: 12px; height: 12px; }
.builder-element-locked { cursor: default; }
.builder-element-locked:hover { outline: 1px dashed rgba(24,24,27,0.25); outline-offset: 2px; }

.be-text-format-toolbar {
  position: fixed;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1px;
  background: #18181B;
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.be-text-format-toolbar[hidden] { display: none; }
.be-text-format-toolbar button {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: #EBF4FF; background: transparent; border: none; border-radius: 5px; cursor: pointer;
}
.be-text-format-toolbar button svg { width: 14px; height: 14px; }
.be-text-format-toolbar button:hover { background: rgba(255,255,255,0.18); color: #fff; }
.be-text-format-toolbar button.active { background: var(--primary-blue); color: #fff; }

.builder-columns-row { display: flex; align-items: stretch; position: relative; }

.builder-column {
  position: relative;
  min-width: 40px;
  border: 1px dashed transparent;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
#site-builder-root .builder-column:hover { border-color: #E3D5C0; background: rgba(225,155,60,0.03); }
.builder-column.is-selected { border-color: #B45309; border-style: solid; }

.builder-column-resizer {
  width: 9px;
  margin: 0 -5px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  z-index: 5;
}
.builder-column-resizer::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 4px; width: 1px;
  background: var(--border-light);
}
.builder-column-resizer:hover::after,
.builder-column-resizer.is-dragging::after { background: var(--primary-blue); width: 2px; left: 3.5px; }

.builder-elements-list { min-height: 32px; flex: 1; display: flex; flex-direction: column; }
.builder-elements-list.is-empty {
  border: 1.5px dashed var(--border-light);
  border-radius: 8px;
  min-height: 64px;
  align-items: center; justify-content: center; display: flex;
  color: #A1A1AA; font-size: 0.75rem;
}

.builder-element {
  position: relative;
  border: 1px dashed transparent;
}
#site-builder-root .builder-element:hover { border-color: #D4D4D8; cursor: grab; }
#site-builder-root .builder-element:hover [contenteditable="true"] { cursor: text; }
#site-builder-root .builder-element:active { cursor: grabbing; }
.builder-element.is-selected { border-color: #D4D4D8; }
.builder-element.sortable-ghost { opacity: 0.35; background: #EBF4FF; }
.builder-element.sortable-drag { opacity: 0.9; }


/* -------------------- Conteúdo dos elementos (be-*) -------------------- */

.builder-canvas {
  --bx-primary: var(--primary-blue);
  --bx-radius: 10px;
  --bx-section-spacing: 2.5rem;
}

.be-text, .be-heading, .be-subtitle { outline: none; min-height: 1.4em; overflow-wrap: break-word; word-break: break-word; }
.be-text p { margin: 0 0 1em; }
.be-text p:last-child { margin-bottom: 0; }
.builder-element, .builder-column { overflow-wrap: break-word; }
.builder-canvas p, .builder-canvas span, .builder-canvas a, .builder-canvas button,
.builder-canvas input, .builder-canvas select, .builder-canvas textarea, .builder-canvas label {
  font-family: inherit;
}
.be-heading { font-weight: 700; }
.builder-canvas h1.be-heading { font-family: var(--h1-font-family, inherit); font-weight: var(--h1-font-weight, 700); font-style: var(--h1-font-style, normal); text-decoration: var(--h1-text-decoration, none); }
.builder-canvas h2.be-heading { font-family: var(--h2-font-family, inherit); font-weight: var(--h2-font-weight, 700); font-style: var(--h2-font-style, normal); text-decoration: var(--h2-text-decoration, none); }
.builder-canvas h3.be-heading { font-family: var(--h3-font-family, inherit); font-weight: var(--h3-font-weight, 700); font-style: var(--h3-font-style, normal); text-decoration: var(--h3-text-decoration, none); }
.builder-canvas h4.be-heading { font-family: var(--h4-font-family, inherit); font-weight: var(--h4-font-weight, 700); font-style: var(--h4-font-style, normal); text-decoration: var(--h4-text-decoration, none); }
.builder-canvas h5.be-heading { font-family: var(--h5-font-family, inherit); font-weight: var(--h5-font-weight, 700); font-style: var(--h5-font-style, normal); text-decoration: var(--h5-text-decoration, none); }
.be-subtitle { color: #71717A; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 0.8125rem; }
.be-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; cursor: default;
  background: var(--bx-primary); color: #fff; padding: 0.7rem 1.4rem; border-radius: var(--bx-radius); font-weight: 600; font-size: 0.875rem;
}
.be-button span { outline: none; }
.be-link { outline: none; cursor: default; color: var(--bx-primary); font-weight: 600; text-decoration: underline; }
.be-icon { display: inline-flex; color: var(--bx-primary); }
.be-icon svg { width: 100%; height: 100%; }
.be-image { display: inline-block; max-width: 100%; vertical-align: middle; }
.be-video-embed { position: relative; width: 100%; padding-top: 56.25%; background: #18181B; border-radius: 8px; overflow: hidden; }
.be-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.be-video-empty {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem;
  padding: 2.5rem 1rem; background: #F4F4F5; border-radius: 8px; color: #A1A1AA; font-size: 0.75rem;
}
.be-video-empty svg { width: 40px; height: 40px; flex-shrink: 0; }
.be-separator { border: none; border-top: 1px solid #F2F3F6; }
.be-spacer { width: 100%; }
.be-list { padding-left: 1.25rem; list-style-position: outside; }
ol.be-list { list-style-type: decimal; }
ul.be-list:not(.be-list-custom-marker) { list-style-type: disc; }
.be-list li { outline: none; margin-bottom: 0.35rem; }
.be-list.be-list-custom-marker { list-style: none; padding-left: 0; }
.be-list.be-list-custom-marker li { display: flex; align-items: flex-start; gap: 0.4rem; }
.be-list-marker { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; color: var(--bx-primary); line-height: 1.5; }
.be-list-marker svg { width: 14px; height: 14px; flex-shrink: 0; }
.be-list-marker-num { font-weight: 600; font-size: 0.9em; }
.be-list-item-text { flex: 1; min-width: 0; }
.be-social { display: flex; gap: 0.6rem; flex-wrap: wrap; width: 100%; }
.be-social a {
  width: 34px; height: 34px; border-radius: 999px; background: #18181B; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.be-social svg { width: 15px; height: 15px; }
.be-gallery { display: grid; gap: 0.6rem; }
.be-gallery img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }
.be-carousel { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
.be-carousel img { scroll-snap-align: start; flex: 0 0 240px; height: 150px; object-fit: cover; border-radius: 8px; }

.be-carousel-arrows-wrap { position: relative; padding: 0 2rem; }
.be-carousel-arrows-wrap .be-carousel-arrow { width: 24px; height: 24px; }
.be-carousel-arrows-wrap .be-carousel-arrow svg { width: 11px; height: 11px; }
.be-carousel-arrows-track { padding-bottom: 0; scrollbar-width: none; }
.be-carousel-arrows-track::-webkit-scrollbar { display: none; }

.be-carousel-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.be-carousel-marquee-track {
  display: flex; gap: 0.75rem; width: max-content;
  animation: be-carousel-marquee-scroll var(--carousel-marquee-duration, 20s) linear infinite;
}
.be-carousel-marquee-track img { flex: 0 0 240px; height: 150px; object-fit: cover; border-radius: 8px; }
.be-carousel-marquee:hover .be-carousel-marquee-track { animation-play-state: paused; }
@keyframes be-carousel-marquee-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.be-testimonials { display: grid; gap: 1rem; }
.be-testimonial-card { border: 1px solid var(--border-card); border-radius: 10px; padding: 1.1rem; }
.be-testimonial-quote { font-size: 0.8125rem; color: #3F3F46; outline: none; margin-bottom: 0.75rem; line-height: 1.55; }
.be-testimonial-person { display: flex; align-items: center; gap: 0.6rem; }
.be-testimonial-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #E4E4E7; flex-shrink: 0; }
.be-testimonial-name { font-size: 0.8125rem; font-weight: 700; color: #18181B; }
.be-testimonial-role { font-size: 0.6875rem; color: #A1A1AA; }

.be-testimonials-carousel { position: relative; padding: 0 2.5rem; }
.be-testimonials-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.be-testimonials-track .be-testimonial-card { scroll-snap-align: start; flex: 0 0 calc((100% - (var(--carousel-visible, 1) - 1) * 1rem) / var(--carousel-visible, 1)); }
.be-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-card); color: #52525B; cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.be-carousel-arrow svg { width: 16px; height: 16px; }
.be-carousel-arrow-prev { left: 0; }
.be-carousel-arrow-prev svg { transform: rotate(90deg); }
.be-carousel-arrow-next { right: 0; }
.be-carousel-arrow-next svg { transform: rotate(-90deg); }
.be-carousel-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.85rem; }
.be-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: #D4D4D8; border: none; padding: 0; cursor: pointer; }
.be-carousel-dot.active { background: var(--bx-primary, #183b54); }

.be-testimonials-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.be-testimonials-marquee-track {
  display: flex; gap: 1rem; width: max-content;
  animation: be-marquee-scroll var(--marquee-duration, 20s) linear infinite;
}
.be-testimonials-marquee-track .be-testimonial-card { flex: 0 0 260px; }
.be-testimonials-marquee:hover .be-testimonials-marquee-track { animation-play-state: paused; }
@keyframes be-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.be-form-preview { border: 1px solid var(--border-card); border-radius: 10px; padding: 1.25rem; max-width: 420px; }
.be-form-preview-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.9rem; }
.be-form-preview .form-field-preview-line,
.be-form-preview .form-field-preview-box { pointer-events: none; margin-bottom: 0.8rem; }
.be-map-embed { width: 100%; height: 260px; border: 0; border-radius: 8px; }
.be-map-empty {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem;
  height: 200px; background: #F4F4F5; border-radius: 8px; color: #A1A1AA; font-size: 0.75rem; text-align: center; padding: 1rem;
}
.be-map-empty svg { width: 40px; height: 40px; flex-shrink: 0; }
.be-custom-html { min-height: 24px; }

/* -------------------- Inspector -------------------- */

.inspector-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-card);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.inspector-editing-label { font-size: 0.75rem; font-weight: 700; color: #A1A1AA; }

.builder-breadcrumb-back {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #3F3F46; font-weight: 700; font-size: 0.8125rem;
}
.builder-breadcrumb-back svg { width: 15px; height: 15px; }
.builder-breadcrumb-back:hover { color: var(--primary-blue); }

.inspector-tabs { display: flex; gap: 0.25rem; position: sticky; top: 45px; z-index: 2; background: #fff; padding: 0.6rem; margin: 0.65rem 0.65rem 0; border: 1px solid var(--border-card); border-radius: 10px; }
.inspector-tab {
  flex: 1;
  padding: 0.5rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #71717A;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.inspector-tab:hover { color: #3F3F46; }
.inspector-tab.active { color: #18181B; background: #ebf4ff; }

.inspector-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; scrollbar-gutter: stable; flex: 1; min-height: 0; }
.inspector-empty { padding: 2rem 1.25rem; text-align: center; color: #A1A1AA; font-size: 0.8125rem; }
.inspector-empty svg { width: 28px; height: 28px; color: #D4D4D8; margin: 0 auto 0.6rem; }

.inspector-field { display: flex; flex-direction: column; gap: 0.35rem; }
.inspector-field-label,
.inspector-field-label-plain {
  font-size: 0.8125rem; font-weight: 400; color: #333333; text-transform: none; letter-spacing: normal;
  display: flex; align-items: center; justify-content: space-between;
}
.inspector-row { display: flex; gap: 0.5rem; }
.inspector-row .inspector-field { flex: 1; min-width: 0; }
.inspector-input, .inspector-select, .inspector-textarea {
  width: 100%; border: 1px solid var(--border-light); border-radius: 8px; padding: 0.45rem 0.6rem;
  font-size: 0.8125rem; background: #fff; color: #18181B;
}
.url-slug-field {
  display: flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--border-light); border-radius: 8px; padding: 0 0.6rem;
  background: #fff;
}
.url-slug-field:focus-within { border-color: var(--primary-blue); }
.url-slug-prefix, .url-slug-suffix { font-size: 0.75rem; color: #A1A1AA; white-space: nowrap; flex-shrink: 0; }
.url-slug-input { flex: 1; min-width: 0; border: none; padding: 0.5rem 0; font-size: 0.8125rem; background: transparent; color: #18181B; }
.url-slug-input:focus { outline: none; }
.url-slug-status { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.url-slug-status svg { width: 14px; height: 14px; }
.url-slug-status.is-available svg { color: #16A34A; }
.url-slug-status.is-taken svg { color: #DC2626; }
.url-slug-error { color: #DC2626 !important; }

.info-tooltip-wrap { position: relative; display: inline-flex; }
.info-tooltip-trigger {
  width: 15px; height: 15px; padding: 0; border: none; background: none; cursor: help;
  display: flex; align-items: center; justify-content: center; color: #A1A1AA; flex-shrink: 0;
}
.info-tooltip-trigger svg { width: 15px; height: 15px; }
.info-tooltip-trigger:hover, .info-tooltip-trigger:focus-visible { color: #71717A; }
.info-tooltip-bubble {
  position: absolute; top: calc(100% + 8px); right: -6px; z-index: 30;
  width: 210px; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: #18181B; color: #fff; font-size: 0.6875rem; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: normal; text-align: left;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 8px 24px rgba(16,24,40,0.16);
}
.info-tooltip-bubble::after {
  content: ''; position: absolute; bottom: 100%; right: 10px;
  border: 5px solid transparent; border-bottom-color: #18181B;
}
.info-tooltip-wrap:hover .info-tooltip-bubble,
.info-tooltip-trigger:focus-visible + .info-tooltip-bubble { opacity: 1; pointer-events: auto; transform: translateY(0); }
.info-tooltip-link { color: #93C5FD; text-decoration: underline; }
.info-tooltip-link:hover { color: #BFDBFE; }
.inspector-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 13px 13px;
  cursor: pointer;
}
.inspector-textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.inspector-textarea-plain { min-height: 64px; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.8125rem; }
.inspector-input:focus, .inspector-select:focus, .inspector-textarea:focus { outline: none; border-color: var(--primary-blue); }
.inspector-color-row { display: flex; align-items: center; gap: 0.5rem; }
#builder-elements-panel input[type="color"] { width: 30px; height: 30px; border: 1px solid var(--border-light); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; flex-shrink: 0; }
.inspector-field-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; }
.inspector-field-row .inspector-field-label { margin: 0; }
.overlay-color-controls { display: flex; align-items: center; gap: 0.4rem; }
.overlay-color-remove {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px;
  border: none; border-radius: 999px;
  background: #F4F4F5; color: #71717A; cursor: pointer;
}
.overlay-color-remove svg { width: 10px; height: 10px; }
.overlay-color-remove:hover { background: #E4E4E7; color: #18181B; }

.color-alpha-field { position: relative; }
.color-alpha-swatch {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--border-light); border-radius: 7px; padding: 0; cursor: pointer;
  background-color: #fff;
}
.color-alpha-swatch.is-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-card);
}
.color-alpha-swatch-empty-icon {
  font-size: 15px; line-height: 1; color: #A1A1AA; font-weight: 600;
}
.color-alpha-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 0.6rem;
  width: 180px; padding: 0.75rem;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,24,40,0.16);
}
.color-alpha-top-row { display: flex; gap: 0.4rem; }
.color-alpha-native { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border-light); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; }
.color-alpha-hex {
  flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border-light); border-radius: 7px;
  padding: 0 0.5rem; font-size: 0.8125rem; font-family: ui-monospace, monospace; text-transform: uppercase;
  color: #18181B; background: #fff;
}
.color-alpha-hex:focus { outline: none; border-color: var(--primary-blue); }
.color-alpha-range-row { display: flex; flex-direction: column; gap: 0.35rem; }
.color-alpha-range-label { font-size: 0.75rem; color: #71717A; }
.color-alpha-range { width: 100%; }

.bg-carousel-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.bg-carousel-thumb {
  position: relative;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
}
.bg-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-carousel-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-light);
  color: #A1A1AA; cursor: pointer;
}
.bg-carousel-thumb-empty:hover { border-color: var(--primary-blue); background: #F4F8FC; color: var(--primary-blue); }
.bg-carousel-thumb-empty svg { width: 16px; height: 16px; }
.bg-carousel-thumb-empty input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bg-carousel-thumb-remove {
  position: absolute; top: 2px; right: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: none; border-radius: 999px;
  background: rgba(24,24,27,0.65); color: #fff; cursor: pointer;
}
.bg-carousel-thumb-remove svg { width: 8px; height: 8px; }
.bg-carousel-thumb-remove:hover { background: rgba(24,24,27,0.85); }

.menu-order-list { display: flex; flex-direction: column; gap: 0.4rem; }
.menu-order-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: #fff;
}
.menu-order-row .inspector-input { flex: 1; min-width: 0; }
.menu-order-row .el-drag-handle {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px;
  color: #A1A1AA; background: none; border: none; padding: 0; cursor: grab;
}
.menu-order-row .el-drag-handle svg { width: 15px; height: 15px; }
.menu-order-row .el-drag-handle:active { cursor: grabbing; }
.menu-order-row.sortable-ghost { opacity: 0.4; background: #EBF4FF; }
.menu-order-row-delete {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px;
  color: #A1A1AA; background: none; border: none; padding: 0; cursor: pointer;
}
.menu-order-row-delete svg { width: 15px; height: 15px; }
.menu-order-row-delete:hover { color: #DC2626; }
.inspector-segmented { display: flex; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.inspector-segmented button {
  flex: 1; padding: 0.4rem 0.3rem; background: #fff; border: none; border-left: 1px solid var(--border-light);
  color: #71717A; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; line-height: 1.2;
}
.inspector-segmented button:first-child { border-left: none; }
.inspector-segmented button svg { width: 14px; height: 14px; }
.inspector-segmented button.active { background: var(--primary-blue); color: #fff; }
.inspector-range-row { display: flex; align-items: center; gap: 0.6rem; }
.inspector-range-row input[type="range"] { flex: 1; }
#builder-elements-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #F3F3F3;
  outline: none;
  cursor: pointer;
}
#builder-elements-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #F3F3F3;
}
#builder-elements-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #ebf4ff;
  border: 1px solid #C7D9F0;
  box-shadow: 0 1px 2px rgba(16,24,40,0.15);
  cursor: pointer;
}
#builder-elements-panel input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #F3F3F3;
}
#builder-elements-panel input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ebf4ff;
  border: 1px solid #C7D9F0;
  box-shadow: 0 1px 2px rgba(16,24,40,0.15);
  cursor: pointer;
}
.inspector-range-value { font-size: 0.75rem; color: #71717A; width: 44px; text-align: right; flex-shrink: 0; }
.b2b-range-row { display: flex; align-items: center; gap: 0.85rem; }
.b2b-range-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #E4E4E7;
  outline: none;
  cursor: pointer;
}
.b2b-range-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #E4E4E7; }
.b2b-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--primary-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,0.25);
  cursor: pointer;
}
.b2b-range-slider::-moz-range-track { height: 4px; border-radius: 999px; background: #E4E4E7; }
.b2b-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,0.25);
  cursor: pointer;
}
.b2b-range-value { font-size: 0.8125rem; font-weight: 600; color: #18181B; width: 60px; text-align: right; flex-shrink: 0; }
body[data-theme="dark"] .b2b-range-slider,
body[data-theme="dark"] .b2b-range-slider::-webkit-slider-runnable-track,
body[data-theme="dark"] .b2b-range-slider::-moz-range-track { background: #404040 !important; }
body[data-theme="dark"] .b2b-range-value { color: #FFFFFF !important; }
.inspector-section-title { font-size: 0.75rem; font-weight: 700; color: #18181B; padding-top: 0.3rem; border-top: 1px solid var(--border-card); margin-top: 0.2rem; }
.inspector-section-title:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.inspector-section-title-row { display: flex; align-items: center; justify-content: space-between; }

.inspector-accordion-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  user-select: none;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.inspector-accordion-title:hover { color: var(--primary-blue); }
.inspector-accordion-chevron {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: #A1A1AA;
  transition: transform .15s ease;
}
.inspector-accordion-chevron svg { width: 13px; height: 13px; }
.inspector-accordion-title:not(.is-collapsed) .inspector-accordion-chevron { transform: rotate(180deg); }
.inspector-accordion-body { display: flex; flex-direction: column; gap: 1rem; }
.inspector-accordion-title.is-collapsed + .inspector-accordion-body { display: none; }

.margin-sync-toggle {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; color: #A1A1AA; background: none; border: none; cursor: pointer;
}
.margin-sync-toggle svg { width: 13px; height: 13px; }
.margin-sync-toggle:hover { background: #F4F4F5; color: #52525B; }
.margin-sync-toggle.active { background: var(--primary-blue); color: #fff; }
.margin-sync-toggle.active:hover { background: var(--primary-blue-hover); }
.inspector-hint { font-size: 0.6875rem; color: #A1A1AA; line-height: 1.4; }

.inspector-list-item { border: 1px solid var(--border-card); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.inspector-list-item-remove { position: absolute; top: 0.4rem; right: 0.4rem; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #A1A1AA; background: none; border: none; cursor: pointer; border-radius: 5px; z-index: 1; }
.inspector-list-item-remove svg { width: 13px; height: 13px; }
.inspector-list-item-remove:hover { background: #FEE2E2; color: #B91C1C; }
#list-items-editor { display: flex; flex-direction: column; gap: 0.5rem; }
.inspector-list-item-row { display: flex; align-items: center; gap: 0.4rem; }
.inspector-list-item-row .inspector-input, .inspector-list-item-row .inspector-select { flex: 1; min-width: 0; }
.inspector-list-item-remove-inline {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; color: #A1A1AA; background: none; border: none; cursor: pointer; border-radius: 6px;
}
.inspector-list-item-remove-inline svg { width: 13px; height: 13px; }
.inspector-list-item-remove-inline:hover { background: #FEE2E2; color: #B91C1C; }

.image-upload-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  height: 96px;
  border: 1.5px dashed var(--border-light);
  border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.image-upload-zone:hover, .image-upload-zone.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.image-upload-zone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.image-upload-zone-plus {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-light); color: var(--primary-blue);
}
.image-upload-zone-plus svg { width: 13px; height: 13px; }
.image-upload-zone-text { font-size: 0.6875rem; color: #A1A1AA; text-align: center; padding: 0 0.6rem; line-height: 1.3; }
.image-upload-zone-preview { width: 100%; height: 100%; object-fit: cover; }

.floorplan-upload-row { display: flex; gap: 0.75rem; align-items: stretch; }
.floorplan-upload-row .header-logo-picker-wrap { flex: 1; min-width: 0; }
.floorplan-upload-zone { height: 110px; }
.floorplan-outline-preview {
  flex: 1; min-width: 0; height: 110px;
  border: 1.5px solid var(--border-light); border-radius: 10px;
  background: #FAFAFA;
  display: flex; align-items: center; justify-content: center; padding: 0.5rem;
}
.floorplan-outline-preview svg { width: 100%; height: 100%; }
.floorplan-outline-preview polyline {
  fill: none; stroke: var(--primary-blue); stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.floorplan-outline-loading, .floorplan-outline-empty { font-size: 0.6875rem; color: #A1A1AA; text-align: center; padding: 0 0.5rem; }
.floorplan-status { font-size: 0.75rem; color: #71717A; margin-top: 0.5rem; }
body[data-theme="dark"] .floorplan-outline-preview { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .floorplan-status { color: #A1A1AA !important; }

.header-logo-picker-wrap { position: relative; }
.header-logo-picker {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; height: 90px;
  border: 1.5px dashed var(--border-light); border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.header-logo-picker:hover, .header-logo-picker.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.header-logo-picker.has-image {
  border-style: solid; border-color: var(--border-light);
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.header-logo-picker-preview { max-width: 100%; max-height: 100%; object-fit: contain; }
.header-logo-picker-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  background: rgba(24,24,27,0.55); color: #fff; font-size: 0.6875rem; font-weight: 700;
  opacity: 0; transition: opacity .15s ease;
}
.header-logo-picker-overlay svg { width: 18px; height: 18px; }
.header-logo-picker:hover .header-logo-picker-overlay { opacity: 1; }
.image-upload-zone:hover .header-logo-picker-overlay { opacity: 1; }
.header-logo-picker-remove {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,24,27,0.75); color: #fff; border: none; cursor: pointer;
}
.header-logo-picker-remove svg { width: 12px; height: 12px; }
.header-logo-picker-remove:hover { background: rgba(24,24,27,0.92); }

/* Logotipo com proporção fixa (8:5) — mesmo formato em toda a plataforma */
.logo-crop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
  transform: scale(var(--logo-scale, 1)) translate(var(--logo-x, 0%), var(--logo-y, 0%));
}

.profile-form-top { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-form-top-image { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.profile-form-top-avatar { flex-shrink: 0; width: 130px; }
.profile-form-top-cover { flex-shrink: 0; width: 208px; }
.profile-logo-hint { font-size: 0.75rem; color: #A1A1AA; margin-top: 0.5rem; }
body[data-theme="dark"] .profile-logo-hint { color: #71717A !important; }
.profile-form-top-fields { display: flex; flex-direction: column; gap: 1rem; }

.profile-logo-picker {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; aspect-ratio: 8 / 5;
  border: 1.5px dashed var(--border-light); border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.profile-logo-picker:hover, .profile-logo-picker.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.profile-logo-picker.has-image {
  border-style: solid; border-color: var(--border-light);
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.profile-logo-adjust-frame {
  width: 100%; aspect-ratio: 8 / 5;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.profile-logo-adjust-frame.is-dragging { cursor: grabbing; }

.avatar-crop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
  transform: scale(var(--avatar-scale, 1)) translate(var(--avatar-x, 0%), var(--avatar-y, 0%));
}

.profile-avatar-picker {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  width: 100%; aspect-ratio: 1;
  border: 1.5px dashed var(--border-light); border-radius: 14px;
  background: #FAFAFA;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.profile-avatar-picker:hover, .profile-avatar-picker.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.profile-avatar-picker.has-image {
  border-style: solid; border-color: var(--border-light);
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.profile-avatar-adjust-frame {
  width: 100%; aspect-ratio: 1;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.profile-avatar-adjust-frame.is-dragging { cursor: grabbing; }

/* Foto de perfil no cabeçalho: quadrada com cantos arredondados sempre
   (nunca a bolinha com iniciais) — mostra a foto, ou um ícone genérico de
   perfil quando não há foto definida. */
#topbar-user-avatar, #profile-dropdown-avatar {
  border-radius: 10px !important;
  background: #F4F4F5;
  overflow: hidden;
}
#topbar-user-avatar svg, #profile-dropdown-avatar svg { width: 58%; height: 58%; color: #A1A1AA; }
body[data-theme="dark"] #topbar-user-avatar,
body[data-theme="dark"] #profile-dropdown-avatar { background: #333333 !important; }
.avatar-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.b2b-avatar-square {
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F4F4F5;
  flex-shrink: 0;
}
.b2b-avatar-square img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b2b-avatar-square svg { width: 58%; height: 58%; color: #A1A1AA; }
body[data-theme="dark"] .b2b-avatar-square { background: #333333 !important; }

.logo-adjust-modal-card { max-width: 480px; position: relative; }
.logo-adjust-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F4F4F5; color: #52525B; border: none; cursor: pointer;
}
.logo-adjust-modal-close svg { width: 13px; height: 13px; }
.logo-adjust-modal-close:hover { background: #E4E4E7; }
.logo-adjust-modal-frame {
  width: 100%; height: 160px;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.logo-adjust-modal-frame.is-dragging { cursor: grabbing; }
.logo-adjust-modal-img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; pointer-events: none; }
.logo-adjust-modal-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.logo-adjust-modal-zoom-label { font-size: 0.8125rem; font-weight: 700; color: #3F3F46; flex-shrink: 0; }
.logo-adjust-modal-zoom-btn {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #F4F4F5; border: none; color: #3F3F46; font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.logo-adjust-modal-zoom-btn:hover { background: #E4E4E7; }
.logo-adjust-modal-range { flex: 1; min-width: 80px; }
.inspector-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  border: 1px dashed var(--border-light); border-radius: 8px; padding: 0.5rem; color: var(--primary-blue);
  font-size: 0.75rem; font-weight: 700; background: #F8FAFC; cursor: pointer;
}
.inspector-add-btn:hover { background: #EBF4FF; }
.inspector-add-btn svg { width: 13px; height: 13px; }
.inspector-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.inspector-toggle-row .inspector-field-label { margin: 0; }

/* -------------------- Drawer de produto: seções e campos extras -------------------- */

.form-section-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; color: #18181B;
  padding-top: 0.6rem; border-top: 1px solid var(--border-light);
}
.form-section-header svg { width: 17px; height: 17px; color: #71717A; flex-shrink: 0; }

.field-hint { font-size: 0.75rem; color: #A1A1AA; margin: -0.2rem 0 0.5rem; }

.weekday-toggle-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.weekday-toggle-chip {
  min-width: 42px; height: 38px; padding: 0 0.5rem; border-radius: 8px;
  border: 1px solid var(--border-light); background: #fff; color: #3F3F46;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.weekday-toggle-chip.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.weekday-toggle-chip:hover:not(.active) { border-color: var(--primary-blue); color: var(--primary-blue); }

.product-time-row { display: flex; align-items: center; gap: 0.6rem; }
.product-time-row .field-input { flex: 1; min-width: 0; }
.product-time-row span { font-size: 0.8125rem; color: #71717A; flex-shrink: 0; }

body[data-theme="dark"] .form-section-header { color: #FFFFFF !important; border-top-color: #404040 !important; }
body[data-theme="dark"] .weekday-toggle-chip { background: #333333 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .weekday-toggle-chip.active { background: var(--primary-blue) !important; border-color: var(--primary-blue) !important; color: #fff !important; }


.builder-el-block-preview { display: flex; gap: 2px; width: 30px; height: 17px; }
.builder-el-block-preview span { background: #CBD8E5; border-radius: 2px; }

/* -------------------- Dark mode -------------------- */

body[data-theme="dark"] .builder-wrap { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .builder-toolbar { background: #1c1c1c !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .builder-page-name { color: #FFFFFF !important; }
body[data-theme="dark"] .builder-page-name:hover { background-color: #333333 !important; }
body[data-theme="dark"] .builder-page-name:focus { background-color: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .kanban-list-dropdown-item.active { background: #333333 !important; }
body[data-theme="dark"] .builder-device-toggle { background: #333333 !important; }
body[data-theme="dark"] .builder-device-btn { color: #A1A1AA !important; }
body[data-theme="dark"] .builder-device-btn.active { background: #4b4b4b !important; color: #fff !important; }
body[data-theme="dark"] .builder-tool-btn { color: #A1A1AA !important; }
body[data-theme="dark"] .builder-tool-btn:hover:not(:disabled) { background: #333333 !important; }
body[data-theme="dark"] .builder-toolbar-divider { background: #404040 !important; }
body[data-theme="dark"] .builder-elements-panel { background: #1c1c1c !important; border-right-color: #404040 !important; }
body[data-theme="dark"] .builder-panel-tabs { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .builder-panel-tab:hover { color: #D4D4D8 !important; }
body[data-theme="dark"] .builder-panel-tab.active { color: #18181B !important; background: #ebf4ff !important; }
body[data-theme="dark"] .builder-el-item { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .builder-el-item span { color: #D4D4D8 !important; }
body[data-theme="dark"] .builder-el-item svg { color: #A1A1AA !important; }
body[data-theme="dark"] .builder-el-item:hover { border-color: #ebf4ff !important; background: #333333 !important; }
body[data-theme="dark"] .builder-canvas-viewport { background: #1c1c1c !important; }
body[data-theme="dark"] .builder-canvas { background: #252525 !important; box-shadow: 0 0 0 1px #404040 !important; }
body[data-theme="dark"] .builder-fixed-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .inspector-header { background: #1c1c1c !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .inspector-tabs { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .inspector-tab:hover { color: #D4D4D8 !important; }
body[data-theme="dark"] .inspector-tab.active { color: #18181B !important; background: #ebf4ff !important; }
body[data-theme="dark"] .builder-breadcrumb-back { color: #D4D4D8 !important; }
body[data-theme="dark"] .builder-breadcrumb-back:hover { color: #ebf4ff !important; }
body[data-theme="dark"] .inspector-input, body[data-theme="dark"] .inspector-select, body[data-theme="dark"] .inspector-textarea { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .url-slug-field { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .url-slug-input { color: #FFFFFF !important; }
body[data-theme="dark"] .inspector-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.6rem center !important; background-size: 13px 13px !important; }
body[data-theme="dark"] .inspector-segmented { border-color: #404040 !important; }
body[data-theme="dark"] .inspector-segmented button { background: #252525 !important; border-left-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .inspector-list-item { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .menu-order-row { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .menu-order-row .el-drag-handle { color: #71717A !important; }
body[data-theme="dark"] .image-upload-zone { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .image-upload-zone:hover, body[data-theme="dark"] .image-upload-zone.is-dragover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .image-upload-zone-plus { background: #333333 !important; border-color: #404040 !important; color: #ebf4ff !important; }
body[data-theme="dark"] .header-logo-picker { border-color: #404040 !important; background: #1c1c1c !important; }
body[data-theme="dark"] .header-logo-picker:hover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .profile-logo-picker { border-color: #404040 !important; background: #1c1c1c !important; }
body[data-theme="dark"] .profile-logo-picker:hover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .profile-logo-adjust-frame { border-color: #404040 !important; }
body[data-theme="dark"] .profile-avatar-picker { border-color: #404040 !important; background: #1c1c1c !important; }
body[data-theme="dark"] .profile-avatar-picker:hover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .profile-avatar-adjust-frame { border-color: #404040 !important; }
body[data-theme="dark"] .logo-adjust-modal-frame { border-color: #404040 !important; }
body[data-theme="dark"] .logo-adjust-modal-zoom-label { color: #D4D4D8 !important; }
body[data-theme="dark"] .logo-adjust-modal-close { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .inspector-add-btn { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .inspector-section-title, body[data-theme="dark"] .inspector-field-label { color: #D4D4D8 !important; }
body[data-theme="dark"] .inspector-accordion-chevron { color: #71717A !important; }
body[data-theme="dark"] .margin-sync-toggle:hover { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .margin-sync-toggle.active { background: #ebf4ff !important; color: #122c3f !important; }
body[data-theme="dark"] .be-heading, body[data-theme="dark"] .be-text { color: #FFFFFF !important; }
body[data-theme="dark"] .builder-narrow-notice { background: #3f2d0a !important; border-color: #6b4e0f !important; color: #FDE68A !important; }

/* ==========================================================================
   Meu Trabalho — Quadro Kanban
   ========================================================================== */

.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 1rem;
  justify-content: start;
  align-items: start;
}

.kanban-list {
  background: var(--bg-light);
  border-radius: var(--radius-card);
  min-width: 0;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kanban-list-header { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.25rem; cursor: grab; }
.kanban-list-header:active { cursor: grabbing; }
.kanban-list-ghost { opacity: 0.4; }
.kanban-list-title { font-size: 0.875rem; font-weight: 700; color: #18181B; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; border-radius: 4px; }
.kanban-list-title:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.kanban-list-title-input {
  flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 700; color: #18181B;
  border: 1px solid var(--primary-blue); border-radius: 6px; padding: 0.15rem 0.4rem;
  background: #fff; font-family: inherit;
}
.kanban-list-title-input:focus { outline: none; }
.kanban-list-count { font-size: 0.875rem; font-weight: 700; color: #18181B; background: transparent; border-radius: 0; padding: 0; flex-shrink: 0; }

.kanban-list-menu-wrap { position: relative; flex-shrink: 0; }
.kanban-list-menu-btn {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  border: none; background: transparent; color: #71717A;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.kanban-list-menu-btn:hover { background: #E4E4E7; color: #18181B; }
.kanban-list-menu-btn svg { width: 15px; height: 15px; }

.kanban-list-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  width: 195px; padding: 0.4rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.kanban-list-dropdown-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.6rem; border-radius: 7px; border: none; background: transparent;
  font-size: 0.8125rem; font-weight: 500; color: #18181B; text-align: left; cursor: pointer;
  transition: background-color .15s ease;
}
.kanban-list-dropdown-item:hover { background: #F4F4F5; }
.kanban-list-dropdown-item-danger { color: #B91C1C; }
.kanban-list-dropdown-item-danger:hover { background: #FEE2E2; }

#chat-attach-dropdown { width: 260px; max-height: 320px; overflow-y: auto; }
.chat-attach-form-item {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer;
  transition: background-color .15s ease;
}
.chat-attach-form-item:hover { background: #F4F4F5; }
.chat-attach-form-item-title { font-size: 0.8125rem; font-weight: 600; color: #18181B; }
.chat-attach-form-item-meta { font-size: 0.75rem; color: #71717A; }
.chat-attach-form-empty { font-size: 0.8125rem; color: #71717A; text-align: center; padding: 0.75rem 0.5rem; }

.kanban-color-picker-back {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.5rem 0.6rem; border: none; background: transparent; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: #71717A;
}
.kanban-color-picker-back:hover { color: #18181B; }
.kanban-color-picker-back svg { width: 13px; height: 13px; }

.kanban-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; padding: 0.3rem 0.5rem 0.5rem; }
.kanban-color-dot {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border-light);
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.kanban-color-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary-blue); }

.kanban-list-tasks { display: flex; flex-direction: column; gap: 0.5rem; min-height: 8px; }

.kanban-task {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  cursor: grab;
}
.kanban-task:active { cursor: grabbing; }
.kanban-task-ghost { opacity: 0.4; }

.kanban-task-check { width: 18px; height: 18px; border: none; background: transparent; padding: 0; color: #D4D4D8; flex-shrink: 0; cursor: pointer; margin-top: 0.1rem; }
.kanban-task-check svg { width: 100%; height: 100%; }
.kanban-task.is-done .kanban-task-check { color: #22C55E; }

.kanban-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.kanban-task-text { font-size: 0.8125rem; color: #18181B; line-height: 1.4; word-break: break-word; }
.kanban-task.is-done .kanban-task-text { text-decoration: line-through; color: #A1A1AA; }
.kanban-task-due {
  align-self: flex-start;
  font-size: 0.6875rem; font-weight: 600; color: #92400E;
  background: #FEF3C7; border-radius: 999px; padding: 0.1rem 0.5rem;
}
.kanban-task.is-done .kanban-task-due { background: #F4F4F5; color: #A1A1AA; }

.kanban-task-remove { width: 18px; height: 18px; border: none; background: transparent; color: transparent; flex-shrink: 0; cursor: pointer; padding: 0; transition: color .15s ease; }
.kanban-task:hover .kanban-task-remove { color: #A1A1AA; }
.kanban-task-remove:hover { color: #B91C1C !important; }
.kanban-task-remove svg { width: 100%; height: 100%; }

.kanban-add-task-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.kanban-add-task-input {
  width: 100%;
  resize: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: #18181B;
  background: #fff;
  min-height: 2.3rem;
}
.kanban-add-task-input:focus { outline: none; border-color: var(--primary-blue); }
.kanban-add-task-actions { display: flex; align-items: center; gap: 0.5rem; }
.kanban-add-task-confirm { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
.kanban-add-task-confirm svg { width: 15px; height: 15px; }

.kanban-add-list-btn {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-card);
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #52525B;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.kanban-add-list-btn:hover { background: rgba(0, 0, 0, 0.08); }
.kanban-add-list-btn svg { width: 15px; height: 15px; }

.kanban-list-new { background: var(--bg-light); }
.kanban-add-list-cancel {
  width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: #71717A;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kanban-add-list-cancel:hover { background: #E4E4E7; }
.kanban-add-list-cancel svg { width: 15px; height: 15px; }

body[data-theme="dark"] .kanban-list, body[data-theme="dark"] .kanban-list-new { background: #1c1c1c !important; }
body[data-theme="dark"] .kanban-list-title { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-title-input { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-count { background: transparent !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-menu-btn:hover { background: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-dropdown { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .kanban-list-dropdown-item { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-dropdown-item:hover { background: #333333 !important; }
body[data-theme="dark"] .kanban-list-dropdown-item-danger:hover { background: rgba(185, 28, 28, 0.25) !important; }
body[data-theme="dark"] .chat-attach-form-item:hover { background: #333333 !important; }
body[data-theme="dark"] .chat-attach-form-item-title { color: #FFFFFF !important; }
body[data-theme="dark"] .chat-attach-form-item-meta,
body[data-theme="dark"] .chat-attach-form-empty { color: #A1A1AA !important; }
body[data-theme="dark"] .kanban-color-picker-back:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-task { background: #333333 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25) !important; }
body[data-theme="dark"] .kanban-task-text { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-add-task-input { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-add-list-btn { background: rgba(255, 255, 255, 0.06) !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .kanban-add-list-btn:hover { background: rgba(255, 255, 255, 0.1) !important; }
body[data-theme="dark"] .kanban-add-list-cancel:hover { background: #404040 !important; }

/* -------------------- Drawer da tarefa -------------------- */

.task-drawer-list-label { font-size: 0.75rem; font-weight: 600; color: #71717A; margin: 0 0 0.3rem; }
.task-drawer-title {
  font-size: 1.125rem; font-weight: 700; color: #18181B; line-height: 1.35; margin: 0;
  cursor: text; border-radius: 4px;
}
.task-drawer-title:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.task-drawer-title-input {
  width: 100%; font-size: 1.125rem; font-weight: 700; color: #18181B; line-height: 1.35;
  border: 1px solid var(--primary-blue); border-radius: 6px; padding: 0.1rem 0.4rem;
  margin: -0.1rem 0 0 -0.4rem; background: #fff; font-family: inherit;
}
.task-drawer-title-input:focus { outline: none; }

.task-drawer-dates-row { display: flex; gap: 1.25rem; }
.task-drawer-dates-row .task-drawer-field { flex: 1; min-width: 0; }
.task-drawer-created-value { font-size: 0.8125rem; color: #18181B; margin: 0; padding: 0.5rem 0; }

.task-drawer-field-label { display: block; font-size: 0.75rem; font-weight: 600; color: #71717A; margin-bottom: 0.4rem; }
.task-drawer-due-row { display: flex; align-items: center; gap: 0.6rem; }
.task-drawer-due-input {
  border: 1px solid var(--border-light); border-radius: 8px; padding: 0.5rem 0.65rem;
  font-family: inherit; font-size: 0.8125rem; color: #18181B; background: #fff;
}
.task-drawer-due-input:focus { outline: none; border-color: var(--primary-blue); }
.task-drawer-due-clear { border: none; background: transparent; color: #B91C1C; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0; }
.task-drawer-due-clear:hover { text-decoration: underline; }

.task-drawer-activity-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; color: #18181B;
  padding-top: 0.6rem; border-top: 1px solid var(--border-light);
}
.task-drawer-activity-header svg { width: 17px; height: 17px; color: #71717A; flex-shrink: 0; }

.task-drawer-comment-card { background: #fff; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.75rem 0.85rem; }
.task-drawer-comment-box { display: flex; flex-direction: column; gap: 0.5rem; }
.task-drawer-comment-input {
  width: 100%; resize: none; border: none; border-radius: 0;
  padding: 0; font-family: inherit; font-size: 0.8125rem; color: #18181B;
  background: transparent; min-height: 2.2rem;
}
.task-drawer-comment-input:focus { outline: none; }
.task-drawer-comment-actions { display: flex; justify-content: flex-end; margin-top: 0.2rem; padding-top: 0.5rem; border-top: 1px solid var(--border-light); }
.task-drawer-comment-actions .btn-primary { padding: 0.5rem 1.1rem; font-size: 0.8125rem; }

.task-drawer-activity-list { display: flex; flex-direction: column; gap: 1rem; }
.task-activity-empty { font-size: 0.8125rem; color: #A1A1AA; text-align: center; padding: 1rem 0; }
.task-activity-item { display: flex; align-items: flex-start; gap: 0.6rem; }
.task-activity-avatar {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary-gradient); color: #fff; font-size: 0.6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.task-activity-content { flex: 1; min-width: 0; }
.task-activity-line { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: #3F3F46; margin: 0; line-height: 1.5; }
.task-activity-line strong { color: #18181B; }
.task-activity-comment-text {
  font-size: 0.8125rem; color: #18181B; margin: 0.2rem 0 0; line-height: 1.5;
  white-space: pre-wrap;
}
.task-activity-time { font-size: 0.6875rem; color: #A1A1AA; margin: 0.3rem 0 0; }

.task-activity-comment-delete {
  border: none; background: none; padding: 0; margin: 0; color: #A1A1AA; cursor: pointer;
  display: inline-flex; align-items: center; opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.task-activity-item:hover .task-activity-comment-delete { opacity: 1; }
.task-activity-comment-delete:hover { color: #DC2626; }

body[data-theme="dark"] .task-drawer-title { color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-title-input { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-created-value { color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-due-input { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-activity-header { color: #FFFFFF !important; border-top-color: #404040 !important; }
body[data-theme="dark"] .task-drawer-comment-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .task-drawer-comment-input { color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-comment-actions { border-top-color: #404040 !important; }
body[data-theme="dark"] .task-activity-line { color: #D4D4D8 !important; }
body[data-theme="dark"] .task-activity-line strong { color: #FFFFFF !important; }
body[data-theme="dark"] .task-activity-comment-text { color: #FFFFFF !important; }

/* Compartilhar quadro */

.share-board-role-select { width: auto; flex-shrink: 0; min-width: 132px; }

.share-board-icon-btn { padding: 0.625rem; flex-shrink: 0; }
.share-board-icon-btn svg { width: 18px; height: 18px; display: block; }

.share-board-link-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  background: var(--bg-light);
  border-radius: var(--radius-control);
  margin-bottom: 1.25rem;
}
.share-board-link-icon { color: #71717A; flex-shrink: 0; margin-top: 0.1rem; }

.share-board-link-btn {
  border: none; background: transparent; padding: 0; margin-top: 0.15rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.share-board-link-btn:hover { color: var(--primary-blue-hover); }

.share-board-link-generated { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.share-board-link-generated .field-input { flex: 1; font-size: 0.8125rem; color: #71717A; }

.share-board-tabs { margin-bottom: 1rem; }

.share-board-member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
}
.share-board-member-row:last-child { border-bottom: none; }

.share-board-role-fixed { font-size: 0.8125rem; font-weight: 600; color: #71717A; flex-shrink: 0; }

body[data-theme="dark"] .share-board-link-row { background: #1c1c1c !important; }
body[data-theme="dark"] .share-board-member-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .share-board-link-generated .field-input { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* -------------------- Agenda: calendário + linha do tempo -------------------- */

.agenda-calendar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.agenda-left-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.agenda-mini-calendar { padding: 1.25rem; background-color: #F8F8F8; }
body[data-theme="dark"] .agenda-mini-calendar { background-color: #1c1c1c !important; }

.agenda-notif-list { display: flex; flex-direction: column; gap: 0.25rem; }

.agenda-notif-empty { font-size: 0.8125rem; color: #A1A1AA; padding: 0.5rem 0; }

.agenda-notif-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border: none; background: transparent; padding: 0.5rem 0.25rem; border-radius: 8px;
  text-align: left; cursor: pointer; width: 100%;
}
.agenda-notif-item:hover { background: var(--bg-light); }

.agenda-notif-icon {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.agenda-notif-icon svg { width: 14px; height: 14px; }
.agenda-notif-icon-bell { background: #EFF6FF; color: #2563EB; }
.agenda-notif-icon-gift { background: #FDF2F8; color: #DB2777; }

.agenda-notif-text { font-size: 0.8125rem; color: #3F3F46; line-height: 1.4; }
.agenda-notif-text strong { color: #18181B; }

body[data-theme="dark"] .agenda-notif-text { color: #D4D4D8 !important; }
body[data-theme="dark"] .agenda-notif-text strong { color: #FFFFFF !important; }
body[data-theme="dark"] .agenda-notif-item:hover { background: #1c1c1c !important; }

.mini-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.mini-cal-month-label { font-size: 0.875rem; font-weight: 700; color: #18181B; text-transform: capitalize; }
.mini-cal-month-label-btn {
  font-size: 0.875rem; font-weight: 700; color: #18181B; text-transform: capitalize;
  background: none; border: none; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 6px;
}
.mini-cal-month-label-btn:hover { background: #F4F4F5; }
.mini-cal-nav-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
  color: #71717A; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mini-cal-nav-btn:hover { background: #F4F4F5; color: #18181B; }
.mini-cal-nav-btn svg { width: 15px; height: 15px; }

.mini-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 0.6875rem; font-weight: 600; color: #A1A1AA; text-align: center;
  margin-bottom: 0.35rem;
}

.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.mini-cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none; background: transparent; border-radius: 8px;
  font-size: 0.8125rem; color: #3F3F46; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mini-cal-day:hover:not(:disabled) { background: #F4F4F5; }
.mini-cal-day.is-muted { color: #D4D4D8; cursor: default; }
.mini-cal-day.is-today { font-weight: 700; color: var(--primary-blue); }
.mini-cal-day.is-selected { background: var(--primary-blue); color: #fff; font-weight: 700; }
.mini-cal-day.is-selected:hover { background: var(--primary-blue-hover); }

.mini-cal-dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--primary-blue);
}
.mini-cal-day.is-selected .mini-cal-dot { background: #fff; }

.mini-cal-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.mini-cal-year-btn {
  border: none; background: transparent; border-radius: 8px;
  font-size: 0.8125rem; color: #3F3F46; cursor: pointer; padding: 0.6rem 0;
  display: flex; align-items: center; justify-content: center;
}
.mini-cal-year-btn:hover { background: #F4F4F5; }
.mini-cal-year-btn.is-current { font-weight: 700; color: var(--primary-blue); }
.mini-cal-year-btn.is-selected { background: var(--primary-blue); color: #fff; font-weight: 700; }
.mini-cal-year-btn.is-selected:hover { background: var(--primary-blue-hover); }

.mini-cal-today-btn { width: 100%; justify-content: center; margin-top: 0.85rem; font-size: 0.8125rem; padding: 0.5rem; }

.agenda-timeline-panel { display: flex; flex-direction: column; min-width: 0; }

.agenda-timeline-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.85rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-light);
}
.agenda-timeline-header h3 { font-size: 0.9375rem; font-weight: 700; color: #18181B; text-transform: capitalize; }

.agenda-timeline-scroll { max-height: 620px; overflow-y: auto; }

.agenda-timeline-grid { display: flex; position: relative; }

.agenda-timeline-hours-col { flex: 0 0 52px; }
.agenda-timeline-hour-row { position: relative; box-sizing: border-box; }
.agenda-timeline-hour-row span {
  position: absolute; top: -0.55em; left: 0; font-size: 0.75rem; color: #A1A1AA; background: #fff;
}

.agenda-timeline-lines-col { flex: 1; position: relative; border-left: 1px solid var(--border-light); min-width: 0; }
.agenda-timeline-lines-col .agenda-timeline-hour-row {
  border-top: 1px solid var(--border-light); box-sizing: border-box; cursor: pointer;
}
.agenda-timeline-lines-col .agenda-timeline-hour-row:hover { background: var(--bg-light); }

.agenda-timeline-event {
  position: absolute; left: 6px; right: 6px; border-radius: 7px; padding: 0.3rem 0.55rem;
  color: #fff; overflow: hidden; cursor: pointer; z-index: 1;
  display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.25;
}
.agenda-timeline-event-title { font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-timeline-event-time { font-size: 0.6875rem; opacity: 0.85; }

.agenda-timeline-now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #E11D48; z-index: 2; pointer-events: none; }
.agenda-timeline-now-dot { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #E11D48; }

.agenda-event-delete-btn {
  margin-left: auto; border: none; background: none; color: #B91C1C;
  font-size: 0.8125rem; font-weight: 700; cursor: pointer; padding: 0.65rem 0.25rem;
}
.agenda-event-delete-btn:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .agenda-calendar-layout { grid-template-columns: 1fr; }
}

body[data-theme="dark"] .mini-cal-month-label { color: #FFFFFF !important; }
body[data-theme="dark"] .mini-cal-month-label-btn { color: #FFFFFF !important; }
body[data-theme="dark"] .mini-cal-month-label-btn:hover { background: #333333 !important; }
body[data-theme="dark"] .mini-cal-day { color: #D4D4D8 !important; }
body[data-theme="dark"] .mini-cal-day:hover:not(:disabled) { background: #333333 !important; }
body[data-theme="dark"] .mini-cal-day.is-muted { color: #52525B !important; }
body[data-theme="dark"] .mini-cal-year-btn { color: #D4D4D8 !important; }
body[data-theme="dark"] .mini-cal-year-btn:hover { background: #333333 !important; }
body[data-theme="dark"] .agenda-timeline-header h3 { color: #FFFFFF !important; }
body[data-theme="dark"] .agenda-timeline-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .agenda-timeline-hour-row span { background: #252525 !important; color: #71717A !important; }
body[data-theme="dark"] .agenda-timeline-lines-col { border-left-color: #404040 !important; }

/* -------------------- Meu Trabalho: aba Meus Contratos -------------------- */

.contratos-clientes-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.contratos-cliente-row { cursor: pointer; }
.contratos-cliente-row:hover { background: var(--bg-light); }
.contratos-cliente-row.is-selected { background: var(--bg-light); }

.contratos-cliente-name-cell { font-weight: 600; color: #18181B; }

.contratos-evento-panel { min-height: 320px; }

.contratos-evento-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center; color: #A1A1AA; padding: 3rem 1rem;
}
.contratos-evento-empty p { font-size: 0.875rem; }

.contratos-evento-header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.15rem; }
.contratos-evento-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.contratos-evento-label { font-size: 0.75rem; font-weight: 600; color: #A1A1AA; text-transform: uppercase; letter-spacing: 0.03em; }
.contratos-evento-title { font-size: 1.0625rem; font-weight: 700; color: #18181B; margin-bottom: 0.35rem; }
.contratos-evento-meta { font-size: 0.8125rem; color: #52525B; margin-bottom: 0.15rem; }

.contratos-evento-countdown { font-size: 0.8125rem; font-weight: 600; color: #71717A; white-space: nowrap; }

.contratos-evento-vermais-btn { flex-shrink: 0; }

.contratos-convidados-block { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); }
.contratos-convidados-title { font-size: 0.8125rem; font-weight: 700; color: #18181B; margin-bottom: 0.6rem; }

.contratos-convidado-row:hover { background: var(--bg-light); }

.contratos-eye-btn {
  width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent;
  color: #71717A; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.contratos-eye-btn:hover { background: #F4F4F5; color: #18181B; }

.contratos-status-filter-wrap { position: relative; display: inline-block; }

.contratos-status-filter-btn {
  display: flex; align-items: center; gap: 0.3rem; border: none; background: transparent; padding: 0; margin: 0;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #A1A1AA; cursor: pointer;
}
.contratos-status-filter-btn:hover { color: #18181B; }

.contratos-status-filter-dropdown { width: 160px; text-transform: none; letter-spacing: normal; }

.contratos-drawer-link { font-size: 0.875rem; color: var(--primary-blue); word-break: break-all; }
.contratos-drawer-link:hover { text-decoration: underline; }

.contratos-drawer-box { white-space: normal; line-height: 1.5; min-height: unset; }

@media (max-width: 768px) {
  .contratos-clientes-layout { grid-template-columns: 1fr; }
}

body[data-theme="dark"] .contratos-evento-title { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-convidados-title { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-evento-meta { color: #D4D4D8 !important; }
body[data-theme="dark"] .contratos-evento-countdown { color: #A1A1AA !important; }
body[data-theme="dark"] .contratos-convidados-block { border-top-color: #404040 !important; }
body[data-theme="dark"] .contratos-cliente-row.is-selected { background: #1c1c1c !important; }
body[data-theme="dark"] .contratos-cliente-row:hover { background: #1c1c1c !important; }
body[data-theme="dark"] .contratos-cliente-name-cell { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-eye-btn { color: #A1A1AA !important; }
body[data-theme="dark"] .contratos-status-filter-btn { color: #71717A !important; }
body[data-theme="dark"] .contratos-status-filter-btn:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-eye-btn:hover { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-drawer-box { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-convidado-row:hover { background: #1c1c1c !important; }
body[data-theme="dark"] .agenda-timeline-lines-col .agenda-timeline-hour-row { border-top-color: #404040 !important; }
body[data-theme="dark"] .agenda-timeline-lines-col .agenda-timeline-hour-row:hover { background: #1c1c1c !important; }

/* -------------------- Drawer de evento: campos extras -------------------- */

.event-drawer-title-input {
  width: 100%; border: none; border-bottom: 1px solid transparent; background: transparent;
  font-size: 1.125rem; font-weight: 700; color: #18181B; padding: 0.1rem 0; font-family: inherit;
}
.event-drawer-title-input:hover { border-bottom-color: var(--border-light); }
.event-drawer-title-input:focus { outline: none; border-bottom-color: var(--primary-blue); }
.event-drawer-title-input::placeholder { color: #A1A1AA; font-weight: 700; }

.event-guest-input-row { display: flex; gap: 0.5rem; }
.event-guest-input-row .field-input { flex: 1; min-width: 0; }
.event-guest-input-row .btn-secondary { flex-shrink: 0; white-space: nowrap; }

.event-guest-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.event-guest-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #F4F4F5; border-radius: 999px; padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; color: #3F3F46;
}
.event-guest-chip button {
  border: none; background: none; color: #A1A1AA; cursor: pointer; font-size: 0.9375rem; line-height: 1; padding: 0;
}
.event-guest-chip button:hover { color: #B91C1C; }

.event-desc-toolbar { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; }
.event-desc-toolbar button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-light);
  background: #fff; color: #52525B; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.event-desc-toolbar button svg { width: 14px; height: 14px; }
.event-desc-toolbar button:hover { background: #F4F4F5; }
.event-desc-toolbar button.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }

.event-desc-editable {
  width: 100%; min-height: 90px; border: 1px solid var(--border-light); border-radius: var(--radius-control);
  padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #18181B; line-height: 1.5; background: #fff;
}
.event-desc-editable:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(24, 59, 84, 0.15); }
.event-desc-editable:empty::before { content: attr(data-placeholder); color: #A1A1AA; }

body[data-theme="dark"] .event-drawer-title-input { color: #FFFFFF !important; }
body[data-theme="dark"] .event-guest-chip { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .event-desc-toolbar button { background: #333333 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .event-desc-editable { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* -------------------- Contatos -------------------- */

.crm-footer-count { font-size: 0.8125rem; color: #71717A; margin-top: 0.85rem; }
body[data-theme="dark"] .crm-footer-count { color: #A1A1AA !important; }

/* Espaço padrão entre o conteúdo de uma aba e o rodapé da página */
[data-view-panel],
[data-settings-panel] { padding-bottom: 1.5rem; }

/* Garante espaço entre o último bloco de conteúdo e o rodapé em QUALQUER página,
   mesmo sem abas (dashboard, produtos, etc.) e mesmo quando o conteúdo preenche
   toda a altura da tela (o margin-top:auto do rodapé zera nesse caso). */
.b2b-content > *:has(+ .b2b-footer) { margin-bottom: 1.5rem; }

/* -------------------- Pagamentos / Financeiro -------------------- */

.finance-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.finance-stat-card { padding: 1.25rem 1.5rem; }
.finance-stat-label { font-size: 0.75rem; font-weight: 600; color: #71717A; margin-bottom: 0.4rem; }
.finance-stat-value { font-size: 1.5rem; font-weight: 700; color: #18181B; }
.finance-stat-sub { font-size: 0.75rem; color: #71717A; margin-top: 0.3rem; }
.finance-stat-action-btn { width: 100%; justify-content: center; margin-top: 0.9rem; }
.pix-inline-icon { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
body[data-theme="dark"] .finance-stat-label { color: #A1A1AA !important; }
body[data-theme="dark"] .finance-stat-value { color: #FFFFFF !important; }
body[data-theme="dark"] .finance-stat-sub { color: #A1A1AA !important; }

.withdrawal-step { display: flex; flex-direction: column; gap: 1rem; }
.withdrawal-step[hidden] { display: none; }

.withdrawal-alt-link {
  border: none; background: none; padding: 0; margin: -0.5rem 0 0; width: fit-content;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue); cursor: pointer; text-decoration: none;
}
.withdrawal-alt-link:hover { text-decoration: underline; }

.withdrawal-bank-hint { font-size: 0.75rem; color: #A1A1AA; margin-top: 0.35rem; white-space: nowrap; }

.withdrawal-confirm-list {
  background: #FAFAFA; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.25rem 1rem;
}
.withdrawal-confirm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border-light);
}
.withdrawal-confirm-row:last-child { border-bottom: none; }
.withdrawal-confirm-label { font-size: 0.8125rem; color: #71717A; }
.withdrawal-confirm-value { font-size: 0.8125rem; font-weight: 700; color: #18181B; text-align: right; }

body[data-theme="dark"] .withdrawal-confirm-list { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .withdrawal-confirm-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .withdrawal-confirm-label { color: #A1A1AA !important; }
body[data-theme="dark"] .withdrawal-confirm-value { color: #FFFFFF !important; }

.withdrawal-amount-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.withdrawal-amount-avatar {
  width: 40px; height: 40px; border-radius: 999px; background: var(--primary-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; flex-shrink: 0;
}
.withdrawal-amount-name { font-size: 0.875rem; font-weight: 700; color: #18181B; margin: 0; }
.withdrawal-amount-key { font-size: 0.75rem; color: #71717A; margin: 0.125rem 0 0; }
.withdrawal-amount-message-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; border: none; background: none; padding: 0; margin-top: 0.375rem;
  font-size: 0.75rem; font-weight: 600; color: var(--primary-blue); cursor: pointer;
}
.withdrawal-amount-message-btn:hover { text-decoration: underline; }

.withdrawal-amount-box {
  display: flex; align-items: baseline; justify-content: center; gap: 0.4rem;
  border: 1px solid var(--border-light); border-radius: 10px; padding: 1.5rem 1rem;
}
.withdrawal-amount-prefix { font-size: 1.25rem; font-weight: 700; color: #A1A1AA; }
.withdrawal-amount-input {
  border: none; background: none; outline: none; width: 100%; max-width: 220px;
  font-size: 2rem; font-weight: 700; color: #18181B; text-align: left; padding: 0;
}

.withdrawal-saldo-row { font-size: 0.8125rem; color: #71717A; text-align: center; }
.withdrawal-saldo-row strong { color: #18181B; }

body[data-theme="dark"] .withdrawal-amount-box { border-color: #404040 !important; }
body[data-theme="dark"] .withdrawal-amount-input { color: #FFFFFF !important; }
body[data-theme="dark"] .withdrawal-amount-name { color: #FFFFFF !important; }
body[data-theme="dark"] .withdrawal-saldo-row strong { color: #FFFFFF !important; }

.payment-link-empty { padding: 2rem 0; text-align: center; color: #71717A; font-size: 0.875rem; }
body[data-theme="dark"] .payment-link-empty { color: #A1A1AA !important; }

.payment-link-row-copy {
  border: none; background: transparent; padding: 0; margin: 0;
  color: var(--primary-blue); font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.payment-link-row-copy:hover { text-decoration: underline; }
.payment-link-row-paid { color: #15803D; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }

body[data-theme="dark"] .payment-link-row-paid { color: #4ADE80 !important; }

.payment-method-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-card);
}
.payment-method-row-last { border-bottom: none; padding-bottom: 0; }
.payment-method-row-left { display: flex; align-items: flex-start; gap: 0.65rem; }
.payment-method-icon {
  width: 28px; height: 28px; flex-shrink: 0; margin-top: 0.1rem;
  display: flex; align-items: center; justify-content: center; color: #3F3F46;
}
.payment-method-icon svg { width: 20px; height: 20px; }

.payment-link-result-box {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border-light); border-radius: var(--radius-control);
  background: #FAFAFA; padding: 0.5rem 0.5rem 0.5rem 0.875rem;
}
.payment-link-result-url {
  flex: 1; min-width: 0; font-size: 0.8125rem; color: #3F3F46;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.payment-link-result-send {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  border: none; background: var(--primary-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.payment-link-result-send svg { width: 17px; height: 17px; }
.payment-link-result-send:hover { opacity: 0.9; }

body[data-theme="dark"] .payment-method-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .payment-method-icon { color: #D4D4D8 !important; }
body[data-theme="dark"] .payment-link-result-box { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .payment-link-result-url { color: #D4D4D8 !important; }

/* Preview do checkout com link de pagamento */
.checkout-payment-banner {
  max-width: 640px; margin: 0 auto; padding: 1.25rem 1.5rem;
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.checkout-payment-banner-amount { font-size: 1.375rem; font-weight: 700; color: #18181B; }
.checkout-payment-banner-installments { font-size: 0.8125rem; color: #71717A; margin-top: 0.15rem; }
.checkout-payment-banner.is-paid { background: #F0FDF4; border-color: #BBF7D0; }
.checkout-payment-banner.is-paid .checkout-payment-banner-amount { color: #15803D; }

/* Campos com <input> real do template de checkout (CEP, Rua, Cidade). A caixa
   (fundo, borda, padding, fonte) já vem do wrapper .be-custom-html — igual ao
   dos campos de texto (checkoutBoxEl) — pra ficarem com o mesmo tamanho. */
.co-field-wrap { display: flex; align-items: center; gap: 9px; }
.co-field-wrap svg { width: 18px; height: 18px; flex-shrink: 0; color: #71717A; }
.co-field-wrap input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: inherit; color: inherit; padding: 0;
}