.config-integration-status {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  background: #f8fafc;
}

.config-integration-status p {
  margin: 4px 0;
}

/* Facebook connection card – configurações integrações */
.fb-connection-card {
  margin-top: 14px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 174, 239, 0.2);
  background: linear-gradient(135deg, #f8fcff 0%, #f0f9ff 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.fb-connection-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.fb-connection-avatar-wrap {
  flex-shrink: 0;
}
.fb-connection-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 174, 239, 0.3);
}
.fb-connection-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #00AEEF, #00C2F4);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}
.fb-connection-info {
  min-width: 0;
}
.fb-connection-name {
  margin: 0 0 6px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--brand-dark, #222831);
}
.fb-connection-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.12);
  margin-bottom: 6px;
}
.fb-connection-mode {
  margin: 0;
  font-size: 13px;
}
.fb-connection-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 174, 239, 0.12);
  border-bottom: 1px solid rgba(0, 174, 239, 0.12);
}
.fb-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fb-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}
.fb-meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-dark, #222831);
}
.fb-connection-token-warning {
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #92400e;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.fb-connection-token-warning strong {
  font-weight: 600;
}
.fb-connection-error {
  margin: 0 0 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
}
.fb-connection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.fb-action-form {
  margin: 0;
}
.fb-connection-hint {
  margin: 0 0 12px 0;
  font-size: 13px;
}
.fb-connection-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fb-connection-card--empty {
  text-align: center;
  padding: 28px;
}
.fb-connection-empty-text {
  margin: 0 0 16px 0;
  color: var(--muted, #64748b);
}

/* Token status badges */
.fb-connection-badge--valid { background: #d1fae5; color: #065f46; }
.fb-connection-badge--invalid { background: #fee2e2; color: #991b1b; }
.fb-connection-badge--expired { background: #fef3c7; color: #92400e; }
.fb-connection-badge--revoked { background: #e5e7eb; color: #6b7280; }
.fb-connection-source {
  font-size: 12px;
  margin-left: 6px;
}

/* Validate result */
.fb-validate-result {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.fb-validate-result--ok {
  background: #d1fae5;
  color: #065f46;
}
.fb-validate-result--error {
  background: #fee2e2;
  color: #991b1b;
}

/* Manual token form */
.fb-manual-token-details {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 0;
  background: var(--bg-card, #fff);
}
.fb-manual-token-details[open] {
  padding: 16px;
}
.fb-manual-token-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fb-manual-token-summary::before {
  content: '▸';
  transition: transform 0.2s;
}
.fb-manual-token-details[open] > .fb-manual-token-summary::before {
  transform: rotate(90deg);
}
.fb-manual-token-summary::-webkit-details-marker { display: none; }
.fb-manual-token-form {
  margin-top: 8px;
}
.fb-manual-token-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  margin-bottom: 6px;
}
.fb-manual-token-input-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.fb-manual-token-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
  background: var(--bg-surface, #f8fafc);
  color: var(--text-primary, #1e293b);
  transition: border-color 0.2s;
}
.fb-manual-token-input:focus {
  outline: none;
  border-color: var(--brand, #34e780);
  box-shadow: 0 0 0 3px rgba(52, 231, 128, 0.15);
}
.fb-manual-token-toggle {
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  transition: background 0.15s;
}
.fb-manual-token-toggle:hover {
  background: var(--bg-surface, #f8fafc);
}
.fb-manual-token-hint {
  font-size: 12px;
  margin: 0 0 12px 0;
}

.colab-perfil-photo-hint,
.colab-editar-photo-hint,
.colab-afiliado-photo-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  /* Tipografia – Inter, padrão SaaS/tech */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  /* Identidade visual – logo Fluydon + #34e780 */
  --primary: #00AEEF;
  --primary-light: #00C2F4;
  --primary-aqua: #00D4FF;
  --accent-green: #34e780;
  --brand-dark: #222831;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #222831;
  --muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  --sidebar: 240px;
  --sidebar-collapsed: 72px;
  --sidebar-bg: #fafbfc;
  --sidebar-text: #222831;
  --sidebar-muted: #64748b;
  --sidebar-border: #e5e7eb;
  --sidebar-active: rgba(0, 174, 239, 0.1);
  --sidebar-active-border: #00AEEF;
  --sidebar-radius: 14px;
  --card-radius: 16px;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --transition-fast: 0.15s var(--ease-smooth);
  --transition-normal: 0.25s var(--ease-smooth);
  --transition-slow: 0.35s var(--ease-smooth);
  --status-delivered: #059669;
  --status-processed: #d97706;
  --status-cancelled: #dc2626;
  --fluydon-green: #34e780;
  /* ── Tokens adicionados pelo Design System v2 ── */
  --card: var(--surface);
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  --surface-hover: rgba(0, 0, 0, 0.028);
  --border-subtle: rgba(0, 0, 0, 0.055);
  --gradient-primary: linear-gradient(135deg, #00AEEF 0%, #00D4FF 100%);
  --gradient-success: linear-gradient(135deg, #22c55e 0%, #34e780 100%);
  --shadow-focus: 0 0 0 3px rgba(0, 174, 239, 0.18);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.09);

  /* ── Dashboard Visual Upgrade – tokens unificados ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card-rest: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-card-glow-blue: 0 4px 16px rgba(0, 174, 239, 0.12);
  --shadow-card-glow-green: 0 4px 16px rgba(5, 150, 105, 0.12);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-normal: 260ms;
  --duration-slow: 360ms;
}

/* ── Config Design System v2 — keyframes ── */
@keyframes cfgSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cfgPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.96); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes cfgShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  min-width: 0;
}

.app-body {
  background: var(--bg);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  border-radius: 0 var(--sidebar-radius) var(--sidebar-radius) 0;
  padding: 14px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 0.22s var(--ease-smooth), padding 0.22s var(--ease-smooth);
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -14px -12px 12px -12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  flex: 1;
}

.brand-logo {
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.brand-logo-icon {
  display: none;
}

.sidebar-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--sidebar-border);
  background: var(--surface);
  color: var(--sidebar-muted);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.sidebar-toggle:hover {
  background: rgba(0, 174, 239, 0.08);
  color: var(--primary);
  border-color: rgba(0, 174, 239, 0.3);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.12);
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sidebar-toggle-icon {
  line-height: 0;
  transition: transform 0.22s var(--ease-smooth), opacity 0.15s;
}
.sidebar-toggle-icon-desktop {
  display: block;
}
.sidebar-toggle:hover .sidebar-toggle-icon {
  transform: translateX(-1px);
}
.sidebar-collapsed .sidebar-toggle-icon-desktop {
  transform: rotate(180deg);
}
.sidebar-collapsed .sidebar-toggle:hover .sidebar-toggle-icon-desktop {
  transform: rotate(180deg) translateX(-1px);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  /* overflow removido: cortava o sidebar-lembretes-dropdown; se o menu crescer muito, considerar overflow-y: auto no .sidebar */
  padding: 0 6px;
}

.sidebar-nav-group-title {
  margin: 18px 0 5px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .7;
}
.sidebar-nav-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sidebar-border);
}

.sidebar-nav .sidebar-nav-group-title:first-child {
  margin-top: 4px;
}

.sidebar-link {
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 11px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.18s var(--ease-smooth), color 0.18s var(--ease-smooth), box-shadow 0.18s var(--ease-smooth);
  position: relative;
  border-left: 2px solid transparent;
}

.sidebar-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s var(--ease-smooth), color 0.18s var(--ease-smooth);
  opacity: .75;
}

.sidebar-link-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-link:hover .sidebar-link-icon {
  opacity: 1;
  transform: translateX(2px);
}
.sidebar-link.active .sidebar-link-icon {
  opacity: 1;
  color: var(--primary);
}

.sidebar-link:hover {
  background: rgba(0, 174, 239, 0.07);
  color: var(--primary);
}

.sidebar-link.active {
  background: var(--sidebar-active);
  color: var(--primary);
  font-weight: 600;
  border-left-color: var(--primary);
  box-shadow: inset 0 0 0 0 transparent, 0 1px 4px rgba(0,174,239,.06);
}

.sidebar-link-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sidebar-badge {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-badge--lembrete {
  background: #d97706;
}
.sidebar-link-wrap {
  position: relative;
  margin: 0 -6px; /* estende até as bordas do nav, compensando o padding do sidebar-nav */
  padding: 0 6px;
}
.sidebar-link-wrap .sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sidebar-lembretes-dropdown {
  position: absolute;
  left: 6px; /* alinha com o conteúdo (padding do wrap) */
  right: 6px;
  top: 100%;
  margin-top: 2px;
  width: calc(100% - 12px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 10px 20px -4px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  padding: 8px 0;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0.2s;
}
.sidebar-link-wrap:hover .sidebar-lembretes-dropdown,
.sidebar-link-wrap:focus-within .sidebar-lembretes-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.sidebar-lembretes-dropdown-title {
  margin: 0 12px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
.sidebar-lembretes-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}
.sidebar-lembretes-dropdown-item:hover {
  background: rgba(0, 174, 239, 0.08);
}
.sidebar-lembretes-dropdown-nome { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-lembretes-dropdown-hora { font-size: 11px; color: var(--muted); margin-left: 8px; flex-shrink: 0; }
.sidebar-lembretes-dropdown-ver {
  display: block;
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}
.sidebar-lembretes-dropdown-ver:hover { background: rgba(0, 174, 239, 0.08); }

.nav-icon {
  font-size: 8px;
  color: var(--primary);
}

.nav-label {
  white-space: nowrap;
}

.main {
  padding: 24px 0 48px;
  min-width: 0;
  animation: pageEnter 0.4s var(--ease-out) both;
  background: var(--bg);
}

.sidebar-collapsed .app-shell {
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}

.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
  padding: 12px 0;
}

.sidebar-collapsed .sidebar-header {
  flex-direction: column;
  padding: 12px 8px;
  margin: -12px -12px 8px -12px;
  margin-left: -12px;
  margin-right: -12px;
  margin-top: -12px;
  margin-bottom: 8px;
}

.sidebar-collapsed .brand {
  justify-content: center;
}

.sidebar-collapsed .brand-logo {
  display: none;
}

.sidebar-collapsed .brand-logo-icon {
  display: block;
}

.sidebar-collapsed .brand-text,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar-link-label,
.sidebar-collapsed .sidebar-nav-group-title {
  display: none !important;
}

.sidebar-collapsed .sidebar-link-icon {
  margin: 0;
}

.sidebar-collapsed .sidebar-nav {
  padding: 0 6px;
}

.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 10px 0;
}

/* Dropdown de lembretes: quando sidebar colapsada, usa fixed para não ser cortado pelo overflow */
.sidebar-collapsed .sidebar-lembretes-dropdown {
  position: fixed;
  left: calc(var(--sidebar-collapsed) + 12px);
  right: auto;
  top: var(--sidebar-dropdown-top, 50%);
  margin: 0;
  width: auto;
  min-width: 260px;
  transform: translateY(-50%) translateX(-8px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 20px 40px -8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.sidebar-collapsed .sidebar-link-wrap:hover .sidebar-lembretes-dropdown,
.sidebar-collapsed .sidebar-link-wrap:focus-within .sidebar-lembretes-dropdown {
  transform: translateY(-50%) translateX(0);
}
.sidebar-collapsed .sidebar-lembretes-dropdown-ver {
  white-space: nowrap;
}

.sidebar-collapsed .sidebar-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  margin-left: 0;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 16px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.page-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.card-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-value {
  font-size: 30px;
  font-weight: 600;
  margin: 8px 0 0;
}

.card-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}

.section {
  background: var(--surface);
  padding: 18px 20px;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  max-width: 100%;
  transition: box-shadow var(--transition-normal), border-color var(--transition-fast);
}

.section:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0, 174, 239, 0.06);
}

.filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.filter-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.filter-btn--sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* ========== Container da lista de leads (Dashboard + Painel de vendas) – estilo “Customer order” ========== */
.sales-panel {
  background: var(--surface);
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  width: 100%;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  transition: box-shadow var(--transition-normal), border-color var(--transition-fast);
}

.sales-panel:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.sales-panel .section-header {
  padding: 18px 24px;
  margin: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  transition: background var(--transition-fast);
}

.sales-panel .fluydon-metrics-grid,
.sales-panel .filter-row {
  padding-left: 20px;
  padding-right: 20px;
}

.sales-panel .fluydon-metrics-grid {
  padding-top: 16px;
  padding-bottom: 4px;
}

.sales-panel .filter-row {
  padding-bottom: 14px;
}

.sales-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sales-header-actions .form-atualizar-bd {
  margin: 0;
}

.sales-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.sales-panel .section-header .muted {
  font-size: 12px;
}

.vendas-advanced-filters {
  margin: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px 12px;
  align-items: end;
}

.vendas-advanced-filters-title {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.vendas-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.vendas-filter-field--select {
  position: relative;
}

.vendas-filter-field--select.is-enhanced select {
  display: none;
}

.vendas-filter-field span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.vendas-filter-field input,
.vendas-filter-field select {
  height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  padding: 0 10px;
  min-width: 0;
}

.vendas-filter-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  background-position:
    0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.24s var(--ease-smooth), box-shadow 0.24s var(--ease-smooth), background-color 0.24s var(--ease-smooth), transform 0.24s var(--ease-smooth), filter 0.24s var(--ease-smooth);
}

.vendas-filter-field--select::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  transform-origin: center;
  pointer-events: none;
  transition: transform 0.22s var(--ease-smooth), border-color 0.22s var(--ease-smooth);
}

.vendas-filter-field select:hover {
  border-color: rgba(14, 165, 233, 0.42);
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.vendas-filter-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.14), 0 6px 16px rgba(2, 132, 199, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: translateY(-1px);
}

.vendas-filter-field--select:focus-within::after,
.vendas-filter-field--select.is-open::after {
  transform: rotate(-135deg) translateY(-1px);
  border-color: var(--primary);
}

.vendas-filter-field--select.is-open select {
  animation: vendasSelectPop 0.2s var(--ease-smooth);
}

@keyframes vendasSelectPop {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-1px) scale(1.01); }
}

.vendas-custom-select {
  position: relative;
}

/* Trigger button */
.vendas-custom-select__trigger {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--text);
  font-size: 13px;
  padding: 0 34px 0 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.24s var(--ease-smooth), box-shadow 0.24s var(--ease-smooth), transform 0.24s var(--ease-smooth);
}

.vendas-custom-select__trigger-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.vcs-trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
}

.vendas-filter-field--select.is-open .vendas-custom-select__trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.14), 0 6px 16px rgba(2, 132, 199, 0.12);
  transform: translateY(-1px);
}

/* Dropdown panel */
.vendas-custom-select__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 160px;
  z-index: 200;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 232px;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
  /* thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.vendas-custom-select__panel::-webkit-scrollbar { width: 4px; }
.vendas-custom-select__panel::-webkit-scrollbar-track { background: transparent; }
.vendas-custom-select__panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.vendas-filter-field--select.is-open .vendas-custom-select__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Individual option */
.vendas-custom-select__option {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  animation: vcsOptionIn 0.18s ease both;
  transition: background-color 0.14s ease, color 0.14s ease;
}

@keyframes vcsOptionIn {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}

.vendas-custom-select__option:hover {
  background: #f0f9ff;
  color: #0369a1;
}

.vendas-custom-select__option.is-selected {
  background: linear-gradient(90deg, rgba(2,132,199,.09) 0%, rgba(14,165,233,.05) 100%);
  color: #0284c7;
  font-weight: 600;
}

/* "Todos/Todas" first option */
.vcs-option--all {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: #64748b;
}

.vcs-option--all:hover {
  background: #f8fafc;
  color: #475569;
}

/* Colored status/platform dot */
.vcs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Smaller dot shown inside the trigger */
.vcs-dot--sm {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Label text */
.vcs-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vcs-label--all  { color: #64748b; font-style: italic; }
.vcs-label--muted { color: #94a3b8; }

/* Neutral icon (for "Todos/Todas") */
.vcs-neutral-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  opacity: 0.7;
}

/* Spacer for fields without a dot (keeps text aligned) */
.vcs-spacer { width: 8px; flex-shrink: 0; }

/* Checkmark — visible only on selected option */
.vcs-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #0284c7;
  transition: opacity 0.15s ease;
}

.vendas-custom-select__option.is-selected .vcs-check {
  opacity: 1;
}

.vcs-check-icon { display: block; }

.vendas-filter-field select option {
  color: #0f172a;
  background: #f8fafc;
  font-size: 14px;
  line-height: 1.35;
  padding: 8px 10px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vendas-filter-field select option:checked {
  background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
  font-weight: 700;
}

.vendas-filter-field select option:hover {
  background: #dbeafe;
  color: #0c4a6e;
}

.vendas-filter-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.vendas-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.vendas-filter-actions .filter-btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;
  padding: 0 12px;
}

@media (max-width: 1200px) {
  .vendas-advanced-filters {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
  .vendas-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .vendas-advanced-filters {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }
  .vendas-advanced-filters-title {
    margin-bottom: 0;
  }
}

/* ===== Vendas Advanced Filters — Upgraded (VAF) ===== */
.vaf-wrapper {
  position: relative;
  z-index: 120;
  margin: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #f8fafc;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.045);
  overflow: hidden;
  transition: box-shadow 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}

.vaf-wrapper.is-open {
  z-index: 420;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.075);
  border-color: rgba(14, 165, 233, 0.26);
  transform: translateY(-1px);
  overflow: visible;
}

.vaf-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.22s ease, color 0.22s ease;
  color: inherit;
}

.vaf-toggle:hover {
  background: rgba(14, 165, 233, 0.055);
}

.vaf-toggle-icon {
  width: 22px;
  height: 22px;
  color: #64748b;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.12);
  transition: color 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
}

.vaf-wrapper.is-open .vaf-toggle-icon {
  color: var(--primary);
  background: rgba(14, 165, 233, 0.14);
  transform: translateY(-1px);
}

.vaf-toggle-label {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #334155;
}

.vaf-badge {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  line-height: 1.35;
  display: none;
  animation: vafBadgePop 0.24s var(--ease-smooth);
}

@keyframes vafBadgePop {
  0%   { transform: scale(0.6); opacity: 0; }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1);   opacity: 1; }
}

.vaf-toggle-chevron {
  color: #94a3b8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.24s var(--ease-smooth), color 0.22s ease;
}

.vaf-wrapper.is-open .vaf-toggle-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

/* Active-filter chips — shown when panel is collapsed */
.vaf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 12px 8px;
  animation: vafChipsFade 0.2s ease;
}

@keyframes vafChipsFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vaf-chips.is-hidden {
  display: none;
}

.vaf-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(2, 132, 199, 0.08);
  color: #0369a1;
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vaf-chip-label {
  color: #94a3b8;
  font-weight: 600;
  margin-right: 1px;
}

/* Divider between toggle header and form */
.vaf-divider {
  height: 1px;
  margin: 0;
  background: rgba(148, 163, 184, 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-smooth);
}

.vaf-wrapper.is-open .vaf-divider {
  transform: scaleX(1);
}

/* Collapsible panel */
.vaf-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease,
              transform 0.26s ease;
}

.vaf-wrapper.is-open .vaf-panel {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow: visible;
}

/* Form grid inside the panel */
.vaf-form {
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  gap: 8px 10px;
  align-items: start;
}

/* Icon + label inside filter fields */
.vaf-field-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.vaf-field-icon svg {
  flex-shrink: 0;
  opacity: 0.72;
}

.vaf-form .vendas-filter-field {
  gap: 4px;
  align-self: start;
}

.vaf-form .vendas-filter-field input,
.vaf-form .vendas-filter-field select {
  height: 34px;
  border-radius: 8px;
  border-color: rgba(148, 163, 184, 0.3);
  padding-left: 9px;
  padding-right: 9px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.vaf-form .vendas-filter-field select {
  padding-right: 32px;
}

/* VAF: dropdown flutuante (overlay) sem empurrar layout */
.vaf-form .vendas-custom-select {
  position: relative;
  min-width: 0;
}

.vaf-form .vendas-custom-select__trigger {
  height: 34px;
  border-radius: 8px;
  padding: 0 30px 0 9px;
  font-size: 13px;
}

.vaf-form .vendas-custom-select__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  min-width: 0;
  max-height: 220px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  overflow: auto;
  border-width: 1px;
  padding: 4px;
  z-index: 260;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

.vaf-form .vendas-filter-field--select.is-open .vendas-custom-select__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.vaf-form .vendas-filter-field--select {
  position: relative;
  z-index: 1;
}

.vaf-form .vendas-filter-field--select.is-open {
  z-index: 300;
}

.vaf-form .vendas-custom-select__option {
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.25;
}

.vaf-form .vendas-filter-field input:hover,
.vaf-form .vendas-filter-field select:hover {
  transform: translateY(-1px);
}

.vaf-form .vendas-filter-field input:focus,
.vaf-form .vendas-filter-field select:focus {
  transform: translateY(-1px);
}

.vaf-wrapper.is-open .vaf-form .vendas-filter-field {
  animation: vafFieldFadeIn 0.22s ease both;
}

.vaf-wrapper.is-open .vaf-form .vendas-filter-field:nth-child(1) { animation-delay: 0.00s; }
.vaf-wrapper.is-open .vaf-form .vendas-filter-field:nth-child(2) { animation-delay: 0.02s; }
.vaf-wrapper.is-open .vaf-form .vendas-filter-field:nth-child(3) { animation-delay: 0.04s; }
.vaf-wrapper.is-open .vaf-form .vendas-filter-field:nth-child(4) { animation-delay: 0.06s; }
.vaf-wrapper.is-open .vaf-form .vendas-filter-field:nth-child(5) { animation-delay: 0.08s; }
.vaf-wrapper.is-open .vaf-form .vendas-filter-field:nth-child(6) { animation-delay: 0.10s; }

@keyframes vafFieldFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Actions row — full-width bottom strip */
.vaf-actions-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  margin-top: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

/* Primary apply button */
.vaf-btn-apply {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 0 13px;
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
  transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.18s ease;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.vaf-btn-apply:hover {
  box-shadow: 0 5px 16px rgba(2, 132, 199, 0.38);
  transform: translateY(-1px);
}

.vaf-btn-apply:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.22);
}

/* Secondary buttons */
.vaf-btn-secondary {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 11px;
  background: rgba(248, 250, 252, 0.9);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.32);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.vaf-btn-secondary:hover {
  background: #f1f5f9;
  border-color: rgba(14, 165, 233, 0.32);
  color: #0284c7;
  transform: translateY(-1px);
}

/* "Ver canceladas" active state */
.vaf-btn-canceladas-active {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.28);
  color: #dc2626;
}

.vaf-btn-canceladas-active:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #dc2626;
}

/* "Limpar" button — sits at far right, red-tinted on hover */
.vaf-btn-clear {
  margin-left: auto;
  color: #94a3b8;
  border-color: transparent;
  background: transparent;
}

.vaf-btn-clear:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.22);
  color: #ef4444;
  transform: translateY(-1px);
}

@media (max-width: 1200px) {
  .vaf-form {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
  .vaf-actions-row {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .vaf-form {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px 10px 12px;
  }
  .vaf-chips {
    padding: 0 10px 7px;
  }
  .vaf-toggle {
    padding: 9px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vaf-wrapper,
  .vaf-toggle,
  .vaf-toggle-icon,
  .vaf-toggle-chevron,
  .vaf-panel,
  .vaf-form .vendas-filter-field,
  .vaf-form .vendas-filter-field input,
  .vaf-form .vendas-filter-field select,
  .vaf-btn-apply,
  .vaf-btn-secondary {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

.sales-table-wrapper {
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  border: none;
  border-top: 1px solid var(--border);
  background: #fff;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  display: block;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  transition: box-shadow var(--transition-normal);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 174, 239, 0.45) #f1f5f9;
}
.sales-table-wrapper.fixed-scrollbar-active {
  scrollbar-width: none;
}
.sales-table-wrapper.fixed-scrollbar-active::-webkit-scrollbar {
  height: 0;
}
.sales-table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.sales-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.sales-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 174, 239, 0.45);
  border-radius: 4px;
}
.sales-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 174, 239, 0.65);
}

/* Scrollbar horizontal fixo – visível na tela quando o container de vendas está em foco */
.sales-table-fixed-scrollbar {
  position: fixed;
  left: 0;
  width: 0;
  bottom: 8px;
  height: 8px;
  z-index: 30;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-smooth), visibility 0.2s var(--ease-smooth);
}
.sales-table-fixed-scrollbar.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sales-table-fixed-scrollbar-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  min-width: 0;
  background: rgba(2, 132, 199, 0.14);
  box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.2);
  backdrop-filter: blur(1px);
}
.sales-table-fixed-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 40px;
  background: linear-gradient(90deg, rgb(90 199 255 / 88%) 0%, rgb(132 213 249 / 92%) 100%);
  border-radius: 999px;
  cursor: grab;
  box-shadow: 0 1px 6px rgba(2, 132, 199, 0.35);
  transition: background 0.22s var(--ease-smooth), box-shadow 0.22s var(--ease-smooth), transform 0.22s var(--ease-smooth);
}
.sales-table-fixed-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgb(30 144 206 / 98%) 0%, rgb(63 176 228 / 98%) 100%);
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.32) inset;
  transform: translateY(-1px) scaleY(1.02);
}
.sales-table-fixed-scrollbar-thumb:active {
  cursor: grabbing;
  background: linear-gradient(90deg, rgb(18 126 185) 0%, rgb(45 159 211) 100%);
  box-shadow: 0 1px 7px rgba(2, 132, 199, 0.45);
  transform: translateY(0) scaleY(1);
}

.sales-panel:hover .sales-table-wrapper {
  box-shadow: inset 0 1px 0 var(--border);
}

.sales-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1400px;
}

.sales-table thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  position: sticky;
  top: 0;
  z-index: 1;
  transition: background var(--transition-fast);
}

.table-row {
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.table-row:hover {
  background: rgba(0, 174, 239, 0.06);
  transform: translateX(2px);
}

.sales-table th,
.sales-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  transition: border-color var(--transition-fast);
}

.sales-table td {
  color: #0f172a;
}

.sales-table tbody tr:last-child td {
  border-bottom: none;
}

.sales-table tbody tr td[colspan],
.sales-table .empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--muted);
  font-size: 14px;
  white-space: normal;
}

.sales-table .empty-state {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.sales-table .cell-stack {
  min-width: 120px;
}

.sales-table td:nth-child(2),
.sales-table td:nth-child(4) {
  white-space: normal;
  max-width: 220px;
}

.sales-table td:nth-child(2) .cell-main,
.sales-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-wrapper {
  overflow: auto;
}

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cell-main {
  font-weight: 600;
  font-size: 13px;
}

.cell-sub {
  font-size: 11px;
  color: var(--muted);
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

.pagination a {
  text-decoration: none;
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.pagination a:hover {
  background: rgba(0, 174, 239, 0.08);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.badge.status-paga {
  background: rgba(16, 185, 129, 0.2);
  color: #065f46;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.detail-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.detail-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.detail-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text);
}

.detail-card li {
  margin-bottom: 6px;
}

.detail-json {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  font-size: 12px;
  overflow: auto;
}

.detail-json pre {
  margin: 0;
  white-space: pre-wrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.settings-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-card h4 {
  margin: 0;
  font-size: 14px;
}

.settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.settings-list li {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.settings-name {
  font-weight: 600;
}

.settings-desc {
  font-size: 12px;
  color: var(--muted);
}

.settings-messages {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.settings-alert {
  padding: 8px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 12px;
}

.settings-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-form input,
.settings-form-inline input,
.settings-form select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: #fff;
}

.settings-form button,
.settings-form-inline button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}

.settings-vendedores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.settings-vendedor {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface);
  transition: box-shadow var(--transition-normal), border-color var(--transition-fast);
}

.settings-vendedor:hover {
  box-shadow: var(--shadow-card);
  border-color: rgba(0, 174, 239, 0.3);
}

.settings-vendedor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.settings-vendedor-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
  display: grid;
  gap: 6px;
}

.settings-vendedor-body li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
}

.settings-vendedor-body li form button {
  background: #e2e8f0;
  color: #334155;
}

.settings-form-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge.status-aguardando_pagamento {
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.badge.status-cancelada,
.badge.status-frustrada,
.badge.status-reembolsada {
  background: rgba(239, 68, 68, 0.2);
  color: #991b1b;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}

.search-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-form input {
  padding: 10px 12px;
  min-width: 240px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-form input:focus,
.search-form input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.2);
}

.search-form button {
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.search-form button:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3);
}

.search-form button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}

tbody tr:hover {
  background: #f8fafc;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

.link {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
}

.link:hover {
  text-decoration: underline;
}

/* Login page – layout split (welcome | form) */
body.login-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: #f0f9ff !important;
}

.login-page__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #ffffff url('images/login-background.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
}

.login-page__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Welcome (coluna esquerda) */
.login-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  text-align: center;
}
.login-welcome__logo {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 40px;
}
.login-welcome__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 320px;
}
.login-welcome__sub {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
  max-width: 300px;
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* Card do formulário */
.login-box {
  width: 100%;
  max-width: 400px;
  padding: 0;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.login-box::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

.login-box__header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.login-box__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
}
.login-box__subtitle {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}

.login-page--split .login-box__logo { display: none; }
.login-page--split .login-brand { display: none; }
.login-page--auth .login-box__logo { display: none; }

/* Compatibilidade com páginas de auth (password reset) */
.login-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #1e293b; }
.login-subtitle { margin: 0 0 24px; font-size: 14px; color: #64748b; line-height: 1.4; }
.login-subtitle--success { color: #15803d; }
.login-subtitle a { color: var(--primary); text-decoration: none; }
.login-subtitle a:hover { text-decoration: underline; }

/* Login auth (password reset) – card centralizado, sem split */
body.login-page--auth {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.login-page--auth .login-box {
  position: relative;
  z-index: 1;
  max-width: 420px;
  padding: 40px 40px 44px;
}

body.login-page--auth .login-box::before {
  display: block;
}

body.login-page--auth .login-brand {
  display: block;
  text-align: center;
  padding: 28px 24px 24px;
  margin-bottom: 0;
  max-width: 100%;
}

body.login-page--auth .login-title {
  margin: 0 0 10px;
}

body.login-page--auth .login-subtitle {
  margin: 0 0 28px;
  line-height: 1.55;
}

body.login-page--auth .login-subtitle + .login-subtitle {
  margin-top: -16px;
  margin-bottom: 28px;
}

body.login-page--auth .login-form {
  margin-top: 0;
}

body.login-page--auth .login-form .form-group:first-child {
  margin-top: 0;
}

body.login-page--auth .login-brand .login-logo,
body.login-page--auth .login-logo {
  display: block;
  margin: 0 auto;
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

body.login-page--auth .login-form > .btn-primary {
  margin-top: 20px;
}

body.login-page--auth .login-footer-link {
  margin-top: 24px;
  padding-top: 20px;
}

/* Registro afiliado – evita truncamento de texto na descrição */
.registro-afiliado-desc {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.registro-afiliado-welcome .login-welcome__sub {
  max-width: 360px;
}

.registro-afiliado-benefits {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 360px;
  width: 100%;
}

.registro-afiliado-benefits li {
  position: relative;
  padding: 10px 12px 10px 34px;
  font-size: 14px;
  line-height: 1.45;
  color: #334155;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  backdrop-filter: blur(2px);
}

.registro-afiliado-benefits li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.14);
}

body.login-page--auth .login-messages {
  padding: 4px 0 0;
  margin-bottom: 20px;
}

.login-messages {
  list-style: none;
  margin: 0;
  padding: 16px 32px 0;
}

.login-messages .message {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.login-messages .message.error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.login-messages .message.success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* Bloco dos campos */
.login-form__fields {
  padding: 24px 32px 0;
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form .form-group:last-child {
  margin-bottom: 0;
}

.login-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"],
.login-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-form input::placeholder {
  color: #94a3b8;
}

.login-form .input-password-wrap input {
  padding-right: 48px;
}

.login-form input:hover {
  border-color: #cbd5e1;
}

.login-form textarea:hover {
  border-color: #cbd5e1;
}

.login-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.login-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.login-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* Botão e link "Esqueci" */
.login-form__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 24px 32px 32px;
  margin-top: 24px;
  border-top: 1px solid #f1f5f9;
}

.login-form .btn-primary {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.login-form .btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 174, 239, 0.35);
}

.login-form .btn-primary:active {
  transform: translateY(0);
}

.login-form__forgot {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.login-form__forgot:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

/* Fallback para páginas auth sem a nova estrutura */
.login-footer-link {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
  font-size: 14px;
}

.login-footer-link a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.login-footer-link a:hover {
  text-decoration: underline;
  color: var(--primary-light);
}

.login-footer-link .btn-primary--block {
  display: block;
  text-align: center;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 8px;
}

.login-footer-link .btn-primary--block:hover {
  opacity: 0.95;
  text-decoration: none;
}

/* Sidebar – bloco do usuário */
/* ── Sidebar footer ─────────────────────────────── */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── User card ─────────────────────────────────────────── */
.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.05) 0%, transparent 65%);
  border: 1px solid rgba(0, 174, 239, 0.13);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}
.sidebar-user-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00AEEF 0%, rgba(0, 174, 239, 0.12) 100%);
}
.sidebar-user-card:hover {
  border-color: rgba(0, 174, 239, 0.28);
  box-shadow: 0 3px 14px rgba(0, 174, 239, 0.1);
}

/* Avatar with online dot */
.sidebar-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.sidebar-user-avatar,
.sidebar-user-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.35);
  transition: box-shadow 0.2s var(--ease-smooth);
}
.sidebar-user-card:hover .sidebar-user-avatar-img {
  box-shadow: 0 0 0 2.5px rgba(0, 174, 239, 0.6);
}
.sidebar-avatar-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--sidebar-bg, #fafbfc);
}

/* User info: nome e badge */
.sidebar-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  justify-content: center;
}
.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  width: 100%;
}
.sidebar-user-info .sidebar-role-badge {
  align-self: flex-start;
}

/* Settings cog button */
.sidebar-profile-cog {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-muted);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.18s var(--ease-smooth), color 0.18s var(--ease-smooth), border-color 0.18s var(--ease-smooth);
}
.sidebar-profile-cog:hover {
  background: rgba(0, 174, 239, 0.1);
  color: var(--primary);
  border-color: rgba(0, 174, 239, 0.22);
}

/* ── Quick actions (mirrors .sidebar-link for visual consistency) */
.sidebar-user-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}
.sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background 0.18s var(--ease-smooth), color 0.18s var(--ease-smooth);
  position: relative;
  border-left: 2px solid transparent;
}
.sidebar-action-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease-smooth), color 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth);
}
.sidebar-action-btn-icon svg {
  width: 18px;
  height: 18px;
}
.sidebar-action-btn span:not(.sidebar-action-btn-icon) {
  flex: 1;
  text-align: left;
}
.sidebar-action-btn:hover {
  background: rgba(0, 174, 239, 0.07);
  color: var(--primary);
}
.sidebar-action-btn:hover .sidebar-action-btn-icon {
  opacity: 1;
  color: var(--primary);
  transform: translateX(2px);
}
.sidebar-action-btn--active {
  background: var(--sidebar-active);
  color: var(--primary);
  border-left-color: var(--sidebar-active-border);
}
.sidebar-action-btn--active .sidebar-action-btn-icon {
  opacity: 1;
  color: var(--primary);
}
.sidebar-action-btn--logout:hover {
  background: rgba(239, 68, 68, 0.07);
  color: #ef4444;
}
.sidebar-action-btn--logout:hover .sidebar-action-btn-icon {
  color: #ef4444;
}
.sidebar-changelog-dot {
  flex-shrink: 0;
}

/* ── Collapsed state ──────────────────────────────────── */
.sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed .sidebar-profile-cog,
.sidebar-collapsed .sidebar-action-btn span:not(.sidebar-changelog-dot) {
  display: none;
}
.sidebar-collapsed .sidebar-user-card {
  justify-content: center;
  padding: 9px;
}
.sidebar-collapsed .sidebar-user-card::before { display: none; }
.sidebar-collapsed .sidebar-avatar-wrap { margin: 0 auto; }
.sidebar-collapsed .sidebar-user-actions {
  flex-direction: row;
  justify-content: center;
  gap: 2px;
  padding: 0 4px;
}
.sidebar-collapsed .sidebar-action-btn {
  flex: none;
  padding: 8px;
  justify-content: center;
  border-left: none;
}
.sidebar-collapsed .sidebar-action-btn-icon svg { width: 18px; height: 18px; }

/* ========== Configurações — nav pills ========== */
.config-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
}

.cfg-nav-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.cfg-nav-wrap::-webkit-scrollbar { display: none; }

.cfg-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  min-width: max-content;
}

.cfg-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
  position: relative;
}
.cfg-nav-icon {
  flex-shrink: 0;
  transition: stroke 0.15s var(--ease-smooth);
}
.cfg-nav-item:hover {
  color: var(--text);
  background: rgba(255,255,255,0.85);
  border-color: var(--border-subtle);
}
.cfg-nav-item.active {
  color: var(--primary);
  font-weight: 600;
  background: #fff;
  border-color: rgba(0,174,239,0.22);
  box-shadow: 0 1px 4px rgba(0,174,239,0.12), 0 0 0 0px rgba(0,174,239,0);
}
.cfg-nav-item.active .cfg-nav-icon { stroke: var(--primary); }

/* compat: classes antigas ainda usadas noutras partes */
.config-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s var(--ease-smooth), background 0.15s var(--ease-smooth);
}
.config-tab-item:hover { color: var(--text); background: rgba(255,255,255,.85); border-color: var(--border-subtle); }
.config-tab-item.active { color: var(--primary); font-weight: 600; background: #fff; border-color: rgba(0,174,239,.22); box-shadow: 0 1px 4px rgba(0,174,239,.12); }

.config-tab-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}

.config-panel {
  padding: 24px 24px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(0, 174, 239, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.07);
  min-width: 0;
  animation: cfgSlideIn 0.22s var(--ease-out) both;
}

/* Sub-tabs dentro dos painéis (Equipe: Vendedores/Cobradores/Afiliados; Integrações: seções) */
.config-subtabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(241, 245, 249, 0.85);
  border-radius: 12px;
  width: fit-content;
  margin-bottom: 24px;
}
.config-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.13s, background 0.13s, border-color 0.13s;
}
.config-subtab:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.8);
}
.config-subtab.active {
  color: #1d4ed8;
  background: #fff;
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
  font-weight: 600;
}
.config-subtab-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}

/* Seções das sub-tabs (panes) */
.config-subtab-pane { display: none; }
.config-subtab-pane.active { display: block; }

/* Responsivo */
@media (max-width: 640px) {
  .cfg-nav-item, .config-tab-item {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
  }
  .cfg-nav-icon { width: 13px; height: 13px; }
  .config-panel {
    padding: 16px 14px;
    border-radius: 14px;
  }
  .config-subtabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 10px;
  }
  .config-subtabs::-webkit-scrollbar { display: none; }
}

/* ========== Configurações (layout interno — mantido por compatibilidade) ========== */
.config-layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
}

.config-nav {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.config-nav-group {
  margin: 12px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.config-nav-group:first-child {
  margin-top: 0;
}

.config-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #1e293b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.config-nav-item:hover {
  background: rgba(226, 232, 240, 0.52);
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.3);
  transform: translateX(2px);
}

.config-nav-item.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.14) 0%, rgba(56, 189, 248, 0.08) 100%);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.config-nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.config-nav-icon::before,
.config-card-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask-image: var(--icon-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--icon-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.config-card-icon::before {
  width: 20px;
  height: 20px;
}

.config-nav-item.active .config-nav-icon {
  color: #2563eb;
  background: rgba(219, 234, 254, 0.9);
  border-color: rgba(59, 130, 246, 0.35);
}

.config-nav-item:hover .config-nav-icon {
  color: #334155;
  transform: translateY(-1px);
}

.config-nav-label {
  flex: 1;
}

.config-nav-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.config-content {
  flex: 1;
  min-width: 0;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(224, 242, 254, 0.5) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.07);
}

.config-page-header {
  margin-bottom: 24px;
}

.config-page-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.config-page-subtitle {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 15px;
}

/* Blocos e cards da página inicial de config */
.config-cards-blocks {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.config-cards-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.config-cards-block-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #475569;
}

.config-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.config-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  text-decoration: none;
  color: #0f172a;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  transition: box-shadow var(--transition-normal), border-color var(--transition-fast), transform var(--transition-normal), background var(--transition-fast);
}

.config-card:hover {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 248, 255, 0.95) 100%);
  transform: translateY(-3px);
}

.config-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(224, 242, 254, 0.75) 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.config-card--vendedores {
  border-left: 3px solid rgba(37, 99, 235, 0.5);
  padding-left: 16px;
}

.config-card--vendedores .config-card-icon {
  color: #2563eb;
}

.config-card--perfil {
  border-left: 3px solid rgba(56, 189, 248, 0.6);
  padding-left: 16px;
}

.config-card--perfil .config-card-icon {
  color: #0284c7;
}

.config-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.config-card-desc {
  margin: 0;
  font-size: 14px;
  color: #475569;
  line-height: 1.45;
}

.config-card-meta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: rgba(226, 232, 240, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 4px 10px;
}

.config-card-meta-alert {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(254, 226, 226, 0.65);
}

.config-nav-icon--home,
.config-card-icon--home {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3.172 3 10v10h6v-6h6v6h6V10l-9-6.828Z'/%3E%3C/svg%3E");
}

.config-nav-icon--perfil,
.config-card-icon--perfil {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.962 0-9 2.239-9 5v1h18v-1c0-2.761-4.038-5-9-5Z'/%3E%3C/svg%3E");
}

.config-nav-icon--colaboradores,
.config-card-icon--colaboradores {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8.5 11a3.5 3.5 0 1 0-3.5-3.5A3.5 3.5 0 0 0 8.5 11Zm7 0A3.5 3.5 0 1 0 12 7.5 3.5 3.5 0 0 0 15.5 11ZM2 19v1h13v-1c0-2.486-3.134-4.5-7-4.5S2 16.514 2 19Zm13 1h7v-1c0-1.968-2.13-3.61-5-4.194a6.61 6.61 0 0 1 2 4.194v1Z'/%3E%3C/svg%3E");
}

.config-nav-icon--afiliados,
.config-card-icon--afiliados {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 2 9 10-9 10L3 12 12 2Zm0 3.2L5.88 12 12 18.8 18.12 12 12 5.2Z'/%3E%3C/svg%3E");
}

.config-nav-icon--integracoes,
.config-card-icon--integracoes {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 3a1 1 0 0 1 1 1v3h2V4a1 1 0 1 1 2 0v3h2V4a1 1 0 1 1 2 0v3h1a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3h-5.586l-3.207 3.207a1 1 0 0 1-1.414-1.414L8.586 16H7a3 3 0 0 1-3-3v-3a3 3 0 0 1 3-3h1V4a1 1 0 0 1 1-1Zm0 6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H7Z'/%3E%3C/svg%3E");
}

.config-nav-icon--produtos,
.config-card-icon--produtos {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 3 6.5v11L12 22l9-4.5v-11L12 2Zm0 2.236 6.5 3.264L12 10.764 5.5 7.5 12 4.236ZM5 9.118l6 3v7.264l-6-3V9.118Zm14 0v7.264l-6 3v-7.264l6-3Z'/%3E%3C/svg%3E");
}

.config-nav-icon--metas,
.config-card-icon--metas {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm0 2a8 8 0 1 1-8 8 8.009 8.009 0 0 1 8-8Zm0 2.5A5.5 5.5 0 1 0 17.5 12 5.506 5.506 0 0 0 12 6.5Zm0 2A3.5 3.5 0 1 1 8.5 12 3.504 3.504 0 0 1 12 8.5Zm7.207-.207a1 1 0 0 0-1.414 0l-4.086 4.086a2.25 2.25 0 1 0 1.414 1.414l4.086-4.086a1 1 0 0 0 0-1.414Z'/%3E%3C/svg%3E");
}

/* Seções dentro de cada página de config */
.config-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.config-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.fluydon-config-section {
  transition: border-color var(--transition-fast);
}

.config-page-header.fluydon-header {
  margin-bottom: 24px;
}

.config-page-header .config-page-title,
.config-page-header .config-page-subtitle {
  margin: 0.25em 0 0;
}

.config-breadcrumb {
  margin-bottom: 12px;
}

.config-breadcrumb-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.config-breadcrumb-link:hover {
  color: var(--primary);
}

/* ========== Página Editar Vendedor (padrão Fluydon) ========== */
.vendedor-editar-page {
  max-width: 720px;
}

.vendedor-editar-page .config-section {
  margin-bottom: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.vendedor-editar-page .config-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vendedor-editar-section-perfil .config-section-title,
.vendedor-editar-section-perfil .config-section-desc {
  margin-bottom: 16px;
}

.vendedor-editar-section-title-compact {
  margin-bottom: 4px !important;
}

.vendedor-editar-section-desc-compact {
  margin-bottom: 12px !important;
  font-size: 12px;
}

.vendedor-editar-perfil-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.vendedor-editar-avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vendedor-editar-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.vendedor-editar-photo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.vendedor-editar-photo-hint {
  font-size: 11px;
}

.vendedor-editar-photo-label {
  cursor: pointer;
  margin: 0;
}

.vendedor-editar-photo-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
}

.vendedor-editar-form-block {
  min-width: 0;
}

.vendedor-editar-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vendedor-editar-fields-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  align-items: end;
}

.vendedor-editar-fields-compact .vendedor-editar-field {
  min-width: 0;
}

.vendedor-editar-fields-compact .vendedor-editar-field-actions {
  grid-column: 1 / -1;
  padding-top: 2px;
}

@media (max-width: 520px) {
  .vendedor-editar-fields-compact {
    grid-template-columns: 1fr;
  }
}

.vendedor-editar-field .config-label {
  margin-bottom: 4px;
  font-size: 12px;
}

.vendedor-editar-field .config-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.vendedor-editar-field-actions {
  padding-top: 8px;
}

.vendedor-editar-section-conta .config-section-title,
.vendedor-editar-section-conta .config-section-desc {
  margin-bottom: 14px;
}

.vendedor-editar-conta-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vendedor-editar-conta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vendedor-editar-conta-item .config-label {
  margin-bottom: 0;
  min-width: 56px;
}

.vendedor-editar-senha-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vendedor-editar-senha-masked {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--text);
}

.vendedor-editar-senha-toggle {
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  border-radius: 6px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.vendedor-editar-senha-toggle:hover {
  color: var(--primary);
  background: rgba(0, 174, 239, 0.08);
}

.vendedor-editar-conta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.vendedor-editar-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.vendedor-editar-criar-conta {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 174, 239, 0.04);
}

.vendedor-editar-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.vendedor-editar-create-form .config-input,
.vendedor-editar-create-form .input-password-wrap {
  max-width: 160px;
}

.vendedor-editar-section-emails .config-section-title,
.vendedor-editar-section-emails .config-section-desc,
.vendedor-editar-section-utm .config-section-title,
.vendedor-editar-section-utm .config-section-desc {
  margin-bottom: 12px;
}

.vendedor-editar-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 28px;
}

.vendedor-editar-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 13px;
  background: rgba(0, 174, 239, 0.08);
  border: 1px solid rgba(0, 174, 239, 0.22);
  border-radius: 8px;
  color: var(--text);
}

.vendedor-editar-tag-form {
  display: inline;
  margin: 0;
}

.vendedor-editar-tag-remove {
  padding: 0 2px;
  margin-left: 2px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition-fast);
}

.vendedor-editar-tag-remove:hover {
  color: #dc2626;
}

.vendedor-editar-muted {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.vendedor-editar-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.vendedor-editar-input-narrow {
  max-width: 140px;
}

.vendedor-editar-add-form input[type="email"] {
  max-width: 220px;
}

@media (max-width: 640px) {
  .vendedor-editar-perfil-grid {
    grid-template-columns: 1fr;
  }

  .vendedor-editar-avatar-block {
    align-items: flex-start;
  }
}

.colab-page {
  max-width: 960px;
}

.colab-header {
  margin-bottom: 28px;
}

.colab-header-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.colab-header-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.12), rgba(0, 194, 244, 0.08));
  border: 1px solid rgba(0, 174, 239, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.colab-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.colab-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 480px;
}

.config-version-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
  vertical-align: middle;
}

/* Tabs – pill style, destaque visual */
.colab-tabs {
  display: flex;
  gap: 6px;
  margin-top: 20px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
  box-shadow: var(--shadow);
}

.colab-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.colab-tab:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}

.colab-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3);
}

/* Seções */
.colab-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.colab-section-add {
  border-left: 4px solid var(--primary);
}

.colab-section-header {
  margin-bottom: 20px;
}

.colab-section-header-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.colab-section-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.colab-section-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.colab-flutuante-info {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(0, 174, 239, 0.06);
  border: 1px solid rgba(0, 174, 239, 0.2);
  border-radius: 10px;
}

.colab-flutuante-info strong { color: var(--text); }

.colab-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.colab-section-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Adicionar colaborador (collapsible) */
.colab-add-details {
  margin: 0;
}

.colab-add-details summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.colab-add-details summary::-webkit-details-marker {
  display: none;
}

.colab-add-summary {
  display: inline-block;
}

.colab-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.colab-add-btn:hover {
  background: var(--primary-light);
}

.colab-add-details[open] .colab-add-btn {
  background: var(--primary);
  border-radius: 10px 10px 0 0;
}

.colab-add-content {
  padding: 16px 20px;
  background: rgba(0, 174, 239, 0.04);
  border: 1px solid rgba(0, 174, 239, 0.2);
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
}

.colab-add-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}

.colab-form-add-compact .colab-form-row {
  gap: 12px 18px;
}

.colab-form-add-compact .colab-form-field {
  gap: 4px;
}

.colab-form-add-compact .colab-label {
  font-size: 11px;
}

.colab-form-add-compact .colab-input {
  padding: 8px 12px;
  font-size: 13px;
}

/* Formulário adicionar */
.colab-form-add {
  margin: 0;
}

.colab-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px 20px;
  align-items: end;
}

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

.colab-form-field-btn {
  align-self: end;
}

.colab-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.colab-input {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.colab-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.12);
}

.colab-input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.colab-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.colab-input-wrap {
  position: relative;
  display: flex;
}

.colab-input-wrap .colab-input {
  flex: 1;
  min-width: 0;
}


.colab-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Tabela */
.colab-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.colab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.colab-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.colab-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.colab-table tbody tr:last-child td {
  border-bottom: none;
}

.colab-table tbody tr:hover {
  background: rgba(0, 174, 239, 0.03);
}

.colab-cell-name {
  font-weight: 500;
}

.colab-cell-value {
  color: var(--text);
}

.colab-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}

.colab-badge-account {
  background: rgba(0, 174, 239, 0.12);
  color: var(--primary);
}

.colab-badge-inactive {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.colab-empty {
  color: var(--muted);
  font-style: italic;
}

.colab-empty-row {
  padding: 32px 16px !important;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.colab-th-acoes {
  width: 1%;
  white-space: nowrap;
}

.colab-cell-acoes {
  white-space: nowrap;
}

.colab-btn-edit {
  padding: 6px 12px;
  font-size: 13px;
}

/* Cards cobradores */
.colab-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.colab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.colab-card:hover {
  border-color: rgba(0, 174, 239, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.colab-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.colab-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.colab-card-info {
  flex: 1;
  min-width: 0;
}

.colab-card-name {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.colab-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.colab-card-body {
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.colab-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}

.colab-list-names {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.colab-list-names li {
  padding: 3px 0;
}

.colab-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.colab-empty-state {
  grid-column: 1 / -1;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* Grid de vendedores – cards clicáveis */
.colab-vendedores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.colab-vendedor-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}

.colab-vendedor-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 174, 239, 0.12);
  transform: translateY(-1px);
}

.colab-vendedor-card-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.colab-vendedor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.colab-vendedor-info {
  flex: 1;
  min-width: 0;
}

.colab-vendedor-nome {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.colab-vendedor-conta {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

.colab-vendedor-sem-conta {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.colab-vendedor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.colab-vendedor-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.colab-vendedor-meta-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.colab-vendedor-meta-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.colab-vendedor-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  padding: 8px 12px;
  background: rgba(0, 174, 239, 0.08);
  border-radius: 8px;
  width: fit-content;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.colab-vendedor-card:hover .colab-vendedor-edit {
  background: rgba(0, 174, 239, 0.14);
  color: var(--primary-light);
}

/* Cobradores – mesmo padrão, com ações extras */
.colab-vendedor-card--cobrador {
  padding: 0;
  flex-direction: column;
}

.colab-vendedor-card--cobrador .colab-vendedor-card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.colab-vendedor-card--cobrador:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 174, 239, 0.12);
  transform: translateY(-1px);
}

.colab-vendedor-card--cobrador:hover .colab-vendedor-card-link {
  text-decoration: none;
  color: inherit;
}

.colab-vendedor-badge-inactive {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border-radius: 6px;
}

.colab-vendedor-card-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 0 12px 12px;
}

.colab-vendedor-extra-form {
  margin: 0;
}

.colab-vendedor-extra-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.colab-vendedor-extra-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

.colab-vendedor-extra-btn--danger {
  color: #dc2626;
  border-color: #fecaca;
}

.colab-vendedor-extra-btn--danger:hover {
  color: #b91c1c;
  border-color: #dc2626;
  background: #fef2f2;
}

/* Afiliados – componentes específicos */
.colab-afiliados-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.colab-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.colab-btn-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.colab-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.colab-link-secondary:hover {
  color: var(--primary);
}

.colab-vendedor-card--afiliado {
  padding: 0;
  flex-direction: column;
}

.colab-vendedor-card--afiliado:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 174, 239, 0.12);
  transform: translateY(-1px);
}

.colab-vendedor-card--afiliado .colab-vendedor-card-main {
  padding: 16px;
}

.colab-afiliado-extra {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.colab-afiliado-photo-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.colab-afiliado-photo-label {
  cursor: pointer;
  margin: 0;
}

.colab-afiliado-photo-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
}

.colab-afiliado-photo-btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.colab-afiliado-photo-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* Meu Perfil */
.colab-back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.colab-back-link:hover {
  color: var(--primary);
}

.colab-page-perfil .colab-header {
  margin-bottom: 24px;
}

.colab-perfil-avatar-block {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.colab-perfil-avatar-preview {
  flex-shrink: 0;
}

.colab-perfil-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--border);
  box-shadow: var(--shadow);
}

.colab-perfil-photo-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.colab-perfil-photo-label {
  cursor: pointer;
  margin: 0;
}

.colab-perfil-photo-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
}

.colab-perfil-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.colab-perfil-photo-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.colab-perfil-senha-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.colab-perfil-senha-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.15);
}

@media (max-width: 640px) {
  .colab-header-top { flex-direction: column; gap: 12px; }
  .colab-title { font-size: 22px; }
  .colab-tabs { width: 100%; justify-content: stretch; }
  .colab-tab { flex: 1; text-align: center; padding: 12px; }
  .colab-form-row { grid-template-columns: 1fr; }
  .colab-form-field-btn { align-self: stretch; }
  .colab-btn-add { justify-content: center; }
  .colab-section-header-list { flex-direction: column; gap: 8px; }
  .colab-section { padding: 18px; }
  .colab-table th, .colab-table td { padding: 10px 12px; font-size: 13px; }
  .colab-cards-grid { grid-template-columns: 1fr; }
  .colab-vendedores-grid { grid-template-columns: 1fr; }
  .colab-perfil-avatar-block { flex-direction: column; align-items: flex-start; gap: 20px; }
  .colab-perfil-photo-form { flex-direction: column; align-items: flex-start; }
  .colab-cobrador-actions { flex-direction: column; width: 100%; }
  .colab-cobrador-actions .fluydon-btn { width: 100%; justify-content: center; }
  .colab-checklist { grid-template-columns: 1fr; }
  .colab-editar-perfil { flex-direction: column; align-items: flex-start; }
  .colab-editar-form-row { flex-direction: column; }
  .colab-editar-form-row .colab-editar-field { width: 100%; }
  .colab-editar-form-row .colab-input-compact { min-width: 0; width: 100%; }
  .colab-editar-row-multiline .colab-editar-row-block { margin-right: 0; margin-bottom: 8px; }
}

/* ========== Página Configurar Cobrador (cobrador_editar) ========== */
.colab-header-icon--cobrador {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.14), rgba(217, 119, 6, 0.08));
  border-color: rgba(217, 119, 6, 0.3);
  color: #d97706;
}

.colab-cobrador-conta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.colab-cobrador-senha-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.colab-btn-redefinir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.colab-cobrador-vincular .colab-section-header {
  margin-bottom: 16px;
}

.colab-cobrador-vincular-form {
  margin: 0;
}

.colab-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
}

.colab-checklist-item {
  margin: 0;
  padding: 0;
}

.colab-checklist-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--transition-fast);
}

.colab-checklist-label:hover {
  background: rgba(0, 174, 239, 0.04);
}

.colab-checklist-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
}

.colab-checklist-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  transition: all var(--transition-fast);
}

.colab-checklist-input:focus + .colab-checklist-check {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.colab-checklist-input:checked + .colab-checklist-check {
  background: var(--primary);
  border-color: var(--primary);
}

.colab-checklist-input:checked + .colab-checklist-check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.colab-checklist-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.colab-checklist-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.colab-cobrador-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.colab-cobrador-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ========== Tela Editar Colaborador (vendedor/cobrador) - layout perfil compacto ========== */
.colab-page-editar {
  max-width: 640px;
}

.colab-editar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 16px;
}

.colab-editar-perfil {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.colab-editar-avatar-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.colab-editar-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.colab-editar-photo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.colab-editar-photo-label {
  cursor: pointer;
  margin: 0;
}

.colab-editar-photo-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
}

.colab-editar-photo-btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(0, 174, 239, 0.08);
  border: 1px solid rgba(0, 174, 239, 0.25);
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.colab-editar-photo-btn:hover {
  background: rgba(0, 174, 239, 0.14);
}

.colab-editar-info {
  flex: 1;
  min-width: 0;
}

.colab-editar-nome {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.colab-editar-info .colab-badge,
.colab-editar-sem-conta {
  margin-right: 6px;
}

.colab-editar-sem-conta {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.colab-editar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.colab-editar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 60px;
}

.colab-editar-inline-form {
  display: inline;
  margin: 0;
}

.colab-editar-muted {
  font-size: 13px;
  color: var(--muted);
}

.colab-editar-section {
  padding-top: 16px;
}

.colab-editar-section-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.colab-editar-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.colab-editar-vincular-form {
  margin: 0;
}

.colab-checklist-compact {
  margin: 0 0 16px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.colab-checklist-compact .colab-checklist-label {
  padding: 8px 12px;
}

.colab-checklist-compact .colab-checklist-check {
  width: 18px;
  height: 18px;
}

.colab-checklist-compact .colab-checklist-name {
  font-size: 13px;
}

.colab-editar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.colab-editar-actions .fluydon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Vendedor editar - extras */
.colab-editar-info-wide {
  flex: 1;
  min-width: 0;
}

.colab-editar-dados-form {
  margin: 0;
}

.colab-editar-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.colab-editar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.colab-editar-field .colab-editar-label {
  min-width: auto;
}

.colab-input-compact {
  padding: 6px 10px;
  font-size: 13px;
  min-width: 120px;
}

.colab-select-sm {
  min-width: 100px;
}

.colab-editar-row-multiline {
  flex-wrap: wrap;
  align-items: flex-start;
}

.colab-editar-row-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: 20px;
}

.colab-editar-row-block .colab-editar-label {
  margin-bottom: 0;
}

.colab-editar-account-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: 8px;
}

.colab-editar-section-inline .colab-editar-section-title {
  margin-bottom: 2px;
}

.colab-editar-section-inline .colab-editar-hint {
  margin-bottom: 8px;
}

.colab-editar-list-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.colab-editar-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  background: rgba(0, 174, 239, 0.08);
  border: 1px solid rgba(0, 174, 239, 0.2);
  border-radius: 6px;
}

.colab-editar-tag-form {
  display: inline;
  margin: 0;
}

.colab-editar-tag-remove {
  padding: 0 2px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 2px;
}

.colab-editar-tag-remove:hover {
  color: #dc2626;
}

.colab-editar-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.colab-editar-create-account {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fluydon-btn-danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.4);
}

.fluydon-btn-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
}

/* Senha com botão ver/ocultar (colaboradores) */
.colab-vendedor-senha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.colab-vendedor-card--cobrador .colab-vendedor-card-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.colab-senha-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.colab-senha-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.colab-senha-wrap {
  font-size: 13px;
  font-family: ui-monospace, monospace;
  padding: 4px 10px;
  background: rgba(0, 174, 239, 0.06);
  border: 1px solid rgba(0, 174, 239, 0.2);
  border-radius: 8px;
}

.colab-senha-masked {
  min-width: 4ch;
}

.colab-senha-masked.colab-senha-visible {
  color: var(--text);
}

.colab-senha-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition-fast);
}

.colab-senha-toggle:hover {
  color: var(--primary);
}

.colab-senha-form {
  display: inline;
  margin: 0;
}

.colab-senha-btn {
  font-size: 12px;
}

/* Legacy config styles (para outras páginas) */
.config-page-header-modern { margin-bottom: 28px; }
.config-section-modern { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.config-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.config-card-colaborador { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.config-empty-block { padding: 24px; text-align: center; color: var(--muted); }

.config-page-header .config-page-subtitle {
  font-size: 13px;
  color: var(--muted);
}

.config-section-avatar .config-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.config-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.config-input-file {
  max-width: 240px;
}

.config-section-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.config-section-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}

/* Card inline (ex: toggle Powerviril) */
.config-card-inline {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.config-card-powerviril .config-section-desc {
  margin-bottom: 12px;
}

/* API Correios – barra de progresso (integrações) */
.correios-api-stats {
  max-width: 480px;
}
.correios-api-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.correios-api-stats-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.correios-api-stats-pct {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  white-space: nowrap;
}
.correios-api-stats-pct--info {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.16);
}
.correios-api-stats-pct--ok {
  color: #166534;
  background: rgba(34, 197, 94, 0.16);
}
.correios-api-stats-pct--warn {
  color: #92400e;
  background: rgba(250, 204, 21, 0.22);
}
.correios-api-stats-pct--danger {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.2);
}
.correios-api-stats-last {
  font-size: 12px;
  flex-shrink: 0;
}
.correios-api-progress-wrap {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.correios-api-progress-bar {
  height: 100%;
  width: 100%;
  background: transparent;
  border-radius: 999px;
  overflow: hidden;
}
.correios-api-progress-fill {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  min-width: 0;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00AEEF 0%, #38bdf8 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: width 0.4s ease;
}
.correios-api-progress-fill--info {
  background: linear-gradient(90deg, #00AEEF 0%, #38bdf8 100%);
}
.correios-api-progress-fill--ok {
  background: linear-gradient(90deg, #06b6d4 0%, #22c55e 100%);
}
.correios-api-progress-fill--warn {
  background: linear-gradient(90deg, #facc15 0%, #f97316 100%);
}
.correios-api-progress-fill--danger {
  background: linear-gradient(90deg, #fb7185 0%, #ef4444 100%);
}
.correios-api-progress-bar[style*="--progress: 0%"] .correios-api-progress-fill,
.correios-api-progress-bar[style*="--progress: 0"] .correios-api-progress-fill {
  width: 0;
}
.correios-api-log-details {
  font-size: 13px;
}
.correios-api-log-summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 500;
}
.correios-api-log-summary:hover {
  text-decoration: underline;
}
.correios-api-log-list {
  margin: 8px 0 0;
  padding-left: 20px;
  max-height: 200px;
  overflow-y: auto;
}
.correios-api-log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.correios-api-log-codigo {
  font-size: 12px;
  padding: 2px 6px;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 4px;
}
.correios-api-log-dt {
  font-size: 12px;
}
.correios-api-quota-alert {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-warn, rgba(245, 158, 11, 0.12));
  border: 1px solid var(--border-warn, #e5a00d);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.correios-api-quota-alert a {
  color: var(--primary);
  font-weight: 600;
}

/* Cabeçalhos de seção dentro das sub-tabs de integrações */
.integ-section-head {
  margin-bottom: 18px;
}
.integ-section-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}
.integ-section-desc {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}
.integ-section-desc + .integ-section-desc {
  margin-top: 4px;
}

/* Webhook URL box (integrações) */
.webhook-url-box {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 560px;
}
.webhook-url-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.webhook-url-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}
.webhook-copy-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  background: rgba(0, 174, 239, 0.1);
  border: 1px solid var(--primary);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.webhook-copy-btn:hover {
  background: var(--primary);
  color: white;
}

.webhook-url-box .fluydon-btn { flex-shrink: 0; }

.webhook-test-panel {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.webhook-test-waiting p { margin: 0; }
.webhook-test-result-title { margin: 0 0 12px; font-size: 14px; }
.webhook-test-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  margin-bottom: 16px;
}
.webhook-test-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.webhook-test-value { font-size: 13px; font-weight: 500; }
.webhook-test-status-ok { color: #047857; }
.webhook-test-status-error { color: #b91c1c; }
.webhook-test-details { margin-top: 12px; }
.webhook-test-details summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.webhook-test-pre {
  margin: 8px 0 0;
  padding: 12px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Password visibility toggle (olhinho) */
.input-password-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.input-password-wrap input {
  padding-right: 40px;
  flex: 1;
  min-width: 0;
}
.input-password-wrap .btn-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
}
.input-password-wrap .btn-password-toggle:hover {
  color: var(--text);
}
.input-password-wrap .btn-password-toggle:focus {
  outline: none;
  color: var(--primary);
}
.config-form-row-inline .input-password-wrap {
  min-width: 160px;
  width: auto;
}

.config-back-link {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.config-back-link:hover {
  color: var(--primary);
}

.config-page-header-editar .config-page-subtitle {
  margin-top: 4px;
}

.config-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.config-form-row-inline {
  flex-wrap: nowrap;
  gap: 12px;
}

.config-form-row-inline .config-input {
  min-width: 120px;
}

.config-form-vendedor-add .config-input-nome {
  min-width: 200px;
}

.config-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.config-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.config-form-group {
  margin-bottom: 0;
}

.config-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.config-form-sections { max-width: 720px; }
.config-form-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* Seções numeradas da Operação */
.operacao-section {
  padding: 20px 20px 20px;
  background: rgba(248, 250, 252, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  margin-bottom: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.operacao-section--last {
  margin-bottom: 0;
}
.operacao-section-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.operacao-section-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.config-form-section:last-child { border-bottom: none; }
.config-form-section-head { margin-bottom: 14px; }
.config-form-section-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.config-form-section-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.config-form-field { margin-bottom: 0; }
.config-form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.config-form-input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  min-width: 120px;
}
.config-form-input-wrap { position: relative; }
.config-form-input-wrap--suffix .config-form-input { padding-right: 32px; }
.config-form-input-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--muted);
}
.config-form-field-error { margin: 6px 0 0; font-size: 12px; color: #b91c1c; }
.config-form-actions { margin-top: 12px; }
.config-form-actions--inline { margin-top: 0; margin-left: 8px; }
.config-form-add { margin-top: 16px; }
.config-form-row--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}
.config-form-delete { display: inline; margin: 0; }
.config-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.config-form-inline--sm { display: inline-flex; margin: 0 4px 0 0; }
.config-table-row--inactive { opacity: 0.6; }

.config-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.config-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.config-table th,
.config-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.config-table th {
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 0, 0, 0.02);
}

.config-table tbody tr:last-child td {
  border-bottom: none;
}

.config-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.config-empty,
.config-muted {
  color: var(--muted);
  font-style: italic;
}

.config-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.config-list-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  background: var(--surface);
}

.config-list-item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.config-list-item-actions form {
  margin: 0;
}

.config-conta-box {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 12px;
}

.config-conta-box p {
  margin: 0 0 12px;
}

.config-conta-box .config-form-inline,
.config-conta-box .config-inline-form {
  margin-top: 8px;
  margin-bottom: 8px;
}

.config-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  max-width: 720px;
}

.config-input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  min-width: 140px;
}

.config-input-sm {
  padding: 6px 8px;
  font-size: 12px;
  min-width: 100px;
}

.btn-primary {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
}

a.btn-primary {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.btn-secondary {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #f8fafc;
}

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

.config-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.config-toggle input {
  width: 18px;
  height: 18px;
}

.config-vendedor-card {
  border-left: 4px solid var(--primary);
  padding-left: 20px;
  min-width: 0;
}

.config-vendedor-card .settings-vendedor-header {
  font-size: 15px;
  margin-bottom: 10px;
  gap: 10px;
}

.config-cobrador-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.config-vendedor-card .settings-vendedor-body p.config-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px 0;
}

.config-email-list {
  margin-bottom: 12px !important;
}

.config-email-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.config-profile-list {
  max-width: 640px;
}

.config-profile-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.config-profile-item--with-avatar .config-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.config-profile-item--with-avatar .config-profile-info {
  min-width: 0;
}

.config-profile-avatar-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.config-input-file-sm {
  max-width: 160px;
  font-size: 12px;
}

.config-inline-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.config-badge-inline {
  margin-left: 8px;
  padding: 2px 8px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}

.config-plataformas-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.config-plataforma-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.config-plataforma-nome {
  font-weight: 600;
  min-width: 80px;
}

.config-plataforma-desc {
  font-size: 13px;
  color: var(--muted);
}

/* ========== Página Metas (upgrade UX/UI) ========== */
.colab-header-icon--metas {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.08));
  border-color: rgba(34, 197, 94, 0.25);
  color: #16a34a;
}

.colab-metas-padrao {
  border-left-color: #16a34a;
}

.colab-metas-padrao-cobrador {
  border-left-color: #d97706;
}

.colab-section-header-individual {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.colab-metas-details {
  width: 100%;
  margin-top: 12px;
}

.colab-metas-details summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.colab-metas-details summary::-webkit-details-marker {
  display: none;
}

.colab-metas-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.colab-metas-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(0, 174, 239, 0.08);
  border: 1px solid rgba(0, 174, 239, 0.3);
  border-radius: 10px;
  transition: all var(--transition-fast);
}

.colab-metas-details-btn:hover {
  background: rgba(0, 174, 239, 0.14);
  border-color: rgba(0, 174, 239, 0.5);
}

.colab-metas-details[open] .colab-metas-details-btn {
  background: rgba(0, 174, 239, 0.12);
  border-color: var(--primary);
}

.colab-metas-details-content {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.colab-metas-form {
  margin: 0;
}

.colab-metas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.colab-metas-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: border-color var(--transition-fast);
}

.colab-metas-card:hover {
  border-color: rgba(0, 174, 239, 0.3);
}

.colab-metas-card-title {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.colab-metas-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.colab-metas-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.colab-metas-field .colab-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.colab-input-num {
  max-width: 100px;
}

.colab-metas-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Tabela Metas */
.colab-metas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.colab-metas-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.colab-metas-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
}

.colab-metas-table tbody tr:last-child td {
  border-bottom: none;
}

.colab-metas-table tbody tr:hover {
  background: rgba(0, 174, 239, 0.03);
}

.colab-metas-th-nome {
  min-width: 130px;
}

.colab-metas-th-premio {
  min-width: 90px;
  font-weight: 500;
}

.colab-metas-th-acoes {
  width: 1%;
  white-space: nowrap;
}

.colab-metas-cell-nome {
  font-weight: 500;
}

.colab-metas-cell-premio {
  font-size: 13px;
  color: var(--muted);
}

.colab-metas-btn-action {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(0, 174, 239, 0.08);
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.colab-metas-btn-action:hover {
  background: rgba(0, 174, 239, 0.14);
  color: var(--primary-light);
}

.colab-link-inline {
  color: var(--primary);
  text-decoration: none;
}

.colab-link-inline:hover {
  text-decoration: underline;
}

/* Edit box (formulário de edição inline) */
.colab-metas-edit-box {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.04), rgba(0, 174, 239, 0.02));
  border: 1px solid rgba(0, 174, 239, 0.2);
  border-radius: 14px;
}

.colab-metas-edit-title {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.colab-metas-edit-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Scroll horizontal da tabela em mobile */
.colab-table-wrap .colab-metas-table {
  min-width: 800px;
}

@media (max-width: 640px) {
  .colab-metas-grid {
    grid-template-columns: 1fr;
  }

  .colab-metas-card {
    padding: 18px;
  }
}

/* Legacy (para compatibilidade) */
.config-section-metas .config-section-desc { margin-bottom: 20px; }

.settings-alert.success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

.settings-alert.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* ========== Fluydon UI – Modernização (PLANO_MODERNIZACAO_UI) ========== */

/* Cores Fluydon (alinhadas à identidade visual) */
:root {
  --fluydon-blue: var(--primary);
  --fluydon-blue-light: var(--primary-light);
  --fluydon-green: var(--accent-green);
  --fluydon-amber: #d97706;
  --fluydon-slate: #475569;
}

/* Header de página padronizado */
.fluydon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  transition: opacity var(--transition-normal);
}

.fluydon-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fluydon-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.14), rgba(0, 194, 244, 0.1));
  border: 1px solid rgba(0, 174, 239, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary);
}

.fluydon-header-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.fluydon-header-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ========== Header compacto (dashboard + vendas) ========== */
.page-header-compact {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 6px 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  min-height: 36px;
  background: var(--surface, #fff);
  transition: box-shadow 0.2s var(--ease-smooth);
}

.page-header-compact .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-header-compact .header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.12), rgba(0, 194, 244, 0.08));
  border: 1px solid rgba(0, 174, 239, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 14px;
  flex-shrink: 0;
}

.page-header-compact .header-text h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}

.page-header-compact .header-text p {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 0 0;
  line-height: 1.2;
}

.page-header-compact .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-header-compact .header-actions .btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  transition: color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.page-header-compact .header-actions .btn-compact:hover {
  background: rgba(0, 174, 239, 0.06);
  border-color: rgba(0, 174, 239, 0.25);
  color: var(--primary);
}

.page-header-compact .header-actions .btn-compact.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.page-header-compact .header-actions .btn-compact.btn-primary:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

.page-header-compact .pills-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.page-header-compact .pills-inline a,
.page-header-compact .pills-inline span.pill-active {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.page-header-compact .pills-inline a:hover {
  color: var(--primary);
  background: rgba(0, 174, 239, 0.08);
}

.page-header-compact .pills-inline .pill-active {
  background: var(--primary);
  color: #fff;
  border: none;
}

/* Card de métrica – compacto e moderno */
.fluydon-metric-card {
  background: var(--surface);
  border-radius: var(--card-radius);
  padding: 20px 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-fast);
}

.fluydon-metric-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.fluydon-metric-card.border-blue {
  border-left: 4px solid var(--primary);
}

.fluydon-metric-card.border-green {
  border-left: 4px solid var(--fluydon-green);
}

.fluydon-metric-card.border-amber {
  border-left: 4px solid var(--fluydon-amber);
}

.fluydon-metric-card.border-slate {
  border-left: 4px solid var(--fluydon-slate);
}

.fluydon-metric-card.border-red {
  border-left: 4px solid #ef4444;
}

.fluydon-metric-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.fluydon-metric-value {
  font-size: 26px;
  font-weight: 700;
  margin: 6px 0 0;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.fluydon-metric-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}

/* Grid de cards de métrica */
.fluydon-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Central de Métricas: filtros e toggle */
.metrics-filters-panel .metrics-filters-form { margin-top: 8px; }
.metrics-token-warning {
  margin-top: 10px;
  margin-bottom: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.metrics-token-warning a {
  font-weight: 600;
  color: #b45309;
  text-decoration: underline;
}
.metrics-token-warning a:hover {
  color: #92400e;
}

/* ========== Central de Métricas – padrão Fluydon ========== */
.metrics-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 32px;
}
.metrics-page-header {
  margin-bottom: 28px;
}
.metrics-page-header .fluydon-header-subtitle,
.metrics-page-header .config-page-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.metrics-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.metrics-card {
  background: var(--surface);
  border-radius: var(--card-radius, 12px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.04));
  margin-bottom: 20px;
  overflow: hidden;
}
.metrics-card-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.metrics-card-head--row {
  flex-direction: row;
  justify-content: space-between;
}
.metrics-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.metrics-card-title--small { font-size: 1rem; }
.metrics-card-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.metrics-card-badge--connected {
  color: #0d9488;
  background: rgba(13, 148, 136, 0.12);
}
.metrics-card-badge--disconnected {
  color: var(--muted);
  background: #f1f5f9;
}
.metrics-card-sub {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}
.metrics-card-desc {
  padding: 0 22px 14px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.metrics-card-actions {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.metrics-action-form { margin: 0; }

.metrics-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 20px 22px;
}
.metrics-kpis-grid .fluydon-metric-card {
  margin: 0;
}
.metrics-kpis-grid--simple {
  grid-template-columns: repeat(2, 1fr);
}
.metrics-kpi-cpa-hoje {
  background: linear-gradient(135deg, #f8fcff 0%, #f0f9ff 100%);
  border-color: rgba(0, 174, 239, 0.25);
}

.metrics-card--filters { padding: 18px 22px; }
.metrics-card--filters .metrics-card-title--small { margin-bottom: 0; }
.metrics-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: flex-end;
  margin-top: 14px;
}
.metrics-filters-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metrics-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.metrics-filter-input,
.metrics-filter-select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  min-width: 120px;
  background: var(--surface);
}
.metrics-filter-input:focus,
.metrics-filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}
.metrics-filter-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.metrics-filter-dates .metrics-filter-input { min-width: 130px; }
.metrics-filter-sep {
  font-size: 12px;
  color: var(--muted);
}
.metrics-filters-submit { align-self: flex-end; }

.metrics-view-toggle { margin: 0; }
.metrics-toggle-pills {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.metrics-toggle-pill {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.metrics-toggle-pill:hover {
  background: #f1f5f9;
  color: var(--text);
}
.metrics-toggle-pill.active {
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, #0099d6 100%);
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.3);
}

.metrics-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px;
}
.metrics-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border);
}
.metrics-table-num,
.metrics-table-currency { text-align: right; }
.metrics-table thead th.metrics-table-num,
.metrics-table thead th.metrics-table-currency { text-align: right; }
.metrics-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.metrics-table tbody tr:hover td {
  background: rgba(0, 174, 239, 0.04);
}
.metrics-table tbody tr:nth-child(even) td {
  background: #fafbfd;
}
.metrics-table tbody tr:nth-child(even):hover td {
  background: rgba(0, 174, 239, 0.06);
}
.metrics-table-primary { font-weight: 600; color: var(--brand-dark); }
.metrics-table-muted { font-size: 12px; color: var(--muted); margin-left: 4px; }
.metrics-table-code {
  font-size: 12px;
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.metrics-table-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 13px;
}
.metrics-table tfoot .metrics-table-total td {
  font-weight: 700;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border-top: 2px solid var(--border);
  padding: 12px 16px;
}
.metrics-table-subrow td {
  padding-top: 0;
  padding-bottom: 12px;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.metrics-campaigns-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0 0;
}
.metrics-campaign-badge {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-block;
}
.metrics-campaign-method { color: var(--muted); font-size: 11px; }
.metrics-table--compact thead th,
.metrics-table--compact tbody td { padding: 10px 16px; font-size: 12px; }

.metrics-card--warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, #fffbeb 0%, var(--surface) 6%);
}
.metrics-card--warning .metrics-card-title {
  color: #92400e;
}

.metrics-card--last .metrics-card-head { padding-bottom: 14px; }

.metrics-page .metrics-token-warning {
  margin: 0 22px 14px;
  border-radius: 8px;
}

/* Relatórios diário e mensal */
.metrics-card--report .metrics-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.metrics-report-date { font-size: 13px; color: var(--muted); font-weight: 500; }
.metrics-report-resumo { margin-bottom: 20px; }
.metrics-report-resumo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 20px; }
.metrics-report-resumo-item { display: flex; flex-direction: column; gap: 2px; }
.metrics-report-resumo-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.metrics-report-resumo-value { font-size: 15px; font-weight: 600; color: var(--text); }
.metrics-report-ranking-title { font-size: 14px; font-weight: 600; color: var(--brand-dark); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.metrics-table--ranking .metrics-table-pos { width: 56px; text-align: center; }
.metrics-ranking-badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.metrics-ranking-badge--1 { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; }
.metrics-ranking-badge--2 { background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); color: #475569; }
.metrics-ranking-badge--3 { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); color: #9a3412; }
.metrics-ranking-badge--4,
.metrics-ranking-badge--5 { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.metrics-cpa {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(226, 232, 240, 0.5);
  color: var(--muted);
}
.metrics-cpa--green { background: rgba(5, 150, 105, 0.1); color: #059669; }
.metrics-cpa--yellow { background: rgba(180, 83, 9, 0.1); color: #b45309; }
.metrics-cpa--red { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.metrics-cpa--neutral { background: rgba(226, 232, 240, 0.5); color: var(--muted); }
.metrics-report-meta-context { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.metrics-alertas-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.metrics-alerta-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 8px; border-left: 4px solid var(--border); }
.metrics-alerta--green { border-left-color: #059669; background: rgba(5, 150, 105, 0.06); }
.metrics-alerta--yellow { border-left-color: #d97706; background: rgba(217, 119, 6, 0.06); }
.metrics-alerta--red { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.06); }
.metrics-alerta--neutral { border-left-color: var(--border); background: var(--surface); }
.metrics-alerta-nome { font-weight: 600; color: var(--text); }
.metrics-alerta-detail { font-size: 12px; color: var(--muted); }
.metrics-report-progresso-desc { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.metrics-progresso-wrap { display: flex; align-items: center; gap: 12px; }
.metrics-progresso-bar {
  flex: 1;
  height: 10px;
  background: rgba(226, 232, 240, 0.7);
  border-radius: 999px;
  overflow: hidden;
}
.metrics-progresso-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #34d399 100%);
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.metrics-progresso-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation: progressShimmer 2.4s ease-in-out infinite;
}
@keyframes progressShimmer {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(400%); }
}
.metrics-progresso-pct { font-size: 13px; font-weight: 700; color: var(--brand-dark); min-width: 40px; }

/* ---------- Métricas layout fluido (metrics-page--fluid) ---------- */
.metrics-page--fluid .metrics-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--surface);
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.metrics-page--fluid .metrics-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.metrics-page--fluid .metrics-hero-text { min-width: 0; }
.metrics-page--fluid .metrics-hero-text .fluydon-header-title { font-size: 1.25rem; margin: 0; }
.metrics-page--fluid .metrics-hero-text .fluydon-header-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.metrics-hero-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.metrics-hero-badge--ok { color: #0d9488; background: rgba(13, 148, 136, 0.12); }
.metrics-hero-badge--off { color: var(--muted); background: #f1f5f9; }
.metrics-page--fluid .metrics-hero-filters { flex: 1 1 280px; min-width: 0; }
.metrics-hero-filters-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.metrics-input {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.metrics-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}
.metrics-input--select { min-width: 120px; cursor: pointer; }
.metrics-input--date { min-width: 130px; }
.metrics-hero-dates {
  display: flex;
  align-items: center;
  gap: 6px;
}
.metrics-hero-dates-sep { font-size: 11px; color: var(--muted); }
.metrics-page--fluid .metrics-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.metrics-hero-form-inline { margin: 0; }
.metrics-token-alert {
  font-size: 11px;
  color: #b45309;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.metrics-token-alert a { font-weight: 600; color: #92400e; text-decoration: underline; }
.metrics-token-alert a:hover { color: #b45309; }

/* ── Base blocks ── */
.metrics-block {
  background: var(--surface);
  border-radius: var(--card-radius);
  border: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  margin-bottom: 14px;
  overflow: hidden;
}
.metrics-block--muted {
  background: #fafbfc;
  border-color: rgba(226, 232, 240, 0.5);
  box-shadow: none;
}

/* ── Resumo rápido (4 KPI cards individuais) ── */
.metrics-resumo-block .metrics-resumo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
}
.metrics-resumo-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-top-width: 3px;
  border-radius: 10px;
  position: relative;
  transition: box-shadow 0.18s ease, transform 0.15s ease;
  cursor: default;
}
.metrics-resumo-card:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}
.metrics-resumo-card + .metrics-resumo-card { border-left: 1px solid rgba(226, 232, 240, 0.8); }
.metrics-resumo-card--blue  { border-top-color: var(--primary); }
.metrics-resumo-card--green { border-top-color: #059669; }
.metrics-resumo-card--amber { border-top-color: #d97706; }
.metrics-resumo-card--slate { border-top-color: #64748b; }
.metrics-resumo-card--blue  .metrics-resumo-card-body { --kpi-accent: var(--primary); }
.metrics-resumo-card--green .metrics-resumo-card-body { --kpi-accent: #059669; }
.metrics-resumo-card--amber .metrics-resumo-card-body { --kpi-accent: #d97706; }
.metrics-resumo-card--slate .metrics-resumo-card-body { --kpi-accent: #64748b; }
.metrics-resumo-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}
.metrics-resumo-card--blue  .metrics-resumo-card-icon { background: rgba(0, 174, 239, 0.12); color: var(--primary); }
.metrics-resumo-card--green .metrics-resumo-card-icon { background: rgba(5, 150, 105, 0.12); color: #059669; }
.metrics-resumo-card--amber .metrics-resumo-card-icon { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.metrics-resumo-card--slate .metrics-resumo-card-icon { background: rgba(100, 116, 139, 0.12); color: #64748b; }
.metrics-resumo-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.metrics-resumo-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.metrics-resumo-card-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.metrics-resumo-card-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Blocos financeiros (Projeção / Pagamentos) ── */
.metrics-financeiro-block .metrics-block-head { border-bottom: none; padding-bottom: 10px; align-items: flex-start; }
.metrics-block-tag {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.metrics-financeiro-ticket-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 174, 239, 0.08);
  color: var(--primary);
  border: 1px solid rgba(0, 174, 239, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}
.metrics-financeiro-ticket-badge--green {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.2);
}
.metrics-financeiro-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(226, 232, 240, 0.5);
}
.metrics-financeiro-left {
  padding: 16px 20px 20px;
  border-right: 1px solid rgba(226, 232, 240, 0.6);
}
.metrics-financeiro-right {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.metrics-financeiro-bruto-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 10px;
}
.metrics-financeiro-divider {
  height: 1px;
  background: rgba(226, 232, 240, 0.8);
  margin: 0 0 10px;
}
.metrics-financeiro-section-label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.metrics-financeiro-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.35);
}
.metrics-financeiro-row:last-child { border-bottom: none; }
.metrics-financeiro-row-label { font-size: 13px; color: var(--muted); }
.metrics-financeiro-row-value { font-size: 13px; font-weight: 600; color: var(--text); }
.metrics-financeiro-bruto-row .metrics-financeiro-row-label { font-size: 13px; font-weight: 600; color: var(--text); }
.metrics-financeiro-bruto-row .metrics-financeiro-row-value { font-size: 16px; font-weight: 700; color: var(--brand-dark); }
.metrics-financeiro-row--deduct .metrics-financeiro-row-value { color: #ef4444; font-weight: 500; font-size: 12.5px; }
/* Produtos dropdown */
.metrics-financeiro-row--produtos { flex-direction: column; align-items: stretch; }
.metrics-financeiro-row-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.metrics-financeiro-row-trigger:hover { opacity: 0.85; }
.metrics-financeiro-row-value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.metrics-financeiro-row-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  transition: transform 0.2s ease;
}
.metrics-financeiro-row--produtos[aria-expanded='true'] .metrics-financeiro-row-chevron { transform: rotate(180deg); }
.metrics-financeiro-produtos-dropdown {
  padding: 8px 0 4px 12px;
  border-left: 2px solid rgba(0, 174, 239, 0.25);
  margin-top: 4px;
  background: rgba(248, 250, 252, 0.5);
  border-radius: 0 6px 6px 0;
}
.metrics-financeiro-produto-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px 20px;
  align-items: center;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
}
.metrics-financeiro-produto-item:last-child { border-bottom: none; }
.metrics-financeiro-produto-item span:first-child {
  color: var(--text);
  min-width: 0;
}
.metrics-financeiro-produto-item-qtd {
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.metrics-financeiro-produto-item-custo {
  font-weight: 600;
  color: #ef4444;
  white-space: nowrap;
  text-align: right;
  min-width: 72px;
}
.metrics-financeiro-resultado {
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.07) 0%, rgba(0, 174, 239, 0.04) 100%);
  border: 1px solid rgba(0, 174, 239, 0.2);
}
.metrics-financeiro-resultado--green {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
  border-color: rgba(5, 150, 105, 0.2);
}
.metrics-financeiro-resultado-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 8px;
}
.metrics-financeiro-resultado-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.metrics-financeiro-resultado--green .metrics-financeiro-resultado-value { color: #059669; }
.metrics-financeiro-produto-list { margin-top: auto; }
.metrics-financeiro-produto-list-title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.metrics-financeiro-produto-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
  align-items: center;
}
.metrics-financeiro-produto-row:last-child { border-bottom: none; }
.metrics-financeiro-produto-qtd { color: var(--muted); text-align: right; }
.metrics-financeiro-produto-custo { font-weight: 600; color: var(--text); text-align: right; min-width: 72px; }

/* ── Criativos pills bar ── */
.metrics-criativos-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.5);
  background: rgba(248, 250, 252, 0.6);
}
.metrics-criativos-bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex-shrink: 0;
  margin-right: 4px;
}
.metrics-criativos-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.metrics-criativo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(0, 174, 239, 0.08);
  color: var(--brand-dark);
  border: 1px solid rgba(0, 174, 239, 0.2);
}
.metrics-criativo-pill--green {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.2);
  color: #065f46;
}
.metrics-criativo-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
}
.metrics-criativo-pill--green .metrics-criativo-pill-count { background: #059669; }

/* ── Análise Final (standalone cards) ── */
.metrics-analise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border-top: none;
}
.metrics-analise-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 10px;
  transition: box-shadow 0.18s ease;
}
.metrics-analise-card:last-child { border-right: 1px solid rgba(226, 232, 240, 0.8); }
.metrics-analise-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.metrics-analise-card--highlight {
  background: linear-gradient(135deg, rgba(5,150,105,0.07) 0%, rgba(16,185,129,0.04) 100%);
  border-color: rgba(5, 150, 105, 0.22);
}
.metrics-analise-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.metrics-analise-card-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.metrics-analise-card--highlight .metrics-analise-card-value { color: #059669; }
.metrics-analise-card-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

.metrics-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.65);
  flex-wrap: wrap;
  background: rgba(248, 250, 252, 0.5);
}
.metrics-block-head--filters {
  align-items: flex-end;
  gap: 12px 20px;
}
.metrics-block--muted .metrics-block-head {
  border-bottom-color: rgba(226, 232, 240, 0.4);
  background: transparent;
}
.metrics-block-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}
.metrics-block-meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  background: rgba(226, 232, 240, 0.6);
  padding: 2px 8px;
  border-radius: 20px;
}
.metrics-block-desc {
  margin: 8px 18px 12px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.metrics-block-desc code {
  padding: 2px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.metrics-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.65);
  background: rgba(248, 250, 252, 0.4);
}
.metrics-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px;
  border-right: 1px solid rgba(226, 232, 240, 0.6);
  transition: background 0.14s ease;
}
.metrics-stat:last-child { border-right: none; }
.metrics-stat:hover { background: rgba(0, 174, 239, 0.04); }
.metrics-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.metrics-stat-value { font-size: 16px; font-weight: 700; color: var(--brand-dark); letter-spacing: -0.02em; }
.metrics-block-subtitle {
  margin: 0;
  padding: 11px 18px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(248, 250, 252, 0.6);
}
.metrics-resumo-card-icon svg { width: 18px; height: 18px; }
.metrics-block--report .metrics-block-subtitle { padding-top: 12px; }
.metrics-block--report .metrics-table-wrap { margin: 0; }
.metrics-metas-section {
  padding: 14px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

/* Filtros dentro do cabeçalho do bloco Campanhas */
.metrics-campaigns-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 0;
}
.metrics-campaigns-filters .vendas-filter-field { min-width: 140px; }
.metrics-campaigns-filters .vendas-filter-field span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.metrics-campaigns-filters .vendas-filter-field select,
.metrics-campaigns-filters .vendas-custom-select__trigger { min-width: 160px; max-width: 220px; }
.metrics-meta-context { font-size: 11px; color: var(--muted); margin: -2px 0 10px; }
.metrics-progresso-desc { font-size: 11px; color: var(--muted); margin: 8px 0 0; }

.metrics-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid rgba(226, 232, 240, 0.7);
}
.metrics-rank--1 {
  background: linear-gradient(135deg, #fef9e7, #fde68a);
  color: #78350f;
  border-color: #fbbf24;
  font-weight: 700;
}
.metrics-rank--2 {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  color: #374151;
  border-color: #cbd5e1;
  font-weight: 700;
}
.metrics-rank--3 {
  background: linear-gradient(135deg, #fff8f0, #fed7aa);
  color: #7c2d12;
  border-color: #fb923c;
  font-weight: 700;
}

.metrics-page--fluid .metrics-table-wrap { padding: 0 18px 14px; }
.metrics-page--fluid .metrics-table--compact thead th,
.metrics-page--fluid .metrics-table--compact tbody td { padding: 8px 12px; font-size: 12px; }
.metrics-page--fluid .metrics-table--ranking .metrics-table-pos { width: 48px; }
.metrics-page--fluid .metrics-table tbody tr {
  transition: background 0.14s ease;
  cursor: default;
}
.metrics-page--fluid .metrics-table tbody tr:hover {
  background: rgba(0, 174, 239, 0.04);
}
.metrics-page--fluid .metrics-table--ranking tbody tr:hover td:nth-child(2) {
  color: var(--brand-dark);
}
.metrics-page--fluid .metrics-table tfoot tr.metrics-table-total {
  background: rgba(248, 250, 252, 0.9);
}
.metrics-page--fluid .metrics-table tfoot tr.metrics-table-total td {
  font-weight: 700;
  color: var(--brand-dark);
  font-size: 12px;
  border-top: 1px solid rgba(226,232,240,0.8);
}

/* Métricas: header igual ao dashboard (card + abas) */
.metrics-header.dashboard-header-card { /* reutiliza card do dashboard */ }

.metrics-header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 16px;
  min-width: 0;
  justify-content: space-between;
}

.metrics-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1px solid rgba(0, 174, 239, 0.12);
}
.metrics-header-brand .dashboard-header-icon { flex-shrink: 0; }
.metrics-header-text { min-width: 0; }
.metrics-header-text .dashboard-header-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); }
.metrics-header .dashboard-header-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.metrics-header-period {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding: 0 16px;
  border-right: 1px solid rgba(0, 174, 239, 0.12);
  border-left: 1px solid rgba(0, 174, 239, 0.12);
}
.metrics-header .metrics-header-tabs.dashboard-tabs {
  gap: 0;
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.metrics-header-tabs .dashboard-tab {
  padding: 6px 10px;
  font-size: 12px;
  margin-left: -1px;
}
.metrics-header-tabs .dashboard-tab:first-child { margin-left: 0; }
.metrics-header .metrics-header-dates.dashboard-header-dates { margin: 0; flex-shrink: 0; }


.metrics-header-actions {
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-height: 36px;
}
.metrics-header-actions .metrics-hero-form-inline { margin: 0; }

/* Estilos finais dos botões do header de métricas ficam após .dashboard-header-card .dashboard-btn-ver-vendas (maior especificidade). */

/* Metrics: CTA de conexão quando Facebook não vinculado */
.metrics-connect-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}
.metrics-connect-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 420px;
  background: #fff;
  border: 1px solid rgba(0, 174, 239, 0.15);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 4px 24px rgba(0, 174, 239, 0.08), 0 1px 4px rgba(0,0,0,0.04);
}
.metrics-connect-cta-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,174,239,0.1) 0%, rgba(0,174,239,0.18) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 4px;
}
.metrics-connect-cta-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  margin: 0;
}
.metrics-connect-cta-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.metrics-connect-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 24px;
  background: linear-gradient(180deg, #00AEEF 0%, #0099d6 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.3);
  transition: box-shadow 0.15s, opacity 0.15s;
}
.metrics-connect-cta-btn:hover { opacity: 0.9; box-shadow: 0 4px 14px rgba(0, 174, 239, 0.4); color: #fff; text-decoration: none; }

/* Token alert no header */
.metrics-token-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
}
.metrics-token-alert a { color: #b45309; text-decoration: underline; font-weight: 600; }

/* Metrics: botão Integrações */
.metrics-btn-integrations {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 174, 239, 0.08);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid rgba(0, 174, 239, 0.2);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.metrics-btn-integrations:hover { background: rgba(0, 174, 239, 0.15); color: var(--brand); text-decoration: none; }

@media (max-width: 900px) {
  .metrics-header-inner { flex-wrap: wrap; gap: 10px; justify-content: space-between; }
  .metrics-header-brand { width: 100%; padding-right: 0; border-right: none; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 174, 239, 0.1); }
  .metrics-header-period {
    flex-wrap: wrap; gap: 8px; justify-content: flex-start;
    padding: 0; border-left: none; border-right: none; width: 100%;
  }
  .metrics-header-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 768px) {
  .metrics-page { padding: 0 16px 24px; }
  .metrics-page-header { flex-wrap: wrap; }
  .metrics-page-header .fluydon-btn { width: 100%; justify-content: center; margin-top: 8px; }
  .metrics-kpis-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px 16px; }
  .metrics-filters-bar { gap: 14px; }
  .metrics-card-head--row { flex-direction: column; align-items: flex-start; }
  .metrics-toggle-pills { width: 100%; }
  .metrics-toggle-pill { flex: 1; }
  /* Fluid layout mobile */
  .metrics-page--fluid .metrics-header.dashboard-header-card { padding: 14px 16px; }
  .metrics-header-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .metrics-header-brand { padding-right: 0; border-right: none; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 174, 239, 0.1); }
  .metrics-header-period { padding: 10px 0 0; border-left: none; border-right: none; border-top: 1px solid rgba(0, 174, 239, 0.1); border-bottom: none; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 174, 239, 0.1); }
  .metrics-header-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 0 0 auto; }
  .metrics-header-tabs .dashboard-tab { margin: 0; padding: 8px 10px; border-radius: 8px; }
  .metrics-header-dates.dashboard-header-dates { display: flex; flex-wrap: nowrap; width: 100%; }
  .metrics-campaigns-filters { gap: 8px; }
  .metrics-campaigns-filters .vendas-filter-field select,
  .metrics-campaigns-filters .vendas-custom-select__trigger { min-width: 120px; max-width: none; width: 100%; }
  .metrics-header-actions { margin-left: 0; justify-content: flex-start; min-height: 0; }
  .metrics-header-actions .dashboard-btn-ver-vendas,
  .metrics-header-actions .metrics-btn-sync,
  .metrics-header-actions .metrics-btn-integrations { flex: 1; min-width: 0; justify-content: center; }
  .metrics-resumo-block .metrics-resumo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 12px; }
  .metrics-resumo-card { padding: 13px 14px; gap: 10px; }
  .metrics-resumo-card + .metrics-resumo-card { border-left: 1px solid rgba(226, 232, 240, 0.8); }
  .metrics-resumo-card-value { font-size: 1.3rem; }
  .metrics-financeiro-body { grid-template-columns: 1fr; }
  .metrics-financeiro-left { border-right: none; border-bottom: 1px solid rgba(226, 232, 240, 0.6); padding-bottom: 16px; }
  .metrics-analise-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 12px; }
  .metrics-analise-card:last-child { border-right: 1px solid rgba(226, 232, 240, 0.8); }
  .metrics-page--fluid .metrics-block-head { padding: 10px 14px; }
  .metrics-stats-row { flex-wrap: wrap; }
  .metrics-stat { padding: 10px 14px; border-right: none; border-bottom: 1px solid rgba(226, 232, 240, 0.6); flex: 1 1 40%; }
  .metrics-stat:nth-last-child(-n+2):nth-child(odd), .metrics-stat:last-child { border-bottom: none; }
  .metrics-page--fluid .metrics-table-wrap { padding: 0 14px 12px; }
  .metrics-page--fluid .metrics-table--compact thead th,
  .metrics-page--fluid .metrics-table--compact tbody td { padding: 6px 10px; font-size: 11px; }
}

.metrics-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.metrics-filters-row .vendas-filter-field { min-width: 140px; }
.metrics-toggle-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.metrics-view-toggle .fluydon-btn.active {
  background: var(--fluydon-primary);
  color: #fff;
  border-color: var(--fluydon-primary);
}
.table-responsive-metrics {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive-metrics .sales-table { min-width: 640px; }
.sales-table .sub-row td {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.campaigns-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.campaign-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-muted);
  font-size: 11px;
  color: var(--muted);
}

/* Tabela compacta */
.fluydon-table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fluydon-table-compact thead th {
  background: #f8fafc;
  color: var(--fluydon-slate);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.fluydon-table-compact tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.fluydon-table-compact tbody tr:hover {
  background: rgba(0, 174, 239, 0.04);
}

.fluydon-table-compact .cell-main {
  font-size: 13px;
  font-weight: 600;
}

.fluydon-table-compact .cell-sub {
  font-size: 11px;
  color: var(--muted);
}

/* Badge pequeno (status) – base legado */
.fluydon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.fluydon-badge.status-paga {
  background: rgba(5, 150, 105, 0.14);
  color: var(--status-delivered);
}

.fluydon-badge.status-aguardando_pagamento,
.fluydon-badge.status-criada {
  background: rgba(217, 119, 6, 0.14);
  color: var(--status-processed);
}

.fluydon-badge.status-cancelada,
.fluydon-badge.status-frustrada,
.fluydon-badge.status-reembolsada {
  background: rgba(220, 38, 38, 0.12);
  color: var(--status-cancelled);
}

.fluydon-badge.status-default {
  background: #f1f5f9;
  color: var(--fluydon-slate);
}

/* ========== Status como “mark” (bordas arredondadas, cores por estado) ========== */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Status do pedido */
.status-pedido-criada {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}
.status-pedido-agendado {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}
.status-pedido-aguardando_pagamento {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}
.status-pedido-aguardando_confirmacao {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}
.status-pedido-paga {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}
.status-pedido-codigo_invalido {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}
.status-pedido-cancelada,
.status-pedido-frustrada,
.status-pedido-reembolsada {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* Status de entrega */
.status-entrega-nao_informado {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
.status-entrega-aguardando_postagem {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}
.status-entrega-aguardando_codigo {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}
.status-entrega-rastreio_adicionado {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.status-entrega-codigo_informado {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.status-entrega-pedido_postado {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.status-entrega-aguardando_retirada {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}
.status-entrega-em_transito {
  background: #e0e7ff;
  color: #4338ca;
  border-color: #a5b4fc;
}
.status-entrega-em_separacao {
  background: #c7d2fe;
  color: #3730a3;
  border-color: #818cf8;
}
.status-entrega-entregue {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}
.status-entrega-agendado {
  background: #fef9c3;
  color: #a16207;
  border-color: #fde047;
}
.status-entrega-codigo_invalido {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}
.status-entrega-cancelado_entrega {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* Coluna Perfil (avatar + nome) na tabela de pedidos */
.table-profile-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.table-profile-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.cell-truncate {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botões Fluydon */
.fluydon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), box-shadow var(--transition-normal), transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.fluydon-btn:active {
  transform: scale(0.97) translateY(0) !important;
  animation: cfgPop 0.2s var(--ease-smooth);
}

.fluydon-btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
}

.fluydon-btn-primary:hover {
  opacity: 0.95;
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.4);
  transform: translateY(-1px);
}

.fluydon-btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.fluydon-btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--primary);
  color: var(--primary);
}
.fluydon-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
.fluydon-btn-icon svg {
  display: block;
}

/* Botão outline/danger para ações destrutivas (Remover, etc.) */
.fluydon-btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.fluydon-btn-outline:hover {
  border-color: var(--muted);
  color: var(--text);
}

.fluydon-btn-danger {
  border-color: #fecaca;
  color: #dc2626;
}

.fluydon-btn-danger:hover {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
}

.fluydon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sidebar-link:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

.pagination a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Info item (detalhes / configurações) */
.fluydon-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.fluydon-info-item:last-child {
  border-bottom: none;
}

.fluydon-info-item.historico-item--alerta {
  background: rgba(245, 158, 11, 0.08);
  margin: 0 -18px;
  padding: 12px 18px !important;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
  gap: 12px;
}

.fluydon-info-item.historico-item--prioridade {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(234, 88, 12, 0.08) 100%);
  border-left-color: #ea580c;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.12);
  padding: 12px 18px !important;
  gap: 12px;
}

.fluydon-info-item.historico-item--prioridade .fluydon-info-icon--alerta {
  background: rgba(234, 88, 12, 0.2);
  color: #ea580c;
  flex-shrink: 0;
}
.fluydon-info-item.historico-item--prioridade .fluydon-info-label {
  margin-bottom: 2px;
}
.fluydon-info-item.historico-item--prioridade .fluydon-info-value {
  margin: 0;
  padding: 4px 0 0;
}
.fluydon-info-item.historico-item--prioridade .fluydon-info-desc {
  margin: 4px 0 0 !important;
  padding: 0;
  font-size: 0.85em;
}

.historico-badge-prioridade {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.fluydon-info-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--fluydon-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.fluydon-info-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.fluydon-info-value {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ========== Venda Detalhe (vd-) — Modern SaaS Redesign ========== */

/* -- Keyframes -- */
@keyframes vdSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vdCardEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
}
@keyframes vdCopyFlash {
  0%   { background: rgba(34,197,94,0.2); }
  100% { background: transparent; }
}

/* -- Hero Banner -- */
.vd-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(160deg, rgba(0,174,239,0.06) 0%, rgba(255,255,255,0.7) 40%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  animation: vdSlideDown 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.vd-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00AEEF, #00D4FF);
  border-radius: 16px 16px 0 0;
}

.vd-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.vd-hero-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm, 8px);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,174,239,0.18), rgba(0,212,255,0.1));
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.vd-hero:hover .vd-hero-icon { transform: scale(1.1) rotate(-3deg); }

.vd-hero-text { min-width: 0; }
.vd-hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.vd-hero-platform {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(0,174,239,0.1); color: var(--primary);
}
.vd-hero-type {
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.vd-hero-date {
  font-size: 12px; color: var(--muted);
}
.vd-hero-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--muted); opacity: 0.5;
}

.vd-hero-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.vd-hero-value { text-align: right; }
.vd-hero-value-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
}
.vd-hero-value-amount {
  display: block; font-size: 24px; font-weight: 700;
  color: var(--text); letter-spacing: -0.025em;
}

.vd-hero-actions {
  display: flex; align-items: center; gap: 8px;
}

/* -- Commission Toggle -- */
.vd-commission-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 2px;
  margin-top: 8px;
}
.vd-commission-toggle .filter-btn {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.vd-commission-toggle .filter-btn:hover {
  color: var(--text);
}
.vd-commission-toggle .filter-btn.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* -- Two Column Layout -- */
.vd-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.vd-col-main, .vd-col-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* -- Card Base (Glassmorphism) -- */
.vd-card {
  position: relative;
  border-radius: var(--radius-md, 12px);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease, border-color 0.2s ease;
  animation: vdCardEnter 0.35s cubic-bezier(.34,1.56,.64,1) both;
}
.vd-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  opacity: 0.85;
  transition: opacity 0.2s ease, height 0.28s ease;
}
.vd-card:hover::before { height: 4px; opacity: 1; }
.vd-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.6);
}

/* Staggered entrance */
.vd-col-main .vd-card:nth-child(1) { animation-delay: 50ms; }
.vd-col-main .vd-card:nth-child(2) { animation-delay: 100ms; }
.vd-col-main .vd-card:nth-child(3) { animation-delay: 150ms; }
.vd-col-side .vd-card:nth-child(1) { animation-delay: 75ms; }
.vd-col-side .vd-card:nth-child(2) { animation-delay: 125ms; }
.vd-col-side .vd-card:nth-child(3) { animation-delay: 175ms; }

/* -- Card Color Variants -- */
.vd-card--blue::before { background: linear-gradient(90deg, #00AEEF, #00D4FF); }
.vd-card--blue { background: linear-gradient(160deg, rgba(0,174,239,0.06) 0%, rgba(255,255,255,0.7) 40%); }
.vd-card--blue:hover { box-shadow: 0 8px 24px rgba(0,174,239,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

.vd-card--green::before { background: linear-gradient(90deg, #22c55e, #34e780); }
.vd-card--green { background: linear-gradient(160deg, rgba(52,231,128,0.06) 0%, rgba(255,255,255,0.7) 40%); }
.vd-card--green:hover { box-shadow: 0 8px 24px rgba(52,231,128,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

.vd-card--amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.vd-card--amber { background: linear-gradient(160deg, rgba(245,158,11,0.06) 0%, rgba(255,255,255,0.7) 40%); }
.vd-card--amber:hover { box-shadow: 0 8px 24px rgba(245,158,11,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

.vd-card--purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.vd-card--purple { background: linear-gradient(160deg, rgba(139,92,246,0.05) 0%, rgba(255,255,255,0.7) 40%); }
.vd-card--purple:hover { box-shadow: 0 8px 24px rgba(139,92,246,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

.vd-card--teal::before { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.vd-card--teal { background: linear-gradient(160deg, rgba(13,148,136,0.05) 0%, rgba(255,255,255,0.7) 40%); }
.vd-card--teal:hover { box-shadow: 0 8px 24px rgba(13,148,136,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

.vd-card--slate::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.vd-card--slate { background: linear-gradient(160deg, rgba(148,163,184,0.05) 0%, rgba(255,255,255,0.7) 40%); }
.vd-card--slate:hover { box-shadow: 0 8px 24px rgba(148,163,184,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

/* -- Card Header / Body -- */
.vd-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(226,232,240,0.5);
}
.vd-card-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.vd-card--blue .vd-card-ico   { background: linear-gradient(135deg, rgba(0,174,239,0.18), rgba(0,212,255,0.1)); color: #00AEEF; }
.vd-card--green .vd-card-ico  { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(52,231,128,0.1)); color: #22c55e; }
.vd-card--amber .vd-card-ico  { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(251,191,36,0.1)); color: #f59e0b; }
.vd-card--purple .vd-card-ico { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(167,139,250,0.1)); color: #8b5cf6; }
.vd-card--teal .vd-card-ico   { background: linear-gradient(135deg, rgba(13,148,136,0.18), rgba(20,184,166,0.1)); color: #0d9488; }
.vd-card--slate .vd-card-ico  { background: linear-gradient(135deg, rgba(148,163,184,0.18), rgba(203,213,225,0.1)); color: #94a3b8; }
.vd-card:hover .vd-card-ico   { transform: scale(1.15) rotate(-3deg); }

.vd-card-title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
}
.vd-card-subtitle {
  margin: 0; font-size: 11px; color: var(--muted); font-weight: 400;
}
.vd-card-body {
  padding: 14px 18px 16px;
}

/* -- Finance Grid -- */
.vd-finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.vd-finance-grid--compact {
  grid-template-columns: repeat(3, 1fr);
}
.vd-finance-cell {
  padding: 8px 0;
  border-bottom: 1px solid rgba(226,232,240,0.3);
}
.vd-finance-grid--compact .vd-finance-cell {
  padding: 6px 8px 6px 0;
}
.vd-finance-cell:nth-child(odd) { padding-right: 12px; }
.vd-finance-cell:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(226,232,240,0.4); }
.vd-finance-grid--compact .vd-finance-cell {
  padding: 6px 8px;
  border-left: none;
  border-bottom: 1px solid rgba(226,232,240,0.25);
}
.vd-finance-grid--compact .vd-finance-cell:nth-last-child(-n+3) { border-bottom: none; }
.vd-finance-cell--full {
  grid-column: 1 / -1;
  padding-left: 0;
  border-left: none;
}
.vd-finance-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; margin: 0;
}
.vd-finance-value {
  font-size: 14px; font-weight: 600; color: var(--text); margin: 1px 0 0;
}
.vd-finance-value--positive { color: #059669; }
.vd-finance-value--negative { color: #dc2626; }

/* Finance footer */
.vd-finance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(226,232,240,0.4);
}
.vd-finance-lucro {
  display: flex; align-items: center; gap: 8px;
}
.vd-finance-lucro .vd-finance-value {
  font-size: 16px; margin: 0;
}
.vd-finance-agents {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.vd-finance-agent-tag {
  font-size: 11px; color: var(--muted);
  padding: 2px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.03);
}

/* -- Lead Info Items -- */
.vd-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(226,232,240,0.3);
}
.vd-info-row:last-child { border-bottom: none; }
.vd-info-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,0.03);
  color: var(--muted);
}
.vd-info-content { flex: 1; min-width: 0; }
.vd-info-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600; margin: 0;
}
.vd-info-value {
  font-size: 14px; font-weight: 500; color: var(--text); margin: 2px 0 0;
  word-break: break-word;
}
.vd-info-actions {
  display: flex; gap: 4px; flex-shrink: 0;
}

/* -- Copy / WhatsApp Buttons -- */
.vd-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer;
  transition: all 0.15s ease;
}
.vd-copy-btn:hover {
  background: rgba(0,174,239,0.08); color: var(--primary);
  border-color: rgba(0,174,239,0.3);
}
.vd-copy-btn--success {
  background: rgba(34,197,94,0.15) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,0.3) !important;
}
.vd-whatsapp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(37,211,102,0.12); color: #25d366;
  border: 1px solid rgba(37,211,102,0.25); cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.vd-whatsapp-btn:hover {
  background: rgba(37,211,102,0.22); transform: scale(1.08);
}

/* -- Product Grid -- */
.vd-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.vd-product-cell {
  padding: 10px 0;
  border-bottom: 1px solid rgba(226,232,240,0.3);
}
.vd-product-cell:nth-child(odd) { padding-right: 10px; }
.vd-product-cell:nth-child(even) { padding-left: 10px; border-left: 1px solid rgba(226,232,240,0.3); }
.vd-product-cell:nth-last-child(-n+2) { border-bottom: none; }
.vd-product-cell--full { grid-column: 1 / -1; padding-left: 0; border-left: none; }
.vd-product-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600; margin: 0;
}
.vd-product-value {
  font-size: 14px; font-weight: 500; color: var(--text); margin: 2px 0 0;
  word-break: break-word;
}
.vd-product-value .status-badge { font-size: 12px; }

/* -- Timeline -- */
.vd-timeline {
  position: relative;
  padding-left: 28px;
}
.vd-timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--border) 0%, rgba(226,232,240,0.3) 100%);
  border-radius: 1px;
}
.vd-timeline-step {
  position: relative;
  padding: 6px 0 16px;
}
.vd-timeline-step:last-child { padding-bottom: 0; }

.vd-timeline-dot {
  position: absolute;
  left: -28px; top: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}
.vd-timeline-step:hover .vd-timeline-dot { transform: scale(1.25); }

.vd-timeline-dot--done {
  background: rgba(5,150,105,0.15); border: 2px solid #059669;
}
.vd-timeline-dot--done::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #059669;
}
.vd-timeline-dot--active {
  background: rgba(217,119,6,0.15); border: 2px solid #d97706;
  animation: vdPulse 2s ease-in-out infinite;
}
.vd-timeline-dot--active::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d97706;
}
.vd-timeline-dot--alert {
  background: rgba(220,38,38,0.15); border: 2px solid #dc2626;
}
.vd-timeline-dot--alert::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #dc2626;
}
.vd-timeline-dot--future {
  background: rgba(226,232,240,0.5); border: 2px solid var(--border);
}
.vd-timeline-dot--future::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--border);
}

.vd-timeline-label { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; }
.vd-timeline-date  { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.vd-timeline-desc  { font-size: 11px; color: var(--muted); margin: 2px 0 0; opacity: 0.8; }
.vd-timeline-badge-alert {
  display: inline-block;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(220,38,38,0.1); color: #dc2626;
  margin-left: 6px;
}
.vd-timeline-refresh {
  font-size: 11px; color: var(--primary); margin-left: auto;
  text-decoration: none; font-weight: 500;
  transition: color 0.15s ease;
}
.vd-timeline-refresh:hover { color: #00D4FF; text-decoration: underline; }

/* -- Collection Card Sections -- */
.vd-collection-section { padding: 12px 0; }
.vd-collection-section:first-child { padding-top: 0; }
.vd-collection-section + .vd-collection-section {
  border-top: 1px solid rgba(226,232,240,0.5);
}
.vd-collection-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px;
}
.vd-collection-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
}
.vd-collection-status--done {
  background: rgba(5,150,105,0.08); color: #059669;
}
.vd-collection-status--pending {
  background: rgba(245,158,11,0.08); color: #d97706;
}
.vd-schedule-info {
  font-size: 13px; color: var(--text); margin: 0 0 8px;
}
.vd-schedule-form {
  display: flex; flex-direction: column; gap: 8px;
}
.vd-schedule-form label {
  font-size: 12px; font-weight: 500; color: var(--muted);
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .vd-content { grid-template-columns: 1fr; }
  .vd-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }
  .vd-hero-right {
    width: 100%;
    justify-content: space-between;
  }
  .vd-hero-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .vd-hero-title { font-size: 17px; }
  .vd-hero-value-amount { font-size: 20px; }
  .vd-hero-actions { width: 100%; }
  .vd-hero-actions .fluydon-btn { flex: 1; text-align: center; font-size: 12px; }
  .vd-finance-grid,
  .vd-finance-grid--compact { grid-template-columns: 1fr 1fr; }
  .vd-finance-cell:nth-child(even) { padding-left: 0; border-left: none; }
  .vd-product-grid { grid-template-columns: 1fr; }
  .vd-product-cell:nth-child(even) { padding-left: 0; border-left: none; }
  .vd-card-body { padding: 12px 14px; }
  .vd-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-hero,
  .vd-card { animation: none !important; }
  .vd-card:hover { transform: none; }
  .vd-card:hover .vd-card-ico { transform: none; }
  .vd-hero:hover .vd-hero-icon { transform: none; }
  .vd-timeline-dot--active { animation: none !important; }
}

/* DEPRECATED — old detail grid styles kept for reference */

.fluydon-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.fluydon-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.fluydon-detail-json {
  margin-top: 24px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: border-color var(--transition-fast);
}

.fluydon-detail-json summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.fluydon-detail-json summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fluydon-detail-json summary .btn-copy-payload {
  flex-shrink: 0;
  cursor: pointer;
}

.fluydon-detail-json summary .btn-copy-payload:disabled {
  cursor: default;
  opacity: 0.8;
}

.fluydon-detail-json .payload-pre {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  line-height: 1.5;
}

.fluydon-detail-json pre {
  margin: 0;
  padding: 16px;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

/* ========== Dashboard – compacto, moderno e fluido ========== */
.dashboard {
  --dash-radius: 12px;
  --dash-gap: 14px;
  --dash-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Dashboard Visual Upgrade – keyframes globais ── */
@keyframes dashKpiEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dashPanelEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dashBarShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
@keyframes dashFadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-kpi,
  .vnd-kpi-card,
  .dashboard-panel--vendedores.dashboard-panel--modern,
  .dashboard-panel--cobradores.dashboard-panel--modern,
  .dashboard-sales-card,
  .dashboard-cobrador-cta-link,
  .vnd-fila-section,
  .vnd-fila-card {
    animation: none !important;
  }
  .dashboard-panel--vendedores .dashboard-performance-bar-fill::after,
  .dashboard-panel--cobradores .dashboard-performance-bar-fill--cobrador::after,
  .vnd-meta-fill::after {
    animation: none !important;
  }
  .performance-trophy {
    animation: none !important;
  }
  .vnd-meta-badge-ok {
    animation: vnd-pop-in .3s var(--mfx-spring, cubic-bezier(0.34,1.4,.64,1)) both !important;
  }
}

/* Header: título + filtros inline + ação */
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.dashboard-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.12), rgba(0, 194, 244, 0.08));
  border: 1px solid rgba(0, 174, 239, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.2s var(--dash-ease), box-shadow 0.2s var(--dash-ease);
}

.dashboard-header-icon:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.15);
}

.dashboard-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.dashboard-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ========== Dashboard header – compacto e moderno ========== */
.dashboard-header-card {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 174, 239, 0.06);
  padding: 10px 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 174, 239, 0.08);
  transition: box-shadow var(--duration-normal, 260ms) var(--ease-smooth), background var(--duration-normal, 260ms) ease;
}

.dashboard-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  justify-content: space-between;
  min-width: 0;
}

.dashboard-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
}

.dashboard-header-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(0, 174, 239, 0.16) 0%, rgba(0, 194, 244, 0.08) 100%);
  border: 1px solid rgba(0, 174, 239, 0.2);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 174, 239, 0.12);
  transition: transform var(--duration-fast, 180ms) var(--ease-spring), box-shadow var(--duration-fast, 180ms) ease;
}
.dashboard-header-icon:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 6px rgba(0, 174, 239, 0.2);
}

.dashboard-header-text {
  min-width: 0;
}

.dashboard-header-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.25;
}

.dashboard-header-date {
  font-size: 11px;
  color: var(--muted);
  display: inline-block;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 174, 239, 0.06);
  color: var(--primary);
  font-weight: 500;
  line-height: 1.3;
}

/* Toggle Operação / Geral – pill cinza, ativo = azul gradiente */
.dashboard-escopo-toggle {
  display: inline-flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dashboard-escopo-opt {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.dashboard-escopo-opt:first-child {
  border-right: none;
  border-radius: 10px 0 0 10px;
}

.dashboard-escopo-opt:last-child {
  border-radius: 0 10px 10px 0;
}

.dashboard-escopo-opt:hover {
  background: #e2e8f0;
}

.dashboard-escopo-opt.is-active {
  color: #fff;
  background: linear-gradient(180deg, #00AEEF 0%, #0099d6 100%);
  border-color: #0099d6;
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.4);
}

.dashboard-escopo-toggle .dashboard-escopo-opt.is-active {
  border-right-color: rgba(255, 255, 255, 0.2);
}

/* Abas de período – separadores verticais, inativo = pill cinza, ativo = azul gradiente */
.dashboard-header-card .dashboard-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dashboard-header-card .dashboard-tabs::-webkit-scrollbar {
  display: none;
}

.dashboard-header-card .dashboard-tab {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  margin-left: -1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform var(--duration-fast, 180ms) var(--ease-spring);
  white-space: nowrap;
  flex-shrink: 0;
}

.dashboard-header-card .dashboard-tab:first-child {
  margin-left: 0;
  border-radius: 10px 0 0 10px;
}

.dashboard-header-card .dashboard-tab:last-child {
  border-radius: 0 10px 10px 0;
}

.dashboard-header-card .dashboard-tab:hover {
  background: #e2e8f0;
  transform: scale(1.02);
}

.dashboard-header-card .dashboard-tab--active {
  color: #fff;
  background: linear-gradient(180deg, #00AEEF 0%, #0099d6 100%);
  border-color: #0099d6;
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.4);
  z-index: 1;
}

/* Seleção de datas – campos brancos, ícone calendário azul, Ok cinza */
.dashboard-header-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}

.dashboard-date-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.dashboard-date-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.12);
}

.dashboard-date-field-icon {
  color: var(--primary);
  display: inline-flex;
  flex-shrink: 0;
}

.dashboard-date-input {
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 12px;
  background: transparent;
  color: var(--text);
  min-width: 88px;
}

.dashboard-date-input:focus {
  outline: none;
}

.dashboard-header-dates .dashboard-date-sep {
  font-size: 12px;
  color: #94a3b8;
  padding: 0 2px;
  font-weight: 500;
}

.dashboard-date-ok {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  color: #475569;
  transition: background 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}

.dashboard-date-ok:hover {
  background: #cbd5e1;
  border-color: #94a3b8;
  color: #334155;
}

/* Botão Ver vendas */
.dashboard-header-card .dashboard-btn-ver-vendas {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, #0099d6 100%);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), filter 0.2s var(--ease-smooth);
}

.dashboard-header-card .dashboard-btn-ver-vendas:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 174, 239, 0.4), 0 0 0 2px rgba(0, 174, 239, 0.1);
  filter: brightness(1.06);
}

.dashboard-header-card .dashboard-btn-ver-vendas svg {
  flex-shrink: 0;
  opacity: 0.95;
}

/* Central de Métricas — toolbar: mesma altura (abas, datas, Ok, CTAs) e alinhamento vertical.
   Deve vir depois das regras genéricas .dashboard-header-card .dashboard-btn-ver-vendas. */
.metrics-header.dashboard-header-card .metrics-header-inner {
  align-items: center;
}
.metrics-header.dashboard-header-card .metrics-header-brand {
  align-self: center;
}
.metrics-header.dashboard-header-card .metrics-header-period {
  align-items: center;
}
.metrics-header.dashboard-header-card .metrics-header-tabs .dashboard-tab {
  min-height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.metrics-header.dashboard-header-card .metrics-header-tabs .dashboard-tab:hover {
  transform: none;
  background: #e2e8f0;
}
.metrics-header.dashboard-header-card .metrics-header-dates.dashboard-header-dates {
  align-items: center;
  gap: 8px;
}
.metrics-header.dashboard-header-card .metrics-header-dates .dashboard-date-field {
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}
.metrics-header.dashboard-header-card .metrics-header-dates .dashboard-date-input {
  line-height: 1.25;
}
.metrics-header.dashboard-header-card .metrics-header-dates .dashboard-date-sep {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 4px;
  line-height: 1;
}
.metrics-header.dashboard-header-card .metrics-header-dates .dashboard-date-ok {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.metrics-header.dashboard-header-card .metrics-header-actions {
  min-height: 36px;
  align-items: center;
}
.metrics-header.dashboard-header-card .metrics-header-actions .dashboard-btn-ver-vendas,
.metrics-header.dashboard-header-card .metrics-header-actions .metrics-btn-sync {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, #0099d6 100%);
  box-shadow: 0 2px 6px rgba(0, 174, 239, 0.3);
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), filter 0.2s var(--ease-smooth);
}
.metrics-header.dashboard-header-card .metrics-header-actions .dashboard-btn-ver-vendas:hover,
.metrics-header.dashboard-header-card .metrics-header-actions .metrics-btn-sync:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.35);
  filter: brightness(1.06);
}
.metrics-header.dashboard-header-card .metrics-header-actions .metrics-btn-integrations {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}
.metrics-header.dashboard-header-card .metrics-header-actions .metrics-btn-integrations:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: var(--text);
}

.dashboard-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dashboard-filter-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dashboard-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.2s var(--dash-ease), background 0.2s var(--dash-ease), border-color 0.2s var(--dash-ease);
}

.dashboard-pill:hover {
  color: var(--primary);
  background: rgba(0, 174, 239, 0.06);
  border-color: rgba(0, 174, 239, 0.2);
}

.dashboard-pill.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.dashboard-filter-custom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.dashboard-date {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s var(--dash-ease), box-shadow 0.2s var(--dash-ease);
}

.dashboard-date:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}

.dashboard-date-sep {
  font-size: 11px;
  color: var(--muted);
  padding: 0 2px;
}

.dashboard-pill--submit {
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}

.dashboard-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  text-decoration: none;
  transition: transform 0.2s var(--dash-ease), box-shadow 0.2s var(--dash-ease), opacity 0.2s var(--dash-ease);
}

.dashboard-btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.35);
}

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

.dashboard-pill:focus-visible,
.dashboard-btn-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Destaques: pills em linha */
.dashboard-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(0, 174, 239, 0.04) 100%);
  border-radius: var(--dash-radius);
  border: 1px solid rgba(5, 150, 105, 0.15);
}

.dashboard-highlight-pill {
  font-size: 12px;
  color: var(--text);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 1px solid rgba(5, 150, 105, 0.12);
  transition: background 0.2s var(--dash-ease);
}

.dashboard-highlight-pill:hover {
  background: #fff;
}

/* KPIs: cards compactos */
.dashboard-kpis-wrap {
  margin-bottom: 18px;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--dash-gap);
  margin: 0 !important;
}

.dashboard-kpi {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  box-shadow: var(--shadow-card-rest);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    box-shadow var(--duration-normal) var(--dash-ease),
    transform var(--duration-normal) var(--ease-spring),
    border-color var(--duration-fast) var(--dash-ease);
  animation: dashKpiEnter var(--duration-normal) var(--ease-spring) both;
}

.dashboard-kpi:nth-child(1) { animation-delay: 0ms; }
.dashboard-kpi:nth-child(2) { animation-delay: 50ms; }
.dashboard-kpi:nth-child(3) { animation-delay: 100ms; }
.dashboard-kpi:nth-child(4) { animation-delay: 150ms; }
.dashboard-kpi:nth-child(5) { animation-delay: 200ms; }
.dashboard-kpi:nth-child(6) { animation-delay: 250ms; }
.dashboard-kpi:nth-child(7) { animation-delay: 300ms; }
.dashboard-kpi:nth-child(8) { animation-delay: 350ms; }

.dashboard-kpi:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: rgba(0, 174, 239, 0.12);
}

.dashboard-kpi.border-blue:hover  { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(0, 174, 239, 0.08), var(--shadow-card-glow-blue); }
.dashboard-kpi.border-green:hover { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(52, 231, 128, 0.08), var(--shadow-card-glow-green); }
.dashboard-kpi.border-amber:hover { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(217, 119, 6, 0.08), 0 4px 16px rgba(217, 119, 6, 0.1); }
.dashboard-kpi.border-purple:hover { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(124, 58, 237, 0.08), 0 4px 16px rgba(124, 58, 237, 0.1); }
.dashboard-kpi.border-teal:hover  { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(13, 148, 136, 0.08), 0 4px 16px rgba(13, 148, 136, 0.1); }

.dashboard-kpi.border-blue { border-left-color: var(--primary); }
.dashboard-kpi.border-green { border-left-color: var(--fluydon-green); }
.dashboard-kpi.border-amber { border-left-color: var(--fluydon-amber); }
.dashboard-kpi.border-slate { border-left-color: var(--fluydon-slate); }
.dashboard-kpi.border-purple { border-left-color: #7c3aed; }
.dashboard-kpi.border-teal { border-left-color: #0d9488; }

.dashboard-kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-variant-numeric: tabular-nums;
}

.dashboard-kpi-sub {
  font-size: 11px;
  color: var(--muted);
}

/* KPI — bloco de projeção (frustração) */
.dashboard-kpi-proj {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 5px 8px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  border-left: 3px solid rgba(15, 23, 42, 0.12);
}
.dashboard-kpi-proj-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
}
.dashboard-kpi-proj-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-family: "JetBrains Mono", "Inter", monospace;
  font-variant-numeric: tabular-nums;
}
.dashboard-kpi-proj-tag {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Config nav — ícone Operação */
.config-nav-icon--operacao::before { content: '⚙'; }
.config-card-icon--operacao::before { content: '⚙'; font-size: 22px; }

/* Dashboard cobrador – CTA principal */
.dashboard-cobrador-cta {
  margin-top: 24px;
}
.dashboard-cobrador-cta-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-card-rest);
  transition:
    box-shadow var(--duration-normal, 260ms) var(--dash-ease),
    border-color var(--duration-normal, 260ms) var(--dash-ease),
    transform var(--duration-normal, 260ms) var(--ease-spring),
    background var(--duration-fast, 180ms) ease;
  animation: dashFadeSlideUp var(--duration-slow, 360ms) var(--ease-spring) both;
}
.dashboard-cobrador-cta-link:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(0, 174, 239, 0.1), var(--shadow-card-glow-blue);
  color: var(--primary);
  transform: translateY(-3px);
}
.dashboard-cobrador-cta-icon {
  color: var(--primary);
  opacity: 0.9;
  transition: transform var(--duration-normal, 260ms) var(--ease-spring);
}
.dashboard-cobrador-cta-link:hover .dashboard-cobrador-cta-icon {
  transform: translateY(-2px) scale(1.08);
}
.dashboard-cobrador-cta-text {
  font-size: 16px;
  font-weight: 600;
}
.dashboard-cobrador-cta-desc {
  font-size: 13px;
  color: var(--muted);
}

.dashboard-pct {
  font-weight: 600;
}

.dashboard-pct--up { color: var(--fluydon-green); }
.dashboard-pct--down { color: var(--status-cancelled); }
.dashboard-pct--same { color: var(--muted); }

/* Painéis lado a lado */
.dashboard-panels-wrap {
  margin-bottom: 18px;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dash-gap);
}

@media (max-width: 900px) {
  .dashboard-panels {
    grid-template-columns: 1fr;
  }
}

.dashboard-panel {
  background: var(--surface);
  border-radius: var(--dash-radius);
  padding: 14px 16px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s var(--dash-ease), border-color 0.2s var(--dash-ease);
}

.dashboard-panel:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 174, 239, 0.1);
}

.dashboard-panel-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dashboard-panel-desc {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.dashboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  transition: background 0.15s var(--dash-ease);
}

.dashboard-list-item:hover {
  background: #f8fafc;
}

.dashboard-list-item + .dashboard-list-item {
  margin-top: 2px;
}

.dashboard-list-label {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 75%;
}

.dashboard-list-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  margin-left: 8px;
}

.dashboard-list-item--empty {
  color: var(--muted);
  font-style: italic;
  background: transparent;
}

/* Painéis Desempenho – Vendedores e Cobradores */
.dashboard-panel-performance {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ========== Card Desempenho – Vendedores (spec: Notion/Stripe/Linear) ========== */
/* Paleta do card */
.dashboard-panel--vendedores.dashboard-panel--modern {
  --vendedores-blue: #1172C2;
  --vendedores-blue-light: #7DD3FC;
  --vendedores-blue-bg: #EFF6FF;
  --vendedores-gray-dark: #1F2937;
  --vendedores-gray-medium: #64748B;
  --vendedores-gray-light: #E5E7EB;
  --vendedores-gold: #FACC15;
}

.dashboard-panel--vendedores.dashboard-panel--modern {
  position: relative;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(17, 114, 194, 0.12);
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(239, 246, 255, 0.6), #ffffff 50%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  min-width: 0;
  animation: dashPanelEnter var(--duration-slow, 360ms) var(--ease-spring) both;
}

/* Faixa azul no topo do card (efeito de luz/realce) */
.dashboard-panel--vendedores.dashboard-panel--modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(17, 114, 194, 0.08) 0%, rgba(125, 211, 252, 0.06) 35%, transparent 100%);
  pointer-events: none;
}

.dashboard-panel--vendedores.dashboard-panel--modern:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
}

.dashboard-panel--vendedores .dashboard-panel-head--with-icon {
  margin-bottom: 12px;
  gap: 8px;
}

.dashboard-panel--vendedores .dashboard-panel-head--with-icon .dashboard-panel-title {
  font-size: 17px;
  font-weight: 600;
  color: #1F2937;
}

.dashboard-panel--vendedores .dashboard-panel-icon--vendedores {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(17, 114, 194, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1172C2;
}

.dashboard-panel--vendedores .dashboard-panel-icon--vendedores::before {
  width: 16px;
  height: 16px;
  mask-size: 16px;
  -webkit-mask-size: 16px;
}

.dashboard-panel--vendedores .dashboard-performance-chart--compact {
  padding: 0;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.dashboard-panel--vendedores .dashboard-performance-chart--compact .dashboard-performance-row--vendedor {
  border-bottom: none;
  margin-bottom: 0;
}

.dashboard-panel--vendedores .dashboard-performance-chart--compact .dashboard-performance-row--vendedor:last-child {
  margin-bottom: 0;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--who {
  gap: 10px;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--result,
.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--result-inline {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  justify-content: flex-end;
  box-sizing: border-box;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--result-inline .performance-result-line {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  box-sizing: border-box;
}

.dashboard-panel--vendedores .performance-result-line .dashboard-performance-pct,
.dashboard-panel--vendedores .performance-result-line .performance-sep,
.dashboard-panel--vendedores .performance-result-line .performance-fraction,
.dashboard-panel--vendedores .performance-result-line .performance-value {
  font-size: 11px;
}

.performance-cpa {
  font-size: 11px;
  font-weight: 600;
  color: #0369a1;
  background: rgba(3, 105, 161, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: help;
}

/* Card Desempenho – Cobradores (mesmo design que vendedores, identidade verde) */
.dashboard-panel--cobradores.dashboard-panel--modern {
  position: relative;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(5, 150, 105, 0.12);
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(236, 253, 245, 0.6), #ffffff 50%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  min-width: 0;
  animation: dashPanelEnter var(--duration-slow, 360ms) var(--ease-spring) 60ms both;
}

/* Faixa verde no topo do card (mesmo efeito que vendedores) */
.dashboard-panel--cobradores.dashboard-panel--modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.08) 0%, rgba(16, 185, 129, 0.06) 35%, transparent 100%);
  pointer-events: none;
}

.dashboard-panel--cobradores.dashboard-panel--modern:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
  border-color: rgba(5, 150, 105, 0.2);
}

.dashboard-panel--cobradores .dashboard-panel-head--with-icon {
  margin-bottom: 12px;
  gap: 8px;
}

.dashboard-panel--cobradores .dashboard-panel-head--with-icon .dashboard-panel-title {
  font-size: 17px;
  font-weight: 600;
  color: #1F2937;
}

.dashboard-panel--cobradores .dashboard-performance-chart--compact {
  padding: 0;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.dashboard-panel--cobradores .dashboard-performance-chart--compact .dashboard-performance-row--cobrador {
  border-bottom: none;
  margin-bottom: 0;
}

.dashboard-panel--cobradores .dashboard-performance-chart--compact .dashboard-performance-row--cobrador:last-child {
  margin-bottom: 0;
}

.dashboard-panel-icon--cobradores {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(5, 150, 105, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #047857;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-panel-icon--cobradores::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3Cpath d='M12 15h4'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3Cpath d='M12 15h4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px;
}

/* Avatar wrap: base unificado para os dois cards */
.dashboard-panel--vendedores .dashboard-performance-avatar-wrap,
.dashboard-panel--cobradores .dashboard-performance-avatar-wrap {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform var(--duration-fast, 180ms) var(--ease-spring);
}

.dashboard-panel--vendedores .dashboard-performance-avatar-wrap .dashboard-performance-avatar,
.dashboard-panel--cobradores .dashboard-performance-avatar-wrap .dashboard-performance-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Avatar vendedores: compacto, #F1F5F9, borda #E2E8F0 */
.dashboard-panel--vendedores .dashboard-performance-avatar-wrap {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 2px;
  background: #F1F5F9;
  border-color: #E2E8F0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor:hover .dashboard-performance-avatar-wrap {
  border-color: #cbd5e1;
  background: #e2e8f0;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(17, 114, 194, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-panel--cobradores .dashboard-performance-avatar-wrap {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.04) 100%);
  border-color: rgba(5, 150, 105, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador:hover .dashboard-performance-avatar-wrap {
  border-color: rgba(5, 150, 105, 0.4);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(5, 150, 105, 0.03) 100%);
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-panel--cobradores .dashboard-performance-bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: #E5E7EB;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.dashboard-panel--cobradores .dashboard-performance-bar {
  background: transparent;
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-panel--cobradores .dashboard-performance-bar-fill--cobrador {
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #047857 0%, #10b981 100%);
  box-shadow: none;
}

.dashboard-panel--cobradores .dashboard-performance-bar-fill--cobrador.dashboard-performance-bar-fill--ok {
  background: linear-gradient(90deg, #065f46 0%, #059669 100%);
  box-shadow: none;
}
.dashboard-panel--cobradores .dashboard-performance-bar-fill--cobrador::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  animation: dashBarShimmer 1.8s ease-in-out 0.4s 1 forwards;
}

.dashboard-panel-head--with-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.dashboard-panel-head--with-icon .dashboard-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--brand-dark);
}

.dashboard-panel-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast, 180ms) var(--ease-spring);
}
.dashboard-panel-head--with-icon:hover .dashboard-panel-icon {
  transform: scale(1.05);
}

.dashboard-panel-icon--vendedores {
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.14) 0%, rgba(0, 174, 239, 0.06) 100%);
  color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-panel-icon--vendedores::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 12px;
}

/* Linha unificada: 3 blocos (quem | progresso | resultado) */
.dashboard-panel--vendedores .dashboard-performance-row--vendedor,
.dashboard-panel--cobradores .dashboard-performance-row--cobrador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 8px;
  margin: 0 -4px;
  border-radius: 10px;
  transition: background 0.2s var(--dash-ease), box-shadow 0.2s var(--dash-ease);
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-template-areas: "who progress-result";
  gap: 4px 8px;
  min-height: 36px;
  padding: 4px 4px;
  overflow: hidden;
  min-width: 0;
  border-radius: 12px;
  margin: 0 2px;
  transition: background 0.4s ease, box-shadow 0.35s ease;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--who {
  grid-area: who;
  max-width: 120px;
  min-width: 0;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result {
  grid-area: progress-result;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
  justify-self: end;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--progress {
  min-width: 307px;
  flex-shrink: 0;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--result-inline {
  min-width: 0;
  flex-shrink: 1;
}

/* Cobradores: mesmo layout que vendedores (who | progress-result) */
.dashboard-panel--cobradores .dashboard-performance-row--cobrador {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-template-areas: "who progress-result";
  gap: 4px 8px;
  min-height: 36px;
  padding: 4px 4px;
  overflow: hidden;
  min-width: 0;
  border-radius: 12px;
  margin: 0 2px;
  transition: background 0.4s ease, box-shadow 0.35s ease;
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell--who {
  grid-area: who;
  max-width: 120px;
  min-width: 0;
  gap: 10px;
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result {
  grid-area: progress-result;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
  justify-self: end;
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--progress {
  min-width: 307px;
  flex-shrink: 0;
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--result {
  min-width: 0;
  flex-shrink: 1;
}

/* Cobradores: número + barra em linha (como vendedores) */
.dashboard-panel--cobradores .performance-cell--progress {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.dashboard-panel--cobradores .performance-cell--progress .dashboard-performance-num--cobrador {
  flex-shrink: 0;
}

.dashboard-panel--cobradores .performance-cell--progress .dashboard-performance-bar-wrap {
  flex: 1 1 0;
  min-width: 80px;
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador .dashboard-performance-name {
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.dashboard-panel--cobradores .performance-cell--result {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.dashboard-panel--cobradores .performance-cell--result .performance-result-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  white-space: nowrap;
  min-width: 0;
}

/* Card vendedores e cobradores: responsivo (mesmo estilo, adapta em telas menores) */
@media (max-width: 900px) {
  .dashboard-panel--vendedores.dashboard-panel--modern,
  .dashboard-panel--cobradores.dashboard-panel--modern {
    padding: 14px 16px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--progress,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--progress {
    min-width: 220px;
  }
}

@media (max-width: 640px) {
  .dashboard-panel--vendedores.dashboard-panel--modern {
    padding: 12px 14px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor {
    gap: 4px 6px;
    padding: 6px 4px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--who {
    max-width: 100px;
    gap: 8px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--progress {
    min-width: 140px;
    flex-shrink: 1;
    max-width: 100%;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--result-inline {
    flex: 1 1 auto;
    min-width: 120px;
  }
  .dashboard-panel--vendedores .performance-cell--progress .dashboard-performance-bar-wrap {
    min-width: 56px;
  }
  .dashboard-panel--vendedores .dashboard-performance-avatar-wrap {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .dashboard-performance-name {
    font-size: 12px;
  }
  .dashboard-panel--vendedores .performance-cell--progress .dashboard-performance-num {
    font-size: 13px;
  }
  .dashboard-panel--vendedores .dashboard-performance-bar-wrap {
    height: 8px;
  }
}

@media (max-width: 480px) {
  .dashboard-panel--vendedores.dashboard-panel--modern,
  .dashboard-panel--cobradores.dashboard-panel--modern {
    padding: 10px 12px;
    border-radius: 14px;
  }
  .dashboard-panel--vendedores .dashboard-panel-head--with-icon .dashboard-panel-title,
  .dashboard-panel--cobradores .dashboard-panel-head--with-icon .dashboard-panel-title {
    font-size: 15px;
  }
  .dashboard-panel--vendedores .dashboard-panel-icon--vendedores {
    width: 28px;
    height: 28px;
  }
  .dashboard-panel--vendedores .dashboard-panel-icon--vendedores::before {
    width: 14px;
    height: 14px;
    mask-size: 14px;
    -webkit-mask-size: 14px;
  }
  .dashboard-panel--cobradores .dashboard-panel-icon--cobradores {
    width: 28px;
    height: 28px;
  }
  .dashboard-panel--cobradores .dashboard-panel-icon--cobradores::before {
    mask-size: 14px;
    -webkit-mask-size: 14px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--who,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell--who {
    max-width: 88px;
    gap: 6px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    gap: 6px 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--progress,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--progress {
    min-width: 0;
    flex: 1 1 160px;
    max-width: 100%;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--result-inline,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--result {
    flex: 1 1 100px;
    min-width: 0;
  }
  .dashboard-panel--vendedores .performance-cell--progress .dashboard-performance-bar-wrap,
  .dashboard-panel--cobradores .performance-cell--progress .dashboard-performance-bar-wrap {
    min-width: 48px;
  }
  .dashboard-panel--vendedores .dashboard-performance-avatar-wrap,
  .dashboard-panel--cobradores .dashboard-performance-avatar-wrap {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
  }
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .dashboard-performance-name,
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .dashboard-performance-name {
    font-size: 11px;
  }
  .dashboard-panel--vendedores .performance-result-line .dashboard-performance-pct,
  .dashboard-panel--vendedores .performance-result-line .performance-sep,
  .dashboard-panel--vendedores .performance-result-line .performance-fraction,
  .dashboard-panel--vendedores .performance-result-line .performance-value {
    font-size: 10px;
  }
}

/* 1º colocado: glow dourado suave, gradiente difuso que desvanece nas bordas (sem contorno duro); overflow visible para o troféu não ser cortado */
.dashboard-panel--vendedores .dashboard-performance-row--vendedor.dashboard-performance-row--top {
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.16) 0%, rgba(250, 204, 21, 0.08) 40%, transparent 70%);
  box-shadow: 0 1px 4px rgba(250, 204, 21, 0.08);
  overflow: visible;
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor.dashboard-performance-row--top .dashboard-performance-avatar-wrap {
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.25), 0 0 0 1px rgba(250, 204, 21, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor:hover {
  background: rgba(17, 114, 194, 0.04);
  box-shadow: 0 1px 6px rgba(17, 114, 194, 0.08);
  border-radius: var(--radius-sm);
}

.dashboard-panel--vendedores .dashboard-performance-row--vendedor.dashboard-performance-row--top:hover {
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.24) 0%, rgba(250, 204, 21, 0.12) 35%, rgba(250, 204, 21, 0.05) 65%, transparent 90%);
  box-shadow: 0 2px 8px rgba(250, 204, 21, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard-panel--cobradores .dashboard-performance-row--cobrador:hover {
  background: rgba(5, 150, 105, 0.04);
  box-shadow: 0 1px 6px rgba(5, 150, 105, 0.08);
  border-radius: var(--radius-sm);
}

/* Ícone troféu (1º colocado) */
.dashboard-panel--vendedores .dashboard-performance-avatar-wrap {
  position: relative;
  overflow: visible;
}

.dashboard-panel--vendedores .dashboard-performance-avatar-wrap .dashboard-performance-avatar {
  border-radius: 50%;
}

/* Troféu: ícone dourado (PNG), abaixo e à direita do avatar — sombra segue o contorno do PNG (drop-shadow) */
.performance-trophy {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 26px;
  height: 25px;
  background-color: transparent;
  background-image: url(images/trophy.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgba(250, 204, 25, 0.55));
  z-index: 10;
  animation: dashTrophyPulse 3s ease-in-out infinite;
}
@keyframes dashTrophyPulse {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(250, 204, 25, 0.55)); transform: scale(1); }
  50% { filter: drop-shadow(0 2px 6px rgba(250, 204, 25, 0.75)); transform: scale(1.06); }
}

.performance-cell {
  min-width: 0;
}

.performance-cell--who {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.performance-cell--progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Vendedores: número à esquerda, barra à direita (em linha) */
.dashboard-panel--vendedores .performance-cell--progress {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.dashboard-panel--vendedores .performance-cell--progress .dashboard-performance-num {
  flex-shrink: 0;
}

.dashboard-panel--vendedores .performance-cell--progress .dashboard-performance-bar-wrap {
  flex: 1 1 0;
  min-width: 80px;
}

.performance-cell--progress .dashboard-performance-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.dashboard-panel--vendedores .performance-cell--progress .dashboard-performance-num {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #1172C2;
}

.performance-cell--result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

/* Resultado em uma linha: 58,3% · 7/12 · R$ 4.126 (card vendedores) */
.performance-cell--result-inline {
  flex-direction: row;
  justify-content: flex-end;
  overflow: hidden;
  min-width: 0;
}

.performance-cell--result-inline .performance-result-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-result-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
}

/* Porcentagem: mesmo azul claro da barra, peso 500–600 */
.performance-result-line .dashboard-performance-pct {
  font-size: 12px;
  font-weight: 600;
  color: #1172C2;
  flex-shrink: 0;
}

.dashboard-panel--vendedores .performance-result-line .dashboard-performance-pct {
  color: #1172C2;
  font-weight: 600;
}

.performance-result-line .performance-sep {
  flex-shrink: 0;
}

.performance-sep {
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
  margin: 0 4px;
}

/* Meta: cinza médio #64748B, regular; não encolhe para o valor R$ truncar primeiro */
.performance-result-line .performance-fraction {
  color: #64748B;
  font-weight: 400;
  font-size: 12px;
  margin-left: 0;
  flex-shrink: 0;
}

/* Valor R$: #475569, medium; encolhe e trunca com ellipsis para caber no card */
.performance-result-line .performance-value {
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-meta {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.performance-meta .dashboard-performance-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
}

.performance-fraction {
  margin-left: 2px;
}

.performance-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dashboard-panel--cobradores .performance-meta .dashboard-performance-pct,
.dashboard-performance-pct--cobrador {
  color: #047857;
}



.dashboard-panel--vendedores .dashboard-performance-row--vendedor .dashboard-performance-name {
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* Barra: altura 8px, radius 999px, track #E5E7EB */
.dashboard-panel--vendedores .dashboard-performance-bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: #E5E7EB;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.dashboard-panel--vendedores .dashboard-performance-bar {
  background: transparent;
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-panel--vendedores .dashboard-performance-bar-fill {
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: linear-gradient(90deg, #1172C2 0%, #7DD3FC 100%);
  box-shadow: none;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.dashboard-panel--vendedores .dashboard-performance-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  animation: dashBarShimmer 1.8s ease-in-out 0.4s 1 forwards;
}

.dashboard-panel--vendedores .dashboard-performance-bar-fill--ok {
  background: linear-gradient(90deg, #059669 0%, #34d399 100%);
  box-shadow: none;
}

.dashboard-performance-check {
  display: inline-flex;
  color: var(--fluydon-green);
  font-weight: 700;
  margin-left: 1px;
}

.dashboard-panel--vendedores .dashboard-performance-chart,
.dashboard-panel--cobradores .dashboard-performance-chart {
  padding: 0;
}

.dashboard-panel-head {
  margin-bottom: 14px;
}

.dashboard-panel-head--compact {
  margin-bottom: 10px;
}

.dashboard-panel-head--compact .dashboard-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dashboard-panel-head .dashboard-panel-desc {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.dashboard-performance-chart {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dashboard-performance-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 36px minmax(60px, 1.4fr) minmax(0, 100px);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  border-bottom: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.dashboard-performance-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.dashboard-performance-row:last-child {
  border-bottom: none;
}

.dashboard-performance-row:hover {
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.04) 0%, rgba(0, 174, 239, 0.01) 100%);
  box-shadow: 0 1px 3px rgba(0, 174, 239, 0.06);
}

.dashboard-performance-row[data-expandable="true"] {
  cursor: pointer;
}

.dashboard-performance-row[data-expandable="true"]:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.5);
  outline-offset: 1px;
}

.dashboard-panel--cobradores .dashboard-performance-row:hover {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.05) 0%, rgba(5, 150, 105, 0.01) 100%);
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
}

.dashboard-performance-expand-icon {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.dashboard-performance-row.is-open .dashboard-performance-expand-icon {
  transform: rotate(180deg);
  color: var(--text);
}

.dashboard-performance-details {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: max-height 0.3s var(--ease-smooth), opacity 0.24s var(--ease-smooth), transform 0.24s var(--ease-smooth), padding 0.24s var(--ease-smooth), margin-top 0.24s var(--ease-smooth), border-color 0.24s var(--ease-smooth), box-shadow 0.24s var(--ease-smooth);
}

.dashboard-performance-row.is-open .dashboard-performance-details {
  margin-top: 8px;
  padding: 10px 11px;
  max-height: 760px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  box-shadow: 0 20px 20px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.dashboard-panel--cobradores .dashboard-performance-row.is-open .dashboard-performance-details {
  box-shadow: 0 10px 20px rgba(4, 120, 87, 0.1), 0 1px 0 rgba(255, 255, 255, 0.62) inset;
}

.dashboard-performance-details-head {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e293b;
}

.dashboard-performance-leads-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-performance-lead-row--head {
  margin-bottom: 5px;
  padding: 6px 10px;
  background: transparent;
  border: none !important;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.dashboard-performance-lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(110px, 1fr) minmax(80px, 0.7fr) minmax(90px, 0.8fr);
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: #334155;
  padding: 7px 10px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-performance-lead-row--link {
  text-decoration: none;
}

.dashboard-performance-lead-row:not(.dashboard-performance-lead-row--head):hover {
  background: rgba(241, 245, 249, 0.96);
  border-color: rgba(56, 189, 248, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.dashboard-performance-lead-row:last-child {
  margin-bottom: 0;
}

.dashboard-performance-lead-col {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-performance-lead-col--nome {
  font-weight: 600;
  color: #0f172a;
}

.dashboard-performance-lead-col--comissao {
  text-align: right;
  font-weight: 700;
  color: #047857;
  font-variant-numeric: tabular-nums;
}

.dashboard-performance-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ecfeff 0%, #dbeafe 100%);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #0369a1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-performance-leads-empty {
  margin: 0;
  font-size: 11px;
  color: #64748b;
}

.dashboard-performance-details-more {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.dashboard-performance-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(2, 132, 199, 0.25);
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.95) 0%, rgba(59, 130, 246, 0.95) 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(14, 165, 233, 0.28);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dashboard-performance-more-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 7px 16px rgba(14, 165, 233, 0.35);
  transform: translateY(-1px);
}

.dashboard-panel--cobradores .dashboard-performance-more-btn {
  border-color: rgba(5, 150, 105, 0.25);
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.96) 0%, rgba(16, 185, 129, 0.96) 100%);
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(5, 150, 105, 0.24);
}

.dashboard-panel--cobradores .dashboard-performance-more-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 7px 16px rgba(5, 150, 105, 0.3);
}

@media (max-width: 640px) {
  .dashboard-panel--cobradores.dashboard-panel--modern {
    padding: 12px 14px;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador {
    gap: 4px 6px;
    padding: 6px 4px;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell--who {
    max-width: 100px;
    gap: 8px;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--progress {
    min-width: 140px;
    flex-shrink: 1;
    max-width: 100%;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--result {
    flex: 1 1 auto;
    min-width: 100px;
  }
  .dashboard-panel--cobradores .performance-cell--progress .dashboard-performance-bar-wrap {
    min-width: 56px;
  }
  .dashboard-panel--cobradores .dashboard-performance-avatar-wrap {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .dashboard-performance-name {
    font-size: 12px;
  }
  .dashboard-panel--vendedores .dashboard-performance-avatar-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 2px;
  }
  .dashboard-panel--vendedores .dashboard-performance-avatar-wrap .dashboard-performance-avatar,
  .dashboard-panel--cobradores .dashboard-performance-avatar-wrap .dashboard-performance-avatar {
    width: 100%;
    height: 100%;
  }
  .dashboard-performance-row {
    grid-template-columns: 28px 1fr 32px 1fr;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 -10px;
  }
  .dashboard-performance-row.is-open .dashboard-performance-details {
    padding: 8px;
  }
  .dashboard-performance-lead-row--head {
    display: none;
  }
  .dashboard-performance-lead-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 1fr);
  }
  .dashboard-performance-lead-col--plataforma,
  .dashboard-performance-lead-col--comissao {
    text-align: left;
  }
  .dashboard-performance-details-more {
    margin-top: 8px;
  }
  .dashboard-performance-more-btn {
    height: 26px;
    padding: 0 10px;
  }
  .dashboard-performance-bar-wrap { grid-column: 1 / -1; grid-row: 2; }
  .dashboard-performance-right { grid-column: 3 / -1; grid-row: 1; }
}

.dashboard-performance-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.dashboard-performance-row:hover .dashboard-performance-name {
  color: #0f172a;
}

.dashboard-performance-num {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--primary);
  transition: opacity 0.2s ease;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .dashboard-performance-num {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .dashboard-performance-num--cobrador {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.dashboard-performance-num--cobrador {
  color: #047857;
}

.dashboard-performance-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
}

.dashboard-performance-right .dashboard-performance-pct {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  color: var(--primary);
  transition: opacity 0.2s ease;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .dashboard-performance-right .dashboard-performance-pct {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .dashboard-panel--cobradores .dashboard-performance-right .dashboard-performance-pct {
    background: linear-gradient(135deg, #10b981, #047857);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.dashboard-panel--cobradores .dashboard-performance-right .dashboard-performance-pct {
  color: #047857;
}

.dashboard-performance-extra {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 500;
  opacity: 0.9;
  min-width: 0;
  flex: 1 1 0;
}

/* Barras */
.dashboard-performance-bar-wrap {
  min-width: 0;
  height: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-performance-bar {
  height: 100%;
  min-width: 6px;
  max-width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 174, 239, 0.12) 0%, rgba(0, 174, 239, 0.06) 100%);
  display: flex;
  align-items: stretch;
}

/* Barra de meta: largura fixa 100%, o fill indica % da meta */
.dashboard-performance-bar--meta {
  width: 100%;
}

.dashboard-performance-bar--cobrador {
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.14) 0%, rgba(5, 150, 105, 0.06) 100%);
}

.dashboard-performance-bar-fill {
  background: linear-gradient(90deg, #0c8bd4 0%, #0ea5e9 50%, #38bdf8 100%);
  border-radius: 6px 0 0 6px;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

.dashboard-performance-bar-fill--ok {
  background: linear-gradient(90deg, #047857 0%, #059669 50%, #10b981 100%);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.dashboard-performance-bar-fill--cobrador {
  background: linear-gradient(90deg, #047857 0%, #059669 50%, #10b981 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.dashboard-performance-bar-fill--cobrador.dashboard-performance-bar-fill--ok {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.dashboard-pct-badge {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.dashboard-pct-badge--ok {
  color: #047857;
}

.dashboard-pct-badge--conv {
  color: #047857;
}

.dashboard-pct-badge--valor {
  font-size: 11px;
  color: #047857;
}

.dashboard-pct-badge--na {
  color: var(--muted);
  font-weight: 500;
}

.dashboard-performance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.dashboard-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot--pagos {
  background: linear-gradient(135deg, #059669, #34e780);
}

.legend-dot--outros {
  background: rgba(0, 174, 239, 0.35);
}

.dashboard-panel-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Tabela */
.dashboard-table-wrap {
  margin-bottom: 0;
}

/* ========== Card de vendas do dashboard – compacto e moderno ========== */
.dashboard-sales-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-card-rest), 0 1px 3px rgba(0, 174, 239, 0.04);
  overflow: visible;
  margin-bottom: 0;
  animation: dashFadeSlideUp var(--duration-slow, 360ms) var(--ease-spring) both;
}

.dashboard-sales-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: background var(--duration-normal, 260ms) var(--ease-smooth), box-shadow var(--duration-normal, 260ms) ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.dashboard-sales-summary:hover {
  background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
}

/* Contador – número em destaque + label */
.dashboard-sales-summary-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-sales-summary-number {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dashboard-sales-summary-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* Bloco à direita – CTA + seta fixos no fim */
.dashboard-sales-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}

.dashboard-sales-summary-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, #0099d6 100%);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.25);
  transition: background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform 0.12s var(--ease-smooth);
}

.dashboard-sales-summary:hover .dashboard-sales-summary-cta {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  box-shadow: 0 4px 14px rgba(0, 174, 239, 0.35);
  transform: translateY(-1px) scale(1.02);
}

.dashboard-sales-summary-arrow {
  color: rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-smooth);
}

.dashboard-sales-summary:hover .dashboard-sales-summary-arrow {
  color: #fff;
  transform: translateX(2px);
}

.dashboard-sales-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 174, 239, 0.45) #f1f5f9;
}
.dashboard-sales-table-wrap::-webkit-scrollbar {
  height: 8px;
}
.dashboard-sales-table-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.dashboard-sales-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 174, 239, 0.45);
  border-radius: 4px;
}
.dashboard-sales-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 174, 239, 0.65);
}

.dashboard-sales-card .table-wrapper {
  border-radius: 0;
  border: none;
}

.dashboard-sales-card .sales-table {
  min-width: 1600px;
}

.dashboard-sales-card .sales-table thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.dashboard-sales-card .sales-table tbody td {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}

.dashboard-sales-card .sales-table tbody tr:nth-child(even) td {
  background: #fafbfd;
}

.dashboard-sales-card .sales-table tbody tr {
  transition: background var(--duration-fast, 180ms) ease;
}
.dashboard-sales-card .sales-table tbody tr:hover td {
  background: rgba(0, 174, 239, 0.04);
}
.dashboard-sales-card .sales-table tbody tr:hover {
  transform: translateX(1px);
}

.dashboard-sales-card .sales-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-sales-card .sales-table .table-profile-cell {
  gap: 10px;
}

.dashboard-sales-card .sales-table .table-profile-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
  transition: box-shadow var(--duration-fast, 180ms) ease;
}
.dashboard-sales-card .sales-table tbody tr:hover .table-profile-avatar {
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}

.dashboard-sales-card .sales-table .table-profile-name {
  font-size: 12px;
  font-weight: 500;
}

.dashboard-sales-card .sales-table .cell-main {
  font-size: 12px;
  font-weight: 500;
}

.dashboard-sales-card .sales-table .cell-sub {
  font-size: 11px;
  color: var(--muted);
}

.dashboard-sales-card .sales-table code {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
}

.dashboard-sales-card .sales-table th.th-with-filter {
  vertical-align: middle;
  white-space: nowrap;
}

.dashboard-sales-card .sales-table th.th-with-filter .th-filter-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-sales-card .sales-table th.th-with-filter .th-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-sales-card .sales-table .status-badge {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  transition: transform var(--duration-fast, 180ms) var(--ease-spring);
}
.dashboard-sales-card .sales-table .status-badge:hover {
  transform: scale(1.04);
}

.dashboard-sales-card .dashboard-empty {
  padding: 20px 16px !important;
  font-size: 12px;
  color: var(--muted);
}

.dashboard-sales-card .dashboard-empty a {
  color: var(--primary);
  font-weight: 600;
}

.dashboard-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-table-header--link {
  padding: 10px 14px;
  margin-bottom: 0;
  background: var(--surface);
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth);
}

.dashboard-table-header--link:hover {
  background: rgba(0, 174, 239, 0.05);
  border-color: rgba(0, 174, 239, 0.2);
}

.dashboard-table-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dashboard-table-header-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.dashboard-table-header-arrow {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}

.dashboard-table-header--link:hover .dashboard-table-header-arrow {
  color: var(--primary);
  transform: translateX(3px);
}

.dashboard-table-card {
  background: var(--surface);
  border-radius: var(--dash-radius);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.25s var(--dash-ease);
}

.dashboard-table-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.dashboard-table-card .table-wrapper {
  border-radius: 0;
  border: none;
}

.dashboard-table-card .sales-table th,
.dashboard-table-card .sales-table td {
  padding: 10px 12px;
  font-size: 12px;
}

.dashboard-table-filters-form {
  /* form envolve table-wrapper; sem estilo de bloco para não quebrar layout */
}

.dashboard-table-card .sales-table th.th-with-filter {
  vertical-align: middle;
  white-space: nowrap;
}

.dashboard-table-card .sales-table th.th-with-filter .th-filter-head {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.dashboard-table-card .sales-table th.th-with-filter .th-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}

.dashboard-th-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-th-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}

.dashboard-th-dropdown-trigger:focus {
  outline: none;
}

.dashboard-th-dropdown-trigger:focus-visible .dashboard-th-dropdown-icon {
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.3);
}

.dashboard-th-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--primary);
  background: rgba(0, 174, 239, 0.1);
  border: 1px solid rgba(0, 174, 239, 0.2);
  transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}

.dashboard-th-dropdown:hover .dashboard-th-dropdown-icon {
  background: rgba(0, 174, 239, 0.15);
  border-color: rgba(0, 174, 239, 0.3);
  color: var(--primary-light);
}

.dashboard-th-dropdown.is-active .dashboard-th-dropdown-icon {
  background: rgba(0, 174, 239, 0.18);
  border-color: var(--primary);
  color: var(--primary);
}

.dashboard-sales-card .dashboard-th-dropdown-icon svg {
  width: 12px;
  height: 12px;
}

/* Painel do dropdown – conforme referência: cantos arredondados, fundo branco, sombra suave */
.dashboard-th-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  min-width: 130px;
  max-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  z-index: 50;
  padding: 8px 0;
}

.dashboard-th-dropdown-panel[hidden] {
  display: none !important;
}

.dashboard-th-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  text-decoration: none;
  transition: background 0.12s var(--ease-smooth), color 0.12s var(--ease-smooth);
  position: relative;
}

.dashboard-th-dropdown-option.is-selected {
  padding-right: 32px;
}

.dashboard-th-dropdown-option:hover {
  background: rgba(0, 174, 239, 0.08);
  color: var(--primary);
}

/* Checkbox à esquerda: quadrado outline (não selecionado) ou azul com ✓ (selecionado) */
.dashboard-th-dropdown-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: transparent;
  font-size: 11px;
  color: transparent;
  transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}

.dashboard-th-dropdown-option.is-selected .dashboard-th-dropdown-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Checkmark à direita na opção "Todas" (is-selected) */
.dashboard-th-dropdown-option.is-selected::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-empty {
  text-align: center;
  padding: 28px 20px !important;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-empty a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.dashboard-empty a:hover {
  text-decoration: underline;
}

.dashboard-link-cell {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, #0099d6 100%);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 174, 239, 0.25);
  transition: background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform 0.12s var(--ease-smooth);
}

.dashboard-link-cell:hover {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  box-shadow: 0 2px 6px rgba(0, 174, 239, 0.35);
  transform: translateY(-0.5px);
}

.dashboard-link-cell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== Acompanhamento de pedidos (design moderno) ========== */
.acompanhamento {
  max-width: 100%;
}
.acompanhamento--modern.section {
  padding: 16px 20px;
}
.acompanhamento .escopo-pills {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.acompanhamento--modern .acompanhamento-header {
  margin-bottom: 16px;
}
.acompanhamento-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.acompanhamento--modern .acompanhamento-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.acompanhamento-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acompanhamento-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.acompanhamento--modern .acompanhamento-title { font-size: 20px; }
.acompanhamento-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.acompanhamento--modern .acompanhamento-subtitle { font-size: 13px; }
.acompanhamento-subtitle strong { color: var(--primary); }
.acompanhamento-intro {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.45;
}
.acompanhamento--modern .acompanhamento-intro {
  margin: 6px 0 0 0;
  font-size: 12px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  max-width: 100%;
}
.acompanhamento-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin-top: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
}
.acompanhamento-flow-label { font-weight: 600; color: var(--muted); margin-right: 4px; }
.acompanhamento-flow-step { color: var(--text); }
.acompanhamento-flow-arrow { color: var(--muted); font-weight: 600; }
.acompanhamento-period-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.acompanhamento--modern .acompanhamento-period-pills .filter-btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}
.acompanhamento-period-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-right: 4px;
}
.acompanhamento-period-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.acompanhamento-period-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acompanhamento-period-trigger-wrap {
  position: relative;
}
.acompanhamento-period-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.acompanhamento-period-trigger:hover {
  border-color: rgba(0, 174, 239, 0.3);
  background: rgba(0, 174, 239, 0.03);
}
.acompanhamento-period-trigger.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}
.acompanhamento-period-trigger-value {
  flex: 1;
  text-align: left;
}
.acompanhamento-period-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.25s var(--ease-smooth);
}
.acompanhamento-period-trigger.is-active .acompanhamento-period-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
.acompanhamento-period-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 100%;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 20px -4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0.2s;
}
.acompanhamento-period-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.acompanhamento-period-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth);
}
.acompanhamento-period-option:hover {
  background: rgba(0, 174, 239, 0.08);
  color: var(--primary);
}
.acompanhamento-period-option.is-selected {
  background: rgba(0, 174, 239, 0.12);
  color: var(--primary);
}
.acompanhamento-period-option.is-selected:hover {
  background: rgba(0, 174, 239, 0.16);
}
.acompanhamento-period-form input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.acompanhamento--modern .acompanhamento-period-form input[type="date"] {
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 6px;
}
.acompanhamento-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}
.acompanhamento--modern .acompanhamento-cards {
  gap: 8px;
  margin-bottom: 14px;
}
.acompanhamento-cards > .acompanhamento-card {
  flex: 1 1 0;
  min-width: 100px;
  padding: 14px 16px;
  gap: 6px;
  justify-content: center;
  min-height: 0;
}
.acompanhamento--modern .acompanhamento-cards > .acompanhamento-card {
  padding: 12px 14px;
  min-width: 90px;
}
.acompanhamento-cards > .acompanhamento-card .acompanhamento-card-num {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.acompanhamento--modern .acompanhamento-cards > .acompanhamento-card .acompanhamento-card-num {
  font-size: 22px;
}
.acompanhamento-cards > .acompanhamento-card .acompanhamento-card-titulo {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.acompanhamento-cards > .acompanhamento-card.active .acompanhamento-card-titulo {
  color: var(--text);
  font-weight: 600;
}
.acompanhamento--modern .acompanhamento-cards > .acompanhamento-card .acompanhamento-card-titulo {
  font-size: 11px;
}
.acompanhamento-cards-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0.4 0 auto;
  margin-left: auto;
}
.acompanhamento--modern .acompanhamento-cards-compact {
  gap: 6px;
}
.acompanhamento-cards-compact .acompanhamento-card {
  padding: 10px 12px;
  gap: 4px;
  flex: 0 0 auto;
}
.acompanhamento--modern .acompanhamento-cards-compact .acompanhamento-card {
  padding: 8px 10px;
}
.acompanhamento-card--compact .acompanhamento-card-titulo { font-size: 12px; font-weight: 600; }
.acompanhamento--modern .acompanhamento-card--compact .acompanhamento-card-titulo { font-size: 11px; }
.acompanhamento-card--compact .acompanhamento-card-num { font-size: 20px; line-height: 1.15; font-weight: 700; }
.acompanhamento--modern .acompanhamento-card--compact .acompanhamento-card-num { font-size: 18px; }
.acompanhamento-card-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.acompanhamento-card-alerta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  background: rgba(217, 119, 6, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
}
.acompanhamento-card-alerta--hoje {
  color: #92400e;
  background: rgba(217, 119, 6, 0.25);
}
.acompanhamento-card-alerta--prazo {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.2);
}
.acompanhamento-card-alerta--prazo svg {
  flex-shrink: 0;
}
/* Cards do acompanhamento – mesmo padrão do dashboard-kpi */
.acompanhamento-cards--simples {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.acompanhamento-cards--simples .acompanhamento-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.2s ease;
}
.acompanhamento-cards--simples .acompanhamento-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  border-color: rgba(0, 174, 239, 0.12);
}
.acompanhamento-cards--simples .acompanhamento-card.active {
  border-color: var(--border);
  background: rgba(0, 174, 239, 0.04);
  box-shadow: 0 0 0 1px rgba(0, 174, 239, 0.2);
}
.acompanhamento-cards--simples .acompanhamento-card--cobrar.active,
.acompanhamento-cards--simples .acompanhamento-card--destaque.active { border-left-color: var(--fluydon-amber, #d97706); }
.acompanhamento-cards--simples .acompanhamento-card--ja-cobrado.active { border-left-color: var(--fluydon-green); }
.acompanhamento-cards--simples .acompanhamento-card--pago.active { border-left-color: var(--fluydon-green); }
.acompanhamento-cards--simples .acompanhamento-card--caminho.active { border-left-color: var(--primary); }
.acompanhamento-cards--simples .acompanhamento-card--todas.active { border-left-color: var(--fluydon-slate, #475569); }
/* Cores por tipo – alinhadas ao dashboard (border-blue, border-green, border-amber, border-slate) */
.acompanhamento-cards--simples .acompanhamento-card--cobrar { border-left-color: var(--fluydon-amber, #d97706); }
.acompanhamento-cards--simples .acompanhamento-card--ja-cobrado { border-left-color: var(--fluydon-green); }
.acompanhamento-cards--simples .acompanhamento-card--pago { border-left-color: var(--fluydon-green); }
.acompanhamento-cards--simples .acompanhamento-card--caminho { border-left-color: var(--primary); }
.acompanhamento-cards--simples .acompanhamento-card--todas { border-left-color: var(--fluydon-slate, #475569); }
/* Destaque "Para cobrar" – mantém padrão dashboard (3px, surface) */
.acompanhamento-cards--simples .acompanhamento-card--destaque {
  border-left-width: 3px;
  background: var(--surface);
}
/* Tipografia alinhada ao dashboard-kpi */
.acompanhamento-cards--simples .acompanhamento-card {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.acompanhamento-cards--simples .acompanhamento-card-titulo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.acompanhamento-cards--simples .acompanhamento-card-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.acompanhamento-cards--simples .acompanhamento-card--destaque .acompanhamento-card-num {
  font-size: 22px;
}
@media (max-width: 900px) {
  .acompanhamento-cards--simples {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .acompanhamento-cards--simples {
    grid-template-columns: 1fr;
  }
}
.acompanhamento-subfiltros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 0;
}
.acompanhamento-subfiltros .acompanhamento-chip {
  transition: all 0.2s ease;
}
.acompanhamento-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.acompanhamento-chip:hover {
  background: #f1f5f9;
  color: var(--text);
  transform: translateY(-1px);
}
.acompanhamento-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.acompanhamento-chip--hoje.active {
  background: #d97706;
  border-color: #d97706;
}
.acompanhamento-chip--alerta {
  border-color: rgba(234, 88, 12, 0.4);
  color: #ea580c;
}
.acompanhamento-chip--alerta:hover {
  background: rgba(234, 88, 12, 0.08);
  border-color: #ea580c;
}
.acompanhamento-chip--alerta.active {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}
.acompanhamento-chip--prazo {
  color: #ea580c;
  border-color: rgba(234, 88, 12, 0.5);
  font-weight: 600;
  gap: 5px;
}
.acompanhamento-chip--prazo svg {
  flex-shrink: 0;
}
.acompanhamento-chip--prazo:hover {
  background: rgba(234, 88, 12, 0.1);
  border-color: #ea580c;
}
.acompanhamento-chip--prazo.active {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}
.acompanhamento-finos-wrap {
  margin-top: 10px;
}
.acompanhamento-finos-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
}
.acompanhamento-finos-summary:hover {
  color: var(--text);
}

/* Acompanhamento: tabela compacta de leads */
.acompanhamento-table-wrap {
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
  -webkit-overflow-scrolling: touch;
}
.acompanhamento .acompanhamento-table thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
/* Centraliza conteúdo nas colunas (exceto Cliente) */
.acompanhamento .acompanhamento-table thead th:nth-child(1),
.acompanhamento .acompanhamento-table thead th:nth-child(3),
.acompanhamento .acompanhamento-table thead th:nth-child(4),
.acompanhamento .acompanhamento-table thead th:nth-child(5),
.acompanhamento .acompanhamento-table thead th:nth-child(6),
.acompanhamento .acompanhamento-table thead th:nth-child(7),
.acompanhamento .acompanhamento-table thead th:nth-child(8),
.acompanhamento .acompanhamento-table thead th:nth-child(9),
.acompanhamento .acompanhamento-table thead th:nth-child(10),
.acompanhamento .acompanhamento-table thead th:nth-child(11),
.acompanhamento .acompanhamento-table thead th:nth-child(12),
.acompanhamento .acompanhamento-table tbody td:nth-child(1),
.acompanhamento .acompanhamento-table tbody td:nth-child(3),
.acompanhamento .acompanhamento-table tbody td:nth-child(4),
.acompanhamento .acompanhamento-table tbody td:nth-child(5),
.acompanhamento .acompanhamento-table tbody td:nth-child(6),
.acompanhamento .acompanhamento-table tbody td:nth-child(7),
.acompanhamento .acompanhamento-table tbody td:nth-child(8),
.acompanhamento .acompanhamento-table tbody td:nth-child(9),
.acompanhamento .acompanhamento-table tbody td:nth-child(10),
.acompanhamento .acompanhamento-table tbody td:nth-child(11),
.acompanhamento .acompanhamento-table tbody td:nth-child(12) {
  text-align: center;
}
.acompanhamento .acompanhamento-table tbody td {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: none;
  transition: background 0.15s ease;
  vertical-align: middle;
}
/* Borda na linha (box-shadow) evita desconexão na coluna Ações */
.acompanhamento .acompanhamento-table tbody tr {
  box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.6);
}
.acompanhamento .acompanhamento-table tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.6);
}
.acompanhamento .acompanhamento-table tbody tr:last-child {
  box-shadow: none;
}
.acompanhamento .acompanhamento-table tbody tr:hover td {
  background: rgba(0, 174, 239, 0.06) !important;
}
/* Evita transform no hover que desconecta a border-bottom */
.acompanhamento .acompanhamento-table .table-row:hover {
  transform: none;
}
.acompanhamento .acompanhamento-table .table-profile-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.acompanhamento .acompanhamento-table .table-profile-name {
  font-size: 12px;
}
.acompanhamento .acompanhamento-table .cell-main {
  font-size: 12px;
}
.acompanhamento .acompanhamento-table .cell-sub {
  font-size: 10px;
}
.acompanhamento .acompanhamento-table .status-badge {
  padding: 2px 6px;
  font-size: 10px;
}
.acompanhamento .acompanhamento-table code {
  font-size: 10px;
  padding: 2px 5px;
}
.acompanhamento .acompanhamento-table .fluydon-btn {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.acompanhamento .acompanhamento-table .fluydon-btn:hover {
  transform: translateY(-1px);
}
.acompanhamento .acompanhamento-table .acompanhamento-cell-acoes {
  white-space: nowrap;
  vertical-align: middle;
  min-height: 0;
  justify-content: center;
}
.acompanhamento .acompanhamento-table .acompanhamento-cell-acoes .fluydon-btn {
  flex-shrink: 0;
}
.acompanhamento .acompanhamento-table .acompanhamento-cell-agendado {
  font-size: 11px;
}
.acompanhamento .acompanhamento-table .cell-stack {
  min-width: 0;
}
.acompanhamento .acompanhamento-table .acompanhamento-obs-summary {
  padding: 2px 4px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.acompanhamento .acompanhamento-table .acompanhamento-obs-summary:hover {
  background: rgba(0, 174, 239, 0.06);
}
.acompanhamento .acompanhamento-table .acompanhamento-th-obs {
  width: 36px;
  min-width: 36px;
  padding: 8px 6px;
}
.acompanhamento .acompanhamento-table .acompanhamento-cell-obs {
  padding: 6px;
}

/* Kanban upgrade: cards mais compactos com efeitos suaves */
.acompanhamento-kanban--upgrade .acompanhamento-kanban-card {
  padding: 10px 12px;
  padding-right: 2.25rem; /* espaço reservado para o checkbox (28px) */
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.acompanhamento-kanban--upgrade .acompanhamento-kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.acompanhamento-kanban--upgrade .acompanhamento-kanban-card-nome {
  font-size: 13px;
  font-weight: 600;
}
.acompanhamento-kanban--upgrade .acompanhamento-kanban-card-tel,
.acompanhamento-kanban--upgrade .acompanhamento-kanban-card-valor {
  font-size: 11px;
}
.acompanhamento-kanban--upgrade .acompanhamento-kanban-col > h4 {
  font-size: 12px;
  margin-bottom: 8px;
}
.acompanhamento-kanban--upgrade .acompanhamento-kanban-col-cards {
  gap: 10px;
}
.acompanhamento-kanban--upgrade .acompanhamento-kanban-card .status-badge {
  font-size: 9px;
  padding: 2px 5px;
}
.acompanhamento-kanban--upgrade .kanban-card-cobrado-btn,
.acompanhamento-kanban--upgrade .kanban-card-desmarcar-btn {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 6px;
}
@media (max-width: 768px) {
  .acompanhamento-cards > .acompanhamento-card { flex: 1 1 calc(50% - 12px); min-width: 120px; padding: 16px 14px; }
  .acompanhamento-cards-compact { margin-left: 0; }
  .acompanhamento-period-pills { flex-wrap: wrap; gap: 8px; }
  .acompanhamento-period-pills .filter-btn { min-height: 44px; padding: 10px 14px; }
  .acompanhamento-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .acompanhamento-bar .search-form,
  .acompanhamento-bar .acompanhamento-search-form { max-width: none; }
  .acompanhamento-bar input[type="search"],
  .acompanhamento-search-input { min-height: 44px; font-size: 16px; }
  .acompanhamento-bar .search-form button,
  .acompanhamento-search-btn { min-height: 44px; padding: 10px 18px; }
  .acompanhamento-vista .filter-btn,
  .acompanhamento-vista-btn,
  .acompanhamento-note .filter-btn { min-height: 44px; padding: 10px 16px; }
  .acompanhamento-finos select,
  .acompanhamento-finos-grid select { min-height: 44px; }
  .acompanhamento-cobrado-checkbox { min-width: 44px; min-height: 44px; }
  .acompanhamento-bar .fluydon-btn,
  .acompanhamento-export-btn { min-height: 44px; padding: 10px 18px; }
  .acompanhamento-bar--upgrade .acompanhamento-bar-row--main { flex-direction: column; align-items: stretch; }
  .acompanhamento-bar--upgrade .acompanhamento-bar-actions { flex-direction: column; align-items: stretch; }
  .acompanhamento-bar--upgrade .acompanhamento-vista-btns { flex: 1; }
  .acompanhamento-bar--upgrade .acompanhamento-vista-btn { flex: 1; text-align: center; }
}
.acompanhamento-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform 0.15s var(--ease-smooth);
}
.acompanhamento--modern .acompanhamento-card {
  border-radius: 10px;
  transition: all 0.18s ease;
}
.acompanhamento-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.12);
  transform: translateY(-2px);
}
.acompanhamento--modern .acompanhamento-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.1);
}
.acompanhamento-card.active {
  border-color: var(--primary);
  background: rgba(0, 174, 239, 0.06);
  box-shadow: 0 0 0 1px var(--primary);
}
.acompanhamento--modern .acompanhamento-card.active {
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.25);
}
.acompanhamento-card-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}
.acompanhamento-card-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.acompanhamento-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
/* Cores laterais: laranja = aguardando | verde = concluído | azul = em trânsito | cinza = neutro */
.acompanhamento-card--aguardando { border-left: 4px solid #d97706; } /* pendente pagamento */
.acompanhamento-card--ja-cobrado { border-left: 4px solid #059669; } /* concluído - já cobrou */
.acompanhamento-card--retirada { border-left: 4px solid #f59e0b; } /* aguardando retirada na agência */
.acompanhamento-card--pago { border-left: 4px solid #22c55e; } /* concluído - pago */
.acompanhamento-card--caminho { border-left: 4px solid #0ea5e9; } /* em trânsito */
.acompanhamento-card--agendado { border-left: 4px solid #8b5cf6; } /* agendamento de cobrança */
.acompanhamento-card--todas { border-left: 4px solid #64748b; } /* neutro - visão geral */
.acompanhamento-card--cobrar { border-left: 4px solid #d97706; }
/* Card "Para cobrar" em destaque para cobradores */
.acompanhamento-card--destaque {
  flex: 1 1 auto;
  min-width: 140px;
  border-left-width: 5px;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.06) 0%, transparent 100%);
}
.acompanhamento--modern .acompanhamento-card--destaque {
  min-width: 100px;
  border-left-width: 4px;
}
.acompanhamento-card--destaque .acompanhamento-card-num { font-size: 28px; }
.acompanhamento--modern .acompanhamento-card--destaque .acompanhamento-card-num { font-size: 24px; }
.acompanhamento-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.acompanhamento--modern .acompanhamento-bar {
  padding: 10px 14px;
  margin-bottom: 12px;
  gap: 10px;
  border-radius: 10px;
}
.acompanhamento-bar .search-form { display: flex; gap: 8px; flex: 1; min-width: 200px; max-width: 360px; }
.acompanhamento--modern .acompanhamento-bar .search-form { min-width: 180px; max-width: 320px; }
.acompanhamento-bar input[type="search"] { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.acompanhamento--modern .acompanhamento-bar input[type="search"] { padding: 7px 11px; font-size: 13px; border-radius: 6px; }
.acompanhamento-bar .search-form button { padding: 8px 14px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.acompanhamento--modern .acompanhamento-bar .search-form button { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
.acompanhamento-vista { display: flex; align-items: center; gap: 4px; }
.acompanhamento-vista .filter-btn { padding: 6px 12px; font-size: 13px; }
.acompanhamento--modern .acompanhamento-vista .filter-btn { padding: 5px 10px; font-size: 12px; }
.acompanhamento-finos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-left: auto; }
.acompanhamento--modern .acompanhamento-finos { gap: 8px; font-size: 12px; }
.acompanhamento-finos label { margin: 0; }
.acompanhamento-finos select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--surface); }
.acompanhamento--modern .acompanhamento-finos select { padding: 5px 9px; font-size: 12px; }

/* Bar upgrade – design moderno e suave */
.acompanhamento-bar--upgrade {
  flex-direction: column;
  align-items: stretch;
  padding: 14px 16px;
  gap: 0;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.acompanhamento-bar--upgrade .acompanhamento-bar-row--main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.acompanhamento-bar--upgrade .acompanhamento-bar-row--main:last-child {
  margin-bottom: 0;
}
.acompanhamento-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}
.acompanhamento-search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: #f8fafc;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.acompanhamento-search-wrap:hover {
  background: #f1f5f9;
}
.acompanhamento-search-wrap:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}
.acompanhamento-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  color: #94a3b8;
}
.acompanhamento-search-icon svg {
  display: block;
}
.acompanhamento-search-wrap:focus-within .acompanhamento-search-icon {
  color: var(--primary);
}
.acompanhamento-bar input[type="search"],
.acompanhamento-search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: none !important;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.01em;
}
.acompanhamento-search-input::placeholder {
  color: var(--muted);
  opacity: 0.9;
}
.acompanhamento-search-input:focus {
  outline: none;
}
.acompanhamento-search-btn {
  padding: 10px 20px;
  background: linear-gradient(180deg, #00b8f5 0%, #0099d6 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(0, 153, 214, 0.3),
    0 2px 6px rgba(0, 174, 239, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.acompanhamento-search-btn:hover {
  background: linear-gradient(180deg, #00c2ff 0%, #00aee8 100%);
  box-shadow:
    0 2px 4px rgba(0, 153, 214, 0.35),
    0 4px 12px rgba(0, 174, 239, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.acompanhamento-search-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 153, 214, 0.25);
}
.acompanhamento-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.acompanhamento-vista-segmented {
  display: flex;
  align-items: center;
  gap: 10px;
}
.acompanhamento-vista-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
}
.acompanhamento-vista-btns {
  display: flex;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.acompanhamento-vista-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.acompanhamento-vista-btn:hover {
  color: var(--text);
  background: rgba(0, 174, 239, 0.06);
}
.acompanhamento-vista-btn.active {
  background: linear-gradient(180deg, #00b8f5 0%, #0099d6 100%);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(0, 153, 214, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.acompanhamento-export-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.acompanhamento-export-btn:hover {
  color: var(--primary);
  border-color: rgba(0, 174, 239, 0.3);
  background: rgba(0, 174, 239, 0.06);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.1);
}
/* Filtros avançados – dropdown abaixo do search */
.acompanhamento-finos-row {
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.acompanhamento-finos-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.acompanhamento-finos-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.acompanhamento-finos-trigger:hover {
  color: var(--text);
  background: rgba(0, 174, 239, 0.06);
}
.acompanhamento-finos-trigger.is-active {
  color: var(--primary);
  background: rgba(0, 174, 239, 0.08);
}
.acompanhamento-finos-chevron {
  transition: transform 0.25s ease;
}
.acompanhamento-finos-trigger.is-active .acompanhamento-finos-chevron {
  transform: rotate(180deg);
}
.acompanhamento-finos-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(0, 174, 239, 0.15);
  color: var(--primary);
  border-radius: 4px;
}
.acompanhamento-finos-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 280px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.acompanhamento-finos-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.acompanhamento-finos {
  padding: 0;
  margin: 0;
}
.acompanhamento-finos-form {
  display: block;
}
.acompanhamento-finos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.acompanhamento-fino-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acompanhamento-fino-group label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.acompanhamento-finos-grid select {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  min-width: 0;
  transition: all 0.2s ease;
}
.acompanhamento-finos-grid select:hover {
  border-color: rgba(0, 174, 239, 0.2);
}
.acompanhamento-finos-grid select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}
.acompanhamento-finos-limpar {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.acompanhamento-finos-limpar:hover {
  color: var(--primary);
}
.acompanhamento-conteudo-title {
  margin: 0 0 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.acompanhamento--modern .acompanhamento-conteudo-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.acompanhamento--modern .acompanhamento-bar .fluydon-btn {
  font-size: 12px;
  padding: 6px 12px;
}
.acompanhamento-conteudo-title span { color: var(--muted); font-weight: 500; }
.acompanhamento-cell-cobrado {
  text-align: center;
}
.acompanhamento-cell-cobrado form {
  display: inline-block;
}
.acompanhamento-cobrado-checkbox {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.acompanhamento-cobrado-checkbox:hover {
  border-color: var(--primary);
  background: rgba(0, 174, 239, 0.06);
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.2);
  transform: scale(1.05);
}
.acompanhamento-cobrado-checkbox svg {
  display: block;
  flex-shrink: 0;
}
.acompanhamento-cobrado-checkbox--checked {
  border-color: var(--fluydon-green, #059669);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.15), rgba(5, 150, 105, 0.08));
  color: var(--fluydon-green, #059669);
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2);
}
.acompanhamento-cobrado-checkbox--checked:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.06));
  border-color: #dc2626;
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}
.acompanhamento-cobrado-checkbox--disabled {
  border-color: var(--border);
  background: rgba(0, 0, 0, 0.03);
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}
.acompanhamento-note {
  margin: -4px 0 12px 0;
  font-size: 13px;
  color: var(--muted);
}
.acompanhamento--modern .acompanhamento-note {
  margin: 0 0 12px 0;
  font-size: 12px;
  padding: 6px 0;
}
.acompanhamento-note .filter-btn {
  border-radius: 6px;
  transition: all 0.2s ease;
}
.acompanhamento-note .filter-btn:hover {
  transform: translateY(-1px);
}
.acompanhamento-note--prioridade {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.08) 0%, rgba(234, 88, 12, 0.03) 100%);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.acompanhamento-note--prioridade-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(234, 88, 12, 0.15);
  color: #ea580c;
  border-radius: 10px;
}
.acompanhamento-note--prioridade-icon svg {
  width: 20px;
  height: 20px;
}
.acompanhamento-note--prioridade-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acompanhamento-note--prioridade-main {
  font-weight: 500;
  color: var(--text);
}
.acompanhamento-note--prioridade-desc {
  font-size: 12px;
  color: var(--muted);
}
.acompanhamento-note--prioridade-desc em {
  font-style: normal;
  color: #ea580c;
  font-weight: 600;
}
.acompanhamento-note--prioridade-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.12);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.acompanhamento-note--prioridade-btn:hover {
  background: rgba(234, 88, 12, 0.2);
  color: #c2410c;
  transform: translateY(-1px);
}
.acompanhamento-row-prazo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ea580c;
  font-size: 10px;
  font-weight: 700;
}
.acompanhamento-row-prazo svg {
  flex-shrink: 0;
}
.acompanhamento-row-prazo-data {
  opacity: 0.9;
}
.acompanhamento-row-prazo--cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.12);
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 2px;
}
.acompanhamento-row-prazo--cell svg {
  width: 8px;
  height: 8px;
}
.cell-stack--data {
  align-items: center;
  text-align: center;
}
.acompanhamento-conteudo { margin-top: 0; }
.acompanhamento .table-wrapper { margin: 0; }

/* Wrapper e zonas: positivos vs negativos (PLANEJAMENTO_KANBAN) */
.acompanhamento-kanban-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.acompanhamento-kanban-zona {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acompanhamento-kanban-zona-titulo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}
.acompanhamento-kanban-zona--positivos .acompanhamento-kanban-zona-titulo { color: var(--primary); }
.acompanhamento-kanban-zona--negativos .acompanhamento-kanban-zona-titulo { color: var(--status-cancelled, #dc2626); }

/* Kanban: colunas dividem o espaço igualmente, ocupando todo o container */
.acompanhamento-kanban-scroll {
  width: 100%;
  padding-bottom: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.acompanhamento-kanban {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.acompanhamento-kanban--compacto {
  gap: 16px;
}
.acompanhamento-kanban-col {
  flex: 1 1 0;
  min-width: 200px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.acompanhamento-kanban-col > h4 {
  flex-shrink: 0;
}
.acompanhamento-kanban-col-cards {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 65vh;
  margin: 0 -4px 0 0;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
}
.acompanhamento-kanban-col-cards::-webkit-scrollbar {
  width: 6px;
}
.acompanhamento-kanban-col-cards::-webkit-scrollbar-track {
  background: transparent;
}
.acompanhamento-kanban-col-cards::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}
.acompanhamento-kanban-col-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
/* Cards em coluna única para layout mais organizado */
.acompanhamento-kanban-col h4 {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.acompanhamento-kanban-col h4 .n { font-weight: 400; color: var(--text); }
.acompanhamento-kanban-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  padding-right: 2rem;
  font-size: 12px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease-smooth), background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}
.acompanhamento-kanban-card:hover {
  border-color: rgba(0, 174, 239, 0.4);
  background: rgba(0, 174, 239, 0.03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.acompanhamento-kanban-card--prioridade {
  border-left: 3px solid #ea580c;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.06) 0%, rgba(255, 255, 255, 1) 100%);
}
.acompanhamento-kanban-card--prioridade:hover {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1) 0%, rgba(0, 174, 239, 0.03) 100%);
  border-color: rgba(234, 88, 12, 0.5);
}
.acompanhamento-kanban-card-alerta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ea580c;
  background: rgba(234, 88, 12, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}
.acompanhamento-kanban-card-alerta svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}
.acompanhamento-kanban-card-prazo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ea580c;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.2) 0%, rgba(234, 88, 12, 0.12) 100%);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid rgba(234, 88, 12, 0.3);
}
.acompanhamento-kanban-card-prazo svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}
.kanban-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
.kanban-card-cobrado-form {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  margin: 0;
  z-index: 2;
}
.kanban-card-cobrado-btn {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: #94a3b8;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kanban-card-cobrado-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0, 174, 239, 0.06);
  box-shadow: 0 2px 6px rgba(0, 174, 239, 0.2);
  transform: scale(1.08);
}
.kanban-card-desmarcar-btn {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.15), rgba(5, 150, 105, 0.08));
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: #059669;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.15);
}
.kanban-card-desmarcar-btn:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.06));
  color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
  transform: scale(1.08);
}
.acompanhamento-kanban-card-nome {
  font-weight: 600;
  font-size: 11px;
  display: block;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acompanhamento-tel-whatsapp {
  color: #25d366;
  text-decoration: none;
}
.acompanhamento-tel-whatsapp:hover {
  text-decoration: underline;
}
.acompanhamento-kanban-card-tel {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acompanhamento-kanban-card-valor {
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  display: block;
}
.acompanhamento-kanban-card-data {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.acompanhamento-kanban-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  min-width: 0;
}
.acompanhamento-kanban-card-cobrado {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  color: var(--status-delivered, #059669);
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(5, 150, 105, 0.12);
}
.acompanhamento-obs-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  margin-left: 4px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(0, 174, 239, 0.1);
  transition: background 0.2s var(--ease-smooth);
}
.acompanhamento-obs-indicator:hover {
  background: rgba(0, 174, 239, 0.16);
}
.acompanhamento-kanban-card-tags .acompanhamento-obs-indicator {
  margin: 0;
  padding: 2px;
}
.acompanhamento-kanban-card-tags .acompanhamento-obs-indicator svg {
  width: 9px;
  height: 9px;
}
.acompanhamento-cell-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.acompanhamento-cell-obs {
  text-align: center;
  width: 2rem;
  position: relative;
}
.acompanhamento-obs-details {
  display: inline-block;
}
.acompanhamento-obs-summary {
  cursor: pointer;
  list-style: none;
  padding: 4px;
  border-radius: 6px;
  font-size: 1rem;
}
.acompanhamento-obs-summary::-webkit-details-marker { display: none; }
.acompanhamento-obs-summary:hover { background: rgba(0, 174, 239, 0.1); }
.acompanhamento-obs-summary,
.acompanhamento-obs-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acompanhamento-obs-summary svg {
  display: block;
  color: var(--muted);
}
.acompanhamento-obs-summary:hover svg {
  color: var(--primary);
}
.acompanhamento-obs-indicator svg {
  display: block;
  flex-shrink: 0;
  color: var(--primary);
}
.acompanhamento-cell-agendado-inner,
.acompanhamento-kanban-card-agendado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.acompanhamento-kanban-card .acompanhamento-kanban-card-agendado {
  font-size: 9px;
  gap: 3px;
}
.acompanhamento-cell-agendado-inner svg,
.acompanhamento-kanban-card-agendado svg {
  display: block;
  flex-shrink: 0;
  color: var(--muted);
}
.acompanhamento-kanban-card .acompanhamento-kanban-card-agendado svg {
  width: 9px;
  height: 9px;
}
.acompanhamento-obs-form {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  margin-top: 4px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 260px;
}
.acompanhamento-obs-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.acompanhamento-obs-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fluydon-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.acompanhamento-th-obs {
  width: 2rem;
  text-align: center;
}
.acompanhamento-kanban-card-tags .status-badge,
.acompanhamento-kanban-card-tags .fluydon-badge { margin: 0; }
.acompanhamento .pagination {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
}

/* Dashboard pagination – mesmo design do dashboard-sales-summary */
.dashboard-pagination-wrap {
  margin-top: 0;
  padding-top: 0;
}

.dashboard-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #fafbfd 0%, #f5f7fa 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0 0 14px 14px;
  transition: background 0.2s var(--ease-smooth);
}

.dashboard-pagination:hover {
  background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
}

.dashboard-pagination-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-pagination-number {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dashboard-pagination-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.dashboard-pagination-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.dashboard-pagination-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, #0099d6 100%);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.25);
  text-decoration: none;
  transition: background 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform 0.12s var(--ease-smooth);
}

.dashboard-pagination-btn:hover {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  box-shadow: 0 2px 10px rgba(0, 174, 239, 0.35);
  transform: translateY(-0.5px);
  color: #fff;
}

.dashboard-pagination-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Popup nova venda (tempo real) */
.fluydon-venda-popup {
  position: fixed;
  bottom: 20px;
  left: calc(var(--sidebar) + 20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #00AEEF 0%, #00a0d8 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 174, 239, 0.4);
  font: 600 14px/1.3 var(--font-sans);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth), left 0.25s var(--ease-smooth);
  pointer-events: none;
}
.sidebar-collapsed .fluydon-venda-popup {
  left: calc(var(--sidebar-collapsed) + 20px);
}
.fluydon-venda-popup--visible {
  opacity: 1;
  transform: translateY(0);
}
.fluydon-venda-popup-icon {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Animação de entrada para nova venda em tempo real */
.fluydon-venda-row-nova {
  animation: fluydon-venda-row-entrada 0.8s var(--ease-smooth) forwards;
}
@keyframes fluydon-venda-row-entrada {
  0% {
    opacity: 0;
    background-color: rgba(0, 174, 239, 0.15);
    transform: translateY(-8px);
  }
  60% {
    background-color: rgba(0, 174, 239, 0.08);
  }
  100% {
    opacity: 1;
    background-color: transparent;
    transform: translateY(0);
  }
}

/* Animação de atualização do badge de status em tempo real */
.fluydon-status-updated--anim {
  animation: fluydon-status-badge-update 0.5s var(--ease-smooth) forwards;
}
@keyframes fluydon-status-badge-update {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 174, 239, 0.2);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 174, 239, 0);
    transform: scale(1);
  }
}

/* Animação de entrada do vendedor na primeira venda do dia */
.fluydon-vendedor-first-appear--anim {
  animation: fluydon-vendedor-first-appear 0.6s var(--ease-smooth) forwards;
}
@keyframes fluydon-vendedor-first-appear {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animação de entrada do cobrador no primeiro pagamento do período */
.fluydon-cobrador-first-appear--anim {
  animation: fluydon-cobrador-first-appear 0.6s var(--ease-smooth) forwards;
}
@keyframes fluydon-cobrador-first-appear {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Mobile (smartphones, tablets)
   ============================================ */

.mobile-header {
  display: none;
}
.sidebar-backdrop {
  display: none;
}
.sidebar-toggle-icon-mobile {
  display: none;
}

@media (max-width: 900px) {
  .login-page__wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .login-welcome {
    padding: 40px 24px 28px;
  }
  .login-welcome__logo {
    margin-bottom: 24px;
    height: 44px;
  }
  .login-welcome__title {
    font-size: 22px;
  }
  .login-welcome__sub {
    font-size: 14px;
  }
  .login-main {
    padding: 24px 20px 40px;
  }
  .login-box__header {
    padding: 28px 24px 20px;
  }
  .login-box__title {
    font-size: 20px;
  }
  .login-form__fields {
    padding: 20px 24px 0;
  }
  .login-form__actions {
    padding: 20px 24px 28px;
    margin-top: 20px;
  }
  .login-messages {
    padding: 12px 24px 0;
  }
}

/* ── Navbar responsivo: zoom em telas grandes (ex.: 1536px com 125%+ zoom ≈ 1230px) ── */
@media (max-width: 1280px) {
  .dashboard-header-inner {
    gap: 8px 12px;
  }
  .dashboard-header-left {
    flex-shrink: 1;
    min-width: 0;
  }
  .dashboard-header-card .dashboard-tabs {
    justify-content: flex-start;
  }
  .dashboard-header-card .dashboard-tab {
    padding: 6px 8px;
    font-size: 11.5px;
  }
  .dashboard-header-dates {
    flex-shrink: 1;
  }
  .dashboard-date-field {
    min-width: 0;
  }
  .dashboard-date-input {
    min-width: 0;
    width: 100%;
  }
}

/* ── Navbar responsivo: tablet / small desktop ── */
@media (max-width: 900px) {
  .dashboard-header-inner {
    gap: 10px 12px;
  }
  .dashboard-header-left {
    width: 100%;
  }
  .dashboard-header-card .dashboard-tabs {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .dashboard-header-dates {
    flex-shrink: 1;
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mobile-header-menu-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: var(--bg);
    color: var(--sidebar-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-header-menu-btn:hover {
    background: rgba(0, 174, 239, 0.1);
    color: var(--primary);
  }
  .mobile-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 16px;
  }
  .mobile-header-brand img {
    flex-shrink: 0;
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease-smooth), visibility 0.25s var(--ease-smooth);
  }
  body.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-smooth);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }
  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }
  body.sidebar-mobile-open {
    overflow: hidden;
  }
  body.sidebar-mobile-open .sidebar-collapsed .sidebar {
    width: var(--sidebar);
  }
  .sidebar-toggle-icon-desktop {
    display: none !important;
  }
  .sidebar-toggle-icon-mobile {
    display: block !important;
    font-size: 24px;
    line-height: 1;
  }
  .main {
    padding-top: 0;
  }
  .container {
    padding: 20px 16px 0;
    max-width: 100%;
  }
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* Header do dashboard mobile: seções bem separadas */
  .dashboard-header-card {
    padding: 18px 16px;
    margin-bottom: 14px;
  }
  .dashboard-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    justify-content: flex-start;
  }
  .dashboard-header-left {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  }
  .dashboard-header-left .dashboard-header-text {
    flex: 1;
    min-width: 0;
  }
  /* Toggle Operação/Geral: pills separados no mobile (mesmo padrão das tabs) */
  .dashboard-escopo-toggle {
    gap: 6px;
    overflow: visible;
  }
  .dashboard-escopo-opt {
    border-radius: 8px;
  }
  .dashboard-escopo-opt:first-child {
    border-right: 1px solid #e2e8f0;
  }
  /* Tabs: grid 2x2 ou linha única compacta */
  .dashboard-header-card .dashboard-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 0;
  }
  .dashboard-header-card .dashboard-tab {
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 40px;
    border-radius: 8px;
  }
  /* Datas: uma linha compacta [início] – [fim] [Ok] */
  .dashboard-header-dates {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
  .dashboard-header-dates .dashboard-date-field {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
  }
  .dashboard-header-dates .dashboard-date-input {
    min-width: 0;
    font-size: 12px;
    width: 100%;
  }
  .dashboard-header-dates .dashboard-date-sep {
    flex-shrink: 0;
  }
  .dashboard-date-ok {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px;
  }
  /* Ver vendas: destaque, largura total */
  .dashboard-header-card .dashboard-btn-ver-vendas {
    margin: 6px 0 0;
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    font-size: 13px;
    border-top: 1px solid var(--border);
  }
  .dashboard-header-actions {
    flex-direction: column;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .dashboard-kpi {
    padding: 12px 14px;
  }
  .dashboard-kpi-value {
    font-size: 18px;
  }
  .dashboard-panels {
    grid-template-columns: 1fr;
  }
  .table-wrapper,
  .sales-table-wrapper {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fluydon-table th,
  .fluydon-table td {
    font-size: 12px;
    padding: 10px 8px;
    white-space: nowrap;
  }
  .fluydon-header,
  .fluydon-header-inner {
    flex-wrap: wrap;
  }
  .fluydon-header-title {
    font-size: 18px;
  }
  .acompanhamento-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .acompanhamento-bar .search-form {
    max-width: none;
  }
  .acompanhamento-finos {
    margin-left: 0;
  }
  .acompanhamento-cards > .acompanhamento-card {
    flex: 1 1 100%;
    min-width: 0;
  }
  .acompanhamento-kanban-col {
    min-width: 180px;
  }
  .config-section {
    padding: 14px 16px;
  }
  .webhook-url-box {
    flex-direction: column;
  }
  .webhook-copy-btn {
    width: 100%;
  }
  .fluydon-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Desempenho Cobradores/Vendedores: layout empilhado no mobile para evitar compressão */
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador,
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 10px;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell--who,
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--who {
    grid-row: 1 / -1;
    align-self: start;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result,
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--progress,
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell-group--progress-result > .performance-cell--progress {
    flex: 1 1 120px;
    min-width: 0;
  }
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell--result,
  .dashboard-panel--vendedores .dashboard-performance-row--vendedor .performance-cell--result-inline {
    flex: 0 0 auto;
    min-width: 72px;
  }
  .dashboard-panel--cobradores .performance-cell--result .performance-meta,
  .dashboard-panel--cobradores .performance-cell--result .performance-value {
    white-space: nowrap;
  }
  .dashboard-panel--cobradores .performance-cell--progress .dashboard-performance-bar-wrap {
    min-width: 40px;
  }

  /* ===== Configurações: nav horizontal no mobile ===== */
  .config-layout {
    flex-direction: column;
    gap: 16px;
  }
  .config-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .config-nav-item {
    flex-shrink: 0;
    min-height: 40px;
  }
  .config-nav-group {
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 2px;
  }
  .config-nav-group:first-child {
    margin-top: 0;
  }

  /* ===== Lista de vendas ===== */
  .page-header-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-header-compact .header-left {
    flex-wrap: wrap;
  }
  .page-header-compact .pills-inline {
    width: 100%;
  }
  .section.sales-panel {
    padding: 12px 0;
  }
  .sales-panel .section-header,
  .sales-panel .fluydon-metrics-grid,
  .sales-panel .filter-row {
    padding-left: 0;
    padding-right: 0;
  }
  .sales-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .sales-header .link {
    align-self: flex-start;
  }
  .sales-header-actions {
    width: 100%;
  }
  .search-form {
    flex-direction: column;
    width: 100%;
  }
  .search-form input[type="search"] {
    min-width: 0;
    width: 100%;
  }
  .search-form button {
    width: 100%;
  }
  .fluydon-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metrics-filters-row {
    flex-direction: column;
  }
  .metrics-filters-row .vendas-filter-field { min-width: 0; }
  .metrics-toggle-header {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-row {
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-left: -4px;
    margin-right: -4px;
  }
  .filter-row .dashboard-filter-custom {
    flex-wrap: wrap !important;
  }
  .filter-row .dashboard-filter-custom input[type="date"] {
    flex: 1 1 0;
    min-width: 0;
  }
  .filter-btn {
    padding: 8px 12px;
    font-size: 12px;
    flex-shrink: 0;
    min-height: 40px;
  }
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* ===== Detalhe da venda ===== */
  .fluydon-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .fluydon-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .fluydon-detail-grid {
    grid-template-columns: 1fr;
  }
  .fluydon-detail-json summary {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ===== Acompanhamento ===== */
  .acompanhamento-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .acompanhamento-period-pills {
    flex-wrap: wrap;
    gap: 6px;
  }
  .acompanhamento-period-form {
    flex-wrap: wrap;
  }
  .acompanhamento-period-form input[type="date"] {
    flex: 1 1 0;
    min-width: 0;
  }
  .acompanhamento-cards-compact {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .acompanhamento-title {
    font-size: 20px;
  }

  /* ===== Solicitações de afiliado: layout em cards no mobile ===== */
  .solicitacoes-pendentes-wrap {
    overflow: visible;
  }
  .solicitacoes-pendentes-table {
    min-width: 0;
  }
  .solicitacoes-pendentes-table thead {
    display: none;
  }
  .solicitacoes-pendentes-table .solicitacao-row {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .solicitacoes-pendentes-table .solicitacao-row:last-child {
    margin-bottom: 0;
  }
  .solicitacoes-pendentes-table .solicitacao-row td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 0;
    border: none;
    white-space: normal;
  }
  .solicitacoes-pendentes-table .solicitacao-row td:not(.solicitacao-actions)::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 70px;
  }
  .solicitacoes-pendentes-table .solicitacao-row td[data-label=""]::before {
    content: none;
    display: none;
  }
  .solicitacoes-pendentes-table .solicitacao-row td.solicitacao-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
  }
  .solicitacoes-pendentes-table .solicitacao-row td.solicitacao-actions::before {
    content: none;
  }
  .solicitacoes-pendentes-table .solicitacao-row td.solicitacao-actions form {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 !important;
  }
  .solicitacoes-pendentes-table .solicitacao-row td.solicitacao-actions input[type="password"],
  .solicitacoes-pendentes-table .solicitacao-row td.solicitacao-actions input[type="text"] {
    width: 100% !important;
    max-width: none !important;
    padding: 10px 12px !important;
  }
  .solicitacoes-pendentes-table .solicitacao-row td.solicitacao-actions .action-btn {
    width: 100%;
    padding: 10px 14px;
  }

  /* ===== Solicitacoes / tabelas config ===== */
  .config-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .config-form-row-inline {
    flex-wrap: wrap !important;
  }
  .config-form-row-inline .config-input {
    min-width: 0;
    flex: 1 1 100%;
  }
  .config-form-row-inline .fluydon-btn {
    flex: 1 1 100%;
  }
  .config-metas-blocks {
    grid-template-columns: 1fr;
  }
  .config-cards {
    grid-template-columns: 1fr;
  }

  /* Config: lista de perfis (afiliados, vendedores, etc.) */
  .config-profile-item--with-avatar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .config-profile-item--with-avatar .config-profile-info {
    flex: 1;
    min-width: 0;
  }
  .config-profile-item--with-avatar .config-profile-avatar-form,
  .config-profile-item--with-avatar form[style*="inline"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .config-profile-item--with-avatar .config-input-file-sm {
    max-width: 100%;
    flex: 1 1 0;
  }

  /* Popup nova venda: adaptado para mobile */
  .fluydon-venda-popup {
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  .dashboard-header-card .dashboard-tabs {
    gap: 2px;
  }
  .dashboard-header-card .dashboard-tab {
    padding: 5px 10px;
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .container {
    padding: 20px 12px 0;
  }
  .dashboard-header-card {
    padding: 12px 12px;
    border-radius: var(--radius-sm);
  }
  .dashboard-header-card .dashboard-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }
  .dashboard-kpi {
    padding: 12px 14px;
  }
  .dashboard-kpi-value {
    font-size: 18px;
  }
  .login-box {
    margin: 16px;
    padding: 24px 20px;
    max-width: none;
  }
  /* Cobradores: mantém espaço para 0% 0/15 e R$ 0 - sobrescreve regras que comprimem */
  .dashboard-panel--cobradores .dashboard-performance-row--cobrador .performance-cell-group--progress-result > .performance-cell--result {
    flex: 0 0 auto !important;
    min-width: 68px !important;
  }
  .fluydon-metrics-grid {
    grid-template-columns: 1fr;
  }
  .config-nav {
    gap: 4px;
  }
  .config-nav-item {
    padding: 8px 10px;
    font-size: 13px;
  }
  .metrics-resumo-block .metrics-resumo-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
  .metrics-resumo-card { padding: 12px 14px; gap: 10px; }
  .metrics-resumo-card-value { font-size: 1.2rem; }
  .metrics-resumo-card-icon { width: 34px; height: 34px; }
  .metrics-analise-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
  .metrics-financeiro-resultado-value { font-size: 1.4rem; }
}

/* ============================================
   TV / Telas grandes (dashboard em TV, 4K)
   ============================================ */

@media (min-width: 1920px) {
  html {
    font-size: 112.5%; /* 18px base – legível à distância */
  }
  .container {
    max-width: 1800px;
    padding: 0 32px;
  }
  .sidebar {
    padding: 18px 14px;
  }
  .sidebar-header {
    padding: 18px 14px;
    margin: -18px -14px 14px -14px;
  }
  .brand-logo {
    height: 48px;
  }
  .sidebar-nav-group-title {
    font-size: 12px;
    margin: 18px 0 8px;
  }
  .sidebar-link {
    font-size: 15px;
    padding: 12px 14px;
    gap: 12px;
  }
  .sidebar-link-icon,
  .sidebar-link-icon svg {
    width: 22px;
    height: 22px;
  }
  .dashboard-header-title {
    font-size: 18px;
  }
  .dashboard-header-date {
    font-size: 12px;
    padding: 4px 10px;
  }
  .dashboard-tab {
    font-size: 14px;
    padding: 10px 16px;
  }
  .dashboard-kpi {
    padding: 18px 20px;
  }
  .dashboard-kpi-label {
    font-size: 11px;
  }
  .dashboard-kpi-value {
    font-size: 26px;
  }
  .dashboard-kpi-sub {
    font-size: 12px;
  }
  .dashboard-panel-title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .dashboard-panel {
    padding: 18px 20px;
  }
  .dashboard-performance-name {
    font-size: 15px;
  }
  .dashboard-performance-num,
  .dashboard-performance-pct,
  .performance-value {
    font-size: 15px;
  }
  .dashboard-performance-avatar {
    width: 32px;
    height: 32px;
  }
  .fluydon-table th,
  .fluydon-table td {
    font-size: 14px;
    padding: 14px 16px;
  }
  .fluydon-venda-popup {
    padding: 16px 24px;
    font-size: 16px;
  }
  .fluydon-venda-popup-icon {
    font-size: 20px;
  }
  .fluydon-header-title,
  .config-page-title {
    font-size: 20px;
  }
  .fluydon-btn {
    font-size: 14px;
    padding: 10px 18px;
  }
  .acompanhamento-title {
    font-size: 26px;
  }
  .acompanhamento-subtitle {
    font-size: 15px;
  }
  .acompanhamento-cards > .acompanhamento-card .acompanhamento-card-num {
    font-size: 30px;
  }
  .acompanhamento-cards > .acompanhamento-card .acompanhamento-card-titulo {
    font-size: 15px;
  }
  .acompanhamento-kanban-col h4 {
    font-size: 0.9375rem;
  }
  .acompanhamento-kanban-card-nome {
    font-size: 0.9375rem;
  }
}

@media (min-width: 2560px) {
  html {
    font-size: 125%; /* 20px base – 4K / TV grande */
  }
  .container {
    max-width: 2200px;
    padding: 0 40px;
  }
  .dashboard-kpi-value {
    font-size: 32px;
  }
  .dashboard-header-title {
    font-size: 22px;
  }
  .dashboard-panel-title {
    font-size: 17px;
  }
  .dashboard-performance-name {
    font-size: 16px;
  }
  .fluydon-table th,
  .fluydon-table td {
    font-size: 15px;
    padding: 16px 18px;
  }
  .acompanhamento-title {
    font-size: 30px;
  }
  .acompanhamento-cards > .acompanhamento-card .acompanhamento-card-num {
    font-size: 34px;
  }
}

/* ========== cfg-* — layout compacto das páginas de config ========== */

/* Página */
.cfg-page { display: flex; flex-direction: column; gap: 20px; padding: 24px 0 40px; }
.cfg-page-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.cfg-page-desc { font-size: 13px; color: var(--muted); margin: -12px 0 4px; }

/* Row de cards lado-a-lado */
.cfg-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cfg-row--top { align-items: flex-start; }
.cfg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  flex: 1;
  min-width: 220px;
  transition: box-shadow 0.18s var(--ease-smooth);
}
.cfg-card:hover { box-shadow: var(--shadow-hover); }
.cfg-card-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.cfg-card-desc { font-size: 12px; color: var(--muted); margin: -6px 0 12px; line-height: 1.5; }
.cfg-card--form { min-width: 260px; }

/* Seções */
.cfg-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  transition: box-shadow 0.18s var(--ease-smooth);
}
.cfg-section--inline .cfg-section-head { flex-direction: row; align-items: center; gap: 16px; }
.cfg-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.cfg-section-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; }
.cfg-section-desc { font-size: 12px; color: var(--muted); margin: 0; flex: 1; }
.cfg-count {
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* Tabelas */
.cfg-table-wrap { overflow-x: auto; margin-top: 4px; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.cfg-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle, var(--border)); color: var(--text); vertical-align: middle; }
.cfg-table tr:last-child td { border-bottom: none; }
.cfg-table tr.cfg-row-editing td { background: var(--surface); }
.cfg-th-num { text-align: center; width: 60px; }
.cfg-empty { color: var(--muted); font-size: 13px; padding: 12px 0; text-align: center; }
.cfg-link-action { font-size: 12px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.cfg-link-action:hover { text-decoration: underline; }
.cfg-link-inline { color: var(--primary); text-decoration: none; }
.cfg-link-inline:hover { text-decoration: underline; }
.cfg-actions-cell { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cfg-inline-form { display: inline-flex; gap: 4px; align-items: center; }
.cfg-btn-danger {
  background: transparent;
  border: 1px solid var(--danger, #e55);
  color: var(--danger, #e55);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.cfg-btn-danger:hover { background: var(--danger, #e55); color: #fff; }

/* Metas compacto */
.cfg-metas-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-metas-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.cfg-metas-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.cfg-metas-table tr:last-child td { border-bottom: none; }
.cfg-metas-period { font-size: 12px; color: var(--muted); font-weight: 500; width: 64px; white-space: nowrap; }
.cfg-input-num { width: 72px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; text-align: center; }
.cfg-input-num:focus { outline: none; border-color: var(--primary); }
.cfg-input-premio { width: 130px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.cfg-input-premio:focus { outline: none; border-color: var(--primary); }
.cfg-form-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Inline edit row */
.cfg-edit-row td { background: var(--surface); padding: 10px 10px; }
.cfg-inline-edit-form { width: 100%; }
.cfg-inline-edit-grid {
  display: grid;
  grid-template-columns: 56px 80px 1fr 56px 80px 1fr 56px 80px 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.cfg-inline-edit-label { font-size: 12px; color: var(--muted); font-weight: 500; text-align: right; }

/* Perfil compacto */
.cfg-perfil-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfg-perfil-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }
.cfg-perfil-photo-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-file-label { position: relative; cursor: pointer; }
.cfg-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cfg-hint { font-size: 11px; color: var(--muted); }

/* Produtos: toggle inline */
.cfg-toggle-form { display: flex; align-items: center; gap: 10px; }
.cfg-toggle-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cfg-toggle-text { font-size: 13px; color: var(--text); }

/* Produtos: add form row */
.cfg-add-form { margin-bottom: 12px; }
.cfg-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cfg-input-flex { flex: 1; min-width: 140px; }
.cfg-input-narrow { width: 120px; }

/* Badge muted */
.cfg-badge-muted {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Equipe — header compacto */
.colab-header--compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0;
  background: none;
  border: none;
}
.colab-title-compact {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Operação: field inline (label+input+button em linha) */
.cfg-field-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-input-suffix-wrap { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); }
.cfg-input-unit { border: none; background: transparent; padding: 6px 8px; color: var(--text); font-size: 13px; width: 80px; text-align: center; outline: none; }
.cfg-input-unit:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.cfg-input-unit-label { padding: 0 8px; font-size: 12px; color: var(--muted); background: var(--surface); border-left: 1px solid var(--border); }
.cfg-input-unit-label--prefix { border-left: none; border-right: 1px solid var(--border); }
.cfg-card-hint { font-size: 11px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }

/* Operação: badges de status */
.cfg-badge-green { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: rgba(34,197,94,.12); color: #16a34a; }
.cfg-row-inactive td { opacity: .55; }
.cfg-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.cfg-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

/* Produtos: toggle inline com label */
.cfg-inline-row-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfg-inline-row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Add panel (details expansion) */
.cfg-add-details { position: relative; }
.cfg-add-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  user-select: none;
}
.cfg-add-summary::-webkit-details-marker { display: none; }
.cfg-add-panel {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cfg-add-row--form { flex-wrap: wrap; align-items: center; }

/* Info banner (flutuante) */
.cfg-info-banner {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Equipe: tabela compacta */
.cfg-table--equipe .cfg-equipe-cell { display: flex; align-items: center; gap: 8px; }
.cfg-equipe-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cfg-equipe-nome { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cfg-equipe-login { display: block; font-size: 11px; color: var(--muted); }
.cfg-equipe-sem-conta { display: block; font-size: 11px; color: var(--warning, #f59e0b); }

/* Senha inline na tabela */
.colab-senha-wrap { display: inline-flex; align-items: center; gap: 4px; }
.colab-senha-masked { font-size: 12px; font-family: monospace; color: var(--muted); letter-spacing: 1px; }
.colab-senha-toggle { background: none; border: none; cursor: pointer; padding: 2px; color: var(--muted); display: inline-flex; align-items: center; }
.colab-senha-toggle:hover { color: var(--text); }

/* Section-head: count inline com o título */
.cfg-section-title .cfg-count { margin-left: 6px; vertical-align: middle; }

@media (max-width: 640px) {
  .cfg-row { flex-direction: column; }
  .cfg-inline-edit-grid { grid-template-columns: 1fr 1fr 1fr; }
  .cfg-inline-edit-label { display: none; }
  .cfg-table--equipe .cfg-equipe-cell { gap: 6px; }
}

/* ========== Vendedor / Cobrador editar — layout ve-* ========== */

.ve-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0 48px;
  max-width: 760px;
}

/* Header */
.ve-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 6px;
}
.ve-back:hover { color: var(--text); }

.ve-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ve-identity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.ve-identity-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.ve-identity-sub {
  font-size: 12px;
  color: var(--muted);
}

/* Main card */
.ve-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s var(--ease-smooth);
}
.ve-card:hover { box-shadow: var(--shadow-hover); }

/* Seção de dados + avatar */
.ve-section-data {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.ve-avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 96px;
}
.ve-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.ve-photo-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.ve-photo-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  width: 100%;
  white-space: nowrap;
}
.ve-photo-btn:hover { border-color: var(--primary); color: var(--primary); }
.ve-photo-btn input[type="file"] { display: none; }
.ve-hint { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.4; }

/* Formulário de dados */
.ve-dados-form { flex: 1; min-width: 0; }
.ve-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.ve-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.ve-field--wide { flex: 1; min-width: 200px; }
.ve-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.ve-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}
.ve-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.ve-input--sm { padding: 5px 8px; font-size: 12px; }
.ve-input--plat { width: 90px; }
.ve-dados-actions { display: flex; justify-content: flex-end; }

/* Rows (Conta / Emails / UTM) */
.ve-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.ve-row:last-child { border-bottom: none; }
.ve-row-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 5px;
  min-width: 64px;
}
.ve-row-label-sub {
  display: block;
  font-size: 9px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: .7;
}
.ve-row-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.ve-row-body--tags { gap: 6px; align-items: center; }
.ve-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Conta inline */
.ve-code {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text);
}
.ve-senha-wrap { display: inline-flex; align-items: center; gap: 5px; }
.ve-senha-masked {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 2px;
}
.ve-senha-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  padding: 2px;
}
.ve-senha-toggle:hover { color: var(--text); }
.ve-sem-conta { font-size: 12px; color: var(--muted); font-style: italic; }

.ve-inline-form { display: inline-flex; align-items: center; gap: 5px; }
.ve-criar-conta-form { flex-wrap: wrap; }
.ve-password-wrap { position: relative; display: inline-flex; align-items: center; }
.ve-password-wrap .ve-input { padding-right: 28px; }
.ve-pw-toggle {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
}
.ve-btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ve-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.ve-btn-danger-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ve-btn-danger-ghost:hover { color: var(--danger, #e55); border-color: var(--danger, #e55); }

/* Tags (email / UTM) */
.ve-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 8px 3px 10px;
  color: var(--text);
  white-space: nowrap;
}
.ve-tag-plat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary);
  margin-right: 2px;
}
.ve-tag-form { display: inline-flex; }
.ve-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  padding: 0;
  line-height: 1;
}
.ve-tag-remove:hover { color: var(--danger, #e55); }
.ve-empty-tags { font-size: 12px; color: var(--muted); font-style: italic; }

/* ve-tag: animação de entrada */
.ve-tag { animation: cfgSlideIn 0.18s var(--ease-out) both; }

/* ve-avatar hover ring */
.ve-avatar {
  transition: box-shadow 0.2s var(--ease-smooth);
}
.ve-avatar-block:hover .ve-avatar {
  box-shadow: 0 0 0 3px rgba(0,174,239,0.25), 0 0 0 5px rgba(0,174,239,0.08);
}

@media (max-width: 600px) {
  .ve-section-data { flex-direction: column; align-items: flex-start; }
  .ve-avatar-block { flex-direction: row; width: auto; }
  .ve-photo-form { flex-direction: row; }
  .ve-photo-btn { width: auto; }
  .ve-row { flex-direction: column; gap: 8px; }
  .ve-row-actions { margin-left: 0; }
}

/* ========== cs-badge — sistema unificado de status ========== */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.cs-badge--green {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.25);
}
.cs-badge--yellow {
  background: rgba(245,158,11,0.1);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.25);
}
.cs-badge--red {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.22);
}
.cs-badge--blue {
  background: rgba(0,174,239,0.1);
  color: var(--primary);
  border: 1px solid rgba(0,174,239,0.22);
}
.cs-badge--muted {
  background: var(--surface-hover);
  color: var(--muted);
  border: 1px solid var(--border);
}
.cs-badge--inactive {
  background: rgba(100,116,139,0.08);
  color: var(--muted);
  border: 1px solid rgba(100,116,139,0.2);
  opacity: .8;
}

/* cs-badge dot indicator */
.cs-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-badge--green::before  { background: #22c55e; }
.cs-badge--yellow::before { background: #f59e0b; }
.cs-badge--red::before    { background: #ef4444; }
.cs-badge--blue::before   { background: var(--primary); }
.cs-badge--muted::before, .cs-badge--inactive::before  { background: var(--muted); }

/* cfg-edit-row: slide in quando expande */
.cfg-edit-row td { animation: cfgSlideIn 0.2s var(--ease-out) both; }

/* cfg-table zebra */
.cfg-table tbody tr:nth-child(even) td { background: var(--surface-hover); }
.cfg-table tbody tr:hover td { background: rgba(0,174,239,0.04); }

/* ve-* pills (checklist cobrador) */
.ve-checklist-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ve-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s var(--ease-smooth);
  user-select: none;
}
.ve-pill input[type="checkbox"] { display: none; }
.ve-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,174,239,0.05);
}
.ve-pill--active {
  border-color: var(--primary);
  background: rgba(0,174,239,0.1);
  color: var(--primary);
}
.ve-pill--active::before {
  content: '✓';
  font-size: 10px;
  font-weight: 700;
}

/* ========== et-* — Equipe table system ========== */

.et-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s var(--ease-smooth);
}
.et-section:hover { box-shadow: var(--shadow-hover); }

/* Header */
.et-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}
.et-section-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.et-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,174,239,0.12);
  color: var(--primary);
  border-radius: 100px;
}

/* Add button */
.et-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s var(--ease-smooth);
  white-space: nowrap;
}
.et-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,174,239,0.04);
}
.et-add-btn--active {
  border-color: var(--primary);
  background: rgba(0,174,239,0.08);
  color: var(--primary);
}
.et-add-btn--active svg { transform: rotate(45deg); }
.et-add-btn svg { transition: transform 0.2s var(--ease-smooth); }

/* Add panel (animated) */
.et-add-panel {
  overflow: hidden;
  transition: max-height 0.22s var(--ease-smooth), opacity 0.18s var(--ease-smooth);
  border-bottom: 1px solid var(--border-subtle);
}
.et-add-panel[hidden] { display: block !important; max-height: 0 !important; opacity: 0 !important; }
.et-add-form { padding: 16px 20px; }
.et-add-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
}
.et-add-field { display: flex; flex-direction: column; gap: 4px; }
.et-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.et-input {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
  width: 100%;
  box-sizing: border-box;
}
.et-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.et-password-wrap { position: relative; }
.et-password-wrap .et-input { padding-right: 34px; }
.et-pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: inline-flex;
}
.et-pw-toggle:hover { color: var(--text); }
.et-add-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-cancel-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 0.14s;
}
.et-cancel-btn:hover { color: var(--text); }

/* Info banner */
.et-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(245,158,11,0.06);
  border-bottom: 1px solid rgba(245,158,11,0.18);
  padding: 10px 20px;
  line-height: 1.5;
}
.et-info-banner svg { flex-shrink: 0; color: var(--warning); margin-top: 1px; }
.et-info-banner strong { color: var(--text); }

/* Bulk actions bar */
.et-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(0,174,239,0.06);
  border-bottom: 1px solid var(--border-subtle);
}
.et-bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.et-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s var(--ease-smooth);
}
.et-bulk-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,174,239,0.06);
}
.et-bulk-btn--allow:hover {
  border-color: var(--success);
  color: var(--success);
  background: rgba(34,197,94,0.06);
}
.et-bulk-btn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239,68,68,0.06);
}

/* Table */
.et-table-wrap { overflow-x: auto; }
.et-th-checkbox,
.et-td-checkbox {
  width: 1%;
  white-space: nowrap;
  padding-left: 14px !important;
  padding-right: 8px !important;
  vertical-align: middle;
}
.et-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.et-checkbox-wrap .et-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}
.et-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.et-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  background: rgba(0,0,0,0.012);
}
.et-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: middle;
}
.et-row:last-child td { border-bottom: none; }
.et-row {
  transition: background 0.12s var(--ease-smooth);
}
.et-row:hover td { background: rgba(0,174,239,0.03); }
.et-row--inactive { opacity: .65; }
.et-row--inactive:hover { opacity: .85; }

/* Person cell */
.et-person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.et-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: box-shadow 0.18s var(--ease-smooth);
}
.et-row:hover .et-avatar {
  box-shadow: 0 0 0 2px rgba(0,174,239,0.2);
}
.et-person-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.et-person-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-person-login {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

/* Meta chips */
.et-meta-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.et-meta-dash { font-size: 13px; color: var(--border); }

/* Links cell (email/utm chips) */
.et-links-cell { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.et-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
}
.et-link-chip--email {
  background: rgba(0,174,239,0.08);
  color: var(--primary);
  border: 1px solid rgba(0,174,239,0.2);
}
.et-link-chip--utm {
  background: rgba(52,231,128,0.08);
  color: #16a34a;
  border: 1px solid rgba(52,231,128,0.25);
}

/* Senha cell */
.et-senha-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px;
  display: inline-flex;
  vertical-align: middle;
}
.et-senha-toggle:hover { color: var(--text); }

/* Ghost buttons */
.et-ghost-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s var(--ease-smooth);
  white-space: nowrap;
}
.et-ghost-btn:hover { border-color: var(--primary); color: var(--primary); }
.et-ghost-btn--toggle:hover { border-color: var(--warning); color: var(--warning); }

/* Edit button */
.et-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: all 0.14s var(--ease-smooth);
  white-space: nowrap;
}
.et-edit-btn:hover {
  color: var(--primary);
  background: rgba(0,174,239,0.07);
  border-color: rgba(0,174,239,0.2);
}
.et-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Empty state */
.et-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  gap: 10px;
  text-align: center;
}
.et-empty p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* et-section-head-actions */
.et-section-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Ghost link (subtle text link) */
.et-ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 7px;
  transition: color 0.14s var(--ease-smooth), background 0.14s var(--ease-smooth);
}
.et-ghost-link:hover { color: var(--primary); background: rgba(0,174,239,0.06); }

/* Danger ghost button variant */
.et-ghost-btn--danger { border-color: transparent; }
.et-ghost-btn--danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.05); }

/* Optional field label hint */
.et-field-optional {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--border);
  margin-left: 3px;
}

/* Alert banner (pending requests, etc.) */
.et-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid;
}
.et-alert-banner--warn {
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.25);
  color: var(--text);
}
.et-alert-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.et-alert-banner--warn .et-alert-banner-left svg { color: var(--warning); flex-shrink: 0; }
.et-alert-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(245,158,11,0.3);
  transition: all 0.14s var(--ease-smooth);
}
.et-alert-action:hover { background: rgba(245,158,11,0.12); }

/* Photo upload inline */
.et-photo-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.et-photo-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  cursor: pointer;
  transition: all 0.14s var(--ease-smooth);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
}
.et-photo-label:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }
.et-photo-label input[type="file"] { display: none; }
.et-photo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }

@media (max-width: 600px) {
  .et-add-fields { grid-template-columns: 1fr; }
  .et-table thead th:nth-child(n+3):not(:last-child) { display: none; }
  .et-table tbody td:nth-child(n+3):not(:last-child) { display: none; }
  .et-section-head-actions { gap: 4px; }
  .et-ghost-link { display: none; }
}

/* ── et-setting-row (toggle settings) ── */
.et-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.et-setting-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.et-setting-title { font-size: 14px; font-weight: 700; color: var(--text); }
.et-setting-desc { font-size: 12px; color: var(--muted); }
.et-setting-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Toggle switch */
.et-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.et-switch-input { display: none; }
.et-switch-track {
  width: 36px;
  height: 20px;
  border-radius: 100px;
  background: var(--border);
  position: relative;
  transition: background 0.18s var(--ease-smooth);
  flex-shrink: 0;
}
.et-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.18s var(--ease-smooth);
}
.et-switch-input:checked ~ .et-switch-track { background: var(--primary); }
.et-switch-input:checked ~ .et-switch-track .et-switch-thumb { transform: translateX(16px); }
.et-switch-label { font-size: 12px; font-weight: 500; color: var(--muted); min-width: 36px; }
.et-switch-input:checked + .et-switch-track + .et-switch-label { color: var(--primary); }

/* Section hint (right-aligned) */
.et-section-hint {
  font-size: 11px;
  color: var(--muted);
  max-width: 260px;
  text-align: right;
  line-height: 1.4;
}
.et-section-hint strong { color: var(--text); }

/* Code inline */
.et-code {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

/* Product name */
.et-product-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Custo column center-align (scoped to produtos table only) */
.et-custo-cell { text-align: center; }
.et-custo-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.et-custo-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.et-custo-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.et-custo-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.et-custo-edit-btn:hover {
  color: var(--primary);
  background: rgba(0,174,239,0.07);
  border-color: rgba(0,174,239,0.2);
}
.et-custo-form { display: inline-flex; }
.et-custo-wrap {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}
.et-custo-wrap:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.et-custo-prefix {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-hover);
  padding: 0 6px;
  border-right: 1px solid var(--border);
  height: 100%;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.et-custo-input {
  width: 72px;
  padding: 5px 6px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.et-custo-save {
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  background: rgba(0,174,239,0.08);
  color: var(--primary);
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.14s;
  height: 100%;
  white-space: nowrap;
}
.et-custo-save:hover { background: rgba(0,174,239,0.16); }

/* Allow ghost button */
.et-ghost-btn--allow { border-color: transparent; }
.et-ghost-btn--allow:hover { border-color: var(--success); color: var(--success); background: rgba(34,197,94,0.06); }

/* ── et-profile (Meu Perfil page) ── */
.et-profile-page { max-width: 600px; }
.et-profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease-smooth);
}
.et-profile-card:hover { box-shadow: var(--shadow-hover); }
.et-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.et-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.et-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
  transition: box-shadow 0.2s var(--ease-smooth);
}
.et-profile-avatar-wrap:hover .et-profile-avatar {
  box-shadow: 0 0 0 3px rgba(0,174,239,0.2), 0 0 0 5px rgba(0,174,239,0.06);
}
.et-profile-avatar-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s var(--ease-smooth);
}
.et-profile-avatar-wrap:hover .et-profile-avatar-ring {
  border-color: rgba(0,174,239,0.35);
}
.et-profile-identity { min-width: 0; }
.et-profile-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px 0;
  line-height: 1.3;
}
.et-profile-meta {
  font-size: 12px;
  color: var(--muted);
}
.et-profile-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.et-profile-row:last-child { border-bottom: none; }
.et-profile-row-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex: 0 0 100px;
  line-height: 1.4;
}
.et-profile-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.et-profile-value {
  font-size: 13px;
  color: var(--text);
}
.et-profile-value--muted { color: var(--muted); font-size: 12px; }
.et-profile-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.et-profile-section:last-child { border-bottom: none; }
.et-profile-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
}
.et-profile-form { margin-top: 0; }
.et-profile-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.et-profile-field { min-width: 0; }
.et-profile-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.et-profile-field-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.et-profile-field-row .et-profile-input { flex: 1; min-width: 100px; }
.et-profile-input--full { max-width: none !important; width: 100% !important; }
.et-profile-readonly { font-size: 13px; }
.et-profile-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.et-profile-actions {
  margin-top: 14px;
}
.et-profile-photo-row { margin-top: 4px; }
.et-profile-photo-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.et-profile-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.et-photo-text { white-space: nowrap; }
.et-profile-field input {
  width: 100%;
  max-width: 200px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}
.et-profile-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.et-profile-field input[readonly] { background: var(--surface-hover); color: var(--muted); cursor: not-allowed; }
.et-profile-photo-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.et-profile-photo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.et-profile-photo-label:hover { border-color: var(--primary); color: var(--primary); }
.et-profile-photo-label input[type="file"] { display: none; }
.et-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.15s;
}
.et-profile-link:hover { opacity: 0.85; }

/* ── et-metas ── */

/* Defaults grid (side-by-side) */
.et-metas-defaults {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .et-metas-defaults { grid-template-columns: 1fr; } }

/* Metas table (padrão) */
.et-metas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.et-metas-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: rgba(0,0,0,.012);
}
.et-metas-table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.et-metas-table tbody tr:last-child td { border-bottom: none; }
.et-metas-period { width: 80px; }
.et-period-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px 8px;
}
.et-num-input {
  width: 72px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
}
.et-num-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.et-prize-input {
  width: 130px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.et-prize-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.et-metas-actions {
  display: flex;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
}

/* Individual metas table */
.et-metas-ind-table .et-meta-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.et-meta-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  min-width: 24px;
}
.et-meta-val--set { color: var(--text); font-weight: 600; }
.et-meta-dash { color: var(--border); }
.et-prize-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(245,158,11,0.09);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.2);
  white-space: nowrap;
}

/* Inline edit row */
.et-inline-edit-row td {
  padding: 0 !important;
  background: rgba(0,174,239,0.025);
  border-top: 1px solid rgba(0,174,239,0.2);
  border-bottom: 1px solid rgba(0,174,239,0.2);
}
.et-row--editing td { background: rgba(0,174,239,0.03); }
.et-inline-edit-form { padding: 14px 16px; }
.et-inline-edit-grid {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.et-ie-field { display: flex; flex-direction: column; gap: 4px; }
.et-ie-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.et-ie-pair { display: flex; gap: 6px; align-items: center; }
.et-ie-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 1px; }

/* Inline edit fields (Criativos / Números) */
.et-inline-edit-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.et-inline-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.et-inline-edit-field--grow { flex: 2; min-width: 140px; }
.et-inline-edit-field--sm { flex: 0 0 80px; min-width: 80px; }
.et-inline-edit-field--sm .et-input { max-width: 80px; }
.et-inline-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px;
}

/* Monospace utility for phone numbers etc */
.et-mono { font-family: ui-monospace, "SF Mono", monospace; letter-spacing: 0.02em; }

/* ── et-operacao ── */

.et-op-inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 4px;
  flex-wrap: wrap;
}
.et-op-input-wrap {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-smooth);
}
.et-op-input-wrap:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.et-op-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-hover);
  padding: 0 8px;
  border-left: 1px solid var(--border);
  height: 100%;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.et-op-unit--prefix {
  border-left: none;
  border-right: 1px solid var(--border);
}
.et-op-input {
  width: 90px;
  padding: 6px 8px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  outline: none;
}
.et-op-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 20px 14px;
  line-height: 1.4;
  margin: 0;
}
.et-op-error {
  font-size: 12px;
  color: var(--danger);
  margin: 2px 0 0;
}

/* Range chip (custos) */
.et-range-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: ui-monospace, monospace;
}
.et-range-sep { color: var(--border); }
.et-custo-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(0,174,239,0.07);
  border: 1px solid rgba(0,174,239,0.2);
  border-radius: 6px;
  padding: 2px 8px;
}

/* Criativo cell */
.et-criativo-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-criativo-emoji {
  font-size: 18px;
  line-height: 1;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Table column alignment: last column (actions) right-aligned ── */
.et-table th:last-child,
.et-table td:last-child {
  text-align: right;
}

/* Status column — fixed width, centered */
.et-table th:nth-last-child(2),
.et-table td:nth-last-child(2) {
  width: 1%;
  white-space: nowrap;
}

/* Actions column — shrink to fit */
.et-table th:last-child,
.et-table td:last-child {
  width: 1%;
  white-space: nowrap;
  padding-right: 16px;
}

/* Ghost buttons inside actions — consistent sizing */
.et-actions-cell .et-ghost-btn {
  padding: 4px 10px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.et-actions-cell .et-ghost-btn--danger {
  padding: 4px 6px;
}
.et-actions-cell .et-ghost-btn--edit {
  border-color: transparent;
}
.et-actions-cell .et-ghost-btn--edit:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,174,239,0.05);
}

/* cfg-input-num e cfg-input-premio: focus com shadow */
.cfg-input-num:focus, .cfg-input-premio:focus {
  box-shadow: var(--shadow-focus);
}
.config-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}

/* Tab bar: scroll horizontal no mobile */
.config-tabs-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.config-tabs-scroll-wrap::-webkit-scrollbar { display: none; }

/* cfg-page: header row com título + actions */
.cfg-page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Perfil: avatar com ring gradient */
.cfg-perfil-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.cfg-perfil-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
  transition: box-shadow 0.2s var(--ease-smooth);
  position: relative;
  z-index: 1;
}
.cfg-perfil-avatar-wrap:hover .cfg-perfil-avatar {
  box-shadow: 0 0 0 3px rgba(0,174,239,0.25), 0 0 0 5px rgba(0,174,239,0.08);
}

/* operacao: input com hint */
.cfg-field-inline .cfg-card-hint {
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   METRICS PAGE REDESIGN — 2026-03
   Prefix: mfx-  |  Scoped: .metrics-page
   ═══════════════════════════════════════════════════════════ */

/* ── Easings globais para o módulo ── */
:root {
  --mfx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mfx-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --mfx-fast: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ════════════════════════════════════════════
   1. METRICS BLOCKS — sombra e hover global
   ════════════════════════════════════════════ */
.metrics-page .metrics-block {
  transition: box-shadow 0.28s var(--mfx-ease), transform 0.22s var(--mfx-ease);
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.75);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
}
.metrics-page .metrics-block:hover {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* Títulos com acento visual lateral */
.metrics-page .metrics-block-title {
  position: relative;
  padding-left: 12px;
}
.metrics-page .metrics-block-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--primary) 0%, rgba(0, 174, 239, 0.4) 100%);
}

/* ════════════════════════════════════════════
   2. KPI STRIP
   ════════════════════════════════════════════ */
.mfx-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* Resetar margin dos cards no grid */
.mfx-kpi-strip .metrics-resumo-card {
  margin: 0;
  border-radius: 14px;
  border-top-width: 3px;
  padding: 18px 20px;
  transition:
    box-shadow 0.28s var(--mfx-ease),
    transform  0.22s var(--mfx-spring),
    border-color 0.22s var(--mfx-ease),
    background 0.25s var(--mfx-ease);
  overflow: hidden;
  position: relative;
}

/* Gradiente sutil que aparece no hover */
.mfx-kpi-strip .metrics-resumo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s var(--mfx-ease);
  pointer-events: none;
  border-radius: inherit;
}
.mfx-kpi-strip .metrics-resumo-card--blue::after  { background: linear-gradient(135deg, rgba(0,174,239,0.06) 0%, transparent 65%); }
.mfx-kpi-strip .metrics-resumo-card--green::after { background: linear-gradient(135deg, rgba(5,150,105,0.07) 0%, transparent 65%); }
.mfx-kpi-strip .metrics-resumo-card--amber::after { background: linear-gradient(135deg, rgba(217,119,6,0.07) 0%, transparent 65%); }
.mfx-kpi-strip .metrics-resumo-card--slate::after { background: linear-gradient(135deg, rgba(100,116,139,0.07) 0%, transparent 65%); }

.mfx-kpi-strip .metrics-resumo-card:hover::after { opacity: 1; }

/* Lift + sombra colorida no hover */
.mfx-kpi-strip .metrics-resumo-card:hover {
  transform: translateY(-3px);
}
.mfx-kpi-strip .metrics-resumo-card--blue:hover {
  box-shadow: 0 10px 32px rgba(0,174,239,0.18), 0 3px 8px rgba(0,174,239,0.08);
  border-color: rgba(0,174,239,0.35);
}
.mfx-kpi-strip .metrics-resumo-card--green:hover {
  box-shadow: 0 10px 32px rgba(5,150,105,0.18), 0 3px 8px rgba(5,150,105,0.08);
  border-color: rgba(5,150,105,0.35);
}
.mfx-kpi-strip .metrics-resumo-card--amber:hover {
  box-shadow: 0 10px 32px rgba(217,119,6,0.18), 0 3px 8px rgba(217,119,6,0.08);
  border-color: rgba(217,119,6,0.35);
}
.mfx-kpi-strip .metrics-resumo-card--slate:hover {
  box-shadow: 0 10px 32px rgba(100,116,139,0.18), 0 3px 8px rgba(100,116,139,0.08);
  border-color: rgba(100,116,139,0.35);
}

/* Ícone: ring de brilho no hover */
.mfx-kpi-strip .metrics-resumo-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  transition: box-shadow 0.25s var(--mfx-ease), transform 0.22s var(--mfx-spring);
}
.mfx-kpi-strip .metrics-resumo-card-icon svg { width: 20px; height: 20px; }
.mfx-kpi-strip .metrics-resumo-card--blue:hover  .metrics-resumo-card-icon { box-shadow: 0 0 0 5px rgba(0,174,239,0.12); transform: scale(1.08); }
.mfx-kpi-strip .metrics-resumo-card--green:hover .metrics-resumo-card-icon { box-shadow: 0 0 0 5px rgba(5,150,105,0.12); transform: scale(1.08); }
.mfx-kpi-strip .metrics-resumo-card--amber:hover .metrics-resumo-card-icon { box-shadow: 0 0 0 5px rgba(217,119,6,0.12); transform: scale(1.08); }
.mfx-kpi-strip .metrics-resumo-card--slate:hover .metrics-resumo-card-icon { box-shadow: 0 0 0 5px rgba(100,116,139,0.12); transform: scale(1.08); }

/* Valor mais robusto */
.mfx-kpi-strip .metrics-resumo-card-value {
  font-size: 1.8rem;
  letter-spacing: -0.035em;
  transition: color 0.2s var(--mfx-ease);
}
.mfx-kpi-strip .metrics-resumo-card--blue:hover  .metrics-resumo-card-value { color: var(--primary); }
.mfx-kpi-strip .metrics-resumo-card--green:hover .metrics-resumo-card-value { color: #059669; }
.mfx-kpi-strip .metrics-resumo-card--amber:hover .metrics-resumo-card-value { color: #d97706; }
.mfx-kpi-strip .metrics-resumo-card--slate:hover .metrics-resumo-card-value { color: #475569; }

/* ════════════════════════════════════════════
   3. PANELS GRID (Agendamentos + Pagamentos)
   ════════════════════════════════════════════ */
.mfx-panels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.mfx-panels-grid > .metrics-block {
  margin-bottom: 0;
}

/* Faixas de deductions com hover suave */
.metrics-page .metrics-financeiro-row {
  transition: background 0.18s var(--mfx-ease), padding-left 0.18s var(--mfx-ease);
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
}
.metrics-page .metrics-financeiro-row:hover {
  background: rgba(226, 232, 240, 0.35);
}
.metrics-page .metrics-financeiro-row--deduct:hover {
  background: rgba(239, 68, 68, 0.04);
}

/* Resultado box: glow + micro-scale */
.metrics-page .metrics-financeiro-resultado {
  border-radius: 12px;
  transition:
    box-shadow 0.28s var(--mfx-ease),
    transform  0.22s var(--mfx-spring);
}
.metrics-page .metrics-financeiro-resultado:hover {
  box-shadow: 0 4px 18px rgba(0, 174, 239, 0.15);
  transform: scale(1.015);
}
.metrics-page .metrics-financeiro-resultado--green:hover {
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.16);
}

/* Valor do resultado maior e bold */
.metrics-page .metrics-financeiro-resultado-value {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

/* Criativos pills */
.metrics-page .metrics-criativo-pill {
  transition: transform 0.18s var(--mfx-spring), box-shadow 0.18s var(--mfx-ease), background 0.18s ease;
}
.metrics-page .metrics-criativo-pill:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 3px 10px rgba(0, 174, 239, 0.2);
}
.metrics-page .metrics-criativo-pill--green:hover {
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.2);
}

/* ════════════════════════════════════════════
   4. ANÁLISE FINAL — hero layout
   ════════════════════════════════════════════ */
.mfx-analise-v2 {
  display: grid;
  grid-template-columns: 270px 1fr;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  min-height: 130px;
}

.mfx-analise-hero-panel {
  padding: 28px 24px;
  background: linear-gradient(150deg, rgba(5, 150, 105, 0.07) 0%, rgba(52, 231, 128, 0.03) 100%);
  border-right: 1px solid rgba(226, 232, 240, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transition: background 0.3s var(--mfx-ease);
  cursor: default;
}
.mfx-analise-hero-panel:hover {
  background: linear-gradient(150deg, rgba(5, 150, 105, 0.11) 0%, rgba(52, 231, 128, 0.05) 100%);
}

.mfx-analise-hero-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #059669;
}
.mfx-analise-hero-value {
  font-size: 2.35rem;
  font-weight: 700;
  color: #059669;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 4px 0;
  transition: transform 0.22s var(--mfx-spring);
}
.mfx-analise-hero-panel:hover .mfx-analise-hero-value {
  transform: scale(1.025);
}
.mfx-analise-hero-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* Tiles laterais */
.mfx-analise-tiles {
  display: flex;
  align-items: stretch;
}
.mfx-analise-tile {
  flex: 1;
  padding: 24px 20px;
  border-right: 1px solid rgba(226, 232, 240, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: background 0.2s var(--mfx-ease);
  cursor: default;
}
.mfx-analise-tile:last-child { border-right: none; }
.mfx-analise-tile:hover { background: rgba(0, 174, 239, 0.03); }

.mfx-analise-tile-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.mfx-analise-tile-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
  transition: color 0.2s var(--mfx-ease);
}
.mfx-analise-tile:hover .mfx-analise-tile-value { color: var(--primary); }
.mfx-analise-tile-sub { font-size: 11px; color: var(--muted); }

/* ════════════════════════════════════════════
   5. STATS STRIP (Relatório)
   ════════════════════════════════════════════ */
.mfx-stats-strip {
  display: flex;
  background: #fafbfc;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.mfx-stat-cell {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid rgba(226, 232, 240, 0.6);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.18s var(--mfx-ease);
  cursor: default;
}
.mfx-stat-cell:last-child { border-right: none; }
.mfx-stat-cell:hover { background: rgba(0, 174, 239, 0.04); }

.mfx-stat-cell-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.mfx-stat-cell-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.025em;
  transition: color 0.18s var(--mfx-ease);
}
.mfx-stat-cell:hover .mfx-stat-cell-value { color: var(--primary); }

/* ════════════════════════════════════════════
   6. RANKING HEAD + SUBSEÇÕES
   ════════════════════════════════════════════ */
.mfx-ranking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 6px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  margin-top: 2px;
}
.mfx-ranking-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}

/* ════════════════════════════════════════════
   7. TABLES — métricas
   ════════════════════════════════════════════ */

/* Row hover com acento lateral */
.metrics-page--fluid .metrics-table tbody tr {
  transition: background 0.15s var(--mfx-ease);
  position: relative;
}
.metrics-page--fluid .metrics-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Ranking: medal scale no hover da row */
.metrics-page--fluid .metrics-table--ranking tbody tr {
  transition: background 0.15s var(--mfx-ease);
}
.metrics-page--fluid .metrics-table--ranking tbody tr:hover .metrics-rank {
  transform: scale(1.12);
}
.metrics-page--fluid .metrics-table--ranking tbody tr:hover .metrics-rank--1 {
  box-shadow: 0 3px 10px rgba(146, 64, 14, 0.3);
}
.metrics-page--fluid .metrics-table--ranking tbody tr:hover .metrics-rank--2 {
  box-shadow: 0 3px 10px rgba(71, 85, 105, 0.3);
}
.metrics-page--fluid .metrics-table--ranking tbody tr:hover .metrics-rank--3 {
  box-shadow: 0 3px 10px rgba(154, 52, 18, 0.3);
}
.metrics-page--fluid .metrics-rank {
  transition: transform 0.2s var(--mfx-spring), box-shadow 0.2s var(--mfx-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* CPA badge hover */
.metrics-page .metrics-cpa {
  transition: transform 0.15s var(--mfx-spring);
}
.metrics-page .metrics-table tbody tr:hover .metrics-cpa {
  transform: scale(1.05);
}

/* Footer total row */
.metrics-page--fluid .metrics-table tfoot .metrics-table-total td {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════
   8. ALERTAS + PROGRESSO
   ════════════════════════════════════════════ */
.metrics-page .metrics-alerta-item {
  transition: transform 0.18s var(--mfx-spring), box-shadow 0.2s var(--mfx-ease);
}
.metrics-page .metrics-alerta-item:hover {
  transform: translateX(3px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
}

/* Barra de progresso com shimmer animado */
.metrics-page .metrics-progresso-bar {
  border-radius: 99px;
  overflow: hidden;
  background: rgba(226, 232, 240, 0.7);
  height: 10px;
  flex: 1;
}
.metrics-page .metrics-progresso-fill {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-aqua) 100%);
  background-size: 200% 100%;
  animation: mfx-shimmer 2.5s ease infinite;
  transition: width 0.6s var(--mfx-ease);
}
@keyframes mfx-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ════════════════════════════════════════════
   9. METAS SUBSECTIONS
   ════════════════════════════════════════════ */
.mfx-metas-block {
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  padding-bottom: 4px;
}
.mfx-metas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px 6px;
}
.mfx-metas-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0;
}
.mfx-metas-context { font-size: 11px; color: var(--muted); }
.mfx-metas-inner { padding: 0 20px 16px; }

/* ════════════════════════════════════════════
   10. HEADER DA PÁGINA
   ════════════════════════════════════════════ */
.metrics-page .metrics-header.dashboard-header-card {
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(226, 232, 240, 0.75);
}

/* Token alert melhorado */
.metrics-page .metrics-token-alert {
  border-radius: 8px;
  font-size: 11.5px;
}

/* Tabs com transições */
.metrics-page .metrics-header-tabs .dashboard-tab {
  transition: color 0.18s var(--mfx-ease), background 0.18s var(--mfx-ease);
}

/* Badge conectado/desconectado */
.metrics-page .metrics-hero-badge {
  border-radius: 20px;
  font-size: 11px;
  padding: 3px 9px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

/* ════════════════════════════════════════════
   11. RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 960px) {
  .mfx-panels-grid { grid-template-columns: 1fr; }
  .mfx-analise-v2  { grid-template-columns: 1fr; }
  .mfx-analise-hero-panel {
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    padding: 22px 20px;
  }
  .mfx-analise-hero-value { font-size: 1.95rem; }
  .mfx-analise-tiles { flex-direction: column; }
  .mfx-analise-tile {
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  }
  .mfx-analise-tile:last-child { border-bottom: none; }
  .mfx-stats-strip { flex-wrap: wrap; }
  .mfx-stat-cell { flex: 1 1 45%; }
  .mfx-stat-cell:nth-child(even) { border-right: none; }
}

@media (max-width: 640px) {
  .mfx-kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mfx-kpi-strip .metrics-resumo-card-value { font-size: 1.4rem; }
  .mfx-kpi-strip .metrics-resumo-card-icon { width: 38px; height: 38px; }
  .mfx-analise-hero-value { font-size: 1.7rem; }
  .mfx-analise-tile-value { font-size: 1.15rem; }
  .mfx-stat-cell { flex: 1 1 100%; border-right: none; border-bottom: 1px solid rgba(226, 232, 240, 0.6); }
  .mfx-stat-cell:last-child { border-bottom: none; }
  .metrics-page .metrics-block-title { padding-left: 10px; }
}


/* ============================================================
   VENDEDOR DASHBOARD (.vnd-*)
   ============================================================ */

/* Page wrapper */
.vnd-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 48px;
}

/* Header */
.vnd-header { margin-bottom: 0; }
.vnd-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vnd-header-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.vnd-header-tabs { flex: 0 0 auto; }
.vnd-btn-vendas { flex-shrink: 0; }

/* ── ALERT PENDÊNCIA ────────────────────────────────────── */
.vnd-alert-pendencia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-md, 12px);
  color: #92400e;
  font-size: 14px;
  animation: dashFadeSlideUp 0.4s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.vnd-alert-pendencia-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 10px;
  color: #d97706;
}
.vnd-alert-pendencia-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vnd-alert-pendencia-hint {
  font-size: 12px;
  color: #b45309;
  opacity: 0.85;
}
.vnd-alert-pendencia-cta {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #f59e0b;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
.vnd-alert-pendencia-cta:hover {
  background: #d97706;
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .vnd-alert-pendencia {
    flex-direction: column;
    text-align: center;
    padding: 12px 14px;
    gap: 8px;
  }
  .vnd-alert-pendencia-cta { width: 100%; text-align: center; }
}

/* ── KPI STRIP ─────────────────────────────────────────── */
.vnd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.vnd-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-normal, 260ms) var(--ease-spring),
    box-shadow var(--duration-normal, 260ms) ease;
  box-shadow: var(--shadow-card-rest);
  animation: dashKpiEnter var(--duration-normal, 260ms) var(--ease-spring) both;
}
.vnd-kpi-card:nth-child(1) { animation-delay: 0ms; }
.vnd-kpi-card:nth-child(2) { animation-delay: 60ms; }
.vnd-kpi-card:nth-child(3) { animation-delay: 120ms; }

.vnd-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  opacity: 0.85;
}
.vnd-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Color variants */
.vnd-kpi-card--blue::before  { background: var(--primary, #00AEEF); }
.vnd-kpi-card--green::before { background: var(--accent-green, #34e780); }
.vnd-kpi-card--teal::before  { background: #0dbfa0; }
.vnd-kpi-card--meta::before  { background: #f59e0b; }
.vnd-kpi-card--meta-ok::before { background: var(--accent-green, #34e780); }
.vnd-kpi-card--purple::before { background: #8b5cf6; }
.vnd-kpi-card--slate::before  { background: #64748b; }

/* Icon ring */
.vnd-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,.04);
  color: var(--muted, #64748b);
  transition: background var(--duration-fast, 180ms) ease, transform var(--duration-fast, 180ms) var(--ease-spring);
}
.vnd-kpi-card:hover .vnd-kpi-icon {
  transform: scale(1.06);
}
.vnd-kpi-card--blue   .vnd-kpi-icon { background: rgba(0,174,239,.1);  color: var(--primary); }
.vnd-kpi-card--green  .vnd-kpi-icon { background: rgba(52,231,128,.12); color: #18a95c; }
.vnd-kpi-card--teal   .vnd-kpi-icon { background: rgba(13,191,160,.1);  color: #0dbfa0; }
.vnd-kpi-card--meta   .vnd-kpi-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.vnd-kpi-card--meta-ok .vnd-kpi-icon { background: rgba(52,231,128,.12); color: #18a95c; }
.vnd-kpi-card--purple .vnd-kpi-icon { background: rgba(139,92,246,.1);  color: #7c3aed; }
.vnd-kpi-card--slate  .vnd-kpi-icon { background: rgba(100,116,139,.08); color: #475569; }

.vnd-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.vnd-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnd-kpi-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text, #1e293b);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.vnd-kpi-value-denom {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted, #64748b);
}
.vnd-kpi-sub {
  font-size: 12px;
  color: var(--muted, #64748b);
  margin-top: 2px;
}

/* Meta card extras */
.vnd-kpi-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vnd-meta-badge-ok {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(52,231,128,.15);
  color: #16a34a;
  white-space: nowrap;
  animation: vnd-pop-in .3s var(--mfx-spring, cubic-bezier(0.34,1.4,.64,1)) both,
             vnd-badge-pulse 2.4s ease-in-out 0.5s infinite;
}
@keyframes vnd-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 231, 128, 0); }
  50% { box-shadow: 0 0 0 4px rgba(52, 231, 128, 0.18); }
}
@keyframes vnd-pop-in {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Progress bar */
.vnd-meta-bar {
  height: 8px;
  background: rgba(0,0,0,.06);
  border-radius: 99px;
  overflow: hidden;
  margin: 8px 0 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.vnd-meta-fill {
  height: 100%;
  width: 0;                /* começa em 0 — JS anima até o valor correto */
  border-radius: 99px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.vnd-meta-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation: vnd-shimmer 2.2s linear infinite;
}
@keyframes vnd-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.vnd-meta-fill--green  { background: linear-gradient(90deg, #22c55e, #16a34a); }
.vnd-meta-fill--yellow { background: linear-gradient(90deg, #f59e0b, #d97706); }
.vnd-meta-fill--red    { background: linear-gradient(90deg, #f87171, #ef4444); }


/* ── FILA DO DIA ─────────────────────────────────────────── */
.vnd-fila-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-rest);
  animation: dashFadeSlideUp var(--duration-slow, 360ms) var(--ease-spring) 80ms both;
}

.vnd-fila-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.012);
}
.vnd-fila-title-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}
.vnd-fila-icon { color: var(--muted, #64748b); display: flex; }
.vnd-fila-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1e293b);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vnd-fila-date {
  font-weight: 500;
  color: var(--muted, #64748b);
}
.vnd-fila-count {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(0,174,239,.1);
  color: var(--primary, #00AEEF);
  letter-spacing: .02em;
}

/* Empty state */
.vnd-fila-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 52px 24px;
  text-align: center;
  color: var(--muted, #64748b);
}
.vnd-fila-empty svg { opacity: .3; }
.vnd-fila-empty p { font-size: 14px; max-width: 340px; line-height: 1.5; margin: 0; }

/* List container */
.vnd-fila-list { display: flex; flex-direction: column; }

/* ── Card de venda ── */
@keyframes vnd-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vnd-fila-card {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition:
    background var(--duration-fast, 180ms) ease,
    box-shadow var(--duration-normal, 260ms) ease,
    transform var(--duration-fast, 180ms) var(--ease-spring);
  animation: vnd-card-in 0.3s ease both;
  border-left: 3px solid transparent;
}
.vnd-fila-card:last-child { border-bottom: none; }
.vnd-fila-card:hover {
  background: rgba(0,174,239,.025);
  box-shadow: inset 3px 0 0 rgba(0,174,239,.22), 0 2px 8px rgba(0, 0, 0, 0.03);
  transform: translateX(1px);
}
.vnd-fila-card--com-criativo {
  border-left-color: var(--primary, #00AEEF);
}
.vnd-fila-card--com-criativo:hover {
  box-shadow: inset 3px 0 0 var(--primary, #00AEEF), 0 2px 8px rgba(0, 174, 239, 0.06);
}

/* Topo do card: cliente + status */
.vnd-fila-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.vnd-fila-cliente-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vnd-fila-cliente {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1e293b);
  line-height: 1.2;
}
.vnd-fila-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vnd-fila-sep {
  color: var(--border, #e2e8f0);
  font-size: 12px;
  user-select: none;
}
.vnd-fila-tel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary, #00AEEF);
  text-decoration: none;
  font-weight: 500;
  transition: opacity .15s ease;
  white-space: nowrap;
}
.vnd-fila-tel:hover { opacity: .7; text-decoration: underline; }
.vnd-fila-extid {
  font-size: 11px;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  color: var(--muted, #64748b);
  background: rgba(0,0,0,.04);
  padding: 1px 7px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.vnd-fila-top-right { flex-shrink: 0; padding-top: 1px; }

/* Linha produto + valor */
.vnd-fila-produto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vnd-fila-produto {
  font-size: 13px;
  color: var(--muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.vnd-fila-valor {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #00AEEF);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Separador interno */
.vnd-fila-divider {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 0 -22px 14px;
  opacity: .6;
  transition: opacity var(--duration-fast, 180ms) ease;
}
.vnd-fila-card:hover .vnd-fila-divider {
  opacity: .35;
}

/* ── Criativo pills ── */
.vnd-crt-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vnd-crt-area-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #64748b);
  white-space: nowrap;
  flex-shrink: 0;
}
.vnd-crt-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vnd-crt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--border, #e2e8f0);
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
  transition:
    background   0.15s ease,
    border-color 0.15s ease,
    color        0.15s ease,
    transform    0.12s var(--mfx-spring, cubic-bezier(0.34,1.4,.64,1)),
    box-shadow   0.15s ease;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}
.vnd-crt-pill:hover {
  border-color: #94a3b8;
  background: rgba(0,0,0,.04);
  color: var(--text, #1e293b);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.vnd-crt-pill:active {
  transform: scale(.96);
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
}

/* Pill "Nenhum" ativo */
.vnd-crt-pill--none.vnd-crt-pill--active {
  background: rgba(100,116,139,.1);
  border-color: rgba(100,116,139,.3);
  color: #475569;
}

/* Pill com criativo selecionado */
.vnd-crt-pill--active:not(.vnd-crt-pill--none) {
  background: rgba(0,174,239,.1);
  border-color: var(--primary, #00AEEF);
  color: var(--primary, #00AEEF);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(0,174,239,.08);
  animation: vnd-pop-in .25s var(--mfx-spring, cubic-bezier(0.34,1.4,.64,1)) both;
}

/* Feedback "salvando" */
.vnd-crt-pill--saving {
  opacity: .65;
  pointer-events: none;
}

/* Form escondido (acessibilidade) */
.vnd-crt-form {
  display: none;
  visibility: hidden;
}


/* ── Número pill variant (teal accent) */
.vnd-crt-pill--num {
  border-color: rgba(20, 184, 166, .35);
  color: #0d9488;
}
.vnd-crt-pill--num:hover {
  border-color: #14b8a6;
  background: rgba(20, 184, 166, .08);
  box-shadow: 0 2px 6px rgba(20, 184, 166, 0.12);
  color: #0d9488;
}
.vnd-crt-pill--num.vnd-crt-pill--active:not(.vnd-crt-pill--none) {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-color: transparent;
  color: #fff;
}

/* Assign stack: criativo em cima, número abaixo */
.vnd-assign-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vnd-assign-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── SIDEBAR ROLE BADGE ─────────────────────────────────── */
.sidebar-user-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sidebar-role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  line-height: 1.3;
  white-space: nowrap;
}
.sidebar-role-badge--produtor {
  background: rgba(0, 174, 239, .15);
  color: #00AEEF;
  border: 1px solid rgba(0, 174, 239, .3);
}
.sidebar-role-badge--afiliado {
  background: rgba(139, 92, 246, .15);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, .3);
}
.sidebar-role-badge--vendedor {
  background: rgba(52, 211, 153, .15);
  color: #059669;
  border: 1px solid rgba(52, 211, 153, .3);
}
.sidebar-role-badge--cobrador {
  background: rgba(251, 146, 60, .15);
  color: #ea580c;
  border: 1px solid rgba(251, 146, 60, .3);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .vnd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .vnd-header-inner { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 640px) {
  .vnd-kpi-strip { grid-template-columns: 1fr; gap: 10px; }
  .vnd-kpi-card { padding: 14px 16px; }
  .vnd-kpi-value { font-size: 1.3rem; }
  .vnd-fila-card { padding: 12px 14px; }
  .vnd-fila-row-bot { flex-direction: column; align-items: flex-start; }
  .vnd-fila-criativo-wrap { width: 100%; }
  .vnd-fila-select { width: 100%; min-width: 0; }
  .vnd-fila-produto { max-width: 100%; }
}

@media (max-width: 480px) {
  .vnd-fila-card { padding: 10px 12px; }
  .vnd-fila-header { padding: 12px 14px; }
  .vnd-crt-pill { padding: 4px 10px; font-size: 11px; }
}


/* ══════════════════════════════════════════════════════════
   REALTIME ANIMATIONS  (.fluydon-value-*, .fluydon-page-*, .fluydon-fila-card-enter)
   ══════════════════════════════════════════════════════════ */

/* KPI value highlight during update */
.fluydon-value-updating {
  transition: color 0.2s ease, transform 0.2s ease;
  color: var(--primary, #00aeef) !important;
  transform: scale(1.05);
  display: inline-block;
}

/* Pulse ring after value lands */
.fluydon-value-updated {
  animation: fluydon-kpi-pulse 0.65s ease-out both;
}
@keyframes fluydon-kpi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,174,239,0.30); }
  60%  { box-shadow: 0 0 0 6px rgba(0,174,239,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,174,239,0); }
}

/* Fade-out before acompanhamento reload */
.fluydon-page-fade-out {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.25s ease-out !important;
}

/* New fila card slide-in */
.fluydon-fila-card-enter {
  animation: fluydon-slide-in 0.35s ease-out both;
}
@keyframes fluydon-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cards condicionais (CPA/Ticket) com entrada/saída suave no realtime */
.dashboard-kpi-conditional {
  transition: opacity 0.26s ease, transform 0.26s ease, max-height 0.26s ease, margin 0.26s ease, padding 0.26s ease;
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
}
.dashboard-kpi-conditional.is-hidden {
  display: none;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

/* Fila: banner de alerta para criativos não configurados */
.vnd-fila-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: #92400e;
  line-height: 1.45;
}
[data-theme="dark"] .vnd-fila-alert {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}
.vnd-fila-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
  stroke: currentColor;
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════
   CHANGELOG PAGE  (.chg-*)
   ══════════════════════════════════════════════════════════ */

.chg-page {
  max-width: 780px;
  margin: 0 auto;
}

/* ── Header ── */
.chg-header .dashboard-header-inner {
  align-items: center;
}
.chg-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 174, 239, .4);
  background: rgba(0, 174, 239, .06);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.chg-publish-btn:hover,
.chg-publish-btn--active {
  background: rgba(0, 174, 239, .14);
  border-color: var(--primary);
}

/* ── Add panel ── */
.chg-add-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 16px 0;
  overflow: hidden;
  transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.chg-add-form { display: flex; flex-direction: column; gap: 0; }
.chg-add-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.chg-add-field { display: flex; flex-direction: column; gap: 5px; }
.chg-add-field--sm { flex: 0 0 120px; }
.chg-add-field--lg { flex: 1; min-width: 180px; }
.chg-field-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.chg-field-hint {
  font-size: .68rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.chg-field-hint code {
  background: rgba(0,174,239,.1);
  color: var(--primary);
  padding: 0 4px;
  border-radius: 4px;
  font-size: .7rem;
}
.chg-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
  outline: none;
}
.chg-input:focus { border-color: var(--primary); }
.chg-textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .82rem;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
  transition: border-color .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.chg-textarea:focus { border-color: var(--primary); }
.chg-error {
  color: #ef4444;
  font-size: .8rem;
  margin: 6px 0 0;
}
.chg-add-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.chg-cancel-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .82rem;
  cursor: pointer;
  padding: 4px 2px;
}
.chg-cancel-btn:hover { color: var(--text); }

/* ── Entry list ── */
.chg-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.chg-entry {
  border-left: 3px solid var(--border);
  padding: 22px 24px;
  margin-left: 6px;
  position: relative;
  transition: border-left-color .2s;
}
.chg-entry::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--surface, #fff);
  transition: background .2s;
}
.chg-entry--latest {
  border-left-color: var(--primary);
}
.chg-entry--latest::before {
  background: var(--primary);
}
.chg-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.chg-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chg-versao {
  font-family: monospace;
  font-size: .88rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(0, 174, 239, .1);
  padding: 2px 8px;
  border-radius: 6px;
}
.chg-badge-new {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--primary);
  color: #fff;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  animation: chg-pulse 2s ease-in-out infinite;
}
@keyframes chg-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}
.chg-entry-titulo {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
.chg-entry-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.chg-entry-data {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}
.chg-inline-form { display: inline; }
.chg-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  line-height: 0;
}
.chg-delete-btn:hover { color: #ef4444; background: rgba(239,68,68,.08); }

/* ── Items list ── */
.chg-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chg-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}
.chg-bullet {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--border);
}
.chg-item--destaque {
  color: var(--text);
  font-weight: 500;
}
.chg-item--destaque svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}

/* ── Empty state ── */
.chg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--muted);
  text-align: center;
}
.chg-empty svg { opacity: .3; }
.chg-empty p { margin: 0; font-size: .9rem; }
.chg-empty-hint { font-size: .82rem !important; }

/* ── Sidebar changelog link ── */
.sidebar-changelog-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin: 8px 0 0;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s, color .15s;
  position: relative;
}
.sidebar-changelog-link:hover,
.sidebar-changelog-link.active {
  background: rgba(0, 174, 239, .08);
  color: var(--primary);
}
.sidebar-changelog-link svg {
  flex-shrink: 0;
  opacity: .7;
}
.sidebar-changelog-link:hover svg,
.sidebar-changelog-link.active svg { opacity: 1; }
.sidebar-changelog-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: chg-dot-ping 1.8s ease-in-out infinite;
}
@keyframes chg-dot-ping {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
  70%  { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .chg-entry { padding: 16px 16px; }
  .chg-add-fields { flex-direction: column; }
  .chg-add-field--sm,
  .chg-add-field--lg { flex: unset; width: 100%; }
}


/* ============================================================
   DASHBOARD REDESIGN v3 — Upgraded Header, 5-col KPIs
   ============================================================ */

/* ── 1. Header: upgraded single-row ── */
.dashboard-header-card--compact {
  padding: 10px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 174, 239, 0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(240,249,255,0.88) 100%);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 174, 239, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.dashboard-header-card--compact .dashboard-header-inner {
  gap: 10px 16px;
}

.dashboard-header-card--compact .dashboard-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(0,174,239,0.14), rgba(0,212,255,0.08));
  box-shadow: 0 2px 6px rgba(0,174,239,0.15);
}

.dashboard-header-card--compact .dashboard-header-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.dashboard-header-card--compact .dashboard-header-date {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0,174,239,0.08);
  font-weight: 600;
}

.dashboard-header-card--compact .dashboard-escopo-opt {
  padding: 5px 12px;
  font-size: 11.5px;
  border-radius: 8px;
  font-weight: 600;
}

.dashboard-header-card--compact .dashboard-tabs {
  background: none;
  padding: 0;
  border: none;
}

.dashboard-header-card--compact .dashboard-tab {
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  margin-left: -1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dashboard-header-card--compact .dashboard-tab:first-child {
  margin-left: 0;
  border-radius: 10px 0 0 10px;
}

.dashboard-header-card--compact .dashboard-tab:last-child {
  border-radius: 0 10px 10px 0;
}

.dashboard-header-card--compact .dashboard-tab:hover {
  background: #e2e8f0;
  transform: scale(1.02);
}

.dashboard-header-card--compact .dashboard-tab--active {
  color: #fff;
  background: linear-gradient(180deg, #00AEEF 0%, #0099d6 100%);
  border-color: #0099d6;
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.4);
  z-index: 1;
  border: none;
}

.dashboard-header-card--compact .dashboard-date-field {
  padding: 4px 8px;
  border-radius: 8px;
}

.dashboard-header-card--compact .dashboard-date-input {
  font-size: 11px;
  min-width: 80px;
}

.dashboard-header-card--compact .dashboard-date-ok {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 8px;
}

.dashboard-header-card--compact .dashboard-btn-ver-vendas {
  padding: 6px 14px;
  font-size: 11.5px;
  border-radius: 8px;
  font-weight: 700;
}

/* ── 2. KPI cards v3: modern glassmorphism, 5 in a row ── */
.dashboard-kpis-wrap--v3 {
  margin-bottom: 14px;
}

.dashboard-kpis--row5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 !important;
}

/* ── Card base: glassmorphism + gradient stripe ── */
.dashboard-kpis--row5 .dashboard-kpi {
  position: relative;
  padding: 14px 14px 12px;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.5);
  border-left: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 4px 16px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(.34,1.56,.64,1),
    box-shadow 0.28s ease,
    border-color 0.2s ease;
}

/* Top gradient stripe per color */
.dashboard-kpis--row5 .dashboard-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  opacity: 0.85;
  transition: opacity 0.2s ease, height 0.28s ease;
}

.dashboard-kpis--row5 .dashboard-kpi:hover::before {
  height: 4px;
  opacity: 1;
}

.dashboard-kpis--row5 .dashboard-kpi.border-blue::before  { background: linear-gradient(90deg, #00AEEF, #00D4FF); }
.dashboard-kpis--row5 .dashboard-kpi.border-green::before { background: linear-gradient(90deg, #22c55e, #34e780); }
.dashboard-kpis--row5 .dashboard-kpi.border-amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dashboard-kpis--row5 .dashboard-kpi.border-slate::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }

/* Subtle color tint in card background */
.dashboard-kpis--row5 .dashboard-kpi.border-blue  { background: linear-gradient(160deg, rgba(0,174,239,0.06) 0%, rgba(255,255,255,0.7) 40%); }
.dashboard-kpis--row5 .dashboard-kpi.border-green { background: linear-gradient(160deg, rgba(52,231,128,0.06) 0%, rgba(255,255,255,0.7) 40%); }
.dashboard-kpis--row5 .dashboard-kpi.border-amber { background: linear-gradient(160deg, rgba(245,158,11,0.06) 0%, rgba(255,255,255,0.7) 40%); }
.dashboard-kpis--row5 .dashboard-kpi.border-slate { background: linear-gradient(160deg, rgba(148,163,184,0.05) 0%, rgba(255,255,255,0.7) 40%); }

/* Hover: lift + colored glow */
.dashboard-kpis--row5 .dashboard-kpi:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.6);
}

.dashboard-kpis--row5 .dashboard-kpi.border-blue:hover  { box-shadow: 0 8px 24px rgba(0,174,239,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }
.dashboard-kpis--row5 .dashboard-kpi.border-green:hover { box-shadow: 0 8px 24px rgba(52,231,128,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }
.dashboard-kpis--row5 .dashboard-kpi.border-amber:hover { box-shadow: 0 8px 24px rgba(245,158,11,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }
.dashboard-kpis--row5 .dashboard-kpi.border-slate:hover { box-shadow: 0 8px 24px rgba(148,163,184,0.14), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9); }

/* ── Icon bubble ── */
.dashboard-kpi-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.dashboard-kpi-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.dashboard-kpi:hover .dashboard-kpi-ico {
  transform: scale(1.15) rotate(-3deg);
}

.dashboard-kpi-ico--blue {
  background: linear-gradient(135deg, rgba(0,174,239,0.18), rgba(0,212,255,0.1));
  color: var(--primary);
}
.dashboard-kpi-ico--green {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(52,231,128,0.1));
  color: var(--fluydon-green);
}
.dashboard-kpi-ico--amber {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(251,191,36,0.1));
  color: var(--fluydon-amber);
}
.dashboard-kpi-ico--slate {
  background: linear-gradient(135deg, rgba(100,116,139,0.14), rgba(148,163,184,0.08));
  color: var(--fluydon-slate);
}

.dashboard-kpi:hover .dashboard-kpi-ico--blue  { box-shadow: 0 3px 10px rgba(0,174,239,0.25); }
.dashboard-kpi:hover .dashboard-kpi-ico--green { box-shadow: 0 3px 10px rgba(52,231,128,0.25); }
.dashboard-kpi:hover .dashboard-kpi-ico--amber { box-shadow: 0 3px 10px rgba(245,158,11,0.25); }
.dashboard-kpi:hover .dashboard-kpi-ico--slate { box-shadow: 0 3px 10px rgba(148,163,184,0.2); }

/* ── Typography ── */
.dashboard-kpis--row5 .dashboard-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.8;
}

.dashboard-kpis--row5 .dashboard-kpi-value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.dashboard-kpis--row5 .dashboard-kpi-sub {
  font-size: 10.5px;
  margin-top: 1px;
}

/* ── Percentage badges ── */
.dashboard-kpis--row5 .dashboard-pct {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: -0.01em;
}
.dashboard-kpis--row5 .dashboard-pct--up {
  background: rgba(34,197,94,0.1);
}
.dashboard-kpis--row5 .dashboard-pct--down {
  background: rgba(239,68,68,0.08);
}

/* ── Entry animation ── */
@keyframes kpiSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dashboard-kpis--row5 .dashboard-kpi {
  animation: kpiSlideUp 0.35s cubic-bezier(.34,1.56,.64,1) both;
}
.dashboard-kpis--row5 .dashboard-kpi:nth-child(1) { animation-delay: 0ms; }
.dashboard-kpis--row5 .dashboard-kpi:nth-child(2) { animation-delay: 50ms; }
.dashboard-kpis--row5 .dashboard-kpi:nth-child(3) { animation-delay: 100ms; }
.dashboard-kpis--row5 .dashboard-kpi:nth-child(4) { animation-delay: 150ms; }
.dashboard-kpis--row5 .dashboard-kpi:nth-child(5) { animation-delay: 200ms; }

/* ── 3. Sidebar refinements ── */
.sidebar-nav {
  gap: 3px;
  padding: 0 5px;
}

.sidebar-link {
  padding: 10px 12px;
  border-radius: 12px;
  gap: 11px;
  transition:
    background 0.22s var(--ease-smooth),
    color 0.22s var(--ease-smooth),
    box-shadow 0.22s var(--ease-smooth),
    transform 0.18s var(--ease-smooth);
}

.sidebar-link:hover {
  background: rgba(0, 174, 239, 0.06);
  color: var(--primary);
  transform: translateX(2px);
}

.sidebar-link.active {
  transform: none;
}

.sidebar-nav-group-title {
  margin: 20px 0 8px;
  padding: 0 12px;
  font-size: 10px;
  opacity: 0.6;
}

.sidebar-nav-group-title::after {
  background: linear-gradient(90deg, var(--sidebar-border) 0%, transparent 100%);
}

.sidebar-footer {
  padding-top: 10px;
  border-top: 1px solid var(--sidebar-border);
  margin-top: auto;
}

.sidebar-user-card {
  padding: 10px;
  gap: 10px;
}

.sidebar-user-actions {
  padding: 6px 4px 4px;
  gap: 2px;
}

/* ── 4. Performance panel head refinements ── */
.dashboard-panel-head--compact {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.dashboard-panel-head--compact .dashboard-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Panel icons already styled at ~line 8837 (vendedores) and ~line 8974 (cobradores) */

/* ── 5. Sales table summary refinement ── */
.dashboard-sales-summary {
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.04) 0%, rgba(52, 231, 128, 0.03) 100%);
  border-bottom: 1px solid rgba(0, 174, 239, 0.08);
  padding: 14px 18px;
  transition:
    background 0.22s var(--ease-smooth),
    box-shadow 0.22s var(--ease-smooth);
}

.dashboard-sales-summary:hover {
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.07) 0%, rgba(52, 231, 128, 0.05) 100%);
}

.dashboard-sales-summary-number {
  font-family: "JetBrains Mono", "Inter", monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Dashboard table card refinement ── */
.dashboard-sales-card {
  border-radius: 16px;
  overflow: hidden;
}

/* ── Responsive: KPI 5-col breakpoints ── */
@media (max-width: 1100px) {
  .dashboard-kpis--row5 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
@media (max-width: 768px) {
  .dashboard-header-card--compact {
    padding: 10px 12px;
  }
  .dashboard-kpis--row5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .dashboard-kpis--row5 .dashboard-kpi-value {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .dashboard-kpis--row5 {
    grid-template-columns: 1fr;
  }
}

/* ========== Config Page – Glassmorphism Upgrade (cfg2-*) ========== */

/* -- Keyframes (reuse vdCardEnter/vdSlideDown already defined above) -- */

/* -- Layout -- */
.cfg2-animated {
  gap: 0;
}

/* -- Page Header (consistent across all config sub-pages) -- */
.cfg2-page-header {
  margin-bottom: 24px;
  animation: vdCardEnter 0.3s cubic-bezier(.34,1.56,.64,1) both;
}
.cfg2-page-header .fluydon-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cfg2-page-header .fluydon-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0,174,239,0.14), rgba(0,212,255,0.08));
  border: 1px solid rgba(0,174,239,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.cfg2-page-header .fluydon-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.cfg2-page-header .fluydon-header-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* -- Section Group Label -- */
.cfg2-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.cfg2-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(148,163,184,0.2), transparent);
}
.cfg2-group-label:first-child {
  margin-top: 0;
}
.cfg2-group-label svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

/* -- Consolidated Settings Card (grouped inline fields like operação params) -- */
.cfg2-settings-card {
  position: relative;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  animation: vdCardEnter 0.35s cubic-bezier(.34,1.56,.64,1) both;
}
.cfg2-settings-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00AEEF, #00D4FF);
  border-radius: 12px 12px 0 0;
  opacity: 0.85;
}
.cfg2-settings-card-head {
  padding: 16px 20px 0;
}
.cfg2-settings-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.cfg2-settings-card-desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.cfg2-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}
.cfg2-settings-field {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg2-settings-field:last-child {
  border-bottom: none;
}
.cfg2-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cfg2-field-label svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  opacity: 0.6;
}
.cfg2-field-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}
.cfg2-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 640px) {
  .cfg2-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* -- Section Spacing in cfg-page -- */
.cfg2-animated .cfg-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cfg2-animated .cfg-page > .et-metas-defaults {
  gap: 12px;
}

/* -- Compound section (multiple sub-sections in one card) -- */
.cfg2-compound-section > .et-section {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.cfg2-compound-section > .et-section::before {
  display: none;
}
.cfg2-compound-section > .et-section:hover {
  transform: none;
  box-shadow: none;
}
.cfg2-compound-section > .et-section + .et-section {
  border-top: 1px solid rgba(148,163,184,0.12);
}
/* Override glassmorphism styles on nested sections inside compound */
.cfg2-animated .cfg2-compound-section > .et-section {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  animation: none;
}
.cfg2-animated .cfg2-compound-section > .et-section::before {
  display: none;
}
.cfg2-animated .cfg2-compound-section > .et-section:hover {
  transform: none;
  box-shadow: none;
}
.cfg2-animated .cfg2-compound-section > .et-section + .et-section {
  border-top: 1px solid rgba(148,163,184,0.12);
}

/* Compound section wrapper: the outer card has the glassmorphism */
.cfg2-compound {
  position: relative;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease, border-color 0.2s ease;
  animation: vdCardEnter 0.35s cubic-bezier(.34,1.56,.64,1) both;
}
.cfg2-compound::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00AEEF, #00D4FF);
  border-radius: 12px 12px 0 0;
  opacity: 0.85;
}
.cfg2-compound:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,174,239,0.1), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* -- Profile page header -- */
.cfg2-animated .et-profile-page {
  animation: vdCardEnter 0.35s cubic-bezier(.34,1.56,.64,1) both;
}

/* -- Nav Sidebar – Glassmorphism + Stripe -- */
.cfg2-animated .cfg-nav-wrap {
  position: relative;
  margin-bottom: 24px;
}
.cfg2-animated .cfg-nav {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  border-radius: 14px;
  border-left: 3px solid var(--primary);
  padding: 5px 6px;
}

/* Nav items – hover/active */
.cfg2-animated .cfg-nav-item {
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.cfg2-animated .cfg-nav-item:hover {
  background: rgba(0,174,239,0.06);
  color: var(--text);
  transform: translateX(2px);
}
.cfg2-animated .cfg-nav-item.active {
  background: rgba(0,174,239,0.1);
  border-left: 3px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0,174,239,0.14);
}

/* Nav icon gradient bubble */
.cfg2-animated .cfg-nav-item .cfg-nav-icon {
  padding: 3px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(0,174,239,0.1), rgba(0,212,255,0.06));
  transition: stroke 0.18s ease, background 0.18s ease;
}
.cfg2-animated .cfg-nav-item.active .cfg-nav-icon {
  background: linear-gradient(135deg, rgba(0,174,239,0.18), rgba(0,212,255,0.1));
  stroke: var(--primary);
}

/* Nav items – staggered entrance */
.cfg2-animated .cfg-nav-item {
  animation: vdCardEnter 0.3s cubic-bezier(.34,1.56,.64,1) both;
}
.cfg2-animated .cfg-nav-item:nth-child(1) { animation-delay: 0ms; }
.cfg2-animated .cfg-nav-item:nth-child(2) { animation-delay: 60ms; }
.cfg2-animated .cfg-nav-item:nth-child(3) { animation-delay: 120ms; }
.cfg2-animated .cfg-nav-item:nth-child(4) { animation-delay: 180ms; }
.cfg2-animated .cfg-nav-item:nth-child(5) { animation-delay: 240ms; }
.cfg2-animated .cfg-nav-item:nth-child(6) { animation-delay: 300ms; }

/* -- Config Panel – Entrance -- */
.cfg2-animated .config-panel {
  animation: vdCardEnter 0.4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: 150ms;
}

/* -- Messages/Alerts – Glassmorphism -- */
.cfg2-animated .settings-alert.success {
  background: rgba(240,253,244,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(134,239,172,0.5);
  color: #15803d;
  box-shadow: 0 1px 8px rgba(34,197,94,0.08);
}
.cfg2-animated .settings-alert.error {
  background: rgba(254,242,242,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(254,202,202,0.5);
  color: #b91c1c;
  box-shadow: 0 1px 8px rgba(239,68,68,0.08);
}

/* -- Sections (et-section) – Glassmorphism Card + Stripe + Hover Lift -- */
.cfg2-animated .et-section {
  position: relative;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease, border-color 0.2s ease;
  animation: vdCardEnter 0.35s cubic-bezier(.34,1.56,.64,1) both;
}

/* Top stripe */
.cfg2-animated .et-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00AEEF, #00D4FF);
  border-radius: 12px 12px 0 0;
  opacity: 0.85;
  transition: opacity 0.2s ease, height 0.28s ease;
}

/* Hover lift (subtle -2px, not -4px like vd-card) */
.cfg2-animated .et-section:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 6px 20px rgba(0,174,239,0.1), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
}
.cfg2-animated .et-section:hover::before {
  height: 4px;
  opacity: 1;
}

/* Staggered entrance for sections */
.cfg2-animated .et-section:nth-child(1) { animation-delay: 60ms; }
.cfg2-animated .et-section:nth-child(2) { animation-delay: 120ms; }
.cfg2-animated .et-section:nth-child(3) { animation-delay: 180ms; }
.cfg2-animated .et-section:nth-child(4) { animation-delay: 240ms; }
.cfg2-animated .et-section:nth-child(5) { animation-delay: 300ms; }
.cfg2-animated .et-section:nth-child(6) { animation-delay: 360ms; }

/* -- Section Headers – Subtle border -- */
.cfg2-animated .et-section-head {
  border-bottom: 1px solid rgba(148,163,184,0.15);
}

/* Count badge – gradient bubble */
.cfg2-animated .et-count {
  background: linear-gradient(135deg, rgba(0,174,239,0.15), rgba(0,212,255,0.08));
  color: var(--primary);
  font-weight: 700;
}

/* -- Tables – Glassmorphism Header + Row Hover -- */
.cfg2-animated .et-table thead th {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 1px solid rgba(148,163,184,0.15);
}
.cfg2-animated .et-row {
  transition: background 0.15s ease;
}
.cfg2-animated .et-row:hover td {
  background: rgba(0,174,239,0.03);
}
.cfg2-animated .et-row--inactive {
  opacity: 0.6;
}

/* -- Add Panel – Glassmorphism when open -- */
.cfg2-animated .et-add-panel:not([hidden]) {
  background: rgba(248,250,252,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* -- Buttons – Hover enhancements -- */
.cfg2-animated .et-add-btn:hover {
  transform: scale(1.03);
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,174,239,0.06);
  box-shadow: 0 2px 8px rgba(0,174,239,0.1);
}

.cfg2-animated .et-ghost-btn {
  transition: all 0.18s ease;
}

/* -- Inputs – Focus glow -- */
.cfg2-animated .et-input:focus {
  box-shadow: 0 0 0 3px rgba(0,174,239,0.1);
  border-color: rgba(0,174,239,0.5);
}

/* -- Sub-tabs – Glassmorphism Pill -- */
.cfg2-animated .config-subtabs {
  background: rgba(241,245,249,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: 14px;
  padding: 4px;
}
.cfg2-animated .config-subtab {
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border-radius: 10px;
}
.cfg2-animated .config-subtab.active {
  color: var(--primary);
  background: #fff;
  border-color: rgba(0,174,239,0.18);
  box-shadow: 0 1px 6px rgba(0,174,239,0.1), 0 1px 3px rgba(0,0,0,0.04);
  font-weight: 600;
}

/* -- Reduced Motion -- */
@media (prefers-reduced-motion: reduce) {
  .cfg2-animated .cfg-nav-item,
  .cfg2-animated .config-panel,
  .cfg2-animated .et-section {
    animation: none !important;
  }
  .cfg2-animated .cfg-nav-item:hover,
  .cfg2-animated .et-section:hover,
  .cfg2-animated .et-add-btn:hover {
    transform: none !important;
  }
}

/* -- Responsive -- */
@media (max-width: 640px) {
  .cfg2-animated .cfg-nav {
    border-left: none;
    border-top: 3px solid var(--primary);
    border-radius: 12px;
  }
  .cfg2-animated .et-section {
    border-radius: 10px;
  }
  .cfg2-animated .config-subtabs {
    border-radius: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CFG3 — Settings Page Redesign (sidebar + content split layout)
   ═══════════════════════════════════════════════════════════════════════ */

/* -- Layout Grid: sidebar 220px + fluid content -- */
.cfg3-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: calc(100vh - 80px);
  align-items: start;
}

/* -- Sidebar -- */
.cfg3-sidebar {
  position: sticky;
  top: 16px;
  padding: 0 8px 24px 0;
  animation: cfg3FadeIn 0.3s ease both;
}

.cfg3-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 12px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cfg3-sidebar-header svg {
  color: var(--primary);
  opacity: 0.7;
  flex-shrink: 0;
}

/* -- Nav (vertical list) -- */
.cfg3-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cfg3-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  position: relative;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cfg3-nav-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: opacity 0.15s ease, stroke 0.15s ease;
}

.cfg3-nav-item:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}
.cfg3-nav-item:hover .cfg3-nav-icon {
  opacity: 0.75;
}

/* Active state — left accent bar + tinted background */
.cfg3-nav-item.active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(0, 174, 239, 0.06);
  border-color: rgba(0, 174, 239, 0.08);
}
.cfg3-nav-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.cfg3-nav-item.active .cfg3-nav-icon {
  opacity: 1;
  stroke: var(--primary);
}

/* Staggered entrance */
.cfg3-animated .cfg3-nav-item {
  animation: cfg3SlideRight 0.25s ease both;
}
.cfg3-animated .cfg3-nav-item:nth-child(1) { animation-delay: 30ms; }
.cfg3-animated .cfg3-nav-item:nth-child(2) { animation-delay: 60ms; }
.cfg3-animated .cfg3-nav-item:nth-child(3) { animation-delay: 90ms; }
.cfg3-animated .cfg3-nav-item:nth-child(4) { animation-delay: 120ms; }
.cfg3-animated .cfg3-nav-item:nth-child(5) { animation-delay: 150ms; }
.cfg3-animated .cfg3-nav-item:nth-child(6) { animation-delay: 180ms; }

/* -- Content Area -- */
.cfg3-content {
  min-width: 0;
  padding: 0 0 48px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 32px;
  animation: cfg3FadeUp 0.35s ease both;
  animation-delay: 80ms;
}

/* -- Messages / Alerts -- */
.cfg3-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.cfg3-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  animation: cfg3FadeUp 0.25s ease both;
}
.cfg3-alert svg {
  flex-shrink: 0;
}
.cfg3-alert--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #15803d;
}
.cfg3-alert--success svg { stroke: #22c55e; }
.cfg3-alert--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}
.cfg3-alert--error svg { stroke: #ef4444; }

/* -- Page Header (reuse inside cfg3) -- */
.cfg3-content .cfg2-page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  animation: cfg3FadeUp 0.3s ease both;
}
.cfg3-content .cfg2-page-header .fluydon-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cfg3-content .cfg2-page-header .fluydon-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,174,239,0.1), rgba(0,212,255,0.06));
  border: 1px solid rgba(0,174,239,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cfg3-content .cfg2-page-header .fluydon-header-icon svg {
  stroke: var(--primary);
}
.cfg3-content .cfg2-page-header .fluydon-header-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.cfg3-content .cfg2-page-header .fluydon-header-subtitle {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* -- Section Cards (et-section) inside cfg3 -- */
.cfg3-content .cfg-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cfg3-content .cfg-page > .et-metas-defaults {
  gap: 16px;
}

.cfg3-animated .cfg3-content .et-section {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  animation: cfg3FadeUp 0.3s ease both;
}

/* Remove the old top stripe — use a subtler left accent on hover */
.cfg3-animated .cfg3-content .et-section::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cfg3-animated .cfg3-content .et-section:hover {
  border-color: rgba(0, 174, 239, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 174, 239, 0.06);
  transform: none;
}
.cfg3-animated .cfg3-content .et-section:hover::before {
  opacity: 0.6;
  height: auto;
}

/* Staggered entrance for content cards */
.cfg3-animated .cfg3-content .et-section:nth-child(1) { animation-delay: 120ms; }
.cfg3-animated .cfg3-content .et-section:nth-child(2) { animation-delay: 180ms; }
.cfg3-animated .cfg3-content .et-section:nth-child(3) { animation-delay: 240ms; }
.cfg3-animated .cfg3-content .et-section:nth-child(4) { animation-delay: 300ms; }
.cfg3-animated .cfg3-content .et-section:nth-child(5) { animation-delay: 360ms; }
.cfg3-animated .cfg3-content .et-section:nth-child(6) { animation-delay: 420ms; }

/* -- Section Header -- */
.cfg3-animated .cfg3-content .et-section-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* -- Count badge -- */
.cfg3-animated .cfg3-content .et-count {
  background: rgba(0, 174, 239, 0.1);
  color: var(--primary);
  font-weight: 700;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 99px;
}

/* -- Tables -- */
.cfg3-animated .cfg3-content .et-table thead th {
  background: rgba(248, 250, 252, 0.8);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.cfg3-animated .cfg3-content .et-row {
  transition: background 0.12s ease;
}
.cfg3-animated .cfg3-content .et-row:hover td {
  background: rgba(0, 174, 239, 0.025);
}
.cfg3-animated .cfg3-content .et-row--inactive {
  opacity: 0.55;
}

/* -- Settings Card (cfg2-settings-card) inside cfg3 -- */
.cfg3-animated .cfg3-content .cfg2-settings-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: cfg3FadeUp 0.3s ease both;
}
.cfg3-animated .cfg3-content .cfg2-settings-card::before {
  display: none;
}

/* -- Compound card inside cfg3 -- */
.cfg3-animated .cfg3-content .cfg2-compound {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: cfg3FadeUp 0.3s ease both;
}
.cfg3-animated .cfg3-content .cfg2-compound::before {
  display: none;
}
.cfg3-animated .cfg3-content .cfg2-compound:hover {
  transform: none;
  border-color: rgba(0, 174, 239, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* -- Add panel -- */
.cfg3-animated .cfg3-content .et-add-panel:not([hidden]) {
  background: rgba(248, 250, 252, 0.7);
}

/* -- Buttons -- */
.cfg3-animated .cfg3-content .et-add-btn:hover {
  transform: none;
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0, 174, 239, 0.06);
  box-shadow: 0 1px 4px rgba(0, 174, 239, 0.1);
}
.cfg3-animated .cfg3-content .et-ghost-btn {
  transition: all 0.15s ease;
}

/* -- Inputs -- */
.cfg3-animated .cfg3-content .et-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
  border-color: rgba(0, 174, 239, 0.4);
}

/* -- Sub-tabs (Equipe: Vendedores/Cobradores/Afiliados) -- */
.cfg3-animated .cfg3-content .config-subtabs {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 3px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cfg3-animated .cfg3-content .config-subtab {
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cfg3-animated .cfg3-content .config-subtab.active {
  color: var(--primary);
  background: var(--surface);
  border-color: rgba(0, 174, 239, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

/* -- Profile page inside cfg3 -- */
.cfg3-animated .cfg3-content .et-profile-page {
  animation: cfg3FadeUp 0.3s ease both;
}
.cfg3-animated .cfg3-content .et-profile-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* ── Animations ── */
@keyframes cfg3FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cfg3FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cfg3SlideRight {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .cfg3-animated .cfg3-nav-item,
  .cfg3-animated .cfg3-content,
  .cfg3-animated .cfg3-content .et-section,
  .cfg3-animated .cfg3-content .cfg2-settings-card,
  .cfg3-animated .cfg3-content .cfg2-compound,
  .cfg3-animated .cfg3-content .et-profile-page,
  .cfg3-animated .cfg3-sidebar {
    animation: none !important;
  }
}

/* ── Responsive: < 900px → collapse sidebar to horizontal tabs ── */
@media (max-width: 900px) {
  .cfg3-layout {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
  }

  .cfg3-sidebar {
    position: relative;
    top: 0;
    padding: 0 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cfg3-sidebar::-webkit-scrollbar { display: none; }

  .cfg3-sidebar-header {
    display: none;
  }

  .cfg3-nav {
    flex-direction: row;
    gap: 2px;
    padding: 4px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    min-width: max-content;
  }

  .cfg3-nav-item {
    padding: 7px 14px;
    white-space: nowrap;
    border-radius: 8px;
  }
  .cfg3-nav-item.active::before {
    display: none;
  }
  .cfg3-nav-item.active {
    background: var(--surface);
    border-color: rgba(0, 174, 239, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .cfg3-content {
    border-left: none;
    padding-left: 0;
    padding-bottom: 32px;
  }
}

/* ── Responsive: < 640px → tighter spacing ── */
@media (max-width: 640px) {
  .cfg3-nav-item {
    padding: 6px 10px;
    font-size: 12px;
    gap: 5px;
  }
  .cfg3-nav-icon { width: 14px; height: 14px; }

  .cfg3-content .cfg2-page-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }
  .cfg3-content .cfg2-page-header .fluydon-header-title {
    font-size: 18px;
  }
  .cfg3-content .cfg2-page-header .fluydon-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .cfg3-animated .cfg3-content .et-section {
    border-radius: 10px;
  }
  .cfg3-animated .cfg3-content .cfg2-settings-card,
  .cfg3-animated .cfg3-content .cfg2-compound {
    border-radius: 10px;
  }
  .cfg3-animated .cfg3-content .et-profile-card {
    border-radius: 10px;
  }

  .cfg3-content .cfg-page {
    gap: 12px;
  }
}

/* ═════════════════════════════════════════════════════════════
   Phase 3 — Responsive Hardening (all core screens)
   Breakpoints: 900 → 768 → 640 → 480
   ═════════════════════════════════════════════════════════════ */

/* ── 900px: tablets landscape ── */
@media (max-width: 900px) {
  .metrics-header-inner { flex-wrap: wrap; gap: 10px; justify-content: space-between; }
  .metrics-header-period {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 0 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(0, 174, 239, 0.1);
  }
  .metrics-header-actions { flex-wrap: wrap; gap: 8px; margin-left: 0; }
  .config-form-row-inline { flex-wrap: wrap; }
}

/* ── 768px: tablets portrait / large phones ── */
@media (max-width: 768px) {
  /* Facebook connection card */
  .fb-connection-card { padding: 16px; }
  .fb-connection-header { flex-wrap: wrap; gap: 12px; }
  .fb-connection-meta { flex-direction: column; gap: 6px; }
  .fb-connection-actions { flex-direction: column; gap: 8px; }
  .fb-connection-actions .fb-action-form { width: 100%; }
  .fb-connection-actions .fluydon-btn { width: 100%; justify-content: center; }
  .fb-connection-links { flex-direction: column; gap: 8px; }
  .fb-connection-links .fluydon-btn { width: 100%; text-align: center; }

  /* Manual token form */
  .fb-manual-token-input-wrap { flex-direction: column; }
  .fb-manual-token-toggle { align-self: flex-start; }

  /* Acompanhamento */
  .acompanhamento-bar { flex-wrap: wrap; gap: 10px; }
  .acompanhamento-search-form { width: 100%; }
  .acompanhamento-lentes { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
  .acompanhamento-subfiltros { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Config tabs overflow */
  .config-subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; white-space: nowrap; }
  .config-subtab { flex-shrink: 0; }

  /* Metrics table */
  .metricas-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 640px: phones landscape ── */
@media (max-width: 640px) {
  /* Acompanhamento cards simples */
  .acompanhamento-kanban { gap: 12px; }

  /* Config inline forms */
  .config-form-row-inline > * { min-width: 100%; }

  /* Touch-friendly interactive elements */
  .config-subtab { padding: 10px 14px; font-size: 13px; }
  .config-subtab-badge { padding: 3px 7px; min-height: 24px; }
  .acompanhamento-lente { padding: 10px 14px; }
  .acompanhamento-sub { padding: 8px 12px; }

  /* Metrics */
  .metricas-stats-grid { grid-template-columns: 1fr; }
}

/* ── 480px: phones portrait ── */
@media (max-width: 480px) {
  /* Dashboard KPIs: force single column */
  .dashboard-kpis { grid-template-columns: 1fr !important; gap: 8px; }
  .dashboard-kpi { min-width: 0; }

  /* Dashboard header */
  .dashboard-header-card { padding: 12px; }
  .dashboard-tabs { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .dashboard-tab { padding: 8px 12px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* Dashboard panels */
  .dashboard-panel--modern { padding: 14px; }

  /* Sales card */
  .dashboard-sales-card { padding: 12px; }

  /* Facebook config */
  .fb-connection-card { padding: 12px; border-radius: 10px; }
  .fb-connection-avatar { width: 40px !important; height: 40px !important; }
  .fb-connection-name { font-size: 15px; }

  /* Acompanhamento */
  .acompanhamento-card { padding: 12px; }
  .acompanhamento-bar { padding: 10px; gap: 8px; }
  .acompanhamento-kanban-col { min-width: 260px; }

  /* Vendas filter panel */
  .vaf-panel { padding: 12px; }
  .vaf-form { gap: 8px; }

  /* Config pages */
  .cfg3-content { padding: 12px 0; }
  .integ-section-head { padding: 0; }

  /* General touch-friendly padding on interactive chips/badges */
  .badge,
  .status-badge,
  [class*="badge"] { min-height: 28px; padding: 4px 8px; }

  /* Ensure no horizontal overflow on body */
  body { overflow-x: hidden; }
}

/* ───── Fluydon Toast Messages ───── */
.fluydon-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 400px;
  width: calc(100% - 40px);
}
.fluydon-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md, 10px);
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  border-left: 4px solid #64748b;
  pointer-events: auto;
  animation: fluydonToastIn .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) forwards;
  font-size: 14px;
  color: #334155;
  line-height: 1.4;
}
.fluydon-toast--success { border-left-color: #22c55e; background: #f0fdf4; color: #166534; }
.fluydon-toast--error   { border-left-color: #ef4444; background: #fef2f2; color: #991b1b; }
.fluydon-toast--warning { border-left-color: #f59e0b; background: #fffbeb; color: #92400e; }
.fluydon-toast--info    { border-left-color: #3b82f6; background: #eff6ff; color: #1e40af; }
.fluydon-toast-icon { flex-shrink: 0; }
.fluydon-toast--success .fluydon-toast-icon { color: #22c55e; }
.fluydon-toast--error .fluydon-toast-icon   { color: #ef4444; }
.fluydon-toast--warning .fluydon-toast-icon { color: #f59e0b; }
.fluydon-toast--info .fluydon-toast-icon    { color: #3b82f6; }
.fluydon-toast-text { flex: 1; }
.fluydon-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: .5;
  padding: 0 2px;
  line-height: 1;
  transition: opacity .15s;
}
.fluydon-toast-close:hover { opacity: 1; }
.fluydon-toast.fluydon-toast--out {
  animation: fluydonToastOut .3s ease forwards;
}
@keyframes fluydonToastIn {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fluydonToastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(40px) scale(.9); }
}
@media (max-width: 640px) {
  .fluydon-toast-container { top: 12px; right: 12px; max-width: calc(100% - 24px); }
  .fluydon-toast { font-size: 13px; padding: 10px 12px; }
}