/* Área do Cliente — layout próprio (split-screen), separado do site institucional. */

.client-auth-body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
}

.client-auth {
  display: flex;
  min-height: 100vh;
}

.client-auth-brand {
  flex: 0 0 52%;
  position: relative;
  overflow: hidden;
  padding: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background: linear-gradient(150deg, #061a3b 0%, #0a2f7a 45%, #0a55c8 100%, #19c4ff 160%);
  background-size: 200% 200%;
  animation: clientAuthGradient 14s ease infinite;
}

@keyframes clientAuthGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes clientAuthFloat {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(-16px) rotate(45deg); }
}

@keyframes clientAuthFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.client-auth-shape {
  position: absolute;
  border: 2px solid rgba(255, 159, 45, .55);
  border-radius: 22px;
  pointer-events: none;
  animation: clientAuthFloat 7s ease-in-out infinite;
}
.client-auth-shape-1 { width: 240px; height: 240px; top: -70px; right: 50px; }
.client-auth-shape-2 { width: 140px; height: 140px; bottom: 30px; left: -40px; border-color: rgba(255, 255, 255, .18); animation-delay: 1.4s; }
.client-auth-shape-3 { width: 90px; height: 90px; top: 46%; right: -20px; border-color: rgba(25, 196, 255, .5); animation-delay: 2.6s; }

.client-auth-logo {
  width: 270px;
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
  animation: clientAuthFadeUp .7s ease both;
}

.client-auth-brand h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(48px, 5.8vw, 74px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -.035em;
  max-width: 640px;
  margin-bottom: 24px;
  animation: clientAuthFadeUp .7s ease .1s both;
}

.client-auth-brand p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .82);
  font-size: 21px;
  line-height: 1.65;
  max-width: 580px;
  margin: 0;
  animation: clientAuthFadeUp .7s ease .2s both;
}

.client-auth-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.client-auth-form {
  width: 100%;
  max-width: 440px;
  animation: clientAuthFadeUp .6s ease .15s both;
}

.client-auth-eyebrow {
  font-weight: 900;
  font-size: 14px;
  color: var(--tm-muted);
  margin-bottom: 20px;
}

.client-auth-form-logo { width: 150px; margin-bottom: 30px; }

.client-auth-form h2 {
  font-size: 32px;
  font-weight: 950;
  color: var(--tm-ink);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.client-auth-form .subtitle {
  color: var(--tm-muted);
  font-size: 16px;
  margin-bottom: 32px;
}

.client-auth-form label {
  font-weight: 800;
  font-size: 14px;
  color: #344664;
  margin-bottom: 7px;
  display: block;
}

.client-auth-form .mb-3 { margin-bottom: 20px !important; }

.client-auth-form .form-control {
  min-height: 56px;
  font-size: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--tm-border);
  background: var(--tm-soft);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.client-auth-form .form-control:focus {
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 .2rem rgba(10, 85, 200, .14);
  background: #fff;
}

.client-auth-form .btn-main {
  min-height: 56px;
  font-size: 16px;
  margin-top: 6px;
}

.client-auth-password-wrap { position: relative; }
.client-auth-password-wrap .form-control { padding-right: 48px; }
.client-auth-password-wrap .toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--tm-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  font-size: 18px;
  transition: color .15s ease;
}
.client-auth-password-wrap .toggle-password:hover { color: var(--tm-primary); }

.client-auth-switch { text-align: center; margin-top: 26px; font-size: 15px; color: var(--tm-muted); }

.client-auth-status {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--tm-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--tm-muted);
}
.client-auth-status .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tm-green);
  margin-right: 7px;
  box-shadow: 0 0 0 0 rgba(36, 196, 118, .5);
  animation: clientAuthPulse 2s ease-in-out infinite;
}
@keyframes clientAuthPulse {
  0% { box-shadow: 0 0 0 0 rgba(36, 196, 118, .45); }
  70% { box-shadow: 0 0 0 7px rgba(36, 196, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 196, 118, 0); }
}
.client-auth-credit { margin-top: 6px; font-size: 12px; font-weight: 500; color: #96a5bd; }
.client-auth-credit a { color: #6c85ac; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .client-auth { flex-direction: column; }
  .client-auth-panel { order: -1; padding: 44px 24px; }
  .client-auth-brand { flex: none; padding: 44px 30px; }
}

/* ============================================================
   Painel do cliente — casca de app com sidebar retrátil e tema
   claro/escuro, sem o menu institucional. Tema salvo por conta
   (data-theme no <html>); sidebar retrátil é preferência local
   (localStorage), não precisa ida ao servidor.
   ============================================================ */

:root {
  --capp-bg: var(--tm-soft);
  --capp-sidebar-bg: #ffffff;
  --capp-card-bg: #ffffff;
  --capp-border: var(--tm-border);
  --capp-text: var(--tm-ink);
  --capp-text-muted: var(--tm-muted);
  --capp-nav-hover: #eef4ff;
  --capp-input-bg: var(--tm-soft);
}

html[data-theme="dark"] {
  --capp-bg: #0a1120;
  --capp-sidebar-bg: #0f1b33;
  --capp-card-bg: #121e39;
  --capp-border: rgba(255, 255, 255, .08);
  --capp-text: #eef2ff;
  --capp-text-muted: #93a2c2;
  --capp-nav-hover: rgba(255, 255, 255, .06);
  --capp-input-bg: rgba(255, 255, 255, .05);
}

.client-app-body {
  margin: 0;
  background: var(--capp-bg);
  color: var(--capp-text);
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background-color .2s ease, color .2s ease;
}

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

/* ---------- Sidebar ---------- */
.client-app-sidebar {
  flex: 0 0 264px;
  background: var(--capp-sidebar-bg);
  border-right: 1px solid var(--capp-border);
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  transition: background-color .2s ease, border-color .2s ease, flex-basis .2s ease, padding .2s ease;
}

.client-app-sidebar-top { display: flex; align-items: center; justify-content: center; padding: 0 6px; margin-bottom: 36px; }
.client-app-sidebar-brand img { height: 30px; }
.client-app-sidebar-brand .sidebar-logo-white { display: none; }
html[data-theme="dark"] .client-app-sidebar-brand .sidebar-logo-color { display: none; }
html[data-theme="dark"] .client-app-sidebar-brand .sidebar-logo-white { display: block; }
.sidebar-mobile-close, .client-app-sidebar-overlay { display: none; }

.client-app-sidebar-brand-mini { display: none; }
.client-app-sidebar-brand-mini img { width: 34px; height: 34px; border-radius: 10px; }

.sidebar-toggle {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--capp-border);
  background: transparent; color: var(--capp-text-muted); display: grid; place-items: center;
  cursor: pointer; font-size: 15px; flex: 0 0 auto; transition: background-color .15s ease, color .15s ease;
}
.sidebar-toggle:hover { background: var(--capp-nav-hover); color: var(--capp-text); }

.client-app-nav { display: flex; flex-direction: column; gap: 4px; }

.client-app-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--capp-text-muted);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.client-app-nav-link i { font-size: 17px; width: 20px; text-align: center; flex: 0 0 auto; }
.client-app-nav-link:hover { background: var(--capp-nav-hover); color: var(--capp-text); }
.client-app-nav-link.active { background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent)); color: #fff; box-shadow: 0 10px 24px rgba(10, 85, 200, .25); }

.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tm-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.client-app-nav-link.active .nav-badge { background: rgba(255, 255, 255, .3); }

/* ---------- Card de plano na sidebar ---------- */
.client-app-plan-promo {
  margin-top: 24px;
  padding: 20px 16px;
  border-radius: 18px;
  background: var(--capp-nav-hover);
  text-align: center;
}
.plan-promo-icon {
  width: 46px; height: 46px; margin: 0 auto 12px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--capp-card-bg); color: var(--tm-primary); font-size: 20px;
  box-shadow: 0 8px 20px rgba(10, 85, 200, .12);
}
.client-app-plan-promo strong { display: block; font-size: 14px; color: var(--capp-text); margin-bottom: 4px; }
.client-app-plan-promo p { font-size: 12px; color: var(--capp-text-muted); margin-bottom: 14px; }
.client-app-plan-promo .btn { width: 100%; }

/* ---------- Seção "Configurações" ---------- */
.client-app-sidebar-section { border-top: 1px solid var(--capp-border); padding-top: 14px; margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-section-label { padding: 0 14px; margin-bottom: 6px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--capp-text-muted); }

/* Sidebar retraída (mostra só a marca "Ti" + ícones) */
.client-app-shell.sidebar-collapsed .client-app-sidebar { flex-basis: 72px; padding-left: 10px; padding-right: 10px; }
.client-app-shell.sidebar-collapsed .client-app-sidebar-brand { display: none; }
.client-app-shell.sidebar-collapsed .client-app-sidebar-brand-mini { display: block; }
.client-app-shell.sidebar-collapsed .client-app-nav-link span,
.client-app-shell.sidebar-collapsed .nav-badge { display: none; }
.client-app-shell.sidebar-collapsed .client-app-nav-link { justify-content: center; padding: 12px; }
.client-app-shell.sidebar-collapsed .client-app-plan-promo,
.client-app-shell.sidebar-collapsed .sidebar-section-label { display: none; }
.client-app-shell.sidebar-collapsed .client-app-sidebar-section { align-items: center; }

.client-app-content { flex: 1; min-width: 0; }

/* ---------- Topbar ---------- */
.client-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 36px;
  border-bottom: 1px solid var(--capp-border);
  flex-wrap: wrap;
}
.client-app-topbar-left { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }

.client-app-topbar-actions { display: flex; align-items: center; gap: 10px; }

.client-crm-return {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(10, 85, 200, .24);
  border-radius: 999px;
  background: rgba(10, 85, 200, .07);
  color: var(--tm-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(10, 85, 200, .1);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.client-crm-return i { font-size: 15px; }
.client-crm-return:hover,
.client-crm-return:focus-visible {
  color: #fff;
  border-color: var(--tm-primary);
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent));
  box-shadow: 0 10px 24px rgba(10, 85, 200, .24);
  transform: translateY(-1px);
  outline: none;
}

.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--capp-border);
  background: var(--capp-card-bg);
  color: var(--capp-text);
  display: grid;
  place-items: center;
  font-size: 17px;
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
}
.icon-btn:hover { transform: scale(1.07); }
.icon-btn-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--tm-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 2px solid var(--capp-bg);
}

.client-app-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--capp-border);
  background: var(--capp-card-bg);
  color: var(--capp-text);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.client-app-profile-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent));
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; flex: 0 0 auto;
}
.client-app-profile-btn .bi-chevron-down { font-size: 11px; color: var(--capp-text-muted); }

.client-app-dropdown-menu {
  background: var(--capp-card-bg);
  border-color: var(--capp-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 45px rgba(8, 20, 50, .25);
}
.client-app-dropdown-menu .dropdown-item {
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--capp-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.client-app-dropdown-menu .dropdown-item:hover,
.client-app-dropdown-menu .dropdown-item:focus { background: var(--capp-nav-hover); color: var(--capp-text); }
.client-app-dropdown-menu .dropdown-divider { border-color: var(--capp-border); margin: 6px 0; }
.client-app-dropdown-menu .dropdown-item-text { color: var(--capp-text-muted); }

.client-app-notif-dropdown { width: 320px; max-width: 90vw; }
.client-app-notif-dropdown .dropdown-item { align-items: flex-start; white-space: normal; font-weight: 400; }
.client-app-notif-dropdown .dropdown-item i { margin-top: 2px; color: var(--tm-orange); flex: 0 0 auto; }
.client-app-notif-dropdown .dropdown-item strong { font-size: 14px; }
.client-app-notif-dropdown .dropdown-item small { font-size: 12px; }

.client-app-main { padding: 36px; }

.client-app-welcome { color: var(--capp-text-muted); font-size: 15px; margin: -8px 0 26px; }

.client-app-body .card {
  background: var(--capp-card-bg);
  border-color: var(--capp-border);
  color: var(--capp-text);
  border-radius: 20px;
  transition: background-color .2s ease, border-color .2s ease;
}
.client-app-body h2.h6 { color: var(--capp-text); font-weight: 900; }
.client-app-body .text-muted { color: var(--capp-text-muted) !important; }
.client-app-body .form-control,
.client-app-body .form-select {
  background-color: var(--capp-input-bg);
  border-color: var(--capp-border);
  color: var(--capp-text);
}
/* O Bootstrap fixa a cor do placeholder num tom escuro, que some no tema
   escuro — daí a sobrescrita explícita aqui. */
.client-app-body .form-control::placeholder,
.client-app-body .form-select::placeholder,
.client-app-body input::placeholder,
.client-app-body textarea::placeholder {
  color: var(--capp-text-muted);
  opacity: .75;
}
.client-app-body .form-control:focus { background-color: var(--capp-card-bg); border-color: var(--tm-primary); box-shadow: 0 0 0 .18rem rgba(10, 85, 200, .14); color: var(--capp-text); }
.client-app-body .form-control:disabled { background: var(--capp-input-bg); color: var(--capp-text-muted); opacity: .8; }
/* Mesma história do placeholder: o autopreenchimento do Chrome força fundo
   branco e texto escuro, ilegível no tema escuro. */
.client-app-body input:-webkit-autofill,
.client-app-body input:-webkit-autofill:hover,
.client-app-body input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--capp-text);
  -webkit-box-shadow: 0 0 0 1000px var(--capp-input-bg) inset;
  caret-color: var(--capp-text);
}
.client-app-body .form-label { color: var(--capp-text); font-weight: 800; font-size: 13px; }
.client-app-body .btn-outline-main { background: var(--capp-card-bg); border-color: var(--capp-border); color: var(--capp-text); }
.client-app-body .btn-outline-main:hover { background: var(--tm-primary); border-color: var(--tm-primary); color: #fff; }
.client-app-body .btn-outline-main:disabled { opacity: .75; cursor: default; }

/* ---------- Stat cards ---------- */
.client-app-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 26px; }
.client-app-stat-card {
  background: var(--capp-card-bg);
  border: 1px solid var(--capp-border);
  border-radius: 20px;
  padding: 22px;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.client-app-stat-card:hover { transform: translateY(-3px); }
.client-app-stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent)); color: #fff; font-size: 19px; margin-bottom: 16px;
}
.client-app-stat-card .stat-icon.is-orange { background: linear-gradient(135deg, #e98200, #ffb23d); }
.client-app-stat-card .stat-icon.is-green { background: linear-gradient(135deg, #159d62, #4bd892); }
.client-app-stat-card strong { display: block; font-size: 16px; color: var(--capp-text); }
.client-app-stat-card span { color: var(--capp-text-muted); font-size: 13px; }

/* ---------- Dashboard / visao geral ---------- */
.dashboard-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 16px; padding: 21px 22px; border: 1px solid rgba(10, 85, 200, .22); border-radius: 18px;
  background: linear-gradient(120deg, rgba(10, 85, 200, .105), var(--capp-card-bg) 58%);
}
.dashboard-hero::after { content: ""; position: absolute; top: -75px; right: 18%; width: 180px; height: 180px; border-radius: 50%; background: rgba(10, 85, 200, .055); pointer-events: none; }
.dashboard-hero-copy, .dashboard-hero-actions { position: relative; z-index: 1; }
.dashboard-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-primary); font-size: 11.5px; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
.dashboard-hero h1 { margin: 5px 0 4px; color: var(--capp-text); font-size: 28px; font-weight: 950; letter-spacing: -.025em; }
.dashboard-hero p { margin: 0; color: var(--capp-text-muted); font-size: 14px; }
.dashboard-hero-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.dashboard-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dashboard-metric-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--capp-border); border-radius: 16px; background: var(--capp-card-bg); box-shadow: 0 6px 22px rgba(7, 22, 48, .035); transition: transform .15s ease, border-color .15s ease; }
.dashboard-metric-card:hover { transform: translateY(-2px); border-color: rgba(10, 85, 200, .27); }
.dashboard-metric-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--capp-text-muted); background: var(--capp-input-bg); font-size: 17px; }
.dashboard-metric-icon.is-primary { color: var(--tm-primary); background: rgba(10, 85, 200, .1); }
.dashboard-metric-icon.is-warning { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.dashboard-metric-icon.is-success { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.dashboard-metric-icon.is-danger { color: #e15454; background: rgba(225, 84, 84, .11); }
.dashboard-metric-icon.is-purple { color: #8067e8; background: rgba(128, 103, 232, .11); }
.dashboard-metric-card > div { min-width: 0; }
.dashboard-metric-card span:not(.dashboard-metric-icon), .dashboard-metric-card small { display: block; color: var(--capp-text-muted); }
.dashboard-metric-card span:not(.dashboard-metric-icon) { margin-bottom: 2px; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-metric-card strong { display: block; overflow: hidden; color: var(--capp-text); font-size: 16px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-metric-card small { margin-top: 2px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-primary-grid, .dashboard-secondary-grid { display: grid; align-items: stretch; gap: 16px; }
.dashboard-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.dashboard-secondary-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); }
.dashboard-panel { min-width: 0; display: flex; flex-direction: column; padding: 19px; border: 1px solid var(--capp-border); border-radius: 18px; background: var(--capp-card-bg); box-shadow: 0 8px 26px rgba(7, 22, 48, .035); }
.dashboard-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--capp-border); }
.dashboard-panel-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.dashboard-panel-title > div { min-width: 0; }
.dashboard-panel-title span:not(.dashboard-panel-icon) { display: block; margin-bottom: 1px; color: var(--capp-text-muted); font-size: 10.5px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.dashboard-panel-title h2 { margin: 0; color: var(--capp-text); font-size: 18px; font-weight: 950; }
.dashboard-panel-icon { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 16px; }
.dashboard-panel-icon.is-success { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.dashboard-panel-icon.is-warning { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.dashboard-panel-icon.is-danger { color: #e15454; background: rgba(225, 84, 84, .11); }
.dashboard-panel-icon.is-document { color: #d73d4d; background: rgba(215, 61, 77, .1); }
.dashboard-panel-icon.is-profile { color: #8067e8; background: rgba(128, 103, 232, .11); }
.dashboard-panel-icon.is-shortcut { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.dashboard-panel-icon.is-support { color: #8067e8; background: rgba(128, 103, 232, .11); }
.dashboard-progress-badge, .dashboard-count-badge, .dashboard-profile-completion { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--capp-input-bg); color: var(--capp-text-muted); font-size: 11.5px; font-weight: 900; }
.dashboard-progress-badge.is-primary { color: var(--tm-primary); background: rgba(10, 85, 200, .1); }
.dashboard-progress-badge.is-success { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.dashboard-progress-badge.is-warning { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.dashboard-progress-badge.is-danger { color: #e15454; background: rgba(225, 84, 84, .11); }
.dashboard-count-badge { min-width: 29px; text-align: center; }
.dashboard-profile-completion { color: #8067e8; background: rgba(128, 103, 232, .1); }
.dashboard-panel-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding-top: 15px; }
.profile-form-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
.profile-site-summary {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(260px, .7fr); align-items: center; gap: 16px;
  margin-bottom: 16px; padding: 17px 18px; border: 1px solid rgba(10, 85, 200, .24); border-radius: 17px;
  background: linear-gradient(135deg, rgba(10, 85, 200, .08), var(--capp-card-bg) 72%);
}
.profile-site-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--tm-primary); background: rgba(10, 85, 200, .11); font-size: 19px; }
.profile-site-copy { min-width: 0; }
.profile-site-copy > span { color: var(--tm-primary); font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.profile-site-copy h2 { margin: 2px 0 3px; overflow: hidden; color: var(--capp-text); font-size: 17px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.profile-site-copy p { margin: 0; color: var(--capp-text-muted); font-size: 11.5px; line-height: 1.45; }
.profile-site-readonly { min-width: 0; }
.profile-site-readonly .form-label { margin-bottom: 5px; font-size: 11px; }
.profile-site-readonly .form-control[readonly] { color: var(--capp-text-muted); background: var(--capp-input-bg); cursor: text; }

.profile-security-section { margin-top: 17px; padding: 22px; border: 1px solid var(--capp-border); border-radius: 20px; background: var(--capp-card-bg); }
.profile-security-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--capp-border); }
.profile-security-heading-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 19px; }
.profile-security-heading > div { min-width: 0; }
.profile-security-heading > div > span { display: block; color: var(--tm-primary); font-size: 10.5px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.profile-security-heading h2 { margin: 2px 0; color: var(--capp-text); font-size: 20px; font-weight: 950; }
.profile-security-heading p { margin: 0; color: var(--capp-text-muted); font-size: 12.5px; }
.profile-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 15px; }
.profile-security-card { min-width: 0; padding: 19px; border: 1px solid var(--capp-border); border-radius: 17px; background: var(--capp-input-bg); }
.profile-security-card-head { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; margin-bottom: 17px; }
.profile-security-card-head > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; }
.profile-security-card-head > span.is-password { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.profile-security-card-head > span.is-two-factor { color: #8067e8; background: rgba(128, 103, 232, .11); }
.profile-security-card-head h3 { margin: 0; color: var(--capp-text); font-size: 15.5px; font-weight: 950; }
.profile-security-card-head p { margin: 3px 0 0; color: var(--capp-text-muted); font-size: 11.5px; line-height: 1.4; }
.profile-security-card form { display: grid; gap: 12px; }
.profile-security-field { display: grid; gap: 5px; }
.profile-security-field > span { color: var(--capp-text-muted); font-size: 11px; font-weight: 850; }
.profile-security-field .form-control { min-height: 45px; }
.profile-security-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-security-note { display: flex; align-items: flex-start; gap: 7px; color: var(--capp-text-muted); font-size: 10.5px; line-height: 1.45; }
.profile-security-note i { flex: 0 0 auto; margin-top: 1px; color: var(--tm-primary); }
.profile-security-card form > .btn { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; font-size: 11.5px; font-weight: 900; }
.profile-two-factor-status { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: var(--capp-text-muted); background: var(--capp-card-bg); font-size: 9.5px; font-style: normal; font-weight: 900; }
.profile-two-factor-card .profile-security-card-head { padding-right: 88px; }
.profile-two-factor-card.is-enabled { border-color: rgba(36, 196, 118, .32); background: linear-gradient(135deg, rgba(36, 196, 118, .06), var(--capp-input-bg) 55%); }
.profile-two-factor-card.is-enabled .profile-two-factor-status { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.profile-two-factor-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 7px; margin-bottom: 17px; padding: 12px; border: 1px solid var(--capp-border); border-radius: 13px; background: var(--capp-card-bg); }
.profile-two-factor-flow > div { min-width: 0; text-align: center; }
.profile-two-factor-flow > div > span { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 auto 7px; border-radius: 9px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 11.5px; font-weight: 950; }
.profile-two-factor-flow p, .profile-two-factor-flow strong, .profile-two-factor-flow small { display: block; }
.profile-two-factor-flow p { margin: 0; }
.profile-two-factor-flow strong { color: var(--capp-text); font-size: 12.5px; line-height: 1.35; font-weight: 900; }
.profile-two-factor-flow small { margin-top: 3px; color: var(--capp-text-muted); font-size: 11.5px; line-height: 1.45; }
.profile-two-factor-flow > i { color: var(--capp-text-muted); font-size: 11px; }

.client-two-factor-verification { text-align: center; }
.client-two-factor-mail-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 19px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 27px; }
.client-two-factor-verification .subtitle strong { color: var(--tm-ink); }
.client-two-factor-verification form { text-align: left; }
.client-two-factor-code { min-height: 62px !important; margin-bottom: 16px; color: var(--tm-primary) !important; font-size: 27px !important; font-weight: 950; letter-spacing: 10px; text-align: center; }
.client-two-factor-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 19px; }
.client-two-factor-actions form { margin: 0; }
.client-two-factor-actions button { padding: 0; border: 0; color: var(--tm-primary); background: transparent; font-size: 12px; font-weight: 850; }
.client-two-factor-actions form:last-child button { color: var(--tm-muted); }
.client-two-factor-expiry { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; color: var(--tm-muted); font-size: 10.5px; }

.dashboard-activation-copy { padding: 16px 0 12px; }
.dashboard-activation-copy strong { display: block; margin-bottom: 4px; color: var(--capp-text); font-size: 16.5px; font-weight: 900; }
.dashboard-activation-copy p { margin: 0; color: var(--capp-text-muted); font-size: 13.5px; line-height: 1.48; }
.dashboard-progress { height: 6px; overflow: hidden; border-radius: 999px; background: var(--capp-input-bg); }
.dashboard-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tm-primary), var(--tm-accent)); }
.dashboard-activation-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.dashboard-activation-steps li { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--capp-text-muted); font-size: 11.5px; font-weight: 800; }
.dashboard-activation-steps li i { flex: 0 0 auto; font-size: 11px; }
.dashboard-activation-steps li.is-done { color: var(--tm-green); }
.dashboard-task-list { display: grid; gap: 7px; margin-top: 14px; }
.dashboard-task-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--capp-border); border-radius: 11px; background: var(--capp-input-bg); }
.dashboard-task-item > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--tm-orange); background: var(--capp-card-bg); font-size: 12px; }
.dashboard-task-item > div { min-width: 0; }
.dashboard-task-item strong, .dashboard-task-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-item strong { color: var(--capp-text); font-size: 12.5px; }
.dashboard-task-item small { color: var(--capp-text-muted); font-size: 11px; }
.dashboard-task-item form { margin: 0; }

.dashboard-panel-empty { flex: 1; display: grid; align-content: center; justify-items: center; min-height: 190px; padding: 22px; color: var(--capp-text-muted); text-align: center; }
.dashboard-panel-empty > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 14px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 20px; }
.dashboard-panel-empty strong { color: var(--capp-text); font-size: 13.5px; }
.dashboard-panel-empty p { max-width: 330px; margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; }
.dashboard-contract-list { display: grid; align-content: start; gap: 9px; padding-top: 14px; }
.dashboard-contract-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--capp-border); border-radius: 13px; background: var(--capp-input-bg); }
.dashboard-contract-item.is-ended { opacity: .68; }
.dashboard-contract-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #d73d4d; background: rgba(215, 61, 77, .1); font-size: 17px; }
.dashboard-contract-copy { min-width: 0; }
.dashboard-contract-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.dashboard-contract-copy strong, .dashboard-contract-copy span, .dashboard-contract-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-contract-copy strong { color: var(--capp-text); font-size: 14px; }
.dashboard-contract-copy span { margin-top: 3px; color: var(--capp-text-muted); font-size: 12px; }
.dashboard-contract-copy small { margin-top: 1px; color: var(--capp-text-muted); font-size: 11px; }
.dashboard-contract-copy .doc-tag { margin-left: 0; }
.dashboard-contract-actions { display: flex; align-items: center; gap: 6px; }
.dashboard-contract-actions .btn { width: 34px; height: 32px; display: grid; place-items: center; padding: 0; }

.dashboard-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding-top: 9px; }
.dashboard-profile-grid > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--capp-border); }
.dashboard-profile-grid > div.is-wide { grid-column: 1 / -1; }
.dashboard-profile-grid span, .dashboard-profile-grid strong { display: block; }
.dashboard-profile-grid span { margin-bottom: 3px; color: var(--capp-text-muted); font-size: 10.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-profile-grid strong { overflow: hidden; color: var(--capp-text); font-size: 13.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-profile-grid strong i { margin-left: 4px; color: var(--tm-green); }

.dashboard-ticket-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; }
.dashboard-ticket-summary > div { position: relative; overflow: hidden; padding: 11px 12px; border: 1px solid var(--capp-border); border-radius: 12px; background: var(--capp-input-bg); }
.dashboard-ticket-summary > div::after { content: ""; position: absolute; right: -13px; bottom: -20px; width: 48px; height: 48px; border-radius: 50%; opacity: .08; background: currentColor; }
.dashboard-ticket-summary span, .dashboard-ticket-summary strong { display: block; }
.dashboard-ticket-summary span { color: var(--capp-text-muted); font-size: 11.5px; font-weight: 850; text-transform: uppercase; }
.dashboard-ticket-summary strong { margin-top: 3px; color: var(--capp-text); font-size: 20px; font-weight: 950; }
.dashboard-ticket-summary .is-open { color: var(--tm-orange); }
.dashboard-ticket-summary .is-progress { color: var(--tm-primary); }
.dashboard-ticket-summary .is-resolved { color: var(--tm-green); }
.dashboard-list-label { display: block; margin-bottom: 7px; color: var(--capp-text-muted); font-size: 11.5px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.dashboard-recent-tickets { padding-top: 14px; }
.dashboard-ticket-item { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; color: var(--capp-text); border-bottom: 1px solid var(--capp-border); }
.dashboard-ticket-item:hover { color: var(--capp-text); }
.dashboard-ticket-number { width: 36px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #8067e8; background: rgba(128, 103, 232, .1); font-size: 11px; font-weight: 900; }
.dashboard-ticket-copy { min-width: 0; }
.dashboard-ticket-copy strong, .dashboard-ticket-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-ticket-copy strong { font-size: 13.5px; font-weight: 850; }
.dashboard-ticket-copy small { margin-top: 2px; color: var(--capp-text-muted); font-size: 11.5px; }
.dashboard-ticket-item .ticket-status { font-size: 10.5px; }
.dashboard-ticket-empty { flex: 1; display: grid; align-content: center; justify-items: center; min-height: 150px; padding: 20px; color: var(--capp-text-muted); text-align: center; }
.dashboard-ticket-empty i { margin-bottom: 7px; color: #8067e8; font-size: 25px; }
.dashboard-ticket-empty strong { color: var(--capp-text); font-size: 13.5px; }
.dashboard-ticket-empty span { margin-top: 3px; font-size: 11.5px; }
.dashboard-ticket-actions { gap: 8px; }

.dashboard-shortcut-list { display: grid; gap: 8px; padding-top: 14px; }
.dashboard-shortcut-list > a { min-width: 0; display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--capp-border); border-radius: 12px; color: var(--capp-text); background: var(--capp-input-bg); transition: border-color .15s ease, transform .15s ease; }
.dashboard-shortcut-list > a:hover { transform: translateX(2px); border-color: rgba(10, 85, 200, .35); color: var(--capp-text); }
.dashboard-shortcut-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 14px; }
.dashboard-shortcut-icon.is-purple { color: #8067e8; background: rgba(128, 103, 232, .11); }
.dashboard-shortcut-icon.is-warning { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.dashboard-shortcut-icon.is-success { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.dashboard-shortcut-list > a > span:nth-child(2) { min-width: 0; }
.dashboard-shortcut-list strong, .dashboard-shortcut-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-shortcut-list strong { font-size: 11.5px; }
.dashboard-shortcut-list small { margin-top: 2px; color: var(--capp-text-muted); font-size: 9.5px; }
.dashboard-shortcut-list > a > i { color: var(--capp-text-muted); font-size: 10px; }
.dashboard-shortcut-list em { min-width: 23px; padding: 4px 6px; border-radius: 999px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 10px; font-style: normal; font-weight: 900; text-align: center; }

.dashboard-referral-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 58px minmax(300px, 1fr) minmax(390px, .82fr);
  align-items: center;
  gap: 20px;
  margin: 0 0 17px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(120deg, #0867d7 0%, #2c67e7 50%, #7158ef 100%);
  box-shadow: 0 15px 35px rgba(34, 86, 202, .16);
}
.dashboard-referral-orb { position: absolute; z-index: -1; display: block; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.dashboard-referral-orb.is-one { width: 190px; height: 190px; top: -125px; left: 37%; }
.dashboard-referral-orb.is-two { width: 125px; height: 125px; right: -38px; bottom: -72px; }
.dashboard-referral-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 17px; color: #fff; background: rgba(255, 255, 255, .14); font-size: 23px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); }
.dashboard-referral-copy { min-width: 0; }
.dashboard-referral-copy > span { display: block; color: rgba(255, 255, 255, .75); font-size: 10px; font-weight: 950; letter-spacing: .075em; text-transform: uppercase; }
.dashboard-referral-copy h2 { margin: 4px 0 5px; color: #fff; font-size: 20px; font-weight: 950; line-height: 1.2; letter-spacing: -.025em; }
.dashboard-referral-copy p { max-width: 700px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 12px; line-height: 1.5; }
.dashboard-referral-actions { min-width: 0; display: grid; gap: 9px; }
.dashboard-referral-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(4, 22, 71, .26); }
.dashboard-referral-link input { min-width: 0; padding: 11px 13px; border: 0; outline: 0; color: #fff; background: transparent; font-size: 11.5px; font-weight: 750; text-overflow: ellipsis; }
.dashboard-referral-link button { display: flex; align-items: center; gap: 6px; padding: 0 13px; border: 0; border-left: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .1); font-size: 11px; font-weight: 900; transition: background-color .15s ease; }
.dashboard-referral-link button:hover, .dashboard-referral-link button.is-copied { background: rgba(255, 255, 255, .2); }
.dashboard-referral-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.dashboard-referral-buttons .btn { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border-radius: 11px; font-size: 11px; font-weight: 900; }
.dashboard-referral-whatsapp { border: 1px solid #17aa69; color: #fff; background: #17a766; }
.dashboard-referral-whatsapp:hover { border-color: #108851; color: #fff; background: #108851; }
.dashboard-referral-details { border: 1px solid rgba(255, 255, 255, .24); color: #fff; background: rgba(255, 255, 255, .11); }
.dashboard-referral-details:hover { border-color: rgba(255, 255, 255, .38); color: #fff; background: rgba(255, 255, 255, .2); }

@media (max-width: 1200px) {
  .dashboard-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-secondary-grid { grid-template-columns: 1fr; }
  .dashboard-referral-card { grid-template-columns: 58px minmax(0, 1fr); }
  .dashboard-referral-actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (max-width: 760px) {
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .dashboard-hero-actions { width: 100%; }
  .dashboard-hero-actions .btn { flex: 1; justify-content: center; }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .dashboard-referral-actions { grid-template-columns: 1fr; }
  .profile-security-grid { grid-template-columns: 1fr; }
  .profile-site-summary { grid-template-columns: 46px minmax(0, 1fr); }
  .profile-site-readonly { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .dashboard-hero { padding: 18px; }
  .dashboard-hero-actions { flex-direction: column; }
  .dashboard-hero-actions .btn { width: 100%; }
  .dashboard-referral-card { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .dashboard-referral-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
  .dashboard-referral-copy h2 { font-size: 18px; }
  .dashboard-referral-actions { grid-column: 1 / -1; }
  .dashboard-referral-buttons { align-items: stretch; flex-direction: column; }
  .dashboard-referral-buttons .btn { width: 100%; }
  .profile-security-section { padding: 16px; }
  .profile-security-password-grid { grid-template-columns: 1fr; }
  .profile-two-factor-card .profile-security-card-head { padding-right: 0; }
  .profile-two-factor-status { position: static; grid-column: 2; justify-self: start; }
  .profile-security-card form > .btn { justify-self: stretch; width: 100%; }
  .profile-two-factor-flow { grid-template-columns: 1fr; }
  .profile-two-factor-flow > i { transform: rotate(90deg); }
  .dashboard-metric-grid { grid-template-columns: 1fr; }
  .dashboard-panel { padding: 16px; }
  .dashboard-activation-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashboard-task-item { grid-template-columns: 28px minmax(0, 1fr); }
  .dashboard-task-item .btn, .dashboard-task-item form { grid-column: 1 / -1; width: 100%; }
  .dashboard-task-item form .btn { width: 100%; }
  .dashboard-contract-item { grid-template-columns: 38px minmax(0, 1fr); }
  .dashboard-contract-actions { grid-column: 1 / -1; width: 100%; }
  .dashboard-contract-actions .btn { width: 100%; flex: 1; }
  .dashboard-profile-grid { grid-template-columns: 1fr; }
  .dashboard-profile-grid > div.is-wide { grid-column: auto; }
  .dashboard-ticket-item { grid-template-columns: 36px minmax(0, 1fr); }
  .dashboard-ticket-item .ticket-status { grid-column: 2; justify-self: start; }
  .dashboard-ticket-actions .btn { flex: 1; justify-content: center; }
  .dashboard-panel-footer:not(.dashboard-ticket-actions) .btn, .profile-form-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Checklist "próximos passos" / notificações ---------- */
.client-app-checklist { display: grid; gap: 10px; }
.client-app-checklist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--capp-input-bg);
  border: 1px solid var(--capp-border);
  flex-wrap: wrap;
}
.client-app-checklist-item .check-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 14px;
  background: var(--capp-card-bg); border: 1px solid var(--capp-border); color: var(--tm-orange);
}
.client-app-checklist-item strong { display: block; font-size: 14px; color: var(--capp-text); }
.client-app-checklist-item span { color: var(--capp-text-muted); font-size: 13px; }
.client-app-checklist-item > div { flex: 1 1 200px; }
.client-app-checklist-item .btn,
.client-app-checklist-item form { margin-left: auto; flex: 0 0 auto; }

/* ---------- Cards de plano ---------- */
.client-app-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.client-app-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--capp-border);
  border-radius: 20px;
  padding: 24px 22px;
  background: var(--capp-card-bg);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.client-app-plan-card:hover { transform: translateY(-4px); border-color: var(--tm-primary); box-shadow: 0 16px 36px rgba(10, 85, 200, .12); }
.client-app-plan-card.is-selected { border-color: var(--tm-primary); background: linear-gradient(160deg, rgba(10, 85, 200, .12), rgba(25, 196, 255, .05)); }
.client-app-plan-card.is-featured { border-color: rgba(10, 85, 200, .45); box-shadow: 0 14px 34px rgba(10, 85, 200, .14); }

.client-app-plan-card .plan-badge {
  position: absolute; top: 16px; right: 16px;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--tm-orange), #ff6b2b);
  color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .02em;
}
.client-app-plan-card .plan-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent)); color: #fff; font-size: 19px;
  box-shadow: 0 10px 20px rgba(10, 85, 200, .22);
}
.client-app-plan-card strong { display: block; font-size: 17px; font-weight: 950; color: var(--capp-text); margin-bottom: 6px; }
.client-app-plan-card p { color: var(--capp-text-muted); font-size: 13px; line-height: 1.55; margin-bottom: 16px; min-height: 40px; }
.client-app-plan-card .plan-price {
  font-size: 28px; font-weight: 950; letter-spacing: -.03em; color: var(--tm-primary);
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--capp-border);
}
.client-app-plan-card .plan-price span { font-size: 13px; font-weight: 700; color: var(--capp-text-muted); }

.plan-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; flex: 1; }
.plan-features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.5; color: var(--capp-text);
}
.plan-features i { color: var(--tm-green); font-size: 14px; margin-top: 2px; flex: 0 0 auto; }

.client-app-plan-card form { margin-top: auto; }
.client-app-plan-card button { width: 100%; }

/* ============================================================
   Wizard de contratação
   ============================================================ */

@keyframes wizardRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wizardPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes wizardRingPulse {
  0% { box-shadow: 0 0 0 0 rgba(10, 85, 200, .35); }
  70% { box-shadow: 0 0 0 10px rgba(10, 85, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 85, 200, 0); }
}

/* ---------- Stepper ---------- */
.wizard-steps { display: flex; align-items: center; margin-bottom: 26px; }
.wizard-step { display: flex; align-items: center; gap: 10px; animation: wizardRise .7s cubic-bezier(.22, 1, .36, 1) both; }
.wizard-step:nth-child(2) { animation-delay: .1s; }
.wizard-step:nth-child(3) { animation-delay: .2s; }
.wizard-step:nth-child(4) { animation-delay: .3s; }
.wizard-step:not(:last-child) { flex: 1; }
.wizard-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--capp-border);
  margin: 0 12px;
  transition: background-color .4s ease;
}
.wizard-step.is-done:not(:last-child)::after { background: var(--tm-green); }

.wizard-step-dot {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--capp-card-bg); border: 2px solid var(--capp-border); color: var(--capp-text-muted);
  font-weight: 900; font-size: 13px;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.wizard-step.is-current .wizard-step-dot {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
  animation: wizardRingPulse 2s ease-out infinite;
}
.wizard-step.is-done .wizard-step-dot { background: var(--tm-green); border-color: var(--tm-green); color: #fff; }
.wizard-step.is-done .wizard-step-dot i { animation: wizardPop .45s cubic-bezier(.34, 1.56, .64, 1) both; }

.wizard-step-label { font-size: 13px; font-weight: 800; color: var(--capp-text-muted); white-space: nowrap; transition: color .3s ease; }
.wizard-step.is-current .wizard-step-label,
.wizard-step.is-done .wizard-step-label { color: var(--capp-text); }

/* ---------- Painel da etapa ---------- */
.wizard-panel { animation: wizardRise .75s cubic-bezier(.22, 1, .36, 1) .15s both; }
.wizard-panel-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--capp-border);
}
.wizard-panel-icon {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent));
  color: #fff; font-size: 22px;
  box-shadow: 0 12px 26px rgba(10, 85, 200, .28);
}
.wizard-panel-head h2 { font-size: 20px; font-weight: 950; letter-spacing: -.02em; color: var(--capp-text); margin: 0 0 3px; }
.wizard-panel-head p { font-size: 13.5px; color: var(--capp-text-muted); margin: 0; }

/* Entrada escalonada dos campos/cards de cada etapa. */
.wizard-panel .row > [class*="col-"],
.wizard-panel .client-app-plan-grid > * { animation: wizardRise .65s cubic-bezier(.22, 1, .36, 1) both; }
.wizard-panel .row > [class*="col-"]:nth-child(1),
.wizard-panel .client-app-plan-grid > *:nth-child(1) { animation-delay: .22s; }
.wizard-panel .row > [class*="col-"]:nth-child(2),
.wizard-panel .client-app-plan-grid > *:nth-child(2) { animation-delay: .32s; }
.wizard-panel .row > [class*="col-"]:nth-child(3),
.wizard-panel .client-app-plan-grid > *:nth-child(3) { animation-delay: .42s; }
.wizard-panel .row > [class*="col-"]:nth-child(4) { animation-delay: .5s; }
.wizard-panel .row > [class*="col-"]:nth-child(5) { animation-delay: .58s; }

.client-app-plan-card.is-selecting {
  border-color: var(--tm-primary);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 40px rgba(10, 85, 200, .22);
}

/* ---------- Blocos de campos ---------- */
.wizard-fieldset {
  padding: 20px;
  border: 1px solid var(--capp-border);
  border-radius: 18px;
  background: var(--capp-input-bg);
  margin-bottom: 18px;
}
.wizard-fieldset-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--capp-text-muted); margin-bottom: 16px;
}
.wizard-fieldset-title i { color: var(--tm-primary); font-size: 14px; }
.wizard-fieldset .form-control { background: var(--capp-card-bg); }

/* ---------- Escolha do site e domínio ---------- */
.site-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.site-choice-card {
  display: flex; align-items: flex-start; gap: 11px; padding: 17px;
  border: 1px solid var(--capp-border); border-radius: 16px;
  background: var(--capp-input-bg); cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.site-choice-card:hover { border-color: var(--tm-primary); transform: translateY(-2px); }
.site-choice-card.is-selected { border-color: var(--tm-primary); background: rgba(10, 85, 200, .08); box-shadow: 0 10px 24px rgba(10, 85, 200, .08); }
.site-choice-card > input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--tm-primary); }
.site-choice-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: var(--capp-card-bg); color: var(--tm-primary); font-size: 17px; }
.site-choice-card strong { display: block; color: var(--capp-text); font-size: 13.5px; margin-bottom: 3px; }
.site-choice-card small { display: block; color: var(--capp-text-muted); font-size: 12px; line-height: 1.45; }
.site-domain-box { padding: 20px; border: 1px solid var(--capp-border); border-radius: 18px; background: var(--capp-input-bg); }
.site-domain-input-row { display: flex; align-items: stretch; gap: 10px; }
.site-domain-input-row .form-control { min-width: 0; }
.site-domain-composed {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--capp-border); border-radius: 10px;
  overflow: hidden; background: var(--capp-card-bg);
}
.site-domain-fixed {
  display: inline-flex; align-items: center; padding: 0 13px;
  color: var(--capp-text-muted); background: var(--capp-input-bg);
  font-size: 14px; font-weight: 800; white-space: nowrap;
}
.site-domain-composed .form-control {
  min-width: 0; border: 0; border-radius: 0; background: var(--capp-card-bg);
}
.site-domain-composed .form-control:focus { box-shadow: none; }
.site-domain-help { display: block; margin-top: 8px; color: var(--capp-text-muted); font-size: 12px; }
.site-domain-feedback { min-height: 20px; margin-top: 8px; color: var(--capp-text-muted); font-size: 12.5px; font-weight: 750; }
.site-domain-feedback.is-loading { color: var(--tm-primary); }
.site-domain-feedback.is-loading::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--capp-border); border-top-color: var(--tm-primary); border-radius: 50%; animation: wizardSpin .7s linear infinite; }
.site-domain-feedback.is-available { color: var(--tm-green); }
.site-domain-feedback.is-available::before { content: '\F26E'; font-family: 'bootstrap-icons'; margin-right: 5px; }
.site-domain-feedback.is-error { color: var(--tm-orange); }

.input-with-status { position: relative; }
.input-status {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; pointer-events: none;
}
.input-status.is-loading {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--capp-border); border-top-color: var(--tm-primary);
  animation: wizardSpin .7s linear infinite;
}
.input-status.is-ok::before { content: '\F26E'; font-family: 'bootstrap-icons'; color: var(--tm-green); font-size: 15px; }
.input-status.is-error { color: var(--tm-orange); white-space: nowrap; background: var(--capp-card-bg); padding-left: 4px; }

@keyframes wizardFlash {
  from { background-color: rgba(36, 196, 118, .18); border-color: var(--tm-green); }
  to { background-color: var(--capp-card-bg); }
}
.form-control.is-autofilled { animation: wizardFlash 1.2s ease both; }

/* ---------- Ações (voltar / avançar) ---------- */
.wizard-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--capp-border);
}
.client-app-body .btn-ghost {
  background: transparent;
  border: 1px solid var(--capp-border);
  color: var(--capp-text-muted);
  font-weight: 800;
}
.client-app-body .btn-ghost:hover { background: var(--capp-nav-hover); color: var(--capp-text); }

/* ---------- Estado centralizado (projeto sob medida) ---------- */
.wizard-cta { text-align: center; max-width: 620px; margin: 0 auto; padding: 8px 0 4px; }
.wizard-cta-icon {
  width: 74px; height: 74px; margin: 0 auto 22px;
  border-radius: 24px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-accent));
  color: #fff; font-size: 32px;
  box-shadow: 0 18px 38px rgba(10, 85, 200, .3);
}
.wizard-cta h3 { font-size: 24px; font-weight: 950; letter-spacing: -.025em; color: var(--capp-text); margin: 0 0 12px; }
.wizard-cta-lead { font-size: 14.5px; line-height: 1.7; color: var(--capp-text-muted); margin: 0 auto 28px; max-width: 520px; }

.wizard-cta-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  text-align: left;
  margin-bottom: 30px;
}
.wizard-cta-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--capp-border);
  border-radius: 15px;
  background: var(--capp-input-bg);
}
.wizard-cta-step > span {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--capp-card-bg); border: 2px solid var(--tm-primary);
  color: var(--tm-primary); font-size: 12px; font-weight: 950;
}
.wizard-cta-step strong { display: block; font-size: 13.5px; font-weight: 850; color: var(--capp-text); margin-bottom: 2px; }
.wizard-cta-step small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--capp-text-muted); }

.wizard-cta .btn-lg { padding: 15px 34px; font-size: 15.5px; }
.wizard-cta-note { font-size: 12.5px; color: var(--capp-text-muted); margin: 18px 0 0; }

/* ---------- Resumo do pagamento ---------- */
.wizard-summary {
  border: 1px solid var(--capp-border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--capp-input-bg);
}
.wizard-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px;
  font-size: 14px;
}
.wizard-summary-row + .wizard-summary-row { border-top: 1px solid var(--capp-border); }
.wizard-summary-row span { color: var(--capp-text-muted); }
.wizard-summary-row strong { color: var(--capp-text); font-weight: 850; }
.wizard-summary-row.is-total { background: linear-gradient(135deg, rgba(10, 85, 200, .1), rgba(25, 196, 255, .06)); }
.wizard-summary-row.is-total strong { font-size: 24px; font-weight: 950; color: var(--tm-primary); }
.wizard-summary-row.is-total em { font-size: 13px; font-weight: 700; font-style: normal; color: var(--capp-text-muted); }

.wizard-secure-note {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; font-size: 13px; color: var(--capp-text-muted);
}
.wizard-secure-note i { color: var(--tm-green); font-size: 15px; }

.wizard-summary-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 850; color: var(--tm-primary);
}
.wizard-summary-link:hover { text-decoration: underline; }

.payment-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.payment-option-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px;
  border: 1px solid var(--capp-border); border-radius: 18px;
  background: var(--capp-input-bg);
}
.payment-option-card.is-domain { border-color: rgba(10, 85, 200, .38); }
.payment-option-icon {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 13px; background: rgba(10, 85, 200, .12); color: var(--tm-primary); font-size: 18px;
}
.payment-option-card.is-domain .payment-option-icon { background: rgba(255, 145, 0, .13); color: var(--tm-orange); }
.payment-option-content { min-width: 0; flex: 1; }
.payment-option-label { display: block; margin-bottom: 4px; color: var(--capp-text-muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.payment-option-content strong { display: block; color: var(--capp-text); font-size: 15px; overflow-wrap: anywhere; }
.payment-option-content p { margin: 5px 0 15px; color: var(--capp-text-muted); font-size: 13px; line-height: 1.45; }
.payment-option-content .btn { margin-top: 2px; }
.payment-option-status { display: inline-flex; align-items: center; gap: 5px; color: var(--capp-text-muted); font-size: 12px; font-weight: 800; }
.payment-option-status.is-paid { color: var(--tm-green); }

.subscription-page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 4px 0 20px; border-bottom: 1px solid var(--capp-border); margin-bottom: 18px;
}
.client-page-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-primary); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.subscription-page-head h1 { margin: 6px 0 5px; color: var(--capp-text); font-size: 25px; font-weight: 950; letter-spacing: -.025em; }
.subscription-page-head p { margin: 0; color: var(--capp-text-muted); font-size: 13px; }
.subscription-head-action { flex: 0 0 auto; }
.finance-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.finance-summary-card {
  min-width: 0; display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  border: 1px solid var(--capp-border); border-radius: 15px; background: var(--capp-card-bg);
  box-shadow: 0 6px 20px rgba(7, 22, 48, .035);
}
.finance-summary-card.is-highlighted { border-color: rgba(10, 85, 200, .28); background: linear-gradient(135deg, rgba(10, 85, 200, .075), var(--capp-card-bg) 68%); }
.finance-summary-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 17px; }
.finance-summary-icon.is-calendar { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.finance-summary-icon.is-money { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.finance-summary-content { min-width: 0; display: grid; justify-items: start; gap: 3px; }
.finance-summary-label { color: var(--capp-text-muted); font-size: 10.5px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.finance-summary-content > strong { max-width: 100%; overflow: hidden; color: var(--capp-text); font-size: 17px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.finance-summary-note { color: var(--capp-text-muted); font-size: 11px; }
.finance-summary-content .billing-status { margin-top: 2px; }
.subscription-section { margin-top: 26px; }
.subscription-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.subscription-section-head h2 { margin: 0 0 4px; color: var(--capp-text); font-size: 18px; font-weight: 950; }
.subscription-section-head p { margin: 0; color: var(--capp-text-muted); font-size: 12.5px; }
.history-year-control { display: inline-flex; align-items: center; gap: 7px; padding: 6px; border: 1px solid var(--capp-border); border-radius: 15px; background: var(--capp-input-bg); box-shadow: 0 8px 24px rgba(4, 20, 50, .06); }
.history-year-button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--capp-border); border-radius: 10px; color: var(--tm-primary); background: var(--capp-card-bg); font-size: 13px; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.history-year-button:hover { border-color: rgba(10, 85, 200, .35); color: #fff; background: var(--tm-primary); }
.history-year-button.is-disabled { pointer-events: none; color: var(--capp-text-muted); opacity: .38; }
.history-year-control > strong { min-width: 62px; color: var(--capp-text); font-size: 16px; font-weight: 950; text-align: center; }
.history-year-count { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 11.5px; font-weight: 900; white-space: nowrap; }
.history-year-feedback { min-height: 0; color: #dc3545; font-size: 11.5px; font-weight: 750; }
.history-year-feedback:not(:empty) { margin-bottom: 9px; }
.history-year-content { transition: opacity .18s ease, transform .18s ease; }
.history-year-content.is-loading { pointer-events: none; opacity: .45; transform: translateY(3px); }
.section-count-badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; color: var(--tm-orange); background: rgba(255, 145, 0, .11); font-size: 11px; font-weight: 900; }
.subscription-card-list { display: grid; gap: 12px; }
.subscription-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 17px 18px; border: 1px solid var(--capp-border); border-radius: 16px;
  background: var(--capp-card-bg); box-shadow: 0 8px 24px rgba(7, 22, 48, .04);
}
.subscription-card-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--tm-primary); background: rgba(10, 85, 200, .11); font-size: 18px; }
.subscription-card-main { min-width: 0; }
.subscription-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.subscription-card-label { display: block; color: var(--capp-text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.subscription-card h3 { margin: 3px 0 0; color: var(--capp-text); font-size: 16px; font-weight: 900; }
.subscription-status-hint { margin: 7px 0 0; color: var(--capp-text-muted); font-size: 11.5px; }
.subscription-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 8px; color: var(--capp-text-muted); font-size: 12px; }
.subscription-card-meta i { margin-right: 4px; color: var(--tm-primary); }
.subscription-card-actions { min-width: 205px; display: grid; justify-items: center; gap: 8px; }
.subscription-card-action { width: 100%; justify-content: center; white-space: nowrap; }
.subscription-card-actions .billing-status { justify-self: center; }
.subscription-cancel-trigger {
  width: 100%; justify-content: center; padding: 7px 12px; border: 0; color: var(--capp-text-muted);
  background: transparent; font-size: 11px; font-weight: 800;
}
.subscription-cancel-trigger:hover, .subscription-cancel-trigger:focus-visible { color: #dc3545; background: rgba(220, 53, 69, .08); }
.billing-page-notice { margin-bottom: 18px; }
.cancellation-modal .modal-content { overflow: hidden; border: 1px solid var(--capp-border); border-radius: 20px; color: var(--capp-text); background: var(--capp-card-bg); box-shadow: 0 24px 70px rgba(4, 15, 35, .28); }
.cancellation-modal .modal-header { align-items: flex-start; padding: 22px 22px 16px; border-color: var(--capp-border); }
.cancellation-modal .modal-header > div { display: flex; align-items: center; gap: 11px; }
.cancellation-modal .modal-title { margin: 0; color: var(--capp-text); font-size: 19px; font-weight: 950; }
.cancellation-modal .btn-close { margin-top: 4px; }
[data-theme="dark"] .cancellation-modal .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }
.cancellation-modal-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #dc3545; background: rgba(220, 53, 69, .1); font-size: 17px; }
.cancellation-modal .modal-body { padding: 20px 22px; }
.cancellation-modal .modal-footer { gap: 9px; padding: 16px 22px 22px; border: 0; }
.cancellation-intro { margin: 0 0 17px; color: var(--capp-text-muted); font-size: 13px; line-height: 1.55; }
.cancellation-intro strong { color: var(--capp-text); }
.cancellation-effects { display: grid; gap: 11px; margin: 0 0 19px; padding: 0; list-style: none; }
.cancellation-effects li { display: flex; align-items: flex-start; gap: 9px; color: var(--capp-text-muted); font-size: 12.5px; line-height: 1.45; }
.cancellation-effects li i { flex: 0 0 auto; margin-top: 2px; color: var(--tm-green); }
.cancellation-effects li .bi-info-circle-fill { color: var(--tm-primary); }
.cancellation-confirm { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border: 1px solid var(--capp-border); border-radius: 12px; background: var(--capp-input-bg); color: var(--capp-text); font-size: 12px; font-weight: 750; cursor: pointer; }
.cancellation-confirm input { flex: 0 0 auto; margin-top: 2px; accent-color: #dc3545; }
.cancellation-warning { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border-radius: 13px; color: var(--tm-orange); background: rgba(255, 145, 0, .1); }
.cancellation-warning > i { flex: 0 0 auto; margin-top: 2px; font-size: 18px; }
.cancellation-warning strong { display: block; margin-bottom: 4px; color: var(--capp-text); font-size: 14px; }
.cancellation-warning p { margin: 0; color: var(--capp-text-muted); font-size: 12.5px; line-height: 1.5; }
.cancellation-submit { font-weight: 850; }
.billing-status { width: max-content; max-width: 100%; display: inline-flex; align-items: center; justify-self: start; gap: 5px; padding: 5px 9px; border-radius: 999px; white-space: nowrap; font-size: 10.5px; font-weight: 900; line-height: 1.2; background: var(--capp-input-bg); color: var(--capp-text-muted); }
.billing-status i { font-size: 6px; }
.billing-status.is-active, .billing-status.is-paid { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.billing-status.is-warning { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.billing-status.is-pending { color: var(--tm-primary); background: rgba(10, 85, 200, .1); }
.billing-status.is-muted { color: var(--capp-text-muted); }
.subscription-empty { display: grid; justify-items: center; gap: 6px; padding: 42px 20px; border: 1px dashed var(--capp-border); border-radius: 17px; color: var(--capp-text-muted); text-align: center; }
.subscription-empty.is-compact { padding: 25px 20px; }
.subscription-empty i { margin-bottom: 4px; color: var(--tm-primary); font-size: 28px; }
.subscription-empty strong { color: var(--capp-text); font-size: 14px; }
.subscription-empty span { font-size: 12.5px; }
.subscription-empty .btn { margin-top: 8px; }
.open-invoice-list { display: grid; gap: 10px; }
.open-invoice-card {
  display: grid; grid-template-columns: minmax(250px, 1.5fr) 105px 100px auto 142px; align-items: center; gap: 16px;
  padding: 14px 15px; border: 1px solid var(--capp-border); border-radius: 15px; background: var(--capp-card-bg);
}
.open-invoice-card:hover { border-color: rgba(10, 85, 200, .32); }
.open-invoice-card > .invoice-description { grid-area: invoice-description; }
.open-invoice-card > .open-invoice-detail.is-due { grid-area: invoice-due; }
.open-invoice-card > .open-invoice-detail.is-value { grid-area: invoice-value; }
.open-invoice-card > .billing-status { grid-area: invoice-status; }
.open-invoice-card > .invoice-action { grid-area: invoice-action; }
.open-invoice-card { grid-template-areas: "invoice-description invoice-due invoice-value invoice-status invoice-action"; }
.open-invoice-detail { display: grid; gap: 3px; color: var(--capp-text-muted); font-size: 10.5px; }
.open-invoice-detail > span { font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.open-invoice-detail > strong { color: var(--capp-text); font-size: 12.5px; font-weight: 900; }
.open-invoice-detail.is-value > strong { font-size: 14px; }
.invoice-pay-button { width: 142px; justify-content: center; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.invoice-unavailable { display: block; color: var(--capp-text-muted); font-size: 10.5px; text-align: right; }
.invoice-table-wrap { overflow: hidden; border: 1px solid var(--capp-border); border-radius: 17px; background: var(--capp-card-bg); }
.invoice-table-head, .invoice-table-row { display: grid; grid-template-columns: minmax(240px, 1.6fr) 100px 100px 130px 110px; align-items: center; gap: 14px; padding: 13px 17px; }
.invoice-table-head { color: var(--capp-text-muted); background: var(--capp-input-bg); border-bottom: 1px solid var(--capp-border); font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.invoice-table-row + .invoice-table-row { border-top: 1px solid var(--capp-border); }
.invoice-description { display: flex; align-items: center; gap: 10px; min-width: 0; }
.invoice-description > span:last-child { min-width: 0; }
.invoice-type-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); }
.invoice-type-icon.is-domain { color: var(--tm-orange); background: rgba(255, 145, 0, .11); }
.invoice-type-icon.is-referral { color: #7454ee; background: rgba(116, 84, 238, .11); }
.invoice-description strong, .invoice-description small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-description strong { color: var(--capp-text); font-size: 13px; }
.invoice-description small { margin-top: 2px; color: var(--capp-text-muted); font-size: 11px; }
.invoice-date, .invoice-value { color: var(--capp-text-muted); font-size: 12px; }
.invoice-value { color: var(--capp-text); font-weight: 850; }
.invoice-action { min-width: 0; justify-self: end; text-align: right; }
.invoice-view-link { white-space: nowrap; color: var(--tm-primary); font-size: 12px; font-weight: 850; }

/* ---------- Lista de documentos (contratos em PDF) ---------- */
.client-app-doc-list { display: grid; gap: 10px; }
.client-app-doc {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--capp-border);
  border-radius: 14px;
  background: var(--capp-input-bg);
  transition: border-color .18s ease;
}
.client-app-doc:hover { border-color: var(--tm-primary); }
.client-app-doc .doc-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(214, 45, 45, .1); color: #d62d2d; font-size: 20px;
}
.client-app-doc > div:not(.doc-actions) { flex: 1 1 220px; min-width: 0; }
.client-app-doc strong { display: block; font-size: 13.5px; color: var(--capp-text); margin-bottom: 2px; }
.client-app-doc span:not(.doc-icon) { display: block; font-size: 12.5px; color: var(--capp-text-muted); }
.client-app-doc .doc-actions { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.client-app-doc.is-ended { opacity: .72; }
.client-app-doc.is-ended .doc-icon { background: var(--capp-nav-hover); color: var(--capp-text-muted); }
.doc-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 900;
  background: var(--capp-nav-hover); color: var(--capp-text-muted);
  vertical-align: middle;
}
.doc-tag.is-current { background: rgba(36, 196, 118, .13); color: var(--tm-green); }

/* ---------- Chamados de suporte ---------- */
.ticket-subject-combobox { position: relative; }
.ticket-subject-control { position: relative; }
.ticket-subject-control > .bi-search {
  position: absolute; z-index: 2; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--capp-text-muted); font-size: 14px; pointer-events: none;
}
.ticket-subject-input { padding-left: 40px; padding-right: 44px; }
.ticket-subject-toggle {
  position: absolute; z-index: 2; top: 50%; right: 6px; width: 34px; height: 34px;
  display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 9px;
  background: transparent; color: var(--capp-text-muted); transition: color .18s ease, background .18s ease;
}
.ticket-subject-toggle:hover { color: var(--tm-primary); background: rgba(10, 85, 200, .08); }
.ticket-subject-toggle i { transition: transform .18s ease; }
.ticket-subject-combobox.is-open .ticket-subject-toggle i { transform: rotate(180deg); }
.ticket-subject-menu {
  position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; right: 0;
  max-height: 330px; overflow-y: auto; padding: 7px;
  border: 1px solid var(--capp-border); border-radius: 14px; background: var(--capp-card-bg);
  box-shadow: 0 18px 45px rgba(5, 18, 42, .18);
}
.ticket-subject-menu[hidden], .ticket-subject-option[hidden], .ticket-subject-empty[hidden] { display: none !important; }
.ticket-subject-menu-head {
  padding: 7px 9px 6px; color: var(--capp-text-muted); font-size: 10px; font-weight: 900;
  letter-spacing: .055em; text-transform: uppercase;
}
.ticket-subject-option {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px;
  border: 0; border-radius: 10px; background: transparent; color: var(--capp-text); text-align: left;
  transition: color .15s ease, background .15s ease;
}
.ticket-subject-option:hover, .ticket-subject-option.is-active { color: var(--tm-primary); background: rgba(10, 85, 200, .09); }
.ticket-subject-option-icon {
  width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 9px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 13px;
}
.ticket-subject-option > span:last-child { min-width: 0; }
.ticket-subject-option strong, .ticket-subject-option small { display: block; }
.ticket-subject-option strong { overflow: hidden; font-size: 12.5px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.ticket-subject-option small { margin-top: 1px; color: var(--capp-text-muted); font-size: 10.5px; }
.ticket-subject-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 14px; color: var(--capp-text-muted); text-align: center; }
.ticket-subject-empty i { margin-bottom: 2px; color: var(--tm-primary); font-size: 20px; }
.ticket-subject-empty strong { color: var(--capp-text); font-size: 12.5px; }
.ticket-subject-empty span { font-size: 11px; }
.ticket-subject-menu-foot {
  margin-top: 5px; padding: 8px 9px 3px; border-top: 1px solid var(--capp-border);
  color: var(--capp-text-muted); font-size: 10.5px; line-height: 1.4;
}
.ticket-subject-menu-foot i { margin-right: 4px; color: var(--tm-primary); }
.ticket-subject-help { display: block; margin-top: 6px; color: var(--capp-text-muted); font-size: 11px; }
.ticket-panel-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--capp-border);
}
.ticket-panel-head .wizard-panel-icon { width: 46px; height: 46px; font-size: 19px; }
.ticket-panel-head h2 { font-size: 19px; font-weight: 950; color: var(--capp-text); margin: 0 0 3px; }
.ticket-panel-head p { font-size: 13px; color: var(--capp-text-muted); margin: 0; }
.ticket-form-note {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--capp-text-muted); font-size: 12.5px; line-height: 1.45;
  margin: 0 0 18px;
}
.ticket-form-note i { color: var(--tm-primary); font-size: 15px; margin-top: 1px; }
.ticket-list-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--capp-border);
}
.ticket-list-head h2 { color: var(--capp-text); font-weight: 900; }
.ticket-list-head p { font-size: 12.5px; }
.ticket-count {
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: rgba(10, 85, 200, .12); color: var(--tm-primary); font-size: 12px; font-weight: 900;
}
.ticket-empty {
  display: grid; justify-items: center; gap: 5px; padding: 42px 20px;
  color: var(--capp-text-muted); text-align: center;
}
.ticket-empty i { color: var(--tm-primary); font-size: 30px; margin-bottom: 6px; }
.ticket-empty strong { color: var(--capp-text); font-size: 14px; }
.ticket-empty span { font-size: 12.5px; }
.client-ticket-list { display: grid; gap: 12px; }
.client-ticket-item {
  padding: 16px; border: 1px solid var(--capp-border); border-radius: 15px;
  background: var(--capp-input-bg); transition: border-color .18s ease;
}
.client-ticket-item:hover { border-color: var(--tm-primary); }
.ticket-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ticket-number { display: block; margin-bottom: 3px; color: var(--capp-text-muted); font-size: 11px; font-weight: 800; }
.ticket-item-top h3 { color: var(--capp-text); font-size: 15px; font-weight: 850; line-height: 1.35; margin: 0; }
.ticket-status {
  flex: 0 0 auto; padding: 5px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; white-space: nowrap;
  background: var(--capp-card-bg); color: var(--capp-text-muted); border: 1px solid var(--capp-border);
}
.ticket-status.is-open { color: var(--tm-orange); border-color: rgba(255, 145, 0, .35); background: rgba(255, 145, 0, .08); }
.ticket-status.is-progress { color: var(--tm-primary); border-color: rgba(10, 85, 200, .3); background: rgba(10, 85, 200, .08); }
.ticket-status.is-resolved { color: var(--tm-green); border-color: rgba(36, 196, 118, .35); background: rgba(36, 196, 118, .08); }
.ticket-message { color: var(--capp-text); font-size: 13px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; margin: 13px 0 12px; }
.client-ticket-item footer { color: var(--capp-text-muted); font-size: 11.5px; }
.client-ticket-item footer i { margin-right: 4px; }

/* ---------- Visualizador do contrato ---------- */
.contract-viewer {
  border: 1px solid var(--capp-border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--capp-card-bg);
}
.contract-viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--capp-input-bg);
  border-bottom: 1px solid var(--capp-border);
}
.contract-viewer-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 850; color: var(--capp-text); }
.contract-viewer-name i { color: var(--tm-primary); font-size: 15px; }

.contract-read-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--capp-card-bg); border: 1px solid var(--capp-border);
  font-size: 12px; font-weight: 800; color: var(--capp-text-muted);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.contract-read-badge i { font-size: 13px; animation: wizardNudge 1.4s ease-in-out infinite; }
.contract-read-badge.is-read { color: var(--tm-green); border-color: rgba(36, 196, 118, .45); background: rgba(36, 196, 118, .1); }
.contract-read-badge.is-read i { animation: wizardPop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes wizardNudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.contract-box {
  max-height: 460px;
  overflow-y: auto;
  padding: 30px 34px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--capp-text);
  scroll-behavior: smooth;
}
.contract-box h3 {
  font-size: 15px;
  text-align: center;
  line-height: 1.6;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--capp-border);
}
.contract-box p { margin-bottom: 16px; text-align: justify; }
.contract-box p strong { color: var(--tm-primary); }
.contract-box::-webkit-scrollbar { width: 12px; }
.contract-box::-webkit-scrollbar-track { background: transparent; }
.contract-box::-webkit-scrollbar-thumb { background: var(--capp-border); border-radius: 999px; border: 4px solid transparent; background-clip: content-box; }
.contract-box::-webkit-scrollbar-thumb:hover { background: var(--capp-text-muted); background-clip: content-box; }

/* ---------- Painel de aceite ---------- */
.contract-accept-panel {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--capp-border);
  border-radius: 18px;
  background: var(--capp-input-bg);
}

.signature-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.signature-block-head span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 850; color: var(--capp-text); }
.signature-block-head span i { color: var(--tm-primary); }
.signature-block-head em { font-style: normal; font-weight: 600; color: var(--capp-text-muted); }
.signature-block > small { display: block; margin-top: 8px; font-size: 12px; color: var(--capp-text-muted); }

.signature-pad-wrap {
  position: relative;
  display: block;
  max-width: 420px;
  border: 2px dashed var(--capp-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.signature-pad-wrap:hover { border-color: var(--tm-primary); }
.signature-pad-wrap.has-signature { border-style: solid; border-color: var(--tm-green); box-shadow: 0 0 0 .2rem rgba(36, 196, 118, .12); }
.signature-pad-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; position: relative; z-index: 1; }
.signature-pad-wrap::after {
  content: 'Assine aqui com o mouse ou o dedo';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13px; color: #9fb0c9; pointer-events: none;
  transition: opacity .2s ease;
}
.signature-pad-wrap.has-signature::after { opacity: 0; }

.contract-agree {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 20px 0 0; padding: 16px;
  border: 1px solid var(--capp-border); border-radius: 14px;
  background: var(--capp-card-bg);
  cursor: pointer;
  font-size: 14px; line-height: 1.55; color: var(--capp-text);
  transition: border-color .2s ease, background-color .2s ease;
}
.contract-agree:hover { border-color: var(--tm-primary); }
.contract-agree input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--tm-primary); cursor: pointer; }
.contract-agree:has(input:checked) { border-color: var(--tm-green); background: rgba(36, 196, 118, .07); }

/* ---------- Loader temático ---------- */
.wizard-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(6, 18, 40, .55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}
.wizard-loader.is-visible { opacity: 1; }

.wizard-loader-card {
  background: var(--capp-card-bg);
  border: 1px solid var(--capp-border);
  border-radius: 24px;
  padding: 38px 44px;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 30px 70px rgba(6, 18, 40, .3);
  transform: translateY(12px) scale(.97);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.wizard-loader.is-visible .wizard-loader-card { transform: translateY(0) scale(1); }

.wizard-loader-icon { position: relative; width: 96px; height: 96px; margin: 0 auto 22px; }
.wizard-loader-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--capp-border);
  border-top-color: var(--tm-primary);
  border-right-color: var(--tm-accent);
  border-radius: 50%;
  animation: wizardSpin 1s linear infinite;
}
@keyframes wizardSpin { to { transform: rotate(360deg); } }

.wizard-loader-house {
  position: absolute;
  inset: 22px;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  fill: none;
  stroke: var(--tm-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* pathLength="100" normaliza o traço, então o dash não depende do tamanho real. */
.wizard-loader-house path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: wizardDraw 2.4s ease-in-out infinite;
}
.wizard-loader-house .house-walls { animation-delay: .35s; }
.wizard-loader-house .house-door { animation-delay: .7s; stroke: var(--tm-orange); }
@keyframes wizardDraw {
  0% { stroke-dashoffset: 100; }
  45%, 75% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

.wizard-loader-card strong { display: block; font-size: 18px; font-weight: 950; letter-spacing: -.02em; color: var(--capp-text); margin-bottom: 8px; }
.wizard-loader-card > span {
  display: block;
  min-height: 38px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--capp-text-muted);
  transition: opacity .18s ease, transform .18s ease;
}
.wizard-loader-card > span.is-changing { opacity: 0; transform: translateY(-4px); }

.wizard-loader-track {
  height: 5px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--capp-border);
  overflow: hidden;
}
.wizard-loader-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tm-primary), var(--tm-accent));
}
/* Espera de duração desconhecida (ex.: resposta do Asaas). */
.wizard-loader-bar.is-indeterminate {
  width: 40%;
  animation: wizardIndeterminate 1.3s ease-in-out infinite;
}
@keyframes wizardIndeterminate {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 1100px) {
  .finance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-summary-card.is-highlighted { grid-column: 1 / -1; }
  .open-invoice-card {
    grid-template-columns: minmax(220px, 1fr) 100px 142px;
    grid-template-areas:
      "invoice-description invoice-value invoice-action"
      "invoice-description invoice-due invoice-status";
    gap: 8px 14px;
  }
  .open-invoice-card > .billing-status { align-self: center; }
}

@media (max-width: 640px) {
  .wizard-step-label { display: none; }
  .ticket-subject-menu { max-height: 280px; }
  .wizard-loader-card { padding: 30px 26px; }
  .contract-box { padding: 22px 18px; }
  .wizard-fieldset { padding: 16px; }
  .site-choice-grid { grid-template-columns: 1fr; }
  .site-domain-fixed { padding-left: 9px; padding-right: 9px; font-size: 13px; }
  .subscription-page-head { align-items: flex-start; flex-direction: column; }
  .subscription-page-head .btn { width: 100%; justify-content: center; }
  .finance-summary-grid { grid-template-columns: 1fr; }
  .finance-summary-card.is-highlighted { grid-column: auto; }
  .subscription-section-head { align-items: flex-start; }
  #historico .subscription-section-head { flex-direction: column; }
  .history-year-control { width: 100%; }
  .history-year-control > strong { flex: 1; }
  .subscription-card { grid-template-columns: 43px minmax(0, 1fr); align-items: start; padding: 15px; }
  .subscription-card-main { grid-column: 2; }
  .subscription-card-top { align-items: flex-start; flex-direction: column; gap: 7px; }
  .subscription-card-actions { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .cancellation-modal .modal-footer { align-items: stretch; flex-direction: column-reverse; }
  .cancellation-modal .modal-footer .btn { width: 100%; justify-content: center; }
  .open-invoice-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "invoice-description invoice-description"
      "invoice-due invoice-value"
      "invoice-status invoice-status"
      "invoice-action invoice-action";
    gap: 13px 16px; padding: 15px;
  }
  .open-invoice-detail.is-value { text-align: right; }
  .open-invoice-card > .invoice-action { width: 100%; justify-self: stretch; }
  .invoice-pay-button { width: 100%; }
  .invoice-table-head { display: none; }
  .invoice-table-row { grid-template-columns: 1fr auto; gap: 9px 12px; padding: 15px; }
  .invoice-description { grid-column: 1 / -1; }
  .invoice-date { grid-column: 1; }
  .invoice-value { grid-column: 2; text-align: right; }
  .invoice-table-row .billing-status { grid-column: 1; justify-self: start; }
  .invoice-action { grid-column: 2; grid-row: 3; }
  .wizard-actions { flex-direction: column-reverse; align-items: stretch; }
  .wizard-actions .btn { width: 100%; justify-content: center; }
}

/* Respeita quem prefere menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  .wizard-step,
  .wizard-panel,
  .wizard-panel .row > [class*="col-"],
  .wizard-panel .client-app-plan-grid > *,
  .wizard-step.is-done .wizard-step-dot i,
  .wizard-step.is-current .wizard-step-dot,
  .contract-read-badge i,
  .form-control.is-autofilled { animation: none; }
}

@media (max-width: 900px) {
  .client-app-body.client-sidebar-open { overflow: hidden; }
  .client-app-shell { display: block; min-height: 100vh; }
  .client-app-sidebar {
    position: fixed; z-index: 1050; inset: 0 auto 0 0; width: min(84vw, 310px); height: 100dvh;
    overflow-y: auto; flex: none; align-items: stretch; padding: 20px 16px;
    border-right: 1px solid var(--capp-border); box-shadow: 22px 0 55px rgba(3, 12, 30, .28);
    transform: translateX(-105%); visibility: hidden;
    transition: transform .24s ease, visibility .24s ease, background-color .2s ease;
  }
  .client-app-shell.sidebar-mobile-open .client-app-sidebar { transform: translateX(0); visibility: visible; }
  .client-app-sidebar-overlay {
    position: fixed; z-index: 1040; inset: 0; width: 100%; height: 100%; display: block;
    padding: 0; border: 0; background: rgba(3, 10, 24, .62); opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity .24s ease, visibility .24s ease;
  }
  .client-app-shell.sidebar-mobile-open .client-app-sidebar-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .client-app-sidebar-top { justify-content: space-between; padding: 0 4px 18px; margin: 0 0 18px; border-bottom: 1px solid var(--capp-border); }
  .client-app-sidebar-brand img { height: 29px; }
  .client-app-sidebar-brand-mini { display: none !important; }
  .sidebar-mobile-close {
    width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
    border: 1px solid var(--capp-border); border-radius: 11px; background: var(--capp-input-bg);
    color: var(--capp-text); font-size: 16px;
  }
  .client-app-nav { flex: none; flex-direction: column; overflow: visible; }
  .client-app-nav-link { justify-content: flex-start !important; padding: 12px 14px !important; }
  .client-app-nav-link span { display: inline !important; }
  .client-app-nav-link .nav-badge { display: grid !important; }
  .client-app-sidebar-section { align-items: stretch !important; border-top: 1px solid var(--capp-border); margin-top: 16px; padding-top: 14px; flex-direction: column; }
  .sidebar-section-label { display: block !important; }
  .client-app-plan-promo { display: block !important; margin-top: auto; }
  .client-app-content { width: 100%; }
  .client-app-topbar { position: sticky; z-index: 100; top: 0; padding: 14px 20px; background: var(--capp-bg); flex-wrap: nowrap; }
  .sidebar-toggle { width: 40px; height: 40px; font-size: 18px; }
  .client-app-main { padding: 20px; }
}

@media (max-width: 640px) {
  .client-app-topbar { padding: 12px 14px; gap: 10px; }
  .client-app-topbar-left { gap: 9px; }
  .client-app-topbar-actions { gap: 6px; }
  .client-crm-return { width: 42px; min-width: 42px; height: 42px; padding: 0; }
  .client-crm-return span { display: none; }
  .client-app-profile-btn { width: 42px; height: 42px; padding: 4px; justify-content: center; }
  .client-app-profile-name, .client-app-profile-btn > .bi-chevron-down { display: none; }
  .client-app-profile-avatar { width: 32px; height: 32px; }
  .client-app-main { padding: 16px 14px 24px; }
}

/* ---------- Contrato solicitado pela gestão ---------- */
.contract-signing-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--capp-border);
}
.contract-signing-head h1 { margin: 5px 0 4px; color: var(--capp-text); font-size: 27px; font-weight: 950; letter-spacing: -.025em; }
.contract-signing-head p { max-width: 680px; margin: 0; color: var(--capp-text-muted); font-size: 13.5px; line-height: 1.55; }
.contract-signing-status {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 11px;
  border: 1px solid rgba(255, 145, 0, .22); border-radius: 999px; color: var(--tm-orange);
  background: rgba(255, 145, 0, .08); font-size: 11.5px; font-weight: 900;
}
.client-page-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-primary); font-size: 11px; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }

.contract-signing-progress {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px;
}
.contract-signing-progress > div {
  min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 13px;
  border: 1px solid var(--capp-border); border-radius: 14px; background: var(--capp-card-bg);
}
.contract-signing-progress > div > i {
  width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px;
  color: var(--capp-text-muted); background: var(--capp-input-bg); font-size: 12px; font-style: normal; font-weight: 950;
}
.contract-signing-progress > div > span { min-width: 0; display: grid; }
.contract-signing-progress strong { overflow: hidden; color: var(--capp-text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.contract-signing-progress small { overflow: hidden; color: var(--capp-text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.contract-signing-progress > div.is-active { border-color: rgba(10, 85, 200, .32); background: linear-gradient(135deg, rgba(10, 85, 200, .08), var(--capp-card-bg)); }
.contract-signing-progress > div.is-active > i { color: #fff; background: var(--tm-primary); }
.contract-signing-progress > div.is-done > i { color: #fff; background: var(--tm-green); }

.contract-profile-step { border-radius: 18px; }
.contract-request-terms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px;
}
.contract-request-terms > div { min-width: 0; padding: 12px 13px; border: 1px solid var(--capp-border); border-radius: 12px; background: var(--capp-input-bg); }
.contract-request-terms span, .contract-request-terms strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-request-terms span { margin-bottom: 3px; color: var(--capp-text-muted); font-size: 10.5px; font-weight: 850; text-transform: uppercase; }
.contract-request-terms strong { color: var(--capp-text); font-size: 13px; font-weight: 900; }

.contract-signing-complete, .contract-signing-empty {
  min-height: 410px; display: grid; align-content: center; justify-items: center; padding: 42px 28px;
  border: 1px solid var(--capp-border); border-radius: 20px; background: var(--capp-card-bg); text-align: center;
}
.contract-complete-icon, .contract-signing-empty > span:first-child {
  width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 18px;
  color: var(--tm-green); background: rgba(36, 196, 118, .11); font-size: 27px;
}
.contract-signing-empty > span:first-child { color: var(--tm-primary); background: rgba(10, 85, 200, .1); }
.contract-signing-complete h2, .contract-signing-empty h2 { margin: 6px 0; color: var(--capp-text); font-size: 24px; font-weight: 950; letter-spacing: -.02em; }
.contract-signing-complete > p, .contract-signing-empty > p { max-width: 570px; margin: 0; color: var(--capp-text-muted); font-size: 13.5px; line-height: 1.6; }
.contract-complete-summary { width: min(100%, 680px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 18px; overflow: hidden; border: 1px solid var(--capp-border); border-radius: 14px; background: var(--capp-input-bg); }
.contract-complete-summary > div { min-width: 0; padding: 14px; border-right: 1px solid var(--capp-border); }
.contract-complete-summary > div:last-child { border-right: 0; }
.contract-complete-summary span, .contract-complete-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-complete-summary span { color: var(--capp-text-muted); font-size: 10.5px; font-weight: 850; text-transform: uppercase; }
.contract-complete-summary strong { margin-top: 3px; color: var(--capp-text); font-size: 13px; font-weight: 900; }
.contract-complete-actions { display: flex; align-items: center; justify-content: center; gap: 9px; }
.contract-signing-empty .btn { margin-top: 22px; }

.dashboard-contract-request {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin-top: 14px; padding: 13px; border: 1px solid rgba(255, 145, 0, .22); border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 145, 0, .075), var(--capp-input-bg));
}
.dashboard-contract-request-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--tm-orange); background: rgba(255, 145, 0, .11); font-size: 16px; }
.dashboard-contract-request > div { min-width: 0; }
.dashboard-contract-request > div > span, .dashboard-contract-request > div > strong, .dashboard-contract-request > div > p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-contract-request > div > span { color: var(--tm-orange); font-size: 10px; font-weight: 900; letter-spacing: .055em; }
.dashboard-contract-request > div > strong { margin-top: 2px; color: var(--capp-text); font-size: 14px; font-weight: 900; }
.dashboard-contract-request > div > p { margin: 2px 0 0; color: var(--capp-text-muted); font-size: 11.5px; }
.dashboard-contract-request .btn { white-space: nowrap; }

@media (max-width: 760px) {
  .contract-signing-head { align-items: flex-start; flex-direction: column; }
  .contract-signing-progress { grid-template-columns: 1fr; }
  .contract-request-terms { grid-template-columns: 1fr; }
  .contract-complete-summary { grid-template-columns: 1fr; }
  .contract-complete-summary > div { border-right: 0; border-bottom: 1px solid var(--capp-border); }
  .contract-complete-summary > div:last-child { border-bottom: 0; }
  .dashboard-contract-request { grid-template-columns: 42px minmax(0, 1fr); }
  .dashboard-contract-request .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .contract-signing-head h1 { font-size: 24px; }
  .contract-signing-complete, .contract-signing-empty { min-height: 360px; padding: 32px 18px; }
  .contract-complete-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .contract-complete-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Avisos prioritários da conta ---------- */
.client-attention-modal { --attention-accent: #5a60f2; }
.client-attention-modal .modal-dialog { max-width: 790px; padding: 14px; }
.client-attention-modal .modal-content {
  overflow: hidden; border: 1px solid rgba(108, 128, 174, .25); border-radius: 27px;
  background: var(--capp-card-bg); color: var(--capp-text);
  box-shadow: 0 30px 90px rgba(0, 12, 40, .42);
}
.client-attention-modal.show ~ .modal-backdrop { backdrop-filter: blur(4px); }
.client-attention-hero {
  position: relative; isolation: isolate; min-height: 268px; display: grid; align-content: center;
  justify-items: center; overflow: hidden; padding: 38px 76px 54px; color: #fff; text-align: center;
  background: linear-gradient(125deg, #1768dc 0%, #4164e8 50%, #7652ee 100%);
  clip-path: ellipse(82% 72% at 50% 28%);
}
.client-attention-hero.is-payment { background: linear-gradient(125deg, #e47316 0%, #ef7d28 44%, #e64670 100%); }
.client-attention-hero.is-contract { background: linear-gradient(125deg, #086ddc 0%, #3266ea 52%, #6158ed 100%); }
.client-attention-close {
  position: absolute; z-index: 4; top: 18px; right: 18px; width: 42px; height: 42px;
  display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; font-size: 16px;
  transition: transform .18s ease, background-color .18s ease;
}
.client-attention-close:hover { transform: rotate(5deg); background: rgba(255, 255, 255, .23); }
.client-attention-main-icon {
  position: relative; z-index: 2; width: 68px; height: 68px; display: grid; place-items: center;
  margin-bottom: 16px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%;
  background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .035);
  font-size: 27px;
}
.client-attention-eyebrow {
  position: relative; z-index: 2; margin-bottom: 7px; color: rgba(255, 255, 255, .82);
  font-size: 10.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
}
.client-attention-hero h2 {
  position: relative; z-index: 2; max-width: 630px; margin: 0; color: #fff;
  font-size: clamp(25px, 3vw, 34px); font-weight: 950; line-height: 1.1; letter-spacing: -.03em;
}
.client-attention-hero > p {
  position: relative; z-index: 2; max-width: 590px; margin: 10px 0 0; color: rgba(255, 255, 255, .88);
  font-size: 14px; line-height: 1.55;
}
.client-attention-orb, .client-attention-dot { position: absolute; z-index: 1; display: block; pointer-events: none; }
.client-attention-orb { border-radius: 50%; background: rgba(255, 255, 255, .12); }
.client-attention-orb.is-one { width: 205px; height: 205px; top: -68px; left: -43px; }
.client-attention-orb.is-two { width: 132px; height: 132px; right: -28px; bottom: -12px; }
.client-attention-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .62); }
.client-attention-dot.is-one { top: 76px; left: 80px; }
.client-attention-dot.is-two { top: 35px; right: 97px; }

.client-attention-body { margin-top: -42px; padding: 57px 34px 27px; background: var(--capp-card-bg); }
.client-attention-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.client-attention-items.has-two-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-attention-item {
  min-width: 0; display: flex; align-items: stretch; flex-direction: column; padding: 20px;
  border: 1px solid var(--capp-border); border-radius: 18px; background: var(--capp-input-bg);
}
.client-attention-item.is-payment { border-color: rgba(238, 122, 38, .25); background: linear-gradient(145deg, rgba(238, 122, 38, .08), var(--capp-input-bg) 48%); }
.client-attention-item.is-contract { border-color: rgba(70, 99, 235, .25); background: linear-gradient(145deg, rgba(70, 99, 235, .08), var(--capp-input-bg) 48%); }
.client-attention-item-head { display: flex; align-items: center; gap: 12px; }
.client-attention-item-icon {
  width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px;
  color: var(--tm-orange); background: rgba(255, 145, 0, .12); font-size: 18px;
}
.client-attention-item.is-contract .client-attention-item-icon { color: #526bf0; background: rgba(82, 107, 240, .12); }
.client-attention-item-head > div { min-width: 0; }
.client-attention-item-head span:not(.client-attention-item-icon) {
  display: block; color: var(--capp-text-muted); font-size: 9.5px; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase;
}
.client-attention-item h3 { margin: 2px 0 0; color: var(--capp-text); font-size: 16px; font-weight: 950; letter-spacing: -.015em; }
.client-attention-item > p { min-height: 42px; margin: 15px 0; color: var(--capp-text-muted); font-size: 12.5px; line-height: 1.55; }
.client-attention-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 17px;
  overflow: hidden; border: 1px solid var(--capp-border); border-radius: 12px; background: var(--capp-border);
}
.client-attention-summary > div { min-width: 0; padding: 10px 11px; background: var(--capp-card-bg); }
.client-attention-summary span, .client-attention-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-attention-summary span { margin-bottom: 2px; color: var(--capp-text-muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.client-attention-summary strong { color: var(--capp-text); font-size: 12px; font-weight: 900; }
.client-attention-action { width: 100%; justify-content: center; margin-top: auto; }
.client-attention-footer {
  display: flex; align-items: center; gap: 9px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--capp-border); color: var(--capp-text-muted); font-size: 11.5px;
}
.client-attention-footer > i { flex: 0 0 auto; color: var(--tm-green); font-size: 15px; }
.client-attention-footer > span { flex: 1; }
.client-attention-footer .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 700px) {
  .client-attention-modal .modal-dialog { margin: 8px auto; padding: 8px; }
  .client-attention-modal .modal-content { border-radius: 22px; }
  .client-attention-hero { min-height: 240px; padding: 34px 28px 48px; clip-path: ellipse(105% 71% at 50% 27%); }
  .client-attention-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .client-attention-main-icon { width: 60px; height: 60px; margin-bottom: 13px; font-size: 23px; }
  .client-attention-hero h2 { font-size: 25px; }
  .client-attention-body { margin-top: -34px; padding: 49px 18px 20px; }
  .client-attention-items.has-two-items { grid-template-columns: 1fr; }
  .client-attention-item > p { min-height: 0; }
  .client-attention-footer { align-items: stretch; flex-wrap: wrap; }
  .client-attention-footer > span { flex-basis: calc(100% - 28px); }
  .client-attention-footer .btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .client-attention-modal .modal-dialog { padding: 3px; }
  .client-attention-hero { min-height: 232px; padding-inline: 20px; }
  .client-attention-hero h2 { font-size: 22px; }
  .client-attention-hero > p { font-size: 12.5px; }
  .client-attention-item { padding: 16px; }
  .client-attention-summary { grid-template-columns: 1fr; }
}

/* ---------- Programa de indicações ---------- */
.client-plan-intent {
  display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid rgba(36, 196, 118, .24); border-radius: 13px; color: var(--tm-ink);
  background: rgba(36, 196, 118, .08);
}
.client-plan-intent > i { flex: 0 0 auto; color: var(--tm-green); font-size: 22px; }
.client-plan-intent > div { min-width: 0; display: grid; }
.client-plan-intent span { color: var(--tm-green); font-size: 9.5px; font-weight: 950; letter-spacing: .07em; }
.client-plan-intent strong { color: var(--tm-ink); font-size: 13.5px; font-weight: 950; }
.client-plan-intent small { margin-top: 2px; color: var(--tm-muted); font-size: 10.5px; line-height: 1.4; }
.client-referral-invite {
  display: flex; align-items: center; gap: 11px; margin: 17px 0; padding: 12px 14px;
  border: 1px solid rgba(89, 91, 233, .2); border-radius: 13px; color: var(--tm-ink);
  background: linear-gradient(135deg, rgba(10, 85, 200, .08), rgba(114, 81, 238, .08));
}
.client-referral-invite > i { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--tm-primary), #7454ee); }
.client-referral-invite strong, .client-referral-invite span { display: block; }
.client-referral-invite strong { font-size: 13px; font-weight: 900; }
.client-referral-invite span { margin-top: 1px; color: var(--tm-muted); font-size: 11.5px; line-height: 1.4; }

.referral-hero {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: center; gap: 44px; overflow: hidden; margin-bottom: 17px; padding: 38px 40px;
  border-radius: 24px; color: #fff; background: linear-gradient(125deg, #075dcc 0%, #196fe0 46%, #7355ee 100%);
  box-shadow: 0 18px 42px rgba(8, 73, 182, .18);
}
.referral-hero-orb { position: absolute; z-index: -1; display: block; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.referral-hero-orb.is-one { width: 260px; height: 260px; top: -150px; left: 28%; }
.referral-hero-orb.is-two { width: 190px; height: 190px; right: -66px; bottom: -85px; }
.referral-hero-copy { min-width: 0; }
.referral-hero .client-page-eyebrow { color: rgba(255, 255, 255, .78); }
.referral-hero h1 { max-width: 590px; margin: 9px 0 11px; color: #fff; font-size: clamp(30px, 3vw, 42px); font-weight: 950; line-height: 1.06; letter-spacing: -.04em; }
.referral-hero-copy > p { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.6; }
.referral-rule-chip { width: fit-content; display: flex; align-items: center; gap: 8px; margin-top: 20px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(5, 27, 83, .18); color: #fff; font-size: 12px; font-weight: 850; }
.referral-rule-chip i { color: #ffd363; }

.referral-share-card { min-width: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 19px; background: rgba(6, 28, 81, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(10px); }
.referral-share-card > span { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, .75); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.referral-link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 13px; background: rgba(4, 19, 59, .34); }
.referral-link-box input { min-width: 0; padding: 14px 15px; border: 0; outline: 0; color: #fff; background: transparent; font-size: 13px; font-weight: 750; text-overflow: ellipsis; }
.referral-link-box button { display: flex; align-items: center; gap: 7px; padding: 0 16px; border: 0; border-left: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 900; transition: background-color .15s ease; }
.referral-link-box button:hover, .referral-link-box button.is-copied { background: rgba(255, 255, 255, .22); }
.referral-share-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.referral-whatsapp-button { display: inline-flex; align-items: center; gap: 8px; border: 0; color: #fff; background: #16a765; font-size: 12px; font-weight: 900; }
.referral-whatsapp-button:hover { color: #fff; background: #118b53; transform: translateY(-1px); }
.referral-share-actions > span { color: rgba(255, 255, 255, .7); font-size: 11px; white-space: nowrap; }
.referral-share-actions > span strong { color: #fff; letter-spacing: .04em; }

.referral-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.referral-metric-card { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--capp-border); border-radius: 18px; background: var(--capp-card-bg); }
.referral-metric-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 18px; }
.referral-metric-card.is-progress .referral-metric-icon { color: var(--tm-orange); background: rgba(255, 145, 0, .1); }
.referral-metric-card.is-earned .referral-metric-icon { color: #7454ee; background: rgba(116, 84, 238, .1); }
.referral-metric-card.is-available .referral-metric-icon { color: var(--tm-green); background: rgba(36, 196, 118, .1); }
.referral-metric-card > div { min-width: 0; }
.referral-metric-card span:not(.referral-metric-icon), .referral-metric-card strong, .referral-metric-card small { display: block; }
.referral-metric-card span:not(.referral-metric-icon) { color: var(--capp-text-muted); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.referral-metric-card strong { margin: 2px 0; color: var(--capp-text); font-size: 22px; font-weight: 950; line-height: 1; }
.referral-metric-card small { overflow: hidden; color: var(--capp-text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

.referral-content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); align-items: start; gap: 17px; }
.referral-panel { min-width: 0; border: 1px solid var(--capp-border); border-radius: 20px; background: var(--capp-card-bg); }
.referral-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 22px 17px; border-bottom: 1px solid var(--capp-border); }
.referral-panel-head > div { min-width: 0; }
.referral-panel-head > div > span { color: var(--tm-primary); font-size: 10px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.referral-panel-head h2 { margin: 3px 0 0; color: var(--capp-text); font-size: 19px; font-weight: 950; letter-spacing: -.02em; }
.referral-panel-head p { margin: 4px 0 0; color: var(--capp-text-muted); font-size: 12px; line-height: 1.5; }
.referral-count-badge { min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 11px; font-weight: 950; }
.referral-list { padding: 0 20px; }
.referral-list-item { display: grid; grid-template-columns: 43px minmax(0, 1fr) minmax(155px, .55fr) auto; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid var(--capp-border); }
.referral-list-item:last-child { border-bottom: 0; }
.referral-person-avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--tm-primary), #7655ee); font-size: 12px; font-weight: 950; }
.referral-person-copy, .referral-benefit-copy { min-width: 0; }
.referral-person-copy strong, .referral-person-copy span, .referral-person-copy small, .referral-benefit-copy span, .referral-benefit-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-person-copy strong { color: var(--capp-text); font-size: 13.5px; font-weight: 900; }
.referral-person-copy span { margin-top: 2px; color: var(--capp-text-muted); font-size: 11.5px; }
.referral-person-copy small { margin-top: 2px; color: var(--capp-text-muted); font-size: 10.5px; }
.referral-benefit-copy span { color: var(--capp-text-muted); font-size: 9.5px; font-weight: 900; text-transform: uppercase; }
.referral-benefit-copy strong { margin-top: 3px; color: var(--capp-text); font-size: 12px; font-weight: 850; }
.referral-status { display: inline-flex; align-items: center; gap: 6px; justify-self: end; padding: 7px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.referral-status.is-registered { color: var(--tm-orange); background: rgba(255, 145, 0, .1); }
.referral-status.is-qualified { color: var(--tm-green); background: rgba(36, 196, 118, .11); }
.referral-status.is-processing { color: var(--tm-primary); background: rgba(10, 85, 200, .1); }
.referral-status.is-rewarded { color: #7454ee; background: rgba(116, 84, 238, .11); }
.referral-status.is-canceled { color: #d94b5d; background: rgba(217, 75, 93, .1); }
.referral-empty { min-height: 330px; display: grid; align-content: center; justify-items: center; padding: 35px; text-align: center; }
.referral-empty > span { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 18px; color: var(--tm-primary); background: rgba(10, 85, 200, .1); font-size: 25px; }
.referral-empty h3 { margin: 0; color: var(--capp-text); font-size: 18px; font-weight: 950; }
.referral-empty p { max-width: 460px; margin: 7px 0 18px; color: var(--capp-text-muted); font-size: 12.5px; line-height: 1.55; }

.referral-steps { display: grid; gap: 0; margin: 0; padding: 7px 21px 2px; list-style: none; }
.referral-steps li { position: relative; display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 11px; padding: 13px 0; }
.referral-steps li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 49px; bottom: -3px; width: 1px; background: var(--capp-border); }
.referral-steps li > span { position: relative; z-index: 1; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(10, 85, 200, .16); border-radius: 12px; color: var(--tm-primary); background: var(--capp-input-bg); font-size: 11px; font-weight: 950; }
.referral-steps strong { display: block; color: var(--capp-text); font-size: 13px; font-weight: 900; }
.referral-steps p { margin: 3px 0 0; color: var(--capp-text-muted); font-size: 11.5px; line-height: 1.5; }
.referral-policy-note { display: flex; align-items: flex-start; gap: 9px; margin: 12px 20px 20px; padding: 12px; border: 1px solid var(--capp-border); border-radius: 12px; color: var(--capp-text-muted); background: var(--capp-input-bg); }
.referral-policy-note i { flex: 0 0 auto; margin-top: 1px; color: var(--tm-primary); }
.referral-policy-note p { margin: 0; font-size: 10.5px; line-height: 1.55; }
.referral-copy-toast { position: fixed; z-index: 1090; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 13px; color: #fff; background: #118c57; box-shadow: 0 16px 40px rgba(0, 35, 20, .28); font-size: 12px; font-weight: 900; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
.referral-copy-toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 1180px) {
  .referral-hero { grid-template-columns: 1fr; gap: 25px; }
  .referral-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .referral-hero { padding: 28px 22px; border-radius: 20px; }
  .referral-hero h1 { font-size: 29px; }
  .referral-share-actions { align-items: stretch; flex-direction: column; }
  .referral-share-actions .btn { justify-content: center; width: 100%; }
  .referral-share-actions > span { text-align: center; }
  .referral-list-item { grid-template-columns: 43px minmax(0, 1fr); }
  .referral-benefit-copy { grid-column: 2; }
  .referral-status { grid-column: 2; justify-self: start; }
}

@media (max-width: 520px) {
  .referral-metric-grid { grid-template-columns: 1fr; }
  .referral-link-box { grid-template-columns: minmax(0, 1fr) 48px; }
  .referral-link-box button { justify-content: center; padding: 0; }
  .referral-link-box button span { display: none; }
  .referral-panel-head { padding: 18px; }
  .referral-list { padding: 0 16px; }
  .referral-copy-toast { right: 14px; bottom: 14px; left: 14px; justify-content: center; }
}

/* ---------- Landing pública para convidados por indicação ---------- */
.referral-signup-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 760px;
  display: flex; align-items: center; padding: 72px 0 82px; color: #fff;
  background: radial-gradient(circle at 11% 17%, rgba(25, 196, 255, .25), transparent 25%), radial-gradient(circle at 78% 74%, rgba(116, 84, 238, .22), transparent 27%), linear-gradient(135deg, #061a3b 0%, #073784 48%, #0a65d7 100%);
}
.referral-signup-orb { position: absolute; z-index: -1; display: block; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .045); pointer-events: none; }
.referral-signup-orb.is-one { width: 420px; height: 420px; top: -225px; right: 23%; }
.referral-signup-orb.is-two { width: 290px; height: 290px; bottom: -175px; left: 7%; }
.referral-signup-copy { max-width: 680px; }
.referral-signup-eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.referral-signup-eyebrow i { color: #ffd363; }
.referral-signup-copy h1 { max-width: 660px; margin: 0 0 22px; color: #fff; font-size: clamp(45px, 5.4vw, 72px); font-weight: 950; line-height: .99; letter-spacing: -.055em; }
.referral-signup-copy > p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.65; }
.referral-signup-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 27px; }
.referral-signup-proof span { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 800; }
.referral-signup-proof i { color: #45df99; }
.referral-signup-trust { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.referral-signup-trust > span { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #45df99; background: rgba(69, 223, 153, .12); font-size: 19px; }
.referral-signup-trust strong, .referral-signup-trust small { display: block; }
.referral-signup-trust strong { color: #fff; font-size: 13px; font-weight: 900; }
.referral-signup-trust small { margin-top: 2px; color: rgba(255, 255, 255, .64); font-size: 11.5px; }

.referral-signup-form-card { position: relative; z-index: 2; scroll-margin-top: 96px; padding: 30px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 25px; color: var(--tm-ink); background: #fff; box-shadow: 0 30px 80px rgba(3, 20, 57, .34); }
.referral-signup-form-card::before { content: ''; position: absolute; inset: 0 22px auto; height: 4px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, var(--tm-primary), var(--tm-accent), #7454ee); }
.referral-signup-form-tag { display: block; margin-bottom: 6px; color: var(--tm-primary); font-size: 11px; font-weight: 950; letter-spacing: .075em; text-transform: uppercase; }
.referral-signup-form-card h2 { margin: 0; color: var(--tm-ink); font-size: 27px; font-weight: 950; letter-spacing: -.025em; }
.referral-signup-form-card > p { margin: 7px 0 20px; color: var(--tm-muted); font-size: 13px; line-height: 1.5; }
.referral-signup-form-card label { display: block; margin-bottom: 5px; color: #344664; font-size: 12px; font-weight: 850; }
.referral-signup-form-card .mb-3 { margin-bottom: 13px !important; }
.referral-signup-form-card .form-control { min-height: 48px; padding: 11px 14px; border: 1px solid var(--tm-border); border-radius: 12px; color: var(--tm-ink); background: var(--tm-soft); font-size: 14px; }
.referral-signup-form-card .form-control:focus { border-color: var(--tm-primary); background: #fff; box-shadow: 0 0 0 .18rem rgba(10, 85, 200, .13); }
.referral-signup-form-card .btn-main { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; font-size: 14px; font-weight: 900; }
.referral-signup-form-card .form-note { color: var(--tm-muted); font-size: 10px; line-height: 1.45; text-align: center; }
.referral-signup-form-card .form-note a { color: var(--tm-primary); font-weight: 800; }
.referral-signup-form-card .alert { margin-bottom: 15px; border-radius: 11px; font-size: 11.5px; }
.referral-signup-login { margin-top: 16px; color: var(--tm-muted); font-size: 12px; text-align: center; }
.referral-signup-login a { color: var(--tm-primary); font-weight: 900; }

.referral-signup-strip { position: relative; z-index: 3; margin-top: -24px; }
.referral-signup-strip .site-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; padding: 8px; border: 1px solid var(--tm-border); border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(8, 36, 91, .11); }
.referral-signup-strip .site-container > div { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 17px 19px; border-right: 1px solid var(--tm-border); }
.referral-signup-strip .site-container > div:last-child { border-right: 0; }
.referral-signup-strip i { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--tm-primary); background: rgba(10, 85, 200, .09); font-size: 16px; }
.referral-signup-strip strong { display: block; color: var(--tm-ink); font-size: 12px; font-weight: 950; }
.referral-signup-strip span { min-width: 0; color: var(--tm-muted); font-size: 10.5px; line-height: 1.35; }

.referral-signup-benefits { padding-top: 105px; }
.referral-benefit-card { height: 100%; padding: 28px 25px; border: 1px solid var(--tm-border); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(8, 36, 91, .07); transition: transform .18s ease, box-shadow .18s ease; }
.referral-benefit-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(8, 36, 91, .12); }
.referral-benefit-card > span { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--tm-primary), #7258ed); font-size: 21px; }
.referral-benefit-card h3 { margin: 0 0 10px; color: var(--tm-ink); font-size: 18px; font-weight: 950; }
.referral-benefit-card p { margin: 0; color: var(--tm-muted); font-size: 13px; line-height: 1.65; }

.referral-signup-flow { background: linear-gradient(135deg, #f2f7ff, #fff 58%, #f5f2ff); }
.referral-signup-flow h2 { max-width: 520px; margin: 12px 0 15px; color: var(--tm-ink); font-size: clamp(32px, 4vw, 49px); font-weight: 950; line-height: 1.05; letter-spacing: -.04em; }
.referral-signup-flow .col-lg-5 > p { max-width: 510px; margin-bottom: 25px; color: var(--tm-muted); font-size: 16px; line-height: 1.65; }
.referral-signup-steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.referral-signup-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 15px; padding: 19px; border: 1px solid var(--tm-border); border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(8, 36, 91, .06); }
.referral-signup-steps li > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: var(--tm-primary); background: rgba(10, 85, 200, .09); font-size: 13px; font-weight: 950; }
.referral-signup-steps strong { display: block; color: var(--tm-ink); font-size: 15px; font-weight: 950; }
.referral-signup-steps p { margin: 4px 0 0; color: var(--tm-muted); font-size: 12.5px; line-height: 1.5; }

.referral-signup-cta { padding: 70px 0; color: #fff; background: linear-gradient(120deg, #0755bd, #176fdf 54%, #7158ed); }
.referral-signup-cta .site-container { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.referral-signup-cta span { display: block; margin-bottom: 5px; color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.referral-signup-cta h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(29px, 3.5vw, 45px); font-weight: 950; letter-spacing: -.035em; }
.referral-signup-cta .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }

.referral-signup-floating-cta { position: fixed; z-index: 1045; left: 50%; bottom: 22px; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; background: linear-gradient(135deg, #075dcc, #7358ed); box-shadow: 0 18px 48px rgba(3, 34, 94, .34); font-size: 13px; font-weight: 900; opacity: 0; visibility: hidden; transform: translate(-50%, 20px); transition: opacity .22s ease, visibility .22s ease, transform .22s ease; }
.referral-signup-floating-cta:hover { color: #fff; transform: translate(-50%, -2px); }
.referral-signup-floating-cta.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.referral-signup-floating-cta > i:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.referral-signup-floating-cta > i:last-child { color: rgba(255, 255, 255, .72); }

@media (max-width: 1199.98px) {
  .referral-signup-hero { min-height: auto; }
  .referral-signup-strip .site-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-signup-strip .site-container > div:nth-child(2) { border-right: 0; }
  .referral-signup-strip .site-container > div:nth-child(-n+2) { border-bottom: 1px solid var(--tm-border); }
}

@media (max-width: 991.98px) {
  .referral-signup-hero { padding: 62px 0 76px; }
  .referral-signup-hero .col-lg-5 { order: -1; }
  .referral-signup-copy { max-width: none; text-align: center; }
  .referral-signup-eyebrow { margin-inline: auto; }
  .referral-signup-copy h1, .referral-signup-copy > p { margin-inline: auto; }
  .referral-signup-proof { max-width: 620px; margin-inline: auto; text-align: left; }
  .referral-signup-trust { justify-content: center; text-align: left; }
  .referral-signup-form-card { max-width: 590px; scroll-margin-top: 92px; margin: 7px auto 0; }
  .referral-signup-flow .col-lg-5 { text-align: center; }
  .referral-signup-flow h2, .referral-signup-flow .col-lg-5 > p { margin-inline: auto; }
  .referral-signup-cta .site-container { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 575.98px) {
  .referral-signup-hero { padding: 45px 0 60px; }
  .referral-signup-copy h1 { font-size: 39px; }
  .referral-signup-copy > p { font-size: 16px; }
  .referral-signup-proof { grid-template-columns: 1fr; }
  .referral-signup-trust { align-items: flex-start; }
  .referral-signup-form-card { padding: 24px 19px; border-radius: 20px; }
  .referral-signup-form-card h2 { font-size: 24px; }
  .referral-signup-strip { margin-top: -15px; padding-inline: 12px; }
  .referral-signup-strip .site-container { grid-template-columns: 1fr; }
  .referral-signup-strip .site-container > div { border-right: 0; border-bottom: 1px solid var(--tm-border); }
  .referral-signup-strip .site-container > div:last-child { border-bottom: 0; }
  .referral-signup-benefits { padding-top: 80px; }
  .referral-signup-steps li { grid-template-columns: 44px minmax(0, 1fr); padding: 15px; }
  .referral-signup-steps li > span { width: 44px; height: 44px; border-radius: 13px; }
  .referral-signup-cta { padding: 52px 0; text-align: center; }
  .referral-signup-cta .site-container { align-items: center; }
  .referral-signup-cta .btn { width: 100%; justify-content: center; }
  .referral-signup-floating-cta { right: 14px; bottom: 14px; left: 14px; justify-content: center; transform: translateY(20px); }
  .referral-signup-floating-cta:hover, .referral-signup-floating-cta.is-visible { transform: translateY(0); }
}