/* Tema compartido Gato Bronco: base visual tomada de GoCampaigns. */
:root {
  color-scheme: light;
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --primary-blue: #0284c7;
  --primary-hover: #0369a1;
  --meta-blue: #0668e1;
  --green: #10b981;
  --amber: #f59e0b;
  --rose: #e11d48;
  --purple: #7c3aed;
  --radius-card: 12px;
  --radius-button: 8px;

  --bg: var(--bg-main);
  --surface: var(--bg-surface);
  --surface2: #f1f5f9;
  --panel: var(--bg-surface);
  --panel-2: #f1f5f9;
  --line: var(--border-color);
  --border: var(--border-color);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --blue: var(--primary-blue);
  --gold: var(--primary-blue);
  --cyan: var(--primary-blue);
  --lime: var(--green);
  --warn: var(--amber);

  --bronco-950: var(--bg-main);
  --bronco-900: var(--bg-surface);
  --bronco-500: var(--primary-blue);
  --ui-border: var(--border-color);
  --ui-textMain: var(--text-main);
  --ui-textMuted: var(--text-muted);
  --brand: var(--primary-blue);
  --brand-ink: #ffffff;
}

html,
body {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

body,
button,
input,
select,
textarea {
  color: var(--text-main);
}

input,
select,
textarea,
.select,
.input,
.date-control,
.tenant-input,
.waba-select {
  background: #f1f5f9 !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

.app,
.viewport,
.meta-suite-container,
.main,
.content,
.main-pane,
.messages,
.conversation,
.gb-premium-viewport,
.gb-panel-center {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

.topbar,
.sidebar,
.sidebar-chats,
.sidebar-left,
.gb-sidebar-left,
.gb-sidebar-right,
.rail,
.inspector,
.panel,
.card,
.metric,
.insight-card,
.campaign-card,
.year-card,
.asset-card,
.channel-chip,
.channel-kpi,
.mini-chart,
.user-card,
.box,
.stream-card,
.form,
.global-project-selector,
.new-contact-card,
.notice,
.field,
.event,
.lead-profile,
.profile-panel,
.right-panel,
.sidebar-right {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.pane-header,
.composer,
.chat-header,
.panel-head {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

.nav a,
.nav button,
.secondary,
.chip,
.pill,
.status-pill,
.session-chip {
  background: #f1f5f9 !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

.nav a.active,
.nav button.active,
.chip.active,
.filter-pill-active,
.primary,
.primary-action,
.btn-premium,
.button,
.role {
  background: var(--meta-blue) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.button.secondary,
.btn-dark {
  background: var(--text-main) !important;
  color: #ffffff !important;
}

.muted,
.subtitle,
.card small,
.metric span,
.panel h3,
.copy-box,
.source-row span,
.year-card small,
.channel-chip span,
.brand span,
.field span,
.event time {
  color: var(--text-muted) !important;
}

h1,
h2,
h3,
strong,
td,
th,
p,
label,
.campaign-name {
  color: var(--text-main);
}

th {
  color: var(--text-muted) !important;
}

table,
th,
td,
.source-row,
.metric-row {
  border-color: var(--border-color) !important;
}

.track,
.asset-preview,
.asset-media,
.radial-inner {
  background: #f1f5f9 !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

.fill,
.spark i {
  background: linear-gradient(90deg, var(--meta-blue), var(--green)) !important;
}

.strategy-strip {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
}

.bg-bronco-950,
.bg-bronco-950\/40,
.bg-bronco-950\/60,
.bg-bronco-950\/80,
.bg-bronco-900,
.bg-bronco-900\/30,
.bg-bronco-900\/40,
.bg-bronco-900\/50,
.bg-bronco-900\/60,
.bg-white,
.bg-gray-100,
.bg-gray-50,
.bg-slate-100 {
  background-color: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

.bg-bronco-500,
.bg-bronco-500\/10 {
  background-color: #eff6ff !important;
  color: var(--meta-blue) !important;
  border-color: #bfdbfe !important;
}

.text-ui-textMain,
.text-bronco-950 {
  color: var(--text-main) !important;
}

.text-ui-textMuted,
.text-gray-500,
.text-slate-500,
.text-gray-400 {
  color: var(--text-muted) !important;
}

.text-bronco-500 {
  color: var(--meta-blue) !important;
}

.border-ui-border,
.border-bronco-500,
.border-bronco-500\/20,
.border-bronco-500\/30 {
  border-color: var(--border-color) !important;
}

.role,
.primary,
.primary-action,
.btn-premium,
.button,
.nav a.active,
.nav button.active {
  color: #ffffff !important;
}

.ok,
.pill.good {
  color: #047857 !important;
  border-color: #a7f3d0 !important;
  background: #ecfdf5 !important;
}

.warn,
.pill.warn {
  color: #92400e !important;
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

.bad,
.pill.bad {
  color: #be123c !important;
  border-color: #fecdd3 !important;
  background: #fff1f2 !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}