/* ═══════════════════════════════════════════════════════════════════════════
   VipControl — Liquid Glassmorphism Design System
   ───────────────────────────────────────────────────────────────────────────
   MASTER OVERRIDE: Carregado APÓS style.css.
   Estética: Liquid Glassmorphism · macOS Power On · HUD Executivo
   Performance: Zero Flickering — GPU-only transitions (transform + opacity)
   Fontes: Plus Jakarta Sans (display) + DM Sans (body)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1  DARK MODE — Design Tokens (OLED Deep Black)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  font-size: var(--vip-font-size-base, 14px);

  --t-canvas:       #050507;
  --t-surface:      #0a0a0f;
  --t-surface-2:    #111118;
  --t-surface-3:    #18181f;
  --t-overlay:      var(--vc-layer-alpha-020);

  --t-ink:          #ffffff;
  --t-ink-2:        #ffffff;
  --t-ink-3:        #ffffff;
  --t-ink-4:        #ffffff;

  --t-primary:      #3b82f6;
  --t-primary-hover:#2563eb;
  --t-primary-glow: var(--vc-primary-alpha-35);
  --t-primary-soft: var(--vc-primary-alpha-08);
  --t-danger:       #ef4444;
  --t-danger-glow:  var(--vc-danger-strong);
  --t-success:      #10b981;
  --t-warning:      #f59e0b;

  --t-border:       var(--vc-layer-medium);
  --t-border-2:     var(--vc-layer-alpha-100);

  --t-glass-bg:     var(--vc-layer-alpha-030);
  --t-glass-border: var(--vc-layer-strong);
  --t-glass-shine:  var(--vc-layer-medium);

  --t-shadow:       0 2px 8px var(--vc-shade-overlay);
  --t-shadow-lg:    0 16px 48px -8px rgba(0,0,0,0.7);
  --t-shadow-card:  0 4px 16px rgba(0,0,0,0.4);

  --t-radius:       10px;
  --t-radius-lg:    14px;
  --t-radius-xl:    20px;

  --t-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --t-ease-spring:  cubic-bezier(0.25, 1, 0.5, 1);
  --t-dur:          200ms;

  --t-glow-pulse:   glow-pulse 3s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2  LIGHT MODE — Off-White Perolado (sem branco puro)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:         #f0f2f5 !important;
  --bg-2:       #f8f9fb !important;
  --bg-3:       #f3f4f7 !important;
  --bg-4:       #eceef2 !important;
  --bg-glass:   var(--vc-shade-faint) !important;
  --text:       #1a1d26 !important;
  --text-2:     #2d3748 !important;
  --text-3:     #5a6577 !important;
  --text-4:     #8b95a5 !important;
  --border:     #dfe3ea !important;
  --border-2:   #c8ced8 !important;
  --gray-100:   #eceef2 !important;
  --gray-200:   #dfe3ea !important;
  --card-bg:    #f8f9fb !important;

  --t-canvas:       #f0f2f5;
  --t-surface:      #f8f9fb;
  --t-surface-2:    #f3f4f7;
  --t-surface-3:    #eceef2;
  --t-overlay:      var(--vc-shade-faint);
  --t-ink:          #1a1d26;
  --t-ink-2:        #2d3748;
  --t-ink-3:        #5a6577;
  --t-ink-4:        #8b95a5;
  --t-border:       #dfe3ea;
  --t-border-2:     #c8ced8;
  --t-glass-bg:     rgba(255,255,255,0.7);
  --t-glass-border: rgba(0,0,0,0.06);
  --t-glass-shine:  rgba(255,255,255,0.9);
  --t-shadow:       0 1px 3px var(--vc-shade-subtle), 0 4px 8px var(--vc-shade-faint);
  --t-shadow-lg:    0 12px 32px -4px var(--vc-shade-medium);
  --t-shadow-card:  0 2px 8px var(--vc-shade-subtle);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3  BASE & TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  line-height: 1.6 !important;
  letter-spacing: 0.2px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

[data-theme="light"] body,
[data-theme="light"] html {
  background-color: #f0f2f5 !important;
  color: #1a1d26 !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}

h1, h2, h3, h4, h5, h6,
.card-title, .page-title, .modal-header h3 {
  color: var(--t-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}

p, span, label, li, td, a {
  color: var(--t-ink-2);
}

small, .text-muted, .text-sm, .form-hint {
  color: var(--t-ink-3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4  GLASSMORPHISM — Superfícies com Profundidade
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar — Glass Panel */
.sidebar {
  background: rgba(10,10,15,0.92) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border-right: 1px solid var(--vc-layer-medium) !important;
  border-top: none !important;
}

[data-theme="light"] .sidebar {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
  border-right: 1px solid var(--vc-shade-soft) !important;
}

/* Topbar — Glass Header */
.topbar {
  background: var(--t-glass-bg) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-bottom: 1px solid var(--t-glass-border) !important;
  border-top: 1px solid var(--t-glass-shine) !important;
}

[data-theme="light"] .topbar,
[data-theme="light"] .header,
[data-theme="light"] .navbar {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  border-bottom: 1px solid var(--vc-shade-subtle) !important;
  border-top: 1px solid rgba(255,255,255,0.8) !important;
}

[data-theme="light"] .topbar-title {
  color: #1a1d26 !important;
}

[data-theme="light"] .topbar-btn {
  color: #5a6577 !important;
}

[data-theme="light"] .topbar-btn:hover {
  background: var(--vc-shade-subtle) !important;
  color: #1a1d26 !important;
}

/* Cards — Elevated Glass */
.card,
.metric-card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-glass-border) !important;
  border-top: 1px solid var(--t-glass-shine) !important;
  border-radius: var(--t-radius-lg) !important;
  box-shadow: var(--t-shadow-card) !important;
  transition: border-color 0.3s var(--t-ease), box-shadow 0.3s var(--t-ease) !important;
  position: relative !important;
  overflow: visible !important;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59,130,246,0.03), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--t-ease);
  z-index: 0;
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  border-color: var(--vc-primary-alpha-15) !important;
  box-shadow: var(--t-shadow-card), 0 0 20px rgba(59,130,246,0.05) !important;
}

/* Ensure table-wrapper always scrolls inside cards */
.card .table-wrapper {
  overflow-x: auto !important;
  max-width: 100% !important;
  position: relative;
  z-index: 1;
}

[data-theme="light"] .card,
[data-theme="light"] .metric-card,
[data-theme="light"] .panel,
[data-theme="light"] .table-container,
[data-theme="light"] .box {
  background-color: #f8f9fb !important;
  border: 1px solid #dfe3ea !important;
  border-top: 1px solid rgba(255,255,255,0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  margin-bottom: 24px !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .metric-card:hover {
  border-color: #c8ced8 !important;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .card-header {
  background: transparent !important;
  border-bottom: 1px solid #eceef2 !important;
}

[data-theme="light"] .card-title {
  color: #1a1d26 !important;
}

/* Canvas glow — dados processando */
.chart-container {
  position: relative;
}

.chart-container::after {
  content: '';
  position: absolute;
  inset: 10%;
  background: radial-gradient(ellipse at center, var(--vc-primary-alpha-06), transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5  MODAIS — macOS Power On Effect
   CORREÇÃO QA: O seletor `.modal.open` era morto — JS adiciona `.open` em
   `.modal-overlay`, nunca no `.modal` diretamente. Corrigido para usar o
   seletor real `.modal-overlay.open .modal` que é consistente com style.css.
   Removido backdrop-filter do `.modal` (criava double composite layer).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overlay: suprime animação própria (a transição acontece no .modal filho) */
.modal-overlay.open {
  animation: none !important;
}

/* Caixa do modal: animação PowerOn ao abrir */
.modal-overlay.open .modal,
.modal-overlay.open .modal-dialog {
  animation: modalPowerOn 0.28s var(--t-ease-spring, cubic-bezier(0.25,1,0.5,1)) both !important;
}

@keyframes modalPowerOn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* NÃO aplicar backdrop-filter no .modal fechado (criava GPU layer permanente).
   O blur do overlay já cobre o fundo — o modal box não precisa de blur próprio. */

[data-theme="light"] .modal-overlay {
  background: rgba(15, 23, 42, 0.30) !important;
}

.modal-dialog,
.modal > div:first-child:not(.modal-overlay) {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-glass-border) !important;
  border-top: 1px solid var(--t-glass-shine) !important;
  border-radius: var(--t-radius-xl) !important;
  box-shadow: var(--t-shadow-lg) !important;
}

[data-theme="light"] .modal,
[data-theme="light"] .modal-dialog {
  background: rgba(248,249,251,0.95) !important;
  border: 1px solid #dfe3ea !important;
  border-top: 1px solid rgba(255,255,255,0.9) !important;
  border-radius: var(--t-radius-xl) !important;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .modal-header {
  border-bottom: 1px solid #eceef2 !important;
}

[data-theme="light"] .modal-footer,
[data-theme="light"] .form-actions {
  border-top: 1px solid #eceef2 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6  SIDEBAR — Navegação Premium com Hover Magnético
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .sidebar-logo {
  border-bottom-color: var(--vc-shade-soft) !important;
}

[data-theme="light"] .sidebar-user {
  border-top-color: var(--vc-shade-soft) !important;
}

[data-theme="light"] .nav-section {
  color: #8b95a5 !important;
  letter-spacing: 0.14em !important;
}

[data-theme="light"] .nav-item {
  color: #2d3748 !important;
  border-radius: 10px !important;
}

[data-theme="light"] .nav-item:hover {
  background: rgba(0,0,0,0.03) !important;
  color: #1a1d26 !important;
}

[data-theme="light"] .nav-item.active {
  background: var(--vc-primary-alpha-08) !important;
  color: var(--vc-primary-strong) !important;
  font-weight: 600 !important;
}

[data-theme="light"] .nav-item.active::before {
  background: var(--vc-primary-strong) !important;
}

/* Hover Magnético — bordas que acendem */
.nav-item {
  transition: background var(--t-dur) var(--t-ease),
              color var(--t-dur) var(--t-ease),
              box-shadow 0.3s var(--t-ease) !important;
}

.nav-item:hover {
  box-shadow: inset 0 0 0 1px var(--vc-layer-medium), 0 0 8px var(--vc-primary-alpha-04) !important;
}

.nav-item.active {
  box-shadow: inset 0 0 0 1px var(--vc-primary-alpha-12) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6b  ÍCONES — Flat, Sem 3D
   ═══════════════════════════════════════════════════════════════════════════ */

i.fas, i.fab, i.far {
  transition: color 0.2s var(--t-ease), transform 0.2s var(--t-ease) !important;
}

:root:not([data-theme="light"]) i.fas,
:root:not([data-theme="light"]) i.fab,
:root:not([data-theme="light"]) i.far {
  color: #c0c0d0 !important;
}

.nav-item:hover i.fas,
.nav-item:hover i.fab,
.nav-item:hover i.far {
  color: var(--t-ink) !important;
}

.nav-item.active i.fas,
.nav-item.active i.fab,
.nav-item.active i.far {
  color: var(--t-primary) !important;
}

[data-theme="light"] i.fas,
[data-theme="light"] i.fab,
[data-theme="light"] i.far {
  color: #5a6577 !important;
}

[data-theme="light"] .nav-item:hover i.fas,
[data-theme="light"] .nav-item:hover i.fab,
[data-theme="light"] .nav-item:hover i.far {
  color: #2d3748 !important;
}

[data-theme="light"] .nav-item.active i.fas,
[data-theme="light"] .nav-item.active i.fab,
[data-theme="light"] .nav-item.active i.far {
  color: var(--vc-primary-strong) !important;
}

.nav-icon i.fas,
.nav-icon i.fab,
.nav-icon i.far {
  width: 16px;
  display: inline-block;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7  TABELA HUD — Visão Executiva
   ═══════════════════════════════════════════════════════════════════════════ */

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table th,
table td {
  padding: 14px 20px !important;
  vertical-align: middle !important;
  line-height: 1.6 !important;
}

table td:last-child,
table th:last-child {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Dark mode table — HUD translúcido */
:root:not([data-theme="light"]) thead {
  background: var(--vc-layer-alpha-020) !important;
}

:root:not([data-theme="light"]) th {
  color: var(--vc-ink-inverse) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--t-glass-border) !important;
}

:root:not([data-theme="light"]) tbody tr {
  background: transparent !important;
  transition: background 0.2s var(--t-ease) !important;
}

:root:not([data-theme="light"]) tbody tr:hover {
  background: var(--vc-layer-alpha-020) !important;
}

:root:not([data-theme="light"]) tbody td {
  color: var(--t-ink-2) !important;
  border-bottom: 1px solid var(--vc-layer-alpha-030) !important;
}

/* Neon contido para valores positivos/negativos */
:root:not([data-theme="light"]) .badge-paid,
:root:not([data-theme="light"]) .badge-active,
:root:not([data-theme="light"]) .mc-green {
  text-shadow: 0 0 6px var(--vc-success-strong) !important;
}

:root:not([data-theme="light"]) .badge-overdue,
:root:not([data-theme="light"]) .badge-suspended,
:root:not([data-theme="light"]) .mc-red {
  text-shadow: 0 0 6px var(--vc-danger-strong) !important;
}

/* Light mode table */
[data-theme="light"] .table-wrapper {
  background: #f8f9fb !important;
  border-radius: 14px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

[data-theme="light"] thead {
  background: linear-gradient(180deg, rgba(52, 141, 255, .95), rgba(22, 100, 214, .92)) !important;
}

[data-theme="light"] th {
  color: var(--vc-ink-inverse) !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #dfe3ea !important;
}

[data-theme="light"] td {
  color: #2d3748 !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

[data-theme="light"] tbody tr:hover {
  background: #f0f2f5 !important;
}

[data-theme="light"] tbody tr:last-child td {
  border-bottom: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8  FORMULÁRIOS — Inputs Premium
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .input,
[data-theme="light"] .glass-select {
  background: #f3f4f7 !important;
  border: 1px solid #c8ced8 !important;
  border-radius: 10px !important;
  color: #1a1d26 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s var(--t-ease), box-shadow 0.2s var(--t-ease) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] select::placeholder {
  color: #8b95a5 !important;
}

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .glass-select:focus {
  outline: none !important;
  border-color: var(--t-primary) !important;
  box-shadow: 0 0 0 3px var(--vc-primary-alpha-12) !important;
}

[data-theme="light"] .search-box {
  background: #f3f4f7 !important;
  border-color: #c8ced8 !important;
  border-radius: 10px !important;
}

[data-theme="light"] .search-box input {
  color: #1a1d26 !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §9  BOTÕES — Glow Luxuoso (Sem Houdini/@property)
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-vip-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: var(--t-primary) !important;
  background-image: none !important;
  color: var(--vc-ink-inverse) !important;
  border: 1px solid var(--t-primary) !important;
  border-radius: var(--t-radius) !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
  padding: 9px 18px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: transform 0.2s var(--t-ease-spring),
              box-shadow 0.3s var(--t-ease) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-vip-main:hover {
  background-color: var(--t-primary-hover) !important;
  border-color: var(--t-primary-hover) !important;
  color: var(--vc-ink-inverse) !important;
  box-shadow: 0 4px 20px var(--t-primary-glow) !important;
  transform: translateY(-1px) !important;
}

.btn-vip-main:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px var(--t-primary-glow) !important;
}

.btn-vip-main *,
.btn-vip-main svg {
  color: var(--vc-ink-inverse) !important;
}

.btn-vip-main svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Danger / Delete */
.btn-danger,
.btn-delete,
.btn-premium.danger {
  background-color: var(--t-danger) !important;
  color: var(--vc-ink-inverse) !important;
  border: 1px solid var(--t-danger) !important;
  border-radius: var(--t-radius) !important;
  transition: transform 0.2s var(--t-ease-spring),
              box-shadow 0.3s var(--t-ease) !important;
}

.btn-danger:hover,
.btn-delete:hover,
.btn-premium.danger:hover {
  background-color: #dc2626 !important;
  box-shadow: 0 4px 20px var(--t-danger-glow) !important;
  transform: translateY(-1px) !important;
}

/* Ícone lixeira — vibração suave no hover */
.action-btn[title*="Excluir"]:hover i,
.action-btn[title*="excluir"]:hover i,
.action-btn[title*="Remover"]:hover i {
  animation: trashShake 0.4s var(--t-ease) !important;
}

@keyframes trashShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

/* Secundário */
[data-theme="light"] .btn-secondary {
  background: #f3f4f7 !important;
  color: #2d3748 !important;
  border: 1px solid #c8ced8 !important;
  transition: transform 0.2s var(--t-ease-spring),
              box-shadow 0.2s var(--t-ease) !important;
}

[data-theme="light"] .btn-secondary:hover {
  background: #eceef2 !important;
  border-color: #c8ced8 !important;
  color: #1a1d26 !important;
  transform: translateY(-1px) !important;
}

/* Action buttons (tabelas) */
[data-theme="light"] .action-btn {
  background: #f3f4f7 !important;
  border: 1px solid #dfe3ea !important;
  color: #5a6577 !important;
  border-radius: var(--t-radius) !important;
  transition: transform 0.15s var(--t-ease),
              border-color 0.2s var(--t-ease) !important;
}

[data-theme="light"] .action-btn:hover {
  background: #eceef2 !important;
  border-color: #c8ced8 !important;
  color: #1a1d26 !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10  GLOW PULSE — Animação de fundo para botões vitais
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--vc-primary-alpha-15); }
  50% { box-shadow: 0 0 24px rgba(59,130,246,0.3); }
}

/* Harmonização global: animação infinita de box-shadow repinta a cada frame
   em TODOS os botões primários (custo real de GPU/bateria no mobile).
   Agora é opt-in: apenas CTAs hero marcadas com .vc-cta-hero pulsam. */
.btn-vip-main.vc-cta-hero {
  animation: glow-pulse 3s ease-in-out infinite !important;
}

.btn-vip-main.vc-cta-hero:hover {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-vip-main.vc-cta-hero {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11  CALENDÁRIO / AGENDA
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .calendar-wrapper {
  box-shadow: var(--t-shadow-card) !important;
  border: 1px solid #dfe3ea !important;
  border-radius: var(--t-radius-lg) !important;
}

[data-theme="light"] .calendar-grid,
[data-theme="light"] .calendar-cell {
  background: #f8f9fb !important;
  border-color: #eceef2 !important;
}

[data-theme="light"] .calendar-day-name {
  color: #5a6577 !important;
  background: #f3f4f7 !important;
}

[data-theme="light"] .fc {
  box-shadow: none !important;
}

[data-theme="light"] .fc-view-harness {
  background: #f8f9fb !important;
  border: 1px solid #dfe3ea !important;
  border-radius: var(--t-radius-lg) !important;
  box-shadow: var(--t-shadow-card) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12  BADGES, TOASTS, SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .toast {
  background: rgba(14, 14, 18, .97) !important;
  border: 1px solid rgba(99, 102, 241, .25) !important;
  border-color: color-mix(in srgb, var(--toast-color, #6366f1) 25%, transparent) !important;
  color: var(--vc-ink-inverse) !important;
  box-shadow: 0 8px 32px var(--vc-shade-overlay) !important;
  border-radius: 12px !important;
}

/* Scrollbar — Minimal */
::-webkit-scrollbar {
  width: 5px !important;
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--vc-layer-strong) !important;
  border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15) !important;
}

[data-theme="light"] ::-webkit-scrollbar {
  width: 5px !important;
  background: transparent !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c8ced8 !important;
  border-radius: 999px !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #8b95a5 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §13  NOTIFICAÇÕES & DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════════ */

.notif-dropdown {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--t-glass-border) !important;
  border-top: 1px solid var(--t-glass-shine) !important;
}

[data-theme="light"] .notif-dropdown {
  background: rgba(248,249,251,0.95) !important;
  border: 1px solid #dfe3ea !important;
  box-shadow: var(--t-shadow-lg) !important;
  border-radius: var(--t-radius-lg) !important;
}

[data-theme="light"] .notif-dropdown-header {
  border-bottom-color: #eceef2 !important;
}

[data-theme="light"] .notif-item:hover {
  background: #f0f2f5 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §14  EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .empty-state {
  color: #5a6577 !important;
}

[data-theme="light"] .empty-state h3 {
  color: #2d3748 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §15  LOGIN SCREEN — Glass Card
   ═══════════════════════════════════════════════════════════════════════════ */

.login-card {
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
  background: var(--t-glass-bg) !important;
  border: 1px solid var(--t-glass-border) !important;
  border-top: 1px solid var(--t-glass-shine) !important;
  animation: modalPowerOn 0.6s var(--t-ease-spring) both;
}

[data-theme="light"] .login-card {
  background: rgba(248,249,251,0.85) !important;
  border: 1px solid #dfe3ea !important;
  border-top: 1px solid rgba(255,255,255,0.9) !important;
  border-radius: var(--t-radius-xl) !important;
  box-shadow: var(--t-shadow-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §16  GLASS-SELECT & RECEIPT SEARCH
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .glass-select {
  background: #f3f4f7 !important;
  border: 1px solid #c8ced8 !important;
  color: #1a1d26 !important;
  border-radius: var(--t-radius) !important;
}

[data-theme="light"] .receipt-search-box {
  background: #f8f9fb !important;
  border-color: #c8ced8 !important;
  border-radius: var(--t-radius) !important;
}

[data-theme="light"] .receipt-search-box:focus-within {
  border-color: var(--t-primary) !important;
  box-shadow: 0 0 0 3px var(--vc-primary-alpha-10) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §17  DRAG & DROP
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .nav-item.sortable-drag {
  background: #f8f9fb !important;
  border: 1px solid var(--t-primary) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06), 0 0 0 3px var(--vc-primary-alpha-10) !important;
  border-radius: var(--t-radius) !important;
}

[data-theme="light"] .sidebar.editing .nav-group {
  background: #f3f4f7 !important;
  border: 1px dashed #c8ced8 !important;
  border-radius: var(--t-radius) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §18  DARK MODE — Hierarquia de Cores Específicas
   ═══════════════════════════════════════════════════════════════════════════ */

:root:not([data-theme="light"]) .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--vc-layer-subtle) !important;
}

:root:not([data-theme="light"]) #page-financial-overview .card {
  background: var(--t-surface) !important;
}

:root:not([data-theme="light"]) #page-financial-overview .card > div:first-child {
  color: var(--t-ink-3) !important;
}

:root:not([data-theme="light"]) #page-cron .card-title {
  color: var(--t-ink) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §19  COMPONENTES — Avatar & Misc
   ═══════════════════════════════════════════════════════════════════════════ */

.client-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: var(--vc-ink-inverse);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 2px 8px rgba(37,99,235,0.2);
}

.btn-see-more {
  font-size: .7rem;
  color: var(--t-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
  display: block;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--t-ease);
}
.btn-see-more:hover { color: #60a5fa; }


/* ═══════════════════════════════════════════════════════════════════════════
   §20  METRICS GRID — Glow Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.metrics-grid .card,
.metric-card {
  position: relative !important;
  overflow: hidden !important;
}

.metrics-grid .card::after,
.metric-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--vc-primary-alpha-04), transparent 60%);
  pointer-events: none;
}

.metrics-grid .card .metric-icon,
.metric-card .metric-icon {
  transition: transform 0.3s var(--t-ease-spring) !important;
}

.metrics-grid .card:hover .metric-icon,
.metric-card:hover .metric-icon {
  transform: scale(1.1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §21  OVERVIEW TABLE — Visão Executiva HUD
   ═══════════════════════════════════════════════════════════════════════════ */

.overview-table {
  width: 100%;
}

:root:not([data-theme="light"]) .overview-table tbody tr {
  background: transparent !important;
  border-bottom: 1px solid var(--vc-layer-alpha-030) !important;
  transition: background 0.2s var(--t-ease) !important;
}

:root:not([data-theme="light"]) .overview-table tbody tr:hover {
  background: rgba(59,130,246,0.03) !important;
}

:root:not([data-theme="light"]) .overview-table tfoot tr {
  background: var(--vc-layer-alpha-020) !important;
  border-top: 1px solid var(--vc-layer-medium) !important;
}

:root:not([data-theme="light"]) .overview-table tfoot td {
  font-weight: 700 !important;
  color: var(--t-ink) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §22  CANVAS PROTECTION — Chart.js Safe Zone
   ═══════════════════════════════════════════════════════════════════════════ */

canvas {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §23  GLOBAL TRANSITIONS — GPU Accelerated Only
   ═══════════════════════════════════════════════════════════════════════════ */

.card,
.metric-card,
.nav-item,
.btn-vip-main,
.btn-danger,
.btn-secondary,
.action-btn,
.topbar-btn {
  will-change: transform, opacity;
}

.theme-transitioning .sidebar,
.theme-transitioning .topbar,
.theme-transitioning .card,
.theme-transitioning .main-content,
.theme-transitioning .modal,
.theme-transitioning .login-card,
.theme-transitioning body {
  transition: background-color 0.35s var(--t-ease),
              color 0.35s var(--t-ease),
              border-color 0.35s var(--t-ease) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §24  MAIN CONTENT — Canvas Background
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .main-content,
[data-theme="light"] main,
[data-theme="light"] .content-wrapper,
[data-theme="light"] #wrapper {
  background-color: #f0f2f5 !important;
}

:root:not([data-theme="light"]) .main-content,
:root:not([data-theme="light"]) main {
  background-color: var(--t-canvas) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §25  AUTOMATION BADGES — Subtle Glow
   ═══════════════════════════════════════════════════════════════════════════ */

.badge-auto {
  border-radius: 6px !important;
  font-size: .68rem !important;
  padding: 3px 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

:root:not([data-theme="light"]) .badge-auto-billing {
  background: var(--vc-primary-alpha-10) !important;
  color: #93c5fd !important;
  border: 1px solid var(--vc-primary-alpha-15) !important;
}

:root:not([data-theme="light"]) .badge-auto-domain {
  background: var(--vc-success-soft) !important;
  color: #6ee7b7 !important;
  border: 1px solid var(--vc-success-surface) !important;
}

:root:not([data-theme="light"]) .badge-auto-muted {
  background: var(--vc-layer-subtle) !important;
  color: var(--t-ink-3) !important;
  border: 1px solid var(--vc-layer-medium) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §26  CENTRAL DE AVISOS — Layout visual seguro
   ═══════════════════════════════════════════════════════════════════════════ */

#page-notices {
  --notice-bg: #07111f;
  --notice-card: rgba(13, 24, 40, .78);
  --notice-card-2: rgba(16, 31, 52, .72);
  --notice-border: var(--vc-border);
  --notice-border-strong: var(--vc-border-strong);
  --notice-text: #edf5ff;
  --notice-muted: rgba(213, 226, 242, .68);
  --notice-soft: rgba(213, 226, 242, .48);
  --notice-blue: #4f9cff;
  --notice-green: #37c784;
  --notice-pink: #ec6da8;
  --notice-violet: #9f7aea;
  --notice-amber: #f4b74a;
  --notice-red: #f06969;
  padding: clamp(18px, 2.4vw, 28px);
  color: var(--notice-text);
  overflow-y: auto;
  min-height: 100%;
}

[data-theme="light"] #page-notices {
  --notice-bg: #eef4fb;
  --notice-card: rgba(255,255,255,.86);
  --notice-card-2: rgba(255,255,255,.72);
  --notice-border: rgba(35, 64, 105, .13);
  --notice-border-strong: rgba(35, 64, 105, .22);
  --notice-text: #17243a;
  --notice-muted: rgba(43, 59, 83, .72);
  --notice-soft: rgba(43, 59, 83, .52);
}

#page-notices .notices-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto;
}

#page-notices .notices-hero,
#page-notices .notices-card,
#page-notices .notice-metric,
#page-notices .notices-tabs {
  border: 1px solid var(--notice-border);
  background:
    linear-gradient(180deg, var(--vc-layer-soft), rgba(255,255,255,.016)),
    var(--notice-card);
  box-shadow:
    0 20px 60px var(--vc-shade-strong),
    inset 0 1px 0 var(--vc-layer-alpha-050);
  backdrop-filter: blur(16px);
}

#page-notices .notices-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 160px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

#page-notices .notices-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 420px;
  height: 240px;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 45%, rgba(79,156,255,.26), transparent 52%),
    radial-gradient(circle at 65% 45%, rgba(55,199,132,.18), transparent 50%);
  filter: blur(8px);
}

#page-notices .notices-hero-copy,
#page-notices .notices-hero-actions {
  position: relative;
  z-index: 1;
}

#page-notices .notices-kicker,
#page-notices .notices-eyebrow,
#page-notices .notices-soft-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--notice-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#page-notices .notices-kicker {
  padding: 7px 10px;
  color: #a9f0d1;
  background: rgba(55,199,132,.12);
  border: 1px solid rgba(55,199,132,.2);
  border-radius: 999px;
}

#page-notices h2,
#page-notices h3,
#page-notices h4,
#page-notices p {
  margin: 0;
}

#page-notices .notices-hero h2 {
  margin-top: 16px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .95;
  letter-spacing: 0;
  font-weight: 880;
}

#page-notices .notices-hero p {
  max-width: 760px;
  margin-top: 12px;
  color: var(--notice-muted);
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  line-height: 1.55;
}

#page-notices .notices-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#page-notices .notices-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  color: var(--notice-text);
  border: 1px solid var(--notice-border-strong);
  border-radius: 12px;
  background: var(--vc-layer-soft);
  font: inherit;
  font-size: .86rem;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

#page-notices .notices-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(79,156,255,.42);
}

#page-notices .notices-btn:disabled,
#page-notices .notices-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
}

#page-notices .notices-btn.primary {
  color: var(--vc-ink-inverse);
  border-color: rgba(79,156,255,.58);
  background: linear-gradient(135deg, #2f7df4, #3c9ef4);
  box-shadow: 0 16px 34px rgba(47,125,244,.28);
}

#page-notices .notices-btn.secondary {
  background: var(--vc-layer-medium);
}

#page-notices .notices-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

#page-notices .notice-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  border-radius: 18px;
}

#page-notices .notice-metric-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--vc-ink-inverse);
}

#page-notices .notice-metric-icon.blue { background: linear-gradient(135deg, #2f7df4, #60a5fa); }
#page-notices .notice-metric-icon.violet { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
#page-notices .notice-metric-icon.pink { background: linear-gradient(135deg, #db2777, #fb7185); }
#page-notices .notice-metric-icon.red { background: linear-gradient(135deg, #dc2626, #fb7185); }
#page-notices .notice-metric-icon.green { background: linear-gradient(135deg, #059669, #34d399); }
#page-notices .notice-metric-icon.slate { background: linear-gradient(135deg, #475569, #94a3b8); }

#page-notices .notice-metric strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 850;
  line-height: 1;
}

#page-notices .notice-metric span:last-child {
  display: block;
  margin-top: 5px;
  color: var(--notice-muted);
  font-size: .76rem;
  font-weight: 650;
}

#page-notices .notices-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#page-notices .notices-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--notice-muted);
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

#page-notices .notices-tab.active {
  color: var(--notice-text);
  border-color: rgba(79,156,255,.32);
  background: rgba(79,156,255,.13);
}

#page-notices .notices-workgrid,
#page-notices .notices-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 16px;
}

#page-notices .notices-card {
  border-radius: 20px;
  padding: clamp(18px, 2vw, 22px);
}

#page-notices .notices-card-head,
#page-notices .notices-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

#page-notices .notices-card-head h3,
#page-notices .notices-section-head h3 {
  margin-top: 5px;
  color: var(--notice-text);
  font-size: 1.05rem;
  font-weight: 820;
  letter-spacing: 0;
}

#page-notices .notices-status-pill,
#page-notices .notice-table-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

#page-notices .notices-status-pill.draft,
#page-notices .notice-table-status.draft {
  color: var(--vc-badge-info-text);
  background: var(--vc-badge-info-bg);
}
#page-notices .notices-status-pill.safe,
#page-notices .notice-table-status.safe {
  color: var(--vc-badge-success-text);
  background: var(--vc-badge-success-bg);
}
#page-notices .notice-table-status.scheduled {
  color: var(--vc-badge-info-text);
  background: var(--vc-badge-info-bg);
}
#page-notices .notice-table-status.approval {
  color: var(--vc-badge-warning-text);
  background: var(--vc-badge-warning-bg);
}
#page-notices .notice-table-status.paused {
  color: var(--vc-badge-neutral-text);
  background: var(--vc-badge-neutral-bg);
}
#page-notices .notice-table-status.failed {
  color: var(--vc-badge-danger-text);
  background: var(--vc-badge-danger-bg);
}

#page-notices .notices-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

#page-notices .notice-step {
  min-height: 122px;
  padding: 13px;
  border: 1px solid var(--notice-border);
  border-radius: 16px;
  background: var(--vc-layer-alpha-045);
}

#page-notices .notice-step span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 10px;
  color: var(--notice-muted);
  background: var(--vc-layer-medium);
  font-size: .76rem;
  font-weight: 850;
}

#page-notices .notice-step.active {
  border-color: rgba(79,156,255,.38);
  background: rgba(79,156,255,.11);
}

#page-notices .notice-step.active span {
  color: var(--vc-ink-inverse);
  background: linear-gradient(135deg, #2f7df4, #60a5fa);
}

#page-notices .notice-step strong,
#page-notices .notice-program strong,
#page-notices .notice-type-card strong {
  display: block;
  color: var(--notice-text);
  font-size: .86rem;
  font-weight: 800;
}

#page-notices .notice-step small,
#page-notices .notice-program span,
#page-notices .notice-type-card span {
  display: block;
  margin-top: 6px;
  color: var(--notice-muted);
  font-size: .75rem;
  line-height: 1.45;
}

#page-notices .notice-program-list {
  display: grid;
  gap: 10px;
}

#page-notices .notice-program {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--notice-border);
  border-radius: 15px;
  background: var(--vc-layer-subtle);
}

#page-notices .notice-program i,
#page-notices .notice-type-card i {
  color: var(--notice-blue);
}

#page-notices .notices-section {
  padding: clamp(18px, 2vw, 22px);
  border: 1px solid var(--notice-border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--vc-layer-faint), rgba(255,255,255,.012));
}

#page-notices .notice-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-notices .notice-type-card {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--notice-border);
  border-radius: 18px;
  background: var(--notice-card-2);
}

#page-notices .notice-type-card i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(79,156,255,.12);
}

#page-notices .notices-wordpress {
  min-width: 0;
}

#page-notices .notices-wp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-notices .notices-mini-panel {
  padding: 14px;
  border: 1px solid var(--notice-border);
  border-radius: 16px;
  background: var(--vc-layer-subtle);
}

#page-notices .notices-mini-panel.mapping {
  grid-column: 1 / -1;
}

#page-notices .notices-mini-panel h4 {
  margin-bottom: 12px;
  color: var(--notice-text);
  font-size: .9rem;
  font-weight: 820;
}

#page-notices .notice-site-row,
#page-notices .notice-map-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--notice-muted);
  font-size: .8rem;
}

#page-notices .notice-site-row strong,
#page-notices .notice-map-row strong {
  color: var(--notice-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-notices .notice-site-row em {
  color: var(--notice-soft);
  font-style: normal;
  font-size: .72rem;
}

#page-notices .notice-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #94a3b8;
}

#page-notices .notice-dot.ok { background: var(--notice-green); box-shadow: 0 0 0 4px rgba(55,199,132,.12); }
#page-notices .notice-dot.sync { background: var(--notice-blue); box-shadow: 0 0 0 4px rgba(79,156,255,.12); }
#page-notices .notice-dot.pending { background: var(--notice-amber); box-shadow: 0 0 0 4px rgba(244,183,74,.12); }

#page-notices .notice-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-notices .notice-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--notice-muted);
  border: 1px solid var(--notice-border);
  border-radius: 999px;
  background: var(--vc-layer-subtle);
  font-size: .76rem;
  font-weight: 720;
}

#page-notices .notice-map-row {
  grid-template-columns: minmax(120px, 1fr) auto minmax(130px, 1.1fr);
  border-top: 1px solid var(--vc-layer-soft);
}

[data-theme="light"] #page-notices .notice-map-row {
  border-top-color: rgba(35, 64, 105, .08);
}

#page-notices .notices-disclaimer {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  color: var(--notice-muted);
  font-size: .78rem;
}

#page-notices .notice-history-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

#page-notices .notice-history-select-label {
  display: grid;
  gap: 7px;
  flex: 1 1 260px;
  min-width: 220px;
  color: var(--notice-muted);
  font-size: .76rem;
  font-weight: 800;
}

#page-notices .notice-history-select-label select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--notice-border);
  border-radius: 12px;
  color: var(--notice-text);
  background: rgba(4, 12, 24, .62);
  font: inherit;
  font-size: .86rem;
  outline: none;
}

#page-notices .notice-history-select-label select:focus {
  border-color: rgba(79,156,255,.48);
  box-shadow: 0 0 0 3px rgba(79,156,255,.12);
}

#page-notices #notice-history-refresh-btn {
  flex: 0 0 auto;
}

#page-notices .notice-history-log-detail {
  max-width: 340px;
  white-space: normal;
  word-break: break-word;
}

#page-notices .notice-history-log-error {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #fecaca;
}

@media (max-width: 768px) {
  #page-notices .notice-history-controls {
    flex-direction: column;
    align-items: stretch;
  }

  #page-notices .notice-history-select-label {
    min-width: 0;
  }

  #page-notices #notice-history-refresh-btn {
    width: 100%;
  }

  #page-notices .notice-history-log-detail {
    max-width: none;
  }
}

#page-notices .notices-safe-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-notices .notices-safe-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--notice-muted);
  font-size: .84rem;
  line-height: 1.45;
}

#page-notices .notices-safe-list i {
  color: var(--notice-green);
  margin-top: 2px;
}

#page-notices .notices-table-wrap {
  overflow-x: auto;
}

#page-notices .notices-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

#page-notices .notices-table th {
  padding: 0 12px 6px;
  color: var(--notice-soft);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

#page-notices .notices-table td {
  padding: 13px 12px;
  color: var(--notice-muted);
  background: var(--vc-layer-subtle);
  border-top: 1px solid var(--notice-border);
  border-bottom: 1px solid var(--notice-border);
  font-size: .82rem;
}

#page-notices .notices-table td:first-child {
  color: var(--notice-text);
  border-left: 1px solid var(--notice-border);
  border-radius: 13px 0 0 13px;
  font-weight: 760;
}

#page-notices .notices-table td:last-child {
  border-right: 1px solid var(--notice-border);
  border-radius: 0 13px 13px 0;
}

#page-notices .notices-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 128px;
  padding: 22px;
  color: var(--notice-muted);
  text-align: center;
}

#page-notices .notices-empty-state i {
  color: var(--notice-blue);
  font-size: 1.35rem;
}

#page-notices .notices-empty-state strong {
  color: var(--notice-text);
  font-size: .95rem;
}

#page-notices .notices-empty-state span {
  max-width: 480px;
  color: var(--notice-muted);
  font-size: .82rem;
  line-height: 1.45;
}

#page-notices .notice-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#page-notices .notices-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--notice-border);
  border-radius: 10px;
  color: var(--notice-muted);
  background: var(--vc-layer-alpha-050);
  cursor: pointer;
}

#page-notices .notices-icon-btn:hover {
  color: var(--notice-text);
  border-color: rgba(79,156,255,.42);
  background: rgba(79,156,255,.12);
}

#page-notices .notices-icon-btn.danger:hover {
  color: #fecaca;
  border-color: rgba(240,105,105,.35);
  background: rgba(240,105,105,.12);
}

#page-notices .notices-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-notices .notice-template-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--notice-border);
  border-radius: 17px;
  background: var(--vc-layer-subtle);
}

#page-notices .notice-template-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

#page-notices .notice-template-channel {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(79,156,255,.13);
  font-size: .68rem;
  font-weight: 800;
}

#page-notices .notice-template-card strong {
  display: block;
  color: var(--notice-text);
  font-size: .95rem;
  font-weight: 820;
}

#page-notices .notice-template-card p {
  display: -webkit-box;
  min-height: 42px;
  margin-top: 8px;
  color: var(--notice-muted);
  font-size: .8rem;
  line-height: 1.45;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#page-notices .notice-template-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

#page-notices .notice-template-vars span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--notice-border);
  border-radius: 999px;
  color: var(--notice-soft);
  font-size: .7rem;
  font-weight: 720;
}

#page-notices .notice-template-card small {
  display: block;
  margin-top: 12px;
  color: var(--notice-soft);
  font-size: .72rem;
}

#page-notices .notice-modal {
  position: fixed;
  inset: 0;
  z-index: 100500;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 24px);
  isolation: isolate;
  overflow-y: auto;
  pointer-events: auto;
}

#page-notices .notice-modal[hidden] {
  display: none !important;
}

#page-notices .notice-modal.is-open {
  display: grid;
}

#page-notices .notice-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(2, 8, 18, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#page-notices .notice-modal-panel {
  position: relative;
  z-index: 2;
  width: min(880px, calc(100vw - 32px));
  max-height: min(86dvh, 820px);
  overflow: auto;
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
  pointer-events: auto;
  border: 1px solid var(--notice-border-strong);
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--vc-layer-alpha-075), var(--vc-layer-alpha-025)),
    #0b1728;
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}

body.notice-modal-open {
  overflow: hidden;
}

body.notice-modal-open #page-notices.page.active {
  animation: none !important;
  transform: none !important;
}

#page-notices .notice-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--vc-layer-alpha-065);
}

#page-notices .notice-modal-head h3 {
  margin-top: 5px;
  color: var(--notice-text);
  font-size: 1.1rem;
}

#page-notices .notice-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--notice-border);
  border-radius: 12px;
  color: var(--notice-muted);
  background: var(--vc-layer-soft);
  cursor: pointer;
}

#page-notices #notice-modal-body {
  padding: 18px 20px 20px;
}

#page-notices .notice-form {
  display: grid;
  gap: 13px;
}

#page-notices .notice-modal-subtitle {
  margin: -2px 0 2px;
  color: var(--notice-muted);
  font-size: .86rem;
  line-height: 1.45;
}

#page-notices .notice-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(240,105,105,.28);
  border-radius: 14px;
  color: #fecaca;
  background: rgba(240,105,105,.12);
  font-size: .8rem;
  line-height: 1.45;
}

#page-notices .notice-form-alert[hidden] {
  display: none;
}

#page-notices .notice-form label {
  display: grid;
  gap: 7px;
  color: var(--notice-muted);
  font-size: .76rem;
  font-weight: 800;
}

#page-notices .notice-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-notices .notice-form input,
#page-notices .notice-form select,
#page-notices .notice-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--notice-border);
  border-radius: 12px;
  color: var(--notice-text);
  background: rgba(4, 12, 24, .62);
  font: inherit;
  font-size: .86rem;
  outline: none;
}

#page-notices .notice-form textarea {
  resize: vertical;
  line-height: 1.45;
}

#page-notices .notice-form input:focus,
#page-notices .notice-form select:focus,
#page-notices .notice-form textarea:focus {
  border-color: rgba(79,156,255,.48);
  box-shadow: 0 0 0 3px rgba(79,156,255,.12);
}

#page-notices .notice-preview-box,
#page-notices .notice-form-note {
  border: 1px solid var(--notice-border);
  border-radius: 15px;
  background: var(--vc-layer-alpha-045);
}

#page-notices .notice-preview-box {
  padding: 13px;
}

#page-notices .notice-preview-box > span {
  display: block;
  margin-bottom: 8px;
  color: var(--notice-soft);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#page-notices .notice-preview-box p {
  color: var(--notice-text);
  white-space: pre-wrap;
  font-size: .86rem;
  line-height: 1.55;
}

#page-notices .notice-field {
  display: grid;
  gap: 7px;
  color: var(--notice-muted);
  font-size: .76rem;
  font-weight: 800;
}

#page-notices .notice-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-notices .notice-check-row label {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--notice-border);
  border-radius: 12px;
  color: var(--notice-muted);
  background: rgba(4, 12, 24, .42);
  font-size: .82rem;
  font-weight: 760;
}

#page-notices .notice-check-row input {
  width: auto;
  min-height: 0;
  margin: 0 7px 0 0;
  accent-color: var(--notice-blue);
}

#page-notices .notice-var-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#page-notices .notice-var-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--notice-border);
  border-radius: 999px;
  color: var(--notice-muted);
  background: var(--vc-layer-alpha-045);
  font: inherit;
  font-size: .76rem;
  font-weight: 780;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

#page-notices .notice-var-chip:hover {
  color: var(--notice-text);
  border-color: rgba(79,156,255,.42);
  background: rgba(79,156,255,.12);
}

#page-notices .notice-preview-composer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
  gap: 12px;
}

#page-notices .notice-preview-device-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#page-notices .notice-preview-device,
#page-notices .notice-preview-side {
  min-width: 0;
  border: 1px solid var(--notice-border);
  border-radius: 16px;
  background: rgba(4, 12, 24, .46);
}

#page-notices .notice-preview-device {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

#page-notices .notice-preview-device-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--notice-soft);
  font-size: .72rem;
  font-weight: 820;
  text-transform: uppercase;
}

#page-notices .notice-preview-device-top span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--notice-soft);
  letter-spacing: 0;
}

#page-notices .notice-preview-device-top strong {
  color: var(--notice-text);
}

#page-notices .notice-preview-subject {
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--notice-text);
  background: rgba(79,156,255,.12);
  font-size: .82rem;
  font-weight: 820;
  line-height: 1.4;
}

#page-notices .notice-preview-device p {
  margin: 0;
  color: var(--notice-text);
  white-space: pre-wrap;
  font-size: .88rem;
  line-height: 1.58;
}

#page-notices .notice-preview-side {
  display: grid;
  gap: 10px;
  padding: 12px;
}

#page-notices .notice-preview-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#page-notices .notice-preview-stat strong {
  color: var(--notice-text);
  font-size: 1.65rem;
  line-height: 1;
}

#page-notices .notice-preview-stat span {
  color: var(--notice-muted);
  font-size: .76rem;
  font-weight: 760;
}

#page-notices .notice-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#page-notices .notice-preview-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--notice-border);
  border-radius: 999px;
  color: var(--notice-muted);
  background: var(--vc-layer-faint);
  font-size: .68rem;
  font-weight: 780;
}

#page-notices .notice-preview-safety {
  display: grid;
  gap: 7px;
}

#page-notices .notice-preview-safety span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--notice-muted);
  font-size: .76rem;
  line-height: 1.4;
}

#page-notices .notice-preview-safety i {
  color: var(--notice-green);
  margin-top: 2px;
}

#page-notices .notice-preview-warning {
  display: flex;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(244,183,74,.22);
  border-radius: 12px;
  color: #fde68a;
  background: rgba(244,183,74,.1);
  font-size: .76rem;
  line-height: 1.4;
}

#page-notices .notice-preview-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--notice-soft);
  font-size: .72rem;
  line-height: 1.4;
}

#page-notices .notice-preview-vars span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--notice-border);
  border-radius: 999px;
  color: var(--notice-muted);
  background: var(--vc-layer-faint);
  font-weight: 760;
}

#page-notices .notice-audience-sample {
  display: grid;
  gap: 7px;
}

#page-notices .notice-audience-sample div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--notice-border);
  border-radius: 12px;
  background: var(--vc-layer-faint);
}

#page-notices .notice-audience-sample strong {
  color: var(--notice-text);
  font-size: .78rem;
}

#page-notices .notice-audience-sample span {
  color: var(--notice-soft);
  font-size: .72rem;
  line-height: 1.35;
}

#page-notices .notice-form-note {
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  color: var(--notice-muted);
  font-size: .78rem;
  line-height: 1.45;
}

#page-notices .notice-form-note i {
  color: var(--notice-green);
  margin-top: 2px;
}

#page-notices .notice-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

#page-notices .notice-detail {
  display: grid;
  gap: 14px;
}

#page-notices .notice-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-notices .notice-detail-grid span {
  padding: 12px;
  border: 1px solid var(--notice-border);
  border-radius: 14px;
  color: var(--notice-muted);
  background: var(--vc-layer-subtle);
  font-size: .82rem;
}

#page-notices .notice-detail-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--notice-soft);
  font-size: .68rem;
  text-transform: uppercase;
}

/* Central de Avisos: hardening local contra CSS global/cache antigo. */
#page-notices,
#page-notices * {
  box-sizing: border-box;
}

#page-notices .notices-shell > * {
  min-width: 0;
}

#page-notices .notices-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}

#page-notices .notice-stat-card {
  min-width: 0;
}

#page-notices .notice-stat-card > div,
#page-notices .notice-metric > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#page-notices .notice-stat-card strong,
#page-notices .notice-metric strong {
  display: block;
}

#page-notices .notice-stat-card span:last-child,
#page-notices .notice-metric span:last-child {
  display: block;
  overflow-wrap: anywhere;
}

#page-notices button.notices-btn,
#page-notices button.notices-tab,
#page-notices button.notices-icon-btn,
#page-notices button.notice-modal-close {
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
}

#page-notices .notices-tabs {
  align-items: center;
  min-width: 0;
}

#page-notices .notices-panel {
  min-width: 0;
}

#page-notices .notices-card,
#page-notices .notices-section,
#page-notices .notice-type-card,
#page-notices .notice-template-card,
#page-notices .notices-mini-panel,
#page-notices .notice-program,
#page-notices .notice-step {
  overflow-wrap: anywhere;
}

#page-notices .notices-table-wrap,
#page-notices .notices-steps,
#page-notices .notices-tabs {
  -webkit-overflow-scrolling: touch;
}

#page-notices .notices-table td[colspan] {
  padding: 0;
}

#page-notices .notice-template-top,
#page-notices .notice-row-actions {
  min-width: 0;
}

#page-notices .notice-form button,
#page-notices .notice-modal button {
  font-family: inherit;
}

@media (max-width: 1280px) {
  #page-notices .notices-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #page-notices .notice-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-notices .notices-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-notices .notices-workgrid,
  #page-notices .notices-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  #page-notices {
    padding: 12px;
  }

  #page-notices .notices-hero {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
  }

  #page-notices .notices-hero-actions,
  #page-notices .notices-btn {
    width: 100%;
  }

  #page-notices .notices-summary,
  #page-notices .notice-type-grid,
  #page-notices .notices-wp-grid,
  #page-notices .notices-template-grid,
  #page-notices .notice-form-grid,
  #page-notices .notice-detail-grid {
    grid-template-columns: 1fr;
  }

  #page-notices .notice-form-actions {
    flex-direction: column-reverse;
  }

  #page-notices .notice-form-actions .notices-btn {
    width: 100%;
  }

  #page-notices .notice-modal {
    align-items: stretch;
    place-items: stretch;
    padding: 10px;
  }

  #page-notices .notice-modal-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  #page-notices .notice-preview-composer {
    grid-template-columns: 1fr;
  }

  #page-notices .notice-check-row label {
    flex: 1 1 130px;
  }

  #page-notices .notices-card-head,
  #page-notices .notices-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  #page-notices .notices-steps {
    grid-template-columns: repeat(7, 164px);
  }

  #page-notices .notice-map-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
  }

  #page-notices .notice-map-row i {
    display: none;
  }
}

/* ── Fase 4: seleção de público, prévia de audiência e opt-outs ───────────── */
#page-notices .notice-audience {
  margin: 4px 0 8px;
  padding: 14px;
  border: 1px solid var(--notice-border-strong);
  border-radius: 16px;
  background: rgba(79,156,255,.06);
}
#page-notices .notice-audience legend {
  padding: 0 8px;
  color: var(--notice-text);
  font-weight: 820;
  font-size: .9rem;
}
#page-notices .notice-audience-hint {
  margin: 2px 0 12px;
  color: var(--notice-muted);
  font-size: .8rem;
  line-height: 1.4;
}
#page-notices .notice-audience-actions {
  display: flex;
  align-items: flex-end;
}
#page-notices .notice-audience-result {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--notice-border);
  border-radius: 14px;
  background: var(--vc-layer-alpha-030);
}
#page-notices .notice-audience-safe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
  font-size: .78rem;
  font-weight: 700;
}
#page-notices .notice-audience-safe.error {
  background: var(--vc-danger-soft);
  color: #fecaca;
}
#page-notices .notice-audience-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
#page-notices .notice-audience-metrics .pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem;
  background: var(--vc-layer-medium);
  color: var(--notice-text);
}
#page-notices .notice-audience-metrics .pill.ok { background: rgba(34,197,94,.15); color: #bbf7d0; }
#page-notices .notice-audience-metrics .pill.skip { background: rgba(148,163,184,.15); color: #e2e8f0; }
#page-notices .notice-audience-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  color: var(--notice-muted);
  font-size: .78rem;
}
#page-notices .notice-audience-breakdown strong { color: var(--notice-text); }
#page-notices .notice-audience-warnings {
  margin: 8px 0;
  padding: 8px 10px;
  list-style: none;
  border-radius: 10px;
  background: rgba(234,179,8,.1);
}
#page-notices .notice-audience-warnings li {
  display: flex;
  gap: 8px;
  color: #fde68a;
  font-size: .78rem;
  padding: 2px 0;
}
#page-notices .notice-audience-sample-wrap { overflow-x: auto; }
#page-notices .notice-audience-sample {
  width: 100%;
  border-collapse: collapse;
  font-size: .76rem;
}
#page-notices .notice-audience-sample th,
#page-notices .notice-audience-sample td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--notice-border);
  color: var(--notice-text);
  white-space: nowrap;
}
#page-notices .notice-audience-sample th { color: var(--notice-muted); font-weight: 700; }
#page-notices .notice-audience-sample small { display: block; color: var(--notice-muted); }
#page-notices .notice-elig {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
}
#page-notices .notice-elig.ok {
  color: var(--vc-badge-success-text);
  background: var(--vc-badge-success-bg);
}
#page-notices .notice-elig.skip {
  color: var(--vc-badge-neutral-text);
  background: var(--vc-badge-neutral-bg);
}
#page-notices .notice-audience-empty,
#page-notices .notice-audience-sample-wrap small {
  color: var(--notice-muted);
  font-size: .74rem;
}

#page-notices .notices-optouts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
#page-notices .notice-optout-card {
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--notice-border);
  border-radius: 15px;
  background: var(--vc-danger-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#page-notices .notice-optout-card strong {
  color: var(--notice-text);
  font-size: .9rem;
  font-weight: 800;
  word-break: break-all;
}
#page-notices .notice-optout-card small { color: var(--notice-muted); font-size: .72rem; }

/* ── Fase 5: botões de teste/aprovação ───────────────────────────────────── */
#page-notices .notices-btn.success {
  color: var(--vc-ink-inverse);
  border-color: rgba(34,197,94,.5);
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 16px 34px rgba(34,197,94,.24);
}
#page-notices .notices-icon-btn.success { color: #86efac; }
#page-notices .notices-icon-btn.success:hover:not(:disabled) {
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.4);
}

/* ── Fase 6D-1: painel informativo de segurança para envio real ─────────── */
#page-notices .notice-realsend-safety {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--notice-border-strong);
  border-radius: 16px;
  background: var(--vc-danger-soft);
}
#page-notices .notice-realsend-safety h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--notice-text);
  font-size: .88rem;
  font-weight: 820;
}
#page-notices .notice-realsend-safety .notice-audience-warnings ul {
  margin: 6px 0 0;
  padding-left: 4px;
  list-style: none;
}

/* ── Abas reais da Central de Avisos (substitui rolagem por âncora) ───────── */
#page-notices .notice-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#page-notices .notice-tabpanel[hidden] {
  display: none;
}

/* ── VipTreiner — módulo pessoal de treinos (separado da Central de Avisos) ─ */
#page-viptrainer .vt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#page-viptrainer .vt-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  font-size: 1.32rem;
  font-weight: 820;
}
#page-viptrainer .viptrainer-brand-mark,
#page-viptrainer .viptrainer-metric-mark,
#page-viptrainer .viptrainer-empty-mark,
#page-viptrainer .viptrainer-coach-mark,
#page-viptrainer .card-header .card-title > i.fas {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(55,199,132,.36), rgba(79,156,255,.22)),
    var(--vc-layer-alpha-050);
}
#page-viptrainer .viptrainer-brand-mark {
  width: 30px;
  height: 30px;
}
#page-viptrainer .viptrainer-brand-mark::before,
#page-viptrainer .viptrainer-metric-mark::before,
#page-viptrainer .viptrainer-empty-mark::before,
#page-viptrainer .viptrainer-coach-mark::before,
#page-viptrainer .card-header .card-title > i.fas::before {
  content: "" !important;
  width: 44%;
  height: 44%;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,.86);
  border-left-width: 5px;
  border-right-width: 5px;
  transform: rotate(-10deg);
}
#page-viptrainer .viptrainer-metric-mark {
  width: 100%;
  height: 100%;
  background: transparent;
}
#page-viptrainer .viptrainer-metric-mark::before {
  width: 16px;
  height: 16px;
}
#page-viptrainer .viptrainer-metric-mark.is-calendar::before,
#page-viptrainer .viptrainer-metric-mark.is-weight::before {
  border-radius: 50%;
  border-width: 2px;
}
#page-viptrainer .viptrainer-metric-mark.is-done::before {
  width: 18px;
  height: 10px;
  border-top: 0;
  border-right: 0;
  border-left-width: 3px;
  border-bottom-width: 3px;
  border-radius: 1px;
  transform: rotate(-45deg);
}
#page-viptrainer .card-header .card-title > i.fas {
  width: 22px;
  height: 22px;
  margin-right: 2px;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: -5px;
}
#page-viptrainer .card-header .card-title > i.fas::before {
  width: 9px;
  height: 9px;
  border-width: 2px;
  border-left-width: 3px;
  border-right-width: 3px;
}
#page-viptrainer .vt-tagline {
  margin: 0;
  color: var(--vc-ink-3);
  font-size: .82rem;
}

#page-viptrainer .vt-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin: 10px 0 14px;
  border: 1px solid var(--vc-border);
  border-radius: 14px;
  background: var(--vc-layer-alpha-030);
  overflow-x: auto;
  scrollbar-width: none;
}
#page-viptrainer .vt-tabs::-webkit-scrollbar {
  display: none;
}
#page-viptrainer .vt-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--vc-ink-3);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
#page-viptrainer .vt-tab.active {
  color: var(--vc-ink-inverse);
  border-color: rgba(55,199,132,.34);
  background:
    linear-gradient(135deg, rgba(55,199,132,.24), rgba(79,156,255,.16)),
    var(--vc-layer-subtle);
}
#page-viptrainer .vt-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#page-viptrainer .vt-tabpanel[hidden] {
  display: none;
}

#page-viptrainer .vt-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#page-viptrainer .vt-inline-form,
#modal-viptrainer .vt-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}
#page-viptrainer .vt-inline-form label,
#modal-viptrainer .vt-inline-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .8rem;
  color: var(--vc-ink-3);
}
#page-viptrainer .vt-inline-form input,
#page-viptrainer .vt-inline-form select,
#page-viptrainer .vt-inline-form textarea,
#modal-viptrainer .vt-inline-form input,
#modal-viptrainer .vt-inline-form select,
#modal-viptrainer .vt-inline-form textarea {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--vc-border-strong);
  background: var(--vc-layer-subtle);
  color: inherit;
  font: inherit;
}
#page-viptrainer .vt-full,
#modal-viptrainer .vt-full { grid-column: 1 / -1; }

#page-viptrainer .vt-exercise-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr .8fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  margin-bottom: 8px;
}
#page-viptrainer .vt-exercise-row strong { display: block; }
#page-viptrainer .vt-exercise-row small { color: var(--vc-ink-3); display: block; }
#page-viptrainer .vt-exercise-actions { display: flex; gap: 6px; justify-content: flex-end; }

#page-viptrainer .vt-workout-day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  margin-bottom: 8px;
}
#page-viptrainer .vt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
}
#page-viptrainer .vt-badge.done {
  color: var(--vc-badge-success-text);
  background: var(--vc-badge-success-bg);
}
#page-viptrainer .vt-badge.skipped {
  color: var(--vc-badge-danger-text);
  background: var(--vc-badge-danger-bg);
}
#page-viptrainer .vt-badge.planned,
#page-viptrainer .vt-badge.none {
  color: var(--vc-badge-neutral-text);
  background: var(--vc-badge-neutral-bg);
}
#page-viptrainer .vt-badge.rescheduled {
  color: var(--vc-badge-warning-text);
  background: var(--vc-badge-warning-bg);
}

#page-viptrainer .viptrainer-app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
  align-items: start;
}
#page-viptrainer .viptrainer-app-main,
#page-viptrainer .viptrainer-app-side {
  min-width: 0;
}
#page-viptrainer .viptrainer-app-main,
#page-viptrainer .viptrainer-app-side,
#page-viptrainer .viptrainer-exercise-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#page-viptrainer .viptrainer-today-header,
#page-viptrainer .viptrainer-section-head,
#page-viptrainer .viptrainer-exercise-topline,
#page-viptrainer .viptrainer-workout-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#page-viptrainer .viptrainer-today-header h3,
#page-viptrainer .viptrainer-section-head h4,
#page-viptrainer .viptrainer-quick-card h4,
#page-viptrainer .viptrainer-today-hero h3 {
  margin: 0;
  letter-spacing: 0;
}
#page-viptrainer .viptrainer-today-header h3 {
  font-size: 1.3rem;
  font-weight: 850;
}
#page-viptrainer .viptrainer-today-header span:not(.viptrainer-status-badge) {
  color: var(--vc-ink-3);
  font-size: .82rem;
}
#page-viptrainer .viptrainer-kicker {
  margin: 0 0 4px;
  color: #37c784;
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#page-viptrainer .viptrainer-today-hero,
#page-viptrainer .viptrainer-active-session,
#page-viptrainer .viptrainer-session-coach,
#page-viptrainer .viptrainer-quick-card,
#page-viptrainer .viptrainer-exercise-card,
#page-viptrainer .viptrainer-workout-footer,
#page-viptrainer .viptrainer-week-strip,
#page-viptrainer .viptrainer-progress-card,
#page-viptrainer .viptrainer-empty-state {
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: var(--vc-layer-faint);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
#page-viptrainer .viptrainer-today-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(79,156,255,.18), rgba(6,182,212,.10) 52%, rgba(124,58,237,.10)),
    var(--vc-layer-faint);
}
#page-viptrainer .viptrainer-today-hero h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 880;
}
#page-viptrainer .viptrainer-today-hero p {
  margin: 6px 0 0;
  color: var(--vc-ink-3);
}
#page-viptrainer .viptrainer-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
}
#page-viptrainer .viptrainer-hero-metrics span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--vc-layer-alpha-100);
  border-radius: 8px;
  background: rgba(10,15,25,.32);
}
#page-viptrainer .viptrainer-hero-metrics strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.1;
}
#page-viptrainer .viptrainer-hero-metrics small,
#page-viptrainer .viptrainer-workout-footer small {
  display: block;
  color: var(--vc-ink-3);
  font-size: .72rem;
}
#page-viptrainer .viptrainer-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
}
#page-viptrainer .viptrainer-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f9cff, #06b6d4, #8b5cf6);
  transition: width .75s cubic-bezier(.2,.8,.2,1);
  animation: vtProgressFlow 1.1s ease both;
}
#page-viptrainer .viptrainer-week-strip {
  display: grid;
  gap: 12px;
  padding: 13px;
  background:
    linear-gradient(135deg, rgba(79,156,255,.10), rgba(124,58,237,.08)),
    var(--vc-layer-faint);
}
#page-viptrainer .viptrainer-week-strip-head,
#page-viptrainer .viptrainer-progress-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#page-viptrainer .viptrainer-week-strip-head span,
#page-viptrainer .viptrainer-progress-main p {
  margin: 0;
  color: var(--vc-ink-3);
  font-size: .78rem;
}
#page-viptrainer .viptrainer-week-strip-head strong,
#page-viptrainer .viptrainer-engagement-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(79,156,255,.16);
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}
#page-viptrainer .viptrainer-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
#page-viptrainer .viptrainer-week-day {
  min-width: 0;
  min-height: 66px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(10,15,25,.32);
  cursor: pointer;
}
#page-viptrainer .viptrainer-week-day span {
  color: var(--vc-ink-3);
  font-size: .68rem;
  font-weight: 800;
}
#page-viptrainer .viptrainer-week-day strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--vc-ink-inverse);
  background: rgba(148,163,184,.12);
  font-size: .82rem;
  font-weight: 900;
}
#page-viptrainer .viptrainer-week-day.is-today {
  border-color: rgba(79,156,255,.48);
  box-shadow: 0 0 0 1px rgba(79,156,255,.24), 0 0 28px rgba(79,156,255,.14);
}
#page-viptrainer .viptrainer-week-day.is-today strong {
  background: linear-gradient(135deg, #4f9cff, #8b5cf6);
}
#page-viptrainer .viptrainer-week-day.is-done strong {
  color: #dff6ff;
  background: rgba(6,182,212,.22);
}
#page-viptrainer .viptrainer-week-day.is-rest {
  opacity: .68;
}
#page-viptrainer .viptrainer-week-day.is-rest strong {
  color: #94a3b8;
  background: rgba(148,163,184,.08);
}
#page-viptrainer .viptrainer-week-day.is-pending strong {
  color: #bfdbfe;
  background: rgba(79,156,255,.16);
}
#page-viptrainer .viptrainer-progress-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  background:
    radial-gradient(circle at 14% 20%, rgba(79,156,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.50), rgba(30,41,59,.20)),
    var(--vc-layer-faint);
}
#page-viptrainer .viptrainer-progress-main strong {
  display: block;
  margin: 2px 0;
  color: var(--vc-ink-inverse);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}
#page-viptrainer .viptrainer-progress-main {
  flex-wrap: wrap;
}
#page-viptrainer .viptrainer-progress-ring,
#page-viptrainer .vt-chart-ring {
  --vt-ring-pct: 0;
  position: relative;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--vc-ink-inverse);
  background:
    radial-gradient(circle at center, rgba(8,13,24,.94) 0 55%, transparent 56%),
    conic-gradient(from -90deg, #4f9cff calc(var(--vt-ring-pct) * 1%), rgba(148,163,184,.14) 0);
  box-shadow: inset 0 0 0 1px var(--vc-border), 0 12px 28px rgba(6,182,212,.10);
  animation: vtRingPop .7s cubic-bezier(.2,.8,.2,1) both;
}
#page-viptrainer .viptrainer-progress-ring::after,
#page-viptrainer .vt-chart-ring::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: 1px solid rgba(219,234,254,.08);
}
#page-viptrainer .viptrainer-progress-ring span,
#page-viptrainer .vt-chart-ring span {
  position: relative;
  z-index: 1;
  font-size: .9rem;
  font-weight: 950;
}
#page-viptrainer .viptrainer-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#page-viptrainer .viptrainer-progress-stats span {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: rgba(10,15,25,.30);
}
#page-viptrainer .viptrainer-progress-stats strong,
#page-viptrainer .viptrainer-progress-stats small {
  display: block;
  min-width: 0;
}
#page-viptrainer .viptrainer-progress-stats strong {
  color: var(--vc-ink-inverse);
  font-size: 1rem;
}
#page-viptrainer .viptrainer-progress-stats small {
  color: var(--vc-ink-3);
  font-size: .7rem;
}
#page-viptrainer .viptrainer-next-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px !important;
}
#page-viptrainer .viptrainer-hero-action {
  display: flex;
  justify-content: flex-end;
}
#page-viptrainer .viptrainer-hero-action .btn {
  min-height: 42px;
}
#page-viptrainer .viptrainer-hero-btn {
  min-height: 44px;
  padding-inline: 18px;
}
#page-viptrainer .viptrainer-active-session {
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.36), rgba(15,23,42,.12)),
    var(--vc-layer-subtle);
}
#page-viptrainer .viptrainer-active-top,
#page-viptrainer .viptrainer-active-actions,
#page-viptrainer .viptrainer-active-empty,
#page-viptrainer .viptrainer-session-coach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#page-viptrainer .viptrainer-active-top h3 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: 0;
}
#page-viptrainer .viptrainer-active-top p,
#page-viptrainer .viptrainer-active-empty span,
#page-viptrainer .viptrainer-local-note,
#page-viptrainer .viptrainer-session-coach p,
#page-viptrainer .viptrainer-next-box span,
#page-viptrainer .viptrainer-rest-timer span {
  margin: 0;
  color: var(--vc-ink-3);
  font-size: .8rem;
  line-height: 1.35;
}
#page-viptrainer .viptrainer-active-count {
  flex: 0 0 auto;
  min-width: 82px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(55,199,132,.14);
  font-size: .76rem;
  font-weight: 900;
  text-align: center;
}
#page-viptrainer .viptrainer-active-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  margin-top: 14px;
}
#page-viptrainer .viptrainer-active-current,
#page-viptrainer .viptrainer-rest-timer,
#page-viptrainer .viptrainer-next-box {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: rgba(10,15,25,.28);
}
#page-viptrainer .viptrainer-active-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  margin-bottom: 10px;
}
#page-viptrainer .viptrainer-active-current span,
#page-viptrainer .viptrainer-active-current small {
  color: var(--vc-ink-3);
  font-size: .75rem;
}
#page-viptrainer .viptrainer-active-current strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  min-width: 58px;
  color: var(--vc-ink-inverse);
  font-size: 1.18rem;
  font-weight: 950;
  text-align: right;
}
#page-viptrainer .viptrainer-active-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#page-viptrainer .viptrainer-rest-timer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  border-color: rgba(79,156,255,.20);
}
#page-viptrainer .viptrainer-rest-timer.is-running {
  background: rgba(79,156,255,.10);
}
#page-viptrainer .viptrainer-rest-timer strong {
  display: block;
  margin-top: 2px;
  color: #dbeafe;
  font-size: 1.55rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#page-viptrainer .viptrainer-timer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
#page-viptrainer .viptrainer-next-box strong {
  display: block;
  margin-top: 3px;
  color: var(--vc-ink-inverse);
  font-size: .92rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-active-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 14px;
}
#page-viptrainer .viptrainer-active-actions .btn {
  min-height: 40px;
}
#page-viptrainer .viptrainer-active-empty {
  justify-content: flex-start;
  min-height: 80px;
}
#page-viptrainer .viptrainer-active-empty i,
#page-viptrainer .viptrainer-coach-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #bbf7d0;
  background: rgba(55,199,132,.14);
}
#page-viptrainer .viptrainer-coach-mark {
  width: 100%;
  height: 100%;
  background: transparent;
}
#page-viptrainer .viptrainer-coach-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
#page-viptrainer .viptrainer-coach-actions,
#page-viptrainer .viptrainer-hero-action,
#page-viptrainer .viptrainer-empty-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#page-viptrainer .viptrainer-coach-actions .btn {
  min-height: 32px;
  padding-inline: 10px;
}
#page-viptrainer .viptrainer-active-empty.is-complete i {
  color: #dbeafe;
  background: rgba(79,156,255,.16);
}
#page-viptrainer .viptrainer-session-coach {
  justify-content: flex-start;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(79,156,255,.12), rgba(124,58,237,.08)),
    var(--vc-layer-faint);
  border-color: rgba(79,156,255,.22);
}
#page-viptrainer .viptrainer-set-list {
  display: grid;
  gap: 6px;
}
#page-viptrainer .viptrainer-set-list.compact {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
#page-viptrainer .viptrainer-set-row {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(62px, .8fr) minmax(72px, 1fr) minmax(72px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: rgba(148,163,184,.08);
  font-size: .78rem;
}
#page-viptrainer .viptrainer-set-row label {
  min-width: 0;
  display: grid;
  gap: 2px;
}
#page-viptrainer .viptrainer-set-row small {
  color: var(--vc-ink-3);
  font-size: .66rem;
  line-height: 1;
}
#page-viptrainer .viptrainer-set-row input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--vc-border-strong);
  border-radius: 7px;
  color: var(--vc-ink-inverse);
  background: rgba(15,23,42,.42);
  font-size: .78rem;
}
#page-viptrainer .viptrainer-set-row span,
#page-viptrainer .viptrainer-set-row strong,
#page-viptrainer .viptrainer-set-row em {
  min-width: 0;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-set-row strong {
  color: var(--vc-ink-inverse);
  font-size: .78rem;
}
#page-viptrainer .viptrainer-set-row em {
  color: var(--vc-ink-3);
  font-style: normal;
  font-size: .72rem;
}
#page-viptrainer .viptrainer-set-row.is-done {
  border-color: rgba(55,199,132,.26);
  background: rgba(55,199,132,.10);
}
#page-viptrainer .viptrainer-set-row.is-saving {
  opacity: .72;
}
#page-viptrainer .viptrainer-set-row > .btn {
  min-width: 88px;
  white-space: nowrap;
}
#page-viptrainer .viptrainer-set-row > em {
  grid-column: 1 / -1;
}
#page-viptrainer .viptrainer-exercise-session-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--vc-ink-3);
  font-size: .74rem;
}
#page-viptrainer .viptrainer-exercise-session-summary span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#page-viptrainer .viptrainer-set-history {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
#page-viptrainer .viptrainer-set-history span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: rgba(148,163,184,.08);
}
#page-viptrainer .viptrainer-set-history strong,
#page-viptrainer .viptrainer-set-history small {
  display: block;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-section-head {
  margin-top: 4px;
}
#page-viptrainer .viptrainer-section-head.compact {
  margin-top: 0;
}
#page-viptrainer .viptrainer-progress-pill,
#page-viptrainer .viptrainer-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 850;
}
#page-viptrainer .viptrainer-progress-pill {
  color: #dbeafe;
  background: rgba(79,156,255,.16);
}
#page-viptrainer .viptrainer-status-badge.planned { color: #e2e8f0; background: rgba(148,163,184,.18); }
#page-viptrainer .viptrainer-status-badge.in_progress { color: #bfdbfe; background: rgba(79,156,255,.18); }
#page-viptrainer .viptrainer-status-badge.done { color: #bbf7d0; background: rgba(55,199,132,.18); }
#page-viptrainer .viptrainer-status-badge.skipped { color: #fed7aa; background: var(--vc-warning-surface); }
#page-viptrainer .viptrainer-status-badge.rest,
#page-viptrainer .viptrainer-status-badge.none { color: #cbd5e1; background: rgba(148,163,184,.12); }
#page-viptrainer .viptrainer-exercise-card {
  display: grid;
  grid-template-columns: 34px 82px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#page-viptrainer .viptrainer-exercise-card:hover {
  border-color: rgba(79,156,255,.34);
  transform: translateY(-1px);
}
#page-viptrainer .viptrainer-exercise-card.is-done {
  border-color: rgba(6,182,212,.30);
  background: rgba(6,182,212,.055);
}
#page-viptrainer .viptrainer-exercise-card.is-skipped {
  border-color: var(--vc-warning-border);
  background: var(--vc-warning-soft);
}
#page-viptrainer .viptrainer-exercise-thumb {
  width: 82px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  color: var(--vc-ink-inverse);
  background: linear-gradient(135deg, rgba(79,156,255,.42), rgba(124,58,237,.24));
}
#page-viptrainer .viptrainer-exercise-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#page-viptrainer .viptrainer-exercise-thumb i {
  font-size: 1.35rem;
  z-index: 1;
}
#page-viptrainer .viptrainer-exercise-thumb span {
  position: absolute;
  right: 7px;
  bottom: 6px;
  font-size: .62rem;
  font-weight: 900;
  opacity: .82;
}
#page-viptrainer .viptrainer-exercise-check {
  width: 30px;
  height: 30px;
  align-self: center;
  display: grid;
  place-items: center;
  border: 1px solid var(--vc-border-strong);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(10,15,25,.34);
  font-size: .74rem;
}
#page-viptrainer .viptrainer-exercise-card.is-done .viptrainer-exercise-check {
  color: #dff6ff;
  border-color: rgba(6,182,212,.34);
  background: rgba(6,182,212,.18);
}
#page-viptrainer .viptrainer-exercise-card.is-skipped .viptrainer-exercise-check {
  color: #d8b4fe;
  border-color: rgba(168,85,247,.28);
  background: rgba(124,58,237,.14);
}
#page-viptrainer .viptrainer-exercise-thumb.is-chest { background: linear-gradient(135deg, #4f9cff, #7c3aed); }
#page-viptrainer .viptrainer-exercise-thumb.is-back { background: linear-gradient(135deg, #2563eb, #14b8a6); }
#page-viptrainer .viptrainer-exercise-thumb.is-legs { background: linear-gradient(135deg, #0f766e, #4f46e5); }
#page-viptrainer .viptrainer-exercise-thumb.is-shoulders { background: linear-gradient(135deg, #7c3aed, #06b6d4); }
#page-viptrainer .viptrainer-exercise-thumb.is-arms { background: linear-gradient(135deg, #06b6d4, #8b5cf6); }
#page-viptrainer .viptrainer-exercise-thumb.is-core { background: linear-gradient(135deg, #0f766e, #2563eb); }
#page-viptrainer .viptrainer-exercise-thumb.is-cardio { background: linear-gradient(135deg, #4f46e5, #06b6d4); }
#page-viptrainer .viptrainer-exercise-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#page-viptrainer .viptrainer-exercise-title {
  margin: 0;
  font-size: .98rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-exercise-meta,
#page-viptrainer .viptrainer-exercise-note,
#page-viptrainer .viptrainer-exercise-compact-meta {
  margin: 3px 0 0;
  color: var(--vc-ink-3);
  font-size: .78rem;
  line-height: 1.35;
}
#page-viptrainer .viptrainer-exercise-compact-meta {
  color: #dbeafe;
  font-weight: 800;
}
#page-viptrainer .viptrainer-exercise-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
#page-viptrainer .viptrainer-exercise-stats span {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(148,163,184,.10);
}
#page-viptrainer .viptrainer-exercise-stats small {
  display: block;
  color: var(--vc-ink-3);
  font-size: .64rem;
  line-height: 1.1;
}
#page-viptrainer .viptrainer-exercise-stats strong {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-exercise-actions,
#page-viptrainer .viptrainer-manage-actions,
#page-viptrainer .viptrainer-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#page-viptrainer .viptrainer-exercise-actions .btn,
#page-viptrainer .viptrainer-manage-actions .btn,
#page-viptrainer .viptrainer-quick-actions .btn {
  min-height: 38px;
}
#page-viptrainer .viptrainer-details-btn {
  justify-content: space-between;
}
#page-viptrainer .viptrainer-bottom-nav {
  display: none;
}
#page-viptrainer .viptrainer-icon-btn {
  width: 40px;
  padding-inline: 0;
}
#page-viptrainer .viptrainer-manage-actions {
  margin: -4px 0 10px 104px;
}
#page-viptrainer .viptrainer-quick-card {
  padding: 14px;
}
#page-viptrainer .viptrainer-quick-card p {
  margin: 6px 0 0;
  color: var(--vc-ink-3);
  font-size: .82rem;
}
#page-viptrainer .viptrainer-sensations-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#page-viptrainer .viptrainer-wide-btn {
  width: 100%;
  min-height: 42px;
}
#page-viptrainer .viptrainer-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#page-viptrainer .viptrainer-quick-actions.is-hidden,
#page-viptrainer .viptrainer-quick-actions[hidden] {
  display: none;
}
#page-viptrainer .viptrainer-quick-actions .btn:last-child {
  grid-column: 1 / -1;
}
#page-viptrainer .viptrainer-workout-footer {
  padding: 12px 14px;
}
#page-viptrainer .viptrainer-workout-footer .btn {
  min-height: 38px;
}
#page-viptrainer .viptrainer-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 18px;
  text-align: center;
}
#page-viptrainer .viptrainer-empty-state i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #bbf7d0;
  background: rgba(55,199,132,.14);
}
#page-viptrainer .viptrainer-empty-state p {
  max-width: 420px;
  margin: 0;
  color: var(--vc-ink-3);
}
#page-viptrainer .viptrainer-guided-empty {
  align-content: center;
  min-height: 126px;
  background:
    radial-gradient(circle at top left, rgba(55,199,132,.12), transparent 42%),
    var(--vc-layer-faint);
}
#page-viptrainer .viptrainer-active-session .viptrainer-guided-empty,
#page-viptrainer .viptrainer-quick-card .viptrainer-guided-empty {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 4px;
}
#page-viptrainer .viptrainer-empty-mark {
  width: 44px;
  height: 44px;
}
#page-viptrainer .viptrainer-empty-actions {
  justify-content: center;
  margin-top: 4px;
}
#page-viptrainer .viptrainer-empty-actions .btn {
  min-height: 38px;
}
#page-viptrainer .viptrainer-guided-empty.is-rest .viptrainer-empty-mark {
  background:
    linear-gradient(135deg, rgba(148,163,184,.28), rgba(79,156,255,.16)),
    var(--vc-layer-subtle);
}
#page-viptrainer .viptrainer-guided-empty.is-exercise .viptrainer-empty-mark {
  background:
    linear-gradient(135deg, rgba(79,156,255,.30), rgba(55,199,132,.18)),
    var(--vc-layer-subtle);
}
#page-viptrainer .viptrainer-guided-empty.is-skipped .viptrainer-empty-mark {
  background:
    linear-gradient(135deg, var(--vc-warning-border), rgba(240,105,105,.16)),
    var(--vc-layer-subtle);
}
#page-viptrainer .viptrainer-coach-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: var(--vc-ink-3);
}
#page-viptrainer .viptrainer-coach-empty .viptrainer-empty-mark {
  width: 32px;
  height: 32px;
}
#page-viptrainer .viptrainer-exercise-detail {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
#page-viptrainer .viptrainer-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 10px;
}
#page-viptrainer .viptrainer-section-title span {
  color: var(--vc-ink-inverse);
  font-size: 1rem;
  font-weight: 900;
}
#page-viptrainer .viptrainer-section-title small {
  color: var(--vc-ink-3);
  font-size: .72rem;
  font-weight: 800;
  text-align: right;
}
#page-viptrainer .viptrainer-exercise-evolution {
  min-width: 0;
  margin-top: 4px;
}
#page-viptrainer .viptrainer-evolution-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
#page-viptrainer .viptrainer-evolution-cards span {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79,156,255,.10), rgba(6,182,212,.05)),
    rgba(10,15,25,.28);
  box-shadow: inset 0 1px 0 var(--vc-layer-alpha-045);
}
#page-viptrainer .viptrainer-evolution-cards small {
  display: block;
  color: var(--vc-ink-3);
  font-size: .66rem;
  font-weight: 850;
  text-transform: uppercase;
}
#page-viptrainer .viptrainer-evolution-cards strong {
  display: block;
  margin-top: 4px;
  color: var(--vc-ink-inverse);
  font-size: .94rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-evolution-cards .is-up strong {
  color: #a7f3d0;
}
#page-viptrainer .viptrainer-evolution-cards .is-down strong {
  color: #c4b5fd;
}
#page-viptrainer .viptrainer-evolution-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#page-viptrainer .vt-exercise-chart {
  padding: 11px;
}
#page-viptrainer .vt-exercise-chart .vt-premium-chart-head {
  align-items: flex-start;
}
#page-viptrainer .vt-exercise-chart .vt-premium-chart-head strong {
  font-size: 1.05rem;
}

/* ── Calendário mensal (Fase 3) — status por classe, sem cor inline ───────── */
#page-viptrainer .vt-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .78rem;
  color: var(--vc-ink-3);
}
#page-viptrainer .vt-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#page-viptrainer .vt-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(148,163,184,.35);
}
#page-viptrainer .vt-cal-dot.done { background: #37c784; }
#page-viptrainer .vt-cal-dot.skipped { background: #f06969; }
#page-viptrainer .vt-cal-dot.rescheduled { background: #f5c43c; }
#page-viptrainer .vt-cal-dot.planned { background: #94a3b8; }
#page-viptrainer .vt-cal-dot.none { background: rgba(148,163,184,.25); }

#page-viptrainer .vt-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
#page-viptrainer .vt-calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  border: 1px solid var(--vc-border);
  background: var(--vc-layer-alpha-020);
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#page-viptrainer .vt-calendar-day:hover {
  border-color: rgba(79,156,255,.4);
}
#page-viptrainer .vt-calendar-day.is-today {
  border-color: rgba(79,156,255,.6);
  font-weight: 800;
}
#page-viptrainer .vt-calendar-day .vt-cal-dot {
  width: 8px;
  height: 8px;
}
#page-viptrainer .vt-calendar-weekday-label {
  text-align: center;
  font-size: .68rem;
  color: var(--vc-ink-3);
  text-transform: uppercase;
}

/* ── Gráficos premium VipTreiner (SVG/CSS vanilla, sem biblioteca externa) ── */
#page-viptrainer .vt-premium-chart {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 10%, rgba(79,156,255,.16), transparent 28%),
    linear-gradient(135deg, rgba(15,23,42,.50), rgba(30,41,59,.24)),
    var(--vc-layer-faint);
  box-shadow: inset 0 1px 0 var(--vc-layer-alpha-045), 0 18px 38px var(--vc-shade-strong);
  overflow: hidden;
}
#page-viptrainer .vt-premium-chart-head,
#page-viptrainer .vt-chart-layout,
#page-viptrainer .vt-chart-legend,
#page-viptrainer .vt-chart-microstats {
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-viptrainer .vt-premium-chart-head {
  justify-content: space-between;
}
#page-viptrainer .vt-premium-chart-head span,
#page-viptrainer .vt-chart-microstats small,
#page-viptrainer .vt-chart-ring small {
  display: block;
  color: var(--vc-ink-3);
  font-size: .68rem;
  font-weight: 800;
}
#page-viptrainer .vt-premium-chart-head strong {
  display: block;
  color: var(--vc-ink-inverse);
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1.1;
}
#page-viptrainer .vt-chart-trend {
  display: inline-flex !important;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--vc-border);
  border-radius: 999px;
  color: #dbeafe !important;
  background: rgba(79,156,255,.12);
  white-space: nowrap;
}
#page-viptrainer .vt-chart-trend.is-up {
  color: #a7f3d0 !important;
  background: rgba(20,184,166,.13);
}
#page-viptrainer .vt-chart-trend.is-down {
  color: #c4b5fd !important;
  background: rgba(124,58,237,.13);
}
#page-viptrainer .vt-chart-stage {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
#page-viptrainer .vt-chart-layout {
  align-items: stretch;
}
#page-viptrainer .vt-chart-layout .vt-chart-stage {
  flex: 1 1 auto;
}
#page-viptrainer .vt-chart-ring {
  width: 74px;
  height: 74px;
  align-self: center;
}
#page-viptrainer .vt-chart-ring span,
#page-viptrainer .vt-chart-ring small {
  text-align: center;
}
#page-viptrainer .vt-mini-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
#page-viptrainer .vt-mini-chart .vt-chart-grid-line {
  stroke: rgba(148,163,184,.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
#page-viptrainer .vt-mini-chart .vt-chart-area {
  fill: #4f9cff;
  opacity: .10;
}
#page-viptrainer .vt-mini-chart .vt-chart-line {
  fill: none;
  stroke: var(--vt-chart-stroke, #4f9cff);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgba(79,156,255,.26));
  animation: vtChartDraw .9s cubic-bezier(.2,.8,.2,1) .08s forwards;
}
#page-viptrainer .vt-mini-chart .vt-chart-point {
  fill: #dbeafe;
  stroke: #4f9cff;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(6,182,212,.42));
}
#page-viptrainer .vt-mini-chart .vt-chart-point-hit {
  fill: transparent;
}
#page-viptrainer .vt-mini-chart .vt-chart-point-group {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: vtPointIn .38s ease calc(.22s + (var(--point-i) * 45ms)) forwards;
}
#page-viptrainer .vt-mini-chart .vt-chart-point-group:hover,
#page-viptrainer .vt-mini-chart .vt-chart-point-group:focus {
  transform: scale(1.22);
}
#page-viptrainer .vt-mini-chart .vt-chart-bar {
  fill: rgba(79,156,255,.72);
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  filter: drop-shadow(0 0 8px rgba(79,156,255,.18));
  animation: vtBarGrow .52s cubic-bezier(.2,.8,.2,1) calc(var(--bar-i) * 55ms) forwards;
}
#page-viptrainer .vt-mini-chart .vt-chart-bar.skipped {
  fill: rgba(139,92,246,.58);
  animation-delay: calc(.12s + (var(--bar-i) * 55ms));
}
#page-viptrainer .vt-mini-chart .vt-chart-bar-group:hover .vt-chart-bar {
  filter: drop-shadow(0 0 10px rgba(6,182,212,.36));
}
#page-viptrainer .vt-mini-chart .vt-chart-axis-label {
  fill: var(--vc-ink-3);
  font-size: 8px;
}
#page-viptrainer .vt-chart-legend,
#page-viptrainer .vt-chart-microstats {
  justify-content: space-between;
  flex-wrap: wrap;
}
#page-viptrainer .vt-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vc-ink-3);
  font-size: .72rem;
  font-weight: 800;
}
#page-viptrainer .vt-chart-legend i {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
}
#page-viptrainer .vt-chart-legend i.is-done {
  background: #4f9cff;
}
#page-viptrainer .vt-chart-legend i.is-skipped {
  background: #8b5cf6;
}
#page-viptrainer .vt-chart-microstats span {
  min-width: 72px;
  padding: 7px 9px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: rgba(10,15,25,.28);
}
#page-viptrainer .vt-chart-microstats strong {
  display: block;
  color: var(--vc-ink-inverse);
  font-size: .86rem;
}
#page-viptrainer .vt-chart-empty {
  color: var(--vc-ink-3);
  font-size: .82rem;
  text-align: center;
  padding: 20px 0;
}
#page-viptrainer .vt-chart-empty-state {
  min-height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px dashed var(--vc-border-strong);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(79,156,255,.14), transparent 34%),
    rgba(10,15,25,.22);
}

/* Fase 4K - acessibilidade e preferências do sistema operacional. */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

@media (prefers-contrast: more) {
  :root {
    --vc-border: var(--vc-layer-alpha-220);
    --vc-border-strong: rgba(255, 255, 255, .38);
    --vc-card-border: var(--vc-border-strong);
    --vc-input-border: var(--vc-border-strong);
    --vc-table-border: var(--vc-border-strong);
    --vc-sidebar-border: var(--vc-border-strong);
    --vc-focus-ring-width: 3px;
  }
  [data-theme="light"] {
    --vc-border: rgba(15, 23, 42, .24);
    --vc-border-strong: rgba(15, 23, 42, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --vc-loader-duration: 1ms; --vc-skeleton-duration: 1ms; }
  :where(.page, .card, .vc-card, .vc-btn, .toast, .modal, .modal-dialog, .drawer) {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  :where(.vc-card, .card, .vc-modal, .modal, .modal-dialog, .vc-alert, .alert, .toast) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }
  :where(.vc-btn, button, a):focus-visible { outline: 3px solid Highlight !important; }
  :where(.vc-badge, .badge, .chip) { border: 1px solid CanvasText; }
}
#page-viptrainer .vt-chart-empty-state strong {
  color: #dbeafe;
  font-size: .94rem;
}
#page-viptrainer .vt-chart-empty-state small {
  max-width: 240px;
  color: var(--vc-ink-3);
  line-height: 1.4;
}
#page-viptrainer .vt-chart-empty-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(79,156,255,.14);
}

@keyframes vtChartDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes vtPointIn {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vtBarGrow {
  to { transform: scaleY(1); }
}
@keyframes vtRingPop {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vtProgressFlow {
  from { transform: translateX(-8px); opacity: .72; }
  to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #page-viptrainer .viptrainer-progress-track span,
  #page-viptrainer .viptrainer-progress-ring,
  #page-viptrainer .vt-chart-ring,
  #page-viptrainer .vt-mini-chart .vt-chart-line,
  #page-viptrainer .vt-mini-chart .vt-chart-point-group,
  #page-viptrainer .vt-mini-chart .vt-chart-bar {
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* VipTreiner Premium: treino em foco e energia leve, sem canvas/WebGL. */

/* VipTreiner Premium Fase 5: rotina semanal e check-in interno */
#page-viptrainer .vt-routine-hub { display: grid; gap: 10px; margin: 12px 0 16px; }
#page-viptrainer .vt-premium-week,
#page-viptrainer .vt-perfect-week-card,
#page-viptrainer .vt-daily-checkin-card,
#page-viptrainer .vt-local-coach,
#page-viptrainer .vt-internal-reminders article {
  border: 1px solid rgba(108, 139, 190, .2); border-radius: 8px; background: rgba(15, 25, 53, .82);
}
#page-viptrainer .vt-premium-week { padding: 14px; overflow: hidden; }
#page-viptrainer .vt-routine-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; color: #f7fbff; }
#page-viptrainer .vt-routine-heading span:first-child { display: grid; gap: 2px; }
#page-viptrainer .vt-routine-heading small { color: #8f9bb2; font-size: .7rem; }
#page-viptrainer .vt-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#page-viptrainer .vt-week-day { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 8px 2px; border: 0; border-radius: 7px; background: var(--vc-layer-faint); color: #8894aa; cursor: pointer; }
#page-viptrainer .vt-week-day span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vc-layer-medium); }
#page-viptrainer .vt-week-day small, #page-viptrainer .vt-week-day em { font-size: .65rem; font-style: normal; }
#page-viptrainer .vt-week-day.is-today { outline: 1px solid #42d7e8; color: #f7fbff; }
#page-viptrainer .vt-week-day.is-completed span { color: #06261a; background: #41d08f; }
#page-viptrainer .vt-week-day.is-planned span { color: #07151d; background: #42d7e8; }
#page-viptrainer .vt-week-day.is-missed span { color: var(--vc-ink-inverse); background: #ff776d; }
#page-viptrainer .vt-week-day.is-rescheduled span { color: var(--vc-ink-inverse); background: #8f6ee8; }
#page-viptrainer .vt-routine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#page-viptrainer .vt-perfect-week-card, #page-viptrainer .vt-daily-checkin-card { display: grid; gap: 10px; padding: 14px; }
#page-viptrainer .vt-perfect-week-card > div:first-child, #page-viptrainer .vt-daily-checkin-card > div { display: flex; align-items: center; gap: 10px; }
#page-viptrainer .vt-perfect-week-card i { color: #ffb34d; }
#page-viptrainer .vt-daily-checkin-card i { color: #ff776d; }
#page-viptrainer .vt-perfect-week-card span, #page-viptrainer .vt-daily-checkin-card span { display: grid; gap: 2px; }
#page-viptrainer .vt-perfect-week-card small, #page-viptrainer .vt-daily-checkin-card small { color: #8f9bb2; font-size: .7rem; }
#page-viptrainer .vt-perfect-track { height: 6px; overflow: hidden; border-radius: 6px; background: var(--vc-layer-alpha-070); }
#page-viptrainer .vt-perfect-track span { display: block; height: 100%; background: linear-gradient(90deg, #ff776d, #ffb34d); transition: width .35s ease; }
#page-viptrainer .vt-local-coach { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #dce9f8; }
#page-viptrainer .vt-local-coach i { color: #42d7e8; }
#page-viptrainer .vt-local-coach p { margin: 0; font-size: .82rem; }
#page-viptrainer .vt-internal-reminders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#page-viptrainer .vt-internal-reminders article { display: flex; min-width: 0; gap: 9px; padding: 11px; }
#page-viptrainer .vt-internal-reminders article > i { color: #42d7e8; margin-top: 2px; }
#page-viptrainer .vt-internal-reminders article.is-high > i { color: #ff776d; }
#page-viptrainer .vt-internal-reminders span { display: grid; gap: 2px; min-width: 0; }
#page-viptrainer .vt-internal-reminders small { color: #8f9bb2; font-size: .71rem; line-height: 1.35; }
.vt-quick-checkin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vt-quick-checkin-form > label { display: grid; gap: 7px; font-size: .8rem; }
.vt-checkin-chips { display: grid; grid-template-columns: repeat(5, 38px); gap: 5px; }
.vt-checkin-chips input { position: absolute; opacity: 0; pointer-events: none; }
.vt-checkin-chips span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(112,139,183,.28); border-radius: 7px; cursor: pointer; }
.vt-checkin-chips input:checked + span { color: #07151d; border-color: #42d7e8; background: #42d7e8; }
.vt-quick-checkin-form .vt-full, .vt-checkin-actions { grid-column: 1 / -1; }
.vt-checkin-actions { display: flex; justify-content: flex-end; gap: 8px; }
.vt-week-day-detail { display: grid; justify-items: center; gap: 7px; padding: 16px; text-align: center; }
.vt-week-day-detail > i { font-size: 1.8rem; color: #42d7e8; }
@media (prefers-reduced-motion: reduce) { #page-viptrainer .vt-perfect-track span { transition: none; } }
#page-viptrainer {
  --vt-premium-navy: #080b18;
  --vt-premium-panel: #101528;
  --vt-premium-coral: #fb7185;
  --vt-premium-orange: #fb923c;
  --vt-premium-cyan: #22d3ee;
}
#page-viptrainer .viptrainer-today-hero,
#page-viptrainer .viptrainer-active-session,
#page-viptrainer .viptrainer-exercise-card,
#page-viptrainer .vt-premium-chart {
  border-color: rgba(129, 140, 248, .2);
  background-color: var(--vt-premium-panel);
  box-shadow: 0 18px 42px rgba(2, 6, 23, .24), inset 0 1px 0 var(--vc-layer-alpha-045);
}
#page-viptrainer .viptrainer-today-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(251, 113, 133, .16), transparent 28%),
    linear-gradient(135deg, rgba(30, 41, 91, .9), rgba(17, 24, 52, .94) 58%, rgba(64, 28, 88, .78));
}
#page-viptrainer .viptrainer-kicker {
  color: #fda4af;
}
#page-viptrainer .viptrainer-active-session {
  background:
    linear-gradient(145deg, rgba(30, 41, 75, .88), rgba(12, 17, 36, .96)),
    var(--vt-premium-panel);
}
#page-viptrainer .viptrainer-active-current {
  border-color: rgba(34, 211, 238, .2);
  background: linear-gradient(135deg, rgba(34, 211, 238, .09), rgba(99, 102, 241, .08));
}
#page-viptrainer .viptrainer-set-row {
  min-height: 58px;
  border-color: rgba(148, 163, 184, .17);
  background: rgba(7, 11, 27, .5);
}
#page-viptrainer .viptrainer-set-row input {
  height: 38px;
  font-size: .88rem;
  font-weight: 800;
  text-align: center;
}
#page-viptrainer .viptrainer-set-row.is-done {
  border-color: rgba(52, 211, 153, .35);
  background: linear-gradient(90deg, var(--vc-success-surface), rgba(6, 78, 59, .08));
}
#page-viptrainer .viptrainer-rest-timer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 176px;
  align-content: space-between;
  border-color: rgba(34, 211, 238, .22);
  background:
    radial-gradient(circle at 50% 25%, rgba(34, 211, 238, .12), transparent 48%),
    rgba(7, 11, 27, .78);
}
#page-viptrainer .viptrainer-timer-display {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
#page-viptrainer .viptrainer-rest-timer strong {
  margin: 7px 0 3px;
  color: #e0f2fe;
  font-size: 2.8rem;
  line-height: .9;
  text-shadow: 0 0 28px rgba(34, 211, 238, .28);
}
#page-viptrainer .viptrainer-rest-timer small {
  color: #94a3b8;
  font-size: .7rem;
  font-weight: 750;
}
#page-viptrainer .viptrainer-rest-timer.is-running {
  border-color: rgba(34, 211, 238, .38);
  background:
    radial-gradient(circle at 50% 28%, rgba(34, 211, 238, .2), transparent 46%),
    linear-gradient(180deg, rgba(30, 58, 138, .18), rgba(7, 11, 27, .92));
}
#page-viptrainer .viptrainer-rest-timer.is-running strong {
  font-size: 3.6rem;
}
#page-viptrainer .viptrainer-rest-timer.is-urgent,
#page-viptrainer .viptrainer-rest-timer.is-boost {
  border-color: rgba(251, 146, 60, .58);
  background:
    radial-gradient(circle at 50% 38%, rgba(251, 113, 133, .24), transparent 42%),
    linear-gradient(180deg, rgba(124, 45, 18, .24), rgba(40, 14, 30, .9));
  box-shadow: 0 18px 44px rgba(190, 24, 93, .18), inset 0 1px 0 var(--vc-layer-strong);
}
#page-viptrainer .viptrainer-rest-timer.is-urgent strong,
#page-viptrainer .viptrainer-rest-timer.is-boost strong {
  color: #fff7ed;
  text-shadow: 0 0 18px rgba(251, 146, 60, .58), 0 0 42px rgba(244, 63, 94, .32);
}
#page-viptrainer .viptrainer-timer-energy {
  position: absolute;
  z-index: 0;
  inset: auto 8% -42px;
  height: 108px;
  opacity: 0;
  pointer-events: none;
}
#page-viptrainer .viptrainer-timer-energy i {
  position: absolute;
  bottom: 0;
  width: 42%;
  height: 78%;
  border-radius: 52% 48% 38% 62%;
  background: linear-gradient(0deg, rgba(244, 63, 94, .7), rgba(251, 146, 60, .72) 56%, rgba(253, 224, 71, .1));
  filter: drop-shadow(0 -8px 18px rgba(251, 113, 133, .26));
  transform-origin: 50% 100%;
}
#page-viptrainer .viptrainer-timer-energy i:nth-child(1) { left: 3%; transform: rotate(-8deg) scale(.8); }
#page-viptrainer .viptrainer-timer-energy i:nth-child(2) { left: 30%; height: 100%; }
#page-viptrainer .viptrainer-timer-energy i:nth-child(3) { right: 2%; transform: rotate(9deg) scale(.72); }
#page-viptrainer .viptrainer-rest-timer.is-urgent .viptrainer-timer-energy,
#page-viptrainer .viptrainer-rest-timer.is-boost .viptrainer-timer-energy {
  opacity: .72;
}
#page-viptrainer .viptrainer-rest-timer.is-urgent .viptrainer-timer-energy i,
#page-viptrainer .viptrainer-rest-timer.is-boost .viptrainer-timer-energy i {
  animation: vtTimerFlame 1.1s ease-in-out infinite alternate;
}
#page-viptrainer .viptrainer-timer-energy i:nth-child(2) { animation-delay: -.35s !important; }
#page-viptrainer .viptrainer-timer-energy i:nth-child(3) { animation-delay: -.7s !important; }
#page-viptrainer .viptrainer-boost-btn {
  grid-column: 1 / -1;
  color: #fff7ed;
  border: 1px solid rgba(251, 146, 60, .5);
  background: linear-gradient(90deg, rgba(244, 63, 94, .82), rgba(249, 115, 22, .82));
}
#page-viptrainer .viptrainer-exercise-card {
  background:
    linear-gradient(135deg, rgba(30, 41, 75, .56), rgba(15, 20, 42, .88)),
    var(--vt-premium-panel);
}
#page-viptrainer .viptrainer-exercise-card:not(.is-done):not(.is-skipped) .viptrainer-exercise-check {
  color: #fda4af;
  border-color: rgba(251, 113, 133, .28);
}
#page-viptrainer .vt-premium-chart {
  background:
    radial-gradient(circle at 12% 8%, rgba(34, 211, 238, .14), transparent 30%),
    linear-gradient(145deg, rgba(30, 41, 75, .74), rgba(15, 20, 42, .94));
}
#page-viptrainer .vt-mini-chart .vt-chart-area {
  fill: #22d3ee;
  opacity: .12;
}
@keyframes vtTimerFlame {
  from { transform: translateY(10px) scaleX(.9) rotate(-2deg); opacity: .52; }
  to { transform: translateY(-8px) scaleX(1.08) rotate(2deg); opacity: .88; }
}
@media (prefers-reduced-motion: reduce) {
  #page-viptrainer .viptrainer-timer-energy i {
    animation: none !important;
    transform: none !important;
  }
}

/* ── VipTreiner Fase 4: Modo Treino Foco, Resumo Pós-Treino, PRs visuais ──── */
#page-viptrainer .vt-focus-enter-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(79,156,255,.32);
  border-radius: 999px;
  background: rgba(79,156,255,.14);
  color: #bfdbfe;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}
#page-viptrainer .vt-focus-enter-btn:hover { background: rgba(79,156,255,.22); }

#page-viptrainer .vt-focus-mode {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 0%, rgba(79,156,255,.10), transparent 42%),
    linear-gradient(180deg, #0a0f19, #060911 60%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#page-viptrainer .vt-focus-mode[hidden] { display: none; }

#page-viptrainer .vt-focus-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  flex: 0 0 auto;
}
#page-viptrainer .vt-focus-header-info { flex: 1 1 auto; min-width: 0; }
#page-viptrainer .vt-focus-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--vc-ink-3);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}
#page-viptrainer .vt-focus-progress-track {
  height: 5px;
  border-radius: 999px;
  background: var(--vc-layer-strong);
  overflow: hidden;
}
#page-viptrainer .vt-focus-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f9cff, #37c784);
}
#page-viptrainer .vt-focus-header-info small {
  display: block;
  margin-top: 5px;
  color: #cbd5e1;
  font-size: .72rem;
}
#page-viptrainer .vt-focus-exit,
#page-viptrainer .vt-focus-summary-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--vc-border-strong);
  border-radius: 999px;
  background: var(--vc-layer-alpha-050);
  color: #e2e8f0;
  font-size: 1rem;
  cursor: pointer;
}

#page-viptrainer .vt-focus-body {
  flex: 1 1 auto;
  padding: 0 16px 16px;
}
#page-viptrainer .vt-focus-exercise-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
#page-viptrainer .vt-focus-exercise-heading h3 { margin: 0 0 3px; font-size: 1.3rem; }
#page-viptrainer .vt-focus-exercise-heading p { margin: 0; color: var(--vc-ink-3); font-size: .82rem; }
#page-viptrainer .vt-focus-record-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  color: var(--vc-ink-3);
  font-size: .74rem;
}
#page-viptrainer .vt-focus-set-count {
  margin-bottom: 10px;
  color: #dbeafe;
  font-size: .82rem;
  font-weight: 800;
}
#page-viptrainer .vt-focus-mode .viptrainer-set-list.is-large .viptrainer-set-row {
  padding: 14px;
  gap: 10px 12px;
}
#page-viptrainer .vt-focus-mode .viptrainer-set-list.is-large input {
  height: 48px;
  font-size: 1.15rem;
}
#page-viptrainer .vt-focus-mode .viptrainer-set-list.is-large button { min-height: 44px; }
#page-viptrainer .vt-focus-mode .viptrainer-rest-timer strong { font-size: 4.2rem; }

#page-viptrainer .vt-focus-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 12px;
}
#page-viptrainer .vt-focus-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
#page-viptrainer .vt-focus-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--vc-layer-alpha-180);
  cursor: pointer;
}
#page-viptrainer .vt-focus-dot.is-done { background: #37c784; }
#page-viptrainer .vt-focus-dot.is-skipped { background: var(--vc-warning); }
#page-viptrainer .vt-focus-dot.is-active { outline: 2px solid #4f9cff; outline-offset: 2px; }

#page-viptrainer .vt-focus-footer-actions {
  padding: 0 16px 16px;
}
#page-viptrainer .vt-focus-cta { width: 100%; min-height: 52px; font-size: 1rem; }

/* PRs visuais — badge no card/checklist/foco/resumo */
#page-viptrainer .vt-pr-badge,
.vt-pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
}
#page-viptrainer .vt-pr-badge.is-new,
.vt-pr-badge.is-new {
  color: #ede9fe;
  background: rgba(139,92,246,.22);
  border: 1px solid rgba(139,92,246,.4);
}
#page-viptrainer .vt-pr-badge.is-first,
.vt-pr-badge.is-first {
  color: #cffafe;
  background: rgba(6,182,212,.18);
  border: 1px solid rgba(6,182,212,.36);
}

/* Resumo pós-treino — renderizado dentro do modal genérico do VipTreiner
   (fora de #page-viptrainer), por isso sem o prefixo de escopo. */
.vt-workout-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vt-summary-celebration { text-align: center; padding: 10px 0 4px; }
.vt-summary-celebration i { font-size: 2.2rem; color: #37c784; }
.vt-summary-celebration h3 { margin: 8px 0 2px; }
.vt-summary-celebration p { margin: 0; color: var(--vc-ink-3); font-size: .84rem; }
.vt-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.vt-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  background: rgba(10,15,25,.28);
}
.vt-summary-stat i { color: #4f9cff; }
.vt-summary-stat strong { font-size: 1.15rem; }
.vt-summary-stat small { color: var(--vc-ink-3); font-size: .72rem; }
.vt-summary-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .86rem;
}
.vt-summary-pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vt-summary-pr-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(139,92,246,.08);
}
.vt-summary-pr-list small { margin-left: auto; color: var(--vc-ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .vt-summary-celebration i { animation: vtSummaryPulse 1.6s ease-in-out 1; }
}
@keyframes vtSummaryPulse {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-summary-celebration i { animation: none !important; }
}

/* VipTreiner Premium Fase 2: mídia protegida dos exercícios. */
#page-viptrainer .viptrainer-active-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
#page-viptrainer .viptrainer-active-heading > .viptrainer-exercise-thumb {
  flex: 0 0 68px;
  width: 68px;
}
#page-viptrainer .viptrainer-exercise-card {
  position: relative;
}
#page-viptrainer .viptrainer-exercise-thumb.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 6, 23, .38));
}
#page-viptrainer .viptrainer-exercise-thumb.is-image-error img {
  display: none;
}
#page-viptrainer .viptrainer-media-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  color: var(--vc-ink-inverse);
  background: rgba(225, 29, 72, .9);
  box-shadow: 0 8px 22px rgba(159, 18, 57, .38);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#page-viptrainer .viptrainer-media-play i {
  margin-left: 2px;
  font-size: .78rem;
}
#page-viptrainer .viptrainer-media-lock {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 50%;
  color: #cbd5e1;
  background: rgba(7, 11, 27, .86);
  cursor: pointer;
}
#page-viptrainer .viptrainer-media-lock.is-unlocked {
  color: #fecdd3;
  border-color: rgba(251, 113, 133, .42);
  background: rgba(136, 19, 55, .78);
}
#page-viptrainer .viptrainer-media-editor {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(251, 113, 133, .28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(136, 19, 55, .12), rgba(30, 41, 75, .36));
}
#page-viptrainer .viptrainer-media-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#page-viptrainer .viptrainer-media-editor-head .viptrainer-media-lock {
  position: static;
  flex: 0 0 auto;
}
#page-viptrainer .viptrainer-media-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
#page-viptrainer .viptrainer-media-editor-actions .btn {
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  overflow-wrap: anywhere;
}
#page-viptrainer .viptrainer-media-editor-actions .btn[disabled] {
  opacity: .52;
}
#modal-viptrainer .viptrainer-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, .24);
  border-radius: 8px;
  background: #050711;
}
#modal-viptrainer .viptrainer-video-player iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  #page-viptrainer .viptrainer-media-play,
  #page-viptrainer .viptrainer-media-lock {
    transition: none !important;
  }
}

/* ── Fase 8 — Fechamento/Resumo/Plano (empty state discreto) ────────────── */
#page-viptrainer .vt-coach-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--vc-ink-3);
  font-size: .82rem;
  padding: 10px 0;
}

/* ── Nutrição (Fase 4) — barra de progresso simples, sem biblioteca ───────── */
#page-viptrainer .vt-reports { display: grid; gap: 12px; }
#page-viptrainer .vt-reports-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
#page-viptrainer .vt-reports-header h3 { margin: 2px 0 0; }
#page-viptrainer .vt-report-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
#page-viptrainer .vt-report-controls select, #page-viptrainer .vt-report-controls input { min-height: 40px; border: 1px solid rgba(109,141,192,.3); border-radius: 7px; background: #101b37; color: #eef6ff; padding: 0 10px; }
#page-viptrainer .vt-report-score, #page-viptrainer .vt-report-insights { border: 1px solid rgba(109,141,192,.22); border-radius: 8px; background: rgba(12,22,48,.88); }
#page-viptrainer .vt-report-score { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; padding: 16px; }
#page-viptrainer .vt-report-score-ring { display: grid; place-items: center; align-content: center; width: 120px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#42d7e8 calc(var(--score) * 1%),var(--vc-layer-strong) 0); position: relative; }
#page-viptrainer .vt-report-score-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #101a35; }
#page-viptrainer .vt-report-score-ring strong, #page-viptrainer .vt-report-score-ring small { position: relative; z-index: 1; }
#page-viptrainer .vt-report-score-ring strong { font-size: 1.5rem; }
#page-viptrainer .vt-report-score-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#page-viptrainer .vt-report-score-list > span { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
#page-viptrainer .vt-report-score-list i { grid-column: 1/-1; height: 5px; border-radius: 5px; overflow: hidden; background: var(--vc-layer-strong); }
#page-viptrainer .vt-report-score-list em { display: block; height: 100%; background: #42d7e8; }
#page-viptrainer .vt-report-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#page-viptrainer .vt-report-cards article { display: flex; min-width: 0; gap: 10px; padding: 12px; border: 1px solid rgba(109,141,192,.2); border-radius: 8px; background: var(--vc-layer-faint); }
#page-viptrainer .vt-report-cards article > i { color: #ff776d; margin-top: 3px; }
#page-viptrainer .vt-report-cards span { display: grid; min-width: 0; }
#page-viptrainer .vt-report-cards small, #page-viptrainer .vt-report-cards em { color: #91a0b8; font-style: normal; font-size: .68rem; }
#page-viptrainer .vt-report-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#page-viptrainer .vt-report-chart, #page-viptrainer .vt-report-chart-empty { min-height: 150px; padding: 12px; border: 1px solid rgba(109,141,192,.2); border-radius: 8px; background: var(--vc-layer-alpha-025); }
#page-viptrainer .vt-report-chart header { display: flex; justify-content: space-between; }
#page-viptrainer .vt-report-chart svg { width: 100%; height: 110px; overflow: visible; }
#page-viptrainer .vt-report-chart polyline { fill: none; stroke: #42d7e8; stroke-width: 2; vector-effect: non-scaling-stroke; }
#page-viptrainer .vt-report-bars { display: flex; align-items: end; gap: 3px; height: 110px; padding-top: 10px; }
#page-viptrainer .vt-report-bars i { flex: 1; min-width: 2px; max-width: 16px; border-radius: 3px 3px 0 0; background: linear-gradient(#42d7e8,#8f6ee8); }
#page-viptrainer .vt-report-chart-empty { display: grid; place-items: center; color: #91a0b8; }
#page-viptrainer .vt-report-insights { padding: 14px; }
#page-viptrainer .vt-report-insights h4 { margin: 0 0 10px; }
#page-viptrainer #vt-report-insights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#page-viptrainer #vt-report-insights article { display: flex; gap: 8px; padding: 9px; border-radius: 7px; background: rgba(66,215,232,.06); }
#page-viptrainer #vt-report-insights i { color: #ffb34d; }
#page-viptrainer #vt-report-insights p { margin: 0; font-size: .78rem; }
@media (prefers-reduced-motion: reduce) { #page-viptrainer .vt-reports * { transition: none !important; } }
#page-viptrainer .vt-nutrition-premium { display: grid; gap: 10px; }
#page-viptrainer .vt-nutrition-hero, #page-viptrainer .vt-nutrition-coach,
#page-viptrainer .vt-nutrition-reminders article { border: 1px solid rgba(107,139,190,.22); border-radius: 8px; background: rgba(12,22,48,.88); }
#page-viptrainer .vt-nutrition-hero { padding: 14px; }
#page-viptrainer .vt-nutrition-hero-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
#page-viptrainer .vt-nutrition-hero-head span { display: grid; gap: 2px; }
#page-viptrainer .vt-nutrition-hero-head small, #page-viptrainer .vt-nutrition-metrics small { color: #91a0b8; }
#page-viptrainer .vt-nutrition-hero-head b { color: #42d7e8; font-size: .8rem; }
#page-viptrainer .vt-nutrition-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#page-viptrainer .vt-nutrition-metrics article { display: grid; grid-template-columns: auto 1fr; gap: 8px; min-width: 0; padding: 10px; border-radius: 7px; background: var(--vc-layer-faint); }
#page-viptrainer .vt-nutrition-metrics article > i { color: #ff776d; }
#page-viptrainer .vt-nutrition-metrics article.is-cyan > i { color: #42d7e8; }
#page-viptrainer .vt-nutrition-metrics article.is-violet > i { color: #a58aff; }
#page-viptrainer .vt-nutrition-metrics article.is-green > i { color: #41d08f; }
#page-viptrainer .vt-nutrition-metrics article > .vt-progress-track { grid-column: 1/-1; }
#page-viptrainer .vt-nutrition-coach { display: flex; gap: 10px; padding: 12px 14px; }
#page-viptrainer .vt-nutrition-coach > i { color: #42d7e8; }
#page-viptrainer .vt-nutrition-coach p { margin: 2px 0 0; color: #b7c2d5; font-size: .78rem; }
#page-viptrainer .vt-nutrition-reminders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#page-viptrainer .vt-nutrition-reminders article { display: flex; gap: 9px; padding: 11px; }
#page-viptrainer .vt-nutrition-reminders article > i { color: #42d7e8; }
#page-viptrainer .vt-nutrition-reminders span { display: grid; min-width: 0; }
#page-viptrainer .vt-nutrition-reminders small { color: #91a0b8; }
#page-viptrainer .vt-water-quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
#page-viptrainer .vt-meal-description { margin: 0; color: #bdc8da; font-size: .8rem; }
#page-viptrainer .vt-meal-macros { display: flex; flex-wrap: wrap; gap: 6px; }
#page-viptrainer .vt-meal-macros span { padding: 4px 7px; border-radius: 6px; background: rgba(66,215,232,.08); color: #bfeff5; font-size: .7rem; }
@media (prefers-reduced-motion: reduce) { #page-viptrainer .vt-nutrition-premium * { transition: none !important; } }
#page-viptrainer .vt-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  overflow: hidden;
  margin-top: 4px;
}
#page-viptrainer .vt-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f9cff, #37c784);
}
#page-viptrainer .vt-nutrition-disclaimer {
  background: rgba(245,196,60,.08);
  border: 1px solid rgba(245,196,60,.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0;
}

/* ── Nutrição (Fase 5) — sub-abas internas, semana e templates ────────────── */
#page-viptrainer .vt-subtabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 4px;
  border: 1px solid var(--vc-border);
  border-radius: 13px;
  background: var(--vc-layer-alpha-020);
  overflow-x: auto;
  scrollbar-width: thin;
}
#page-viptrainer .vt-subtab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--vc-ink-3);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
#page-viptrainer .vt-subtab.active {
  color: var(--vc-ink-inverse);
  border-color: rgba(55,199,132,.34);
  background: rgba(55,199,132,.14);
}
#page-viptrainer .vt-subpanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#page-viptrainer .vt-subpanel[hidden] {
  display: none;
}
#page-viptrainer .vt-week-range-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2, #d5dbe6);
  min-width: 150px;
  text-align: center;
}
#page-viptrainer .vt-week-summary-total {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-2, #d5dbe6);
}
#page-viptrainer .vt-week-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
#page-viptrainer .vt-week-day-card {
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--vc-layer-alpha-020);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-viptrainer .vt-week-day-card.is-today {
  border-color: rgba(79,156,255,.4);
  background: rgba(79,156,255,.06);
}
#page-viptrainer .vt-week-day-meal {
  font-size: .76rem;
  padding: 4px 0;
  border-top: 1px dashed var(--vc-border);
}
#page-viptrainer .vt-week-day-meal:first-of-type {
  border-top: none;
}
#page-viptrainer .vt-template-card {
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--vc-layer-alpha-020);
  margin-bottom: 10px;
}
#page-viptrainer .vt-template-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0;
}

/* ── Corpo (Fase 6) — evolução corporal, bioimpedância, fotos ─────────────── */
.mc-purple { color: var(--purple); border-color: rgba(124,58,237,.15); }
.mi-purple { background: var(--purple-soft); }

#page-viptrainer .vt-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
#page-viptrainer .vt-body-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
#page-viptrainer .vt-body-chart-card {
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--vc-layer-alpha-020);
}
#page-viptrainer .vt-body-chart-card h4 {
  margin: 0 0 8px;
  font-size: .82rem;
  color: var(--text-2, #d5dbe6);
}
#page-viptrainer .vt-body-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
#page-viptrainer .vt-body-chart-empty {
  font-size: .78rem;
  color: var(--vc-ink-3);
  text-align: center;
  padding: 24px 0;
}
#page-viptrainer .vt-table-scroll {
  overflow-x: auto;
}
#page-viptrainer .vt-body-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  min-width: 640px;
}
#page-viptrainer .vt-body-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--vc-ink-3);
  font-weight: 700;
  border-bottom: 1px solid var(--vc-border);
  white-space: nowrap;
}
#page-viptrainer .vt-body-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--vc-border);
  white-space: nowrap;
}

/* VipTreiner Premium Fase 3: corpo, estatisticas e conquistas */
#page-viptrainer .vt-body-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  margin-bottom: 14px;
  border: 1px solid rgba(66, 215, 232, .22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(18, 28, 61, .96), rgba(64, 34, 91, .88));
  color: #f8fbff;
}
#page-viptrainer .vt-body-hero h3 { margin: 3px 0 5px; font-size: 1.45rem; letter-spacing: 0; }
#page-viptrainer .vt-body-hero p { margin: 0; color: rgba(238, 246, 255, .72); }
#page-viptrainer .vt-body-chart-filters { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#page-viptrainer .vt-body-chart-filters::-webkit-scrollbar { display: none; }
#page-viptrainer .vt-body-chart-filters button {
  border: 1px solid rgba(120, 139, 181, .22); border-radius: 6px; padding: 6px 9px;
  color: var(--text-3); background: transparent; white-space: nowrap; cursor: pointer;
}
#page-viptrainer .vt-body-chart-filters button.active { color: #07151d; background: #42d7e8; border-color: #42d7e8; }
#page-viptrainer .vt-body-chart-card.is-featured { width: 100%; min-width: 0; }
#page-viptrainer .vt-body-chart-svg .vt-chart-area { fill: url(#vt-body-chart-fill); }
#page-viptrainer .vt-body-chart-svg .vt-chart-line { stroke: #42d7e8; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#page-viptrainer .vt-body-chart-svg .vt-chart-point { fill: #ff776d; stroke: #172343; stroke-width: 1.5; }
#page-viptrainer .vt-body-stats, #page-viptrainer .vt-achievements { margin-top: 18px; }
#page-viptrainer .vt-body-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#page-viptrainer .vt-body-stats-grid article {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 0 9px;
  min-width: 0; padding: 13px; border: 1px solid rgba(117, 135, 175, .18); border-radius: 8px;
  background: rgba(18, 27, 54, .72);
}
#page-viptrainer .vt-body-stats-grid i { grid-row: 1 / 3; align-self: center; color: #ff776d; font-size: 1.05rem; }
#page-viptrainer .vt-body-stats-grid strong { color: #f8fbff; font-size: 1.05rem; overflow-wrap: anywhere; }
#page-viptrainer .vt-body-stats-grid span { color: rgba(226, 235, 249, .62); font-size: .73rem; }
#page-viptrainer .vt-achievements-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#page-viptrainer .vt-achievement {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 13px;
  border: 1px solid rgba(117, 135, 175, .18); border-radius: 8px; background: rgba(18, 27, 54, .68);
}
#page-viptrainer .vt-achievement-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(66, 215, 232, .12); color: #42d7e8; }
#page-viptrainer .vt-achievement.is-unlocked { border-color: rgba(65, 208, 143, .42); }
#page-viptrainer .vt-achievement.is-unlocked .vt-achievement-icon { background: rgba(65, 208, 143, .16); color: #41d08f; }
#page-viptrainer .vt-achievement.is-locked { opacity: .58; }
#page-viptrainer .vt-achievement strong { color: #f8fbff; font-size: .88rem; }
#page-viptrainer .vt-achievement p { margin: 3px 0 8px; color: rgba(226, 235, 249, .62); font-size: .74rem; }
#page-viptrainer .vt-achievement-progress { height: 4px; overflow: hidden; border-radius: 4px; background: var(--vc-layer-strong); }
#page-viptrainer .vt-achievement-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff776d, #42d7e8); transition: width .35s ease; }
#page-viptrainer .vt-achievement small { display: block; margin-top: 4px; color: rgba(226, 235, 249, .52); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  #page-viptrainer .vt-achievement-progress span { transition: none; }
}
#page-viptrainer .vt-bioimpedance-card {
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--vc-layer-alpha-020);
  margin-bottom: 10px;
}
#page-viptrainer .vt-bioimpedance-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  font-size: .78rem;
  margin: 8px 0;
}
#page-viptrainer .vt-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
#page-viptrainer .vt-photo-card {
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--vc-layer-alpha-020);
}
#page-viptrainer .vt-photo-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  background: rgba(0,0,0,.2);
}
#page-viptrainer .vt-photo-card-body {
  padding: 8px 10px;
  font-size: .76rem;
}

/* ── Hábitos e recuperação (Fase 7) ────────────────────────────────────────── */
#page-viptrainer .vt-checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-viptrainer .vt-checkbox-field input[type="checkbox"] {
  width: auto;
}
#page-viptrainer .vt-checklist-card,
#page-viptrainer .vt-supplement-card,
#page-viptrainer .vt-recovery-card {
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--vc-layer-alpha-020);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#page-viptrainer .vt-checklist-card.is-done,
#page-viptrainer .vt-supplement-card.is-done {
  border-color: rgba(55,199,132,.34);
  background: rgba(55,199,132,.06);
}

@media (max-width: 768px) {
  #page-viptrainer .viptrainer-app-shell {
    grid-template-columns: 1fr;
  }
  #page-viptrainer .viptrainer-today-hero {
    grid-template-columns: 1fr;
  }
  #page-viptrainer .viptrainer-hero-action {
    justify-content: stretch;
  }
  #page-viptrainer .viptrainer-hero-btn,
  #page-viptrainer .viptrainer-workout-footer .btn {
    width: 100%;
  }
  #page-viptrainer .viptrainer-exercise-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }
  #page-viptrainer .viptrainer-exercise-thumb {
    width: 78px;
  }
  #page-viptrainer .viptrainer-exercise-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #page-viptrainer .viptrainer-workout-footer {
    align-items: stretch;
    flex-direction: column;
  }
  #page-viptrainer .viptrainer-manage-actions {
    margin-left: 90px;
  }
  #page-viptrainer .vt-exercise-row {
    grid-template-columns: 1fr;
  }
  #page-viptrainer .vt-exercise-actions {
    justify-content: flex-start;
  }
  #page-viptrainer .vt-calendar-grid {
    gap: 4px;
  }
  #page-viptrainer .vt-calendar-day {
    font-size: .68rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — VipControl Design System Tokens
   ──────────────────────────────────────────────────────────────────────────
   Camada canônica de harmonização visual. Regras desta seção:
   1. Tokens --vc-* são a fonte de verdade; tokens legados (--t-*, --r,
      --liquid-*) permanecem válidos e passam a APONTAR para os --vc-*
      quando seguro (alias), nunca são removidos.
   2. Nenhum !important novo, exceto onde uma regra legada com !important
      precisa ser vencida — cada caso está comentado e justificado.
   3. Nenhum novo contexto gráfico de GPU, nenhum desfoque de tela inteira
      no mobile, nenhuma animação infinita — disciplina do fix PWA 5519fff.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Espaço */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 20px;
  --vc-space-6: 24px;
  --vc-space-7: 32px;
  --vc-space-8: 40px;

  --vc-page-padding: 24px;
  --vc-mobile-page-padding: clamp(14px, 4vw, 22px);
  --vc-section-gap: var(--vip-section-gap, 16px);
  --vc-grid-gap: 12px;
  --vc-panel-gap: 20px;

  /* Superfícies */
  --vc-surface-page: var(--bg, #050507);
  --vc-surface-card: var(--card-bg, var(--t-surface, #0a0a0f));
  --vc-surface-card-soft: var(--bg-3, var(--t-surface-2, #111118));
  --vc-surface-card-strong: var(--bg-4, var(--t-surface-3, #18181f));
  --vc-surface-modal: var(--bg-2, var(--t-surface, #0a0a0f));
  --vc-surface-table: var(--card-bg, var(--t-surface, #0a0a0f));
  --vc-layer-faint: rgba(255, 255, 255, .035);
  --vc-layer-subtle: rgba(255, 255, 255, .04);
  --vc-layer-soft: rgba(255, 255, 255, .055);
  --vc-layer-medium: rgba(255, 255, 255, .06);
  --vc-layer-strong: rgba(255, 255, 255, .08);
  --vc-shade-faint: rgba(0, 0, 0, .02);
  --vc-shade-subtle: rgba(0, 0, 0, .04);
  --vc-shade-soft: rgba(0, 0, 0, .05);
  --vc-shade-medium: rgba(0, 0, 0, .08);
  --vc-shade-strong: rgba(0, 0, 0, .18);
  --vc-shade-deep: rgba(0, 0, 0, .35);
  --vc-shade-overlay: rgba(0, 0, 0, .5);
  --vc-surface-input: var(--vc-layer-faint);
  --vc-surface-hover: rgba(59, 130, 246, .07);
  --vc-surface-disabled: var(--vc-layer-alpha-025);
  --vc-card-padding: var(--vip-card-padding, 16px);
  --vc-card-padding-lg: 20px;
  --vc-card-header-padding: 14px 16px;
  --vc-card-body-padding: var(--vc-card-padding);
  --vc-card-footer-padding: 12px 16px;
  --vc-card-gap: 12px;
  --vc-card-transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  --vc-radius-card: 16px;
  --vc-radius-card-sm: 12px;
  --vc-radius-btn: 12px;
  --vc-radius-pill: 999px;
  --vc-sheet-radius: 18px;
  --vc-glass-filter: none;

  /* Headers de página */
  --vc-page-header-gap: 12px;
  --vc-page-header-margin-bottom: var(--vc-section-gap);
  --vc-page-header-padding-bottom: 0px;
  --vc-page-header-border: transparent;
  --vc-page-header-compact-margin-bottom: 12px;
  --vc-page-title-color: var(--vc-ink);
  --vc-page-title-size: var(--vc-text-xl);
  --vc-page-title-compact-size: 1.12rem;
  --vc-page-title-weight: var(--vc-font-weight-strong);
  --vc-page-title-gap: 8px;
  --vc-page-icon-color: var(--vc-primary);
  --vc-page-icon-size: 1rem;
  --vc-page-subtitle-color: var(--vc-ink-3);
  --vc-page-subtitle-size: var(--vc-text-sm);
  --vc-page-subtitle-max-width: 720px;

  /* Controles */
  --vc-button-height: 46px;
  --vc-button-height-sm: 38px;
  --vc-input-height: 44px;
  --vc-chip-height: 30px;
  --vc-chip-padding-x: 10px;
  --vc-chip-gap: 6px;
  --vc-chip-bg: var(--vc-layer-faint);
  --vc-chip-text: var(--vc-ink-2);
  --vc-chip-border: var(--vc-border);
  --vc-badge-height: 24px;
  --vc-badge-padding-x: 9px;
  --vc-badge-success-text: #bbf7d0;
  --vc-badge-success-bg: var(--vc-success-surface);
  --vc-badge-warning-text: #fde68a;
  --vc-badge-warning-bg: var(--vc-warning-surface);
  --vc-badge-danger-text: #fecaca;
  --vc-badge-danger-bg: var(--vc-danger-surface);
  --vc-badge-info-text: #bfdbfe;
  --vc-badge-info-bg: var(--vc-primary-alpha-16);
  --vc-badge-neutral-text: var(--vc-ink-2);
  --vc-badge-neutral-bg: rgba(148, 163, 184, .16);
  --vc-touch-min: 44px;

  /* Estados e loaders */
  --vc-state-bg: rgba(47, 125, 244, .045);
  --vc-state-border: rgba(96, 165, 250, .34);
  --vc-state-text: var(--vc-ink-3);
  --vc-state-title-color: var(--vc-ink);
  --vc-state-icon-color: var(--vc-primary);
  --vc-state-icon-size: 42px;
  --vc-state-radius: 12px;
  --vc-state-min-height: 120px;
  --vc-state-padding: 20px;
  --vc-state-gap: 8px;
  --vc-error-state-bg: var(--vc-danger-soft);
  --vc-error-state-border: rgba(248, 113, 113, .28);
  --vc-error-state-text: #fecaca;
  --vc-loader-size: 18px;
  --vc-loader-border-width: 2px;
  --vc-loader-duration: 700ms;
  --vc-loader-track: rgba(152, 188, 255, .18);
  --vc-loader-accent: #2f86ff;
  --vc-loader-accent-2: #7aa8ff;
  --vc-loader-highlight: #d9ecff;
  --vc-loader-success: #2dd4bf;
  --vc-skeleton-start: var(--vc-surface-card-soft);
  --vc-skeleton-highlight: var(--vc-surface-card-strong);
  --vc-skeleton-radius: 6px;
  --vc-skeleton-duration: 1400ms;

  /* Gráficos e visualização de dados */
  --vc-chart-surface: rgba(8, 23, 43, .30);
  --vc-chart-border: var(--vc-border);
  --vc-chart-glow: rgba(79, 156, 255, .08);
  --vc-chart-radius: 12px;
  --vc-chart-min-height: 260px;
  --vc-chart-padding: 12px;
  --vc-chart-grid: rgba(148, 163, 184, .12);
  --vc-chart-axis: #64748b;
  --vc-chart-legend: #94a3b8;
  --vc-chart-label-size: 11px;
  --vc-chart-tooltip-bg: rgba(7, 17, 31, .96);
  --vc-chart-tooltip-border: var(--vc-border-strong);
  --vc-chart-tooltip-text: #f8fafc;
  --vc-chart-segment-border: rgba(0, 0, 0, 0);
  --vc-chart-series-1-fill: rgba(79, 156, 255, .22);
  --vc-chart-bar-radius: 5px;
  --vc-chart-line-width: 3px;
  --vc-chart-series-1: #4f9cff;
  --vc-chart-series-2: #22c55e;
  --vc-chart-series-3: #f59e0b;
  --vc-chart-series-4: #ef4444;
  --vc-chart-series-5: #8b5cf6;
  --vc-chart-series-6: #06b6d4;
  --vc-chart-series-7: #ec4899;
  --vc-chart-series-8: #84cc16;

  /* Shell de navegação */
  --vc-sidebar-width: 272px;
  --vc-sidebar-collapsed-width: 76px;
  --vc-sidebar-surface-start: rgba(16, 18, 22, .98);
  --vc-sidebar-surface-end: rgba(9, 11, 15, .98);
  --vc-sidebar-border: var(--vc-layer-alpha-075);
  --vc-sidebar-text: #e4e4e7;
  --vc-sidebar-muted: rgba(212, 212, 216, .56);
  --vc-sidebar-item-height: 36px;
  --vc-sidebar-item-radius: 11px;
  --vc-sidebar-item-hover-bg: var(--vc-layer-soft);
  --vc-sidebar-item-active-start: rgba(47, 134, 255, .20);
  --vc-sidebar-item-active-end: rgba(47, 134, 255, .105);
  --vc-sidebar-item-active-text: #ffffff;
  --vc-sidebar-item-active-border: rgba(122, 168, 255, .28);
  --vc-sidebar-icon-size: 26px;
  --vc-sidebar-icon-radius: 8px;
  --vc-sidebar-icon-bg: var(--vc-layer-subtle);
  --vc-sidebar-logo-start: #60a5fa;
  --vc-sidebar-logo-end: #2563eb;
  --vc-topbar-height: 60px;
  --vc-topbar-surface: rgba(10, 10, 15, .80);
  --vc-topbar-border: var(--vc-layer-strong);
  --vc-topbar-text: #f4f4f8;
  --vc-topbar-button-bg: var(--vc-layer-subtle);
  --vc-topbar-button-hover: var(--vc-primary-alpha-12);
  --vc-mobile-dock-surface: rgba(18, 15, 23, .90);
  --vc-mobile-dock-border: rgba(143, 166, 255, .22);
  --vc-mobile-dock-text: rgba(226, 232, 240, .72);
  --vc-mobile-dock-item-bg: rgba(18, 15, 23, .96);
  --vc-mobile-dock-active-start: rgba(96, 165, 250, .38);
  --vc-mobile-dock-active-end: rgba(37, 99, 235, .20);
  --vc-mobile-dock-radius: 18px;
  --vc-mobile-dock-item-radius: 12px;

  /* Feedback de interface */
  --vc-toast-surface: rgba(14, 14, 18, .97);
  --vc-toast-text: #ffffff;
  --vc-toast-detail: rgba(212, 212, 216, .82);
  --vc-toast-border: rgba(99, 102, 241, .25);
  --vc-toast-radius: 12px;
  --vc-toast-width: 320px;
  --vc-toast-padding: 14px;
  --vc-toast-progress-height: 2px;
  --vc-feedback-success: #10b981;
  --vc-feedback-danger: #ef4444;
  --vc-feedback-warning: #f59e0b;
  --vc-feedback-info: #6366f1;
  --vc-alert-surface: var(--vc-layer-faint);
  --vc-alert-border: var(--vc-border);
  --vc-alert-text: var(--vc-ink-2);
  --vc-alert-radius: 12px;
  --vc-alert-padding: 14px;
  --vc-tooltip-surface: rgba(8, 15, 28, .96);
  --vc-tooltip-text: #f8fafc;
  --vc-tooltip-border: var(--vc-border-strong);
  --vc-tooltip-radius: 8px;
  --vc-progress-track: rgba(148, 163, 184, .16);
  --vc-progress-fill: var(--vc-primary);
  --vc-progress-height: 6px;
  --vc-progress-radius: 999px;

  /* Cores canônicas (consolida os 4 azuis do sistema) */
  --vc-primary: var(--primary, #3b82f6);
  --vc-primary-alpha-04: color-mix(in srgb, var(--vc-primary) 4%, transparent);
  --vc-primary-alpha-06: color-mix(in srgb, var(--vc-primary) 6%, transparent);
  --vc-primary-alpha-08: color-mix(in srgb, var(--vc-primary) 8%, transparent);
  --vc-primary-alpha-10: color-mix(in srgb, var(--vc-primary) 10%, transparent);
  --vc-primary-alpha-12: color-mix(in srgb, var(--vc-primary) 12%, transparent);
  --vc-primary-alpha-15: color-mix(in srgb, var(--vc-primary) 15%, transparent);
  --vc-primary-alpha-16: color-mix(in srgb, var(--vc-primary) 16%, transparent);
  --vc-primary-alpha-18: color-mix(in srgb, var(--vc-primary) 18%, transparent);
  --vc-primary-alpha-20: color-mix(in srgb, var(--vc-primary) 20%, transparent);
  --vc-primary-alpha-35: color-mix(in srgb, var(--vc-primary) 35%, transparent);
  --vc-primary-alpha-45: color-mix(in srgb, var(--vc-primary) 45%, transparent);
  --vc-primary-alpha-50: color-mix(in srgb, var(--vc-primary) 50%, transparent);
  --vc-primary-alpha-55: color-mix(in srgb, var(--vc-primary) 55%, transparent);
  --vc-layer-alpha-015: color-mix(in srgb, var(--vc-ink-inverse) 1.5%, transparent);
  --vc-layer-alpha-020: color-mix(in srgb, var(--vc-ink-inverse) 2%, transparent);
  --vc-layer-alpha-025: color-mix(in srgb, var(--vc-ink-inverse) 2.5%, transparent);
  --vc-layer-alpha-030: color-mix(in srgb, var(--vc-ink-inverse) 3%, transparent);
  --vc-layer-alpha-045: color-mix(in srgb, var(--vc-ink-inverse) 4.5%, transparent);
  --vc-layer-alpha-050: color-mix(in srgb, var(--vc-ink-inverse) 5%, transparent);
  --vc-layer-alpha-065: color-mix(in srgb, var(--vc-ink-inverse) 6.5%, transparent);
  --vc-layer-alpha-070: color-mix(in srgb, var(--vc-ink-inverse) 7%, transparent);
  --vc-layer-alpha-075: color-mix(in srgb, var(--vc-ink-inverse) 7.5%, transparent);
  --vc-layer-alpha-090: color-mix(in srgb, var(--vc-ink-inverse) 9%, transparent);
  --vc-layer-alpha-100: color-mix(in srgb, var(--vc-ink-inverse) 10%, transparent);
  --vc-layer-alpha-120: color-mix(in srgb, var(--vc-ink-inverse) 12%, transparent);
  --vc-layer-alpha-130: color-mix(in srgb, var(--vc-ink-inverse) 13%, transparent);
  --vc-layer-alpha-140: color-mix(in srgb, var(--vc-ink-inverse) 14%, transparent);
  --vc-layer-alpha-160: color-mix(in srgb, var(--vc-ink-inverse) 16%, transparent);
  --vc-layer-alpha-180: color-mix(in srgb, var(--vc-ink-inverse) 18%, transparent);
  --vc-layer-alpha-200: color-mix(in srgb, var(--vc-ink-inverse) 20%, transparent);
  --vc-layer-alpha-220: color-mix(in srgb, var(--vc-ink-inverse) 22%, transparent);
  --vc-primary-strong: var(--primary-hover, #2563eb);
  --vc-success: var(--green, #10b981);
  --vc-danger: var(--red, #ef4444);
  --vc-warning: var(--orange, #f59e0b);
  --vc-success-soft: color-mix(in srgb, var(--vc-success) 10%, transparent);
  --vc-success-surface: color-mix(in srgb, var(--vc-success) 16%, transparent);
  --vc-success-border: color-mix(in srgb, var(--vc-success) 25%, transparent);
  --vc-success-strong: color-mix(in srgb, var(--vc-success) 40%, transparent);
  --vc-success-glow: color-mix(in srgb, var(--vc-success) 60%, transparent);
  --vc-danger-soft: color-mix(in srgb, var(--vc-danger) 10%, transparent);
  --vc-danger-surface: color-mix(in srgb, var(--vc-danger) 16%, transparent);
  --vc-danger-border: color-mix(in srgb, var(--vc-danger) 25%, transparent);
  --vc-danger-strong: color-mix(in srgb, var(--vc-danger) 40%, transparent);
  --vc-danger-glow: color-mix(in srgb, var(--vc-danger) 60%, transparent);
  --vc-warning-soft: color-mix(in srgb, var(--vc-warning) 10%, transparent);
  --vc-warning-surface: color-mix(in srgb, var(--vc-warning) 16%, transparent);
  --vc-warning-border: color-mix(in srgb, var(--vc-warning) 25%, transparent);
  --vc-warning-strong: color-mix(in srgb, var(--vc-warning) 40%, transparent);
  --vc-warning-glow: color-mix(in srgb, var(--vc-warning) 60%, transparent);

  --vc-ink: var(--text, #ffffff);
  --vc-ink-2: var(--text-2, #e2e8f0);
  --vc-ink-3: var(--text-3, #9aa4b8);
  --vc-ink-4: var(--text-4, #64748b);
  --vc-ink-inverse: #ffffff;

  /* Sombra / foco / borda */
  --vc-shadow-card: 0 4px 16px var(--vc-shade-deep);
  --vc-shadow-float: 0 16px 48px -8px rgba(0, 0, 0, .6);
  --vc-focus-ring: 0 0 0 3px rgba(59, 130, 246, .25);
  --vc-border: var(--vc-layer-strong);
  --vc-border-strong: var(--vc-layer-alpha-140);
  --vc-card-border: var(--vc-border);
  --vc-input-border: var(--vc-border-strong);
  --vc-input-border-focus: var(--vc-primary-alpha-55);
  --vc-input-placeholder: rgba(226, 232, 240, .48);
  --vc-input-padding-x: 12px;
  --vc-input-padding-y: 9px;
  --vc-input-disabled-opacity: .62;
  --vc-field-gap: 8px;
  --vc-field-label-color: var(--vc-ink-3);
  --vc-field-hint-color: var(--vc-ink-4);

  /* Layout */
  --vc-desktop-max-width: 1320px;
  --vc-overlay-bg: rgba(2, 9, 21, .76);
  --vc-modal-surface-start: rgba(8, 18, 33, .985);
  --vc-modal-surface-end: rgba(13, 27, 47, .985);
  --vc-modal-border: var(--vc-border);
  --vc-modal-header-bg: var(--vc-layer-faint);
  --vc-modal-header-border: var(--vc-border);
  --vc-modal-shadow: 0 34px 90px rgba(0, 5, 18, .5), inset 0 1px 0 var(--vc-layer-alpha-120);
  --vc-modal-width: 520px;
  --vc-modal-width-lg: 760px;
  --vc-modal-padding-x: 22px;
  --vc-modal-header-padding-y: 18px;
  --vc-modal-body-padding-y: 22px;
  --vc-modal-footer-padding-y: 14px;
  --vc-mobile-bottom-safe-gap: calc(var(--mobile-bottom-h, 96px) + env(safe-area-inset-bottom, 0px) + 12px);

  /* KPIs e métricas */
  --vc-kpi-surface-start: var(--vc-surface-card);
  --vc-kpi-surface-end: var(--vc-surface-card-soft);
  --vc-kpi-border: var(--vc-border);
  --vc-kpi-hover-border: rgba(96, 165, 250, .34);
  --vc-kpi-radius: 12px;
  --vc-kpi-min-height: 112px;
  --vc-kpi-padding-x: 20px;
  --vc-kpi-padding-y: 19px;
  --vc-kpi-gap: 12px;
  --vc-kpi-icon-size: 42px;
  --vc-kpi-icon-radius: 13px;
  --vc-kpi-value-color: var(--vc-ink-inverse);
  --vc-kpi-value-size: clamp(1.05rem, 1.4vw, 1.42rem);
  --vc-kpi-label-color: var(--vc-ink-2);
  --vc-kpi-label-size: var(--vc-text-sm);
  --vc-kpi-shadow: 0 12px 30px rgba(0, 9, 28, .18), inset 0 1px 0 var(--vc-layer-strong);
  --vc-kpi-hover-shadow: 0 18px 42px rgba(0, 9, 28, .28), inset 0 1px 0 var(--vc-layer-alpha-120);

  /* Tabs canônicas */
  --vc-tab-list-bg-start: var(--vc-layer-alpha-075);
  --vc-tab-list-bg-end: var(--vc-layer-alpha-025);
  --vc-tab-list-surface: rgba(9, 25, 47, .58);
  --vc-tab-list-border: rgba(147, 197, 253, .20);
  --vc-tab-list-radius: 12px;
  --vc-tab-list-height: 50px;
  --vc-tab-list-padding: 4px;
  --vc-tab-gap: 4px;
  --vc-tab-blur: 16px;
  --vc-tab-list-shadow: inset 0 1px 0 var(--vc-layer-alpha-100), 0 10px 28px rgba(0, 8, 24, .14);
  --vc-tab-height: 42px;
  --vc-tab-padding-x: 14px;
  --vc-tab-radius: 8px;
  --vc-tab-text: #aebfd5;
  --vc-tab-hover-text: #eaf3ff;
  --vc-tab-hover-bg: var(--vc-layer-soft);
  --vc-tab-hover-border: rgba(147, 197, 253, .12);
  --vc-tab-active-text: #f7fbff;
  --vc-tab-active-bg-start: rgba(82, 170, 255, .22);
  --vc-tab-active-bg-end: rgba(47, 125, 244, .10);
  --vc-tab-active-border: rgba(147, 197, 253, .24);
  --vc-tab-active-shadow: inset 0 1px 0 var(--vc-layer-alpha-160), 0 5px 14px rgba(23, 104, 220, .15);
  --vc-tab-indicator-start: #7dd3fc;
  --vc-tab-indicator-end: #60a5fa;

  /* Tabela */
  --vc-table-pad-y: 12px;
  --vc-table-pad-x: 16px;
  --vc-table-card-gap: 12px;
  --vc-table-header-bg: var(--vc-layer-faint);
  --vc-table-row-hover: var(--vc-surface-hover);
  --vc-table-row-zebra: rgba(255, 255, 255, .018);
  --vc-table-border: var(--vc-border);
  --vc-table-header-color: var(--vc-ink-3);
  --vc-table-radius: var(--vc-radius-card-sm);
  --vc-table-shadow: var(--vc-shadow-card);

  /* Escala única de z-index (referência para novas camadas) */
  --vc-z-content: 1;
  --vc-z-sticky: 100;
  --vc-z-nav: 300;
  --vc-z-drawer: 360;
  --vc-z-focusmode: 400;
  --vc-z-overlay: 900;
  --vc-z-modal: 1000;
  --vc-z-toast: 1200;

  /* Estados / tipografia */
  --vc-disabled-opacity: .55;
  --vc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --vc-text-sm: .78rem;
  --vc-text-xs: .7rem;
  --vc-text-lg: 1rem;
  --vc-text-xl: 1.35rem;
  --vc-line-height-body: 1.6;
  --vc-line-height-compact: 1.35;
  --vc-font-weight-normal: 400;
  --vc-font-weight-medium: 600;
  --vc-font-weight-strong: 800;

  /* Aliases: tokens legados passam a derivar dos canônicos.
     --t-radius alimentava botões (10px) e --t-radius-lg os cards (14px);
     liquid-glass já forçava 12px em botões, então --t-radius→12px é
     visualmente neutro onde o liquid vence e harmoniza onde não vencia. */
  --t-radius: var(--vc-radius-btn);
  --t-radius-lg: var(--vc-radius-card);

  /* Rodada 2 — hierarquia do dark: os inks legados eram TODOS #ffffff
     (achatava títulos, corpo e muted no mesmo peso). Agora derivam da
     escala canônica: corpo #e2e8f0 (~16:1 sobre o fundo), muted #9aa4b8
     (~7.5:1), meta #64748b. --t-ink (títulos) permanece branco puro.
     O bloco [data-theme="light"] do §2 redefine tudo depois — intacto. */
  --t-ink-2: var(--vc-ink-2);
  --t-ink-3: var(--vc-ink-3);
  --t-ink-4: var(--vc-ink-4);
}

body {
  font-weight: var(--vc-font-weight-normal);
  line-height: var(--vc-line-height-body);
}

[data-theme="light"] {
  --vc-ink: #1a1d26;
  --vc-ink-2: #2d3748;
  --vc-ink-3: #5a6577;
  --vc-ink-4: #8b95a5;
  --vc-border: var(--vc-shade-medium);
  --vc-border-strong: rgba(0, 0, 0, .14);
  --vc-surface-page: #f0f2f5;
  --vc-surface-card: #f8f9fb;
  --vc-surface-card-soft: #f3f4f7;
  --vc-surface-card-strong: #eceef2;
  --vc-surface-modal: #f8f9fb;
  --vc-surface-table: #f8f9fb;
  --vc-surface-input: rgba(255, 255, 255, .72);
  --vc-surface-hover: rgba(37, 99, 235, .06);
  --vc-surface-disabled: rgba(15, 23, 42, .035);
  --vc-shadow-card: 0 2px 8px var(--vc-shade-soft);
  --vc-shadow-float: 0 16px 48px -8px rgba(0, 0, 0, .14);
  --vc-card-border: var(--vc-border);
  --vc-input-border: var(--vc-border-strong);
  --vc-input-border-focus: rgba(37, 99, 235, .48);
  --vc-input-placeholder: rgba(71, 85, 105, .56);
  --vc-table-header-bg: rgba(226, 232, 240, .48);
  --vc-table-row-hover: rgba(37, 99, 235, .055);
  --vc-table-row-zebra: rgba(15, 23, 42, .025);
  --vc-table-border: var(--vc-border);
  --vc-overlay-bg: rgba(15, 23, 42, .30);
  --vc-modal-surface-start: rgba(250, 253, 255, .99);
  --vc-modal-surface-end: rgba(239, 247, 255, .99);
  --vc-modal-border: #dfe3ea;
  --vc-modal-header-bg: rgba(255, 255, 255, .48);
  --vc-modal-header-border: #eceef2;
  --vc-modal-shadow: 0 25px 60px -12px rgba(0, 0, 0, .12);
  --vc-page-header-border: rgba(15, 23, 42, 0);
  --vc-page-title-color: #1a1d26;
  --vc-page-icon-color: #2563eb;
  --vc-page-subtitle-color: #5a6577;
  --vc-kpi-surface-start: rgba(255, 255, 255, .92);
  --vc-kpi-surface-end: rgba(237, 244, 252, .88);
  --vc-kpi-border: rgba(37, 99, 235, .12);
  --vc-kpi-hover-border: rgba(37, 99, 235, .28);
  --vc-kpi-value-color: #1a1d26;
  --vc-kpi-label-color: #5a6577;
  --vc-kpi-shadow: 0 8px 24px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .72);
  --vc-kpi-hover-shadow: 0 14px 34px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .82);
  --vc-state-bg: rgba(37, 99, 235, .045);
  --vc-state-border: rgba(37, 99, 235, .20);
  --vc-state-text: #5a6577;
  --vc-state-title-color: #1a1d26;
  --vc-state-icon-color: #2563eb;
  --vc-error-state-bg: rgba(220, 38, 38, .06);
  --vc-error-state-border: rgba(220, 38, 38, .20);
  --vc-error-state-text: #991b1b;
  --vc-loader-track: rgba(37, 99, 235, .16);
  --vc-skeleton-start: #e7ebf1;
  --vc-skeleton-highlight: #f7f9fc;
  --vc-chart-surface: rgba(255, 255, 255, .58);
  --vc-chart-border: rgba(37, 99, 235, .12);
  --vc-chart-glow: rgba(37, 99, 235, .07);
  --vc-chart-grid: rgba(15, 23, 42, .10);
  --vc-chart-axis: #64748b;
  --vc-chart-legend: #475569;
  --vc-chart-tooltip-bg: rgba(15, 23, 42, .96);
  --vc-chart-tooltip-border: rgba(148, 163, 184, .32);
  --vc-chart-tooltip-text: #f8fafc;
  --vc-sidebar-surface-start: rgba(250, 250, 250, .98);
  --vc-sidebar-surface-end: rgba(244, 245, 247, .98);
  --vc-sidebar-border: rgba(15, 23, 42, .10);
  --vc-sidebar-text: #111827;
  --vc-sidebar-muted: rgba(71, 85, 105, .62);
  --vc-sidebar-item-hover-bg: rgba(15, 23, 42, .045);
  --vc-sidebar-icon-bg: rgba(15, 23, 42, .045);
  --vc-topbar-surface: rgba(248, 250, 252, .88);
  --vc-topbar-border: rgba(15, 23, 42, .10);
  --vc-topbar-text: #111827;
  --vc-topbar-button-bg: rgba(15, 23, 42, .035);
  --vc-topbar-button-hover: rgba(37, 99, 235, .08);
  --vc-mobile-dock-surface: rgba(248, 250, 252, .92);
  --vc-mobile-dock-border: rgba(88, 124, 173, .24);
  --vc-mobile-dock-text: rgba(51, 65, 85, .74);
  --vc-mobile-dock-item-bg: rgba(248, 250, 252, .94);
  --vc-toast-surface: rgba(255, 255, 255, .98);
  --vc-toast-text: #111827;
  --vc-toast-detail: #5a6577;
  --vc-toast-border: rgba(15, 23, 42, .12);
  --vc-alert-surface: rgba(255, 255, 255, .72);
  --vc-alert-border: rgba(15, 23, 42, .12);
  --vc-alert-text: #334155;
  --vc-tooltip-surface: rgba(15, 23, 42, .96);
  --vc-tooltip-text: #f8fafc;
  --vc-tooltip-border: rgba(148, 163, 184, .28);
  --vc-progress-track: rgba(15, 23, 42, .12);
  --vc-chip-bg: rgba(15, 23, 42, .035);
  --vc-chip-text: #334155;
  --vc-chip-border: rgba(15, 23, 42, .10);
  --vc-badge-success-text: #065f46;
  --vc-badge-success-bg: var(--vc-success-surface);
  --vc-badge-warning-text: #92400e;
  --vc-badge-warning-bg: var(--vc-warning-surface);
  --vc-badge-danger-text: #991b1b;
  --vc-badge-danger-bg: var(--vc-danger-soft);
  --vc-badge-info-text: #1e40af;
  --vc-badge-info-bg: var(--vc-primary-alpha-12);
  --vc-badge-neutral-text: #334155;
  --vc-badge-neutral-bg: rgba(100, 116, 139, .14);
  --vc-tab-list-bg-start: rgba(255, 255, 255, .82);
  --vc-tab-list-bg-end: rgba(229, 240, 255, .68);
  --vc-tab-list-surface: rgba(239, 247, 255, .78);
  --vc-tab-list-border: rgba(37, 99, 235, .18);
  --vc-tab-text: #52657e;
  --vc-tab-hover-text: #163d73;
  --vc-tab-active-text: #163d73;
}

/* ── Foco visível global (teclado) ─────────────────────────────────────────
   :where() zera a especificidade: qualquer regra existente mais específica
   continua vencendo; ganha foco visível tudo que hoje não tem nada. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vc-primary);
  outline-offset: 2px;
}

/* ── Cards: convergência de raio ───────────────────────────────────────────
   Light mode: a regra legada usa 14px !important (linha ~235); este
   !important é o mínimo necessário para vencê-la — caso documentado. */
[data-theme="light"] .card,
[data-theme="light"] .metric-card,
[data-theme="light"] .panel,
[data-theme="light"] .table-container,
[data-theme="light"] .box {
  border-radius: var(--vc-radius-card) !important;
}

/* VipTreiner: cards principais saem de 8px para o raio canônico (16px).
   As regras originais não usam !important — ordem no arquivo decide. */
#page-viptrainer .viptrainer-today-hero,
#page-viptrainer .viptrainer-active-session,
#page-viptrainer .viptrainer-session-coach,
#page-viptrainer .viptrainer-quick-card,
#page-viptrainer .viptrainer-exercise-card,
#page-viptrainer .viptrainer-workout-footer,
#page-viptrainer .viptrainer-week-strip,
#page-viptrainer .viptrainer-progress-card,
#page-viptrainer .viptrainer-empty-state,
#page-viptrainer .vt-premium-chart,
#page-viptrainer .vt-body-hero,
#page-viptrainer .vt-premium-week,
#page-viptrainer .vt-perfect-week-card,
#page-viptrainer .vt-daily-checkin-card,
#page-viptrainer .vt-local-coach,
#page-viptrainer .vt-internal-reminders article,
#page-viptrainer .vt-nutrition-hero,
#page-viptrainer .vt-nutrition-coach,
#page-viptrainer .vt-nutrition-reminders article,
#page-viptrainer .vt-report-score,
#page-viptrainer .vt-report-insights,
#page-viptrainer .vt-report-cards article,
#page-viptrainer .vt-report-chart,
#page-viptrainer .vt-report-chart-empty,
#page-viptrainer .vt-body-stats-grid article,
#page-viptrainer .vt-achievement,
#page-viptrainer .vt-chart-empty-state {
  border-radius: var(--vc-radius-card);
}

/* Fase 4H - feedback canônico e aliases legados. */
#toast-container { width: min(var(--vc-toast-width), calc(100vw - 32px)); max-width: var(--vc-toast-width); }
.toast {
  padding: var(--vc-toast-padding);
  color: var(--vc-toast-text);
  border-color: color-mix(in srgb, var(--toast-color, var(--vc-feedback-info)) 25%, var(--vc-toast-border));
  border-radius: var(--vc-toast-radius);
  background: var(--vc-toast-surface);
}
.toast-message { color: var(--vc-toast-text); }
.toast-detail { color: var(--vc-toast-detail); }
.toast-progress { height: var(--vc-toast-progress-height); }

.vc-alert,
.alert {
  padding: var(--vc-alert-padding);
  color: var(--vc-alert-text);
  border: 1px solid var(--vc-alert-border);
  border-radius: var(--vc-alert-radius);
  background: var(--vc-alert-surface);
}
.vc-alert--success, .alert-success { border-color: color-mix(in srgb, var(--vc-feedback-success) 36%, transparent); }
.vc-alert--danger, .alert-danger { border-color: color-mix(in srgb, var(--vc-feedback-danger) 36%, transparent); }
.vc-alert--warning, .alert-warning { border-color: color-mix(in srgb, var(--vc-feedback-warning) 36%, transparent); }
.vc-alert--info, .alert-info { border-color: color-mix(in srgb, var(--vc-feedback-info) 36%, transparent); }

.vc-progress,
.progress-track {
  height: var(--vc-progress-height);
  overflow: hidden;
  border-radius: var(--vc-progress-radius);
  background: var(--vc-progress-track);
}
.progress-fill { border-radius: var(--vc-progress-radius); background: var(--vc-progress-fill); }
.progress-fill.success { background: var(--vc-feedback-success); }
.progress-fill.error { background: var(--vc-feedback-danger); }

/* VipTreiner: tiles internos convergem para o raio secundário (12px). */
#page-viptrainer .viptrainer-set-row,
#page-viptrainer .viptrainer-rest-timer,
#page-viptrainer .viptrainer-next-box,
#page-viptrainer .viptrainer-active-current,
#page-viptrainer .viptrainer-hero-metrics span,
#page-viptrainer .viptrainer-progress-stats span,
#page-viptrainer .viptrainer-evolution-cards span,
#page-viptrainer .viptrainer-set-history span,
#page-viptrainer .vt-chart-microstats span,
#page-viptrainer .viptrainer-exercise-thumb,
#page-viptrainer .viptrainer-exercise-stats span,
.vt-summary-stat {
  border-radius: var(--vc-radius-card-sm);
}

/* Central de Avisos: cards saem de 17–20px para 16px; hero e modal para 18px. */
#page-notices .notices-card,
#page-notices .notice-metric,
#page-notices .notice-type-card,
#page-notices .notice-template-card,
#page-notices .notices-mini-panel,
#page-notices .notices-section {
  border-radius: var(--vc-radius-card);
}

#page-notices .notices-hero,
#page-notices .notice-modal-panel {
  border-radius: var(--vc-sheet-radius);
}

/* ── Botões: piso de altura tokenizado ─────────────────────────────────────
   Exclui .btn-sm/.btn-xs (densidade intencional em tabelas/toolbars). */
:where(.btn, .btn-vip-main, .btn-secondary, .btn-danger):not(.btn-sm):not(.btn-xs) {
  min-height: var(--vc-button-height-sm);
}

/* ── Inputs/selects: piso 44px com especificidade zero (:where) —
   regras existentes mais específicas (ex.: set-rows compactas do
   VipTreiner no desktop) continuam valendo. ─────────────────────────────── */
:where(.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
       .form-group select,
       .form-group textarea,
       .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
       .modal-body select) {
  min-height: var(--vc-input-height);
}

/* ── Touch target: dots do Modo Foco (eram 9×9px) ──────────────────────────
   Dot visual 12px + hit-area expandida via ::after (~36px). */
#page-viptrainer .vt-focus-dot {
  position: relative;
  width: 12px;
  height: 12px;
}

#page-viptrainer .vt-focus-dot::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

#page-viptrainer .vt-focus-dots {
  gap: 12px;
}

/* ── Page shell: contenção só em telas ultra-largas (≥1441px) ──────────────
   Em 1280–1440px nada muda (zero risco de regressão em tabelas densas).
   Exclusões: leads (kanban usa a largura toda), frame-host (iframe),
   notices (já tem shell próprio de 1480px centrado). */
@media (min-width: 1441px) {
  .main-content > .page:not(#page-leads):not(#page-frame-host):not(#page-notices) {
    max-width: var(--vc-desktop-max-width);
    margin-inline: auto;
  }
}

/* ── Classes canônicas .vc-* ───────────────────────────────────────────────
   Vocabulário oficial para telas novas e migrações graduais. Aliases puros:
   nenhum HTML existente depende delas ainda. */
.vc-page-shell {
  max-width: var(--vc-desktop-max-width);
  margin-inline: auto;
  padding: var(--vc-page-padding);
}

.vc-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vc-page-header-gap);
  margin-bottom: var(--vc-page-header-margin-bottom);
  padding-bottom: var(--vc-page-header-padding-bottom);
  border-bottom: 1px solid var(--vc-page-header-border);
}

.vc-page-title {
  margin: 0;
  color: var(--vc-page-title-color);
  font-size: var(--vc-page-title-size);
  font-weight: var(--vc-page-title-weight);
  letter-spacing: 0;
}

.vc-page-subtitle {
  margin: 2px 0 0;
  max-width: var(--vc-page-subtitle-max-width);
  color: var(--vc-page-subtitle-color);
  font-size: var(--vc-page-subtitle-size);
  line-height: var(--vc-line-height-compact);
}

.vc-section { margin-bottom: var(--vc-section-gap); }

.vc-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vc-space-3);
  margin-bottom: var(--vc-space-3);
}

.vc-section-title {
  margin: 0;
  color: var(--vc-ink);
  font-size: var(--vc-text-lg);
  font-weight: var(--vc-font-weight-strong);
}

.vc-card {
  padding: var(--vc-card-padding);
  border: 1px solid var(--vc-card-border);
  border-radius: var(--vc-radius-card);
  background: var(--vc-surface-card);
  box-shadow: var(--vc-shadow-card);
}

.vc-surface,
.vc-panel {
  border: 1px solid var(--vc-card-border);
  border-radius: var(--vc-radius-card);
  background: var(--vc-surface-card);
  box-shadow: var(--vc-shadow-card);
}

.vc-card-compact {
  padding: var(--vc-space-3);
  border-radius: var(--vc-radius-card-sm);
}

.vc-card-padded-lg { padding: var(--vc-card-padding-lg); }
.vc-card-flat { box-shadow: none; }
.vc-card-soft { background: var(--vc-surface-card-soft); }
.vc-card-strong { background: var(--vc-surface-card-strong); }
.vc-card-interactive {
  transition: var(--vc-card-transition);
}
.vc-card-interactive:hover {
  border-color: var(--vc-border-strong);
  background: color-mix(in srgb, var(--vc-surface-card) 88%, var(--vc-surface-hover));
}

.vc-card-header,
.vc-card-body,
.vc-card-footer { min-width: 0; }

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

.vc-card-body { padding: var(--vc-card-body-padding); }

.vc-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--vc-space-2);
  padding: var(--vc-card-footer-padding);
  border-top: 1px solid var(--vc-card-border);
}

.vc-card-structured {
  padding: 0;
  overflow: hidden;
}

.vc-card-grid {
  display: grid;
  gap: var(--vc-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.vc-card-grid-2 { display: grid; gap: var(--vc-grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-card-grid-3 { display: grid; gap: var(--vc-grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vc-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
}

.vc-action-row-start { justify-content: flex-start; }

.vc-button,
.vc-button-primary,
.vc-button-secondary,
.vc-button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vc-control-gap);
  min-height: var(--vc-control-height-sm);
  padding: 0 var(--vc-control-padding-x-md);
  border: 1px solid var(--vc-action-border);
  border-radius: var(--vc-control-radius);
  color: var(--vc-action-secondary-text);
  background: var(--vc-action-secondary);
  font-size: var(--vc-control-font-size);
  font-weight: var(--vc-control-font-weight);
  line-height: 1;
  cursor: pointer;
  transition: var(--vc-control-transition);
}

.vc-button:hover,
.vc-button-secondary:hover {
  border-color: var(--vc-action-border-hover);
  background: var(--vc-action-secondary-hover);
}

.vc-button:active,
.vc-button-secondary:active { background: var(--vc-action-secondary-active); }

.vc-button-primary {
  color: var(--vc-action-primary-text);
  border-color: var(--vc-action-primary-border);
  background: var(--vc-action-primary);
  box-shadow: var(--vc-control-primary-shadow);
}
.vc-button-primary:hover { background: var(--vc-action-primary-hover); }
.vc-button-primary:active { background: var(--vc-action-primary-active); }

.vc-button-secondary {
  color: var(--vc-action-secondary-text);
  border-color: var(--vc-action-border);
  background: var(--vc-action-secondary);
}

.vc-button-danger {
  color: var(--vc-action-danger-text);
  border-color: var(--vc-action-danger-border);
  background: var(--vc-action-danger);
}
.vc-button-danger:hover { background: var(--vc-action-danger-hover); }
.vc-button-danger:active { background: var(--vc-action-danger-active); }

:where(.vc-button, .vc-button-primary, .vc-button-secondary, .vc-button-danger):focus-visible {
  outline: var(--vc-focus-ring-width) solid var(--vc-focus-ring-color);
  outline-offset: var(--vc-focus-ring-offset);
}

:where(.vc-button, .vc-button-primary, .vc-button-secondary, .vc-button-danger):disabled,
:where(.vc-button, .vc-button-primary, .vc-button-secondary, .vc-button-danger)[aria-disabled="true"] {
  color: var(--vc-action-disabled-text);
  border-color: var(--vc-action-disabled-border);
  background: var(--vc-action-disabled-bg);
  box-shadow: none;
  cursor: not-allowed;
}

.vc-input,
.vc-select,
.vc-textarea {
  width: 100%;
  min-height: var(--vc-input-height);
  padding: var(--vc-input-padding-y) var(--vc-input-padding-x);
  border: 1px solid var(--vc-input-border);
  border-radius: var(--vc-radius-card-sm);
  background: var(--vc-surface-input);
  color: var(--vc-ink);
  font: inherit;
}

.vc-input:hover,
.vc-select:hover,
.vc-textarea:hover { border-color: var(--vc-input-border-focus); }

.vc-textarea {
  min-height: calc(var(--vc-input-height) * 2);
  resize: vertical;
  line-height: 1.5;
}

.vc-input::placeholder,
.vc-textarea::placeholder {
  color: var(--vc-input-placeholder);
}

.vc-input:focus,
.vc-select:focus,
.vc-textarea:focus {
  border-color: var(--vc-input-border-focus);
  outline: none;
  box-shadow: var(--vc-focus-ring);
}

.vc-input:disabled,
.vc-select:disabled,
.vc-textarea:disabled,
.vc-input[readonly],
.vc-textarea[readonly] {
  opacity: var(--vc-input-disabled-opacity);
  background: var(--vc-surface-disabled);
  cursor: not-allowed;
}

.vc-field {
  display: grid;
  gap: var(--vc-field-gap);
}

.vc-field-label {
  color: var(--vc-field-label-color);
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-weight-strong);
}

.vc-field-hint {
  color: var(--vc-field-hint-color);
  font-size: var(--vc-text-xs);
  line-height: var(--vc-line-height-compact);
}

.vc-field.is-invalid .vc-input,
.vc-field.is-invalid .vc-select,
.vc-field.is-invalid .vc-textarea,
.vc-input[aria-invalid="true"],
.vc-select[aria-invalid="true"],
.vc-textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--vc-danger) 70%, transparent);
}

.vc-field.is-invalid .vc-field-hint { color: var(--vc-danger); }

.vc-field-status {
  color: var(--vc-field-hint-color);
  font-size: var(--vc-text-sm);
}

.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-chip-gap);
  min-height: var(--vc-chip-height);
  padding: 0 var(--vc-chip-padding-x);
  color: var(--vc-chip-text);
  border: 1px solid var(--vc-chip-border);
  border-radius: var(--vc-radius-pill);
  background: var(--vc-chip-bg);
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-weight-medium);
}

.vc-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--vc-badge-height);
  padding: 0 var(--vc-badge-padding-x);
  color: var(--vc-badge-neutral-text);
  border-radius: var(--vc-radius-pill);
  background: var(--vc-badge-neutral-bg);
  font-size: var(--vc-text-xs);
  font-weight: var(--vc-font-weight-strong);
  white-space: nowrap;
}

.vc-modal {
  width: calc(100vw - 40px);
  max-width: var(--vc-modal-width);
  border: 1px solid var(--vc-modal-border);
  border-radius: var(--vc-sheet-radius);
  background: linear-gradient(145deg, var(--vc-modal-surface-start), var(--vc-modal-surface-end));
  box-shadow: var(--vc-modal-shadow);
}
.vc-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-space-3); padding: var(--vc-modal-header-padding-y) var(--vc-modal-padding-x); border-bottom: 1px solid var(--vc-modal-header-border); background: var(--vc-modal-header-bg); }
.vc-modal-body { padding: var(--vc-modal-body-padding-y) var(--vc-modal-padding-x); }
.vc-modal-footer { display: flex; justify-content: flex-end; gap: var(--vc-space-2); padding: var(--vc-modal-footer-padding-y) var(--vc-modal-padding-x); border-top: 1px solid var(--vc-modal-header-border); }

.vc-sheet {
  border-top-left-radius: var(--vc-sheet-radius);
  border-top-right-radius: var(--vc-sheet-radius);
}

.vc-empty-state,
.vc-loading-state,
.vc-error-state {
  display: grid;
  place-items: center;
  gap: var(--vc-state-gap);
  min-height: var(--vc-state-min-height);
  padding: var(--vc-state-padding);
  color: var(--vc-state-text);
  border: 1px dashed var(--vc-state-border);
  border-radius: var(--vc-state-radius);
  background: var(--vc-state-bg);
  text-align: center;
}

.vc-empty-state :where(h2, h3, h4, strong),
.vc-loading-state :where(h2, h3, h4, strong),
.vc-error-state :where(h2, h3, h4, strong) { color: var(--vc-state-title-color); }

.vc-empty-state :where(.empty-icon, .state-icon, i),
.vc-loading-state :where(.empty-icon, .state-icon, i) {
  color: var(--vc-state-icon-color);
  font-size: var(--vc-state-icon-size);
}

.vc-loading-state { color: var(--vc-state-text); }
.vc-error-state {
  color: var(--vc-error-state-text);
  border-color: var(--vc-error-state-border);
  background: var(--vc-error-state-bg);
}

.vc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--vc-surface-table);
}

.vc-table th,
.vc-table td {
  padding: var(--vc-table-pad-y) var(--vc-table-pad-x);
  border-bottom: 1px solid var(--vc-table-border);
}

.vc-table th {
  color: var(--vc-table-header-color);
  background: var(--vc-table-header-bg);
  font-size: var(--vc-text-xs);
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.vc-table tbody tr:nth-child(even) { background: var(--vc-table-row-zebra); }
.vc-table tbody tr:hover { background: var(--vc-table-row-hover); }
.vc-table tbody tr:last-child td { border-bottom: 0; }

.vc-table-shell {
  overflow: hidden;
  border: 1px solid var(--vc-table-border);
  border-radius: var(--vc-table-radius);
  background: var(--vc-surface-table);
  box-shadow: var(--vc-table-shadow);
}

.vc-table-compact {
  --vc-table-pad-y: 8px;
  --vc-table-pad-x: 12px;
}

.vc-table-comfortable {
  --vc-table-pad-y: 16px;
  --vc-table-pad-x: 18px;
}

.vc-table-shell .vc-scroll-x-safe { border-radius: inherit; }

.vc-scroll-x-safe {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vc-table-empty-row {
  padding: var(--vc-state-padding);
  color: var(--vc-state-text);
  text-align: center;
}

.vc-cell-muted { color: var(--vc-ink-3); }
.vc-cell-secondary { color: var(--vc-ink-2); }
.vc-cell-strong { color: var(--vc-ink); font-weight: var(--vc-font-weight-medium); }
.vc-cell-compact { font-size: var(--vc-text-sm); }
.vc-cell-xs { font-size: var(--vc-text-xs); }
.vc-cell-truncate {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-cell-overdue { color: var(--vc-danger); }
.vc-cell-link-subtext { color: var(--vc-chart-series-1); font-size: var(--vc-text-xs); }

/* Fase 6A - Auditoria integralmente ligada aos componentes canonicos. */
#page-audit { color: var(--vc-ink); }
#page-audit .toolbar { margin-bottom: var(--vc-space-3); }
#page-audit .vc-select { width: min(100%, 260px); }

/* Fase 6B - portal do cliente sobre a mesma linguagem do painel. */
:where(#page-client-dashboard, #page-client-payments, #page-client-tickets) {
  color: var(--vc-ink);
}
:where(#page-client-dashboard, #page-client-payments, #page-client-tickets) .vc-card {
  min-width: 0;
}
#page-client-dashboard .vc-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
#page-client-tickets .vc-empty-state { border: 0; border-radius: 0; }

@media (max-width: 768px) {
  .vc-client-portal .vc-page-header { align-items: stretch; flex-direction: column; }
  .vc-client-portal .vc-page-header .vc-btn { width: 100%; }
  .vc-client-portal .vc-cell-truncate { max-width: 150px; }
}

/* Fase 4I - ponte de compatibilidade para markup legado.
   Classes antigas continuam funcionais, mas sua aparência nasce dos mesmos
   tokens usados pela API canônica. */
.card-header { padding: var(--vc-card-header-padding); border-bottom-color: var(--vc-card-border); }
.card-body { padding: var(--vc-card-body-padding); }
.card-footer { padding: var(--vc-card-footer-padding); border-top-color: var(--vc-card-border); }
.form-group label { color: var(--vc-field-label-color); }
.form-hint, .field-hint, .help-text { color: var(--vc-field-hint-color); }
.table-wrapper { border-radius: 0 0 var(--vc-table-radius) var(--vc-table-radius); }
.table-wrapper table { background: var(--vc-surface-table); }
.table-wrapper thead th { color: var(--vc-table-header-color); background: var(--vc-table-header-bg); }
.table-wrapper tbody tr:nth-child(even) > td { background: var(--vc-table-row-zebra); }
.table-wrapper tbody tr:hover > td { background: var(--vc-table-row-hover); }

.vc-form-grid {
  display: grid;
  gap: var(--vc-space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.vc-form-row { display: grid; gap: var(--vc-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Fase 7A - utilitarios semanticos para apresentacao antes inline. */
.vc-sortable-header {
  cursor: pointer;
  user-select: none;
}

.vc-field-hint-tight { margin: 2px 0 0; }

.vc-modal-note {
  margin: 0 0 var(--vc-space-3);
  font-size: var(--vc-text-lg);
  opacity: .75;
}

.vc-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--vc-kpi-gap);
  min-height: var(--vc-kpi-min-height);
  padding: var(--vc-kpi-padding-y) var(--vc-kpi-padding-x);
  border: 1px solid var(--vc-kpi-border);
  border-radius: var(--vc-kpi-radius);
  background: linear-gradient(145deg, var(--vc-kpi-surface-start), var(--vc-kpi-surface-end));
  box-shadow: var(--vc-kpi-shadow);
}

/* .vc-mobile-stack, .vc-safe-bottom e .vc-table-card-mobile vivem em
   mobile.css (camada ≤768px), junto das demais regras mobile. */

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — Rodada 2: headers, hierarquia dark, badges/chips, admin
   ──────────────────────────────────────────────────────────────────────────
   Continua a camada canônica da Rodada 1 (tokens --vc-* acima). Mesmas
   regras: aliases sobre classes existentes, nada renomeado, !important só
   para vencer legado com !important (casos comentados).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Headers de página: robustez para os wrappers reais ────────────────────
   Os headers convertidos (IA/WA/Fila/Inbox) carregam ações à direita e
   quebram linha no mobile; alinhamento central lê melhor que flex-end. */
.vc-page-header {
  align-items: center;
  flex-wrap: wrap;
}

.vc-page-title {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-page-title-gap);
}

.vc-page-title i,
.vc-page-title svg {
  flex: 0 0 auto;
  color: var(--vc-page-icon-color);
  width: var(--vc-page-icon-size);
  height: var(--vc-page-icon-size);
  font-size: var(--vc-page-icon-size);
}

.vc-page-header .vc-page-subtitle {
  max-width: var(--vc-page-subtitle-max-width);
}

/* ── Badges/chips: convergência das famílias legadas ───────────────────────
   Todas já eram pill exceto .badge-auto (6px !important no §25 — por isso
   o !important documentado abaixo). Alinha raio, altura e tipografia sem
   tocar nas cores semânticas de status que o JS usa. */
.badge,
.vt-badge,
.notices-status-pill,
.notice-table-status {
  min-height: var(--vc-badge-height);
  padding-inline: var(--vc-badge-padding-x);
  border-radius: var(--vc-radius-pill);
  font-size: var(--vc-text-xs);
  font-weight: 800;
}

.badge-auto {
  min-height: var(--vc-badge-height);
  padding-inline: var(--vc-badge-padding-x) !important;
  border-radius: var(--vc-radius-pill) !important;
  font-size: var(--vc-text-xs) !important;
  font-weight: 800 !important;
}

#page-viptrainer .viptrainer-status-badge,
#page-viptrainer .viptrainer-progress-pill {
  min-height: var(--vc-badge-height);
  font-size: var(--vc-text-xs);
  font-weight: 800;
}

/* Variantes semânticas canônicas (novas telas usam .vc-badge direto). */
.vc-badge.is-success { color: var(--vc-badge-success-text); background: var(--vc-badge-success-bg); }
.vc-badge.is-warning { color: var(--vc-badge-warning-text); background: var(--vc-badge-warning-bg); }
.vc-badge.is-danger { color: var(--vc-badge-danger-text); background: var(--vc-badge-danger-bg); }
.vc-badge.is-info { color: var(--vc-badge-info-text); background: var(--vc-badge-info-bg); }
.vc-badge.is-neutral { color: var(--vc-badge-neutral-text); background: var(--vc-badge-neutral-bg); }

[data-theme="light"] .vc-badge.is-success { color: var(--vc-badge-success-text); background: var(--vc-badge-success-bg); }
[data-theme="light"] .vc-badge.is-warning { color: var(--vc-badge-warning-text); background: var(--vc-badge-warning-bg); }
[data-theme="light"] .vc-badge.is-danger { color: var(--vc-badge-danger-text); background: var(--vc-badge-danger-bg); }
[data-theme="light"] .vc-badge.is-info { color: var(--vc-badge-info-text); background: var(--vc-badge-info-bg); }
[data-theme="light"] .vc-badge.is-neutral { color: var(--vc-badge-neutral-text); background: var(--vc-badge-neutral-bg); }

/* ── Modais: botão de fechar com alvo de toque adequado no mobile ────────── */
@media (max-width: 768px) {
  .modal-header .btn-close,
  .modal-header .close,
  .modal-header [onclick*="closeModal"] {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — Rodada 3: templates, comunicação e tipografia oficial
   ──────────────────────────────────────────────────────────────────────────
   A fonte de sistema virou decisão oficial: --vc-font é a fonte canônica e
   o liquid-glass (que redeclara --font-display/--font-body e vence a
   cascata) agora deriva dela — ver alias comentado lá. Nenhuma webfont é
   carregada; o que sempre rendeu (fonte do sistema) agora é declarado.
   ══════════════════════════════════════════════════════════════════════════ */

/* Inbox: o selo IA/Humano emitido pelo renderer alinha ao vocabulário
   canônico de badge (pill, altura, tipografia) preservando as cores on/off. */
#page-inbox .badge-ia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--vc-radius-pill);
  font-size: var(--vc-text-xs);
  font-weight: 800;
  white-space: nowrap;
}

/* Piso de legibilidade nos metadados das bolhas do chat. */
#page-inbox .bubble small {
  font-size: var(--vc-text-xs);
}

/* Fila IA: textarea herda a fonte oficial (textarea não herda por padrão). */
#page-ia-fila .ia-fila-msg {
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — Rodada 4: IA, Settings e controles de comunicação
   Classes canônicas são aditivas; seletores legados continuam disponíveis.
   ══════════════════════════════════════════════════════════════════════════ */

.vc-page-icon {
  flex: 0 0 auto;
  color: var(--vc-primary);
}

.vc-page-icon-ai { color: #818cf8; }
.vc-page-icon-whatsapp,
.wam-brand-icon { color: #25d366; }

/* ── Settings ───────────────────────────────────────────────────────────── */
#page-settings .settings-page-header {
  margin-bottom: var(--vc-space-4);
}

#page-settings .settings-page-icon { color: var(--vc-primary); }

#page-settings .vc-settings-tabs {
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: var(--vc-section-gap);
}

#page-settings .vc-settings-tab {
  min-height: var(--vc-input-height);
  font-weight: 700;
  letter-spacing: 0;
}

#page-settings .settings-content {
  width: 100%;
  min-width: 0;
}

#page-settings .settings-content-narrow { max-width: 720px; }
#page-settings .settings-content-wide { max-width: 920px; }

#page-settings .card.vc-card,
#page-settings .env-group-card.vc-card {
  padding: 0;
  overflow: hidden;
}

#page-settings .settings-card .card-header {
  min-height: 56px;
  border-bottom-color: var(--vc-border);
}

#page-settings .settings-card .card-body {
  padding: var(--vc-card-padding);
}

#page-settings .form-group label,
#page-settings .env-var-label {
  color: var(--vc-ink-3);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
}

#page-settings :where(
  .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  .form-group select,
  .form-group textarea,
  .env-var-input,
  .tpl-textarea
) {
  min-height: var(--vc-input-height);
  border-color: var(--vc-border-strong);
  border-radius: var(--vc-radius-card-sm);
  background: var(--bg-3, var(--vc-layer-subtle));
  color: var(--vc-ink);
  font-family: var(--vc-font);
}

#page-settings :where(
  .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  .form-group select,
  .form-group textarea,
  .env-var-input,
  .tpl-textarea
):focus {
  border-color: var(--vc-primary);
  box-shadow: var(--vc-focus-ring);
}

#page-settings .form-hint,
#page-settings .dev-flag-desc,
#page-settings .hub-subtitle,
#page-settings .hub-card-desc {
  color: var(--vc-ink-3);
  line-height: 1.5;
}

#page-settings .form-actions.vc-action-row {
  border-top-color: var(--vc-border);
}

#page-settings .settings-state {
  min-height: 150px;
  border: 1px dashed var(--vc-border-strong);
  border-radius: var(--vc-radius-card);
}

#page-settings .settings-state-icon {
  display: block;
  margin-bottom: var(--vc-space-2);
}

#page-settings .settings-panel-actions {
  margin-top: var(--vc-space-5);
}

#page-settings .dev-flag-item {
  min-height: 66px;
  border-bottom-color: var(--vc-border);
}

#page-settings .integ-card .form-row-2 > :last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
}

/* ── Inbox / Central de Mensagens ───────────────────────────────────────── */
#page-inbox .inbox-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--vc-grid-gap);
  height: calc(100vh - 140px);
  height: calc(100dvh - 140px);
  min-height: 440px;
}

#page-inbox .inbox-list {
  min-width: 0;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-card);
  background: rgba(12, 30, 52, .38);
}

#page-inbox .conv.vc-card {
  margin-bottom: 6px;
  padding: 11px 12px;
  border-color: transparent;
  border-radius: var(--vc-radius-card-sm);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

#page-inbox .conv:last-child { margin-bottom: 0; }

#page-inbox .conv:hover,
#page-inbox .conv.active {
  border-color: rgba(129, 140, 248, .34);
  background: rgba(129, 140, 248, .12);
}

#page-inbox .conv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-space-2);
}

#page-inbox .conv-nome {
  min-width: 0;
  overflow: hidden;
  color: var(--vc-ink);
  font-size: .88rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-inbox .conv-prev {
  margin-top: 3px;
  overflow: hidden;
  color: var(--vc-ink-3);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-inbox .badge-ia { flex: 0 0 auto; }
#page-inbox .badge-ia.on { color: #86efac; background: rgba(34, 197, 94, .16); }
#page-inbox .badge-ia.off { color: #cbd5e1; background: rgba(148, 163, 184, .16); }

#page-inbox .inbox-chat {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-card);
  background: rgba(8, 23, 43, .46);
}

#page-inbox .chat-head {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-space-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--vc-border);
  background: var(--vc-layer-alpha-025);
}

#page-inbox .inbox-chat-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
}

#page-inbox .inbox-chat-placeholder { color: var(--vc-ink-3); }
#page-inbox .inbox-status { margin-left: 0; }

#page-inbox .chat-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--vc-space-2);
  padding: var(--vc-space-4);
  overflow-y: auto;
  background: rgba(0, 0, 0, .12);
}

#page-inbox .bubble {
  max-width: 76%;
  padding: 9px 13px;
  border-radius: var(--vc-radius-card-sm);
  font-size: .88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#page-inbox .bubble.inb {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #2a2d3a;
}

#page-inbox .bubble.outb {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #1f6f4a;
}

#page-inbox .bubble small {
  display: block;
  margin-top: 4px;
  opacity: .64;
}

#page-inbox .chat-foot.vc-action-row {
  justify-content: stretch;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border-top: 1px solid var(--vc-border);
}

#page-inbox .chat-foot input {
  min-width: 0;
  flex: 1;
}

#page-inbox #inbox-send {
  width: var(--vc-input-height);
  min-width: var(--vc-input-height);
  padding-inline: 0;
}

#page-inbox .inbox-empty,
#page-inbox .inbox-list-state {
  min-height: 160px;
  color: var(--vc-ink-3);
}

#page-inbox .inbox-empty { height: 100%; }
#page-inbox .inbox-state-icon { font-size: 1.75rem; }

[data-theme="light"] #page-inbox .inbox-list,
[data-theme="light"] #page-inbox .inbox-chat {
  background: rgba(255, 255, 255, .74);
}

[data-theme="light"] #page-inbox .bubble.inb { color: #1f2937; background: #e8edf4; }
[data-theme="light"] #page-inbox .bubble.outb { color: var(--vc-ink-inverse); background: #18734a; }

/* ── WA Monitor ─────────────────────────────────────────────────────────── */
#page-wa-monitor .wam-header-actions {
  justify-content: flex-end;
}

#page-wa-monitor .wam-tabs {
  display: inline-flex;
  overflow: hidden;
  padding: 3px;
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-radius-btn);
  background: rgba(47, 125, 244, .055);
}

#page-wa-monitor .wam-tab {
  min-height: 38px;
  padding: 7px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vc-ink-3);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

#page-wa-monitor .wam-tab.active {
  color: var(--vc-ink-inverse);
  background: var(--vc-primary);
}

#page-wa-monitor .wam-refresh {
  min-height: 44px;
  padding-inline: 14px;
}

#page-wa-monitor .wam-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-3);
  margin-bottom: var(--vc-section-gap);
}

#page-wa-monitor .wam-summary-card {
  display: flex;
  min-width: 124px;
  align-items: center;
  gap: var(--vc-space-3);
  box-shadow: none;
}

#page-wa-monitor .wam-summary-icon { font-size: 1.1rem; }
#page-wa-monitor .wam-summary-card.is-success .wam-summary-icon { color: var(--vc-success); }
#page-wa-monitor .wam-summary-card.is-warning .wam-summary-icon { color: var(--vc-warning); }
#page-wa-monitor .wam-summary-card.is-danger .wam-summary-icon { color: var(--vc-danger); }
#page-wa-monitor .wam-summary-card.is-neutral .wam-summary-icon { color: var(--vc-ink-3); }

#page-wa-monitor .wam-summary-copy { min-width: 0; }

#page-wa-monitor .wam-summary-value {
  color: var(--vc-ink);
  font-size: 1.15rem;
  font-weight: 800;
}

#page-wa-monitor .wam-summary-label {
  color: var(--vc-ink-4);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

#page-wa-monitor .wam-table-card.card.vc-card { padding: 0; }
#page-wa-monitor .wam-recipient-column { min-width: 140px; }
#page-wa-monitor .wam-description-column { max-width: 200px; }
#page-wa-monitor .wam-actions-column { text-align: center; }

#page-wa-monitor .wam-recipient-name {
  color: var(--vc-ink);
  font-weight: 700;
}

#page-wa-monitor .wam-recipient-phone {
  color: var(--vc-ink-4);
  font-size: .72rem;
}

#page-wa-monitor .wam-source-badge { font-size: .68rem; }

#page-wa-monitor .wam-description {
  max-width: 180px;
  overflow: hidden;
  color: var(--vc-ink-3);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-wa-monitor .wam-time,
#page-wa-monitor .wam-sent-at {
  color: var(--vc-ink-4);
  font-size: .8rem;
  white-space: nowrap;
}

#page-wa-monitor .wam-sent-at.is-sent { color: var(--vc-success); }
#page-wa-monitor .wam-muted-icon { margin-right: 4px; color: currentColor; }
#page-wa-monitor .td-actions.vc-action-row { justify-content: center; }
#page-wa-monitor .action-btn.orange { color: var(--vc-warning) !important; }

#page-wa-monitor .wam-table-state {
  padding: 32px !important;
  color: var(--vc-ink-3);
  text-align: center;
}

#page-wa-monitor .wam-table-error { color: var(--vc-danger); }

#page-wa-monitor .wam-modal {
  width: min(680px, 96%);
  max-width: 680px;
}

#page-wa-monitor .wam-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-4);
}

#page-wa-monitor .wam-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-3);
  border-left: 3px solid var(--vc-primary);
  box-shadow: none;
}

#page-wa-monitor .wam-context-item {
  min-width: 160px;
  flex: 1;
}

#page-wa-monitor .wam-context-schedule {
  flex: 0 0 auto;
  text-align: right;
}

#page-wa-monitor .wam-context-label,
#page-wa-monitor .wam-field-label,
#page-wa-monitor .wam-ai-label,
#page-wa-monitor .wam-option-title {
  color: var(--vc-ink-4);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

#page-wa-monitor .wam-context-name {
  color: var(--vc-ink);
  font-size: .86rem;
  font-weight: 700;
}

#page-wa-monitor .wam-context-copy { color: var(--vc-ink-2); font-size: .82rem; }
#page-wa-monitor .wam-context-meta { color: var(--vc-ink-3); font-size: .75rem; }
#page-wa-monitor .wam-context-amount { color: var(--vc-danger); font-size: .82rem; font-weight: 700; }

#page-wa-monitor .wam-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-space-2);
  margin-bottom: 6px;
}

#page-wa-monitor .wam-loading-label,
#page-wa-monitor .wam-option-note,
#page-wa-monitor .wam-schedule-info {
  color: var(--vc-ink-4);
  font-size: .74rem;
}

#page-wa-monitor #wam-mensagem {
  width: 100%;
  min-height: 164px;
  resize: vertical;
  font: inherit;
  font-size: .84rem;
  line-height: 1.55;
}

#page-wa-monitor #wam-mensagem.is-busy { opacity: .55; }

#page-wa-monitor .wam-ai-tools {
  justify-content: flex-start;
  margin-top: var(--vc-space-2);
  padding: 8px 10px;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-card-sm);
  background: rgba(47, 125, 244, .055);
}

#page-wa-monitor .wam-ai-icon { color: var(--vc-primary); }

#page-wa-monitor .wam-tool-button,
#page-wa-monitor .wam-schedule-button {
  min-height: 36px;
  padding: 6px 10px;
  font-size: .74rem;
}

#page-wa-monitor .wam-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vc-space-3);
}

#page-wa-monitor .wam-option-card { box-shadow: none; }

#page-wa-monitor .wam-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--vc-space-2);
  color: var(--vc-ink-2);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}

#page-wa-monitor #wam-has-pdf {
  width: 18px;
  height: 18px;
  accent-color: var(--vc-primary);
}

#page-wa-monitor .wam-pdf-icon { color: var(--vc-danger); }
#page-wa-monitor .wam-option-note { margin-top: 6px; }
#page-wa-monitor .wam-option-title { margin-bottom: 6px; }

#page-wa-monitor .wam-schedule-input {
  width: 100%;
  margin-top: 6px;
}

#page-wa-monitor .wam-schedule-button { margin-top: 6px; }
#page-wa-monitor .wam-schedule-button.is-success { color: var(--vc-success); }

#page-wa-monitor .wam-modal-footer {
  align-items: center;
  flex-wrap: wrap;
}

#page-wa-monitor .wam-suspend {
  color: var(--vc-warning);
  border-color: var(--vc-warning-strong);
}

#page-wa-monitor .wam-footer-spacer { flex: 1; }

#page-wa-monitor :where(select, .vc-select) {
  min-height: var(--vc-input-height);
  border-color: var(--vc-border-strong);
  border-radius: var(--vc-radius-card-sm);
  color: var(--vc-ink);
}

/* ── Fila IA ────────────────────────────────────────────────────────────── */
#page-ia-fila .ia-fila-card.card.vc-card {
  margin-bottom: var(--vc-space-3);
  padding: var(--vc-card-padding);
}

#page-ia-fila .ia-fila-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-space-3);
  margin-bottom: var(--vc-space-3);
}

#page-ia-fila .ia-fila-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
}

#page-ia-fila .ia-fila-type {
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, .34);
  background: rgba(129, 140, 248, .12);
}

#page-ia-fila .ia-fila-client {
  min-width: 0;
  color: var(--vc-ink-2);
  font-weight: 700;
  overflow-wrap: anywhere;
}

#page-ia-fila .ia-fila-date {
  flex: 0 0 auto;
  color: var(--vc-ink-4);
  font-size: var(--vc-text-xs);
}

#page-ia-fila .ia-fila-msg {
  width: 100%;
  resize: vertical;
  background: rgba(0, 0, 0, .1);
}

#page-ia-fila .ia-fila-actions {
  margin-top: var(--vc-space-3);
}

#page-ia-fila .ia-fila-empty {
  min-height: 180px;
  border: 1px dashed var(--vc-border-strong);
  border-radius: var(--vc-radius-card);
}

#page-ia-fila .ia-fila-empty-icon {
  color: var(--vc-success);
  font-size: 2rem;
}

/* ── Painel da IA ───────────────────────────────────────────────────────── */
#page-ia-agent .ia-master-card {
  display: flex;
  align-items: center;
  gap: var(--vc-space-4);
  margin-bottom: var(--vc-section-gap);
  padding: 22px 24px;
  border-color: rgba(129, 140, 248, .35);
  background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(168, 85, 247, .1));
}

#page-ia-agent .ia-master-icon {
  flex: 0 0 auto;
  color: #818cf8;
  font-size: 30px;
}

#page-ia-agent .ia-master-info {
  min-width: 0;
  flex: 1 1 auto;
}

#page-ia-agent .ia-master-info h2 {
  margin: 0 0 4px;
  color: var(--vc-ink);
  font-size: 1.12rem;
  letter-spacing: 0;
}

#page-ia-agent .ia-master-info p {
  margin: 0;
  color: var(--vc-ink-3);
  font-size: .82rem;
}

#page-ia-agent .ia-master-status {
  margin-right: 6px;
  font-size: var(--vc-text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
}

#page-ia-agent .ia-status-on { color: var(--vc-badge-success-text); }
#page-ia-agent .ia-status-off { color: var(--vc-badge-danger-text); }

#page-ia-agent .ia-tools-help {
  margin: 6px 0 var(--vc-space-3);
  color: var(--vc-ink-3);
  font-size: .82rem;
  line-height: 1.5;
}

#page-ia-agent .ia-tool-icon {
  margin-right: 6px;
  color: #818cf8;
  font-size: .78rem;
}

#page-ia-agent .ia-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--vc-grid-gap);
}

#page-ia-agent .ia-tool-card {
  display: flex;
  align-items: flex-start;
  gap: var(--vc-space-3);
  padding: var(--vc-card-padding);
  transition: opacity .2s ease, border-color .2s ease;
}

#page-ia-agent .ia-tool-card.is-off { opacity: .55; }

#page-ia-agent .ia-tool-body {
  min-width: 0;
  flex: 1 1 auto;
}

#page-ia-agent .ia-tool-name {
  display: flex;
  align-items: center;
  gap: var(--vc-space-2);
  margin: 0 0 4px;
  color: var(--vc-ink);
  font-size: .9rem;
  font-weight: 700;
}

#page-ia-agent .ia-tool-name .ia-tool-icon { margin-right: 0; }

#page-ia-agent .ia-tool-desc {
  margin: 0;
  color: var(--vc-ink-3);
  font-size: .78rem;
  line-height: 1.5;
}

#page-ia-agent .btn-tool-config {
  min-height: 36px;
  margin-top: var(--vc-space-2);
  padding: 6px 10px;
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, .4);
  background: rgba(129, 140, 248, .12);
  font-size: .75rem;
}

#page-ia-agent .ia-disabled-note {
  display: none;
  margin: 14px 0;
  color: var(--vc-warning);
  font-size: .82rem;
}

#page-ia-agent.master-off .ia-disabled-note { display: block; }

#page-ia-agent .ia-tools-state {
  grid-column: 1 / -1;
  min-height: 160px;
  border: 1px dashed var(--vc-border-strong);
  border-radius: var(--vc-radius-card);
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase 4F - gráficos e visualização de dados
   A mesma paleta atende Chart.js, SVGs do VipTreiner e futuras .vc-chart.
   ══════════════════════════════════════════════════════════════════════════ */

.chart-container,
.vc-chart {
  position: relative;
  min-height: var(--vc-chart-min-height);
  padding: var(--vc-chart-padding);
  overflow: hidden;
  border: 1px solid var(--vc-chart-border);
  border-radius: var(--vc-chart-radius);
  background: var(--vc-chart-surface);
}

.chart-container::after,
.vc-chart::after {
  background: radial-gradient(ellipse at center, var(--vc-chart-glow), transparent 70%);
}

#page-viptrainer .vt-premium-chart,
#page-viptrainer .vt-report-chart,
#page-viptrainer .vt-report-chart-empty,
#page-viptrainer .vt-body-chart-card {
  border-color: var(--vc-chart-border);
  border-radius: var(--vc-chart-radius);
  background: var(--vc-chart-surface);
}

#page-viptrainer .vt-premium-chart-head strong,
#page-viptrainer .vt-chart-microstats strong {
  color: var(--vc-chart-tooltip-text);
}

#page-viptrainer .vt-premium-chart-head span,
#page-viptrainer .vt-chart-microstats small,
#page-viptrainer .vt-chart-ring small,
#page-viptrainer .vt-chart-legend span,
#page-viptrainer .vt-chart-empty,
#page-viptrainer .vt-chart-empty-state small {
  color: var(--vc-chart-legend);
}

#page-viptrainer .vt-mini-chart .vt-chart-grid-line { stroke: var(--vc-chart-grid); }

#page-viptrainer .vt-mini-chart .vt-chart-area {
  fill: var(--vc-chart-series-1-fill);
  opacity: 1;
}

#page-viptrainer .vt-mini-chart .vt-chart-line {
  stroke: var(--vt-chart-stroke, var(--vc-chart-series-1));
  stroke-width: var(--vc-chart-line-width);
}

#page-viptrainer .vt-mini-chart .vt-chart-point {
  fill: var(--vc-chart-tooltip-text);
  stroke: var(--vc-chart-series-1);
}

#page-viptrainer .vt-mini-chart .vt-chart-bar { fill: var(--vc-chart-series-1); }
#page-viptrainer .vt-mini-chart .vt-chart-bar.skipped { fill: var(--vc-chart-series-5); }
#page-viptrainer .vt-mini-chart .vt-chart-axis-label { fill: var(--vc-chart-axis); }
#page-viptrainer .vt-chart-legend i.is-done { background: var(--vc-chart-series-1); }
#page-viptrainer .vt-chart-legend i.is-skipped { background: var(--vc-chart-series-5); }

#page-viptrainer .vt-report-chart polyline,
#page-viptrainer .vt-body-chart-svg .vt-chart-line {
  stroke: var(--vc-chart-series-6);
  stroke-width: var(--vc-chart-line-width);
}

#page-viptrainer .vt-body-chart-svg .vt-chart-point {
  fill: var(--vc-chart-series-4);
  stroke: var(--vc-chart-surface);
}

#page-viptrainer .vt-chart-empty-state {
  border-color: var(--vc-chart-border);
  border-radius: var(--vc-chart-radius);
  background: var(--vc-chart-surface);
}

/* Fase 9B: overrides persistentes do Editor Visual por pagina. */
html[data-vc-page-overrides="true"]:not([data-vc-embedded-page]) .page.active :is(.vc-page-header, .page-header, .section-header, .settings-page-header),
html[data-vc-page-overrides="true"][data-vc-embedded-page] body :is(.vc-page-header, .page-header, .section-header, .settings-page-header) {
  background-color: var(--page-header-bg, transparent);
  color: var(--page-header-color, var(--vc-page-title-color));
}

html[data-vc-page-overrides="true"]:not([data-vc-embedded-page]) .page.active :is(.vc-page-title, .page-title, .page-header h1, .page-header h2, .section-header h1, .section-header h2),
html[data-vc-page-overrides="true"][data-vc-embedded-page] body :is(.vc-page-title, .page-title, .page-header h1, .page-header h2, .section-header h1, .section-header h2) {
  color: var(--page-header-color, var(--vc-page-title-color));
  font-size: var(--page-title-size, var(--vc-page-title-size));
}

html[data-vc-page-overrides="true"]:not([data-vc-embedded-page]) .page.active :is(table, .vc-table) thead th,
html[data-vc-page-overrides="true"][data-vc-embedded-page] body :is(table, .vc-table) thead th {
  background: var(--page-table-header-bg, var(--vc-table-header-bg));
}

html[data-vc-page-table-density="compact"]:not([data-vc-embedded-page]) .page.active :is(table, .vc-table) :is(th, td),
html[data-vc-page-table-density="compact"][data-vc-embedded-page] body :is(table, .vc-table) :is(th, td) {
  padding-block: 6px;
}

html[data-vc-page-table-density="spacious"]:not([data-vc-embedded-page]) .page.active :is(table, .vc-table) :is(th, td),
html[data-vc-page-table-density="spacious"][data-vc-embedded-page] body :is(table, .vc-table) :is(th, td) {
  padding-block: 16px;
}

html[data-vc-page-animations="false"]:not([data-vc-embedded-page]) .page.active *,
html[data-vc-page-animations="false"][data-vc-embedded-page] body * {
  animation: none;
  transition-duration: 0ms;
  scroll-behavior: auto;
}