/* ══════════════════════════════════════════════════════════════════
   Redesign v3 — Componentes (base no mockup / Design System)
   Restyla as classes já existentes das páginas para o novo visual,
   sem mudar markup nem IDs (a lógica continua igual).
   ══════════════════════════════════════════════════════════════════ */

/* ── Header claro (mockup) ── */
header { padding: 0 28px !important; }
.header-inner { min-height: 64px; max-width: none !important; gap: 12px; }
.header-ctx { gap: 10px !important; }
.header-ctx > label[for="clienteTopo"] { color: var(--text-muted); font-size: 13px; }
#clienteTopo, .header-ctx select {
  height: 38px; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 0 10px; font-size: 13px; background: var(--bg-card); color: var(--text); cursor: pointer;
}
.badge-painel {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 0;
}
.badge-painel.modo-teste { background: var(--warning-soft); color: var(--warning); }
.badge-painel.modo-prod  { background: var(--success-soft); color: var(--success); }
.btn-pausar {
  height: 38px; padding: 0 14px; border: 1px solid #f0c9c2; border-radius: 9px;
  background: #fdf1ef; color: var(--danger); font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer;
}
.btn-pausar.ativo { background: var(--success-soft); border-color: transparent; color: var(--success); }
.busca-global {
  height: 38px; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 0 12px; font-size: 13px; background: var(--bg-card); color: var(--text); min-width: 200px;
}
.btn-notif-bell {
  width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg-card); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-notif-bell:hover { background: var(--bg-overlay); }
header .btn.btn-sm, #btnSair {
  height: 38px; padding: 0 15px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
header .btn.btn-sm:hover, #btnSair:hover { background: var(--bg-overlay); }

/* ── main / cabeçalho de página ── */
main { max-width: 1360px !important; padding: 28px 32px 60px !important; }
.page-header { margin-bottom: 22px; }
.page-subtitle { color: var(--text-muted); font-size: 14px; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 12px; }

/* ── Segmented / pill tabs (período + A/B/C/D) — alta especificidade
   para vencer o <style> inline do index (.etapas-tabs .etapa-tab...) ── */
.resumo-filtros, .etapas-panel .etapas-tabs {
  display: inline-flex !important; align-items: center; gap: 4px;
  background: var(--bg-overlay); border-radius: 9px; padding: 3px; margin-bottom: 0;
}
.resumo-filtros { margin-bottom: 16px; }
.btn-periodo, .etapas-panel .etapas-tabs .etapa-tab {
  height: 30px; padding: 0 14px; border: 0 !important; border-radius: 7px; background: transparent !important;
  color: var(--text-muted) !important; font-weight: 500; font-size: 13px; font-family: inherit; cursor: pointer;
}
.btn-periodo:hover, .etapas-panel .etapas-tabs .etapa-tab:hover { color: var(--text) !important; }
.btn-periodo.ativo, .etapas-panel .etapas-tabs .etapa-tab.ativo {
  background: var(--bg-card) !important; color: var(--text) !important; font-weight: 600; box-shadow: var(--shadow-sm);
}

/* ── KPIs (label em cima, valor embaixo — mockup) ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-card {
  display: flex; flex-direction: column-reverse; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
}
.kpi-card:hover { border-color: var(--border-strong); text-decoration: none; }
.kpi-card .num { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.kpi-card .label { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.kpi-card.critico .num { color: var(--danger); }

/* ── Painéis / cards ── */
.panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; font-size: 16px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.panel-body { padding: 16px 20px; }
.panel-subtitle { color: var(--text-subtle); font-size: 13px; }
.panel-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
.etapas-panel .panel-head { border-bottom: 0; padding-bottom: 4px; }
.etapas-panel .panel-body { padding-top: 4px; }
.dashboard-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dashboard-row { grid-template-columns: 1fr; } }

/* ── Funil (Performance por etapa) — especificidade .etapa-row .X para
   vencer o <style> inline do index ── */
.etapas-panel .etapa-row, .funis-grid .etapa-row {
  display: flex; align-items: center; gap: 16px; padding: 9px 0; margin: 0;
}
.etapa-row.clickable { cursor: pointer; border-radius: 8px; padding: 9px 8px !important; }
.etapa-row.clickable:hover { background: var(--bg-overlay); }
.etapa-row .etapa-label { width: 30px; font-weight: 600; font-size: 14px; color: var(--text); border: 0; }
.etapa-row .etapa-bar-bg { flex: 1; height: 10px; border-radius: 999px; background: #f0f0ec; overflow: hidden; }
.etapa-row .etapa-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.etapa-row .etapa-num { min-width: 160px; text-align: right; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.etapa-sequencia-titulo { font-size: 11px !important; font-weight: 600; color: var(--text-subtle) !important; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; border-bottom: 0 !important; padding-bottom: 0 !important; }
.funis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

/* ── Tabela (fila / próximos envios) ── */
.fila-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fila-table th {
  text-align: left; padding: 11px 20px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-subtle); font-weight: 600; background: var(--bg-subtle);
}
.fila-table td { padding: 13px 20px; border-top: 1px solid var(--border); color: var(--text); }
.fila-table tbody tr:hover { background: var(--bg-subtle); }
.fila-table .hora { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.fila-table .vazio { padding: 28px; text-align: center; color: var(--text-subtle); }

/* ── Saúde do sistema / Alertas ── */
.saude-list .item, .alertas-list .item {
  display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text);
}
.saude-list .item:first-child, .alertas-list .item:first-child { border-top: 0; }
.saude-list .item .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--text-subtle); flex: 0 0 9px; }
.saude-list .item.ok .dot { background: var(--success); }
.saude-list .item.erro .dot, .saude-list .item.critico .dot { background: var(--danger); }
.alertas-list .item.critico { color: var(--danger); }
.alertas-list .vazio { color: var(--text-subtle); font-size: 13px; padding: 8px 0; }

/* ── Banner Evolution ── */
.banner-evolution {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 18px;
  background: var(--danger-soft); border: 1px solid #f0c9c2; border-radius: 12px; color: var(--danger); font-size: 14px;
}

/* ── Painel: colunas do dashboard (mockup: 1.6fr | 1fr) ── */
.dashboard-col-main, .dashboard-col-side { min-width: 0; display: flex; flex-direction: column; }
.dashboard-col-main .etapas-panel { margin-top: 0 !important; }
.dashboard-col-main > .panel, .dashboard-col-side > .panel { margin-bottom: 16px; }

/* ══ Telas-lista (Empresas, Contatos, Campanhas, etc.) ══════════════ */
/* Busca + seletores (mockup: 42px, radius 10, ring no foco) */
.toolbar { align-items: center; gap: 12px; margin-bottom: 16px; }
.search-input, .filter-status, .toolbar select, .pagination-bar select {
  height: 42px; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 0 14px; font-size: 14px; background: var(--bg-card); color: var(--text); font-family: inherit;
}
.filter-status, .toolbar select { cursor: pointer; }
.search-input:focus, .filter-status:focus, .toolbar select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-input::placeholder { color: var(--text-subtle); }

/* Tabelas de lista — cabeçalho e hover no padrão do mockup */
.table-wrap { border-radius: 14px; box-shadow: var(--shadow-sm); }
.table-wrap th {
  padding: 13px 20px !important; font-size: 11px !important; letter-spacing: .05em;
  color: var(--text-subtle) !important; background: var(--bg-subtle) !important; border-bottom: 1px solid var(--border) !important;
}
.table-wrap td { padding: 14px 20px !important; border-bottom: 1px solid var(--border) !important; }
.table-wrap tbody tr:hover { background: var(--bg-subtle) !important; }

/* Paginação */
.pagination-nav button, .pagination-bar button {
  width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-card); color: var(--text); cursor: pointer;
}
.pagination-nav button:hover:not(:disabled) { background: var(--bg-overlay); border-color: var(--border-strong); color: var(--text); }
.pagination-info { font-size: 13px; color: var(--text-subtle); }

/* Links de empresa/cliente */
.link-empresa, .link-cliente, .link-contato { color: var(--accent); font-weight: 500; text-decoration: none; }
.link-empresa:hover, .link-cliente:hover, .link-contato:hover { text-decoration: underline; }

/* Header: esconde o "← Voltar ao início" (a navegação é a sidebar) */
.back-link { display: none; }