/* ============================================================
   IZZAT HUB v12+ — Estilos para Anúncios Meta/Google,
   Comentários FB/IG e Wizard de Disparo.
   Usa design tokens do design-tokens.css (light mode).
   Sem cores hardcoded; sem laranja como cor primária.
   ============================================================ */

.hub-section { padding: 0; }
.hub-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  color: var(--tx-1);
}
.hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--tx-1);
  letter-spacing: -0.01em;
}
.hub-subtitle {
  margin: 4px 0 0;
  color: var(--tx-3);
  font-size: var(--fs-base);
}
.hub-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Inputs / selects */
.hub-select,
.hub-input,
.hub-textarea {
  padding: 8px 12px;
  border-radius: var(--rd-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--tx-1);
  font-size: var(--fs-base);
  font-family: var(--font);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: auto;
}
.hub-input,
.hub-textarea { width: 100%; }
.hub-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.hub-select:hover,
.hub-input:hover,
.hub-textarea:hover {
  border-color: var(--border-hover);
}
.hub-select:focus,
.hub-input:focus,
.hub-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}

/* Botões */
.hub-btn-primary {
  padding: 9px 16px;
  border-radius: var(--rd-md);
  border: none;
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  font-family: var(--font);
}
.hub-btn-primary:hover {
  background: var(--primary-hover);
}
.hub-btn-primary:active { transform: translateY(1px); }

.hub-btn-secondary {
  padding: 9px 14px;
  border-radius: var(--rd-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--tx-1);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hub-btn-secondary:hover {
  background: var(--bg-2);
  border-color: var(--border-hover);
}

.hub-btn-sm {
  font-size: var(--fs-sm);
  padding: 5px 10px;
  border-radius: var(--rd-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--tx-1);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--dur) var(--ease);
}
.hub-btn-sm:hover { background: var(--bg-2); }

.hub-link,
.hub-link-sm {
  color: var(--tx-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hub-link-sm { font-size: var(--fs-sm); }
.hub-link:hover,
.hub-link-sm:hover { color: var(--primary); }

/* KPI grid */
.hub-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.hub-kpi {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--rd-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hub-kpi:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.hub-kpi-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--tx-3);
  font-weight: var(--fw-medium);
}
.hub-kpi-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-top: 6px;
  color: var(--tx-1);
  line-height: 1.2;
}

/* Cards genéricos */
.hub-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--rd-lg);
  box-shadow: var(--shadow-1);
}
.hub-table-wrap { overflow: hidden; }

/* Tabela */
.hub-table {
  width: 100%;
  border-collapse: collapse;
}
.hub-th {
  background: var(--bg-3);
  padding: 11px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.hub-tr { transition: background var(--dur) var(--ease); }
.hub-tr:hover { background: var(--bg-3); }
.hub-td {
  padding: 11px 14px;
  font-size: var(--fs-base);
  color: var(--tx-1);
  border-bottom: 1px solid var(--border);
}

/* Empty / loading / error / hint */
.hub-empty,
.hub-loading {
  padding: 22px 18px;
  color: var(--tx-3);
  font-size: var(--fs-base);
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--rd-lg);
}
.hub-loading { grid-column: 1 / -1; }
.hub-error {
  padding: 12px 14px;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  border-radius: var(--rd-md);
  font-size: var(--fs-base);
}
.hub-hint {
  padding: 12px 14px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--rd-md);
  margin-bottom: 14px;
  color: var(--tx-2);
  font-size: var(--fs-base);
}
.hub-info {
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--rd-md);
  color: var(--tx-2);
  font-size: var(--fs-base);
}

/* Lista (comentários etc) */
.hub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Comentário */
.hub-comment {
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hub-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  color: var(--tx-inverse);
  flex-shrink: 0;
  font-size: var(--fs-md);
  background: var(--primary);
}
.hub-avatar-fb { background: #1877F2; }
.hub-avatar-ig { background: linear-gradient(135deg, #F58529, #DD2A7B 50%, #8134AF); }
.hub-comment-body { flex: 1; min-width: 0; }
.hub-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  align-items: baseline;
}
.hub-comment-author {
  color: var(--tx-1);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.hub-comment-meta {
  color: var(--tx-3);
  font-size: var(--fs-xs);
}
.hub-comment-msg {
  color: var(--tx-1);
  font-size: var(--fs-base);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 8px;
}
.hub-comment-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Wizard steps (broadcast) */
.hub-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.hub-step {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--rd-md);
  background: var(--bg-1);
  color: var(--tx-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.hub-step.active {
  background: var(--bg-1);
  color: var(--tx-1);
  border-color: var(--primary);
  font-weight: var(--fw-semibold);
}
.hub-step.done {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
}

.hub-step-body {
  padding: 18px;
  margin-bottom: 14px;
}
.hub-step-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.hub-label {
  display: block;
  color: var(--tx-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
}

/* Radio cards (selecionar lista, canal, template) */
.hub-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--rd-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-1);
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hub-radio-row:hover { border-color: var(--border-hover); background: var(--bg-3); }
.hub-radio-row.selected { border-color: var(--primary); background: var(--bg-3); }
.hub-radio-row input[type="radio"] { accent-color: var(--primary); }
.hub-radio-label { flex: 1; color: var(--tx-1); font-size: var(--fs-base); font-weight: var(--fw-medium); }
.hub-radio-meta { color: var(--tx-3); font-size: var(--fs-sm); }

/* Summary / preview no step 4 */
.hub-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-base);
  color: var(--tx-1);
}
.hub-summary-row strong { color: var(--tx-2); margin-right: 4px; font-weight: var(--fw-semibold); }
.hub-summary-preview {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--rd-md);
  padding: 14px;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tx-1);
}

/* Progress bar */
.hub-progress-label { color: var(--tx-1); font-size: var(--fs-base); margin-bottom: 10px; }
.hub-progress-bar {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}
.hub-progress-fill {
  background: var(--primary);
  height: 100%;
  width: 0%;
  transition: width 0.4s var(--ease);
  border-radius: 999px;
}
.hub-progress-stats {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  color: var(--tx-2);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.hub-stat-success { color: var(--success); }
.hub-stat-danger  { color: var(--danger); }
.hub-stat-muted   { color: var(--tx-3); }
.hub-stat-pct {
  margin-left: auto;
  color: var(--tx-1);
  font-weight: var(--fw-semibold);
}

/* Meta empty state */
.meta-empty-state {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  min-height: 260px;
  padding: 26px;
  align-items: start;
  background:
    linear-gradient(135deg, rgba(0, 122, 255, 0.045), rgba(255, 255, 255, 0.92) 38%),
    var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--rd-lg);
}
.meta-empty-state__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.meta-empty-state__eyebrow {
  margin: 0 0 6px;
  color: var(--tx-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.meta-empty-state h2 {
  margin: 0;
  color: var(--tx-1);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}
.meta-empty-state p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--tx-2);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.meta-empty-state__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.meta-empty-state__grid div {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--rd-md);
  background: rgba(255,255,255,0.72);
}
.meta-empty-state__grid strong {
  display: block;
  color: var(--tx-1);
  font-size: 13px;
  margin-bottom: 6px;
}
.meta-empty-state__grid span {
  color: var(--tx-3);
  font-size: 12px;
  line-height: 1.35;
}
.meta-empty-state__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.meta-empty-state__gate {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 168, 110, 0.22);
  background: rgba(16, 168, 110, 0.10);
  color: var(--success, #10A86E);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .meta-empty-state {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }
  .meta-empty-state__grid {
    grid-template-columns: 1fr;
  }
}