/*
 * Atlas Core CRM — tema unificado
 *
 * Esta folha deve ser carregada depois de app.css, premium-system.css e
 * atlas-experience.css. Ela padroniza cores e acabamento sem alterar a
 * estrutura funcional dos módulos.
 */

/* ==========================================================================
   1. Tokens compartilhados e pontes para as variáveis legadas
   ========================================================================== */

:root,
html[data-appearance="claro"],
html[data-appearance="system"] {
  color-scheme: light;

  --crm-page: #ffffff;
  --crm-surface: #ffffff;
  --crm-surface-raised: #ffffff;
  --crm-surface-soft: #ffffff;
  --crm-surface-hover: #f1f7ff;
  --crm-border: #dbe5f0;
  --crm-border-strong: #c5d3e3;
  --crm-text: #102033;
  --crm-text-soft: #33465d;
  --crm-muted: #66768a;
  --crm-primary: #2563eb;
  --crm-primary-hover: #1d4ed8;
  --crm-primary-soft: #edf5ff;
  --crm-accent: #67e8f9;
  --crm-success: #15803d;
  --crm-success-soft: #effcf3;
  --crm-warning: #b45309;
  --crm-warning-soft: #fff9eb;
  --crm-danger: #c62828;
  --crm-danger-soft: #fff2f2;
  --crm-info-soft: #eff8ff;
  --crm-overlay: rgba(15, 31, 51, .46);
  --crm-shadow-xs: 0 1px 2px rgba(30, 64, 101, .05);
  --crm-shadow-sm: 0 5px 18px rgba(30, 64, 101, .07);
  --crm-shadow-md: 0 16px 40px rgba(30, 64, 101, .1);
  --crm-shadow-lg: 0 28px 72px rgba(30, 64, 101, .16);
  --crm-radius-sm: 9px;
  --crm-radius: 13px;
  --crm-radius-lg: 18px;
  --crm-control-height: 44px;
  --crm-focus: 0 0 0 3px rgba(37, 99, 235, .16);

  /* Premium System */
  --premium-bg: var(--crm-page);
  --premium-surface: var(--crm-surface);
  --premium-surface-muted: var(--crm-surface-soft);
  --premium-surface-hover: var(--crm-surface-hover);
  --premium-sidebar: var(--crm-surface);
  --premium-border: var(--crm-border);
  --premium-border-strong: var(--crm-border-strong);
  --premium-text: var(--crm-text);
  --premium-text-soft: var(--crm-text-soft);
  --premium-muted: var(--crm-muted);
  --premium-primary: var(--crm-primary);
  --premium-primary-hover: var(--crm-primary-hover);
  --premium-primary-soft: var(--crm-primary-soft);
  --premium-success: var(--crm-success);
  --premium-success-soft: var(--crm-success-soft);
  --premium-danger: var(--crm-danger);
  --premium-danger-soft: var(--crm-danger-soft);
  --premium-warning: var(--crm-warning);
  --premium-warning-soft: var(--crm-warning-soft);
  --premium-shadow-xs: var(--crm-shadow-xs);
  --premium-shadow-sm: var(--crm-shadow-sm);
  --premium-shadow-md: var(--crm-shadow-md);
  --premium-radius-sm: var(--crm-radius-sm);
  --premium-radius: var(--crm-radius);
  --premium-radius-lg: var(--crm-radius-lg);
  --premium-control-height: var(--crm-control-height);

  /* app.css */
  --bg: var(--crm-page);
  --bg-soft: var(--crm-surface-soft);
  --bg-panel: var(--crm-surface);
  --line: var(--crm-border);
  --line-strong: var(--crm-border-strong);
  --text: var(--crm-text);
  --text-default: var(--crm-text);
  --text-title: var(--crm-text);
  --text-muted: var(--crm-muted);
  --muted: var(--crm-muted);
  --accent: #67e8f9;
  --accent-dark: var(--crm-primary-soft);
  --success: var(--crm-success);
  --danger: var(--crm-danger);
  --sidebar-bg: var(--crm-surface);
  --sidebar-text: var(--crm-text);
  --sidebar-link: var(--crm-muted);
  --sidebar-link-hover: var(--crm-primary);
  --topbar-bg: rgba(255, 255, 255, .96);
  --topbar-text: var(--crm-text);
  --card-bg: var(--crm-surface);
  --card-shadow: var(--crm-shadow-sm);
  --input-bg: var(--crm-surface);
  --input-text: var(--crm-text);
  --button-secondary-bg: var(--crm-surface);
  --button-secondary-text: var(--crm-text-soft);
  --surface-soft: var(--crm-surface-soft);
  --surface-border: var(--crm-border);
  --page-glow-1: transparent;
  --page-glow-2: transparent;
  --page-glow-3: transparent;
  --radius-card: var(--crm-radius-lg);
  --radius-control: var(--crm-radius);
  --scrollbar-track: #f2f7fc;
  --scrollbar-thumb: #b7c8da;
  --scrollbar-thumb-hover: #91a7be;

  /* Atlas Experience */
  --ax-surface: var(--crm-surface);
  --ax-surface-raised: var(--crm-surface-raised);
  --ax-border: var(--crm-border);
  --ax-border-strong: var(--crm-border-strong);
  --ax-accent: var(--crm-primary);
  --ax-muted: var(--crm-muted);
  --ax-radius: var(--crm-radius);
  --ax-shadow: var(--crm-shadow-sm);
  --ax-focus: var(--crm-focus);
}

/* Portal do Cliente: a paleta definida pela empresa controla toda a experiência. */
.auth-body.portal-branded {
  color: var(--portal-text);
}

.auth-body.portal-branded .atlas-auth-shell {
  border-color: var(--portal-border) !important;
  background: var(--portal-surface) !important;
  color: var(--portal-text) !important;
}

.auth-body.portal-branded .atlas-auth-content {
  background: var(--portal-surface) !important;
}

.auth-body.portal-branded .atlas-auth-visual {
  border-color: var(--portal-border) !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--portal-primary) 24%, var(--portal-card)), color-mix(in srgb, var(--portal-secondary) 20%, var(--portal-surface))) !important;
}

.auth-body.portal-branded .atlas-auth-visual > div:last-child strong,
.auth-body.portal-branded .client-portal-login-card h1,
.auth-body.portal-branded .client-portal-company-identity strong,
.auth-body.portal-branded .label {
  color: var(--portal-text) !important;
}

.auth-body.portal-branded .atlas-auth-visual > div:last-child p,
.auth-body.portal-branded .client-portal-login-card > p,
.auth-body.portal-branded .client-portal-login-note,
.auth-body.portal-branded .client-portal-login-divider {
  color: var(--portal-muted) !important;
}

.auth-body.portal-branded .atlas-auth-mockup,
.auth-body.portal-branded .atlas-auth-mockup-metrics > div {
  border-color: var(--portal-border) !important;
  background: color-mix(in srgb, var(--portal-card) 92%, transparent) !important;
}

.auth-body.portal-branded .atlas-auth-mockup-chart .mockup-line {
  stroke: var(--portal-accent) !important;
}

.auth-body.portal-branded .input,
.auth-body.portal-branded select.input {
  border-color: var(--portal-border) !important;
  background: var(--portal-input) !important;
  color: var(--portal-text) !important;
}

.auth-body.portal-branded .input::placeholder {
  color: color-mix(in srgb, var(--portal-muted) 78%, transparent) !important;
}

.auth-body.portal-branded .client-portal-login-help,
.auth-body.portal-branded .client-portal-provider {
  border-color: var(--portal-border) !important;
  background: var(--portal-card) !important;
  color: var(--portal-text) !important;
}

.auth-body.portal-branded .client-portal-login-divider::before,
.auth-body.portal-branded .client-portal-login-divider::after {
  background: var(--portal-border) !important;
}

.auth-body.portal-branded .client-portal-provider b,
.auth-body.portal-branded .client-portal-password-input button {
  color: var(--portal-accent) !important;
}

.auth-body.portal-branded .atlas-auth-theme-toggle {
  border-color: var(--portal-border) !important;
  background: var(--portal-card) !important;
  color: var(--portal-text) !important;
}

.auth-body.portal-branded .btn-primary {
  border-color: color-mix(in srgb, var(--portal-primary) 60%, var(--portal-border)) !important;
  background: linear-gradient(135deg, var(--portal-primary), var(--portal-secondary)) !important;
  color: var(--portal-button-text) !important;
}

.auth-body.portal-branded .brand-logo--auth {
  width: auto;
  max-width: min(260px, 78%);
  height: auto;
  max-height: 86px;
  object-fit: contain;
}

.client-portal-body {
  color: var(--portal-text) !important;
}

.client-portal-body .client-portal-sidebar,
.client-portal-body .client-portal-topbar {
  border-color: var(--portal-border) !important;
  background: color-mix(in srgb, var(--portal-surface) 96%, transparent) !important;
}

.client-portal-body .client-portal-hero,
.client-portal-body .client-portal-panel,
.client-portal-body .client-portal-team-strip,
.client-portal-body .client-portal-metrics article,
.client-portal-body .client-portal-highlight,
.client-portal-body .client-portal-help,
.client-portal-body .client-portal-chat-window,
.client-portal-body .client-portal-quick-access,
.client-portal-body .client-portal-next-panel {
  border-color: var(--portal-border) !important;
  background: color-mix(in srgb, var(--portal-surface) 96%, transparent) !important;
  color: var(--portal-text) !important;
}

.client-portal-body .client-portal-item-card,
.client-portal-body .client-portal-proposal-card,
.client-portal-body .client-portal-document-list article,
.client-portal-body .client-portal-data-grid article,
.client-portal-body .client-portal-meeting-form,
.client-portal-body .client-portal-meeting-history,
.client-portal-body .client-portal-meeting-history > article,
.client-portal-body .client-portal-team-members article,
.client-portal-body .quick-access-grid > a,
.client-portal-body .next-step-list > a,
.client-portal-body .next-step-done,
.client-portal-body .client-portal-chat-message > div,
.client-portal-body .client-portal-chat-heading,
.client-portal-body .client-portal-chat-compose {
  border-color: var(--portal-border) !important;
  background: var(--portal-card) !important;
}

.client-portal-body :is(h1,h2,h3,strong,.item-title-row strong,.item-value strong,.proposal-value strong),
.client-portal-body .client-portal-topbar > div:first-of-type strong,
.client-portal-body .client-portal-mini-profile strong,
.client-portal-body .client-portal-top-profile strong {
  color: var(--portal-text) !important;
}

.client-portal-body :is(p,small,time,.client-portal-nav a,.client-portal-team-members small,.client-portal-online),
.client-portal-body .client-portal-hero p,
.client-portal-body .client-portal-panel header p {
  color: var(--portal-muted) !important;
}

.client-portal-body .client-portal-nav a:hover,
.client-portal-body .client-portal-nav a.is-active {
  color: var(--portal-accent) !important;
  background: color-mix(in srgb, var(--portal-primary) 17%, var(--portal-card)) !important;
}

.client-portal-body .client-portal-button.is-primary,
.client-portal-body .client-portal-chat-compose button {
  background: linear-gradient(135deg, var(--portal-primary), var(--portal-secondary)) !important;
  color: var(--portal-button-text) !important;
}

.client-portal-body .client-portal-button.is-ghost,
.client-portal-body .client-portal-theme-toggle,
.client-portal-body .client-portal-file {
  border-color: var(--portal-border) !important;
  background: var(--portal-card) !important;
  color: var(--portal-text) !important;
}

.client-portal-body :is(input,select,textarea),
.client-portal-body .client-portal-upload select,
.client-portal-body .client-portal-meeting-form input,
.client-portal-body .client-portal-meeting-form select,
.client-portal-body .client-portal-meeting-form textarea,
.client-portal-body .client-portal-chat-compose textarea,
.client-portal-body .client-portal-password-form input {
  border-color: var(--portal-border) !important;
  background: var(--portal-input) !important;
  color: var(--portal-text) !important;
}

.client-portal-body :is(input,textarea)::placeholder {
  color: color-mix(in srgb, var(--portal-muted) 76%, transparent) !important;
}

.client-portal-body .client-portal-brand .portal-company-logo {
  width: auto;
  max-width: 176px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.client-portal-body .client-portal-upload-workspace {
  position: relative;
  margin-top: 0;
  border: 1px dashed color-mix(in srgb, var(--portal-primary) 60%, var(--portal-border)) !important;
  background: color-mix(in srgb, var(--portal-primary) 8%, var(--portal-card)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--portal-primary) 7%, transparent);
}

.client-portal-body .client-portal-upload-workspace strong {
  color: var(--portal-text) !important;
}

.client-portal-body .client-portal-upload-workspace p,
.client-portal-body .client-portal-upload-help {
  color: var(--portal-muted) !important;
}

.client-portal-body .client-portal-upload-help {
  grid-column: 1 / -1;
  font-size: 11px;
}

.client-portal-body .client-document-origin {
  display: inline-flex;
  width: max-content;
  margin-top: 6px;
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--portal-primary) 13%, var(--portal-card));
  color: var(--portal-primary);
  font-size: 10px;
  font-weight: 850;
}

.client-portal-body .client-document-origin.is-client {
  background: color-mix(in srgb, var(--portal-accent) 15%, var(--portal-card));
  color: var(--portal-accent);
}

html[data-appearance="escuro"] {
  color-scheme: dark;

  --crm-page: #080d16;
  --crm-surface: #0f1724;
  --crm-surface-raised: #141f2f;
  --crm-surface-soft: #111c2b;
  --crm-surface-hover: #182538;
  --crm-border: #26364a;
  --crm-border-strong: #3a506b;
  --crm-text: #f4f8fc;
  --crm-text-soft: #d8e2ed;
  --crm-muted: #9aabc0;
  --crm-primary: #60a5fa;
  --crm-primary-hover: #93c5fd;
  --crm-primary-soft: rgba(59, 130, 246, .15);
  --crm-accent: #67e8f9;
  --crm-success: #4ade80;
  --crm-success-soft: rgba(34, 197, 94, .12);
  --crm-warning: #fbbf24;
  --crm-warning-soft: rgba(245, 158, 11, .12);
  --crm-danger: #fb7185;
  --crm-danger-soft: rgba(244, 63, 94, .12);
  --crm-info-soft: rgba(56, 189, 248, .11);
  --crm-overlay: rgba(1, 5, 13, .72);
  --crm-shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);
  --crm-shadow-sm: 0 7px 22px rgba(0, 0, 0, .2);
  --crm-shadow-md: 0 18px 46px rgba(0, 0, 0, .28);
  --crm-shadow-lg: 0 30px 80px rgba(0, 0, 0, .42);
  --crm-focus: 0 0 0 3px rgba(96, 165, 250, .22);

  --premium-bg: var(--crm-page);
  --premium-surface: var(--crm-surface);
  --premium-surface-muted: var(--crm-surface-soft);
  --premium-surface-hover: var(--crm-surface-hover);
  --premium-sidebar: #0b121e;
  --premium-border: var(--crm-border);
  --premium-border-strong: var(--crm-border-strong);
  --premium-text: var(--crm-text);
  --premium-text-soft: var(--crm-text-soft);
  --premium-muted: var(--crm-muted);
  --premium-primary: var(--crm-primary);
  --premium-primary-hover: var(--crm-primary-hover);
  --premium-primary-soft: var(--crm-primary-soft);
  --premium-success: var(--crm-success);
  --premium-success-soft: var(--crm-success-soft);
  --premium-danger: var(--crm-danger);
  --premium-danger-soft: var(--crm-danger-soft);
  --premium-warning: var(--crm-warning);
  --premium-warning-soft: var(--crm-warning-soft);
  --premium-shadow-xs: var(--crm-shadow-xs);
  --premium-shadow-sm: var(--crm-shadow-sm);
  --premium-shadow-md: var(--crm-shadow-md);

  --bg: var(--crm-page);
  --bg-soft: var(--crm-surface-soft);
  --bg-panel: var(--crm-surface);
  --line: var(--crm-border);
  --line-strong: var(--crm-border-strong);
  --text: var(--crm-text);
  --text-default: var(--crm-text);
  --text-title: var(--crm-text);
  --text-muted: var(--crm-muted);
  --muted: var(--crm-muted);
  --accent: #67e8f9;
  --accent-dark: var(--crm-primary-soft);
  --success: var(--crm-success);
  --danger: var(--crm-danger);
  --sidebar-bg: #0b121e;
  --sidebar-text: var(--crm-text);
  --sidebar-link: var(--crm-muted);
  --sidebar-link-hover: var(--crm-text);
  --topbar-bg: rgba(11, 18, 30, .96);
  --topbar-text: var(--crm-text);
  --card-bg: var(--crm-surface);
  --card-shadow: var(--crm-shadow-sm);
  --input-bg: var(--crm-surface-soft);
  --input-text: var(--crm-text);
  --button-secondary-bg: var(--crm-surface-soft);
  --button-secondary-text: var(--crm-text-soft);
  --surface-soft: var(--crm-surface-soft);
  --surface-border: var(--crm-border);
  --page-glow-1: transparent;
  --page-glow-2: transparent;
  --page-glow-3: transparent;
  --scrollbar-track: #0c1421;
  --scrollbar-thumb: #344a63;
  --scrollbar-thumb-hover: #496581;

  --ax-surface: var(--crm-surface);
  --ax-surface-raised: var(--crm-surface-raised);
  --ax-border: var(--crm-border);
  --ax-border-strong: var(--crm-border-strong);
  --ax-accent: var(--crm-primary);
  --ax-muted: var(--crm-muted);
  --ax-shadow: var(--crm-shadow-sm);
  --ax-focus: var(--crm-focus);
}

/* ==========================================================================
   2. Base, shell principal e navegação
   ========================================================================== */

html {
  background: var(--crm-page);
}

body {
  color: var(--crm-text);
  background: var(--crm-page) !important;
}

body.main-body,
body.main-body .layout,
body.main-body .layout > .flex.flex-col {
  color: var(--crm-text);
  background-color: var(--crm-page);
}

body.main-body .layout > .flex.flex-col {
  background: var(--crm-page) !important;
  background-image: none !important;
}

body.main-body .dashboard-animated-background {
  display: none !important;
}

body.main-body .layout {
  grid-template-columns: 276px minmax(0, 1fr);
}

body.main-body .sidebar {
  color: var(--crm-text);
  background: var(--premium-sidebar) !important;
  border-right: 1px solid var(--crm-border);
  box-shadow: none;
}

body.main-body .sidebar-brand {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.main-body .sidebar-collapse-button {
  color: var(--crm-muted);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.main-body .sidebar-collapse-button:hover {
  color: var(--crm-primary);
  border-color: var(--crm-border-strong);
  background: var(--crm-primary-soft);
  box-shadow: var(--crm-shadow-sm);
}

body.main-body .sidebar :is(.nav-link, .nav-sublink) {
  color: var(--crm-muted);
  border-color: transparent;
  background: transparent;
  text-decoration: none;
}

body.main-body .sidebar :is(.nav-link, .nav-sublink):hover {
  color: var(--crm-text);
  border-color: transparent;
  background: var(--crm-surface-hover);
  box-shadow: none;
  transform: none;
}

body.main-body .sidebar :is(.nav-link, .nav-sublink).active,
body.main-body .sidebar :is(.nav-link, .nav-sublink).is-active {
  color: var(--crm-primary);
  border-color: color-mix(in srgb, var(--crm-primary) 20%, var(--crm-border));
  background: var(--crm-primary-soft);
  box-shadow: inset 3px 0 0 var(--crm-primary);
  transform: none;
}

body.main-body :is(.nav-group-icon, .nav-item-icon) {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: currentColor;
}

body.main-body :is(.nav-group-icon, .nav-item-icon) svg {
  display: block;
  fill: none;
  stroke: currentColor;
}

body.main-body .nav-badge {
  color: var(--crm-primary);
  background: var(--crm-primary-soft);
  border: 1px solid color-mix(in srgb, var(--crm-primary) 20%, transparent);
}

body.main-body .topbar {
  color: var(--crm-text);
  border: 0;
  border-bottom: 1px solid var(--crm-border);
  background: var(--topbar-bg);
  box-shadow: 0 5px 18px rgba(30, 64, 101, .055);
  backdrop-filter: blur(18px) saturate(140%);
}

html[data-appearance="escuro"] body.main-body .topbar {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

body.main-body .topbar-module-visual {
  display: none;
}

body.main-body .topbar-page-heading {
  grid-template-columns: minmax(0, 1fr);
}

body.main-body :is(.topbar-page-title, .topbar-user-name) {
  color: var(--crm-text);
}

body.main-body .topbar-page-context {
  color: var(--crm-muted);
}

body.main-body :is(
  .atlas-theme-toggle,
  .mail-btn,
  .notif-bell-btn,
  .logout-btn,
  .search-icon-btn
) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(
  .atlas-theme-toggle,
  .mail-btn,
  .notif-bell-btn,
  .logout-btn,
  .search-icon-btn
):hover {
  color: var(--crm-primary);
  border-color: var(--crm-border-strong);
  background: var(--crm-primary-soft);
  box-shadow: var(--crm-shadow-sm);
}

body.main-body #globalSearchResults,
body.main-body .notifications-panel {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-raised);
  box-shadow: var(--crm-shadow-lg);
}

body.main-body .notifications-panel-head {
  border-bottom-color: var(--crm-border);
}

body.main-body .atlas-page-stage,
body.main-body .layout main {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

/* ==========================================================================
   3. Tipografia, links, cartões e superfícies
   ========================================================================== */

body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--crm-text);
}

body.main-body main :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

body.main-body main :is(p, small, .muted, .meeting-muted) {
  text-wrap: pretty;
}

body.main-body main a:not([class*="btn"]):not([class*="button"]):not(.nav-link):not(.nav-sublink) {
  text-underline-offset: 3px;
}

body.main-body main a:not([class*="btn"]):not([class*="button"]):not(.nav-link):not(.nav-sublink):hover {
  color: var(--crm-primary);
}

body.main-body :is(
  .text-slate-300,
  .text-slate-400,
  .text-slate-500,
  .text-slate-600,
  .meeting-muted,
  .muted
) {
  color: var(--crm-muted) !important;
}

body.main-body :is(.text-slate-50, .text-slate-100, .text-slate-200) {
  color: var(--crm-text-soft) !important;
}

body.main-body :is(.bg-white, .bg-slate-50, .bg-slate-100) {
  background-color: var(--crm-surface) !important;
}

body.main-body .bg-slate-200 {
  background-color: var(--crm-primary-soft) !important;
}

body.main-body :is(.border-slate-100, .border-slate-200, .border-slate-300) {
  border-color: var(--crm-border) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"])
body.main-body [class~="bg-white/5"] {
  background: #ffffff !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"])
body.main-body [class~="border-white/10"] {
  border-color: var(--crm-border) !important;
}

/* Utilitários Tailwind escuros usados nas automações devem seguir o tema. */
body.main-body :is(
  [class~="bg-slate-900/40"],
  [class~="bg-slate-900/70"],
  [class~="bg-slate-950/40"]
) {
  background-color: var(--crm-surface) !important;
}

body.main-body :is(
  [class~="border-slate-700"],
  [class~="border-slate-700/50"],
  [class~="border-slate-700/60"],
  [class~="border-slate-700/70"],
  [class~="border-slate-800/60"]
) {
  border-color: var(--crm-border) !important;
}

body.main-body .automation-variables,
body.main-body .automation-variable-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

body.main-body .automation-variable-list {
  flex: 1 1 320px;
}

body.main-body .automation-variable-list code {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  border: 1px solid color-mix(in srgb, var(--crm-primary) 22%, var(--crm-border));
  border-radius: 7px;
  padding: 3px 7px;
  color: var(--crm-primary);
  background: var(--crm-primary-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Status administrativos: contraste consistente em claro e escuro. */
body.main-body .admin-pill {
  color: var(--crm-text-soft) !important;
  border: 1px solid var(--crm-border);
  background: var(--crm-surface-soft) !important;
}

body.main-body .admin-pill:is(
  .status-active,
  .status-completed,
  .status-received,
  .status-in_use
) {
  color: var(--crm-success) !important;
  border-color: color-mix(in srgb, var(--crm-success) 30%, var(--crm-border));
  background: var(--crm-success-soft) !important;
}

body.main-body .admin-pill:is(
  .status-open,
  .status-requested,
  .status-available,
  .status-draft,
  .status-scheduled,
  .status-in_progress,
  .status-approved,
  .status-ordered
) {
  color: var(--crm-primary) !important;
  border-color: color-mix(in srgb, var(--crm-primary) 30%, var(--crm-border));
  background: var(--crm-primary-soft) !important;
}

body.main-body .admin-pill:is(
  .status-waiting,
  .status-maintenance,
  .status-renewal,
  .status-suspended,
  .priority-high
) {
  color: var(--crm-warning) !important;
  border-color: color-mix(in srgb, var(--crm-warning) 30%, var(--crm-border));
  background: var(--crm-warning-soft) !important;
}

body.main-body .admin-pill:is(
  .status-cancelled,
  .status-blocked,
  .status-lost,
  .status-expired,
  .priority-critical
) {
  color: var(--crm-danger) !important;
  border-color: color-mix(in srgb, var(--crm-danger) 30%, var(--crm-border));
  background: var(--crm-danger-soft) !important;
}

body.main-body :is(
  .card,
  .panel,
  .content-card,
  .dashboard-card,
  .metric-card,
  .stat-card,
  .table-card,
  .settings-card,
  .form-card,
  .commercial-card,
  .profile-panel,
  .notification-card,
  .meeting-card,
  .settings-toggle-card,
  .settings-department-card,
  .client-cleanup-card,
  .support-module-card,
  .support-admin-diag-card,
  .kanban-summary-card,
  .kanban-display-card,
  .attendance-summary-card
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-sm);
  backdrop-filter: none;
}

body.main-body :is(
  .card,
  .panel,
  .content-card,
  .dashboard-card,
  .metric-card,
  .stat-card,
  .table-card,
  .settings-card,
  .form-card,
  .commercial-card,
  .profile-panel,
  .notification-card,
  .meeting-card,
  .settings-toggle-card,
  .settings-department-card,
  .client-cleanup-card,
  .support-module-card,
  .support-admin-diag-card,
  .kanban-summary-card,
  .kanban-display-card,
  .attendance-summary-card
):hover {
  border-color: var(--crm-border-strong);
  box-shadow: var(--crm-shadow-md);
  transform: translateY(-1px);
}

body.main-body :is(
  .dashboard-metric-card,
  .finance-stat-card,
  .inventory-stat-card,
  .pos-stat-card,
  .cs-stat,
  .cp-stat,
  .support-admin-stat,
  .premium-stat
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(
  .dashboard-hero,
  .page-hero,
  .service-page-hero,
  .admin-hero,
  .contracts-hero,
  .pieces-hero,
  .process-analysis-hero,
  .legal-cost-hero,
  .monitor-hero,
  .deadline-hero,
  .summary-history-hero,
  .finance-hero,
  .inventory-hero,
  .products-hero,
  .pos-hero,
  .documents-hero,
  .ranking-hero,
  .cs-hero,
  .cp-hero,
  .adm-task-hero,
  .hrm-hero,
  .comx-hero,
  .recruitment-admin-hero,
  .recruitment-modern-hero
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  background-image: none;
  box-shadow: var(--crm-shadow-sm), inset 0 3px 0 var(--crm-primary);
}

/* app.css mantém alguns heróis com fundos !important; esta é a neutralização
   intencional para garantir superfície branca no claro e sólida no escuro. */
:is(html[data-appearance="claro"], html[data-appearance="system"])
body.main-body main :is(.dashboard-hero, [class$="-hero"]) {
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: var(--crm-shadow-sm), inset 0 3px 0 var(--crm-primary) !important;
}

html[data-appearance="escuro"]
body.main-body main :is(.dashboard-hero, [class$="-hero"]) {
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  background: var(--crm-surface) !important;
  background-image: none !important;
  box-shadow: var(--crm-shadow-sm), inset 0 3px 0 var(--crm-primary) !important;
}

body.main-body :is(
  .dashboard-hero,
  .page-hero,
  .service-page-hero,
  .admin-hero,
  .contracts-hero,
  .pieces-hero,
  .process-analysis-hero,
  .legal-cost-hero,
  .monitor-hero,
  .deadline-hero,
  .summary-history-hero,
  .finance-hero,
  .inventory-hero,
  .products-hero,
  .pos-hero,
  .documents-hero,
  .ranking-hero,
  .cs-hero,
  .cp-hero,
  .adm-task-hero,
  .hrm-hero,
  .comx-hero
)::after {
  opacity: .35;
}

body.main-body :is(
  .dashboard-subtitle,
  .finance-subtitle,
  .inventory-subtitle,
  .products-subtitle,
  .pos-subtitle,
  .documents-subtitle,
  .ranking-subtitle,
  .service-page-hero p,
  .admin-hero p,
  .contracts-hero p,
  .legal-cost-hero p,
  .monitor-hero p,
  .deadline-hero p,
  .summary-history-hero p,
  .cs-hero p,
  .cp-hero p,
  .comx-hero p
) {
  color: var(--crm-muted);
}

body.main-body :is(
  .dashboard-eyebrow,
  [class$="-kicker"],
  [class$="-eyebrow"],
  .panel-kicker,
  .service-page-kicker
) {
  color: var(--crm-primary);
}

/* ==========================================================================
   4. Botões, controles, badges e feedback
   ========================================================================== */

body.main-body :is(
  .btn-primary,
  .primary-btn,
  .admin-btn.is-primary,
  .contracts-btn-primary,
  .legal-cost-btn.is-primary,
  .deadline-btn.is-primary,
  .summary-history-btn.is-primary,
  .monitor-btn.is-primary,
  .client-portal-button.is-primary,
  .adm-task-primary
) {
  color: #ffffff;
  border-color: var(--crm-primary);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-primary);
  box-shadow: 0 7px 18px rgba(37, 99, 235, .2);
}

body.main-body :is(
  .btn-primary,
  .primary-btn,
  .admin-btn.is-primary,
  .contracts-btn-primary,
  .legal-cost-btn.is-primary,
  .deadline-btn.is-primary,
  .summary-history-btn.is-primary,
  .monitor-btn.is-primary,
  .client-portal-button.is-primary,
  .adm-task-primary
):hover {
  color: #ffffff;
  border-color: var(--crm-primary-hover);
  background: var(--crm-primary-hover);
  box-shadow: 0 9px 22px rgba(37, 99, 235, .25);
  filter: none;
  transform: translateY(-1px);
}

body.main-body :is(
  .btn-secondary,
  .secondary-btn,
  .admin-btn.is-ghost,
  .contracts-btn-ghost,
  .legal-cost-btn.is-ghost,
  .deadline-btn.is-ghost,
  .summary-history-btn.is-ghost,
  .monitor-btn.is-ghost,
  .client-portal-button.is-ghost
) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(
  .btn-secondary,
  .secondary-btn,
  .admin-btn.is-ghost,
  .contracts-btn-ghost,
  .legal-cost-btn.is-ghost,
  .deadline-btn.is-ghost,
  .summary-history-btn.is-ghost,
  .monitor-btn.is-ghost,
  .client-portal-button.is-ghost
):hover {
  color: var(--crm-primary);
  border-color: var(--crm-border-strong);
  background: var(--crm-primary-soft);
  box-shadow: var(--crm-shadow-sm);
  transform: translateY(-1px);
}

body.main-body :is(.btn-danger, .btn-danger-small, [class*="btn-danger"]) {
  color: #ffffff;
  border-color: var(--crm-danger);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-danger);
  box-shadow: 0 7px 18px rgba(198, 40, 40, .16);
}

body.main-body :is(.btn-danger, .btn-danger-small, [class*="btn-danger"]):hover {
  color: #ffffff;
  filter: brightness(.94);
}

body.main-body :is(
  .input,
  .select,
  .textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: none;
}

html[data-appearance="escuro"] body.main-body :is(
  .input,
  .select,
  .textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
) {
  background: var(--crm-surface-soft);
}

body.main-body :is(
  .input,
  .select,
  .textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
):focus {
  color: var(--crm-text);
  border-color: var(--crm-primary);
  outline: 0;
  box-shadow: var(--crm-focus);
  transform: none;
}

body.main-body ::placeholder {
  color: var(--crm-muted);
  opacity: .78;
}

body.main-body select option {
  color: var(--crm-text);
  background: var(--crm-surface-raised);
}

body.main-body .quote-product-search {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

html[data-appearance="escuro"] body.main-body .quote-product-search {
  background: var(--crm-surface-soft);
}

body.main-body .quote-product-search:focus {
  border-color: var(--crm-primary);
  box-shadow: var(--crm-focus);
}

body.main-body .quote-product-search-menu {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-raised);
  box-shadow: var(--crm-shadow-lg);
  backdrop-filter: none;
}

body.main-body :is(.quote-product-search-option, .quote-product-search-menu > button) {
  color: var(--crm-text);
  border-bottom-color: var(--crm-border);
  background: transparent;
}

body.main-body :is(.quote-product-search-option, .quote-product-search-menu > button):hover,
body.main-body :is(.quote-product-search-option, .quote-product-search-menu > button):focus-visible {
  color: var(--crm-primary);
  background: var(--crm-primary-soft);
}

body.main-body input[type="file"].input {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface);
}

body.main-body input[type="file"].input::file-selector-button {
  color: var(--crm-primary);
  border-color: color-mix(in srgb, var(--crm-primary) 28%, var(--crm-border));
  border-radius: var(--crm-radius-sm);
  background: var(--crm-primary-soft);
  box-shadow: none;
}

body.main-body :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--crm-primary);
}

body.main-body .label,
body.main-body label.label {
  color: var(--crm-text-soft);
}

body.main-body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--crm-focus);
}

body.main-body .badge {
  border: 1px solid transparent;
}

body.main-body .badge-blue {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

body.main-body .badge-green {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

body.main-body .badge-red {
  color: #991b1b;
  border-color: #fecaca;
  background: #fef2f2;
}

body.main-body .badge-gray {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
}

html[data-appearance="escuro"] body.main-body .badge-blue {
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, .28);
  background: rgba(37, 99, 235, .15);
}

html[data-appearance="escuro"] body.main-body .badge-green {
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, .25);
  background: rgba(22, 163, 74, .13);
}

html[data-appearance="escuro"] body.main-body .badge-red {
  color: #fecaca;
  border-color: rgba(251, 113, 133, .25);
  background: rgba(225, 29, 72, .13);
}

body.main-body .alert {
  border-radius: var(--crm-radius);
  box-shadow: none;
}

body.main-body .alert-success {
  color: var(--crm-success);
  border-color: color-mix(in srgb, var(--crm-success) 28%, var(--crm-border));
  background: var(--crm-success-soft);
}

body.main-body :is(.alert-error, .alert-danger) {
  color: var(--crm-danger);
  border-color: color-mix(in srgb, var(--crm-danger) 28%, var(--crm-border));
  background: var(--crm-danger-soft);
}

/* ==========================================================================
   5. Tabelas, abas, paginação, Kanban e estados vazios
   ========================================================================== */

body.main-body :is(.table-wrap, .table-responsive, [class*="table-wrap"]) {
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  background: var(--crm-surface);
}

body.main-body table {
  color: var(--crm-text);
  background: transparent;
}

body.main-body table thead {
  background: var(--crm-surface-soft);
}

body.main-body table th {
  color: var(--crm-text-soft);
  border-bottom-color: var(--crm-border);
  background: transparent;
}

body.main-body table td {
  color: var(--crm-text);
  border-bottom-color: var(--crm-border);
  background: transparent;
}

body.main-body table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--crm-surface-soft) 60%, transparent);
}

body.main-body table tbody tr:hover {
  background: var(--crm-primary-soft);
}

body.main-body :is(
  [class*="-tabs"],
  .pipeline-tabs,
  .kanban-view-switch,
  .documents-tabs,
  .chat-sidebar-tabs
) {
  border-color: var(--crm-border);
}

body.main-body :is(
  [class$="-tab"],
  .pipeline-tab,
  .kanban-view-pill,
  .documents-tab,
  .chat-tab
) {
  color: var(--crm-muted);
  border-color: transparent;
  background: transparent;
}

body.main-body :is(
  [class$="-tab"],
  .pipeline-tab,
  .kanban-view-pill,
  .documents-tab,
  .chat-tab
):hover {
  color: var(--crm-text);
  background: var(--crm-surface-hover);
}

body.main-body :is(
  [class$="-tab"].is-active,
  [class$="-tab"].active,
  .pipeline-tab.is-active,
  .kanban-view-pill.is-active,
  .documents-tab.is-active,
  .chat-tab.is-active
) {
  color: var(--crm-primary);
  border-color: color-mix(in srgb, var(--crm-primary) 24%, var(--crm-border));
  background: var(--crm-primary-soft);
}

body.main-body [class*="pagination"] :is(a, button) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface);
}

body.main-body [class*="pagination"] :is(a, button):hover,
body.main-body [class*="pagination"] .active {
  color: var(--crm-primary);
  border-color: color-mix(in srgb, var(--crm-primary) 28%, var(--crm-border));
  background: var(--crm-primary-soft);
}

body.main-body :is(.kanban-column, .pipeline-column, .task-column, .adm-task-column) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  box-shadow: none;
}

body.main-body :is(.kanban-card, .pipeline-card, .task-card, .adm-task-card) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(.kanban-card, .pipeline-card, .task-card, .adm-task-card):hover {
  border-color: var(--crm-border-strong);
  background: var(--crm-surface-raised);
  box-shadow: var(--crm-shadow-sm);
  transform: translateY(-1px);
}

body.main-body :is(
  .empty-state,
  .admin-empty,
  .gcal-empty,
  .documents-empty,
  .cs-empty,
  .cp-empty,
  .client-custom-empty,
  .comx-empty,
  .chat-empty,
  .finance-empty,
  .inventory-empty,
  .monitor-empty,
  .legal-cost-empty,
  .summary-history-empty,
  .deadline-empty,
  .contracts-empty,
  .hrm-empty,
  .pos-empty,
  .careers-empty
) {
  color: var(--crm-muted);
  border-color: var(--crm-border);
  border-radius: var(--crm-radius-lg);
  background: var(--crm-surface-soft);
}

body.main-body :is(
  .empty-state,
  .admin-empty,
  .gcal-empty,
  .documents-empty,
  .cs-empty,
  .cp-empty,
  .client-custom-empty,
  .comx-empty,
  .chat-empty,
  .finance-empty,
  .inventory-empty,
  .monitor-empty,
  .legal-cost-empty,
  .summary-history-empty,
  .deadline-empty,
  .contracts-empty,
  .hrm-empty,
  .pos-empty
) :is(h3, h4, strong) {
  color: var(--crm-text);
}

/* ==========================================================================
   6. Diálogos, modais, popovers e drawers
   ========================================================================== */

body.main-body :is(
  dialog,
  .modal-content,
  .modal-panel,
  .contracts-modal-panel,
  .deadline-modal-panel,
  .admin-modal > section,
  .admin-operation-modal > section,
  .summary-history-modal > section,
  .monitor-modal > section,
  .comx-dialog,
  .gcal-dialog,
  .gcal-create-dialog,
  .adm-task-dialog,
  .adm-task-detail,
  .hrm-dialog,
  .hrm-detail,
  .hrm-record-dialog,
  .finance-confirm-dialog,
  .chat-modal-card,
  .custom-select-panel,
  .pipeline-config-panel,
  .kanban-config-panel,
  .wc-modal
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-raised);
  box-shadow: var(--crm-shadow-lg);
}

body.main-body :is(dialog, .modal-content, .modal-panel) :is(header, footer),
body.main-body :is(
  .contracts-modal-panel,
  .deadline-modal-panel,
  .admin-modal > section,
  .summary-history-modal > section,
  .monitor-modal > section,
  .comx-dialog,
  .gcal-dialog,
  .adm-task-dialog,
  .hrm-dialog,
  .hrm-detail
) :is(header, footer) {
  border-color: var(--crm-border);
}

body.main-body :is(
  dialog,
  .contracts-modal,
  .deadline-modal,
  .admin-modal,
  .summary-history-modal,
  .monitor-modal,
  .finance-confirm-modal,
  .chat-modal,
  .chat-media-modal,
  .pos-camera-modal,
  .wc-incoming-call-modal,
  .wc-video-recorder-modal
)::backdrop {
  background: var(--crm-overlay);
  backdrop-filter: blur(5px);
}

body.main-body :is(
  .contracts-modal-backdrop,
  .deadline-modal-backdrop,
  .admin-modal-backdrop,
  .summary-history-backdrop,
  .monitor-modal-backdrop,
  .wc-modal-backdrop
) {
  background: var(--crm-overlay);
  backdrop-filter: blur(5px);
}

/* ==========================================================================
   7. Pontes dos módulos com temas locais
   ========================================================================== */

body.main-body :is(
  .contracts-page,
  .pieces-page,
  .process-analysis-page
) {
  --contracts-panel: var(--crm-surface);
  --contracts-panel-strong: var(--crm-surface-raised);
  --contracts-line: var(--crm-border);
  --contracts-muted: var(--crm-muted);
  --contracts-text: var(--crm-text);
  --contracts-cyan: var(--crm-primary);
  color: var(--crm-text);
}

body.main-body .legal-cost-page {
  --cost-panel: var(--crm-surface);
  --cost-line: var(--crm-border);
  --cost-muted: var(--crm-muted);
  color: var(--crm-text);
}

body.main-body .monitor-page {
  --monitor-line: var(--crm-border);
  --monitor-muted: var(--crm-muted);
  color: var(--crm-text);
}

body.main-body .deadline-center-page {
  --deadline-line: var(--crm-border);
  --deadline-muted: var(--crm-muted);
  color: var(--crm-text);
}

body.main-body .summary-history-page {
  --summary-line: var(--crm-border);
  --summary-muted: var(--crm-muted);
  color: var(--crm-text);
}

body.main-body .admin-page {
  --admin-line: var(--crm-border);
  --admin-muted: var(--crm-muted);
  color: var(--crm-text);
}

body.main-body .gcal-shell {
  --gcal-border: var(--crm-border);
  --gcal-surface: var(--crm-surface);
  --gcal-soft: var(--crm-surface-soft);
  color: var(--crm-text);
}

body.main-body .adm-task-shell {
  --task-border: var(--crm-border);
  --task-panel: var(--crm-surface);
  color: var(--crm-text);
}

body.main-body .hrm-shell {
  --hr-border: var(--crm-border);
  --hr-card: var(--crm-surface);
  color: var(--crm-text);
}

body.main-body :is(.ccfg-shell, .global-settings-page, .module-settings-page) {
  --cc-line: var(--crm-border);
  --cc-card: var(--crm-surface);
  color: var(--crm-text);
}

body.main-body .comx-shell {
  --cb: var(--crm-border);
  color: var(--crm-text);
}

body.main-body .comx-hero {
  margin-bottom: 15px;
  border-radius: 21px;
}

body.main-body .hrm-hero {
  margin-bottom: 17px;
  border-radius: 22px;
}

body.main-body .cs-hero {
  grid-template-columns: minmax(0, 1fr);
}

body.main-body .atlas-ai-shell {
  --ai-bg: var(--crm-page);
  --ai-panel: var(--crm-surface);
  --ai-soft: var(--crm-surface-soft);
  --ai-border: var(--crm-border);
  --ai-text: var(--crm-text);
  --ai-muted: var(--crm-muted);
}

body.main-body :is(
  .contracts-flow,
  .contracts-alerts,
  .contracts-register,
  .contracts-metrics article,
  .pieces-ai-card,
  .pieces-checklist-card,
  .legal-cost-card,
  .legal-cost-history,
  .legal-cost-metrics article,
  .monitor-schedule-card,
  .monitor-process-card,
  .monitor-movements-card,
  .monitor-history-card,
  .monitor-metrics article,
  .monitor-governance article,
  .deadline-agenda-card,
  .deadline-list-card,
  .deadline-metrics article,
  .summary-history-card,
  .summary-history-overview > section,
  .summary-history-metrics article,
  .summary-history-governance article,
  .admin-card,
  .admin-metrics article,
  .admin-modules a,
  .gcal-toolbar,
  .gcal-sidebar,
  .gcal-main,
  .gcal-summary,
  .adm-task-report-card,
  .hrm-tabs,
  .hrm-panel,
  .hrm-metrics article,
  .hrm-employee-grid > article,
  .hrm-org > section,
  .hrm-report-grid a,
  .ccfg-nav,
  .ccfg-welcome,
  .ccfg-summary article,
  .ccfg-area-grid a,
  .ccfg-form,
  .ccfg-plan,
  .ccfg-updates,
  .ccfg-link-grid > a,
  .ccfg-toggle-grid label,
  .mastercfg-shell > header,
  .mastercfg-summary article,
  .mastercfg-tools a,
  .mastercfg-grid > section,
  .mastercfg-grid > aside,
  .comx-shortcuts,
  .comx-tabs,
  .comx-metrics article,
  .comx-dashboard > section,
  .comx-report,
  .comx-search,
  .comx-global-search,
  .comx-leads > article,
  .comx-goals > article,
  .comx-table table,
  .comx-activity-list article,
  .comx-rules article,
  .comx-dashboard-notes a,
  .cs-panel,
  .cs-card,
  .cs-insight,
  .cs-row,
  .cs-side-item,
  .cp-panel,
  .cp-card,
  .cp-background-box,
  .cp-module-box,
  .cp-background-modes label,
  .cp-module-grid label,
  .cp-design-options span,
  .cp-logo-current,
  .documents-help-card,
  .documents-template-item,
  .documents-selected-summary,
  .documents-detected-item,
  .documents-config-item,
  .documents-format-box,
  .finance-balance-card,
  .finance-toolbar,
  .finance-ledger-item,
  .inventory-import-card,
  .products-import-card,
  .pos-product-card,
  .ranking-section-card,
  .ranking-podium-card,
  .support-admin-section,
  .support-admin-grid > section,
  .chat-panel,
  .wc-right-panel,
  .wc-chat-panel,
  .wc-json-panel,
  .wc-file-card,
  .wc-bot-option-card
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.main-body .cp-color-field input[type="color"] {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
}

body.main-body :is(
  .cs-hero h2,
  .cs-stat strong,
  .cs-stat span,
  .cs-title,
  .cs-insight h3,
  .cs-side-item,
  .cp-hero h2,
  .cp-panel h3,
  .cp-card h3,
  .cp-stat strong
) {
  color: var(--crm-text);
}

body.main-body :is(
  .cs-muted,
  .cs-hero p,
  .cs-meta,
  .cs-stat small,
  .cs-insight p,
  .cp-muted,
  .cp-hero p,
  .cp-meta,
  .cp-stat span,
  .cp-brand-form label > span,
  .cp-background-modes label,
  .cp-module-grid label,
  .cp-logo-current span
) {
  color: var(--crm-muted);
}

body.main-body .cs-label {
  color: var(--crm-muted) !important;
}

body.main-body :is(.cs-badge, .cp-badge) {
  color: var(--crm-primary) !important;
  border-color: color-mix(in srgb, var(--crm-primary) 30%, var(--crm-border)) !important;
  background: var(--crm-primary-soft) !important;
}

body.main-body .cs-badge:is(.priority-critical, .priority-urgent) {
  color: var(--crm-danger) !important;
  border-color: color-mix(in srgb, var(--crm-danger) 30%, var(--crm-border)) !important;
  background: var(--crm-danger-soft) !important;
}

body.main-body .cs-badge.priority-high {
  color: var(--crm-warning) !important;
  border-color: color-mix(in srgb, var(--crm-warning) 30%, var(--crm-border)) !important;
  background: var(--crm-warning-soft) !important;
}

body.main-body :is(
  .contracts-flow-steps,
  .contracts-flow-steps a,
  .contracts-alert-list button,
  .pieces-checklist-card li,
  .pieces-ai-result,
  .analysis-command-grid button,
  .legal-cost-money-input,
  .legal-cost-suffix,
  .legal-cost-quantity-field label,
  .legal-cost-guide li,
  .monitor-schedule-times > div,
  .deadline-week-strip,
  .deadline-alerts article,
  .summary-history-periods a,
  .summary-history-detail dl > div,
  .admin-activity-list a,
  .ccfg-plan article,
  .ccfg-updates article,
  .ccfg-toggle-grid label,
  .role-inline-list,
  .role-inline-item,
  .location-selected-card,
  .location-picker-note,
  .location-search-results,
  .location-search-result,
  .settings-suggestion-item,
  .portal-management-column,
  .portal-staff-chat,
  .portal-team-summary > span,
  .portal-team-options label,
  .portal-meeting-review,
  .portal-staff-chat-messages,
  .portal-staff-message
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
}

body.main-body :is(
  .contracts-table td,
  .legal-cost-table td,
  .monitor-table td,
  .deadline-table td,
  .summary-history-table td,
  .admin-table td,
  .comx-table td
) {
  color: var(--crm-text);
}

body.main-body :is(
  .contracts-table th,
  .legal-cost-table th,
  .monitor-table th,
  .deadline-table th,
  .summary-history-table th,
  .admin-table th,
  .comx-table th
) {
  color: var(--crm-muted);
}

body.main-body :is(
  .pieces-ai-toolbar select,
  .pieces-ai-prompt textarea,
  .legal-cost-page input,
  .legal-cost-page select,
  .legal-cost-page textarea,
  .monitor-filters input,
  .monitor-filters select,
  .monitor-log-detail textarea,
  .deadline-form input,
  .deadline-form select,
  .deadline-form textarea,
  .summary-history-filters input,
  .summary-history-filters select,
  .summary-history-detail input,
  .summary-history-detail textarea,
  .admin-filters input,
  .admin-filters select,
  .admin-form-grid input,
  .admin-form-grid select,
  .admin-form-grid textarea,
  .gcal-create-dialog input,
  .gcal-create-dialog select,
  .gcal-create-dialog textarea,
  .adm-task-filters input,
  .adm-task-filters select,
  .adm-task-board-tools button,
  .adm-task-board-tools select,
  .adm-task-form-grid input,
  .adm-task-form-grid select,
  .adm-task-form-grid textarea,
  .hrm-filters input,
  .hrm-filters select,
  .hrm-form-sections input,
  .hrm-form-sections select,
  .hrm-form-sections textarea,
  .hrm-dynamic-fields input,
  .hrm-dynamic-fields select,
  .hrm-dynamic-fields textarea,
  .ccfg-top > label,
  .ccfg-search-results,
  .ccfg-form-grid input,
  .ccfg-form-grid select,
  .ccfg-form-grid textarea,
  .mastercfg-head input,
  .mastercfg-companies input,
  .mastercfg-companies select,
  .comx-search input,
  .comx-global-search input,
  .comx-dialog input,
  .comx-dialog select,
  .comx-dialog textarea
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
}

html[data-appearance="escuro"] body.main-body :is(
  .pieces-ai-toolbar select,
  .pieces-ai-prompt textarea,
  .legal-cost-page input,
  .legal-cost-page select,
  .legal-cost-page textarea,
  .monitor-filters input,
  .monitor-filters select,
  .deadline-form input,
  .deadline-form select,
  .deadline-form textarea,
  .summary-history-filters input,
  .summary-history-filters select,
  .admin-filters input,
  .admin-filters select,
  .admin-form-grid input,
  .admin-form-grid select,
  .admin-form-grid textarea,
  .hrm-filters input,
  .hrm-filters select,
  .ccfg-form-grid input,
  .ccfg-form-grid select,
  .ccfg-form-grid textarea,
  .comx-search input,
  .comx-global-search input,
  .comx-dialog input,
  .comx-dialog select,
  .comx-dialog textarea
) {
  background: var(--crm-surface-soft);
}

/* ==========================================================================
   8. Suporte, treinamento e caixa administrativa
   ========================================================================== */

body.main-body .support-training-upgrade {
  --line: var(--crm-border);
  --line-strong: var(--crm-border-strong);
  --panel: var(--crm-surface);
  --panel-2: var(--crm-surface);
  color: var(--crm-text);
}

body.main-body :is(
  .support-hero,
  .support-flow,
  .support-module-card,
  .support-checklist,
  .support-gallery figure,
  .support-final,
  .support-extra,
  .support-extra-grid figure,
  .support-playbook article,
  .support-bot-panel,
  .support-admin-stat,
  .support-admin-ticket,
  .support-admin-messages,
  .support-admin-diag-card,
  .support-admin-error-row
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  background-image: none;
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(
  .support-pill,
  .support-module-step,
  .support-bot-msg-bot,
  .support-bot-chip,
  .support-bot-attach-btn
) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  background-image: none;
}

body.main-body :is(
  .support-module-card p,
  .support-gallery figcaption,
  .support-extra p,
  .support-extra-grid figcaption,
  .support-admin-stat small,
  .support-admin-error-row small,
  .support-bot-file-name
) {
  color: var(--crm-muted);
}

body.main-body :is(
  .support-checklist strong,
  .support-checklist ul,
  .support-final ul,
  .support-playbook h4,
  .support-playbook ul,
  .support-admin-stat strong,
  .support-admin-ticket,
  .support-admin-diag-card span,
  .support-bot-head strong
) {
  color: var(--crm-text);
}

body.main-body .support-admin-ticket.is-active {
  color: var(--crm-primary);
  border-color: color-mix(in srgb, var(--crm-primary) 32%, var(--crm-border));
  background: var(--crm-primary-soft);
}

body.main-body .support-admin-msg-client {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
}

body.main-body .support-admin-msg-admin,
body.main-body .support-bot-msg-user {
  color: var(--crm-text);
  border-color: color-mix(in srgb, var(--crm-primary) 28%, var(--crm-border));
  background: var(--crm-primary-soft);
}

body.main-body :is(.support-admin-reply textarea, .support-bot-form input) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
}

html[data-appearance="escuro"] body.main-body :is(.support-admin-reply textarea, .support-bot-form input) {
  background: var(--crm-surface-soft);
}

body.main-body :is(.support-admin-reply button, .support-bot-form button) {
  color: #ffffff;
  border-color: var(--crm-primary);
  background: var(--crm-primary);
  background-image: none;
}

body.main-body .support-bot-head,
body.main-body .support-bot-form,
body.main-body .support-gallery figcaption,
body.main-body .support-extra-grid figcaption {
  border-color: var(--crm-border);
}

/* ==========================================================================
   9. Central de WhatsApp
   ========================================================================== */

body.main-body .wc-layout-wrap {
  --wc-scroll-track: var(--scrollbar-track);
  --wc-scroll-thumb: var(--scrollbar-thumb);
  --wc-scroll-thumb-solid: var(--scrollbar-thumb);
  --wc-scroll-thumb-hover: var(--scrollbar-thumb-hover);
  color: var(--crm-text);
}

body.main-body :is(
  .wc-page-header,
  .wc-inbox-list,
  .wc-chat-panel,
  .wc-right-panel,
  .wc-section,
  .wc-conversation-filters,
  .wc-human-tools,
  .wc-human-tools[open] .wc-human-tools-body,
  .wc-accordion,
  .wc-json-panel,
  .wc-bot-option-card,
  .wc-sector-card,
  .wc-file-card,
  .wc-audio-card,
  .wc-call-event-card
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  background-image: none;
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(
  .wc-tip,
  .wc-bot-pill,
  .wc-composer,
  .wc-compose-preview,
  .wc-file-chip,
  .wc-audio-player,
  .wc-compose-audio-player
) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  background-image: none;
}

body.main-body :is(
  .wc-mini-btn,
  .wc-icon-btn,
  .wc-header-icon-btn,
  .wc-modal-btn,
  .wc-active-call-window-btn
) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  background-image: none;
  box-shadow: var(--crm-shadow-xs);
}

body.main-body :is(
  .wc-mini-btn,
  .wc-icon-btn,
  .wc-header-icon-btn,
  .wc-modal-btn,
  .wc-active-call-window-btn
):hover {
  color: var(--crm-primary);
  border-color: var(--crm-border-strong);
  background: var(--crm-primary-soft);
}

body.main-body :is(
  .wc-conversation-filters .input,
  .wc-inbox-filters .input,
  .wc-human-field .input,
  .wc-composer .input
) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
}

html[data-appearance="escuro"] body.main-body :is(
  .wc-conversation-filters .input,
  .wc-inbox-filters .input,
  .wc-human-field .input,
  .wc-composer .input
) {
  background: var(--crm-surface-soft);
}

body.main-body .wc-chat-header {
  border-bottom-color: var(--crm-border);
}

body.main-body .wc-msg {
  color: var(--crm-text);
  border-color: var(--crm-border);
}

body.main-body .wc-msg.incoming {
  background: var(--crm-surface-soft);
}

body.main-body .wc-msg.outgoing {
  background: var(--crm-primary-soft);
  border-color: color-mix(in srgb, var(--crm-primary) 22%, var(--crm-border));
}

body.main-body .wc-modal {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-raised);
  background-image: none;
  box-shadow: var(--crm-shadow-lg);
}

body.main-body :is(.wc-modal-title, .wc-accordion summary, .wc-human-tools summary) {
  color: var(--crm-text);
}

body.main-body :is(.wc-modal-text, .wc-human-field .label, .wc-helper) {
  color: var(--crm-muted);
}

body.main-body .wc-employee-picker {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
}
body.main-body .wc-employee-picker:focus-within {
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 3px var(--crm-primary-soft);
}
body.main-body .wc-employee-option { color: var(--crm-text); }
body.main-body .wc-employee-option:hover,
body.main-body .wc-employee-option:has(input:checked) {
  color: var(--crm-text);
  border-color: var(--crm-border-strong);
  background: var(--crm-primary-soft);
}
body.main-body .wc-employee-option input { accent-color: var(--crm-primary); }
body.main-body .wc-selection-count { color: var(--crm-primary); }
body.main-body .wc-employee-empty,
body.main-body .wc-employee-option-email { color: var(--crm-muted); }

body.main-body .wc-start-conversation-btn {
  color: #ffffff;
  border-color: var(--crm-primary);
  background: var(--crm-primary);
  background-image: none;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .2);
}

body.main-body .wc-start-conversation-btn:hover {
  border-color: var(--crm-primary-hover);
  background: var(--crm-primary-hover);
  background-image: none;
}

body.main-body .wc-start-conversation-icon {
  color: #ffffff;
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
}

body.main-body #wcConnectionList > div {
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  background: var(--crm-surface-soft) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body .wc-page-header > div[style*="background"] {
  border-color: var(--crm-border) !important;
  background: var(--crm-surface-soft) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body #wcList > button {
  color: var(--crm-text) !important;
  border-color: var(--crm-border) !important;
  background: var(--crm-surface) !important;
  background-image: none !important;
  box-shadow: var(--crm-shadow-xs) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body #wcList > button:hover {
  border-color: var(--crm-border-strong) !important;
  background: var(--crm-surface-hover) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body #wcList > button[style*="88, 208, 255"],
:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body #wcList > button[style*="88,208,255"] {
  border-color: var(--crm-primary) !important;
  background: var(--crm-primary-soft) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body #wcList [style*="color:#dbeafe"],
:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body #wcList [style*="color: #dbeafe"] {
  color: var(--crm-text-soft) !important;
}

:is(html[data-appearance="claro"], html[data-appearance="system"]) body.main-body :is(#wcConversationCount, #wcTodayConversationCount, .wc-unread-count) {
  color: var(--crm-primary) !important;
  border-color: color-mix(in srgb, var(--crm-primary) 26%, var(--crm-border)) !important;
  background: var(--crm-primary-soft) !important;
}

/* Avisos e controles de chamada mantêm sua semântica, mas sem painel translúcido. */
body.main-body :is(.wc-incoming-call-modal, .wc-active-call-panel) {
  background-color: #07111f;
  background-image: none;
}

/* ==========================================================================
   10. Login e recuperação de acesso
   ========================================================================== */

body.auth-body {
  color: var(--crm-text);
  background: var(--crm-page) !important;
}

body.auth-body::before,
body.auth-body::after {
  display: none;
}

body.auth-body .atlas-auth-shell {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-lg);
}

body.auth-body .atlas-auth-content {
  color: var(--crm-text);
  background: var(--crm-surface);
}

body.auth-body .atlas-auth-visual {
  color: #ffffff;
  border-color: var(--crm-border);
  background: #0d1b2b;
}

body.auth-body .atlas-auth-visual::after {
  background: linear-gradient(180deg, rgba(5, 16, 31, .15), rgba(5, 16, 31, .82));
}

body.auth-body :is(.input, .select, .textarea, input, select, textarea) {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: none;
}

html[data-appearance="escuro"] body.auth-body :is(.input, .select, .textarea, input, select, textarea) {
  background: var(--crm-surface-soft);
}

body.auth-body :is(.input, .select, .textarea, input, select, textarea):focus {
  border-color: var(--crm-primary);
  outline: 0;
  box-shadow: var(--crm-focus);
}

body.auth-body .label {
  color: var(--crm-text-soft);
}

body.auth-body :is(.btn-primary, button[type="submit"]) {
  color: #ffffff;
  border-color: var(--crm-primary);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-primary);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .2);
}

body.auth-body :is(.social-login-btn, .client-portal-provider) {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.auth-body :is(.auth-divider, .client-portal-login-divider, .client-portal-login-note) {
  color: var(--crm-muted);
}

body.auth-body .client-portal-login-help {
  color: var(--crm-text-soft);
  border-color: color-mix(in srgb, var(--crm-primary) 22%, var(--crm-border));
  background: var(--crm-primary-soft);
}

body.auth-body .atlas-auth-theme-toggle {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-sm);
}

body.auth-body [class~="bg-slate-900/20"] {
  background: var(--crm-surface) !important;
}

body.auth-body [class~="border-sky-300/15"] {
  border-color: var(--crm-border) !important;
}

body.auth-body [class~="text-slate-200"] {
  color: var(--crm-text-soft) !important;
}

body.auth-body [class~="text-sky-200"] {
  color: var(--crm-primary) !important;
}

/* ==========================================================================
   11. Portal do cliente
   ========================================================================== */

html[data-portal-theme="light"] {
  color-scheme: light;
}

html[data-portal-theme="dark"] {
  color-scheme: dark;
}

html[data-portal-theme="light"] body.client-portal-body {
  --portal-page-surface: color-mix(in srgb, var(--portal-primary) 4%, #f3f6fa);
  --portal-page-background: var(--portal-light-background, radial-gradient(circle at 78% 0, color-mix(in srgb, var(--portal-primary) 10%, transparent), transparent 28%), var(--portal-page-surface));
  --portal-card-surface: #ffffff;
  --portal-soft-surface: color-mix(in srgb, var(--portal-primary) 4%, #f8fafc);
  --portal-input-surface: #ffffff;
  --portal-line-color: color-mix(in srgb, var(--portal-primary) 14%, #d6dee9);
  --portal-text-color: #172033;
  --portal-muted-color: #667085;
  color: var(--portal-text-color);
  background: var(--portal-page-background) !important;
}

html[data-portal-theme="dark"] body.client-portal-body {
  --portal-page-surface: var(--portal-surface);
  --portal-page-background: var(--portal-custom-background, var(--portal-page-surface));
  --portal-card-surface: var(--portal-surface);
  --portal-soft-surface: var(--portal-card);
  --portal-input-surface: var(--portal-input);
  --portal-line-color: var(--portal-border);
  --portal-text-color: var(--portal-text);
  --portal-muted-color: var(--portal-muted);
  color: var(--portal-text-color);
  background: var(--portal-custom-background, var(--portal-page-surface)) !important;
}

body.client-portal-body .client-portal-app {
  color: var(--portal-text-color);
  background: transparent !important;
}

body.client-portal-body .client-portal-main {
  color: var(--portal-text-color);
  background: var(--portal-page-background, var(--portal-custom-background, var(--portal-page-surface))) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

body.client-portal-body .client-portal-sidebar {
  color: var(--portal-text-color);
  border-color: var(--portal-line-color);
  background: var(--portal-card-surface);
  box-shadow: none;
}

body.client-portal-body .client-portal-topbar {
  color: var(--portal-text-color);
  border-color: var(--portal-line-color);
  background: color-mix(in srgb, var(--portal-card-surface) 96%, transparent);
  box-shadow: var(--crm-shadow-xs);
}

body.client-portal-body :is(
  .client-portal-hero,
  .client-portal-panel,
  .client-portal-full-panel,
  .client-portal-next-panel,
  .client-portal-quick-access,
  .client-portal-team-strip,
  .client-portal-metrics article,
  .client-portal-highlight,
  .client-portal-help,
  .client-portal-chat-window,
  .client-portal-activity-panel
) {
  color: var(--portal-text-color);
  border-color: var(--portal-line-color);
  background: var(--portal-card-surface);
  background-image: none;
  box-shadow: var(--crm-shadow-sm);
}

body.client-portal-body :is(
  .client-portal-item-card,
  .client-portal-proposal-card,
  .client-portal-document-list article,
  .client-portal-data-grid article,
  .client-portal-meeting-form,
  .client-portal-meeting-history,
  .client-portal-team-members article,
  .quick-access-grid > a,
  .next-step-list > a,
  .next-step-done
) {
  color: var(--portal-text-color);
  border-color: var(--portal-line-color);
  background: var(--portal-soft-surface);
}

body.client-portal-body :is(h1, h2, h3, h4, strong) {
  color: var(--portal-text-color);
}

body.client-portal-body :is(p, small, time, .client-portal-nav a) {
  color: var(--portal-muted-color);
}

body.client-portal-body .client-portal-nav a:hover,
body.client-portal-body .client-portal-nav a.is-active {
  color: var(--portal-accent);
  background: color-mix(in srgb, var(--portal-primary) 11%, var(--portal-card-surface));
}

body.client-portal-body :is(input, select, textarea) {
  color: var(--portal-text-color);
  border-color: var(--portal-line-color);
  background: var(--portal-input-surface, var(--portal-input));
}

html[data-portal-theme="dark"] body.client-portal-body :is(input, select, textarea) {
  background: var(--portal-input);
}

html[data-portal-theme="light"] body.client-portal-body :is(input, select, textarea),
html[data-portal-theme="light"] body.client-portal-body .client-portal-upload select,
html[data-portal-theme="light"] body.client-portal-body .client-portal-chat-compose textarea,
html[data-portal-theme="light"] body.client-portal-body .client-portal-password-form input {
  color: var(--portal-text-color) !important;
  border-color: var(--portal-line-color) !important;
  background: var(--portal-input-surface) !important;
}

body.client-portal-body :is(input, select, textarea):focus {
  border-color: var(--portal-primary);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-primary) 18%, transparent);
}

body.client-portal-body .client-portal-theme-toggle {
  color: var(--portal-text-color);
  border-color: var(--portal-line-color);
  background: var(--portal-card-surface);
}

/* O modo claro usa superfícies neutras legíveis sem apagar a identidade da empresa. */
html[data-portal-theme="light"] body.client-portal-body .client-portal-sidebar,
html[data-portal-theme="light"] body.client-portal-body .client-portal-topbar {
  color: var(--portal-text-color) !important;
  border-color: var(--portal-line-color) !important;
  background: color-mix(in srgb, var(--portal-card-surface) 96%, transparent) !important;
}

html[data-portal-theme="light"] body.client-portal-body .portal-company-logo,
html[data-portal-theme="dark"] body.client-portal-body .portal-company-logo,
html[data-portal-theme="light"] body.client-portal-body .client-portal-hero-art .hero-logo img,
html[data-portal-theme="dark"] body.client-portal-body .client-portal-hero-art .hero-logo img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-portal-theme="light"] body.client-portal-body :is(
  .client-portal-hero,
  .client-portal-panel,
  .client-portal-full-panel,
  .client-portal-next-panel,
  .client-portal-quick-access,
  .client-portal-team-strip,
  .client-portal-metrics article,
  .client-portal-highlight,
  .client-portal-help,
  .client-portal-chat-window,
  .client-portal-activity-panel
) {
  color: var(--portal-text-color) !important;
  border-color: var(--portal-line-color) !important;
  background: var(--portal-card-surface) !important;
}

html[data-portal-theme="light"] body.client-portal-body .client-portal-hero {
  background: radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--portal-primary) 13%, transparent), transparent 28%), linear-gradient(120deg, #ffffff, color-mix(in srgb, var(--portal-primary) 6%, #f8fafc)) !important;
}

html[data-portal-theme="light"] body.client-portal-body :is(
  .client-portal-item-card,
  .client-portal-proposal-card,
  .client-portal-document-list article,
  .client-portal-data-grid article,
  .client-portal-meeting-form,
  .client-portal-meeting-history,
  .client-portal-meeting-history > article,
  .client-portal-team-members article,
  .quick-access-grid > a,
  .next-step-list > a,
  .next-step-done,
  .client-portal-chat-message > div,
  .client-portal-chat-heading,
  .client-portal-chat-compose
) {
  color: var(--portal-text-color) !important;
  border-color: var(--portal-line-color) !important;
  background: var(--portal-soft-surface) !important;
}

html[data-portal-theme="light"] body.client-portal-body :is(h1, h2, h3, h4, strong),
html[data-portal-theme="light"] body.client-portal-body .client-portal-topbar > div:first-of-type strong,
html[data-portal-theme="light"] body.client-portal-body .client-portal-mini-profile strong,
html[data-portal-theme="light"] body.client-portal-body .client-portal-top-profile strong {
  color: var(--portal-text-color) !important;
}

html[data-portal-theme="light"] body.client-portal-body :is(p, small, time, .client-portal-nav a, .client-portal-team-members small, .client-portal-online) {
  color: var(--portal-muted-color) !important;
}

html[data-portal-theme="light"] body.client-portal-body .client-portal-theme-toggle,
html[data-portal-theme="light"] body.client-portal-body .client-portal-button.is-ghost,
html[data-portal-theme="light"] body.client-portal-body .client-portal-file {
  color: var(--portal-text-color) !important;
  border-color: var(--portal-line-color) !important;
  background: #ffffff !important;
}

.auth-body.portal-branded {
  background: var(--portal-custom-background, linear-gradient(135deg, var(--portal-surface), var(--portal-card))) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded {
  color: #172033 !important;
  background: var(--portal-light-background, radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--portal-primary) 12%, transparent), transparent 30%), linear-gradient(135deg, #f7fafc, color-mix(in srgb, var(--portal-primary) 5%, #eef3f8))) !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded :is(.atlas-auth-shell, .atlas-auth-content) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--portal-primary) 14%, #d6dee9) !important;
  background: #ffffff !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded .atlas-auth-visual {
  border-color: color-mix(in srgb, var(--portal-primary) 16%, #d6dee9) !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--portal-primary) 10%, #f8fafc), color-mix(in srgb, var(--portal-secondary) 8%, #eef3f8)) !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded :is(.atlas-auth-visual > div:last-child strong, .client-portal-login-card h1, .client-portal-company-identity strong, .label) {
  color: #172033 !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded :is(.atlas-auth-visual > div:last-child p, .client-portal-login-card > p, .client-portal-login-note, .client-portal-login-divider) {
  color: #667085 !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded :is(.atlas-auth-mockup, .atlas-auth-mockup-metrics > div, .client-portal-login-help, .client-portal-provider, .atlas-auth-theme-toggle) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--portal-primary) 14%, #d6dee9) !important;
  background: color-mix(in srgb, var(--portal-primary) 4%, #f8fafc) !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded :is(.input, select.input) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--portal-primary) 14%, #d6dee9) !important;
  background: #ffffff !important;
}

html[data-appearance="claro"] body.auth-body.portal-branded .input::placeholder {
  color: #8a94a6 !important;
}

/* ==========================================================================
   12. Portal público de carreiras
   ========================================================================== */

html:not([data-careers-theme="dark"]) {
  --career-bg: #ffffff;
  --career-surface: #ffffff;
  --career-surface-soft: #ffffff;
  --career-text: #102033;
  --career-muted: #66768a;
  --career-line: #dbe5f0;
  --career-primary: #2563eb;
  --career-primary-strong: #1d4ed8;
  --career-cyan: #0891b2;
  --career-glow: transparent;
  --career-shadow: var(--crm-shadow-sm);
}

html[data-careers-theme="dark"] {
  --career-bg: #080d16;
  --career-surface: #0f1724;
  --career-surface-soft: #111c2b;
  --career-text: #f4f8fc;
  --career-muted: #9aabc0;
  --career-line: #26364a;
  --career-primary: #60a5fa;
  --career-primary-strong: #93c5fd;
  --career-cyan: #38bdf8;
  --career-glow: transparent;
  --career-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

body.recruitment-public-body {
  color: var(--career-text);
  background: var(--career-bg) !important;
  background-image: none !important;
}

body.recruitment-public-body :is(
  .careers-hero-panel,
  .careers-job-card,
  .recruitment-apply-card,
  .recruitment-job-detail,
  .recruitment-success-page
) {
  color: var(--career-text);
  border-color: var(--career-line);
  background: var(--career-surface);
  box-shadow: var(--career-shadow);
}

body.recruitment-public-body :is(
  .careers-mini-flow,
  .careers-filter,
  .careers-empty,
  .recruitment-public-form fieldset
) {
  color: var(--career-text);
  border-color: var(--career-line);
  background: var(--career-surface-soft);
}

body.recruitment-public-body :is(input, select, textarea) {
  color: var(--career-text);
  border-color: var(--career-line);
  background: var(--career-surface);
}

html[data-careers-theme="dark"] body.recruitment-public-body :is(input, select, textarea) {
  background: var(--career-surface-soft);
}

body.recruitment-public-body :is(input, select, textarea):focus {
  border-color: var(--career-primary);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--career-primary) 18%, transparent);
}

body.recruitment-public-body :is(.careers-theme-toggle, .careers-back-link) {
  color: var(--career-text);
  border-color: var(--career-line);
  background: var(--career-surface);
  box-shadow: var(--crm-shadow-xs);
}

/* ==========================================================================
   13. Telas de erro
   ========================================================================== */

body.atlas-error-body {
  color: var(--crm-text);
  background: var(--crm-page) !important;
  background-image: none !important;
}

body.atlas-error-body::before,
body.atlas-error-body::after {
  display: none;
}

body.atlas-error-body .atlas-error-card {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-lg);
}

body.atlas-error-body :is(.atlas-error-copy p, .atlas-error-code) {
  color: var(--crm-muted);
}

body.atlas-error-body .atlas-error-primary {
  color: #ffffff;
  border-color: var(--crm-primary);
  background: var(--crm-primary);
}

body.atlas-error-body .atlas-error-secondary,
body.atlas-error-body .atlas-error-theme-toggle {
  color: var(--crm-text-soft);
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow-xs);
}

body.atlas-error-body .atlas-error-visual {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
}

/* ==========================================================================
   14. Responsividade e preferências do usuário
   ========================================================================== */

@media (max-width: 1280px) {
  body.main-body .layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  body.main-body .atlas-page-stage,
  body.main-body .layout main {
    padding: 24px !important;
  }
}

@media (max-width: 1024px) {
  body.main-body .layout {
    display: block;
  }

  body.main-body .sidebar {
    box-shadow: 18px 0 50px rgba(15, 31, 51, .18);
  }

  body.main-body .topbar {
    padding-inline: 18px;
  }

  body.main-body .topbar > .flex {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.main-body .topbar > .flex > form {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  body.main-body .atlas-page-stage,
  body.main-body .layout main {
    padding: 16px !important;
  }

  body.main-body .topbar {
    padding: 12px 14px;
  }

  body.main-body .topbar > .flex {
    gap: 12px !important;
  }

  body.main-body :is(
    .dashboard-hero,
    .page-hero,
    .service-page-hero,
    .admin-hero,
    .contracts-hero,
    .legal-cost-hero,
    .monitor-hero,
    .deadline-hero,
    .summary-history-hero,
    .finance-hero,
    .inventory-hero,
    .products-hero,
    .pos-hero,
    .documents-hero,
    .cs-hero,
    .cp-hero,
    .adm-task-hero,
    .hrm-hero,
    .comx-hero
  ) {
    border-radius: var(--crm-radius-lg);
  }

  body.auth-body {
    padding: 16px;
  }

  body.auth-body .atlas-auth-shell {
    border-radius: var(--crm-radius-lg);
  }

  body.client-portal-body .client-portal-main {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  body.main-body .atlas-page-stage,
  body.main-body .layout main {
    padding: 12px !important;
  }

  body.main-body :is(.btn-primary, .btn-secondary, .btn-danger) {
    min-height: 42px;
  }

  body.main-body :is(.page-header, [class$="-section-head"], [class$="-hero-actions"]) {
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  html,
  body {
    color: #111827 !important;
    background: #ffffff !important;
  }

  body.main-body .sidebar,
  body.main-body .topbar {
    display: none !important;
  }

  body.main-body .layout {
    display: block;
  }

  body.main-body .layout main {
    max-width: none;
    padding: 0 !important;
  }
}

/* O palco claro usa um cinza azulado quase branco para separar cartões sem
   abandonar a identidade clara da plataforma. */
html[data-appearance="claro"] body.main-body,
html[data-appearance="system"] body.main-body,
html[data-appearance="claro"] body.main-body .layout,
html[data-appearance="system"] body.main-body .layout,
html[data-appearance="claro"] body.main-body .layout main,
html[data-appearance="system"] body.main-body .layout main,
html[data-appearance="claro"] body.main-body .atlas-page-stage,
html[data-appearance="system"] body.main-body .atlas-page-stage {
  background-color: #f6f9fc !important;
  background-image:
    radial-gradient(circle at 82% 0, rgba(103, 232, 249, .08), transparent 24%),
    linear-gradient(180deg, #fbfdff 0, #f6f9fc 420px) !important;
}

html[data-appearance="claro"] body.main-body :is(
  .sidebar,
  .topbar,
  .card,
  .panel,
  .modal,
  .dropdown-menu,
  .notifications-panel,
  .gcal-shell,
  .gcal-toolbar,
  .gcal-sidebar,
  .gcal-main,
  .gcal-mini-calendar,
  .kanban-column,
  .deal-card,
  input,
  select,
  textarea,
  table,
  thead,
  tbody,
  tr,
  [class*="bg-gray-"],
  [class*="bg-slate-"]
),
html[data-appearance="system"] body.main-body :is(
  .sidebar,
  .topbar,
  .card,
  .panel,
  .modal,
  .dropdown-menu,
  .notifications-panel,
  .gcal-shell,
  .gcal-toolbar,
  .gcal-sidebar,
  .gcal-main,
  .gcal-mini-calendar,
  .kanban-column,
  .deal-card,
  input,
  select,
  textarea,
  table,
  thead,
  tbody,
  tr,
  [class*="bg-gray-"],
  [class*="bg-slate-"]
) {
  background-color: #ffffff !important;
}

/* ========================================================================== 
   15. Acabamento premium e consistência entre módulos
   ========================================================================== */

body.main-body .atlas-page-stage,
body.main-body .layout main {
  isolation: isolate;
}

body.main-body .atlas-page-stage > :is(section, div):not(.modal-backdrop),
body.main-body .layout main > :is(section, div):not(.modal-backdrop) {
  animation: atlas-content-in .34s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes atlas-content-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

body.main-body :is(.card, .card-visible, .panel) {
  box-shadow: var(--crm-shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.main-body :is(a.card, a.card-visible, button.card, [role="button"].card):hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--crm-border));
  box-shadow: var(--crm-shadow-md);
  transform: translateY(-2px);
}

body.main-body .page-hero {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 26px 28px;
  border: 1px solid var(--crm-border);
  border-top: 3px solid color-mix(in srgb, var(--accent) 72%, var(--crm-primary));
  border-radius: var(--crm-radius-lg);
  background:
    radial-gradient(circle at 94% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 27%),
    var(--crm-surface);
  box-shadow: var(--crm-shadow-sm);
}

body.main-body .page-hero h2 {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

body.main-body .page-hero p {
  max-width: 760px;
  margin-top: 9px;
  color: var(--crm-muted) !important;
  line-height: 1.6;
}

body.main-body :is(input, select, textarea, .input, .select, .textarea) {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.main-body :is(input, select, textarea, .input, .select, .textarea):hover:not(:disabled) {
  border-color: var(--crm-border-strong);
}

body.main-body :is(input, select, textarea, .input, .select, .textarea):focus {
  border-color: color-mix(in srgb, var(--crm-primary) 74%, var(--crm-border)) !important;
  box-shadow: var(--crm-focus) !important;
}

body.main-body table {
  border-collapse: separate;
  border-spacing: 0;
}

body.main-body table thead th:first-child { border-top-left-radius: var(--crm-radius-sm); }
body.main-body table thead th:last-child { border-top-right-radius: var(--crm-radius-sm); }

body.main-body table th {
  letter-spacing: .045em;
}

body.main-body table tbody tr {
  transition: background-color .16s ease, box-shadow .16s ease;
}

body.main-body table tbody td[colspan] {
  height: 116px;
  color: var(--crm-muted) !important;
  text-align: center;
}

body.main-body :is(.btn-primary, .btn-secondary, .btn-danger) {
  will-change: transform;
}

body.main-body :is(.btn-primary, .btn-secondary, .btn-danger):active {
  transform: translateY(0) scale(.985);
}

/* A lista de permissões permanece completa, mas deixa de dominar a página. */
.permission-disclosure {
  overflow: hidden;
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  background: var(--crm-surface-soft);
}

.permission-disclosure > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  color: var(--crm-text);
  cursor: pointer;
  list-style: none;
  font-weight: 750;
}

.permission-disclosure > summary::-webkit-details-marker { display: none; }
.permission-disclosure > summary::after {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid var(--crm-muted);
  border-bottom: 2px solid var(--crm-muted);
  content: "";
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.permission-disclosure[open] > summary::after { transform: rotate(225deg); }
.permission-disclosure > summary small { margin-left: auto; color: var(--crm-muted); font-weight: 600; }
.permission-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding: 0 12px 12px;
  scrollbar-width: thin;
}
.permission-option-grid .settings-toggle-card { min-height: 48px; margin: 0; }
.permission-disclosure--compact .permission-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Portal white-label: profundidade e interação sem substituir as cores da empresa. */
body.client-portal-body :is(
  .client-portal-panel,
  .client-portal-team-strip,
  .client-portal-metrics article,
  .client-portal-highlight,
  .client-portal-help,
  .client-portal-quick-access,
  .client-portal-next-panel
) {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--portal-primary) 7%, transparent) !important;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

body.client-portal-body :is(.quick-access-grid > a, .next-step-list > a, .client-portal-button) {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.client-portal-body :is(.quick-access-grid > a, .next-step-list > a, .client-portal-button):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--portal-primary) 13%, transparent);
}

html[data-portal-theme="light"] body.client-portal-body :is(
  .client-portal-panel,
  .client-portal-team-strip,
  .client-portal-metrics article,
  .client-portal-highlight,
  .client-portal-help,
  .client-portal-quick-access,
  .client-portal-next-panel
) {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--portal-secondary) 9%, rgba(30, 64, 101, .08)) !important;
}

/* Pontes claras para componentes jurídicos que ainda usam fundos locais. */
html[data-appearance="claro"] body.main-body .deadline-week-strip a {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: #ffffff;
}

html[data-appearance="claro"] body.main-body .deadline-week-strip :is(small, span) {
  color: var(--crm-muted);
}

html[data-appearance="claro"] body.main-body .deadline-week-strip a:hover,
html[data-appearance="claro"] body.main-body .deadline-week-strip .is-today {
  background: color-mix(in srgb, var(--accent) 11%, #ffffff);
}

html[data-appearance="claro"] body.main-body .deadline-governance article {
  color: var(--crm-text);
  border-color: var(--crm-border);
  background: #ffffff;
  box-shadow: var(--crm-shadow-xs);
}

html[data-appearance="claro"] body.main-body .deadline-governance p { color: var(--crm-muted); }

html[data-appearance="claro"] body.main-body .comx-hero-visual {
  opacity: .52;
  filter: saturate(.78) contrast(.9);
}

@media (max-width: 860px) {
  .permission-option-grid,
  .permission-disclosure--compact .permission-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .permission-option-grid,
  .permission-disclosure--compact .permission-option-grid { grid-template-columns: 1fr; }
  .permission-disclosure > summary small { display: none; }

  body.main-body .deadline-center-page > *,
  body.main-body .deadline-hero > *,
  body.main-body .deadline-list-card > *,
  body.main-body .deadline-agenda-card > * {
    min-width: 0;
  }

  body.main-body :is(.deadline-hero, .deadline-list-card, .deadline-agenda-card, .deadline-governance, .deadline-week-strip) {
    width: 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.main-body .atlas-page-stage > :is(section, div):not(.modal-backdrop),
  body.main-body .layout main > :is(section, div):not(.modal-backdrop) {
    animation: none !important;
  }
}