/* ==========================================================================
   LUMADS-Reports-Antigravity - Global Design Tokens & Executive Base Styles
   Cor Primária Oficial: #0002FD | Fundo: #F8FAFC / #FFFFFF | Neutros: Slate
   Refinamento Visual Superior: Direção de Arte Executiva (Imagem 1 & 2)
   ========================================================================== */

:root {
  /* Cores Oficiais e Acentos LUMADS */
  --lumads-blue: #0002FD;
  --lumads-blue-hover: #0001c4;
  --lumads-blue-light: #EEF2FF;
  --lumads-blue-border: #BFDBFE;
  --lumads-blue-line: #2563EB;
  --lumads-blue-glow: rgba(0, 2, 253, 0.12);

  --lumads-white: #FFFFFF;
  --lumads-black: #0F172A;

  /* Neutros Slate Corporativos */
  --lumads-gray-25: #FCFCFD;
  --lumads-gray-50: #F8FAFC;
  --lumads-gray-100: #F1F5F9;
  --lumads-gray-200: #E2E8F0;
  --lumads-gray-300: #CBD5E1;
  --lumads-gray-400: #94A3B8;
  --lumads-gray-500: #64748B;
  --lumads-gray-600: #475569;
  --lumads-gray-700: #334155;
  --lumads-gray-800: #1E293B;
  --lumads-gray-900: #0F172A;

  /* Estados de Sucesso, Alerta e Perigo */
  --lumads-success: #10B981;
  --lumads-success-light: #ECFDF5;
  --lumads-warning: #F59E0B;
  --lumads-warning-light: #FFFBEB;
  --lumads-danger: #EF4444;
  --lumads-danger-light: #FEF2F2;

  /* Estados semânticos compartilhados entre app, prévia A4 e PDF */
  --perf-positive: #287A45;
  --perf-positive-bg: #EAF6EE;
  --perf-positive-border: #AED8BC;
  --perf-warning: #8A6415;
  --perf-warning-bg: #FFF4D6;
  --perf-warning-border: #EBC65C;
  --perf-negative: #B54745;
  --perf-negative-bg: #FFF0EF;
  --perf-negative-border: #EDB7B4;
  --perf-info: #315AC6;
  --perf-info-bg: #EAF0FF;
  --perf-info-border: #B8C9FA;
  --perf-neutral: #667085;
  --perf-neutral-bg: #F1F3F6;
  --perf-neutral-border: #D5DAE2;

  /* Tipografia */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Bordas e Sombras */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --shadow-card: 0 2px 6px -1px rgba(15, 23, 42, 0.05), 0 1px 4px -1px rgba(15, 23, 42, 0.02);
  --shadow-elevated: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-blue: 0 4px 14px 0 rgba(0, 2, 253, 0.25);

  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
}

/* Reset Básico */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--lumads-gray-50);
  color: var(--lumads-gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ESTRUTURA PRINCIPAL: APP SHELL (SIDEBAR + MAIN)
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: var(--lumads-gray-50);
}

/* 1. SIDEBAR DE NAVEGAÇÃO */
.app-sidebar {
  width: 240px;
  min-width: 240px;
  background-color: var(--lumads-white);
  border-right: 1px solid var(--lumads-gray-200);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.sidebar-brand {
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--lumads-gray-200);
}

.brand-logo-img {
  height: 24px;
  width: auto;
  display: block;
}

.brand-badge-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--lumads-blue-light);
  color: var(--lumads-blue);
  border: 1px solid var(--lumads-blue-border);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.sidebar-nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--lumads-gray-500);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.nav-tab .nav-icon {
  stroke: var(--lumads-gray-400);
  transition: stroke var(--transition-fast);
  flex-shrink: 0;
}

.nav-tab:hover {
  background-color: var(--lumads-gray-100);
  color: var(--lumads-gray-900);
}

.nav-tab:hover .nav-icon {
  stroke: var(--lumads-gray-700);
}

.nav-tab.active {
  background-color: var(--lumads-blue-light);
  color: var(--lumads-blue);
  font-weight: 600;
}

.nav-tab.active .nav-icon {
  stroke: var(--lumads-blue);
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--lumads-gray-200);
}

.server-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lumads-gray-600);
  background: var(--lumads-gray-100);
  padding: 6px 12px;
  border-radius: var(--radius-full);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--lumads-success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* 2. ÁREA PRINCIPAL (TOPBAR + CONTENT) */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Topbar Executivo */
.app-topbar {
  height: 64px;
  background-color: var(--lumads-white);
  border-bottom: 1px solid var(--lumads-gray-200);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-client-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lumads-gray-50);
  border: 1px solid var(--lumads-gray-200);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.client-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lumads-blue-light);
  color: var(--lumads-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.client-info-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.topbar-client-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--lumads-black);
}

.topbar-period-badge {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lumads-gray-500);
}

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

/* Conteúdo Principal */
.main-content {
  flex: 1;
  padding: 28px 32px 48px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ==========================================================================
   COMPONENTES GERAIS: BOTÕES, CARDS, PILLS E FORMULÁRIOS
   ========================================================================== */

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  font-family: inherit;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-primary {
  background-color: var(--lumads-blue);
  color: var(--lumads-white);
  box-shadow: 0 1px 2px rgba(0, 2, 253, 0.2);
}

.btn-primary:hover {
  background-color: var(--lumads-blue-hover);
  box-shadow: var(--shadow-blue);
}

.btn-secondary {
  background-color: var(--lumads-white);
  color: var(--lumads-gray-700);
  border-color: var(--lumads-gray-300);
}

.btn-secondary:hover {
  background-color: var(--lumads-gray-50);
  border-color: var(--lumads-gray-400);
  color: var(--lumads-gray-900);
}

.btn-ghost {
  background: transparent;
  color: var(--lumads-gray-500);
}

.btn-ghost:hover {
  background: var(--lumads-gray-100);
  color: var(--lumads-gray-800);
}

.btn-danger-ghost {
  background: transparent;
  color: var(--lumads-danger);
}

.btn-danger-ghost:hover {
  background: var(--lumads-danger-light);
}

/* Cards */
.card {
  background: var(--lumads-white);
  border: 1px solid var(--lumads-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 24px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--lumads-black);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-subtitle {
  font-size: 13px;
  color: var(--lumads-gray-500);
  margin-bottom: 20px;
}

/* Pills de Seleção */
.pill-group {
  display: inline-flex;
  align-items: center;
  background: var(--lumads-gray-100);
  padding: 3px;
  border-radius: var(--radius-md);
  gap: 2px;
}

.pill-btn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--lumads-gray-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.pill-btn:hover {
  color: var(--lumads-gray-900);
}

.pill-btn.active {
  background: var(--lumads-white);
  color: var(--lumads-blue);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Formulários */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lumads-gray-700);
}

.form-input,
.form-select,
.form-textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--lumads-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--lumads-white);
  color: var(--lumads-gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--lumads-blue);
  box-shadow: 0 0 0 3px var(--lumads-blue-glow);
}

.form-input-sm,
.form-select-sm {
  font-size: 12px;
  padding: 5px 10px;
}

/* ==========================================================================
   ABA 0: DASHBOARD EXECUTIVO (INSPIRAÇÃO IMAGEM 1)
   ========================================================================== */

.dash-exec-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header do Dashboard */
.dash-top-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 0;
}

.dash-badge-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--lumads-blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.dash-page-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--lumads-black);
  letter-spacing: -0.02em;
}

.dash-page-meta {
  font-size: 12.5px;
  color: var(--lumads-gray-500);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-page-meta .source-tag {
  background: var(--lumads-gray-100);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.dash-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-niche-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lumads-gray-600);
}

/* LINHA 1: 6 KPI Cards Executivos */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .dash-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .dash-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dash-kpi-card {
  background: var(--lumads-white);
  border: 1px solid var(--lumads-gray-200);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dash-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.kpi-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lumads-gray-500);
  letter-spacing: 0.04em;
}

.kpi-card-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card-icon-circle.blue-tint {
  background: var(--lumads-blue-light);
}

.kpi-card-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--lumads-black);
  margin: 10px 0 6px;
  letter-spacing: -0.02em;
}

.kpi-card-val.blue-accent {
  color: var(--lumads-blue);
}

.kpi-card-trend {
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.neutral-tag {
  background: var(--lumads-gray-100);
  color: var(--lumads-gray-600);
}

.positive-tag {
  background: var(--lumads-blue-light);
  color: var(--lumads-blue);
}

/* LINHA 2: DOIS BLOCOS (Linha do Tempo 58% + Distribuição 42%) */
.dash-dual-row {
  display: grid;
  grid-template-columns: 58% calc(42% - 20px);
  gap: 20px;
}

@media (max-width: 1080px) {
  .dash-dual-row {
    grid-template-columns: 1fr;
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.panel-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--lumads-gray-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lumads-black);
  margin-top: 2px;
}

.panel-legend {
  display: flex;
  gap: 12px;
}

.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--lumads-gray-600);
  font-weight: 500;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-dot.blue-dot {
  background: var(--lumads-blue);
}

.legend-dot.line-dot {
  background: var(--lumads-blue-line);
  border-radius: 50%;
}

/* Ranking de Distribuição Horizontal */
.dist-rank-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dist-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--lumads-gray-25);
  border: 1px solid var(--lumads-gray-200);
  transition: background var(--transition-fast);
}

.dist-rank-row:hover {
  background: var(--lumads-gray-100);
}

.dist-rank-num {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lumads-gray-500);
  width: 22px;
  text-align: center;
}

.dist-rank-num.rank-gold {
  color: var(--lumads-blue);
}

.dist-rank-thumb {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--lumads-gray-200);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dist-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dist-thumb-placeholder {
  color: var(--lumads-gray-500);
}

.dist-rank-info {
  flex: 1;
  min-width: 0;
}

.dist-rank-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lumads-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.dist-bar-track {
  width: 100%;
  height: 6px;
  background: var(--lumads-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.dist-bar-fill {
  height: 100%;
  background: var(--lumads-blue);
  border-radius: 3px;
}

.dist-rank-metrics {
  text-align: right;
  flex-shrink: 0;
}

.dist-metric-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--lumads-black);
}

.dist-metric-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--lumads-gray-500);
}

.dist-metric-share {
  font-size: 11px;
  color: var(--lumads-gray-500);
}

/* LINHA 3: 4 Métricas Secundárias + Insight Principal */
.dash-secondary-row {
  display: grid;
  grid-template-columns: 58% calc(42% - 20px);
  gap: 20px;
}

@media (max-width: 1080px) {
  .dash-secondary-row {
    grid-template-columns: 1fr;
  }
}

.dash-sec-kpis-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 24px;
  margin-bottom: 0;
}

.sec-kpi-item {
  display: flex;
  flex-direction: column;
}

.sec-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lumads-gray-500);
  margin-bottom: 4px;
}

.sec-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--lumads-black);
}

.dash-insight-card {
  background: #EFF6FF;
  border-color: #BFDBFE;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 0;
}

.insight-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lumads-white);
  border: 1px solid #BFDBFE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--lumads-blue);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.insight-text {
  font-size: 12.5px;
  color: var(--lumads-gray-700);
  line-height: 1.5;
}

/* LINHA 4: Top Anúncios + Galeria */
.dash-bottom-row {
  display: grid;
  grid-template-columns: 52% calc(48% - 20px);
  gap: 20px;
}

@media (max-width: 1080px) {
  .dash-bottom-row {
    grid-template-columns: 1fr;
  }
}

.dash-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.dash-summary-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--lumads-gray-500);
  border-bottom: 1px solid var(--lumads-gray-200);
}

.dash-summary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lumads-gray-100);
  color: var(--lumads-gray-800);
}

.num-col {
  text-align: right !important;
}

.rank-col {
  width: 32px;
  font-weight: 700;
  color: var(--lumads-gray-400);
}

.table-ad-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-thumb-mini {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.table-thumb-placeholder {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--lumads-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--lumads-gray-500);
  flex-shrink: 0;
}

.table-ad-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.table-ad-text strong {
  color: var(--lumads-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-ad-text span {
  font-size: 11px;
  color: var(--lumads-gray-500);
}

/* Galeria de Criativos Campeões */
.dash-creatives-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--lumads-gray-200);
  background: var(--lumads-gray-25);
  transition: all var(--transition-fast);
}

.gallery-item-row:hover {
  background: var(--lumads-gray-100);
}

.gallery-item-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--lumads-gray-200);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb-empty {
  font-size: 10.5px;
  color: var(--lumads-gray-500);
  text-align: center;
}

.gallery-item-info {
  flex: 1;
  min-width: 0;
}

.gallery-item-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--lumads-blue);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.gallery-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--lumads-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.gallery-item-stats {
  font-size: 11.5px;
  color: var(--lumads-gray-600);
}

/* Barra Inferior de Navegação Rápida */
.dash-footer-nav-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 24px;
  background: var(--lumads-gray-100);
  border: 1px solid var(--lumads-gray-300);
}

.footer-nav-text strong {
  display: block;
  font-size: 13.5px;
  color: var(--lumads-black);
}

.footer-nav-text span {
  font-size: 12px;
  color: var(--lumads-gray-600);
}

.footer-nav-actions {
  display: flex;
  gap: 10px;
}

/* ==========================================================================
   ABA 1: IMPORTAÇÃO E DADOS
   ========================================================================== */

.dropzone {
  border: 2px dashed var(--lumads-gray-300);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  background: var(--lumads-gray-25);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--lumads-blue);
  background: var(--lumads-blue-light);
}

.dropzone-icon {
  width: 44px;
  height: 44px;
  stroke: var(--lumads-gray-400);
  margin-bottom: 12px;
}

.dropzone:hover .dropzone-icon {
  stroke: var(--lumads-blue);
}

.dropzone-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lumads-black);
  margin-bottom: 4px;
}

.dropzone-desc {
  font-size: 12.5px;
  color: var(--lumads-gray-500);
  margin-bottom: 16px;
}

.diagnostic-panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--lumads-gray-200);
  display: none;
}

.diagnostic-panel.active {
  display: block;
}

.diagnostic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.diagnostic-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lumads-black);
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.diag-item {
  background: var(--lumads-gray-100);
  padding: 10px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.diag-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--lumads-gray-500);
  text-transform: uppercase;
}

.diag-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--lumads-black);
  margin-top: 2px;
}

.diag-val.highlight {
  color: var(--lumads-blue);
}

.logo-upload-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client-logo-preview {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--lumads-gray-300);
  background: var(--lumads-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.client-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.client-logo-placeholder {
  font-size: 10px;
  color: var(--lumads-gray-400);
  text-align: center;
}

/* ==========================================================================
   ABA 2: CRIATIVOS DOS ANÚNCIOS
   ========================================================================== */

.creatives-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.creatives-stats {
  font-size: 13px;
  color: var(--lumads-gray-600);
}

.creatives-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creatives-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creative-row-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--lumads-white);
  border: 1px solid var(--lumads-gray-200);
  transition: all var(--transition-fast);
}

.creative-row-card:hover {
  border-color: var(--lumads-gray-400);
}

.creative-row-card.drag-target-active {
  border-color: var(--lumads-blue);
  background: var(--lumads-blue-light);
}

.creative-row-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--lumads-gray-100);
  border: 1px dashed var(--lumads-gray-300);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.creative-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-empty-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--lumads-gray-500);
}

.creative-row-info {
  flex: 1;
  min-width: 0;
}

.creative-ad-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lumads-black);
  margin-bottom: 2px;
}

.creative-ad-meta {
  font-size: 11.5px;
  color: var(--lumads-gray-500);
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.creative-ad-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.creative-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--lumads-gray-700);
  cursor: pointer;
}

/* Pool de Imagens Não Associadas */
.unassociated-pool {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--lumads-gray-200);
  display: none;
}

.unassociated-pool.active {
  display: block;
}

.unassociated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.unassociated-item {
  background: var(--lumads-gray-50);
  border: 1px solid var(--lumads-gray-200);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unassociated-thumb {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--lumads-gray-200);
}

.unassociated-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unassociated-filename {
  font-size: 11px;
  color: var(--lumads-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal de Mapeamento */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--lumads-white);
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-elevated);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--lumads-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lumads-black);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--lumads-gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.mapping-table th,
.mapping-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--lumads-gray-200);
}

/* =====================================================================
   CODEX REDESIGN — LUMADS Reports
   Bright reporting canvas, cobalt reserved for navigation and data cues.
   ===================================================================== */
:root {
  --lumads-blue: #0002FD;
  --lumads-blue-hover: #0001C7;
  --lumads-blue-light: #EEF2FF;
  --lumads-blue-border: #D8E1FF;
  --lumads-blue-line: #2B5CF6;
  --lumads-black: #111827;
  --lumads-gray-25: #FCFCFD;
  --lumads-gray-50: #F5F7FA;
  --lumads-gray-100: #EEF1F5;
  --lumads-gray-200: #E3E7ED;
  --lumads-gray-300: #D1D7E0;
  --lumads-gray-400: #98A2B3;
  --lumads-gray-500: #667085;
  --lumads-gray-600: #475467;
  --lumads-gray-700: #344054;
  --lumads-gray-800: #1D2939;
  --lumads-gray-900: #111827;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow-subtle: 0 1px 2px rgba(16, 24, 40, .035);
  --shadow-card: 0 1px 3px rgba(16, 24, 40, .045);
}

body {
  background: #F5F7FA;
  color: #111827;
}

.app-shell {
  background: #F5F7FA;
}

.app-sidebar {
  width: 210px;
  min-width: 210px;
  background: #FFF;
  border-right-color: #E5E9EF;
}

.sidebar-brand {
  height: 66px;
  padding: 0 18px;
  gap: 9px;
  border-bottom-color: #E9EDF2;
}

.brand-logo-img { height: 27px; }

.brand-badge-pill {
  font-size: 9px;
  letter-spacing: .06em;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: #64708A;
}

.sidebar-nav {
  padding: 14px 10px;
  gap: 5px;
}

.nav-tab {
  position: relative;
  min-height: 42px;
  padding: 9px 12px;
  gap: 11px;
  border-radius: 7px;
  color: #4B5565;
  font-size: 13px;
  font-weight: 550;
}

.nav-tab .nav-icon { stroke: #697586; }

.nav-tab:hover {
  background: #F5F7FA;
  color: #111827;
}

.nav-tab.active {
  background: #EDF2FF;
  color: #0002FD;
  font-weight: 650;
}

.nav-tab.active::before {
  position: absolute;
  inset: 8px auto 8px -10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #0002FD;
  content: "";
}

.sidebar-footer {
  padding: 13px 16px;
  border-top-color: #E9EDF2;
}

.server-status-pill {
  padding: 5px 9px;
  background: transparent;
  color: #7A8494;
  font-size: 10.5px;
}

.app-topbar {
  height: 66px;
  padding: 0 24px;
  background: #FFF;
  border-bottom-color: #E5E9EF;
}

.topbar-client-card {
  gap: 10px;
  padding: 5px 12px 5px 6px;
  border: 1px solid #E5E9EF;
  border-radius: 7px;
  background: #FFF;
}

.client-avatar {
  width: 30px;
  height: 30px;
  background: #F1F4F8;
  color: #334155;
}

.topbar-client-name { font-size: 12.5px; }
.topbar-period-badge { font-size: 11px; color: #667085; }
.topbar-actions { gap: 8px; }

.main-content {
  max-width: 1760px;
  padding: 22px 26px 36px;
}

.btn {
  border-radius: 7px;
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn-primary {
  background: #0002FD;
  border-color: #0002FD;
  box-shadow: none;
}

.btn-primary:hover {
  background: #0001C7;
  border-color: #0001C7;
  box-shadow: none;
}

.btn-secondary {
  background: #FFF;
  border-color: #DDE3EB;
  color: #344054;
}

.btn-secondary:hover {
  background: #F8FAFC;
  border-color: #C8D0DC;
}

.btn-ghost:hover { background: #F1F4F8; }

.empty-state-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #EEF2FF;
  color: #0002FD;
}

.breakdown-alert-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border-radius: 50%;
  background: #DCE8FF;
  color: #1746D1;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.callout-icon {
  display: inline-flex;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  color: #0002FD;
}

.callout-icon svg,
.balloon-icon svg { width: 16px; height: 16px; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-tab:focus-visible {
  outline: 3px solid rgba(0, 2, 253, .22);
  outline-offset: 2px;
}

.card,
.dash-kpi-card {
  border: 1px solid #E7EBF0;
  border-radius: 9px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.dash-exec-wrapper {
  display: grid;
  gap: 14px;
}

.dash-top-card {
  display: flex;
  min-height: 76px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 13px;
  border: 0;
  border-bottom: 1px solid #E2E7EE;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dash-badge-eyebrow,
.panel-eyebrow {
  color: #788397;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .075em;
}

.dash-page-title {
  margin-top: 2px;
  color: #101828;
  font-size: 28px;
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.dash-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  margin-top: 5px;
  color: #667085;
  font-size: 11.5px;
}

.dash-page-meta strong { color: #344054; font-weight: 600; }
.dash-page-meta .source-tag { color: #7A8494; font-size: 10.5px; }

.dash-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-niche-label {
  color: #667085;
  font-size: 11px;
  white-space: nowrap;
}

#dash-niche-pills.pill-group {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  border: 1px solid #E2E7EE;
  border-radius: 7px;
  background: #FFF;
}

#dash-niche-pills .pill-btn {
  min-height: 29px;
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #536074;
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}

#dash-niche-pills .pill-btn:hover { background: #F5F7FA; }
#dash-niche-pills .pill-btn.active { background: #0002FD; color: #FFF; }

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.dash-kpi-card {
  min-width: 0;
  min-height: 111px;
  padding: 13px 15px 12px;
  transition: border-color .15s ease, transform .15s ease;
}

.dash-kpi-card:hover {
  border-color: #D3DCE8;
  box-shadow: none;
  transform: translateY(-1px);
}

.kpi-card-top {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kpi-card-label {
  overflow: hidden;
  color: #566176;
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.kpi-card-icon-circle {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: #EEF2FF;
}

.kpi-card-icon-circle svg { width: 16px; height: 16px; }

.kpi-card-val {
  overflow: hidden;
  margin-top: 8px;
  color: #111827;
  font-size: clamp(20px, 1.65vw, 27px);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-card-val.blue-accent { color: #111827; }
.kpi-card-trend { margin-top: 4px; color: #8992A1; font-size: 10px; }
.positive-tag, .neutral-tag { background: transparent; color: #8992A1; }

.dash-dual-row {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .94fr);
  gap: 12px;
  align-items: stretch;
}

.dash-timeline-panel,
.dash-dist-panel,
.dash-table-card,
.dash-gallery-card {
  min-width: 0;
  padding: 15px 16px 13px;
  border-color: #E5E9EF;
  border-radius: 9px;
  box-shadow: none;
}

.panel-header {
  min-height: 33px;
  margin-bottom: 10px;
  align-items: center;
}

.panel-title {
  margin-top: 2px;
  color: #182230;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.panel-legend { gap: 13px; }
.legend-pill { color: #667085; font-size: 10px; }
.legend-dot { width: 7px; height: 7px; }
.legend-dot.line-dot { background: #0002FD; }

.dash-timeline-panel,
.dash-dist-panel { min-height: 266px; height: 266px; overflow: hidden; }
.timeline-chart-container { min-height: 184px; }
.lumads-timeline-svg { max-height: 190px; }
.lumads-timeline-svg text { font-family: var(--font-family); }
.chart-grid-line { stroke: #EDF0F4; }

.dash-dist-panel .panel-header { gap: 12px; }
#dash-dist-mode-pills.pill-group {
  gap: 0;
  padding: 2px;
  border: 1px solid #E4E8EE;
  border-radius: 6px;
  background: #F8FAFC;
}

#dash-dist-mode-pills .pill-btn {
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #596579;
  font-size: 10px;
}

#dash-dist-mode-pills .pill-btn.active { background: #0002FD; color: #FFF; }

.dist-rank-list { gap: 4px; }
.dist-rank-row {
  grid-template-columns: 34px minmax(84px, 1fr) minmax(65px, auto);
  min-height: 43px;
  gap: 9px;
  padding: 5px 4px;
  border-radius: 5px;
}

.dist-rank-row:hover { background: #F8FAFC; }
.dist-rank-thumb { width: 32px; height: 32px; border-radius: 5px; }
.dist-thumb-img { border-radius: 5px; }
.dist-thumb-placeholder { background: #EDF1F6; color: #738096; }
.dist-rank-name { color: #344054; font-size: 10.5px; font-weight: 550; }
.dist-bar-track { height: 4px; margin-top: 5px; background: #EEF1F5; }
.dist-bar-fill { background: #4776F6; }
.dist-rank-metrics { min-width: 64px; }
.dist-metric-val { color: #182230; font-size: 12px; font-weight: 650; }
.dist-metric-unit { color: #697586; font-size: 9px; font-weight: 500; }
.dist-metric-share { color: #8791A1; font-size: 9px; }

.dash-secondary-row {
  display: grid;
  grid-template-columns: minmax(440px, 1.08fr) minmax(280px, .92fr);
  gap: 12px;
}

.dash-sec-kpis-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
  gap: 0;
  padding: 10px 6px;
  border-color: #E5E9EF;
  border-radius: 9px;
  box-shadow: none;
}

.sec-kpi-item {
  min-width: 0;
  padding: 2px 12px;
  border-right: 1px solid #E9EDF2;
}

.sec-kpi-item:last-child { border-right: 0; }
.sec-label { color: #778195; font-size: 10px; text-transform: none; }
.sec-val { margin-top: 3px; color: #253044; font-size: 14px; font-weight: 650; }

.dash-insight-card {
  min-width: 0;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #DCE5FF;
  border-radius: 9px;
  background: #EEF3FF;
  box-shadow: none;
}

.insight-icon-box {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  background: #DCE6FF;
}

.insight-icon-box svg { width: 16px; height: 16px; }
.insight-badge { margin-bottom: 3px; color: #1746D1; font-size: 10px; letter-spacing: .02em; }
.insight-text { color: #34445F; font-size: 11px; line-height: 1.45; }

.dash-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  gap: 12px;
  align-items: stretch;
}

.dash-table-card .panel-header,
.dash-gallery-card .panel-header { margin-bottom: 7px; }

.table-responsive { overflow-x: auto; }
.dash-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10px;
}

.dash-summary-table th:first-child,
.dash-summary-table td:first-child { width: 27px; }
.dash-summary-table th:nth-child(2),
.dash-summary-table td:nth-child(2) { width: 34%; }

.dash-summary-table th {
  padding: 6px 4px;
  background: #F7F9FB;
  color: #667085;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: normal;
  line-height: 1.15;
  border-right: 1px solid #E8ECF1;
}

.dash-summary-table th:last-child { border-right: 0; }

.dash-summary-table td {
  padding: 5px 4px;
  border-bottom-color: #EDF0F4;
  color: #344054;
  white-space: nowrap;
}

.dash-summary-table tbody tr:hover { background: #F8FAFC; }
.dash-summary-table .rank-col { color: #7C8798; font-size: 10px; }
.dash-summary-table .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.table-ad-item { gap: 7px; min-width: 145px; }
.table-thumb-mini { width: 28px; height: 28px; border-radius: 4px; }
.table-thumb-placeholder { width: 28px; height: 28px; border-radius: 4px; background: #EEF2F7; color: #758195; }
.table-ad-text strong { max-width: 190px; color: #253044; font-size: 10px; }
.table-ad-text span { display: none; }

.dash-creatives-preview-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.gallery-item-row {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid #E8ECF1;
  border-radius: 7px;
  background: #FFF;
}

.gallery-item-row:hover { border-color: #CDD6E3; box-shadow: none; }
.gallery-item-thumb { width: 100%; height: 86px; border-radius: 0; background: #F1F4F8; }
.gallery-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb-empty { display: grid; place-items: center; background: linear-gradient(145deg, #EEF2F6, #E4E9F0); color: #778397; font-size: 10px; }
.gallery-item-info { width: 100%; min-width: 0; padding: 8px 9px 9px; }
.gallery-item-badge { display: block; width: 100%; overflow: hidden; color: #8993A2; font-size: 8.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.gallery-item-name { display: block; width: 100%; overflow: hidden; margin-top: 3px; color: #253044; font-size: 10px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.gallery-item-stats { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; overflow: hidden; margin-top: 5px; color: #697586; font-size: 9px; line-height: 1.3; }
.gallery-item-stats strong { color: #344054; font-weight: 600; }

.dash-footer-nav-card { display: none; }

.dropzone {
  min-height: 180px;
  border-color: #D8DEE8;
  border-radius: 8px;
  background: #FBFCFE;
}

.dropzone:hover, .dropzone.dragover { border-color: #0002FD; background: #F6F8FF; }
.diagnostic-panel { border-radius: 8px; }
.creatives-toolbar, .creatives-filters { gap: 10px; }
.creative-row-card { border-radius: 8px; box-shadow: none; }
.creative-row-card:hover { box-shadow: none; }
.creative-row-thumb { border-radius: 6px; }
.creatives-list { width: 100%; gap: 8px; }
.creative-row-card { width: 100%; gap: 12px; padding: 11px 14px; }
.creative-row-thumb { width: 56px; height: 56px; flex-basis: 56px; }
.creative-row-info { flex: 1 1 auto; }
.creative-ad-meta { flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.creative-ad-inputs { flex-wrap: wrap; }
.creative-row-actions { gap: 6px; }
.creatives-filters .search-input { min-width: 180px; }

@media (min-width: 1700px) {
  .main-content { padding: 25px 34px 40px; }
  .dash-exec-wrapper { gap: 16px; }
  .dash-kpi-row { gap: 12px; }
  .dash-kpi-card { min-height: 118px; padding: 15px 17px 13px; }
  .dash-timeline-panel, .dash-dist-panel, .dash-table-card, .dash-gallery-card { padding: 17px 18px 15px; }
  .dash-timeline-panel,
  .dash-dist-panel { min-height: 286px; height: 286px; }
  .timeline-chart-container { min-height: 204px; }
  .lumads-timeline-svg { max-height: 210px; }
  .gallery-item-thumb { height: 128px; }
}

@media (max-width: 1400px) {
  .app-sidebar { width: 198px; min-width: 198px; }
  .main-content { padding: 20px 20px 32px; }
  .dash-kpi-card { padding-right: 11px; padding-left: 11px; }
  .dash-niche-label { display: none; }
}

@media (max-width: 1180px) {
  .dash-top-card { align-items: flex-start; flex-direction: column; gap: 12px; }
  .dash-top-right { width: 100%; }
  .dash-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-dual-row, .dash-bottom-row { grid-template-columns: minmax(0, 1fr); }
  .dash-secondary-row { grid-template-columns: minmax(0, 1fr); }
  .dash-timeline-panel, .dash-dist-panel { min-height: 0; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .app-sidebar { position: static; width: 100%; min-width: 0; height: auto; }
  .sidebar-brand { height: 56px; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; padding: 8px; }
  .nav-tab { width: auto; min-width: max-content; }
  .nav-tab.active::before { inset: auto 8px -8px; width: auto; height: 3px; }
  .sidebar-footer { display: none; }
  .app-topbar { position: static; height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .topbar-client-card { max-width: 100%; }
  .client-info-meta { align-items: flex-start; flex-direction: column; gap: 0; }
  .topbar-actions { flex-wrap: wrap; }
  .main-content { padding: 18px 14px 28px; }
  .dash-top-right { overflow-x: auto; }
  #dash-niche-pills.pill-group { flex: 0 0 auto; }
  .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-kpi-card { min-height: 105px; }
  .dash-sec-kpis-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-kpi-item:nth-child(2) { border-right: 0; }
  .sec-kpi-item:nth-child(-n+2) { padding-bottom: 8px; }
  .sec-kpi-item:nth-child(n+3) { padding-top: 8px; border-top: 1px solid #E9EDF2; }
  .dash-creatives-preview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-insight-card { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   VISÃO GERAL — reconstrução Codex
   Escopo isolado: dashboard; tokens locais mantêm o restante do app intacto.
   ===================================================================== */
.overview-page {
  --ov-blue: #0002FD;
  --ov-ink: #111A2C;
  --ov-muted: #53627A;
  --ov-soft: #7B8798;
  --ov-line: #E7EBF1;
  --ov-surface: #FFFFFF;
  --ov-canvas: #F5F7FA;
  --ov-space-1: 4px;
  --ov-space-2: 8px;
  --ov-space-3: 12px;
  --ov-space-4: 16px;
  --ov-space-5: 20px;
  --ov-radius: 10px;
  display: grid;
  gap: 14px;
  color: var(--ov-ink);
  font-family: var(--font-family, Inter, Arial, sans-serif);
}

.overview-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px 2px;
}

.overview-title-block h1 {
  margin: 0;
  color: var(--ov-ink);
  font-size: clamp(26px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.14;
}

.overview-title-block p {
  margin: 5px 0 0;
  color: var(--ov-muted);
  font-size: 13px;
  line-height: 1.4;
}

.overview-controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.overview-filter,
.overview-period {
  display: grid;
  min-width: 174px;
  gap: 4px;
  color: var(--ov-muted);
  font-size: 11px;
}

.overview-filter select {
  width: 100%;
  min-height: 36px;
  padding: 0 30px 0 11px;
  border: 1px solid #DFE5ED;
  border-radius: 7px;
  background: #FFF;
  color: var(--ov-ink);
  font: inherit;
  font-size: 12px;
}

.overview-period strong {
  display: flex;
  min-height: 36px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #DFE5ED;
  border-radius: 7px;
  background: #FFF;
  color: var(--ov-ink);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.overview-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.overview-kpi,
.overview-panel,
.overview-secondary-metrics,
.overview-insight {
  min-width: 0;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius);
  background: var(--ov-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.overview-kpi {
  display: flex;
  min-height: 128px;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 15px 15px;
}

.overview-kpi-label {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  color: #45536B;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.overview-kpi-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.overview-kpi-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: #EEF3FF;
  color: var(--ov-blue);
}

.overview-kpi-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-kpi-value {
  display: block;
  overflow: hidden;
  padding-left: 1px;
  color: #101828;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-analytics,
.overview-support-row,
.overview-bottom {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.overview-chart-panel { grid-column: span 7; }
.overview-ranking-panel { grid-column: span 5; }
.overview-table-panel { grid-column: span 7; }
.overview-creatives-panel { grid-column: span 5; }

.overview-panel {
  min-height: 0;
  padding: 15px 16px 13px;
}

.overview-chart-panel,
.overview-ranking-panel { min-height: 264px; }

.overview-panel-heading {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.overview-panel-heading h2 {
  overflow: hidden;
  margin: 0;
  color: var(--ov-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-legend {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  color: #46546B;
  font-size: 10px;
  white-space: nowrap;
}

.overview-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-bar { width: 10px; height: 10px; border-radius: 2px; background: #9FC2FF; }
.legend-line { width: 15px; height: 2px; position: relative; background: var(--ov-blue); }
.legend-line::after { position: absolute; top: -2px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ov-blue); content: ''; }

.overview-chart-panel .timeline-chart-container {
  display: flex;
  min-height: 195px;
  align-items: center;
  padding-top: 4px;
}

.overview-chart-panel .lumads-timeline-svg { display: block; width: 100%; max-height: 216px; overflow: visible; }
.overview-chart-panel .lumads-timeline-svg text { font-family: var(--font-family, Inter, Arial, sans-serif); }

.overview-ranking-heading { align-items: center; flex-wrap: wrap; }
.overview-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid #E7EBF1;
  border-radius: 7px;
  background: #F8FAFC;
}

.overview-tabs button {
  min-height: 27px;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #46546B;
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.overview-tabs button.active { background: var(--ov-blue); color: #FFF; }
.overview-tabs button:focus-visible { outline: 2px solid rgba(0, 2, 253, .25); outline-offset: 1px; }
.overview-ranking-panel .dist-chart-wrapper { min-height: 198px; }
.overview-ranking-panel .dist-rank-list { display: grid; gap: 5px; }
.overview-ranking-panel .dist-rank-row {
  display: grid;
  min-height: 34px;
  grid-template-columns: 34px minmax(85px, 1fr) minmax(60px, 1.35fr) 48px;
  align-items: center;
  gap: 9px;
  padding: 3px 2px;
  border: 0;
  border-bottom: 1px solid #EDF0F4;
  border-radius: 0;
  background: transparent;
}

.overview-ranking-panel .dist-rank-row:last-child { border-bottom: 0; }
.overview-ranking-panel .dist-rank-row:hover { background: #FAFBFD; }

.overview-ranking-panel .dist-rank-thumb { width: 32px; height: 32px; overflow: hidden; border-radius: 5px; background: #EEF1F5; }
.overview-ranking-panel .dist-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.overview-ranking-panel .dist-thumb-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #7C8798; font-size: 10px; font-weight: 600; }
.overview-ranking-panel .dist-rank-name { overflow: hidden; color: #344054; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.overview-ranking-panel .dist-bar-track { height: 22px; overflow: hidden; border-radius: 3px; background: transparent; }
.overview-ranking-panel .dist-bar-fill { height: 100%; min-width: 4px; border-radius: 3px; background: #6C98FF; }
.overview-ranking-panel .dist-rank-row:first-child .dist-bar-fill { background: #3F78F6; }
.overview-ranking-panel .dist-rank-metrics { min-width: 0; text-align: right; }
.overview-ranking-panel .dist-metric-val { color: var(--ov-ink); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.overview-ranking-panel .dist-metric-unit,
.overview-ranking-panel .dist-metric-share { display: none; }

.overview-secondary-metrics {
  display: grid;
  min-height: 82px;
  grid-column: span 8;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 10px 4px;
}

.overview-secondary-metrics > div { display: grid; min-width: 0; gap: 5px; padding: 0 13px; border-right: 1px solid #E9EDF2; }
.overview-secondary-metrics > div:last-child { border: 0; }
.overview-secondary-metrics span { overflow: hidden; color: #657289; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.overview-secondary-metrics strong { color: var(--ov-ink); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.1; }

.overview-insight {
  display: flex;
  min-height: 82px;
  grid-column: span 4;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-color: #DDE6FA;
  background: #F1F5FF;
}

.overview-insight-mark { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; background: #E0E9FF; color: var(--ov-blue); font-family: Georgia, serif; font-size: 17px; font-weight: 700; }
.overview-insight strong { color: #1746D1; font-size: 12px; font-weight: 650; }
.overview-insight p { margin: 4px 0 0; color: #34445F; font-size: 11px; line-height: 1.4; }

.overview-table-scroll { width: 100%; overflow-x: auto; }
.overview-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.overview-table th { padding: 8px 6px; border-bottom: 1px solid #E6EAF0; background: #F8F9FB; color: #536179; font-size: 9px; font-weight: 600; line-height: 1.25; text-align: left; }
.overview-table th:first-child { width: 31%; }
.overview-table th:not(:first-child) { width: 13.8%; }
.overview-table td { height: 38px; padding: 4px 6px; border-bottom: 1px solid #EDF0F4; color: #344054; white-space: nowrap; }
.overview-table tbody tr:last-child td { border-bottom: 0; }
.overview-table tbody tr:hover { background: #F8FAFC; }
.overview-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.overview-table td strong { font-weight: 650; }
.overview-ad-cell { display: flex; min-width: 0; align-items: center; gap: 8px; }
.overview-ad-cell > span:last-child { overflow: hidden; color: #273449; font-weight: 550; text-overflow: ellipsis; }
.overview-table-thumb { display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 4px; object-fit: cover; }
.overview-thumb-placeholder { background: #EEF1F5; }

.overview-text-button { padding: 3px 0; border: 0; background: transparent; color: var(--ov-blue); font: inherit; font-size: 11px; font-weight: 550; cursor: pointer; white-space: nowrap; }
.overview-creatives-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.overview-creative { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
.overview-creative-image { display: grid; width: 100%; aspect-ratio: 1.08 / 1; overflow: hidden; margin-bottom: 3px; place-items: center; border-radius: 6px; background: #EEF1F5; color: #758196; font-size: 10px; }
.overview-creative-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.overview-creative strong { width: 100%; overflow: hidden; color: #273449; font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.overview-creative > span { width: 100%; overflow: hidden; color: #667085; font-size: 9.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.overview-creative > span:first-of-type { color: #43516A; }

@media (min-width: 1700px) {
  .overview-page { gap: 15px; }
  .overview-kpis { gap: 12px; }
  .overview-kpi { min-height: 132px; padding: 15px 17px; }
  .overview-analytics, .overview-support-row, .overview-bottom { gap: 14px; }
  .overview-chart-panel, .overview-ranking-panel { min-height: 276px; }
  .overview-panel { padding: 17px 18px 15px; }
  .overview-chart-panel .lumads-timeline-svg { max-height: 226px; }
  .overview-secondary-metrics, .overview-insight { min-height: 88px; }
}

@media (max-width: 1399px) {
  .overview-page { gap: 11px; }
  .overview-kpis { gap: 8px; }
  .overview-kpi { min-height: 116px; padding: 11px 10px; }
  .overview-kpi-label { gap: 6px; font-size: 10px; letter-spacing: -.015em; }
  .overview-kpi-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .overview-kpi-value { font-size: clamp(19px, 1.65vw, 24px); }
  .overview-analytics, .overview-support-row, .overview-bottom { gap: 10px; }
  .overview-panel { padding: 13px 13px 11px; }
  .overview-ranking-panel .dist-rank-row { grid-template-columns: 30px minmax(72px, 1fr) minmax(44px, 1.1fr) 42px; gap: 6px; }
  .overview-ranking-panel .dist-rank-thumb { width: 28px; height: 28px; }
  .overview-tabs button { padding-inline: 6px; font-size: 9px; }
  .overview-table { font-size: 10px; }
  .overview-table th { padding-inline: 4px; font-size: 8px; }
  .overview-table td { padding-inline: 4px; }
  .overview-table-thumb { width: 26px; height: 26px; flex-basis: 26px; }
  .overview-ad-cell { gap: 5px; }
}

@media (max-width: 1050px) {
  .overview-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-chart-panel, .overview-ranking-panel { grid-column: span 12; }
  .overview-secondary-metrics { grid-column: span 12; }
  .overview-insight { grid-column: span 12; }
  .overview-table-panel { grid-column: span 12; }
  .overview-creatives-panel { grid-column: span 12; }
}

@media (max-width: 640px) {
  .overview-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .overview-controls { align-items: stretch; }
  .overview-filter, .overview-period { min-width: 0; flex: 1; }
  .overview-period strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
  .overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-kpi { min-height: 108px; }
  .overview-panel-heading { align-items: flex-start; flex-wrap: wrap; }
  .overview-legend { width: 100%; }
  .overview-ranking-panel .dist-rank-row { grid-template-columns: 30px minmax(75px, 1fr) minmax(48px, 1.1fr) 42px; }
  .overview-secondary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-secondary-metrics > div { min-height: 52px; justify-content: center; }
  .overview-secondary-metrics > div:nth-child(2) { border-right: 0; }
  .overview-secondary-metrics > div:nth-child(n+3) { border-top: 1px solid #E9EDF2; }
  .overview-creatives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-creative-image { aspect-ratio: 1.6 / 1; }
  .overview-table { min-width: 680px; }
}

/* =====================================================================
   IMPORTAÇÃO & DADOS — mesmo sistema visual da Visão Geral Codex
   ===================================================================== */
.import-page {
  --import-blue: #0002FD;
  --import-ink: #111A2C;
  --import-muted: #53627A;
  --import-soft: #7B8798;
  --import-line: #E7EBF1;
  --import-surface: #FFFFFF;
  --import-soft-bg: #F7F9FC;
  --import-radius: 10px;
  display: grid;
  gap: 14px;
  color: var(--import-ink);
  font-family: var(--font-family, Inter, Arial, sans-serif);
}

.import-page-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; padding: 0 2px 2px; }
.import-page-heading h1 { margin: 0; color: var(--import-ink); font-size: clamp(26px, 2vw, 30px); font-weight: 700; letter-spacing: -.04em; line-height: 1.14; }
.import-page-heading p { margin: 5px 0 0; color: var(--import-muted); font-size: 13px; line-height: 1.45; }
.import-panel { min-width: 0; padding: 16px; border: 1px solid var(--import-line); border-radius: var(--import-radius); background: var(--import-surface); box-shadow: 0 1px 2px rgba(16,24,40,.025); }
.import-section-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.import-section-heading h2 { margin: 0; color: var(--import-ink); font-size: 15px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.import-section-heading p { margin: 4px 0 0; color: #758196; font-size: 11px; line-height: 1.4; }
.import-section-heading.compact { margin-bottom: 10px; }
.import-upload-panel { padding: 15px 16px 16px; }
.import-upload-panel .dropzone {
  display: grid;
  min-height: 164px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 20px;
  border: 1px dashed #CCD5E2;
  border-radius: 8px;
  background: #FAFBFD;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.import-upload-panel .dropzone:hover,
.import-upload-panel .dropzone.dragover { border-color: var(--import-blue); background: #F5F7FF; }
.import-upload-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 1px; border-radius: 50%; background: #EEF3FF; color: var(--import-blue); }
.import-upload-icon svg { width: 20px; height: 20px; }
.import-upload-panel .dropzone-title { margin: 0; color: #202B3C; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; }
.import-upload-panel .dropzone-desc { margin: 0; color: #758196; font-size: 11px; line-height: 1.4; }
.import-upload-panel .btn { margin-top: 3px; }
.import-error-message { display: none; margin-top: 10px; padding: 9px 11px; border: 1px solid #F1D4D0; border-radius: 7px; background: #FFF8F7; color: #88443D; font-size: 12px; line-height: 1.4; }
.import-error-message.active { display: block; }

.import-file-summary { display: none; min-width: 0; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid #E2E8F0; border-radius: 9px; background: #FFF; }
.import-file-summary.active { display: flex; }
.import-file-status-mark { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; background: #EEF3FF; color: var(--import-blue); }
.import-file-status-mark svg { width: 16px; height: 16px; }
.import-file-main { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
.import-file-main strong { overflow: hidden; color: #273449; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.import-file-main span { color: #17834A; font-size: 10px; font-weight: 550; }
.import-file-meta { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px 15px; color: #68768C; font-size: 10px; }
.import-file-meta span:first-child { color: #344054; font-weight: 650; }

.import-results { display: none; min-width: 0; padding: 0; border: 0; background: transparent; }
.import-results.active { display: grid; gap: 11px; }
.import-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 8px 4px; border: 1px solid var(--import-line); border-radius: 9px; background: #FFF; box-shadow: 0 1px 2px rgba(16,24,40,.025); }
.import-summary-item { display: grid; min-width: 0; gap: 4px; padding: 4px 13px; border-right: 1px solid #E9EDF2; }
.import-summary-item:last-of-type { border-right: 0; }
.import-summary-item span { overflow: hidden; color: #69768B; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.import-summary-item strong { color: #172033; font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.1; }
.import-breakdown-count { align-self: center; justify-self: end; padding: 4px 8px; border-radius: 5px; background: #F3F5F8; color: #667085; font-size: 9px; }
.import-detail-grid { display: grid; min-width: 0; grid-template-columns: 5fr 7fr; gap: 11px; }
.import-detail-section { min-width: 0; padding: 14px; border: 1px solid var(--import-line); border-radius: 9px; background: #FFF; }
.recognized-metrics-list { display: flex; min-height: 44px; flex-wrap: wrap; align-content: flex-start; gap: 7px; }
.recognized-metric { display: inline-flex; min-height: 27px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #E7EBF1; border-radius: 6px; background: #FBFCFE; color: #405069; font-size: 10px; line-height: 1.2; }
.metric-check { color: #15824A; font-size: 11px; font-weight: 700; }
.import-empty-note { margin: 0; color: #7B8798; font-size: 11px; }
.import-mapping-section .import-section-heading { align-items: center; }
.mapping-status-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mapping-status-group { min-width: 0; overflow: hidden; border: 1px solid #EBEEF3; border-radius: 7px; background: #FFF; }
.mapping-status-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 7px 8px; border-bottom: 1px solid #EBEEF3; background: #F8F9FB; color: #4D5A70; font-size: 9px; font-weight: 600; line-height: 1.25; }
.mapping-status-group h3 span { color: #758196; font-variant-numeric: tabular-nums; }
.mapping-status-group ul { display: grid; max-height: 116px; overflow: auto; gap: 0; margin: 0; padding: 0 8px; list-style: none; }
.mapping-status-group li { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid #F0F2F5; color: #45536B; font-size: 9px; line-height: 1.25; }
.mapping-status-group li:last-child { border-bottom: 0; }
.mapping-status-group li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-status-group li small { color: #8791A1; font-size: 8px; white-space: nowrap; }
.mapping-status-group > p { margin: 0; padding: 9px 8px; color: #8A94A4; font-size: 9px; }
.mapping-status-group.automatic h3 { color: #345976; }
.mapping-status-group.manual h3 { color: #514B84; }
.mapping-status-group.review h3 { color: #76623A; }
.import-diagnostic-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 11px 13px; border: 1px solid #E7EBF1; border-radius: 8px; background: #F8FAFC; }
.import-diagnostic-summary > div { display: grid; min-width: 0; gap: 4px; }
.import-diagnostic-summary span { color: #7B8798; font-size: 9px; }
.import-diagnostic-summary strong { overflow: hidden; color: #3C4A60; font-size: 10px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.import-results .alert-box { align-items: flex-start; margin: 0; padding: 9px 11px; border-radius: 7px; font-size: 11px; line-height: 1.4; }
.import-results .breakdown-alert-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.import-results .alert-box strong { font-size: 11px; }

.import-client-panel { padding: 15px 16px 16px; }
.import-client-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 13px 14px; }
.import-client-fields .form-group,
.import-commercial-fields .form-group,
.import-analysis-fields .form-group { min-width: 0; margin: 0; }
.import-client-fields .form-label,
.import-commercial-fields .form-label,
.import-analysis-fields .form-label { margin-bottom: 5px; color: #4D5A70; font-size: 10px; font-weight: 550; }
.import-client-fields .form-input,
.import-client-fields .form-select,
.import-commercial-fields .form-input,
.import-commercial-fields .form-select,
.import-analysis-fields .form-textarea { min-height: 36px; padding: 8px 10px; border-color: #DFE5ED; border-radius: 7px; color: #202B3C; font-size: 11px; }
.import-client-fields .form-input:focus,
.import-client-fields .form-select:focus,
.import-commercial-fields .form-input:focus,
.import-commercial-fields .form-select:focus,
.import-analysis-fields .form-textarea:focus { border-color: var(--import-blue); box-shadow: 0 0 0 3px rgba(0,2,253,.08); }
.import-logo-field { grid-column: span 1; }
.import-logo-field .logo-upload-wrapper { display: flex; min-height: 36px; align-items: center; gap: 9px; }
.import-logo-field .client-logo-preview { width: 32px; height: 32px; flex: 0 0 32px; border-color: #E2E8F0; border-radius: 7px; background: #F8FAFC; }
.import-logo-field .client-logo-placeholder { font-size: 7px; }
.import-logo-field .btn { padding: 5px 8px; font-size: 9px; }
.import-field-hint { display: block; margin-top: 3px; color: #8A94A4; font-size: 8px; }
.import-objective-field { grid-column: span 3; }
.import-objective-field .pill-group { display: flex; flex-wrap: wrap; gap: 4px; }
.import-objective-field .pill-btn { min-height: 30px; padding: 5px 9px; border: 1px solid #E2E7EE; border-radius: 6px; background: #FFF; color: #536074; font-size: 9px; font-weight: 500; }
.import-objective-field .pill-btn:hover { background: #F7F9FC; }
.import-objective-field .pill-btn.active { border-color: #0002FD; background: #EEF3FF; color: #0002FD; }
.import-currency-field { grid-column: span 1; }

.import-support-grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 12px; }
.import-support-grid > .import-panel:first-child { grid-column: span 5; }
.import-support-grid > .import-panel:last-child { grid-column: span 7; }
.import-optional-label { padding: 4px 7px; border-radius: 5px; background: #F3F5F8; color: #738096; font-size: 9px; }
.import-commercial-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.import-commercial-fields > [hidden] { display: none !important; }
.import-revenue-field { grid-column: 1 / -1; }
.import-commercial-fields .form-textarea,
.import-analysis-fields .form-textarea { width: 100%; min-height: 82px; resize: vertical; }
.commercial-results-band,
.commercial-terms-customizer { grid-column: 1 / -1; }
.commercial-results-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #E1E8F2; border-radius: 8px; background: #F7F9FD; }
.commercial-result { display: grid; min-width: 0; gap: 5px; padding: 10px 11px; border-right: 1px solid #E5EAF2; }
.commercial-result:last-child { border-right: 0; }
.commercial-result span { overflow: hidden; color: #748096; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.commercial-result strong { overflow: hidden; color: #202B3C; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.commercial-terms-customizer { border-top: 1px solid #EDF0F4; padding-top: 9px; }
.commercial-terms-customizer summary { width: fit-content; color: #66748A; cursor: pointer; font-size: 10px; font-weight: 550; }
.commercial-terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.commercial-terms-grid .form-group { min-width: 0; }
.commercial-terms-grid .form-input { width: 100%; }
.import-analysis-panel .import-section-heading { align-items: center; }
.import-analysis-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.import-analysis-panel .btn { flex: 0 0 auto; }

.mapping-table { width: 100%; border-collapse: collapse; }
.mapping-table th { padding: 9px 10px; border-bottom: 1px solid #E7EBF1; background: #F8F9FB; color: #59677C; font-size: 10px; font-weight: 600; text-align: left; }
.mapping-table td { padding: 7px 10px; border-bottom: 1px solid #EDF0F4; color: #344054; font-size: 11px; }
.mapping-table tr:hover td { background: #FAFBFD; }
.mapping-table .form-select { min-height: 32px; padding: 5px 9px; border-color: #DFE5ED; border-radius: 6px; font-size: 10px; }

@media (min-width: 1700px) {
  .import-page { gap: 15px; }
  .import-panel { padding: 17px 18px; }
  .import-upload-panel .dropzone { min-height: 172px; }
  .import-summary-grid { padding-block: 10px; }
  .import-detail-section { padding: 15px; }
}

@media (max-width: 1399px) {
  .import-page { gap: 11px; }
  .import-panel { padding: 13px; }
  .import-upload-panel { padding: 13px; }
  .import-summary-item { padding-inline: 10px; }
  .import-detail-grid { gap: 9px; grid-template-columns: 5fr 7fr; }
  .import-detail-section { padding: 11px; }
  .mapping-status-groups { gap: 5px; }
  .mapping-status-group h3 { padding-inline: 6px; font-size: 8px; }
  .mapping-status-group ul { padding-inline: 6px; }
  .mapping-status-group li { font-size: 8px; }
  .import-client-fields { gap: 11px; }
  .import-objective-field .pill-btn { padding-inline: 7px; font-size: 8.5px; }
}

@media (max-width: 1000px) {
  .import-detail-grid { grid-template-columns: 1fr; }
  .import-support-grid > .import-panel:first-child,
  .import-support-grid > .import-panel:last-child { grid-column: span 12; }
  .import-client-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-objective-field { grid-column: 1 / -1; }
  .import-logo-field { grid-column: span 1; }
}

@media (max-width: 640px) {
  .import-page-heading h1 { font-size: 25px; }
  .import-page-heading p { font-size: 12px; }
  .import-file-summary { align-items: flex-start; flex-wrap: wrap; }
  .import-file-main { flex-basis: calc(100% - 45px); }
  .import-file-meta { width: 100%; justify-content: flex-start; padding-left: 41px; }
  .import-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .import-summary-item { min-height: 54px; justify-content: center; padding: 6px 8px; border-right: 1px solid #E9EDF2; }
  .import-summary-item:nth-child(2n) { border-right: 0; }
  .import-summary-item:last-of-type { grid-column: 1 / -1; border-top: 1px solid #E9EDF2; }
  .import-breakdown-count { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .mapping-status-groups { grid-template-columns: 1fr; }
  .mapping-status-group ul { max-height: 90px; }
  .import-diagnostic-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-client-fields { grid-template-columns: 1fr; }
  .import-logo-field, .import-objective-field, .import-currency-field { grid-column: 1; }
  .import-objective-field .pill-btn { font-size: 9px; }
   .import-commercial-fields, .import-analysis-fields { grid-template-columns: 1fr; }
   .commercial-results-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .commercial-result:nth-child(2) { border-right: 0; }
   .commercial-result:nth-child(-n+2) { border-bottom: 1px solid #E5EAF2; }
   .commercial-terms-grid { grid-template-columns: 1fr; }
  .import-revenue-field { grid-column: 1; }
  .import-analysis-panel .import-section-heading { align-items: flex-start; flex-direction: column; }
}

/* =====================================================================
   CRIATIVOS — lista compacta no sistema visual LUMADS Reports
   ===================================================================== */
.creative-page {
  --creative-blue: #0002FD;
  --creative-ink: #111827;
  --creative-muted: #667085;
  --creative-line: #E5E9F0;
  --creative-soft: #F7F9FC;
  display: grid;
  gap: 12px;
  color: var(--creative-ink);
  font-family: var(--font-family, Inter, Arial, sans-serif);
}
.creative-page-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 2px; }
.creative-page-heading h1 { margin: 0; color: #111A2C; font-size: clamp(26px, 2vw, 30px); font-weight: 700; letter-spacing: -.04em; line-height: 1.14; }
.creative-page-heading p { margin: 5px 0 0; color: #53627A; font-size: 13px; line-height: 1.45; }
.creative-page-heading .btn { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding-inline: 12px; }
.creative-page-heading .btn:disabled { cursor: not-allowed; opacity: .5; }
.creative-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; overflow: hidden; border: 1px solid var(--creative-line); border-radius: 9px; background: #FFF; box-shadow: 0 1px 2px rgba(16,24,40,.025); }
.creative-summary > div { display: grid; min-width: 0; gap: 5px; padding: 10px 15px; border-right: 1px solid #E9EDF2; }
.creative-summary > div:last-child { border-right: 0; }
.creative-summary span { overflow: hidden; color: #778397; font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.creative-summary strong { color: #142033; font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; line-height: 1.1; }
.creative-workspace { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--creative-line); border-radius: 10px; background: #FFF; box-shadow: 0 1px 2px rgba(16,24,40,.025); }
.creative-toolbar { display: flex; min-width: 0; align-items: center; gap: 9px; }
.creative-search { display: flex; min-width: 240px; max-width: 420px; height: 36px; flex: 1 1 340px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #DDE3EB; border-radius: 7px; background: #FFF; color: #758196; }
.creative-search:focus-within { border-color: #9AAEFF; box-shadow: 0 0 0 3px rgba(0,2,253,.08); }
.creative-search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.creative-search input { width: 100%; min-width: 0; height: 32px; border: 0; outline: 0; background: transparent; color: #344054; font: inherit; font-size: 12px; }
.creative-search input::placeholder { color: #98A2B3; }
.creative-filters { display: flex; min-width: 0; align-items: center; gap: 8px; }
.creative-filters .form-select { min-width: 164px; height: 36px; padding: 6px 28px 6px 10px; border: 1px solid #DDE3EB; border-radius: 7px; color: #344054; font-size: 11.5px; }
.creative-toolbar-foot { display: flex; min-height: 18px; align-items: center; justify-content: space-between; gap: 10px; }
.creatives-stats { color: #667085; font-size: 11px; }
.creatives-stats strong { color: #253044; font-weight: 650; font-variant-numeric: tabular-nums; }
.creative-bulk-feedback { display: none; color: #475467; font-size: 10.5px; text-align: right; }
.creative-bulk-feedback.active { display: block; }
.creatives-list { display: grid; min-width: 0; gap: 7px; }
.creative-row-card { display: grid; min-width: 0; grid-template-columns: 72px minmax(190px, 1.08fr) minmax(315px, 1.55fr) minmax(275px, 1.35fr); align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid #E8ECF1; border-radius: 8px; background: #FFF; transition: border-color .14s ease, background-color .14s ease; }
.creative-row-card:hover { border-color: #CDD6E3; background: #FCFDFE; }
.creative-row-card.drag-target-active { border-color: var(--creative-blue); background: #F5F7FF; }
.creative-row-thumb { display: grid; width: 72px; height: 68px; flex: 0 0 72px; place-items: center; overflow: hidden; padding: 3px; border: 1px solid #E4E8EF; border-radius: 6px; background: #F2F4F7; color: #738096; cursor: pointer; }
.creative-row-thumb.is-empty { border-style: dashed; background: #F8F9FB; }
.creative-row-thumb:hover { border-color: #9AAEFF; background: #F3F6FF; }
.creative-row-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumb-empty-label { display: grid; justify-items: center; gap: 3px; color: #7B8798; font-size: 9px; line-height: 1.1; }
.creative-row-info { display: grid; min-width: 0; align-content: center; gap: 5px; }
.creative-ad-name { display: -webkit-box; overflow: hidden; margin: 0; color: #172033; font-size: 12.5px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.creative-ad-meta { display: grid; min-width: 0; gap: 3px; margin: 0; }
.creative-ad-meta > span { display: flex; min-width: 0; align-items: baseline; gap: 5px; color: #667085; font-size: 9.5px; line-height: 1.25; }
.creative-ad-meta small { flex: 0 0 auto; color: #98A2B3; font-size: 9px; }
.creative-ad-meta strong { overflow: hidden; color: #596579; font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.creative-status-row { display: flex; min-width: 0; align-items: center; gap: 6px; }
.creative-status-indicator { display: inline-flex; max-width: 95px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid #E6EAF0; border-radius: 999px; background: #F6F7F9; color: #687386; font-size: 9px; font-weight: 600; line-height: 1.1; }
.creative-status-indicator::before { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #98A2B3; content: ""; }
.creative-status-indicator[data-status="ativo"] { border-color: #D5EBDD; background: #F1F8F3; color: #287A45; }
.creative-status-indicator[data-status="ativo"]::before { background: #35A65D; }
.creative-status-indicator[data-status="pausado"] { border-color: #E8E5DC; background: #F8F7F3; color: #776B4A; }
.creative-status-indicator[data-status="pausado"]::before { background: #B9A46C; }
.creative-status-indicator[data-status="encerrado"] { border-color: #E4E7EC; background: #F4F5F7; color: #626D7D; }
.creative-status-indicator[data-status="encerrado"]::before { background: #7B8798; }
.creative-status-indicator[data-status="em_teste"] { border-color: #DCE5FF; background: #F1F4FF; color: #315AC6; }
.creative-status-indicator[data-status="em_teste"]::before { background: #4D73E6; }
.creative-file-name { overflow: hidden; min-width: 0; color: #7B8798; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.creative-file-name.is-empty { color: #98A2B3; }
.creative-row-metrics { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.creative-row-metrics > div { display: grid; min-width: 0; gap: 5px; padding: 0 8px; border-left: 1px solid #EDF0F4; }
.creative-row-metrics > div:first-child { padding-left: 0; border-left: 0; }
.creative-row-metrics span { overflow: hidden; color: #8691A1; font-size: 8.5px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.creative-row-metrics strong { overflow: hidden; color: #202B3D; font-size: 10.5px; font-weight: 620; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.creative-row-management { display: grid; min-width: 0; gap: 5px; }
.creative-meta-controls { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.creative-control-label { display: grid; min-width: 0; gap: 2px; color: #8791A1; font-size: 8px; line-height: 1.1; }
.creative-control-label .form-select-sm { width: 100%; min-width: 0; height: 25px; padding: 3px 20px 3px 7px; border: 1px solid #E0E5EC; border-radius: 5px; background-color: #FFF; color: #465267; font-size: 9.5px; }
.creative-control-label .form-select-sm[data-status="ativo"] { border-color: #CDE6D5; background-color: #F6FBF7; color: #287A45; }
.creative-control-label .form-select-sm[data-status="em_teste"] { border-color: #D9E3FF; background-color: #F7F8FF; color: #315AC6; }
.creative-control-label .form-select-sm[data-status="pausado"] { border-color: #F0D998; background-color: #FFFAE8; color: #8A6415; }
.creative-control-label .form-select-sm[data-status="encerrado"] { background-color: #F4F5F7; color: #626D7D; }
.creative-control-label .form-select-sm[data-status="desconhecido"] { border-color: #E1E5EB; background-color: #F7F8FA; color: #667085; }
.creative-control-label .form-select-sm[data-quality="boa"] { border-color: #BFE3CC; background-color: #F1FAF4; color: #19713B; }
.creative-control-label .form-select-sm[data-quality="regular"] { border-color: #F0D998; background-color: #FFFAE8; color: #8A6415; }
.creative-control-label .form-select-sm[data-quality="ruim"] { border-color: #F1C5C3; background-color: #FFF4F3; color: #B54745; }
.creative-control-label .form-select-sm[data-quality="nao_informada"] { border-color: #E1E5EB; background-color: #F7F8FA; color: #667085; }
.creative-control-label .form-select-sm { appearance: none; -webkit-appearance: none; padding-right: 25px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; cursor: pointer; font-weight: 600; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.creative-control-label .form-select-sm:focus-visible { outline: 0; border-color: #889BFF; box-shadow: 0 0 0 3px rgba(0,2,253,.10); }
.creative-control-label .form-select-sm option { background: #FFF; color: #344054; font-weight: 500; }
.ad-meta-notes.form-input-sm { width: 100%; min-width: 0; height: 26px; padding: 4px 7px; border: 1px solid #E0E5EC; border-radius: 5px; background: #FFF; color: #344054; font-size: 9.5px; }
.ad-meta-notes.form-input-sm::placeholder { color: #A0A8B5; }
.creative-row-actions { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; }
.creative-report-toggle { display: inline-flex; min-width: 0; align-items: center; gap: 5px; color: #596579; font-size: 9px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.creative-report-toggle input { width: 13px; height: 13px; margin: 0; accent-color: #0002FD; }
.creative-image-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 4px; }
.creative-image-actions .btn { min-height: 25px; padding: 4px 7px; font-size: 9px; }
.creative-image-actions .btn-danger-ghost { color: #7F5960; }
.creative-empty-state { display: grid; min-height: 220px; justify-items: center; align-content: center; gap: 8px; padding: 24px; border: 1px dashed #D9E0EA; border-radius: 8px; background: #FBFCFE; text-align: center; }
.creative-empty-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 2px; border-radius: 50%; background: #EEF2FF; color: #0002FD; }
.creative-empty-icon svg { width: 20px; height: 20px; }
.creative-empty-state strong { color: #263348; font-size: 13px; font-weight: 620; }
.creative-empty-state > span:not(.creative-empty-icon) { color: #7B8798; font-size: 11px; }
.creative-empty-state .btn { margin-top: 4px; }
.creative-no-results { padding: 22px; border: 1px dashed #DDE3EB; border-radius: 7px; background: #FBFCFE; color: #667085; font-size: 11px; text-align: center; }
.creative-pending-panel { margin-top: 0; padding: 14px; border: 1px solid #E5E9F0; border-radius: 9px; background: #FFF; }
.creative-pending-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.creative-pending-heading h2 { margin: 0; color: #202B3D; font-size: 14px; font-weight: 650; }
.creative-pending-heading p { margin: 4px 0 0; color: #7B8798; font-size: 10.5px; }
.creative-pending-count { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 6px; border-radius: 999px; background: #F1F4F8; color: #596579; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.creative-pending-panel .unassociated-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; margin-top: 10px; }
.creative-pending-panel .unassociated-item { gap: 6px; padding: 8px; border-color: #E8ECF1; border-radius: 7px; background: #FBFCFE; }
.creative-pending-panel .unassociated-thumb { height: 76px; border-radius: 5px; background: #F0F2F5; }
.creative-pending-panel .unassociated-thumb img { object-fit: contain; }
.creative-pending-panel .unassociated-filename { color: #596579; font-size: 9px; }
.creative-pending-panel .select-associate-ad { min-height: 29px; border-color: #DDE3EB; border-radius: 5px; font-size: 10px !important; }
.creative-pending-panel .btn-discard-unassoc { align-self: flex-end !important; padding: 4px 6px; border-radius: 5px; font-size: 9px !important; }

/* Cores semânticas: destaque contido, compartilhado entre telas e relatório. */
.semantic-status, .semantic-quality { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 7px; border: 1px solid #E1E5EB; border-radius: 999px; background: #F7F8FA; color: #667085; font-size: 9px; font-weight: 650; line-height: 1.1; white-space: nowrap; }
.semantic-status::before, .semantic-quality::before { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; content: ""; }
.semantic-status[data-status="ativo"], .semantic-quality[data-quality="boa"] { border-color: #CDE6D5; background: #F1F8F3; color: #287A45; }
.semantic-status[data-status="em_teste"] { border-color: #D9E3FF; background: #F1F4FF; color: #315AC6; }
.semantic-status[data-status="pausado"], .semantic-quality[data-quality="regular"] { border-color: #F0D998; background: #FFFAE8; color: #8A6415; }
.semantic-status[data-status="encerrado"] { border-color: #E4E7EC; background: #F4F5F7; color: #626D7D; }
.semantic-quality[data-quality="ruim"] { border-color: #F1C5C3; background: #FFF4F3; color: #B54745; }
.semantic-status[data-status="desconhecido"], .semantic-quality[data-quality="nao_informada"] { border-color: #E1E5EB; background: #F7F8FA; color: #667085; }
.creative-status-indicator[data-status="pausado"] { border-color: #F0D998; background: #FFFAE8; color: #8A6415; }
.creative-status-indicator[data-status="pausado"]::before { background: #D99A21; }
.overview-kpi { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.overview-kpi:hover { border-color: #D7DEEA; box-shadow: 0 5px 16px rgba(16,24,40,.055); transform: translateY(-1px); }
.overview-kpi:nth-child(1) .overview-kpi-icon, .overview-kpi:nth-child(2) .overview-kpi-icon { background: #EEF3FF; color: #315AC6; }
.overview-kpi:nth-child(3) .overview-kpi-icon { background: #F3F4F6; color: #596579; }
.overview-kpi[data-tone="good"] .overview-kpi-icon, .overview-kpi[data-tone="good"] .overview-kpi-value { color: #287A45; }
.overview-kpi[data-tone="good"] .overview-kpi-icon { background: #EAF6EE; }
.overview-kpi[data-tone="attention"] .overview-kpi-icon, .overview-kpi[data-tone="attention"] .overview-kpi-value { color: #8A6415; }
.overview-kpi[data-tone="attention"] .overview-kpi-icon { background: #FBF3D8; }
.overview-kpi[data-tone="critical"] .overview-kpi-icon, .overview-kpi[data-tone="critical"] .overview-kpi-value { color: #B54745; }
.overview-kpi[data-tone="critical"] .overview-kpi-icon { background: #FFF0EF; }
.overview-kpi[data-tone="neutral"] .overview-kpi-value { color: #667085; }
.overview-kpi[data-tone="info"] .overview-kpi-value { color: #315AC6; }
.overview-kpi-value { letter-spacing: -.035em; }
.overview-insight { border-left: 3px solid #4D73E6; background: linear-gradient(100deg, #F7F9FF 0%, #FFF 72%); }
.overview-creative-badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 19px; }
.overview-creative-badges .semantic-status, .overview-creative-badges .semantic-quality { padding: 2px 5px; font-size: 8px; }

/* Uma única paleta semântica para métricas, estados de anúncio e resultados comerciais. */
[data-perf-state="positive"] { --perf-state: var(--perf-positive); --perf-state-bg: var(--perf-positive-bg); --perf-state-border: var(--perf-positive-border); }
[data-perf-state="warning"] { --perf-state: var(--perf-warning); --perf-state-bg: var(--perf-warning-bg); --perf-state-border: var(--perf-warning-border); }
[data-perf-state="negative"] { --perf-state: var(--perf-negative); --perf-state-bg: var(--perf-negative-bg); --perf-state-border: var(--perf-negative-border); }
[data-perf-state="info"] { --perf-state: var(--perf-info); --perf-state-bg: var(--perf-info-bg); --perf-state-border: var(--perf-info-border); }
[data-perf-state="neutral"] { --perf-state: var(--perf-neutral); --perf-state-bg: var(--perf-neutral-bg); --perf-state-border: var(--perf-neutral-border); }
.overview-kpi[data-perf-state], .kpi-card-exec[data-perf-state], .comm-kpi-box[data-perf-state],
.highlight-callout[data-perf-state], .commercial-result[data-perf-state] {
  color: var(--perf-state); background-color: var(--perf-state-bg); border-color: var(--perf-state-border);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.overview-kpi[data-perf-state] .overview-kpi-value,
.kpi-card-exec[data-perf-state] .kpi-exec-value,
.comm-kpi-box[data-perf-state] .comm-val,
.highlight-callout[data-perf-state] .callout-title,
.highlight-callout[data-perf-state] .callout-metric,
.commercial-result[data-perf-state] strong,
.creative-row-metrics strong[data-perf-state], .ad-exec-card .m-val[data-perf-state] { color: var(--perf-state); }
.overview-kpi[data-perf-state] .overview-kpi-icon,
.highlight-callout[data-perf-state] .callout-icon,
.highlight-callout[data-perf-state] .callout-badge { color: var(--perf-state); }
.semantic-status[data-perf-state], .semantic-quality[data-perf-state], .creative-status-indicator[data-perf-state] {
  border: 1px solid var(--perf-state-border); background: var(--perf-state-bg); color: var(--perf-state);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.commercial-result[data-perf-state] { border-right-color: var(--perf-state-border); }
.overview-kpi[data-perf-state], .kpi-card-exec[data-perf-state], .comm-kpi-box[data-perf-state], .highlight-callout[data-perf-state] { border-left: 3px solid var(--perf-state); }
.overview-secondary-metrics [data-perf-state], .sec-strip-item [data-perf-state] { color: var(--perf-state) !important; }
.overview-table td [data-perf-state], .overview-creative [data-perf-state], .creative-row-metrics strong[data-perf-state] { color: var(--perf-state) !important; }
.overview-creative [data-perf-state="positive"], .overview-creative [data-perf-state="warning"],
.overview-creative [data-perf-state="negative"], .overview-creative [data-perf-state="info"],
.overview-creative [data-perf-state="neutral"] { color: var(--perf-state) !important; }
.dist-metric-val[data-perf-state] { color: var(--perf-state) !important; }
.dist-bar-fill[data-perf-state] { background-color: var(--perf-state) !important; }
.import-file-main span[data-perf-state], .recognized-metric[data-perf-state], .mapping-status-group[data-perf-state] h3 { color: var(--perf-state); }
.recognized-metric[data-perf-state] { border-color: var(--perf-state-border); background: var(--perf-state-bg); }
.mapping-status-group[data-perf-state] { border-color: var(--perf-state-border); }
.import-summary-item strong[data-perf-state] { color: var(--perf-state); }
.import-summary-item[data-perf-state] { background: var(--perf-state-bg); border-color: var(--perf-state-border); }
.import-error-message[data-perf-state="negative"] { border-color: var(--perf-state-border); background: var(--perf-state-bg); color: var(--perf-state); }
.import-results .alert-box[data-perf-state="info"] { border: 1px solid var(--perf-state-border); background: var(--perf-state-bg); color: var(--perf-state); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.overview-secondary-metrics > div[data-perf-state], .creative-summary > div[data-perf-state] {
  color: var(--perf-state); background: var(--perf-state-bg); border: 1px solid var(--perf-state-border); border-radius: 7px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.overview-secondary-metrics > div[data-perf-state] { padding: 9px 12px; }
.overview-secondary-metrics > div[data-perf-state] span, .creative-summary > div[data-perf-state] span { color: var(--perf-state); }
.overview-secondary-metrics > div[data-perf-state] strong, .creative-summary > div[data-perf-state] strong { color: var(--perf-state) !important; }
.report-summary-metrics > div[data-perf-state] { border: 1px solid var(--perf-state-border); color: var(--perf-state); }
.report-summary-metrics > div[data-perf-state] span { color: var(--perf-state); }
.report-commercial-grid > div[data-perf-state] span { color: var(--perf-state); }
.kpi-card-exec[data-perf-state] .kpi-exec-label, .kpi-card-exec[data-perf-state] .kpi-exec-badge { color: var(--perf-state) !important; }
.kpi-card-exec[data-perf-state] .kpi-exec-badge { border-color: var(--perf-state-border); background: var(--perf-state-bg); }
.comm-kpi-box[data-perf-state] .comm-label { color: var(--perf-state); }
.sec-strip-item[data-perf-state] { border: 1px solid var(--perf-state-border); border-radius: 6px; background: var(--perf-state-bg); color: var(--perf-state); }
.sec-strip-item[data-perf-state] .strip-label, .sec-strip-item[data-perf-state] .strip-val { color: var(--perf-state) !important; }
.ad-exec-card .ad-metric-row[data-perf-state] { padding: 3px 5px; border: 1px solid var(--perf-state-border); border-radius: 4px; background: var(--perf-state-bg); }
.ad-exec-card .ad-metric-row[data-perf-state] .m-label, .ad-exec-card .ad-metric-row[data-perf-state] .m-val { color: var(--perf-state) !important; }

@media (min-width: 1700px) {
  .creative-page { gap: 14px; }
  .creative-workspace { gap: 12px; padding: 14px; }
  .creative-row-card { grid-template-columns: 82px minmax(230px, 1.12fr) minmax(390px, 1.55fr) minmax(310px, 1.35fr); gap: 14px; padding: 10px 13px; }
  .creative-row-thumb { width: 82px; height: 72px; flex-basis: 82px; }
  .creative-row-metrics > div { padding-inline: 10px; }
}
@media (max-width: 1399px) {
  .creative-row-card { grid-template-columns: 64px minmax(165px, 1fr) minmax(280px, 1.45fr) minmax(255px, 1.3fr); gap: 9px; padding: 8px 9px; }
  .creative-row-thumb { width: 64px; height: 62px; flex-basis: 64px; }
  .creative-row-metrics > div { padding-inline: 5px; }
  .creative-row-metrics span { font-size: 8px; }
  .creative-row-metrics strong { font-size: 9.5px; }
  .creative-image-actions .btn { padding-inline: 5px; font-size: 8.5px; }
}
@media (max-width: 1180px) {
  .creative-toolbar { flex-wrap: wrap; }
  .creative-search { max-width: none; }
  .creative-filters { flex: 0 0 auto; }
  .creative-row-card { grid-template-columns: 62px minmax(0, 1fr) minmax(250px, 1.2fr); }
  .creative-row-thumb { width: 62px; height: 60px; flex-basis: 62px; }
  .creative-row-metrics { grid-column: 2 / 4; grid-row: 2; }
  .creative-row-management { grid-column: 2 / 4; grid-row: 3; grid-template-columns: minmax(180px, .8fr) minmax(140px, 1fr) minmax(230px, 1.2fr); align-items: center; }
  .creative-row-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 760px) {
  .creative-page-heading { align-items: flex-start; flex-direction: column; }
  .creative-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creative-summary > div:nth-child(2) { border-right: 0; }
  .creative-summary > div:nth-child(n+3) { border-top: 1px solid #E9EDF2; }
  .creative-toolbar { align-items: stretch; flex-direction: column; }
  .creative-search { min-width: 0; flex-basis: auto; }
  .creative-filters { width: 100%; }
  .creative-filters .form-select { min-width: 0; flex: 1; }
  .creative-toolbar-foot { align-items: flex-start; flex-direction: column; }
  .creative-bulk-feedback { text-align: left; }
  .creative-row-card { grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 8px; padding: 9px; }
  .creative-row-thumb { width: 58px; height: 58px; flex-basis: 58px; }
  .creative-row-info { min-height: 58px; }
  .creative-row-metrics { grid-column: 1 / -1; grid-row: auto; min-height: 42px; }
  .creative-row-metrics > div { padding-inline: 6px; }
  .creative-row-metrics span { font-size: 7.5px; }
  .creative-row-metrics strong { font-size: 9px; }
  .creative-row-management { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr; }
  .creative-meta-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creative-row-actions { justify-content: space-between; }
}

/* Identidade semântica compartilhada para valores tabulares e métricas de criativos. */
.perf-value[data-perf-state] {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border: 1px solid var(--perf-state-border);
  border-radius: 4px;
  background-color: var(--perf-state-bg);
  color: var(--perf-state) !important;
  font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.perf-metric-card[data-perf-state] {
  min-width: 0;
  padding: 5px 7px !important;
  border: 1px solid var(--perf-state-border) !important;
  border-radius: 5px;
  background-color: var(--perf-state-bg) !important;
  color: var(--perf-state);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.perf-metric-card[data-perf-state] > span,
.perf-metric-card[data-perf-state] > strong { color: var(--perf-state) !important; }
.import-summary-item[data-perf-state] > span,
.commercial-result[data-perf-state] > span { color: var(--perf-state) !important; }
.commercial-result[data-perf-state] { border-right-color: var(--perf-state-border); }
.overview-table td .perf-value[data-perf-state],
.page-summary-table td .perf-value[data-perf-state],
.report-selected-ads-table td .perf-value[data-perf-state] { border-color: var(--perf-state-border); }

/* Fluxo de clientes, histórico e comparação de relatórios */
.topbar-client-card { position: relative; }
.client-switcher { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 650; cursor: pointer; }
.client-switcher span { color: #788397; font-size: 12px; }
.client-switcher:focus-visible { outline: 2px solid var(--lumads-blue); outline-offset: 3px; border-radius: 3px; }
.client-switcher-menu { position: absolute; z-index: 50; top: calc(100% + 10px); left: 0; display: grid; min-width: 250px; gap: 4px; padding: 7px; border: 1px solid #E4E9F0; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(20,31,51,.16); }
.client-switcher-menu[hidden] { display: none; }
.client-menu-item, .client-menu-action { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #29354A; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.client-menu-item:hover, .client-menu-action:hover { background: #F3F6FB; }
.client-menu-item.is-active { background: #EEF3FF; color: #0002FD; font-weight: 650; }
.client-menu-actions { margin-top: 4px; padding-top: 4px; border-top: 1px solid #E9EDF2; }
.client-menu-action { color: #0002FD; font-weight: 600; }
.topbar-actions #btn-save-report { white-space: nowrap; }
.comparison-panel { max-width: 1200px; margin: 0 auto 28px; padding: 20px; border: 1px solid #E3E9F2; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(23,35,56,.05); }
.comparison-panel[hidden] { display: none; }
.comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.comparison-heading h2 { margin: 0; color: #202C40; font-size: 16px; }
.comparison-heading p { margin: 4px 0 0; color: #748197; font-size: 12px; }
.comparison-controls { display: flex; align-items: center; gap: 8px; }
.comparison-controls .form-select { min-width: 240px; }
.comparison-warning { margin: 0 0 12px; padding: 9px 12px; border: 1px solid #F0D9A9; border-radius: 7px; background: #FFF8E9; color: #805A12; font-size: 12px; }
.comparison-table-wrap { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.comparison-table th, .comparison-table td { padding: 9px 10px; border-bottom: 1px solid #EDF0F4; text-align: right; white-space: nowrap; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; }
.comparison-table th { color: #69768A; font-size: 11px; font-weight: 600; }
.comparison-delta { font-weight: 650; }
.comparison-delta.is-favorable { color: #168348; }
.comparison-delta.is-unfavorable { color: #B94742; }
.comparison-delta.is-context { color: #3763CD; }
.client-modal-box, .clients-manage-box, .report-history-box { width: min(760px, calc(100vw - 32px)); max-height: min(82vh, 760px); overflow: auto; }
.client-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.client-logo-form { grid-column: 1 / -1; }
.client-logo-form img { width: 80px; height: 80px; margin-top: 10px; border: 1px solid #E2E7EF; border-radius: 8px; object-fit: contain; }
.clients-manage-list, .report-history-list { display: grid; gap: 8px; }
.client-manage-row, .report-history-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px; border: 1px solid #E8ECF2; border-radius: 8px; }
.client-manage-meta, .report-history-meta { display: grid; min-width: 0; gap: 4px; }
.client-manage-meta strong, .report-history-meta strong { overflow: hidden; color: #28354A; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.client-manage-meta small, .report-history-meta small { color: #778397; font-size: 11px; }
.client-manage-actions, .report-history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.history-action-btn { padding: 6px 8px; border: 1px solid #DDE3EB; border-radius: 6px; background: #fff; color: #36445A; font: inherit; font-size: 11px; cursor: pointer; }
.history-action-btn:hover { border-color: #B9C6DB; background: #F8FAFD; }
.history-action-btn.is-danger { color: #B94742; }
.history-empty { padding: 26px 16px; border: 1px dashed #D8DFE9; border-radius: 8px; color: #778397; text-align: center; font-size: 12px; }
.import-analysis-fields .form-textarea { min-height: 220px; padding: 14px 15px; font-size: 14px; line-height: 1.65; resize: none; overflow-y: hidden; }
.import-analysis-fields .form-label { margin-bottom: 8px; font-size: 12px; }
.report-page-comparison { margin-bottom: 5mm; padding: 3mm 4mm; border: 1px solid #DAE4FA; border-radius: 5px; background: #F5F8FF; color: #3E557F; font-size: 8pt; }
.report-page-comparison strong { color: #284A9B; }
@media (max-width: 760px) {
  .client-form-grid { grid-template-columns: 1fr; }
  .client-logo-form { grid-column: auto; }
  .comparison-heading { align-items: stretch; flex-direction: column; }
  .comparison-controls { align-items: stretch; flex-direction: column; }
  .comparison-controls .form-select { min-width: 0; }
  .client-manage-row, .report-history-row { grid-template-columns: 1fr; }
  .client-manage-actions, .report-history-actions { justify-content: flex-start; }
  .topbar-actions #btn-save-report { display: none; }
}