/* Ponte visual para as telas estáticas: Mutual Design System 4.1.1.
   Fonte: Mutual-Capital/mutual-design-system@b368db412edb6a92c1f74da5917f45d45f230b2b.
   A cor própria de cada organização continua configurável no backoffice. */
:root {
  --visual-navy: #232f63;
  --visual-navy-deep: #0c1220;
  --visual-navy-soft: #263956;
  --visual-amber: #fcb71b;
  --visual-amber-soft: #fff3cc;
  --visual-canvas: #f6f7fb;
  --visual-surface: #ffffff;
  --visual-border: #526784;
  --visual-text: #182443;
  --visual-muted: #65718b;
  --visual-radius: 12px;
  --visual-focus: #bb7700;
  font-family: Inter, "Avenir Next", system-ui, sans-serif;
}

:focus-visible {
  outline: 3px solid var(--visual-focus);
  outline-offset: 2px;
}

.demo-page,
.backoffice-page {
  font-family: Inter, "Avenir Next", system-ui, sans-serif;
}

.demo-page :focus-visible,
.backoffice-page :focus-visible {
  outline: 3px solid var(--visual-focus);
  outline-offset: 2px;
}

/* O aplicativo de demonstração usa a versão escura do mesmo vocabulário. */
.demo-page {
  color: #f4f6ff;
  background: radial-gradient(circle at 85% 0, #232f63 0, transparent 33%), var(--visual-navy-deep);
}
.demo-page .header { border-color: #526784; }
.demo-page .logo-symbol,
.demo-page .chat-avatar {
  background: var(--visual-amber);
  color: var(--visual-navy-deep);
}
.demo-page .logo small,
.demo-page .eyebrow,
.demo-page h1 em,
.demo-page .amount-control span,
.demo-page .empty-symbol {
  color: var(--visual-amber);
}
.demo-page .environment,
.demo-page .badge {
  border-color: #526784;
  background: #1b2a46;
  color: var(--visual-amber);
}
.demo-page .hero-note,
.demo-page .panel,
.demo-page .chat-bar,
.demo-page .chat-compose {
  background: #111d35;
  border-color: #526784;
}
.demo-page .panel { box-shadow: 0 16px 48px #080d2a66; }
.demo-page .panel-title > span:first-child,
.demo-page .channel-tabs .selected,
.demo-page .steps li.done {
  background: #1b2a46;
  color: var(--visual-amber);
  border-color: var(--visual-amber);
}
.demo-page .primary,
.demo-page .chat-compose button {
  color: var(--visual-navy-deep);
  background: var(--visual-amber);
}
.demo-page .secondary,
.demo-page .chat-actions button {
  color: #ffffff;
  background: #232f63;
  border-color: #526784;
}
.demo-page .amount-control,
.demo-page .chat-messages,
.demo-page .chat-compose input,
.demo-page .steps li,
.demo-page .operation-grid > div {
  background: #0e162e;
  border-color: #526784;
}
.demo-page .amount-control:focus-within {
  border-color: var(--visual-amber);
  box-shadow: 0 0 0 3px #fbbf2440;
}
.demo-page .price-card,
.demo-page .price-card.sale {
  background: linear-gradient(145deg, #111d35, #0e162e);
  border-color: #526784;
}
.demo-page .price-card.sale { background: linear-gradient(145deg, #1b2a46, #0e162e); }
.demo-page .bubble { background: #1b2a46; }
.demo-page .bubble.mine { background: #263956; }

/* O backoffice conserva a cor configurada de cada tenant na prévia da marca. */
.backoffice-page { background: var(--visual-navy-deep); color: var(--visual-text); }
.backoffice-page .login-screen { background: radial-gradient(circle at 75% 20%, #33447e 0, transparent 38%), var(--visual-navy-deep); }
.backoffice-page .sidebar { background: var(--visual-navy-deep); }
.backoffice-page .main-column { background: var(--visual-canvas); }
.backoffice-page .topbar,
.backoffice-page .panel,
.backoffice-page .metric,
.backoffice-page .login-panel { background: var(--visual-surface); border-color: var(--visual-border); }
.backoffice-page .brand-symbol {
  background: var(--visual-amber);
  color: var(--visual-navy-deep);
  box-shadow: 0 5px 14px #080d2a33;
}
.backoffice-page .sidebar-brand small,
.backoffice-page .context-label,
.backoffice-page .eyebrow,
.backoffice-page .nav-item.active span { color: var(--visual-amber); }
.backoffice-page .nav-item.active {
  background: #344477;
  box-shadow: inset 3px 0 var(--visual-amber);
}
.backoffice-page .metric { border-top-color: var(--visual-amber); }
.backoffice-page .metric strong,
.backoffice-page .status-item strong,
.backoffice-page .page-heading h1 { color: var(--visual-navy); }
.backoffice-page .form-grid > button,
.backoffice-page .inline-form > button,
.backoffice-page #features-form > button,
.backoffice-page .login-panel button,
.backoffice-page .button-row button:first-child {
  background: var(--visual-navy);
  color: #fff;
}
.backoffice-page .form-grid > button:hover,
.backoffice-page .inline-form > button:hover,
.backoffice-page #features-form > button:hover,
.backoffice-page .login-panel button:hover,
.backoffice-page .button-row button:first-child:hover { background: var(--visual-navy-soft); }
.backoffice-page input:focus,
.backoffice-page select:focus,
.backoffice-page button:focus-visible { outline: 3px solid var(--visual-focus); }
.backoffice-page .text-link { color: #8b5700; }