:root,
:root[data-theme="dark"] {
  --bg: #0a0b0f;
  --bg-elevated: #0e1015;
  --panel: #14161c;
  --panel-2: #191c23;
  --panel-border: #23262f;
  --panel-border-strong: #2e323d;
  --chip-bg: #1b1e26;
  --chip-bg-hover: #242833;
  --text: #eceef2;
  --text-muted: #868d9a;
  --text-faint: #5b616d;
  --accent: #2dd4bf;
  --accent-strong: #14b8a6;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-2: #4ade80;
  --danger: #f4736b;
  --danger-bg: rgba(244, 115, 107, 0.13);
  --ok: #4ade80;
  --ok-bg: rgba(74, 222, 128, 0.13);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.13);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px var(--accent-soft);
  --topbar-bg: rgba(12, 13, 18, 0.72);
}

:root[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-elevated: #eef0f3;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --panel-border: #e6e8ec;
  --panel-border-strong: #d5d8de;
  --chip-bg: #eef0f3;
  --chip-bg-hover: #e4e7eb;
  --text: #1a1d23;
  --text-muted: #667085;
  --text-faint: #98a0ad;
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --accent-soft: rgba(13, 148, 136, 0.12);
  --accent-2: #16a34a;
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --ok: #16a34a;
  --ok-bg: rgba(22, 163, 74, 0.1);
  --warn: #d97706;
  --warn-bg: rgba(217, 119, 6, 0.1);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 6px 20px -8px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 18px 44px -12px rgba(16, 24, 40, 0.16);
  --ring: 0 0 0 3px var(--accent-soft);
  --topbar-bg: rgba(255, 255, 255, 0.72);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.15s ease, color 0.15s ease;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border-strong) transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--panel-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
  background-clip: padding-box;
}

.topbar,
.panel,
.stat-card,
.agent-panel,
.chip-select,
.search-input,
.updated-pill,
.icon-btn,
.count-pill,
th,
td {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.status-dot {
  transition: background 0.25s ease, box-shadow 0.25s ease;
}


.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--panel-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* Logo Wavoip Home num cartão branco — legível em qualquer tema (o arquivo é raster c/ fundo branco) */
/* Logo transparente, sem fundo/efeito. Versão preta no tema claro, versão clara no tema escuro. */
.logo-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.logo-chip img {
  display: block;
  height: 46px;
  width: auto;
}

.logo-chip .logo-dark {
  display: none;
}

:root[data-theme="dark"] .logo-chip .logo-light {
  display: none;
}

:root[data-theme="dark"] .logo-chip .logo-dark {
  display: block;
}

.brand-mark-crop {
  width: 29px;
  height: 28px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.brand-mark-crop img {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: auto;
  max-width: none;
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.brand-suffix {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
  font-size: 13px;
  vertical-align: middle;
}

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

.updated-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.icon-btn:hover {
  background: var(--chip-bg-hover);
  color: var(--text);
}

.is-spinning svg {
  animation: spin 0.6s linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dashboard-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 980px) {
  .dashboard-top {
    grid-template-columns: 1fr;
  }
}

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

.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.section-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.section-hints {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hint-pill {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.hint-pill:empty {
  display: none;
}

.is-hidden {
  display: none !important;
}

.table-wrap--capped {
  max-height: 340px;
  overflow-y: auto;
}

.table-wrap--capped thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}


.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-row-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.chip-select {
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}

.chip-select:hover {
  background: var(--chip-bg-hover);
}

.chip-select:focus,
.chip-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.icon-btn:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: var(--ring);
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stats-grid--single {
  grid-template-columns: minmax(220px, 320px);
}

.stats-grid--groups {
  grid-template-columns: repeat(2, minmax(200px, 320px));
}


.priority-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--danger-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 14px;
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease;
}

.priority-banner.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.priority-banner-icon {
  font-size: 16px;
}

.priority-banner-label {
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.priority-banner-text {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 132px;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--panel-border-strong);
  box-shadow: var(--shadow);
}

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

.stat-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ok-bg);
  color: var(--accent-2);
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card--alert .stat-icon {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-card--alert .stat-value {
  color: var(--danger);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-value {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-value.is-updated {
  animation: value-pulse 0.4s ease;
}

.stat-value-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.sparkline {
  width: 90px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
  overflow: visible;
}

.percent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.percent-badge.is-bad {
  color: var(--danger);
  background: var(--danger-bg);
}

.percent-badge.is-good {
  color: var(--ok);
  background: var(--ok-bg);
}

@keyframes value-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
    color: var(--accent);
  }
  100% {
    transform: scale(1);
  }
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.trend-icon {
  width: 14px;
  height: 14px;
}

.trend:not(:empty) {
  animation: row-fade-in 0.3s ease;
}

.trend-up {
  color: var(--ok);
}

.trend-down {
  color: var(--danger);
}

.stat-card.is-loading .stat-label,
.stat-card.is-loading .stat-value {
  color: transparent;
  background: linear-gradient(90deg, var(--chip-bg) 25%, var(--chip-bg-hover) 37%, var(--chip-bg) 63%);
  background-size: 400% 100%;
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease infinite;
}

.stat-card.is-loading .stat-label {
  width: 60%;
  height: 13px;
}

.stat-card.is-loading .stat-value {
  width: 45%;
  height: 34px;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


.agent-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 1;
  max-height: 600px;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease,
    border-color 0.25s ease;
}

.agent-panel.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.agent-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0e0e12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  object-fit: cover;
}

.agent-panel-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.agent-panel-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.agent-panel-subtitle strong {
  color: var(--text);
}

.agent-recent-chats {
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
}

.agent-recent-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.agent-recent-chats ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-recent-chats li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-border);
}

.agent-recent-chats li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.chat-contact {
  font-weight: 600;
  white-space: nowrap;
}

.chat-message {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-inline {
  color: var(--text-muted);
  font-size: 13px;
}


.ignored-panel {
  border-bottom: 1px solid var(--panel-border);
  padding: 18px 26px;
  opacity: 1;
  max-height: 400px;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}

.ignored-panel.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.ignored-panel ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ignored-panel li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.team-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.team-form .search-input {
  min-width: 160px;
  flex: 1;
}

/* Seleção de CARTEIRAS no cadastro de pessoa. É um `select multiple`, então não cabe no `.chip-select`
   (feito pra uma linha só e com cantos de pílula): aqui a caixa mostra várias linhas e rola quando o
   quadro cresce. Herda a cor do resto do formulário pra não parecer um controle de outro sistema. */
.team-form .user-seller-multi {
  border-radius: 12px;
  padding: 5px;
  min-width: 190px;
  max-height: 116px;
  overflow-y: auto;
  cursor: default;
  font-weight: 500;
  line-height: 1.5;
}
.team-form .user-seller-multi option {
  padding: 4px 9px;
  border-radius: 7px;
  color: var(--text-muted);
}
/* Marcado: o mesmo verde-água do resto da interface. Alguns navegadores ignoram cor em `option`, por
   isso a informação também está no texto ("já é fulano") e na lista de pessoas logo abaixo. */
.team-form .user-seller-multi option:checked {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.team-form .user-seller-multi option:disabled { color: var(--text-faint); }

.restore-btn {
  background: var(--chip-bg);
  color: var(--text-muted);
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.restore-btn:hover {
  background: var(--chip-bg-hover);
  color: var(--text);
}


.ignore-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ignore-btn:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.ignore-btn svg {
  width: 14px;
  height: 14px;
}

.resolve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--chip-bg);
  color: var(--text-muted);
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.resolve-btn:hover {
  background: var(--ok-bg);
  color: var(--ok);
}

.resolve-btn svg {
  width: 14px;
  height: 14px;
}

.cell-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ignore-group-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ignore-group-btn:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.ignore-group-btn svg {
  width: 14px;
  height: 14px;
}


.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.panel-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-header h2 {
  margin: 0 0 2px;
  font-size: 16px;
}

.panel-subtitle {
  color: var(--text-muted);
  font-size: 13px;
}

.panel-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.panel-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: inherit;
  min-width: 220px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}


.team-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.team-row:hover {
  background: var(--chip-bg);
}

.team-row.is-selected {
  background: var(--ok-bg);
}

.team-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.team-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0e0e12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  object-fit: cover;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--chip-bg);
  color: var(--text-muted);
}

.count-pill.count-pill--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

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

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

th {
  text-align: left;
  padding: 13px 26px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--panel-2);
  border-bottom: 1px solid var(--panel-border);
}

td {
  padding: 14px 26px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

tbody tr {
  animation: row-fade-in 0.25s ease;
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: var(--panel-2);
}

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

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge--danger {
  color: var(--danger);
  background: var(--danger-bg);
}

.badge--ok {
  color: var(--ok);
  background: var(--ok-bg);
}

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

.cell-message {
  color: var(--text-muted);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-waited {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .agent-recent-chats li {
    flex-direction: column;
    gap: 2px;
  }

  .panel-header-right {
    width: 100%;
  }

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

/* Pop-up de alerta de grupo — fica visível e toca em loop até o operador clicar no X */
.alert-popup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--danger-bg);
  animation: alert-popup-in 0.28s ease, alert-popup-glow 1.4s ease-in-out infinite;
}

@keyframes alert-popup-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alert-popup-glow {
  0%,
  100% {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--danger-bg);
  }
  50% {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 7px var(--danger-bg);
  }
}

.alert-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.alert-popup-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.alert-popup-close svg {
  width: 16px;
  height: 16px;
}

.alert-popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-right: 34px;
}

.alert-popup-icon {
  font-size: 18px;
  transform-origin: 50% 0;
  animation: alert-bell 1s ease-in-out infinite;
}

@keyframes alert-bell {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

.alert-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
}

.alert-popup-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.alert-popup-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--danger-bg);
  border-radius: 10px;
}

.alert-popup-item-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.alert-popup-item-waited {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.alert-popup-more {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 4px;
}

@media (max-width: 520px) {
  .alert-popup {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert-popup,
  .alert-popup-icon {
    animation: none;
  }
}

/* Nome do usuário logado, no topo */
.user-pill {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

/* Tela de login (login.html) */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-title {
  margin: 0;
  font-size: 20px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.login-field .search-input {
  width: 100%;
}

.login-submit {
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.login-submit:hover {
  filter: brightness(1.05);
}

.login-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.login-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
}

/* Lista de "Pessoas com acesso" */
.access-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--chip-bg);
  border-radius: 10px;
  font-size: 14px;
}

.access-list .access-empty {
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
}

/* Etiqueta na lista de pessoas: qual carteira a conta comercial enxerga. `is-alerta` marca o comercial
   SEM vínculo — conta que entra no app e não vê nada, e sem a etiqueta isso passava invisível. */
.access-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.access-tag.is-alerta { color: var(--fin-warning); border-color: var(--fin-warning); background: transparent; }

.access-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.access-role {
  padding: 6px 10px;
  font-size: 13px;
}

/* RBAC: esconde os controles conforme o tipo. A trava REAL é no servidor (403); isto é só conforto
   visual. No monitor existem admin, suporte e operacional (gerenciador operacional). Fail-closed: o
   app começa com data-role="suporte".
   .admin-only    → só admin (usuários/config/whitelist/funcionários);
   .ops-only      → admin + operacional (gestão da operação: "Quem está online" e chamar);
   .operator-only → todos os três (resolver/reabrir), então nunca é escondido aqui. */
:root[data-role="suporte"] .admin-only,
:root[data-role="operacional"] .admin-only {
  display: none !important;
}
:root[data-role="suporte"] .ops-only {
  display: none !important;
}

.role-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}

.role-badge--admin {
  color: var(--accent);
  background: var(--ok-bg);
}

.role-badge--suporte,
.role-badge--operacional {
  color: var(--accent-2);
  background: var(--ok-bg);
}

/* Lista "Quem está online" */
.online-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.online-dot.is-online {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
}

.online-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Subtítulo de grupo (Administradores / Operadores / Espectadores) na lista de online */
.access-list li.online-group-label {
  background: transparent;
  border-radius: 0;
  padding: 16px 4px 4px;
  justify-content: flex-start;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.access-list li.online-group-label:first-child {
  padding-top: 2px;
}

.online-group-count {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Overview de gestão: "Quem está online" (coluna esquerda) + grupos (coluna direita). Só admin e
   gerenciador operacional veem a coluna esquerda (.overview-left é ops-only); o suporte fica com os
   grupos em largura cheia. Empilha em telas estreitas. */
.admin-overview {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

:root[data-role="admin"] .admin-overview,
:root[data-role="operacional"] .admin-overview {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.overview-left,
.overview-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0; /* deixa a tabela larga rolar dentro da coluna em vez de estourar o grid */
}

@media (max-width: 1024px) {
  :root[data-role="admin"] .admin-overview,
  :root[data-role="operacional"] .admin-overview {
    grid-template-columns: 1fr;
  }
}

/* Coluna de ações (Resolvido/ignorar) FIXA à direita — sempre visível mesmo se a tabela precisar
   rolar na horizontal (acontece na coluna mais estreita do admin). */
.groups-table th:last-child,
.groups-table td:last-child {
  position: sticky;
  right: 0;
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.45);
}

.groups-table th:last-child {
  background: var(--panel-2);
}

.groups-table td:last-child {
  background: var(--panel);
}

.groups-table tbody tr:hover td:last-child {
  background: var(--panel-2);
}

/* Compacta a tabela nas telas com duas colunas (admin/operacional), pra sobrar espaço; o suporte
   segue com a tabela folgada em largura cheia. */
:root[data-role="admin"] .overview-right td,
:root[data-role="admin"] .overview-right th,
:root[data-role="operacional"] .overview-right td,
:root[data-role="operacional"] .overview-right th {
  padding-left: 18px;
  padding-right: 18px;
}

:root[data-role="admin"] .overview-right .cell-message,
:root[data-role="operacional"] .overview-right .cell-message {
  max-width: 240px;
}

.ring-btn {
  white-space: nowrap;
}

/* Pop-up de "chamado do admin" — atenção no topo, distinto do alarme de grupo */
.ring-popup {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 13px 14px 13px 20px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 15px;
  animation: ring-in 0.28s ease, ring-shake 0.5s ease 0.3s 2;
}

.ring-popup-icon {
  font-size: 20px;
}

.ring-popup-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ring-popup-close:hover {
  background: rgba(0, 0, 0, 0.3);
}

@keyframes ring-in {
  from {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes ring-shake {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  25% {
    transform: translate(-53%, 0);
  }
  75% {
    transform: translate(-47%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring-popup {
    animation: ring-in 0.28s ease;
  }
}

.sound-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 12px;
}

.sound-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* Topbar não quebra layout com o volume + menu */
.topbar-right {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Controle de volume no topo */
.volume-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) var(--vol-pct, 100%),
    var(--chip-bg-hover) var(--vol-pct, 100%)
  );
  cursor: pointer;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.volume-slider:focus-visible {
  box-shadow: var(--ring);
}

/* Menu lateral (drawer) */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1090;
}

.menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 300px;
  max-width: 86vw;
  background: var(--panel);
  border-left: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 14px;
  overflow-y: auto;
}

.side-menu.is-open {
  transform: translateX(0);
}

.side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 6px;
}

.side-menu-title {
  font-size: 15px;
  font-weight: 700;
}

.side-menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--panel-border);
}

.side-menu-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 4px 10px 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.menu-item svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.12s ease;
}

.menu-item:hover {
  background: var(--chip-bg);
}

.menu-item:hover svg {
  color: var(--text);
}

.menu-item--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.menu-item--danger:hover svg {
  color: var(--danger);
}

@media (max-width: 640px) {
  .volume-slider {
    width: 64px;
  }
}

/* ===== Painel financeiro ===== */
/* Cores de status (só usadas como MARCA: borda/dot — nunca como cor de texto/número). */
:root[data-theme="dark"] {
  --fin-good: #34d399;
  --fin-warning: #fbbf24;
  --fin-critical: #f87171;
  --fin-neutral: #8b93a1;
  --fin-blue: #60a5fa;
  --fin-magenta: #e879f9;
  --fin-avulso: #94a3b8;
  --fin-orange: #fb923c;
  --fin-rose: #f43f5e;
}
:root[data-theme="light"] {
  --fin-good: #059669;
  --fin-warning: #ca8a04;
  --fin-critical: #dc2626;
  --fin-neutral: #6b7280;
  --fin-blue: #2563eb;
  --fin-magenta: #c026d3;
  --fin-avulso: #64748b;
  --fin-orange: #ea580c;
  --fin-rose: #be123c;
}

.finance-panel {
  max-width: 1080px;
}
.finance-panel .panel-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fin-state,
.fin-empty {
  color: var(--text-muted);
  padding: 18px 4px;
  font-size: 14px;
}

/* KPIs (buckets) e stats (previsão) — grades responsivas */
.fin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.fin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.fin-kpi,
.fin-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--fin-c, var(--panel-border-strong));
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.fin-kpi--good { --fin-c: var(--fin-good); }
.fin-kpi--warn { --fin-c: var(--fin-warning); }
.fin-kpi--crit { --fin-c: var(--fin-critical); }
.fin-kpi--neutral { --fin-c: var(--fin-neutral); }
.fin-stat--accent { --fin-c: var(--accent); }
.fin-stat--crit { --fin-c: var(--fin-critical); }

.fin-kpi-label,
.fin-stat-label {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.fin-kpi-value {
  color: var(--text);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.fin-stat-value {
  color: var(--text);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fin-kpi-sub,
.fin-stat-sub {
  color: var(--text-faint);
  font-size: 12px;
}

/* Gráficos */
.fin-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: row dense;
  gap: 14px;
}
.fin-chart {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 12px;
}
/* Cards de largura total (séries de 12 meses) — ocupam a linha inteira da grade. */
.fin-chart--wide {
  grid-column: 1 / -1;
}
.fin-chart-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.fin-chart-head span {
  display: block;
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--text-faint);
}

/* Barras verticais (SVG) — série temporal, hue único */
.fin-svg {
  display: block;
  width: 100%;
  height: auto;
}
.fin-bar {
  fill: var(--accent);
}
.fin-bar--hi {
  fill: var(--accent-strong);
}
/* Card de clientes (novos e cancelados): mesmo magenta de "Novas (1ª fatura)" no painel */
.fin-svg--magenta .fin-bar { fill: var(--fin-magenta); }
/* Chip selecionado na cor do próprio card (o padrão é o accent). `--chip-c` vem da classe do grupo. */
.hist-chips--magenta { --chip-c: var(--fin-magenta); }
.hist-chips--venc { --chip-c: var(--fin-critical); }
.hist-chips--pago { --chip-c: var(--fin-good); }
.hist-chips--magenta .live-chip.is-active,
.hist-chips--venc .live-chip.is-active,
.hist-chips--pago .live-chip.is-active {
  color: var(--chip-c);
  border-color: var(--chip-c);
  background: var(--panel-2);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .hist-chips--magenta .live-chip.is-active,
  .hist-chips--venc .live-chip.is-active,
  .hist-chips--pago .live-chip.is-active {
    background: color-mix(in srgb, var(--chip-c) 15%, transparent);
  }
  .hist-chips--magenta .live-chip.is-active:focus-visible,
  .hist-chips--venc .live-chip.is-active:focus-visible,
  .hist-chips--pago .live-chip.is-active:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-c) 22%, transparent);
  }
}
.fin-bar-val {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.fin-bar-lbl {
  fill: var(--text-faint);
  font-size: 11px;
}
.fin-bar-tag {
  fill: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 600;
}
.fin-axis {
  stroke: var(--panel-border-strong);
  stroke-width: 1;
}

/* Barras agrupadas por status (cor como marca; identidade vem da legenda) */
.fin-gbar--new { fill: var(--fin-magenta); }
.fin-gbar--sub { fill: var(--fin-blue); }
.fin-gbar--avulso { fill: var(--fin-avulso); }
.fin-gbar--paid { fill: var(--fin-good); }
.fin-gbar--contrat { fill: var(--fin-orange); }
.fin-gbar--wait { fill: var(--fin-warning); }
.fin-gbar--atraso { fill: var(--fin-rose); }
.fin-gbar--overdue { fill: var(--fin-critical); }
.fin-gval {
  fill: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
}
/* Card de renovações: gráfico em largura natural com rolagem horizontal (rótulos horizontais legíveis) */
.fin-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}
.fin-svg--natural {
  max-width: none;
  width: auto;
}
.fin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 2px 0 8px;
}
.fin-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.fin-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.fin-legend-dot.new { background: var(--fin-magenta); }
.fin-legend-dot.sub { background: var(--fin-blue); }
.fin-legend-dot.avulso { background: var(--fin-avulso); }
.fin-legend-dot.paid { background: var(--fin-good); }
.fin-legend-dot.contrat { background: var(--fin-orange); }
.fin-legend-dot.wait { background: var(--fin-warning); }
.fin-legend-dot.atraso { background: var(--fin-rose); }
.fin-legend-dot.overdue { background: var(--fin-critical); }

/* Barras horizontais (HTML) — magnitude por categoria, rótulo direto */
.fin-hbars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}
.fin-hbar-row {
  display: grid;
  grid-template-columns: minmax(84px, 130px) 1fr auto;
  align-items: center;
  gap: 10px;
}
.fin-hbar-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.fin-hbar-track {
  height: 16px;
  background: var(--panel-border);
  border-radius: 999px;
  overflow: hidden;
}
.fin-hbar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.fin-hbar-num {
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* KPI com dois números (quantidade + valor). O destaque troca no clique: o número grande vem
   sempre primeiro e o outro logo depois, menor. Tamanhos por variável pra acompanhar o breakpoint. */
.fin-kpi-swap {
  --fin-big: 30px;
  --fin-small: 15.5px;
  /* duração da troca: manter em sincronia com SWAP_MS no finance.js (o deslize é animado por lá) */
  --fin-swap-t: 1s;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
}
.fin-kpi-swap:focus-visible { outline: none; box-shadow: var(--ring); }
.fin-kpi-a, .fin-kpi-b {
  transition: font-size var(--fin-swap-t) cubic-bezier(0.4, 0, 0.2, 1),
              color var(--fin-swap-t) cubic-bezier(0.4, 0, 0.2, 1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fin-kpi-a { order: 1; font-size: var(--fin-big); font-weight: 700; color: var(--text); }
.fin-kpi-b { order: 2; font-size: var(--fin-small); font-weight: 600; color: var(--text-muted); }
.fin-kpi-swap.is-swapped .fin-kpi-a { order: 2; font-size: var(--fin-small); font-weight: 600; color: var(--text-muted); }
.fin-kpi-swap.is-swapped .fin-kpi-b { order: 1; font-size: var(--fin-big); font-weight: 700; color: var(--text); }

@media (max-width: 640px) {
  .fin-kpi-value { font-size: 26px; }
  .fin-kpi-swap { --fin-big: 26px; --fin-small: 14px; }
  .fin-hbar-row { grid-template-columns: minmax(72px, 96px) 1fr auto; gap: 8px; }
  .fin-hbar-num { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-kpi-a, .fin-kpi-b { transition: none; }
}

/* Página dedicada /financeiro.html */
.finance-page {
  padding: 22px clamp(14px, 4vw, 40px) 56px;
}
.finance-page .finance-panel {
  margin: 0 auto;
}
a.chip-select {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   Painel financeiro — polimento visual + interatividade
   ============================================================ */
@keyframes finRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes finGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes finGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes finFade { from { opacity: 0; } to { opacity: 1; } }

.fin-kpis, .fin-stats { margin-bottom: 16px; }

/* Entrada suave + elevação no hover dos cards.
   fill-mode BACKWARDS (não "both"): aplica o quadro inicial durante o delay (sem flash), mas NÃO
   retém o transform ao fim — senão o transform travado anularia o translateY do :hover. */
.fin-kpi, .fin-stat, .fin-chart {
  animation: finRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.fin-kpis .fin-kpi:nth-child(2) { animation-delay: 0.04s; }
.fin-kpis .fin-kpi:nth-child(3) { animation-delay: 0.08s; }
.fin-kpis .fin-kpi:nth-child(4) { animation-delay: 0.12s; }
.fin-stats .fin-stat:nth-child(2) { animation-delay: 0.05s; }
.fin-stats .fin-stat:nth-child(3) { animation-delay: 0.1s; }
.fin-charts .fin-chart:nth-child(2) { animation-delay: 0.06s; }
.fin-charts .fin-chart:nth-child(3) { animation-delay: 0.1s; }
.fin-charts .fin-chart:nth-child(n + 4) { animation-delay: 0.14s; }
.fin-kpi:hover, .fin-stat:hover, .fin-chart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  border-color: var(--panel-border-strong);
}

/* KPI: cabeçalho (label + %) + barra de progresso da fatia */
.fin-kpi { position: relative; overflow: hidden; }
.fin-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-kpi-pct {
  font-size: 11px; font-weight: 700; line-height: 1.5;
  color: var(--fin-c, var(--text-muted));
  background: var(--panel-border);
  padding: 1px 7px; border-radius: 999px;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .fin-kpi-pct { background: color-mix(in srgb, var(--fin-c, var(--accent)) 16%, transparent); }
}
.fin-kpi-value { margin-top: 2px; }
.fin-kpi-bar {
  display: block; height: 5px; margin-top: 2px;
  background: var(--panel-border); border-radius: 999px; overflow: hidden;
}
.fin-kpi-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--fin-c, var(--accent));
  transform-origin: left; animation: finGrowX 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Stat tiles (previsão): faixa de destaque no topo */
.fin-stat { position: relative; overflow: hidden; }
.fin-stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--fin-c, var(--accent)), transparent 88%);
}

/* Barras: crescem na entrada; destaque no hover (cursor + brilho) */
.fin-svg path {
  transform-box: fill-box; transform-origin: bottom;
  animation: finGrowY 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transition: filter 0.12s ease; cursor: pointer;
}
.fin-svg path:hover { filter: brightness(1.14) saturate(1.06); }
.fin-svg text { animation: finFade 0.6s ease both; }
.fin-hbar-fill { transform-origin: left; animation: finGrowX 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.fin-hbar-row {
  cursor: pointer; border-radius: 7px; padding: 3px 4px; margin: -3px -4px;
  transition: background 0.12s ease;
}
.fin-hbar-row:hover { background: var(--accent-soft); }

/* Scrollbar do gráfico rolável */
.fin-scroll { scrollbar-width: thin; scrollbar-color: var(--panel-border-strong) transparent; }
.fin-scroll::-webkit-scrollbar { height: 9px; }
.fin-scroll::-webkit-scrollbar-thumb { background: var(--panel-border-strong); border-radius: 999px; }
.fin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Tooltip flutuante dos gráficos */
.fin-tip {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: flex-start; gap: 8px; max-width: 300px;
  padding: 8px 11px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--panel-border-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.12s ease; will-change: transform;
}
.fin-tip.is-on { opacity: 1; }
.fin-tip-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 3px; flex: none; }
.fin-tip-txt { display: flex; flex-direction: column; }
.fin-tip-head { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* pre-line: o corpo do tooltip pode ter mais de uma linha (ex.: faturas por status no card de método) */
.fin-tip-body { font-size: 12px; color: var(--text-muted); margin-top: 1px; white-space: pre-line; }

/* Botão Atualizar durante o carregamento */
.chip-select.is-loading { opacity: 0.6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fin-kpi, .fin-stat, .fin-chart, .fin-svg path, .fin-svg text, .fin-hbar-fill, .fin-kpi-bar i {
    animation: none !important;
  }
}

/* ============================================================
   Remodelagem: largura total + cards soltos na página
   ============================================================ */
.finance-page { padding: 20px clamp(16px, 3vw, 44px) 64px; }

/* Painel deixa de ser uma "caixa" e vira só um contêiner de largura total */
.finance-page .finance-panel {
  max-width: 1760px;      /* cap generoso: usa a tela toda, sem esticar demais em ultrawide */
  margin: 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Header como faixa limpa sobre o fundo da página */
.finance-panel .panel-header {
  margin: 2px 2px 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
.finance-panel .panel-header h2 { font-size: 22px; letter-spacing: -0.01em; }

/* Cards ganham um pouco mais de presença sobre o --bg da página */
.fin-kpi, .fin-stat, .fin-chart {
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Grades ocupando a largura inteira */
.fin-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fin-stats { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

/* Gráficos: grade responsiva de 6 colunas (composição sem buracos).
   Renovações = linha toda · Vencimentos/Aging = metade · Método/Ciclo/Status = 1/3. */
.fin-charts { grid-template-columns: 1fr; grid-auto-flow: row; gap: 16px; }
@media (min-width: 720px) {
  .fin-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-charts .fin-chart--wide { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .fin-charts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fin-charts .fin-chart { grid-column: span 2; }        /* padrão: 1/3 da largura */
  .fin-charts .fin-chart--half { grid-column: span 3; }  /* metade */
  .fin-charts .fin-chart--wide { grid-column: 1 / -1; }  /* largura total */
}

/* KPIs/stats um pouco mais altos pra respirar na largura maior */
.fin-kpi { padding: 15px 17px; }
.fin-stat { padding: 15px 17px; }
.fin-kpi-value { font-size: 32px; }
.fin-stat-value { font-size: 25px; }

/* ============================================================
   Tabbar (Painel | Ao vivo) + feed "Ao vivo"
   ============================================================ */
.fin-tabs {
  display: flex;
  gap: 2px;
  margin: 0 2px 18px;
  border-bottom: 1px solid var(--panel-border);
}
/* `display:flex` acima vence o [hidden] do navegador (que só define display:none na folha padrão),
   então esconder a barra de abas por JS exige esta regra. Usado no Comercial, onde quem não é
   admin não tem nenhuma aba liberada. */
.fin-tabs[hidden] { display: none; }
/* Mesmo motivo, agora para a ABA individual: a aba "Recuperados" nasce com `hidden` (só se chega a
   ela pelo número da comissão), e sem esta regra o display do próprio botão venceria o [hidden] do
   navegador e ela apareceria na barra assim mesmo. */
.fin-tab[hidden] { display: none; }
.fin-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fin-tab:hover { color: var(--text); }
.fin-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.fin-tab-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fin-good, #34d399);
  animation: livePulse 1.9s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

#finance-live { animation: finRise 0.4s ease both; }
.live-feed { display: flex; flex-direction: column; gap: 8px; }

/* Cabeçalho de mês — gruda logo abaixo da topbar sticky (≈58px) */
.live-month {
  position: sticky;
  top: 58px;
  z-index: 3;
  margin: 16px 0 6px;
  padding: 7px 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
}
.live-month:first-child { margin-top: 2px; }

/* Linha do feed */
.live-row {
  display: grid;
  /* última coluna = "3 pontinhos" (ou espaçador, nas linhas dentro de uma caixa de cliente) */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--live-c, var(--panel-border-strong));
  border-radius: var(--radius-sm);
  padding: 11px 16px 11px 14px;
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.live-row:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: var(--panel-border-strong);
}
.live-row--ok { --live-c: var(--fin-good); }
.live-row--wait { --live-c: var(--fin-warning); }
.live-row--over { --live-c: var(--fin-critical); }
.live-row--off { --live-c: var(--fin-neutral); }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live-c); flex: none; }
.live-cli { display: flex; flex-direction: column; min-width: 0; }
.live-cli-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-cli-meta {
  font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-col {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; min-width: 82px;
}
.live-col b { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.live-col span { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.live-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; color: var(--live-c); background: var(--panel-2); min-width: 74px; text-align: center;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .live-badge { background: color-mix(in srgb, var(--live-c) 16%, transparent); }
}

.live-status { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 18px 8px; }

/* Cliente com 2+ assinaturas no mês: uma caixa só, que abre as assinaturas individuais ao clicar */
.live-group { display: flex; flex-direction: column; }
.live-row--grp { cursor: pointer; background: var(--panel-2); }
.live-row--grp:focus-visible { outline: none; box-shadow: var(--ring); }
.live-grp-lead { display: flex; align-items: center; gap: 7px; }
.live-grp-chev {
  font-size: 11px; color: var(--text-muted);
  transform: rotate(-90deg); transition: transform 0.15s ease;
}
.live-group.is-open .live-grp-chev { transform: rotate(0); }
.live-grp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.live-pill {
  font-size: 11px; font-weight: 600; line-height: 1.6;
  padding: 0 8px; border-radius: 999px; white-space: nowrap;
  color: var(--pill-c, var(--text-muted));
  background: var(--panel); border: 1px solid var(--panel-border);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .live-pill {
    background: color-mix(in srgb, var(--pill-c) 14%, transparent);
    border-color: color-mix(in srgb, var(--pill-c) 32%, transparent);
  }
}
.live-pill--ok { --pill-c: var(--fin-good); }
.live-pill--wait { --pill-c: var(--fin-warning); }
.live-pill--over { --pill-c: var(--fin-critical); }
.live-pill--off { --pill-c: var(--fin-neutral); }
.live-pill.is-zero { --pill-c: var(--text-faint); }

/* Assinaturas individuais da caixa aberta: recuadas, com trilho ligando ao cliente */
.live-sub {
  display: flex; flex-direction: column; gap: 6px;
  margin: 7px 0 2px 24px; padding-left: 14px;
  border-left: 2px solid var(--panel-border-strong);
  /* backwards (não "both"): com "both" o transform final travaria e mataria o :hover das linhas */
  animation: finRise 0.25s ease backwards;
}
.live-sub-cap { font-size: 11.5px; color: var(--text-faint); margin: 0 0 2px 2px; }

/* Ação da linha: "3 pontinhos" (menu) ou ícone de link (fatura única) — mesma caixa, mesma coluna */
.live-dots, .live-dots-gap, .live-link { width: 26px; height: 26px; flex: none; }
.live-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint); border: 1px solid transparent; border-radius: 8px;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.live-link:hover { color: var(--accent); background: var(--panel-2); border-color: var(--accent); }
.live-row--grp .live-link:hover { background: var(--panel); }
.live-link:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
.live-dots {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; color: var(--text-faint);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; padding: 0;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.live-dots:hover, .live-dots.is-open { color: var(--text); background: var(--panel-2); border-color: var(--panel-border-strong); }
.live-row--grp .live-dots:hover, .live-row--grp .live-dots.is-open { background: var(--panel); }
.live-dots:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }

.live-menu {
  position: fixed; z-index: 60; left: 0; top: 0;
  width: min(360px, calc(100vw - 16px));
  background: var(--panel); border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius-sm); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  overflow: hidden; animation: finRise 0.14s ease backwards;
}
.live-menu[hidden] { display: none; }
.live-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-bottom: 1px solid var(--panel-border); background: var(--panel-2);
}
.live-menu-cli {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-menu-sub { font-size: 11.5px; color: var(--text-faint); }
.live-menu-list { max-height: 320px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.live-menu-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 2px 10px; padding: 7px 10px; border-radius: 8px; text-decoration: none;
  border-left: 3px solid var(--live-c, var(--panel-border-strong));
  background: var(--panel-2);
  transition: background 0.12s ease, transform 0.12s ease;
}
.live-menu-item:hover { background: var(--chip-bg-hover); transform: translateX(2px); }
.live-menu-item.is-nolink { cursor: not-allowed; opacity: 0.7; }
/* colunas explícitas: mês/detalhe à esquerda (2 linhas), selo de status à direita */
.live-menu-mes { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.live-menu-meta { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--text-faint); }
.live-menu-item .live-badge { grid-column: 2; grid-row: 1 / span 2; min-width: 68px; }
.live-menu-empty { padding: 16px 12px; font-size: 12.5px; color: var(--text-faint); text-align: center; }

@media (max-width: 760px) {
  .live-sub { margin-left: 10px; padding-left: 10px; }
}

/* Responsivo: em telas estreitas some com colunas do meio (ficam no tooltip) */
@media (max-width: 760px) {
  .live-row { grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 12px; }
  .live-col.live-venc, .live-col.live-pagas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-tab-live-dot, #finance-live { animation: none !important; }
}

/* ============================================================
   Ao vivo v2 — toolbar (busca + chips + ordenação) e meses colapsáveis
   ============================================================ */
.live-toolbar {
  position: sticky;
  top: 57px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  margin-bottom: 2px;
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
}
.live-search {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}
.live-search::placeholder { color: var(--text-faint); }
.live-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.live-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.live-chip {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-muted);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.live-chip:hover { color: var(--text); }
.live-chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
/* Contador dentro de um chip de filtro (quantos clientes com cobrança vencida na carteira). */
.com-chip-n {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-chip.is-active .com-chip-n { background: var(--panel); border-color: var(--accent); }
/* Sem nenhum vencido o chip continua visível, mas apagado: aparecer e desaparecer conforme os dados
   faria a barra pular, e "0" também é informação. */
.live-chip[disabled] { opacity: 0.45; cursor: default; }
.live-chip[disabled]:hover { color: var(--text-muted); }
.live-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.live-sort-lbl { font-size: 12px; color: var(--text-faint); margin-right: 4px; }
.live-sort-b {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.live-sort-b:hover { color: var(--text); background: var(--panel-2); }
.live-sort-b.is-active { color: var(--text); background: var(--panel-2); }
.live-sort-arrow { font-size: 9px; color: var(--accent); }

.live-count { font-size: 12.5px; color: var(--text-faint); margin: 10px 2px; }

/* Cabeçalho de mês colapsável (sobrescreve o sticky antigo) */
.live-month {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 8px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  user-select: none;
  border-radius: 8px 8px 0 0;
  transition: background 0.12s ease;
}
.live-month:hover { background: var(--panel-2); }
.live-month:first-child { margin-top: 2px; }
.live-chev { font-size: 11px; color: var(--text-muted); transition: transform 0.15s ease; }
.live-month.is-collapsed .live-chev { transform: rotate(-90deg); }
.live-month-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--panel-2);
  padding: 1px 9px;
  border-radius: 999px;
  letter-spacing: 0;
}
/* ===== Aba Histórico ===== */
#finance-hist { animation: finRise 0.4s ease backwards; }
.fin-stat--neutral { --fin-c: var(--fin-neutral); }
.hist-chips { margin-bottom: 10px; }
.hist-aviso {
  margin: 0 0 10px; padding: 8px 11px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
  background: var(--panel-2); border-left: 3px solid var(--panel-border-strong);
}
.hist-aviso--alerta { color: var(--text-muted); border-left-color: var(--fin-warning); }

/* Total em destaque no topo do card de faturas pagas (as barras dos métodos vêm logo abaixo) */
.hist-total {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
}
.hist-total-n {
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.hist-total-lbl { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; }
.hist-total-lbl b { color: var(--text-muted); font-weight: 700; }

/* Calendário de vencimentos */
.hist-cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hist-cal-mes { font-size: 13px; font-weight: 700; color: var(--text); min-width: 150px; text-align: center; }
.hist-cal-b {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--panel-border);
  color: var(--text-muted); font-size: 16px; line-height: 1;
}
.hist-cal-b:hover { color: var(--text); border-color: var(--accent); }
.hist-cal-b:focus-visible { outline: none; box-shadow: var(--ring); }

.hist-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
/* modo anual: dias 1–31 sem cabeçalho de semana (não são dias da semana, são dias do mês) */
.hist-cal-grid--ano { grid-template-columns: repeat(8, 1fr); }
.hist-chip-sep {
  width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--panel-border-strong);
}
.hist-cal-wd {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); text-align: center; padding-bottom: 2px;
}
.hist-cal-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; border-radius: 9px;
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
}
.hist-cal-cell.is-empty { border: 0; background: transparent; }
.hist-cal-cell b { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hist-cal-cell i {
  font-style: normal; font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hist-cal-cell.is-today { outline: 2px solid var(--cal-c, var(--accent)); outline-offset: -2px; }
/* Cor do calendário = a da série escolhida: vermelho em vencimentos, verde em pagamentos. */
.hist-cal-grid { --cal-c: var(--accent); }
.hist-cal-grid--venc { --cal-c: var(--fin-critical); }
.hist-cal-grid--pago { --cal-c: var(--fin-good); }
/* intensidade = nº de faturas no dia (fundo só como marca; o número fica em token de texto) */
.hist-cal-n1 { background: color-mix(in srgb, var(--cal-c) 12%, var(--panel-2)); }
.hist-cal-n2 { background: color-mix(in srgb, var(--cal-c) 24%, var(--panel-2)); }
.hist-cal-n3 { background: color-mix(in srgb, var(--cal-c) 38%, var(--panel-2)); }
.hist-cal-n4 { background: color-mix(in srgb, var(--cal-c) 52%, var(--panel-2)); }
.hist-cal-n1, .hist-cal-n2, .hist-cal-n3, .hist-cal-n4 { border-color: transparent; }
.hist-cal-foot { margin: 12px 2px 0; font-size: 12px; color: var(--text-faint); }
.hist-cal-foot b { color: var(--text-muted); font-weight: 700; }

@media (max-width: 560px) {
  .hist-cal-cell { min-height: 42px; }
  .hist-cal-cell i { font-size: 12px; }
}

/* Caixa única com TODOS os meses posteriores ao corrente (a vencer) — fechada por padrão */
.live-future {
  border: 1px dashed var(--panel-border-strong);
  border-radius: var(--radius-sm);
  margin: 10px 0 6px;
  overflow: hidden;
}
.live-future-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  transition: background 0.12s ease;
}
.live-future-head:hover { background: var(--panel-2); }
.live-future-head:focus-visible { outline: none; box-shadow: var(--ring); }
.live-future-chev { transform: rotate(-90deg); transition: transform 0.15s ease; }
.live-future.is-open .live-future-chev { transform: rotate(0); }
.live-future-t { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.live-future-sub { font-size: 12px; color: var(--text-faint); flex: 1; }
.live-future-body { padding: 0 12px 10px; }
.live-future-body .live-month { margin-top: 6px; }

.live-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.live-more {
  appearance: none;
  cursor: pointer;
  display: block;
  width: 100%;
  margin: 8px 0 2px;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--panel-border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.live-more:hover { color: var(--text); border-color: var(--accent); }

/* ============================ Aba Inadimplentes ============================ */
/* KPIs de resumo (próprios, pra controlar cor por severidade sem a barra do painel) */
.inad-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 4px;
}
.inad-kpi {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 10px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inad-kpi-v { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.inad-kpi-l { font-size: 12px; color: var(--text-muted); }
.inad-kpi--crit { border-left-color: var(--danger); }
.inad-kpi--warn { border-left-color: var(--warn); }
.inad-kpi--good { border-left-color: var(--accent-2); }
@media (max-width: 720px) { .inad-kpis { grid-template-columns: repeat(2, 1fr); } }

.inad-toolbar { margin-top: 16px; }
.inad-count { color: var(--text-muted); font-size: 12px; margin: 10px 2px; }
.inad-wrap { overflow-x: auto; }

.inad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inad-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--panel-border);
}
.inad-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: middle;
}
.inad-row:hover td { background: var(--panel-2); }
.inad-row.is-resolved { opacity: 0.55; }
.inad-row.is-resolved .inad-cli-name { text-decoration: line-through; }

.inad-cli { min-width: 190px; }
.inad-cli-name { display: block; font-weight: 600; color: var(--text); }
.inad-cli-meta { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.inad-val b { color: var(--danger); white-space: nowrap; font-size: 14px; }
.inad-num { text-align: center; color: var(--text-muted); }
.inad-atraso b { display: block; white-space: nowrap; }
.inad-atraso span { display: block; color: var(--text-muted); font-size: 11px; }
.inad-fatura { text-align: center; }

.inad-obs { min-width: 230px; }
.inad-note {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated, var(--panel));
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
}
.inad-note::placeholder { color: var(--text-faint); }
.inad-note:focus { outline: none; border-color: var(--accent); }
.inad-saved { display: inline-block; font-size: 11px; color: var(--text-muted); min-height: 13px; margin-top: 3px; }
.inad-saved.is-ok { color: var(--accent-2); }
.inad-saved.is-err { color: var(--danger); }

.inad-done { text-align: center; }
.inad-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.inad-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inad-toggle-ui {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel-border-strong, var(--panel-border));
  position: relative;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.inad-toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.inad-check:checked + .inad-toggle-ui { background: var(--accent-2); }
.inad-check:checked + .inad-toggle-ui::after { transform: translateX(18px); }
.inad-check:focus-visible + .inad-toggle-ui { box-shadow: 0 0 0 3px var(--ok-bg); }

/* =========================================================================
   COMERCIAL — 1ª aba: lista de clientes (um por cliente, sem repetir por
   assinatura). Nome em destaque; celular e email de login em miúdos embaixo.
   Reusa a toolbar/chips do feed do financeiro (.live-toolbar/.live-chip).
   ========================================================================= */
.com-count {
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 2px 2px 10px;
}

.com-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
}

.com-cli {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--panel-border);
}
.com-cli-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.com-cli:last-child { border-bottom: 0; }
.com-cli:hover { background: var(--accent-soft); }

.com-cli-nome {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* "Em miúdos": um degrau abaixo do nome, em cor secundária. */
.com-cli-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.com-cli-fone { white-space: nowrap; font-variant-numeric: tabular-nums; }
.com-cli-fone.is-empty { color: var(--text-faint); font-style: italic; }
.com-cli-sep { color: var(--text-faint); }
.com-cli-email { overflow-wrap: anywhere; }

.com-more { margin: 14px auto 4px; display: block; }

/* --- Comercial: contador nas abas ---------------------------------------- */
.com-tab-n {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-border);
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fin-tab.is-active .com-tab-n { background: var(--accent-soft); color: var(--accent); }

/* --- Comercial: ação da linha (etiqueta do vendedor + 3 pontinhos) ------- */
.com-cli-acao { display: flex; align-items: center; gap: 8px; }
.com-cli-tag {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
}
.com-dots {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-muted);
  width: 30px;
  height: 26px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.com-dots:hover { color: var(--text); border-color: var(--panel-border-strong); }
.com-dots:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* --- Comercial: menu de escolha do vendedor ------------------------------ */
.com-menu {
  position: fixed;
  z-index: 60;
  display: none;
  min-width: 250px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--panel-border-strong);
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}
.com-menu.is-open { display: block; }
.com-menu-head {
  margin: 0;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-faint);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.com-menu-title {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.com-menu-item {
  appearance: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin-top: 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}
.com-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.com-menu-item.is-current { color: var(--accent); }
.com-menu-check { color: var(--accent); }
.com-menu-clear { color: var(--text-muted); border-top: 1px solid var(--panel-border); border-radius: 0 0 8px 8px; margin-top: 6px; padding-top: 10px; }
.com-menu-clear:hover { color: var(--danger); background: transparent; }

/* --- Comercial: aba do vendedor (cabeçalho + assinaturas) ---------------- */
.com-vend-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 4px;
  font-size: 15px;
  color: var(--text);
}
.com-vend-head span { color: var(--text-muted); font-size: 12.5px; }

/* A linha da carteira ganha uma 3ª faixa (as assinaturas) sob nome e contato. */
.com-cli--full { grid-template-rows: auto auto; align-items: start; }
.com-cli-subs { grid-column: 1 / -1; margin-top: 8px; }

/* Grade da carteira: UMA tabela pra todos os clientes (linha = assinatura, coluna = mês), com
   rolagem horizontal única — é o que mantém a mesma coluna de mês alinhada entre clientes mesmo
   depois de rolar. */
.com-carteira { overflow-x: auto; }
.com-grade { width: 100%; border-collapse: collapse; font-size: 12px; }
/* Piso por coluna de mês: sem isso, mês só com traço encolhe e as colunas ficam desiguais. */
.com-grade thead th:not(.com-grade-info) { min-width: 96px; }
/* Reseta o que as regras globais de tabela aplicam e aqui atrapalham: o `th` é caixa-alta, 11px,
   com fundo cinza e padding de tabela larga; o `td` traz borda inferior; e `tbody tr` tem animação
   de entrada que, com a atualização automática, faria a grade piscar a cada 30s. */
.com-grade th,
.com-grade td {
  padding: 4px 6px;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  background: transparent;
  border-bottom: 0;
  vertical-align: middle;
}
.com-grade tbody tr { animation: none; }
.com-grade tbody tr:hover { background: transparent; }
.com-grade thead th {
  color: var(--text-faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-border);
}
/* A coluna da assinatura fica colada à esquerda pra não sumir ao rolar os meses. Precisa de fundo
   OPACO pros meses passarem por baixo — e o fundo certo é o da página: neste projeto o `.panel` é
   transparente, então usar var(--panel) aqui pintava um bloco mais claro que o resto. */
.com-grade .com-grade-info {
  position: sticky;
  left: 0;
  z-index: 1;
  /* `width:1%` é o truque de tabela pra esta coluna encolher até o conteúdo: assim a folga toda vai
     pras colunas de mês, e não pra coluna da assinatura. */
  width: 1%;
  text-align: left;
  padding-right: 18px;
  background: var(--bg);
  color: var(--text-muted);
}
/* Sem realce no hover das linhas da carteira: são blocos altos, e o tom passaria por trás da
   coluna fixa (que é opaca), deixando um retângulo destoante. */
.com-cli--full:hover { background: transparent; }
/* Grade interna de largura FIXA pra data, valor, ciclo e situação caírem na mesma coluna em todas
   as linhas — com flex, cada linha se ajustava ao próprio texto ("R$ 0,00" x "R$ 1.950,00") e os
   selos ativa/inativa ficavam desalinhados entre si. A data tem tamanho constante (dd/mm/aaaa); o
   valor é alinhado à direita e cabe o maior da base (R$ 6.510,00); o selo já tem largura mínima
   própria, então fecha alinhado dos dois lados.
   ⚠️ A 4ª trilha é `max-content`, e o `min-width` embaixo NÃO é redundante: a célula que segura esta
   grade é um <th> com `width: 1%` (o truque de tabela pra a coluna encolher até o conteúdo), e nessa
   combinação o Chromium dimensiona a trilha pelo selo CURTO e deixa o texto do selo longo vazar pra
   fora da borda — foi exatamente o que aconteceu com "cancelada · até jul/26". O `min-width` é o que
   obriga a célula a reservar a largura real do conteúdo. */
.com-grade-info-in {
  display: grid;
  /* A 1ª coluna é o número da assinatura: fixo em 62px pra a data começar sempre no mesmo x, mesmo
     quando o id passa de 3 pra 4 dígitos. Sem isso as linhas do bloco do cliente ficariam em degrau. */
  grid-template-columns: 62px 148px 92px 52px max-content;
  min-width: max-content;
  align-items: baseline;
  gap: 10px;
}
.com-grade-info-in .com-sub-valor { text-align: right; }

/* Faixa um tom mais clara na linha da assinatura: com a grade larga, é o que deixa seguir a linha
   com o olho até o mês certo. Precisa vencer o fundo da coluna fixa (que é opaco por ser sticky) —
   daí o seletor com a classe da tabela junto, senão `.com-grade .com-grade-info` ganharia. */
.com-grade .com-linha-sub > th,
.com-grade .com-linha-sub > td { background: var(--panel-2); }
.com-grade .com-linha-sub > th:first-child { border-radius: 8px 0 0 8px; }
.com-grade .com-linha-sub > td:last-child { border-radius: 0 8px 8px 0; }
.com-linha-sub + .com-linha-sub > th,
.com-linha-sub + .com-linha-sub > td { box-shadow: inset 0 1px 0 var(--panel-border); }

/* Cabeçalho do cliente e linha de total: colspan na tabela toda, com o conteúdo grudado à esquerda
   (position:sticky no <div> interno) pra não sair da tela quando os meses rolam. */
.com-cli-topo {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  /* Encolhe até o conteúdo: como fica grudado à esquerda enquanto os meses rolam, uma largura fixa
     só criaria uma faixa vazia por cima da grade. */
  width: max-content;
  max-width: 100%;
  /* A tabela centraliza as células (é o certo pras caixinhas de mês); aqui é texto corrido. */
  text-align: left;
}
/* Nome do cliente, o CPF/CNPJ e (na carteira) os ⋯, tudo na mesma linha. `flex-wrap` deixa o
   documento cair pra linha de baixo em tela estreita em vez de espremer o nome; o `min-width: 0` no
   nome é o que permite ele encolher e quebrar — sem isso o flex respeita o tamanho do texto e
   empurra o documento pra fora da caixa. */
.com-cli-nome-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.com-cli-nome-linha .com-cli-nome { min-width: 0; }

/* CPF/CNPJ ao lado do nome: um degrau abaixo em tamanho e cor, pra identificar sem competir com o
   nome. `tabular-nums` alinha os dígitos entre as linhas da lista, e `nowrap` impede que a máscara
   quebre no meio (um "12.345.678/" órfão no fim da linha é ilegível). */
.com-cli-doc {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: none;
}
.com-linha-cli > td { padding: 16px 6px 8px !important; }
.com-linha-total > td { padding: 8px 6px 18px !important; }
.com-linha-vazia > td { padding: 0 6px 16px !important; }
.com-grade tbody .com-linha-cli:not(:first-child) > td { border-top: 1px solid var(--panel-border); padding-top: 20px !important; }
/* Número da assinatura no banco do Wavoip. É o que liga a linha da carteira à aba Setup, à fatura no
   Asaas e a qualquer conferência feita direto no banco — por isso fica à vista, e não só na dica. */
.com-sub-id {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  user-select: all;
}
.com-sub-data { color: var(--text-muted); }
.com-sub-valor { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.com-sub-ciclo { color: var(--text-faint); }

/* Caixa colorida por mês: verde = pago, âmbar = aguardando, vermelho = vencida, cinza = cancelada. */
.com-mes {
  display: inline-block;
  min-width: 78px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mes-c);
  background: var(--panel-2);
  border: 1px solid var(--mes-c);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .com-mes {
    background: color-mix(in srgb, var(--mes-c) 18%, transparent);
    border-color: color-mix(in srgb, var(--mes-c) 45%, transparent);
  }
}
.com-mes--p { --mes-c: var(--fin-good); }
.com-mes--a { --mes-c: var(--fin-warning); }
.com-mes--v { --mes-c: var(--fin-critical); }
/* Estornada: rosa, vizinho do vermelho de "vencida" de propósito — as duas são dinheiro que deu
   errado, e estorno é mais grave que vencer (já entrou e voltou). O matiz não precisa ser
   distinguível de longe: cada caixinha traz a PALAVRA dentro dela, então a cor é reforço, não o canal
   de leitura — é o que permite a grade ter 6 situações sem cair no problema de daltonismo que impede
   uma legenda colorida ao lado. Contraste medido sobre a célula: 4,6:1 escuro / 5,9:1 claro. */
.com-mes--e { --mes-c: var(--fin-rose); }
.com-mes--c { --mes-c: var(--fin-neutral); }
/* Anulada: cobrança refeita de cliente ativo. Não é perda de nada, então perde o preenchimento e fica
   só com o contorno — a diferença é de FORMA, não de matiz, e some do olhar quem só quer ver o que
   deu errado. */
.com-mes--n { --mes-c: var(--text-faint); background: transparent !important; border-style: dashed; }
.com-mes-vazio { color: var(--text-faint); }

/* Caixinha que É um link de cobrança (vencida/aguardando). Vira <a> ou <button>, então precisa perder
   a aparência de controle e ganhar a de caixinha — e sinalizar que é clicável, senão ninguém descobre
   o link. O sinal é a setinha ↗ (ou o número, quando há várias), reforçado por sublinhado no hover. */
a.com-mes,
button.com-mes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  /* O <button> herda a borda do .com-mes; o reset abaixo evita que o agente de usuário sobreponha. */
  border-width: 1px;
  border-style: solid;
}
a.com-mes:hover,
button.com-mes:hover { text-decoration: underline; }
a.com-mes:focus-visible,
button.com-mes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.com-mes-seta-link { font-size: 9px; line-height: 1; opacity: 0.75; }
/* Quantas cobranças em aberto há naquele mês. Só aparece quando é mais de uma. */
.com-mes-n-link {
  min-width: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mes-c);
  color: var(--panel);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

/* Lista de cobranças de um mês (quando a caixinha tem mais de uma). Elemento único no body e
   `position: fixed`, igual ao menu dos 3 pontinhos: dentro da grade seria cortado pela rolagem
   horizontal. */
.com-cob {
  position: fixed;
  z-index: 60;
  display: none;
  min-width: 268px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
.com-cob.is-open { display: block; }
.com-cob-head {
  margin: 2px 6px 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}
.com-cob-tit {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
/* Colunas fixas pra situação, vencimento e valor alinharem entre as linhas. */
.com-cob-item {
  display: grid;
  grid-template-columns: 74px 1fr auto 12px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}
.com-cob-item:hover { background: var(--panel-2); color: var(--text); }
.com-cob-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.com-cob-sit {
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--mes-c);
  color: var(--mes-c);
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
}
.com-cob-venc { font-variant-numeric: tabular-nums; }
.com-cob-valor { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.com-cob-ir { font-size: 10px; opacity: 0.7; }
.com-cob-pe {
  margin: 6px 8px 2px;
  padding-top: 6px;
  border-top: 1px solid var(--panel-border);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Comercial: caixa "Assinaturas canceladas" ---------------------------- */
/* As canceladas saem do meio das vivas e são agrupadas no fim do bloco do cliente. A "caixa" é
   feita com um rótulo em colspan + as linhas esmaecidas logo abaixo: envolver os <tr> num <div>
   quebraria a tabela, e com ela o alinhamento da coluna de mês entre todos os clientes — que é
   justamente a razão de a carteira inteira ser UMA tabela só. */
.com-linha-cancel-head > td { padding: 12px 6px 4px !important; }
/* A caixa abre e fecha: o cabeçalho é um <button> de verdade (não um <div> com onclick) pra vir de
   graça o foco por teclado, o Enter/Espaço e o anúncio do estado por leitor de tela via
   aria-expanded. Fechada por padrão — ver o porquê em comercial.js. */
.com-cancel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 4px;
  margin-left: -4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
}
.com-cancel-toggle:hover { background: var(--panel-2); border-color: var(--panel-border); color: var(--text-muted); }
.com-cancel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A seta aponta pra baixo quando fechada ("abre pra baixo") e gira meia volta quando aberta. */
.com-cancel-seta {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.16s ease;
}
.com-cancel-toggle.is-open .com-cancel-seta { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .com-cancel-seta { transition: none; }
}
.com-cancel-tit {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.com-cancel-n {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}
.com-cancel-toggle:hover .com-cancel-n { background: var(--panel); }
.com-cancel-nota { font-size: 11.5px; color: var(--text-muted); }

/* Selo da cancelada que AINDA está no mês pago: fica entre as vivas, então precisa se distinguir das
   canceladas de fato sem virar um quarto status. Contorno tracejado = "situação de passagem".
   O padding cai 1px pra compensar a borda: `box-sizing` não segura a altura aqui (o selo não tem
   altura declarada), e sem isso esta linha ficaria 2px mais alta que as vizinhas. */
.live-badge.is-vigente { border: 1px dashed var(--live-c); padding: 2px 9px; }

/* Linha cancelada: mesma anatomia da viva, tom rebaixado. Ela ainda precisa ser LIDA (é o histórico
   do cliente), só não pode competir com a carteira viva logo acima.
   ⚠️ O fundo tem que continuar OPACO: a primeira coluna é `position:sticky`, e com `transparent`
   as caixinhas de mês passariam por baixo dela ao rolar. Por isso `var(--bg)` (a cor da página) e
   não `transparent` — o efeito visual é o mesmo, sem o vazamento. */
.com-grade .com-linha-sub.is-cancel > th,
.com-grade .com-linha-sub.is-cancel > td { background: var(--bg); }
/* Risco no valor: diz "esta não entra na soma" sem precisar de mais uma legenda. */
.com-linha-sub.is-cancel .com-sub-valor {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: line-through;
}
.com-linha-sub.is-cancel .com-sub-data,
.com-linha-sub.is-cancel .com-sub-id,
.com-linha-sub.is-cancel .com-sub-ciclo { color: var(--text-faint); }
.com-linha-sub.is-cancel .com-mes { opacity: 0.5; }

.com-subs-total { margin-top: 7px; font-size: 12.5px; color: var(--text-muted); }
.com-subs-total b { color: var(--text); font-size: 14px; }
.com-subs-ativo { margin-left: 4px; }
.com-subs-cancel { margin-left: 4px; color: var(--text-faint); }
.com-subs-vazio { margin: 0; font-size: 12px; color: var(--text-faint); font-style: italic; }

/* --- Comercial: resumo da assinatura na linha da aba Clientes ------------- */
/* A linha da aba Clientes tem 3 colunas (info | assinatura | ação); a da carteira do vendedor
   segue com 2, porque lá as assinaturas vão detalhadas na faixa de baixo. */
.com-cli--lista { grid-template-columns: 1fr auto auto; }

.com-assin-wrap { display: flex; align-items: center; gap: 10px; }
.com-assin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.com-assin b { color: var(--text); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.com-assin > span { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.com-assin.is-empty { color: var(--text-faint); font-size: 11.5px; font-style: italic; }

/* Cor do selo: mesmos tokens do "Ao vivo" (o `.live-badge` lê --live-c do ancestral; aqui a
   própria etiqueta define). */
.com-badge--ok { --live-c: var(--fin-good); }
.com-badge--wait { --live-c: var(--fin-warning); }
.com-badge--off { --live-c: var(--fin-neutral); }

/* Em tela estreita a assinatura desce pra baixo do nome em vez de espremer as 3 colunas. */
@media (max-width: 760px) {
  .com-cli--lista { grid-template-columns: 1fr auto; }
  .com-assin-wrap { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
}

/* =========================================================================
   COMERCIAL — cartões de indicadores da carteira (entre o nome do vendedor e
   a busca). Um cartão para o dinheiro e outro com três mini-gráficos.
   ========================================================================= */
.com-ind {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.6fr);
  gap: 12px;
  margin: 0 2px 16px;
}
@media (max-width: 900px) { .com-ind { grid-template-columns: 1fr; } }
/* Aba do vendedor: faturas (maior, tem os chips e o gráfico de 12 barras) + meta do mês ao lado. */
/* Uma coluna só: o vendedor agora tem UM cartão, e as duas colunas de dentro são feitas por
   `.com-vend-grade`. */
.com-ind--vend { grid-template-columns: 1fr; }
/* Com o fio entre os grupos de chips: quando eles quebram pra duas linhas, o fio some. */
@media (max-width: 560px) { .com-fat-fio { display: none; } }
.com-ind--vazio {
  display: block;
  margin: 0 2px 16px;
  padding: 14px 16px;
  border: 1px dashed var(--panel-border);
  border-radius: 12px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.com-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.com-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.com-card-tit { font-size: 12.5px; font-weight: 600; color: var(--text); }
.com-card-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
/* Número-herói: o valor do mês corrente, que é a leitura principal do cartão. */
.com-card-heroi {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.com-card-pe { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
/* Nota do que ficou de fora da conta (assinaturas canceladas). Um tom abaixo do pé do cartão: é
   ressalva, não indicador — mas precisa estar visível, porque explica um total menor do que a
   pessoa esperava ver. */
.com-card-nota {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-faint);
  margin: -4px 0 8px;
}

/* Corpo do cartão de indicadores: número à esquerda, gráfico à direita, apoiados na MESMA linha de
   base (`align-items: end`). Empilhados um sobre o outro o cartão ficava alto e estreito de conteúdo
   com metade da largura vazia; lado a lado, a largura toda trabalha. Em tela estreita voltam a
   empilhar — lado a lado, o gráfico ficaria menor que a legenda dele. */
/* O GRÁFICO é quem tem a largura mandatória (até 640px) e o bloco de números fica com a sobra — não
   o contrário. Com a coluna dos números em `auto`, ela crescia até o texto mais longo (a nota das
   canceladas) e sobravam 70px pro gráfico, que virava um risco no canto. Assim as 12 barras mantêm
   sempre o mesmo desenho, e o texto é que se acomoda. */
/* Proporção, e não um teto em px: o cartão agora divide a linha com o da meta, e um `640px` fixo
   comprimia a coluna dos números quando a largura sobrava menos. Os dois `minmax(0, …)` são o que
   impede a coluna de crescer até o texto — foi assim que o gráfico já encolheu pra 70px uma vez. */
.com-card-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 10px 24px;
  /* `stretch` + o `margin-top:auto` do gráfico: o número fica no ALTO e o gráfico no RODAPÉ, em vez de
     os dois colados no meio com um vão embaixo. É o que faz este gráfico terminar na mesma linha do
     gráfico do cartão da meta ao lado — sem isso, os dois cartões esticam pra mesma altura mas os
     gráficos param em alturas diferentes e não dá pra comparar um com o outro. */
  align-items: stretch;
  flex: 1;
  min-height: 0;
  margin-top: 2px;
}
.com-card-num { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* O número e o pé já têm margem própria; dentro do bloco a nota não precisa da margem negativa. */
.com-card-num .com-card-nota { margin: 2px 0 0; }
.com-card-num .com-card-pe { margin-bottom: 0; }

/* --- As duas leituras do cartão "Financeiro geral": recebido e vencido ------
   Uma linha cada, rótulo em cima e valor embaixo. Empilhado (e não "rótulo: valor" na mesma linha)
   porque o cartão divide a largura com o gráfico — lado a lado, o valor quebraria no meio do R$. */
.com-num-linha { display: flex; flex-direction: column; gap: 0; margin-top: 8px; cursor: help; }
.com-num-linha:first-child { margin-top: 2px; }
.com-num-rot { font-size: 11px; color: var(--text-muted); }
.com-num-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Vencido é dinheiro que não entrou, mas o NÚMERO fica na tinta normal: `--fin-critical` é token de
   MARCA nesta folha (borda/ponto), não de texto — ver a nota em "Painel financeiro". A situação vem
   do ponto colorido antes do rótulo e do tamanho menor, que já põe o vencido em segundo plano. */
.com-num-val--venc { font-size: 18px; }
.com-num-linha--venc .com-num-rot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--fin-critical);
  vertical-align: baseline;
}

/* Convite ao clique / volta pro ano. Os dois ocupam a mesma posição, então trocam sem a caixa pular. */
.com-num-dica { margin-top: 8px; font-size: 10.5px; color: var(--text-faint); font-style: italic; }
.com-num-voltar {
  margin-top: 8px;
  align-self: flex-start;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-muted);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.com-num-voltar:hover { border-color: var(--panel-border-strong); color: var(--text); }
.com-num-voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) { .com-card-corpo { grid-template-columns: 1fr; } }

/* Três métricas lado a lado, cada uma com o próprio gráfico de UMA série. */
/* Seletor de situação do cartão "Financeiro geral": um gráfico só, a série muda aqui.
   O ponto colorido de cada chip é a LEGENDA — com uma série de cada vez não existe caixa de legenda,
   então é o chip que amarra "verde = pagas". A cor nunca anda sozinha: vem sempre com o rótulo ao
   lado, que é a regra pra cor de status. O número e o rótulo do cartão usam tokens de TEXTO, nunca a
   cor da série — quem carrega a identidade é a marca, não a tipografia. */
/* Dois grupos de chips na MESMA fila: situação (com a cor da série) e unidade (R$ / quantidade),
   separados por um fio. Numa fila só porque a pergunta é uma só — "quanto venceu, em reais?"; em duas
   filas empilhadas o cartão ficaria com mais controle do que gráfico. `flex-wrap` deixa o segundo
   grupo cair pra linha de baixo em tela estreita, e aí o fio some (ver abaixo) pra não virar um
   traço solto no meio do nada. */
.com-fat-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 10px; }
.com-fat-grupo { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.com-fat-fio { width: 1px; align-self: stretch; min-height: 18px; background: var(--panel-border); }
/* Chip de unidade: sem ponto colorido, porque unidade não é uma série — é a régua. Pintá-lo daria a
   entender que "R$" tem cor própria no gráfico, e a cor ali é sempre a da situação escolhida. */
.com-fat-chip--un.is-active {
  --fat-c: var(--accent);
  border-color: var(--fat-c);
}
.com-fat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
}
.com-fat-chip:hover { border-color: var(--panel-border-strong); color: var(--text); }
.com-fat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* O ponto tem 8px: abaixo disso vira sujeira e some pra quem enxerga pouco. */
.com-fat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fat-c); flex: none; }
.com-fat-chip--pagas { --fat-c: var(--fin-good); }
.com-fat-chip--vencidas { --fat-c: var(--fin-critical); }
.com-fat-chip--canceladas { --fat-c: var(--fin-neutral); }
.com-fat-chip--estornadas { --fat-c: var(--fin-rose); }
/* Selecionado: borda e fundo na cor da série, texto em tinta normal (não colorida). */
.com-fat-chip.is-active { border-color: var(--fat-c); color: var(--text); font-weight: 600; }
@supports (background: color-mix(in srgb, red, blue)) {
  .com-fat-chip.is-active { background: color-mix(in srgb, var(--fat-c) 14%, transparent); }
}

/* Marcas: barra fina, ponta arredondada só em cima e ancorada na linha de base, 2px de respiro
   entre elas. A cor é da SÉRIE (uma por gráfico); número e rótulo ficam em token de texto — cor
   nunca é o único portador da informação. */
/* Cada mês é uma COLUNA (barra + rótulo), não uma barra solta: é o que permite pôr o nome do mês
   embaixo alinhado com a barra dele. A linha de base saiu daqui e foi pra `.com-spark-caixa`, senão
   ficaria por baixo dos rótulos em vez de entre a barra e o nome. */
.com-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-top: 8px;
  /* Encosta no rodapé da célula (ver `.com-card-corpo`). */
  margin-top: auto;
  /* A largura NÃO é controlada aqui, e sim pela coluna do grid em `.com-card-corpo` — um mecanismo
     só. Quando havia `max-width` aqui E uma coluna elástica lá, os dois disputavam e o gráfico
     encolhia pra ~70px num canto. */
}
/* A coluna virou <button>: os `border/background/font` zerados são pra ela continuar parecendo parte
   do gráfico, e não um botão de formulário. O que revela que dá pra clicar é o cursor, o realce no
   hover e a dica de mouse. */
.com-spark-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.com-spark-col:hover { background: var(--chip-bg); }
.com-spark-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Mês em foco: fundo marcado e rótulo em tinta cheia. A barra dele NÃO muda de cor — a cor ali é a
   da situação escolhida no chip, e repintar confundiria as duas leituras. */
.com-spark-col.is-sel { background: var(--accent-soft); }
.com-spark-col.is-sel .com-spark-rot { color: var(--accent); font-weight: 700; }
.com-spark-col.is-sel .com-bar { opacity: 1; }
.com-spark-caixa {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--panel-border);
}
.com-spark-rot {
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Mês corrente: o rótulo em tinta cheia. Marca onde termina o que já aconteceu, agora que a régua
   segue pra frente até a última cobrança agendada. */
.com-spark-col.is-hoje .com-spark-rot { color: var(--text); font-weight: 700; }
.com-bar {
  width: 100%;
  min-width: 3px;
  /* Teto de largura: sem ele, poucas barras num cartão largo viram blocos gordos — o guia pede marca
     fina. A folga sobrando fica dentro da própria coluna, que é centralizada. */
  max-width: 18px;
  border-radius: 3px 3px 0 0;
  background: var(--text-faint);
  transition: opacity 0.12s ease;
}
.com-bar:hover { opacity: 0.7; }
/* Mês sem nada: toco no rodapé, em cinza de traço — não some, mas também não compete. */
.com-bar.is-zero { height: 2px !important; background: var(--panel-border-strong); border-radius: 1px; }
.com-spark--pagas .com-bar { background: var(--fin-good); }
.com-spark--venc .com-bar { background: var(--fin-critical); }
.com-spark--canc .com-bar { background: var(--fin-neutral); }
.com-spark--est .com-bar { background: var(--fin-rose); }
/* --- Comercial: cartão da meta na aba do vendedor ------------------------- */
/* `overflow: visible` pelo mesmo motivo do card da aba Clientes: este card também ganhou o seletor de
   mês, e a lista é posicionada em absoluto — sem isso ela seria cortada na borda do card. */
/* Coluna direita do cartão do vendedor (meta + comissão). Era um cartão à parte; hoje divide a
   moldura com o gráfico. `overflow: visible` continua necessário: a lista do seletor de mês é
   posicionada em absoluto e precisa poder passar da borda. */
.com-metavend { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.com-card--vend { overflow: visible; }

/* As duas colunas dentro do cartão único: gráfico à esquerda (mais larga, carrega os chips e 12
   barras) e meta/comissão à direita, separadas por um fio. É o MESMO desenho de antes — o que saiu
   foi a moldura do meio, porque os dois lados falam do mesmo mês e do mesmo seletor. */
.com-vend-grade {
  display: grid;
  grid-template-columns: minmax(340px, 1.5fr) minmax(250px, 1fr);
  gap: 0 22px;
  flex: 1;
  min-height: 0;
}
.com-vend-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.com-vend-col--meta { padding-left: 22px; border-left: 1px solid var(--panel-border); }
@media (max-width: 1000px) {
  .com-vend-grade { grid-template-columns: 1fr; gap: 14px; }
  /* Empilhado, o fio vertical vira horizontal — senão a separação some justamente onde ela passa a
     ser mais necessária (um bloco embaixo do outro). */
  .com-vend-col--meta { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--panel-border); }
}

/* Progresso da meta. A barra é a mesma cor do gráfico de venda nova logo abaixo, porque mede a MESMA
   coisa — usar duas cores pro mesmo número faria parecer que são medidas diferentes. */
.com-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.com-prog-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.com-prog-val { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-prog-pct { font-size: 12.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.com-prog-trilho {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}
.com-prog-barra {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  /* Piso de 3px: com 0,4% da meta a barra some e parece que nada foi vendido. */
  min-width: 3px;
  transition: width 0.25s ease;
}
/* Meta batida: verde de "bom" — aqui a cor de status É apropriada, porque o número passou a significar
   atingiu/não atingiu, que é exatamente o que status codifica. */
.com-prog.bateu .com-prog-barra { background: var(--fin-good); }
.com-prog.bateu .com-prog-pct { color: var(--fin-good); }
.com-prog-pe { font-size: 11px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .com-prog-barra { transition: none; } }

/* Comissão do vendedor, no rodapé do cartão da meta (era o espaço "em construção").
   `margin-top: auto` ancora no RODAPÉ: o cartão estica pra acompanhar a altura do vizinho, e sem
   isso a faixa ficaria grudada no progresso com um vazio embaixo. */
.com-comis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}
.com-comis-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.com-comis-rot { font-size: 11px; color: var(--text-muted); }
/* O percentual da faixa atual: pílula discreta quando é 0% (não há o que comemorar) e em destaque
   quando existe comissão. */
.com-comis-pct {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--chip-bg);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.com-comis.tem-comis .com-comis-pct { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.com-comis-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.com-comis.tem-comis .com-comis-val { color: var(--text); }
.com-comis-pe { font-size: 11px; color: var(--text-muted); line-height: 1.35; }

/* Régua das 4 faixas: a regra inteira à vista, com a atual marcada. Quatro colunas iguais pra os
   degraus lerem como uma escada, e não como uma lista. */
.com-comis-faixas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.com-comis-faixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  line-height: 1.1;
  text-align: center;
}
.com-comis-faixa b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.com-comis-faixa span { font-size: 8.5px; white-space: nowrap; }
.com-comis-faixa.is-atual {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.com-spark .com-bar.is-zero { background: var(--panel-border-strong); }

.com-tip {
  position: fixed;
  z-index: 70;
  display: none;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.com-tip.is-open { display: block; }

/* --- Comercial: rosca "Clientes por vendedor" (aba Clientes) -------------- */
.com-ind--rosca { grid-template-columns: 1fr; }
/* Topo da aba Clientes: rosca + meta do mês, lado a lado. A meta leva a coluna maior — ela carrega o
   campo, o total e o gráfico dos vendedores, enquanto a rosca é uma figura de tamanho fixo. */
.com-ind--clientes { grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.35fr); }
@media (max-width: 900px) { .com-ind--clientes { grid-template-columns: 1fr; } }

/* --- Comercial: card da meta do mês --------------------------------------- */
/* `overflow: visible` explícito: a lista de meses é posicionada em absoluto e precisa poder passar da
   borda arredondada do card. */
.com-card--meta { gap: 6px; overflow: visible; }

/* Canto do card: seletor de mês + contagem de vendedores, nesta ordem. O seletor ficou no lugar que
   era só da contagem, e ela passou pro lado. */
.com-card-canto { display: inline-flex; align-items: baseline; gap: 10px; flex: none; }

.com-mes-sel { position: relative; display: inline-flex; }
.com-mes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.com-mes-btn:hover { border-color: var(--panel-border-strong); color: var(--text); }
.com-mes-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.com-mes-btn.is-open { border-color: var(--accent); color: var(--text); }
.com-mes-seta { font-size: 9px; line-height: 1; transition: transform 0.16s ease; }
.com-mes-btn.is-open .com-mes-seta { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .com-mes-seta { transition: none; } }

/* Lista de meses. Ancorada no botão (não `fixed`): fica dentro do card, então acompanha a rolagem
   sozinha e não precisa ser fechada quando a página rola. */
.com-mes-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 218px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
/* 4 colunas fixas (nome | "hoje" | meta | ✓) pra os valores alinharem entre as linhas mesmo quando só
   uma delas tem o selo "hoje" ou o ✓ — a coluna do ✓ existe vazia nas outras. */
.com-mes-item {
  display: grid;
  grid-template-columns: 1fr auto auto 12px;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.com-mes-item:hover { background: var(--panel-2); color: var(--text); }
.com-mes-item.is-current { color: var(--text); font-weight: 600; }
/* Mês que ainda não começou: aceita meta (planejamento), mas não tem desempenho. Um tom abaixo pra
   não parecer histórico. */
.com-mes-item.is-futuro .com-mes-item-nome { color: var(--text-faint); }
.com-mes-item.is-futuro:hover .com-mes-item-nome { color: var(--text-muted); }
.com-mes-item-nome { white-space: nowrap; }
/* Selo do mês corrente. Separado do ✓ de propósito: ✓ é "o card está mostrando este"; "hoje" é "este
   é o mês de verdade". Com uma marca só, dava pra escolher agosto e achar que já é agosto. */
.com-mes-hoje {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* A meta de cada mês aparece na própria lista: é o que deixa comparar os meses sem ter que abrir um
   por um. "sem meta" é dito com palavra, não com um R$ 0,00 que pareceria meta zerada de propósito. */
.com-mes-item-meta { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.com-mes-check { color: var(--accent); font-size: 11px; }

/* Campo de dinheiro + o rótulo "por vendedor" na mesma linha: sem ele o número solto poderia ser lido
   como a meta total, que é justamente a outra quantia do card. */
.com-meta-campo { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.com-meta-input {
  width: 9.5em;
  padding: 7px 10px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.com-meta-input::placeholder { color: var(--text-faint); font-weight: 400; }
.com-meta-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Quem não pode editar (vendedor) vê o mesmo número sem cara de campo — nada de campo desabilitado,
   que parece defeito. */
.com-meta-fixo { font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-meta-campo-rot { font-size: 11.5px; color: var(--text-muted); }

.com-meta-total { font-size: 12.5px; color: var(--text-muted); }
.com-meta-total b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.com-meta-vazia { font-size: 11.5px; color: var(--text-faint); font-style: italic; }

/* Gráfico de vendas por vendedor. Barras verticais, todas na MESMA cor (a identidade vem do nome
   embaixo de cada uma — ver o porquê em comercial.js). */
/* O gráfico CRESCE pra ocupar a altura sobrando, em vez de ser empurrado pro rodapé com
   `margin-top:auto`. Os dois cards do topo esticam pra mesma altura (a da rosca, que é alta por causa
   da legenda), e com a barra de altura fixa sobrava um vão vazio no meio deste card. Ocupando o
   espaço, as barras ficam mais altas — e barra mais alta é mais fácil de comparar. */
.com-meta-graf { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; padding-top: 10px; }
.com-meta-graf-tit { font-size: 10.5px; color: var(--text-faint); }
.com-meta-cols { display: flex; align-items: flex-end; gap: 8px; flex: 1; min-height: 0; }
.com-meta-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.com-meta-num { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A caixa é a área do gráfico: altura fixa, barra crescendo do rodapé. A linha da meta é desenhada
   DENTRO de cada caixa (um `::before` na altura da meta) e não como um elemento único atravessando o
   gráfico — atravessar exigiria posicionamento absoluto sobre as colunas, e aí a linha sairia de
   lugar sempre que o número em cima de uma barra quebrasse de tamanho. Repetida por coluna, ela é
   lida como uma linha só, com um respiro nos vãos. */
.com-meta-caixa {
  position: relative;
  width: 100%;
  /* Elástica, com piso: cresce com o card, mas nunca fica tão baixa que a diferença entre duas
     barras deixe de ser visível. */
  flex: 1;
  min-height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.com-meta-graf.tem-meta .com-meta-caixa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--meta-pct);
  border-top: 1px dashed var(--text-faint);
}
.com-meta-bar {
  width: 100%;
  max-width: 30px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  transition: opacity 0.12s ease;
}
.com-meta-col:hover .com-meta-bar { opacity: 0.72; }
/* Vendedor sem venda no mês: toco no rodapé. Não some (o nome dele precisa continuar na fila), mas
   também não finge altura. */
.com-meta-bar.is-zero { height: 2px !important; background: var(--panel-border-strong); border-radius: 1px; }
.com-meta-nome {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) { .com-meta-bar { transition: none; } }

/* --- Vendedor FORA da conta da meta -------------------------------------
   Fica no fim do gráfico, depois de um traço vertical: não é o último colocado do ranking, é outra
   categoria. A barra perde a cor de dado e vira cinza de traço — a mesma distinção que o resto do
   app usa entre "número que conta" e "número de contexto". A informação não depende só da cor: tem
   o traço separando, o rótulo "fora da meta" embaixo e a explicação na dica de mouse. */
.com-meta-col--corte {
  border-left: 1px dashed var(--panel-border-strong);
  padding-left: 8px;
  margin-left: 2px;
}
.com-meta-col--fora .com-meta-bar { background: var(--text-faint); opacity: 0.75; }
.com-meta-col--fora .com-meta-num,
.com-meta-col--fora .com-meta-nome { color: var(--text-faint); }
/* A caixa dele não leva a linha tracejada da meta — ele não é medido por ela. */
.com-meta-col--fora .com-meta-caixa::before { display: none; }
.com-meta-fora-rot {
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
}

/* A conta da meta total, em letra miúda embaixo do valor: "R$ 20.000,00 × 4 · Flávio fora da meta". */
.com-meta-conta { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.com-card--rosca { gap: 6px; }
.com-rosca-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.com-rosca { position: relative; width: 132px; height: 132px; flex: none; }
.com-rosca svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.com-fatia-trilho { fill: none; stroke: var(--panel-border); stroke-width: 13; }
.com-fatia { fill: none; stroke-width: 13; }
/* Número geral no meio da rosca — é a leitura principal do cartão. */
.com-rosca-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.com-rosca-centro b { font-size: 21px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-rosca-centro span { font-size: 10.5px; color: var(--text-muted); }

/* A legenda É a tabela: nome, quantidade e percentual. A cor localiza a fatia, mas quem informa
   é o número — 5 vendedores não cabem em 5 matizes distinguíveis (medido no validador). */
/* Teto de largura: esticada no cartão inteiro, o nome fica num canto e o número no outro, e o
   olho perde a ligação entre os dois. */
.com-leg { list-style: none; margin: 0; padding: 0; flex: 1 1 300px; min-width: 240px; max-width: 460px; }
.com-leg-item {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--panel-border);
}
.com-leg-item:last-child { border-bottom: 0; }
.com-leg-cor { width: 10px; height: 10px; border-radius: 3px; background: var(--text-faint); }
.com-leg-nome { color: var(--text-muted); overflow-wrap: anywhere; }
.com-leg-n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.com-leg-pct { color: var(--text-faint); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

/* Rodapé "Sem vendedor": saiu da rosca e virou uma linha clicável, fechada por padrão. Repete a mesma
   grade da legenda pra a linha nascer alinhada com as de cima, mesmo estando fora da <ul>. É um
   <button> de verdade — foco por teclado, Enter/Espaço e o estado anunciado via aria-expanded. */
.com-leg-sem {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 7px 8px;
  border: 1px dashed var(--panel-border-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.com-leg-sem:hover { border-color: var(--text-faint); color: var(--text-muted); }
.com-leg-sem:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.com-leg-sem.is-open { border-style: solid; border-color: var(--panel-border); }
/* O "ver" ocupa as duas últimas colunas quando fechado, pra a linha não ficar com buracos. */
.com-leg-ver {
  grid-column: 3 / span 2;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

/* Cor FIXA por vendedor (posição no quadro), nunca por tamanho da fatia. */
:root[data-theme="dark"] {
  --com-v0: #60a5fa; --com-v1: #fb923c; --com-v2: #2dd4bf; --com-v3: #e879f9; --com-v4: #fbbf24;
}
:root[data-theme="light"] {
  --com-v0: #2563eb; --com-v1: #ea580c; --com-v2: #0d9488; --com-v3: #c026d3; --com-v4: #ca8a04;
}
.com-fatia--0 { stroke: var(--com-v0); } .com-leg-cor.com-fatia--0 { background: var(--com-v0); }
.com-fatia--1 { stroke: var(--com-v1); } .com-leg-cor.com-fatia--1 { background: var(--com-v1); }
.com-fatia--2 { stroke: var(--com-v2); } .com-leg-cor.com-fatia--2 { background: var(--com-v2); }
.com-fatia--3 { stroke: var(--com-v3); } .com-leg-cor.com-fatia--3 { background: var(--com-v3); }
.com-fatia--4 { stroke: var(--com-v4); } .com-leg-cor.com-fatia--4 { background: var(--com-v4); }
.com-fatia--sem { stroke: var(--fin-neutral); } .com-leg-cor.com-fatia--sem { background: var(--fin-neutral); }

/* Dica no estado vazio da aba Clientes: explica que a lista completa não fica aberta ali. */
.com-busca-dica { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--text-faint); }

/* ---------- Aviso de "dados salvos" ----------
   Quando o banco do Wavoip recusa a consulta (teto de conexões da conta), o servidor entrega a
   última leitura boa em vez de deixar a tela vazia. Estes dois avisos existem pra ninguém confundir
   dado guardado com dado de agora: âmbar (atenção), não vermelho — nada está quebrado, só atrasado. */
.panel-count.is-stale {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn);
  font-weight: 600;
}

.live-stale {
  margin: 10px 2px 0;
  padding: 9px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

/* ===== Comercial · aba Setup (conferência da taxa de implantação) ===== */
/* O setup não existe no banco do Wavoip: esta tela é onde a dedução automática vira número
   confirmado. Por isso ela é mais "formulário" que "relatório" — o campo editável é o protagonista
   e cada linha diz de onde o palpite veio. */
.com-setup-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.com-setup-tit { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.com-setup-sub { margin: 0; max-width: 70ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.com-setup-sub b { color: var(--text); }
.com-setup-soma {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.com-setup-soma span { font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
.com-setup-meses { margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap; }

.com-setup-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.com-setup-tab th,
.com-setup-tab td {
  padding: 8px 10px;
  text-align: left;
  font-weight: 400;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: middle;
}
.com-setup-tab thead th {
  color: var(--text-faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.com-setup-tab tbody tr { animation: none; }
/* Linha já conferida recua um tom: o olho vai direto pro que ainda falta. */
.com-setup-tab tbody tr.is-ok .com-setup-cli b { color: var(--text-muted); }
.com-setup-n { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-setup-cli b { display: block; color: var(--text); font-weight: 600; }
.com-setup-cli span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--text-faint); }
.com-setup-sem { color: var(--text-faint); font-style: italic; }

/* Selo de confiança da dedução. Três níveis, e a cor NUNCA anda sozinha: o rótulo diz em palavras
   ("boa", "razoável", "sem base") e a dica de mouse explica o critério. */
.com-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: help;
  vertical-align: middle;
}
.com-selo--ok { border-color: var(--fin-good); color: var(--fin-good); }
.com-selo--med { border-color: var(--warn); color: var(--warn); }
.com-selo--low { color: var(--text-faint); }

.com-setup-edit { display: flex; align-items: center; gap: 8px; }
.com-setup-input {
  width: 110px;
  padding: 5px 9px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.com-setup-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.com-setup-input:disabled { opacity: 0.5; }
.com-setup-estado { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.com-setup-estado.is-ok { color: var(--fin-good); }

/* ===== Financeiro · aba Relatórios ===== */
/* Uma ficha por alvo: nome em cima, os meses embaixo — o desenho que o Leonardo pediu. Cliente
   pós-pago e revenda usam a MESMA ficha; muda só o subtítulo e a regra de cobrança. */
.rel-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 18px 2px 12px; }
.rel-tit { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.rel-sub { margin: 0; max-width: 66ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* Tarja de "isto ainda é desenho". Some quando a geração real entrar. */
.rel-tarja {
  margin: 0 2px 18px;
  padding: 9px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}

.rel-grupo {
  margin: 22px 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.rel-card {
  margin: 0 2px 10px;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.rel-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rel-card-nome { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.rel-card-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.rel-card-canto { display: flex; align-items: center; gap: 10px; flex: none; }
/* A janela é o dado que distingue um alvo do outro — ganha peso de etiqueta, não de legenda. */
.rel-janela {
  padding: 3px 9px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rel-regra { margin: 10px 0 0; font-size: 12.5px; color: var(--text); }
.rel-regra--falta { color: var(--text-faint); font-style: italic; }
/* Ponto que precisa de decisão humana (CNPJ em duas contas, conta sem dispositivo). Âmbar: é
   atenção, não erro. */
.rel-aviso {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Os meses, em fila. O mais recente primeiro — é o que se consulta. */
.rel-meses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rel-mes {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 132px;
  padding: 9px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rel-mes:hover { border-color: var(--accent); }
.rel-mes:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Período ainda correndo: tracejado, porque o número vai mudar até fechar a janela. */
.rel-mes.is-aberto { border-style: dashed; }
.rel-mes-rot { font-size: 10.5px; color: var(--text-faint); }
.rel-mes-val { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rel-mes-qtd { font-size: 10.5px; color: var(--text-muted); }
.rel-sem-mes { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); font-style: italic; }

/* Soma dos períodos em aberto, no topo da aba. */
.rel-soma {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 20px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rel-soma span { font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
/* O motivo pelo qual o alvo está no painel — texto do Leonardo, não do sistema. */
.rel-motivo { margin: 6px 0 0; font-size: 11.5px; color: var(--text-faint); font-style: italic; }
/* Período que ainda não foi gerado: o bloco vira o botão de gerar. */
.rel-mes--vazio { border-style: dashed; color: var(--text-faint); }
.rel-mes--vazio .rel-mes-val { font-size: 13px; color: var(--accent); }
.rel-mes--vazio:disabled { opacity: 0.6; cursor: progress; }
.rel-mes.is-sel { border-color: var(--accent); background: var(--accent-soft); }

/* Detalhe do período: a lista de dispositivos que formou o número. */
.rel-detalhe { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.rel-det-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; font-size: 12px; color: var(--text-muted);
}
.rel-det-quando { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.rel-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.rel-tab th, .rel-tab td {
  padding: 6px 8px; text-align: left; font-weight: 400; font-size: 12px;
  text-transform: none; letter-spacing: normal; background: transparent;
  border-bottom: 1px solid var(--panel-border); white-space: nowrap;
}
.rel-tab thead th {
  color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.rel-tab tbody tr { animation: none; }
/* Dispositivo que entrou na conta: tinta cheia. Os outros ficam de contexto. */
.rel-tab tbody tr { color: var(--text-faint); }
.rel-tab tbody tr.is-cobrado { color: var(--text); }
.rel-tab tbody tr.is-cobrado td:last-child { color: var(--accent); font-weight: 700; }
.rel-n { text-align: right !important; font-variant-numeric: tabular-nums; }

/* Baixar em Excel, colado no nome do cliente. Desabilitado enquanto nenhum período estiver
   escolhido embaixo — é o período selecionado que ele baixa. */
.rel-baixar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-faint);
  vertical-align: middle;
  cursor: not-allowed;
}
.rel-baixar.is-on { color: var(--accent); border-color: var(--accent); cursor: pointer; }
.rel-baixar.is-on:hover { background: var(--accent-soft); }
.rel-baixar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Os dois totais do topo: o que entra dos clientes e o que sai de comissão pras revendas. Separados
   de propósito — somar os dois daria um número sem significado. */
.rel-somas { display: flex; align-items: flex-start; gap: 26px; }
.rel-soma--saida { color: var(--text-muted); }
.rel-soma--saida span { color: var(--text-faint); }
/* Nota do que foi escondido por ter dado zero — some quando não há nenhum. */
.rel-escondidos { margin: 8px 0 0; font-size: 10.5px; color: var(--text-faint); font-style: italic; }

/* Barra de pesquisa da aba Setup. Cresce pra ocupar o vão entre os chips e a lista de meses — a
   busca é o que mais se usa numa lista de 563 linhas. */
.com-setup-busca { flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.com-setup-conta {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Botão OK da aba Setup: confirma a dedução em um clique. Só aparece enquanto a linha está "a
   conferir" — depois de confirmada, o lugar dele é o selo de conferido. */
.com-setup-ok {
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}
.com-setup-ok:hover { background: var(--accent); color: var(--panel); }
.com-setup-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A conta da comissão aberta em duas parcelas: a faixa sobre o produto e os 20% do setup. */
.com-comis-conta { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.com-comis-conta span { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.com-comis-conta b { color: var(--text); font-weight: 700; }
.com-comis-conta i { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.com-comis-semsetup { font-style: italic; color: var(--text-faint) !important; }

/* Vendas fora do sistema — bloco no rodapé da aba Setup. Separado por uma linha e um respiro maior
   de propósito: é lançamento manual, não pode se confundir visualmente com o que veio do banco. */
.com-avulsas {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--panel-border);
}
.com-avulsa-vazio { padding: 14px 10px; text-align: center; color: var(--text-faint); font-size: 12px; }
.com-avulsa-acao { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.com-avulsa-x {
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}
.com-avulsa-x:hover:not(:disabled) { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }
.com-avulsa-x:disabled { opacity: .5; cursor: default; }

.com-avulsa-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 0;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.com-avulsa-form input,
.com-avulsa-form select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.com-avulsa-form .com-avulsa-cli { flex: 2 1 220px; }
.com-avulsa-form .com-avulsa-obs { flex: 3 1 260px; }
.com-avulsa-form .com-avulsa-val { flex: 0 0 120px; text-align: right; font-variant-numeric: tabular-nums; }
.com-avulsa-form button {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #2f6fed);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.com-avulsa-form button:disabled { opacity: .6; cursor: default; }

/* Dica de "clique num mês" no cabeçalho do gráfico do vendedor. Fica embaixo do período, em corpo
   menor: o mês do cartão passou a ser escolhido só pelo gráfico, e sem dizer isso em algum lugar a
   pessoa procura um seletor que não existe mais. */
.com-card-dica {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-faint);
}
.com-avulsa-parte { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
.com-avulsa-form .com-avulsa-set { flex: 0 0 150px; text-align: right; font-variant-numeric: tabular-nums; }

/* ═══ App IMPLANTAÇÃO ═══════════════════════════════════════════════════════════════════════════
   Série única no --accent. A tentação era pintar as etapas de bloqueio de vermelho/âmbar dentro do
   mesmo gráfico; o validador de paleta reprovou (faixa de luminosidade no escuro, e o âmbar em
   2,94:1 no claro). Cor de status entra só como BOLINHA ao lado de um rótulo escrito. */

.impl-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.impl-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.impl-tile-rot { font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; }
.impl-tile-val { font-size: 30px; font-weight: 600; color: var(--text); line-height: 1.1; }
.impl-tile-val small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.impl-tile-sub { font-size: 12px; color: var(--text-faint); }

/* Bolinha de status. Sempre acompanhada de palavra — nunca sozinha. */
.impl-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: baseline;
}
.impl-dot--nossa { background: var(--fin-critical); }
.impl-dot--cliente { background: var(--fin-warning); }

.impl-aviso {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--fin-warning);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.impl-aviso--ok { border-left-color: var(--accent); }
.impl-aviso strong { color: var(--text); }

.impl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.impl-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.impl-card--wide { grid-column: 1 / -1; }
.impl-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.impl-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.impl-card-head span { font-size: 12px; color: var(--text-faint); }

/* ── barras horizontais ── */
.impl-hbars { display: flex; flex-direction: column; gap: 7px; }
.impl-hbar {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr 48px;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 2px 4px;
}
.impl-hbar[role="button"] { cursor: pointer; }
.impl-hbar[role="button"]:hover, .impl-hbar[role="button"]:focus-visible { background: var(--panel-2); outline: none; }
.impl-hbar.is-ativo { background: var(--accent-soft); }
.impl-hbar-rot { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; min-width: 0; }
.impl-hbar-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impl-marca { font-size: 11px; color: var(--text-faint); margin-right: 6px; }
.impl-hbar-trilho { background: var(--panel-2); border-radius: 4px; height: 14px; overflow: hidden; }
/* Ponta arredondada só do lado do dado; a base fica ancorada no zero. */
.impl-hbar-fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; transition: width 0.3s ease; }
/* Número em token de TEXTO, nunca na cor da série. */
.impl-hbar-val { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ── histograma ── */
.impl-hist { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.impl-hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.impl-hist-num { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.impl-hist-trilho { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.impl-hist-fill { width: 100%; max-width: 46px; margin: 0 auto; background: var(--accent); border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.impl-hist-rot { font-size: 11px; color: var(--text-faint); text-align: center; }

.impl-nota { font-size: 12px; color: var(--text-faint); margin: 12px 0 0; line-height: 1.5; }
.impl-vazio { font-size: 13px; color: var(--text-faint); padding: 12px 0; text-align: center; }

/* ── lista ── */
.impl-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.impl-busca {
  flex: 1; min-width: 240px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
}
.impl-busca:focus { outline: none; border-color: var(--accent); }
.impl-tabela-wrap { overflow-x: auto; }

/* ⚠️ Três regras GLOBAIS do projeto vazam pra qualquer tabela nova e já quebraram a grade do
   Comercial: th em CAIXA-ALTA com faixa cinza, animação de fade nas linhas (que com atualização
   automática piscaria sozinha) e width:100% forçado. Resetadas aqui dentro. */
.impl-tabela { width: 100%; border-collapse: collapse; }
.impl-tabela th {
  text-transform: none;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--panel-border);
}
.impl-tabela tbody tr { animation: none; border-bottom: 1px solid var(--panel-border); }
.impl-tabela tbody tr:last-child { border-bottom: 0; }
.impl-tabela td { padding: 9px 10px; font-size: 13px; color: var(--text-muted); vertical-align: top; }
.impl-tabela .impl-num { text-align: right; font-variant-numeric: tabular-nums; }
.impl-cli { color: var(--text); font-weight: 500; }
.impl-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.impl-tag {
  font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--panel-border); border-radius: 4px;
  padding: 1px 5px; margin-left: 4px; font-weight: 400;
}
.impl-atraso { color: var(--fin-critical); font-weight: 600; }

/* ── tooltip ── */
.impl-tip {
  position: fixed;
  z-index: 80;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border-strong);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--text);
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  max-width: 280px;
}

@media (max-width: 700px) {
  .impl-hbar { grid-template-columns: 1fr 40px; }
  .impl-hbar-trilho { grid-column: 1 / -1; }
}

/* ── Implantação: filtros, funil, small multiples e relatório ── */

/* A barra de abas do projeto tem display:flex, que VENCE o atributo hidden (a folha padrão do
   navegador só aplica display:none). Já mordeu no Comercial — por isso o reset explícito existe. */
.impl-filtros {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
  font-size: 13px;
}
.impl-filtros--vazio { color: var(--text-faint); font-size: 12px; }
.impl-filtros-rot { color: var(--text-muted); font-size: 12px; }
.impl-chip {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.impl-chip:hover { background: var(--accent); color: var(--bg); }
.impl-chip--limpar { background: transparent; border-color: var(--panel-border); color: var(--text-muted); }
.impl-chip--limpar:hover { background: var(--panel-2); color: var(--text); }

/* ── funil ── */
.impl-funil { display: flex; flex-direction: column; gap: 6px; }
.impl-funil-linha { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; align-items: center; gap: 12px; }
.impl-funil-rot { font-size: 13px; color: var(--text-muted); }
.impl-funil-barra { position: relative; background: var(--panel-2); border-radius: 6px; height: 30px; display: flex; align-items: center; }
.impl-funil-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.35s ease; }
.impl-funil-num {
  position: absolute; left: 10px; font-size: 13px; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* A faixa final é resultado, não etapa em curso — recuada pra não se ler como "a próxima fase". */
.impl-funil-linha.is-fim { opacity: 0.72; margin-top: 4px; }
.impl-funil-linha.is-fim .impl-funil-fill { background: var(--text-faint); }

/* ── small multiples ── */
.impl-multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.impl-multiple h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
.impl-coletando {
  background: var(--panel-2); border: 1px dashed var(--panel-border-strong);
  border-radius: 8px; padding: 14px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
.impl-coletando strong { color: var(--text); }

.impl-hist-col.is-ativo .impl-hist-fill { outline: 2px solid var(--text); outline-offset: 1px; }
.impl-hist-col[role="button"] { cursor: pointer; }
.impl-hist-col[role="button"]:hover .impl-hist-fill { filter: brightness(1.15); }

/* ── relatório ── */
.impl-rel-topo { margin-bottom: 14px; }
.impl-select {
  background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 7px 11px; color: var(--text); font-size: 13px; font-family: inherit;
}
.impl-rel {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 26px 30px; max-width: 900px;
}
.impl-rel-titulo { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: var(--text); }
.impl-rel-p { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
.impl-rel-p strong { color: var(--text); font-weight: 600; }
.impl-rel-bloco {
  border-top: 1px solid var(--panel-border); padding-top: 16px; margin-top: 20px;
}
.impl-rel-bloco h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.impl-rel-bloco--alerta { border-left: 3px solid var(--fin-critical); padding-left: 16px; border-top-color: transparent; }
.impl-rel-sub { font-size: 12px; color: var(--text-faint); margin: 0 0 10px; }
.impl-rel-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.impl-rel-lista li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--panel-border); font-size: 13px; color: var(--text);
}
.impl-rel-lista li:last-child { border-bottom: 0; }
.impl-rel-meta { color: var(--text-faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.impl-rel-rodape {
  margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--panel-border);
  font-size: 12px; color: var(--text-faint); line-height: 1.6;
}

@media (max-width: 760px) {
  .impl-funil-linha { grid-template-columns: 1fr; gap: 4px; }
  .impl-rel { padding: 20px 18px; }
}

/* ═══ Implantação v2 — casca com barra lateral ══════════════════════════════════════════════════
   Só este app usa este desenho; Financeiro, Comercial e Monitor seguem com a .topbar do projeto.

   CORES DE SÉRIE: slots próprios de gráfico (azul/laranja), NÃO o --accent teal da interface.
   Medido, não estético: no tema escuro a faixa de luminosidade aceita pra categóricas é L 0,48–0,67
   e o teal do projeto está em 0,78 — reprova como cor de série. O par abaixo passa nos dois temas
   (ΔE 24,7–26,8 em daltonismo, 31,8–33,6 em visão normal). O teal segue como accent da UI e como
   cor de SÉRIE ÚNICA nos gráficos de uma medida só, onde não há par pra distinguir. */
:root,
:root[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; }
:root[data-theme="light"] { --serie-1: #2a78d6; --serie-2: #eb6834; }

.impl-body { margin: 0; background: var(--bg); }
.impl-shell { display: flex; min-height: 100vh; }

.impl-side {
  width: 68px; flex: 0 0 68px;
  background: var(--panel); border-right: 1px solid var(--panel-border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 0; position: sticky; top: 0; height: 100vh;
}
.impl-side-logo {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
}
.impl-side-logo svg { width: 21px; height: 21px; }
.impl-side-nav { display: flex; flex-direction: column; gap: 6px; }
.impl-side-btn {
  width: 42px; height: 42px; border-radius: 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--text-faint);
  display: grid; place-items: center; text-decoration: none;
}
.impl-side-btn svg { width: 20px; height: 20px; }
.impl-side-btn:hover { background: var(--panel-2); color: var(--text); }
.impl-side-btn.is-on { background: var(--accent-soft); color: var(--accent); }
.impl-side-btn--pe { margin-top: auto; }

.impl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.impl-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--panel-border);
  background: var(--panel); position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.impl-crumb { font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.impl-crumb strong { color: var(--text); font-weight: 600; }
.impl-crumb-sep { opacity: 0.6; }
.impl-top-right { display: flex; align-items: center; gap: 8px; }
.impl-search { position: relative; display: flex; align-items: center; }
.impl-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.impl-search input {
  width: 280px; background: var(--panel-2); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 8px 14px 8px 34px; color: var(--text); font-size: 13px; font-family: inherit;
}
.impl-search input:focus { outline: none; border-color: var(--accent); }
.impl-top-meta { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.impl-icone {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--panel-border);
  background: var(--panel-2); color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
}
.impl-icone svg { width: 17px; height: 17px; }
.impl-icone:hover { color: var(--text); border-color: var(--panel-border-strong); }

#impl-body { padding: 20px 24px 40px; }

/* ── KPIs com minigráfico ── */
.impl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.impl-kpi {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.impl-kpi-rot { font-size: 12px; color: var(--text-muted); }
.impl-kpi-val { font-size: 32px; font-weight: 600; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.impl-kpi-val small { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.impl-kpi-sub { font-size: 11px; color: var(--text-faint); }
.impl-spark { width: 100%; height: 34px; margin-top: 8px; display: block; }
/* A cor do minigráfico segue a MEDIDA, não a posição do card: "Entraram" e "Fecharam" também
   aparecem no gráfico de linha abaixo, então usam os mesmos slots de série lá (azul e laranja).
   Trocar de cor entre os dois gráficos faria a mesma medida parecer duas coisas diferentes.
   As medidas que só existem no KPI (saldo e ciclo) ficam no accent, como qualquer série única. */
.impl-spark--acc polyline { stroke: var(--accent); }
.impl-spark--acc circle { fill: var(--accent); }
.impl-spark--s1 polyline { stroke: var(--serie-1); }
.impl-spark--s1 circle { fill: var(--serie-1); }
.impl-spark--s2 polyline { stroke: var(--serie-2); }
.impl-spark--s2 circle { fill: var(--serie-2); }

/* ── layout principal + trilho ── */
.impl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.impl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.impl-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 78px; }
.impl-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.impl-card--rail { padding: 16px; }
.impl-card--alto { min-height: 320px; }
.impl-rodape { font-size: 11px; color: var(--text-faint); margin: 20px 0 0; line-height: 1.6; }

/* ── gráfico de linha (2 séries) ── */
.impl-legenda { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.impl-leg { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.impl-leg-dot { width: 9px; height: 9px; border-radius: 50%; }
.impl-leg-dot--s1 { background: var(--serie-1); }
.impl-leg-dot--s2 { background: var(--serie-2); }
.impl-linha { width: 100%; height: auto; display: block; overflow: visible; }
.impl-serie { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.impl-serie--s1 { stroke: var(--serie-1); }
.impl-serie--s2 { stroke: var(--serie-2); }
/* Anel da superfície nas marcas que se cruzam — sem ele os pontos das duas séries se fundem. */
.impl-pt { stroke: var(--panel); stroke-width: 2; }
.impl-pt--s1 { fill: var(--serie-1); }
.impl-pt--s2 { fill: var(--serie-2); }
.impl-grid { stroke: var(--panel-border); stroke-width: 1; }
.impl-eixo { fill: var(--text-faint); font-size: 11px; font-family: inherit; }
.impl-alvo { fill: transparent; }
.impl-alvo:hover { fill: var(--panel-2); opacity: 0.55; }

/* ── barras agrupadas ── */
.impl-agrup { display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.impl-agrup-col { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
/* 2px de vão entre as duas marcas do grupo — separador de superfície pedido pelo guia. */
.impl-agrup-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.impl-agrup-b { width: 14px; border-radius: 3px 3px 0 0; min-height: 0; }
.impl-agrup-b--s1 { background: var(--serie-1); }
.impl-agrup-b--s2 { background: var(--serie-2); }
.impl-agrup-rot {
  font-size: 11px; color: var(--text-faint); text-align: center; padding-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── rosca (um valor, é medidor e não gráfico categórico) ── */
.impl-rosca { display: flex; flex-direction: column; align-items: center; }
.impl-rosca svg { width: 100%; max-width: 165px; height: auto; }
.impl-rosca-trilho { stroke: var(--panel-2); }
.impl-rosca-fill { stroke: var(--accent); transition: stroke-dasharray 0.5s ease; }
.impl-rosca-num { fill: var(--text); font-size: 27px; font-weight: 600; font-family: inherit; }
.impl-rosca-cap { fill: var(--text-faint); font-size: 10px; font-family: inherit; }
.impl-rosca-leg { font-size: 11px; color: var(--text-faint); text-align: center; margin: 6px 0 0; line-height: 1.5; }

/* ── trilho "Precisa de você" ── */
.impl-rail-sub { font-size: 11px; color: var(--text-faint); margin: -6px 0 10px; line-height: 1.5; }
/* Máscara de desvanecimento no rodapé: a lista rola, e cortar uma linha ao meio sem aviso se lê
   como defeito de layout em vez de "tem mais coisa aqui embaixo". */
.impl-rail-lista { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
/* A máscara só entra quando a lista REALMENTE transborda (classe posta pelo JS): aplicada sempre,
   ela apagaria o rodapé da última linha mesmo numa lista curta, inventando um corte que não existe. */
.impl-rail-lista.is-rolavel {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.impl-rail-lista li { padding: 9px 0; border-bottom: 1px solid var(--panel-border); }
.impl-rail-lista li:last-child { border-bottom: 0; }
.impl-rail-cli { font-size: 13px; color: var(--text); font-weight: 500; }
.impl-rail-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.impl-rail-dias { font-variant-numeric: tabular-nums; color: var(--fin-critical); font-weight: 600; }

.impl-card-head h3 { display: flex; align-items: center; gap: 2px; }

@media (max-width: 1100px) {
  .impl-layout { grid-template-columns: 1fr; }
  .impl-rail { position: static; }
  .impl-search input { width: 180px; }
}
@media (max-width: 700px) {
  .impl-side { width: 54px; flex-basis: 54px; }
  #impl-body { padding: 14px; }
  .impl-search { display: none; }
}
.impl-agrup-col[role="button"] { cursor: pointer; border-radius: 6px; }
.impl-agrup-col[role="button"]:hover, .impl-agrup-col[role="button"]:focus-visible { background: var(--panel-2); outline: none; }
.impl-agrup-col.is-ativo { background: var(--accent-soft); }

/* ── Aba Quadro: espelha as colunas do kanban do CRM ── */
.impl-quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.impl-coluna {
  flex: 0 0 258px; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 190px);
}
.impl-coluna-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--panel-border); }
.impl-coluna-head h3 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: 0; line-height: 1.35;
}
.impl-coluna-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.impl-coluna-n {
  background: var(--panel-2); color: var(--text); border-radius: 6px;
  padding: 1px 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.impl-coluna-val { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.impl-coluna-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; }
.impl-coluna-vazia { font-size: 12px; color: var(--text-faint); text-align: center; padding: 14px 0; margin: 0; font-style: italic; }

.impl-mini {
  background: var(--panel-2); border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border-strong);
  border-radius: 8px; padding: 9px 10px; cursor: default;
}
/* Urgência pela borda ESQUERDA, com os dias escritos no rodapé do card: a cor reforça, não carrega.
   Mesmas faixas do histograma "há quanto tempo na etapa" — duas réguas diferentes na mesma tela
   fariam o mesmo card parecer urgente num lugar e tranquilo no outro. */
.impl-mini--u0 { border-left-color: var(--panel-border-strong); }
.impl-mini--u1 { border-left-color: var(--fin-warning); }
.impl-mini--u2 { border-left-color: var(--fin-orange); }
.impl-mini--u3 { border-left-color: var(--fin-critical); }
.impl-mini-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.impl-mini-nome { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.impl-mini-rep {
  flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--fin-warning);
  border: 1px solid var(--fin-warning); border-radius: 5px; padding: 0 4px; line-height: 1.5;
}
.impl-mini-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.impl-mini-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.impl-mini-resp { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impl-mini-dias { font-size: 11px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.impl-mini-val {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--panel-border);
  font-size: 11.5px; font-weight: 600; color: var(--text);
  display: flex; justify-content: space-between; gap: 8px;
}
.impl-mini-val span { font-weight: 400; color: var(--text-faint); }

.impl-quadro-aviso {
  background: var(--panel-2); border: 1px solid var(--panel-border); border-left: 3px solid var(--fin-warning);
  border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--text-muted);
  margin: 0 0 14px; line-height: 1.55;
}
.impl-quadro-aviso strong { color: var(--text); }

/* "Recorrência a pagar" — a 3ª linha do bloco de números do cartão do vendedor. Cor própria porque
   ela não é faturamento como as outras duas: é comissão a pagar, dinheiro que SAI. */
.com-num-val--rec { color: var(--accent, #2f6fed); }

/* Aba Inadimplentes: aparelhos do cliente e marcação de quem já saiu ------------------------- */
/* A coluna de aparelhos responde "ainda tem o que cortar?". Verde = continua usando mesmo devendo,
   que é o caso que exige ação; cinza = a plataforma já travou; traço = não tem aparelho nenhum. */
.inad-disp { white-space: nowrap; text-align: center; font-size: 12px; }
.inad-disp-on { color: var(--danger, #c0392b); font-weight: 700; }
.inad-disp-off { color: var(--text-faint); }
.inad-disp-nada { color: var(--text-faint); opacity: .6; }

/* Selo do cliente que já cancelou. Fica junto do nome, não numa coluna: é uma qualificação da
   pessoa, não um dado a comparar linha a linha. */
.inad-tag-saiu,
.inad-tag-parte {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  vertical-align: middle;
}
.inad-tag-saiu { background: var(--panel-border); color: var(--text-faint); }
.inad-tag-parte { background: transparent; border: 1px solid var(--panel-border); color: var(--text-muted); }

/* ═══ Painel de parede da FILA ══════════════════════════════════════════════════════════════════
   Tela de TV: escala grande, alto contraste, nenhuma ação. Não segue o alternador de tema —
   painel.html fixa o escuro, porque numa tela ligada o dia inteiro o fundo claro cansa e o
   vermelho de alerta perde contraste. */
.fila-body {
  margin: 0; background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column;
}
.fila-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 34px; border-bottom: 1px solid var(--panel-border);
}
.fila-titulo h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.fila-titulo span { font-size: 15px; color: var(--text-muted); }
.fila-topo-dir { display: flex; align-items: center; gap: 34px; }
.fila-contador { display: flex; flex-direction: column; align-items: flex-end; }
.fila-contador-n { font-size: 62px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
/* Cor pela PIOR espera da fila, não pela existência dela — as mesmas faixas das linhas. */
.fila-contador-n.is-zero { color: var(--fin-good); }
.fila-contador-n.n0 { color: var(--text); }
.fila-contador-n.n1 { color: var(--fin-warning); }
.fila-contador-n.n2 { color: var(--fin-orange); }
.fila-contador-n.n3 { color: var(--fin-critical); }
.fila-etiqueta--mais { color: var(--text-faint); border-style: dashed; }
.fila-contador-rot { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.fila-relogio { display: flex; flex-direction: column; align-items: flex-end; }
#fila-hora { font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fila-estado { font-size: 12px; color: var(--fin-good); }
.fila-estado.is-velho { color: var(--fin-warning); }
.fila-estado.is-erro { color: var(--fin-critical); }

.fila-corpo { flex: 1; padding: 20px 34px 34px; overflow-y: auto; }
.fila-carregando { color: var(--text-muted); font-size: 18px; }
.fila-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fila-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 22px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-left: 6px solid var(--panel-border-strong);
  border-radius: 12px; padding: 16px 22px;
}
/* Faixas de espera. A cor reforça; o tempo escrito ao lado é o que carrega o dado. */
.fila-item--n0 { border-left-color: var(--panel-border-strong); }
.fila-item--n1 { border-left-color: var(--fin-warning); }
.fila-item--n2 { border-left-color: var(--fin-orange); }
.fila-item--n3 { border-left-color: var(--fin-critical); }
.fila-item-nome { font-size: 22px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-item-filas { display: flex; gap: 6px; flex-wrap: wrap; }
.fila-etiqueta {
  font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--panel-border-strong); border-radius: 999px; padding: 3px 11px;
}
.fila-etiqueta--vazia { color: var(--text-faint); font-style: italic; }
.fila-item-tempo { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 132px; text-align: right; }
.fila-item--n3 .fila-item-tempo { color: var(--fin-critical); }
.fila-item--n2 .fila-item-tempo { color: var(--fin-orange); }

.fila-limpa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 70px 0; }
.fila-limpa-marca { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--fin-good); display: grid; place-items: center; }
.fila-limpa-marca svg { width: 38px; height: 38px; }
.fila-limpa p { font-size: 21px; color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .fila-item { grid-template-columns: 1fr auto; gap: 10px; }
  .fila-item-filas { grid-column: 1 / -1; }
  .fila-titulo h1 { font-size: 22px; }
  .fila-contador-n { font-size: 44px; }
}

/* Linha da recorrência dentro da conta da comissão. Mesmo desenho das outras parcelas, mas sem
   percentual na frente: ele varia por safra (5% ou 3%) e mostrar um só seria mentira. */
.com-comis-rec b { font-weight: 700; }

/* BOLETO TRAVADO — venceu e os 5 dias úteis do vendedor acabaram.
   Vermelho opaco com a letra vazada: a caixinha continua legível, mas visivelmente "apagada", e a
   ausência de sublinhado/seta já diz que não há link. É o único estado da régua que não é clicável
   por motivo de regra, e não por falta de dado — daí merecer um desenho próprio. */
/* FORA DO PRAZO — venceu e os 5 dias úteis acabaram. Vermelho cheio para separar da "vencida" que
   ainda está no prazo, mas com a letra LEGÍVEL e clicável: a caixinha avisa que a comissão acabou,
   não que o boleto foi tirado do vendedor. (Era vazada e sem link até 20/08/2026.) */
.com-mes--t {
  background: var(--danger, #c0392b);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Coluna do vendedor responsável na aba Inadimplentes. "Sem vendedor" é destacado de propósito:
   é ele que muda a comissão da cobrança de 1% para 3%, e é quem a equipe precisa achar primeiro. */
.inad-vend { white-space: nowrap; font-size: 12px; }
.inad-vend-nome { color: var(--text-muted); }
.inad-vend-sem { color: var(--warn, #b7791f); font-weight: 600; }

/* ---- Aba Recuperados: relatório por fatura da comissão da cobrança ---- */
/* O número da comissão vira botão. A seta é o que avisa que dali se chega a outro lugar — sem ela o
   cartão parece só mais um indicador. */
.inad-kpi--click { cursor: pointer; border: 0; font: inherit; text-align: left; }
.inad-kpi--click:hover { filter: brightness(1.06); }
.inad-kpi-seta { font-style: normal; opacity: .7; margin-left: 4px; }

.rec-datas { white-space: nowrap; font-size: 12px; }
.rec-datas span { display: block; color: var(--text-faint); font-size: 11px; }
.rec-pct { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-atraso { text-align: center; }
/* Faixa de atraso por cor: até 15 dias é rotina, acima de 30 é risco de perder o cliente. */
.rec-faixa { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rec-faixa--ok { background: color-mix(in srgb, var(--ok, #2f855a) 16%, transparent); color: var(--ok, #2f855a); }
.rec-faixa--meio { background: color-mix(in srgb, var(--warn, #b7791f) 18%, transparent); color: var(--warn, #b7791f); }
.rec-faixa--alto { background: color-mix(in srgb, var(--danger, #c0392b) 16%, transparent); color: var(--danger, #c0392b); }
.rec-motivo { font-size: 12px; color: var(--text-muted); max-width: 34ch; }
.rec-sem-motivo { color: var(--text-faint); }

/* Volta da aba Recuperados. Ela não tem botão na barra de abas — este link é o único caminho de
   retorno, então fica no topo, antes de qualquer número. */
.rec-voltar {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rec-voltar:hover { color: var(--text); border-color: var(--text-faint); }

/* SITUAÇÃO do cliente na cobrança — substituiu a observação livre. O aviso fica logo abaixo do
   seletor, em vermelho, porque ele significa que a marcação NÃO foi confirmada pelo banco: o cliente
   continua devendo apesar de alguém ter dito o contrário. */
.inad-sit {
  width: 100%;
  max-width: 190px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.inad-sit:disabled { opacity: .6; }
.inad-aviso {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--danger, #c0392b);
  max-width: 30ch;
}

/* MOTIVO do atraso, ao lado da situação. O campo de texto só existe quando "Outro" está escolhido —
   `is-hidden` some com ele em vez de deixá-lo desabilitado, que ocuparia espaço à toa em 259 linhas. */
.inad-motivo { min-width: 180px; }
.inad-mot {
  width: 100%;
  max-width: 190px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.inad-mot-txt {
  width: 100%;
  max-width: 190px;
  height: 30px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.inad-mot-saved { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-faint); }

/* Botão que fecha a operação de situação + motivo. Nasce desabilitado e só acende quando algo muda
   na linha — assim ele mesmo diz o que ainda falta gravar, sem precisar de aviso à parte.
   Enquanto ele estiver aceso, a linha fica com um fio na lateral: numa lista de 259 clientes, é o
   que impede alguém de rolar a tela e esquecer uma edição pela metade. */
.inad-salvar { white-space: nowrap; vertical-align: top; padding-top: 4px; }
.inad-btn-salvar {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #2f6fed);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.inad-btn-salvar:disabled {
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--panel-border);
  cursor: default;
}
.inad-row.is-editando > td:first-child { box-shadow: inset 3px 0 0 var(--accent, #2f6fed); }

/* UMA LINHA POR FATURA, agrupadas por cliente. As colunas de identificação e de decisão usam rowspan
   e cobrem as faturas daquele cliente; o fio de cima marca onde um cliente começa e o outro acaba —
   sem ele, 390 linhas viram um bloco contínuo e ninguém acha o limite entre dois clientes. */
.inad-row.is-primeira > * { border-top: 1px solid var(--panel-border); }
.inad-row.is-continuacao > td { background: color-mix(in srgb, var(--panel) 40%, transparent); }
.inad-cli-total { display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint); }
/* Etiqueta na própria fatura: diz de onde ela veio quando isso muda a leitura do valor. */
.inad-fat-canc, .inad-fat-avulsa {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  vertical-align: middle;
}
.inad-fat-canc { background: var(--panel-border); color: var(--text-faint); }
.inad-fat-avulsa { border: 1px solid var(--panel-border); color: var(--text-muted); }

/* Inadimplentes no desenho do "Ao vivo": feed de caixas por cliente. Os controles de decisão ficam
   numa faixa logo abaixo do cabeçalho da caixa — sempre visíveis, sem precisar abrir as faturas,
   porque marcar situação é a ação mais frequente da aba. */
/* Os controles ficam NA MESMA BARRA da fatura, no fim — junto do botão de ação. Compactos de
   propósito: dividem a linha com valor, vencimento e dias, e crescer aqui empurraria tudo. */
.inad-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 6px 0 0;
}
.inad-acoes .inad-sit,
.inad-acoes .inad-mot { width: 132px; max-width: 132px; height: 28px; margin: 0; font-size: 12px; }
.inad-acoes .inad-mot-txt { width: 140px; max-width: 140px; height: 28px; margin: 0; font-size: 12px; }
.inad-acoes .inad-btn-salvar { height: 28px; padding: 0 11px; font-size: 12px; }
.inad-acoes .inad-aviso {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1;
  cursor: help;
}
.inad-acoes .inad-mot-saved { margin: 0; white-space: nowrap; }
.inad-acoes.is-editando { box-shadow: inset 3px 0 0 var(--accent, #2f6fed); }

/* CADASTRO MANUAL na comissão da cobrança. Card enxuto no topo da aba Recuperados: a busca aceita
   número OU link, e o resultado aparece logo abaixo com um botão por fatura. */
.rec-cad {
  margin: 0 2px 16px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.rec-cad-tit { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.rec-cad-sub { display: block; margin-top: 3px; max-width: 76ch; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
/* Cadastro em campos rotulados: são seis informações, e sem rótulo ninguém adivinha qual caixa é
   qual. Alinham em linha e quebram sozinhos em tela estreita. */
.rec-cad-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.rec-cad-campo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 190px; }
.rec-cad-campo--curto { flex: 0 1 140px; }
.rec-cad-campo > span { font-size: 11px; color: var(--text-faint); }
.rec-cad-form input,
.rec-cad-form select {
  height: 32px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px;
}
.rec-cad-form .rec-cad-campo input,
.rec-cad-form .rec-cad-campo select { width: 100%; }
.rec-cad-form button {
  height: 32px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--accent, #2f6fed); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rec-cad-res { margin-top: 10px; }
.rec-cad-item {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--panel-border);
}
.rec-cad-cli { flex: 1; display: flex; flex-direction: column; font-size: 12.5px; }
.rec-cad-cli i { font-style: normal; font-size: 11px; color: var(--text-faint); }
.rec-cad-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-cad-add {
  height: 28px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--ok, #2f855a); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rec-cad-add:disabled { opacity: .6; cursor: default; }
.rec-cad-vazio { font-size: 12px; color: var(--text-faint); padding: 6px 0; }
/* Marca da fatura incluída à mão, no relatório — ela não entrou pela regra automática, e quem lê
   precisa saber disso pra conferir. */
.rec-manual {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2f6fed) 16%, transparent);
  color: var(--accent, #2f6fed); font-size: 10.5px; font-weight: 600;
}
.rec-cad-rem {
  border: 0; background: transparent; color: var(--text-faint);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rec-cad-rem:hover { color: var(--danger, #c0392b); }

/* Retorno da busca automática do cadastro: some quando não há nada a dizer, verde quando a fatura
   foi achada, âmbar quando não — e nesse caso a mensagem diz o que fazer, não só que falhou. */
.rec-cad-achou { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.rec-cad-achou.is-sim { color: var(--ok, #2f855a); }
.rec-cad-achou.is-nao { color: var(--warn, #b7791f); }

/* ---- RELATÓRIO MENSAL DA COBRANÇA ----
   Mesma linguagem da aba Relatórios de uso: cabeçalho com o mês, cartões grandes e blocos abaixo. */
.rel-cob { margin: 0 2px 18px; }
.rel-cob-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel);
}
.rel-cob-tit { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.rel-cob-sub { margin: 0; max-width: 72ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.rel-cob-meses { display: flex; flex-wrap: wrap; gap: 4px; }

.rel-cob-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.rel-cob-bloco { padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); }
.rel-cob-bloco--largo { grid-column: 1 / -1; }
.rel-cob-bloco h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.rel-cob-nota { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
.rel-cob-vazio { margin: 0; font-size: 12px; color: var(--text-faint); }

.rel-cob-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rel-cob-tab td { padding: 5px 0; border-top: 1px solid var(--panel-border); }
.rel-cob-tab tr:first-child td { border-top: 0; }
.rel-cob-tab .rel-cob-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-cob-tab tr.is-sem td:first-child { color: var(--warn, #b7791f); font-weight: 600; }

/* Barra horizontal: a leitura aqui é comparar tamanhos, então a barra basta — sem eixo, sem grade. */
.rel-cob-barras { display: flex; flex-direction: column; gap: 7px; }
.rel-cob-barra { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.rel-cob-barra-rot { color: var(--text-muted); }
.rel-cob-barra-trilho { height: 8px; border-radius: 999px; background: var(--panel-border); overflow: hidden; }
.rel-cob-barra-trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--accent, #2f6fed); }
.rel-cob-barra-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* Botões de exportação do relatório da cobrança. */
/* Mês primeiro, download depois: a ordem na tela é a ordem da decisão. */
.rel-cob-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rel-cob-baixar { position: relative; }
.rel-cob-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 128px; padding: 4px;
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.rel-cob-menu[hidden] { display: none; }
.rel-cob-menu-item {
  display: block; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.rel-cob-menu-item:hover { background: var(--panel-border); }
.rel-cob-btn {
  display: inline-block; height: 30px; line-height: 28px; padding: 0 12px;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.rel-cob-btn:hover { color: var(--text); border-color: var(--text-faint); }

/* IMPRESSÃO: sai só o relatório. Sem isto a folha viria com menu, abas, cadastro e a lista inteira
   de faturas — três páginas de ruído antes do que interessa. */
@media print {
  body.imprimindo-relatorio > *:not(#app):not(main) { display: none !important; }
  body.imprimindo-relatorio .fin-tabs,
  body.imprimindo-relatorio .panel-head,
  body.imprimindo-relatorio .rec-voltar,
  body.imprimindo-relatorio .rec-cad,
  body.imprimindo-relatorio .rel-cob-acoes,
  body.imprimindo-relatorio .inad-count,
  body.imprimindo-relatorio .inad-wrap,
  body.imprimindo-relatorio #finance-recup > .inad-kpis,
  body.imprimindo-relatorio #finance-recup > .inad-wrap { display: none !important; }
  body.imprimindo-relatorio #com-tabs,
  body.imprimindo-relatorio #com-refresh,
  body.imprimindo-relatorio #com-updated,
  body.imprimindo-relatorio .com-obs-voltar,
  body.imprimindo-relatorio .rel-cob-meses { display: none !important; }
  /* No papel não há cor: a intensidade do dia vira tom de cinza, senão todos ficariam iguais. */
  body.imprimindo-relatorio .com-cal-dia.tem {
    background: color-mix(in srgb, #333 calc(var(--f) * 45%), #fff) !important;
    border-color: #999 !important;
  }
  body.imprimindo-relatorio .rel-cob { break-inside: auto; }
  body.imprimindo-relatorio .rel-cob-bloco { break-inside: avoid; }
  /* Fundo branco e texto preto: o tema escuro na impressora vira uma página inteira de tinta. */
  body.imprimindo-relatorio, body.imprimindo-relatorio * { background: #fff !important; color: #111 !important; }
  body.imprimindo-relatorio .rel-cob-barra-trilho { background: #e5e5e5 !important; }
  body.imprimindo-relatorio .rel-cob-barra-trilho > span { background: #555 !important; }
}

/* A barra de observação saiu da carteira em 20/08/2026: o histórico agora abre clicando no NOME do
   cliente, e um campo de texto por linha em centenas de clientes só roubava espaço da grade.
   O que ficou na carteira é a marca abaixo — o pontinho que avisa que há recado ali dentro. */










/* ---- PÁGINA DE OBSERVAÇÕES DO CLIENTE ----
   Linha do tempo do mais antigo pro mais recente: é a ordem em que a história aconteceu, e é assim
   que se lê "prometeu pagar → não pagou → pediu desconto". */
.com-obs-pag { max-width: 860px; }
.com-obs-voltar {
  margin-bottom: 14px; padding: 4px 10px;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.com-obs-voltar:hover { color: var(--text); border-color: var(--text-faint); }
.com-obs-cab { margin-bottom: 14px; }
.com-obs-tit { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.com-obs-sub { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); }

.com-obs-linha { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--panel-border); }
.com-obs-linha li { position: relative; padding: 0 0 16px 14px; }
/* O ponto na linha marca cada entrada — é o que faz a sequência ser lida como sequência. */
.com-obs-linha li::before {
  content: ""; position: absolute; left: -25px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--panel-border);
}
.com-obs-linha li:last-child::before { border-color: var(--accent, #2f6fed); background: var(--accent, #2f6fed); }
.com-obs-quando { display: block; font-size: 11px; color: var(--text-faint); }
.com-obs-texto { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--text); }

.com-obs-nova { display: flex; gap: 8px; margin-top: 18px; }
.com-obs-nova input {
  flex: 1; height: 34px; padding: 0 11px;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.com-obs-nova button {
  height: 34px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--accent, #2f6fed); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.com-obs-aviso { margin-top: 16px; font-size: 12px; color: var(--text-faint); }

/* Atalho pro histórico, na barra da carteira. */



/* Marca de que o cliente tem observação — um ponto ao lado do nome, com o último recado na dica.
   É o que permite varrer a carteira e achar de relance quem tem algo acontecendo, sem uma coluna
   inteira de texto competindo com a grade de meses. */
.com-cli-nome--link {
  border: 0; padding: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.com-cli-nome--link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ÚLTIMA OBSERVAÇÃO ao lado dos três pontinhos. Corpo pequeno e uma linha só: quem varre a carteira
   lê o recado de relance, e o texto inteiro sai na dica. `min-width:0` + `truncate` são o que impedem
   um recado longo de empurrar a grade de meses pra fora da tela. */
.com-cli-ult {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-width: 0; max-width: 42ch; margin-left: 10px;
  padding-left: 10px; border-left: 2px solid var(--warn, #b7791f);
  cursor: pointer; vertical-align: middle;
}
.com-cli-ult-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--text-muted);
}
.com-cli-ult-quem { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.com-cli-ult:hover .com-cli-ult-txt { color: var(--text); }

/* ---- RELATÓRIO MENSAL DO VENDEDOR ---- */
.com-rel-abrir {
  padding: 3px 10px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.com-rel-abrir:hover { color: var(--text); border-color: var(--text-faint); }
.com-rel { max-width: 1100px; }

/* Calendário de pagamentos: a intensidade da cor é o valor do dia. Comparar tons é imediato — uma
   lista de datas com valores exigiria fazer a comparação de cabeça. */
.com-cal-sem, .com-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.com-cal-sem { margin-bottom: 4px; }
.com-cal-sem span { text-align: center; font-size: 10.5px; color: var(--text-faint); }
.com-cal-dia, .com-cal-vazio {
  min-height: 46px; padding: 4px 5px; border-radius: 8px;
  border: 1px solid var(--panel-border); background: transparent;
}
.com-cal-vazio { border-color: transparent; }
.com-cal-dia b { display: block; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.com-cal-dia i { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: var(--text); }
.com-cal-dia.tem {
  background: color-mix(in srgb, var(--ok, #2f855a) calc(var(--f) * 55%), transparent);
  border-color: color-mix(in srgb, var(--ok, #2f855a) 40%, transparent);
  cursor: help;
}
.com-cal-dia.tem b { color: var(--text); }

/* ---- BARRA DE DENTRO DO VENDEDOR ---- */
/* O "voltar" não é uma aba: é a saída. Fica na ponta esquerda, sem o sublinhado de aba ativa, pra
   não competir com Carteira/Prospecção — quem procura a saída acha, quem está navegando não tropeça. */
.com-tab-voltar { color: var(--text-muted); font-weight: 600; }
.com-tab-voltar:hover { color: var(--text); }
.com-tab-quem {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 4px 0 10px; padding: 0 12px 0 0;
  border-right: 1px solid var(--panel-border);
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
}
:root,
:root[data-theme="dark"] {
  --bg: #0a0b0f;
  --bg-elevated: #0e1015;
  --panel: #14161c;
  --panel-2: #191c23;
  --panel-border: #23262f;
  --panel-border-strong: #2e323d;
  --chip-bg: #1b1e26;
  --chip-bg-hover: #242833;
  --text: #eceef2;
  --text-muted: #868d9a;
  --text-faint: #5b616d;
  --accent: #2dd4bf;
  --accent-strong: #14b8a6;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-2: #4ade80;
  --danger: #f4736b;
  --danger-bg: rgba(244, 115, 107, 0.13);
  --ok: #4ade80;
  --ok-bg: rgba(74, 222, 128, 0.13);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.13);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px var(--accent-soft);
  --topbar-bg: rgba(12, 13, 18, 0.72);
}

:root[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-elevated: #eef0f3;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --panel-border: #e6e8ec;
  --panel-border-strong: #d5d8de;
  --chip-bg: #eef0f3;
  --chip-bg-hover: #e4e7eb;
  --text: #1a1d23;
  --text-muted: #667085;
  --text-faint: #98a0ad;
  --accent: #0d9488;
  --accent-strong: #0f766e;
  --accent-soft: rgba(13, 148, 136, 0.12);
  --accent-2: #16a34a;
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --ok: #16a34a;
  --ok-bg: rgba(22, 163, 74, 0.1);
  --warn: #d97706;
  --warn-bg: rgba(217, 119, 6, 0.1);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 6px 20px -8px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 18px 44px -12px rgba(16, 24, 40, 0.16);
  --ring: 0 0 0 3px var(--accent-soft);
  --topbar-bg: rgba(255, 255, 255, 0.72);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.15s ease, color 0.15s ease;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border-strong) transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--panel-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
  background-clip: padding-box;
}

.topbar,
.panel,
.stat-card,
.agent-panel,
.chip-select,
.search-input,
.updated-pill,
.icon-btn,
.count-pill,
th,
td {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.status-dot {
  transition: background 0.25s ease, box-shadow 0.25s ease;
}


.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--panel-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* Logo Wavoip Home num cartão branco — legível em qualquer tema (o arquivo é raster c/ fundo branco) */
/* Logo transparente, sem fundo/efeito. Versão preta no tema claro, versão clara no tema escuro. */
.logo-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.logo-chip img {
  display: block;
  height: 46px;
  width: auto;
}

.logo-chip .logo-dark {
  display: none;
}

:root[data-theme="dark"] .logo-chip .logo-light {
  display: none;
}

:root[data-theme="dark"] .logo-chip .logo-dark {
  display: block;
}

.brand-mark-crop {
  width: 29px;
  height: 28px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.brand-mark-crop img {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: auto;
  max-width: none;
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.brand-suffix {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
  font-size: 13px;
  vertical-align: middle;
}

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

.updated-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.icon-btn:hover {
  background: var(--chip-bg-hover);
  color: var(--text);
}

.is-spinning svg {
  animation: spin 0.6s linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dashboard-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 980px) {
  .dashboard-top {
    grid-template-columns: 1fr;
  }
}

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

.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.section-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.section-hints {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hint-pill {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.hint-pill:empty {
  display: none;
}

.is-hidden {
  display: none !important;
}

.table-wrap--capped {
  max-height: 340px;
  overflow-y: auto;
}

.table-wrap--capped thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}


.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-row-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.chip-select {
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}

.chip-select:hover {
  background: var(--chip-bg-hover);
}

.chip-select:focus,
.chip-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.icon-btn:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: var(--ring);
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stats-grid--single {
  grid-template-columns: minmax(220px, 320px);
}

.stats-grid--groups {
  grid-template-columns: repeat(2, minmax(200px, 320px));
}


.priority-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--danger-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 14px;
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease;
}

.priority-banner.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.priority-banner-icon {
  font-size: 16px;
}

.priority-banner-label {
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.priority-banner-text {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 132px;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--panel-border-strong);
  box-shadow: var(--shadow);
}

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

.stat-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ok-bg);
  color: var(--accent-2);
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card--alert .stat-icon {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-card--alert .stat-value {
  color: var(--danger);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-value {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-value.is-updated {
  animation: value-pulse 0.4s ease;
}

.stat-value-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.sparkline {
  width: 90px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
  overflow: visible;
}

.percent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.percent-badge.is-bad {
  color: var(--danger);
  background: var(--danger-bg);
}

.percent-badge.is-good {
  color: var(--ok);
  background: var(--ok-bg);
}

@keyframes value-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
    color: var(--accent);
  }
  100% {
    transform: scale(1);
  }
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.trend-icon {
  width: 14px;
  height: 14px;
}

.trend:not(:empty) {
  animation: row-fade-in 0.3s ease;
}

.trend-up {
  color: var(--ok);
}

.trend-down {
  color: var(--danger);
}

.stat-card.is-loading .stat-label,
.stat-card.is-loading .stat-value {
  color: transparent;
  background: linear-gradient(90deg, var(--chip-bg) 25%, var(--chip-bg-hover) 37%, var(--chip-bg) 63%);
  background-size: 400% 100%;
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease infinite;
}

.stat-card.is-loading .stat-label {
  width: 60%;
  height: 13px;
}

.stat-card.is-loading .stat-value {
  width: 45%;
  height: 34px;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


.agent-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 1;
  max-height: 600px;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease,
    border-color 0.25s ease;
}

.agent-panel.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.agent-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0e0e12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  object-fit: cover;
}

.agent-panel-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.agent-panel-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.agent-panel-subtitle strong {
  color: var(--text);
}

.agent-recent-chats {
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
}

.agent-recent-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.agent-recent-chats ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-recent-chats li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-border);
}

.agent-recent-chats li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.chat-contact {
  font-weight: 600;
  white-space: nowrap;
}

.chat-message {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-inline {
  color: var(--text-muted);
  font-size: 13px;
}


.ignored-panel {
  border-bottom: 1px solid var(--panel-border);
  padding: 18px 26px;
  opacity: 1;
  max-height: 400px;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}

.ignored-panel.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.ignored-panel ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ignored-panel li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.team-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.team-form .search-input {
  min-width: 160px;
  flex: 1;
}

/* Seleção de CARTEIRAS no cadastro de pessoa. É um `select multiple`, então não cabe no `.chip-select`
   (feito pra uma linha só e com cantos de pílula): aqui a caixa mostra várias linhas e rola quando o
   quadro cresce. Herda a cor do resto do formulário pra não parecer um controle de outro sistema. */
.team-form .user-seller-multi {
  border-radius: 12px;
  padding: 5px;
  min-width: 190px;
  max-height: 116px;
  overflow-y: auto;
  cursor: default;
  font-weight: 500;
  line-height: 1.5;
}
.team-form .user-seller-multi option {
  padding: 4px 9px;
  border-radius: 7px;
  color: var(--text-muted);
}
/* Marcado: o mesmo verde-água do resto da interface. Alguns navegadores ignoram cor em `option`, por
   isso a informação também está no texto ("já é fulano") e na lista de pessoas logo abaixo. */
.team-form .user-seller-multi option:checked {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.team-form .user-seller-multi option:disabled { color: var(--text-faint); }

.restore-btn {
  background: var(--chip-bg);
  color: var(--text-muted);
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.restore-btn:hover {
  background: var(--chip-bg-hover);
  color: var(--text);
}


.ignore-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ignore-btn:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.ignore-btn svg {
  width: 14px;
  height: 14px;
}

.resolve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--chip-bg);
  color: var(--text-muted);
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.resolve-btn:hover {
  background: var(--ok-bg);
  color: var(--ok);
}

.resolve-btn svg {
  width: 14px;
  height: 14px;
}

.cell-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ignore-group-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ignore-group-btn:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.ignore-group-btn svg {
  width: 14px;
  height: 14px;
}


.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.panel-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-header h2 {
  margin: 0 0 2px;
  font-size: 16px;
}

.panel-subtitle {
  color: var(--text-muted);
  font-size: 13px;
}

.panel-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--chip-bg);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.panel-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: inherit;
  min-width: 220px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}


.team-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.team-row:hover {
  background: var(--chip-bg);
}

.team-row.is-selected {
  background: var(--ok-bg);
}

.team-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.team-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0e0e12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  object-fit: cover;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--chip-bg);
  color: var(--text-muted);
}

.count-pill.count-pill--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

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

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

th {
  text-align: left;
  padding: 13px 26px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--panel-2);
  border-bottom: 1px solid var(--panel-border);
}

td {
  padding: 14px 26px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

tbody tr {
  animation: row-fade-in 0.25s ease;
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: var(--panel-2);
}

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

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge--danger {
  color: var(--danger);
  background: var(--danger-bg);
}

.badge--ok {
  color: var(--ok);
  background: var(--ok-bg);
}

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

.cell-message {
  color: var(--text-muted);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-waited {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .agent-recent-chats li {
    flex-direction: column;
    gap: 2px;
  }

  .panel-header-right {
    width: 100%;
  }

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

/* Pop-up de alerta de grupo — fica visível e toca em loop até o operador clicar no X */
.alert-popup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--danger-bg);
  animation: alert-popup-in 0.28s ease, alert-popup-glow 1.4s ease-in-out infinite;
}

@keyframes alert-popup-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alert-popup-glow {
  0%,
  100% {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--danger-bg);
  }
  50% {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 7px var(--danger-bg);
  }
}

.alert-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.alert-popup-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.alert-popup-close svg {
  width: 16px;
  height: 16px;
}

.alert-popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-right: 34px;
}

.alert-popup-icon {
  font-size: 18px;
  transform-origin: 50% 0;
  animation: alert-bell 1s ease-in-out infinite;
}

@keyframes alert-bell {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

.alert-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
}

.alert-popup-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.alert-popup-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--danger-bg);
  border-radius: 10px;
}

.alert-popup-item-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.alert-popup-item-waited {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.alert-popup-more {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 4px;
}

@media (max-width: 520px) {
  .alert-popup {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert-popup,
  .alert-popup-icon {
    animation: none;
  }
}

/* Nome do usuário logado, no topo */
.user-pill {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

/* Tela de login (login.html) */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-title {
  margin: 0;
  font-size: 20px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.login-field .search-input {
  width: 100%;
}

.login-submit {
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.login-submit:hover {
  filter: brightness(1.05);
}

.login-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.login-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
}

/* Lista de "Pessoas com acesso" */
.access-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--chip-bg);
  border-radius: 10px;
  font-size: 14px;
}

.access-list .access-empty {
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
}

/* Etiqueta na lista de pessoas: qual carteira a conta comercial enxerga. `is-alerta` marca o comercial
   SEM vínculo — conta que entra no app e não vê nada, e sem a etiqueta isso passava invisível. */
.access-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.access-tag.is-alerta { color: var(--fin-warning); border-color: var(--fin-warning); background: transparent; }

.access-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.access-role {
  padding: 6px 10px;
  font-size: 13px;
}

/* RBAC: esconde os controles conforme o tipo. A trava REAL é no servidor (403); isto é só conforto
   visual. No monitor existem admin, suporte e operacional (gerenciador operacional). Fail-closed: o
   app começa com data-role="suporte".
   .admin-only    → só admin (usuários/config/whitelist/funcionários);
   .ops-only      → admin + operacional (gestão da operação: "Quem está online" e chamar);
   .operator-only → todos os três (resolver/reabrir), então nunca é escondido aqui. */
:root[data-role="suporte"] .admin-only,
:root[data-role="operacional"] .admin-only {
  display: none !important;
}
:root[data-role="suporte"] .ops-only {
  display: none !important;
}

.role-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}

.role-badge--admin {
  color: var(--accent);
  background: var(--ok-bg);
}

.role-badge--suporte,
.role-badge--operacional {
  color: var(--accent-2);
  background: var(--ok-bg);
}

/* Lista "Quem está online" */
.online-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.online-dot.is-online {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
}

.online-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Subtítulo de grupo (Administradores / Operadores / Espectadores) na lista de online */
.access-list li.online-group-label {
  background: transparent;
  border-radius: 0;
  padding: 16px 4px 4px;
  justify-content: flex-start;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.access-list li.online-group-label:first-child {
  padding-top: 2px;
}

.online-group-count {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Overview de gestão: "Quem está online" (coluna esquerda) + grupos (coluna direita). Só admin e
   gerenciador operacional veem a coluna esquerda (.overview-left é ops-only); o suporte fica com os
   grupos em largura cheia. Empilha em telas estreitas. */
.admin-overview {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

:root[data-role="admin"] .admin-overview,
:root[data-role="operacional"] .admin-overview {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.overview-left,
.overview-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0; /* deixa a tabela larga rolar dentro da coluna em vez de estourar o grid */
}

@media (max-width: 1024px) {
  :root[data-role="admin"] .admin-overview,
  :root[data-role="operacional"] .admin-overview {
    grid-template-columns: 1fr;
  }
}

/* Coluna de ações (Resolvido/ignorar) FIXA à direita — sempre visível mesmo se a tabela precisar
   rolar na horizontal (acontece na coluna mais estreita do admin). */
.groups-table th:last-child,
.groups-table td:last-child {
  position: sticky;
  right: 0;
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.45);
}

.groups-table th:last-child {
  background: var(--panel-2);
}

.groups-table td:last-child {
  background: var(--panel);
}

.groups-table tbody tr:hover td:last-child {
  background: var(--panel-2);
}

/* Compacta a tabela nas telas com duas colunas (admin/operacional), pra sobrar espaço; o suporte
   segue com a tabela folgada em largura cheia. */
:root[data-role="admin"] .overview-right td,
:root[data-role="admin"] .overview-right th,
:root[data-role="operacional"] .overview-right td,
:root[data-role="operacional"] .overview-right th {
  padding-left: 18px;
  padding-right: 18px;
}

:root[data-role="admin"] .overview-right .cell-message,
:root[data-role="operacional"] .overview-right .cell-message {
  max-width: 240px;
}

.ring-btn {
  white-space: nowrap;
}

/* Pop-up de "chamado do admin" — atenção no topo, distinto do alarme de grupo */
.ring-popup {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 13px 14px 13px 20px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 15px;
  animation: ring-in 0.28s ease, ring-shake 0.5s ease 0.3s 2;
}

.ring-popup-icon {
  font-size: 20px;
}

.ring-popup-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ring-popup-close:hover {
  background: rgba(0, 0, 0, 0.3);
}

@keyframes ring-in {
  from {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes ring-shake {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  25% {
    transform: translate(-53%, 0);
  }
  75% {
    transform: translate(-47%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring-popup {
    animation: ring-in 0.28s ease;
  }
}

.sound-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 12px;
}

.sound-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* Topbar não quebra layout com o volume + menu */
.topbar-right {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Controle de volume no topo */
.volume-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) var(--vol-pct, 100%),
    var(--chip-bg-hover) var(--vol-pct, 100%)
  );
  cursor: pointer;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.volume-slider:focus-visible {
  box-shadow: var(--ring);
}

/* Menu lateral (drawer) */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1090;
}

.menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 300px;
  max-width: 86vw;
  background: var(--panel);
  border-left: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 14px;
  overflow-y: auto;
}

.side-menu.is-open {
  transform: translateX(0);
}

.side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 6px;
}

.side-menu-title {
  font-size: 15px;
  font-weight: 700;
}

.side-menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--panel-border);
}

.side-menu-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 4px 10px 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.menu-item svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.12s ease;
}

.menu-item:hover {
  background: var(--chip-bg);
}

.menu-item:hover svg {
  color: var(--text);
}

.menu-item--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.menu-item--danger:hover svg {
  color: var(--danger);
}

@media (max-width: 640px) {
  .volume-slider {
    width: 64px;
  }
}

/* ===== Painel financeiro ===== */
/* Cores de status (só usadas como MARCA: borda/dot — nunca como cor de texto/número). */
:root[data-theme="dark"] {
  --fin-good: #34d399;
  --fin-warning: #fbbf24;
  --fin-critical: #f87171;
  --fin-neutral: #8b93a1;
  --fin-blue: #60a5fa;
  --fin-magenta: #e879f9;
  --fin-avulso: #94a3b8;
  --fin-orange: #fb923c;
  --fin-rose: #f43f5e;
}
:root[data-theme="light"] {
  --fin-good: #059669;
  --fin-warning: #ca8a04;
  --fin-critical: #dc2626;
  --fin-neutral: #6b7280;
  --fin-blue: #2563eb;
  --fin-magenta: #c026d3;
  --fin-avulso: #64748b;
  --fin-orange: #ea580c;
  --fin-rose: #be123c;
}

.finance-panel {
  max-width: 1080px;
}
.finance-panel .panel-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fin-state,
.fin-empty {
  color: var(--text-muted);
  padding: 18px 4px;
  font-size: 14px;
}

/* KPIs (buckets) e stats (previsão) — grades responsivas */
.fin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.fin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.fin-kpi,
.fin-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--fin-c, var(--panel-border-strong));
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.fin-kpi--good { --fin-c: var(--fin-good); }
.fin-kpi--warn { --fin-c: var(--fin-warning); }
.fin-kpi--crit { --fin-c: var(--fin-critical); }
.fin-kpi--neutral { --fin-c: var(--fin-neutral); }
.fin-stat--accent { --fin-c: var(--accent); }
.fin-stat--crit { --fin-c: var(--fin-critical); }

.fin-kpi-label,
.fin-stat-label {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.fin-kpi-value {
  color: var(--text);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.fin-stat-value {
  color: var(--text);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fin-kpi-sub,
.fin-stat-sub {
  color: var(--text-faint);
  font-size: 12px;
}

/* Gráficos */
.fin-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: row dense;
  gap: 14px;
}
.fin-chart {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 12px;
}
/* Cards de largura total (séries de 12 meses) — ocupam a linha inteira da grade. */
.fin-chart--wide {
  grid-column: 1 / -1;
}
.fin-chart-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.fin-chart-head span {
  display: block;
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--text-faint);
}

/* Barras verticais (SVG) — série temporal, hue único */
.fin-svg {
  display: block;
  width: 100%;
  height: auto;
}
.fin-bar {
  fill: var(--accent);
}
.fin-bar--hi {
  fill: var(--accent-strong);
}
/* Card de clientes (novos e cancelados): mesmo magenta de "Novas (1ª fatura)" no painel */
.fin-svg--magenta .fin-bar { fill: var(--fin-magenta); }
/* Chip selecionado na cor do próprio card (o padrão é o accent). `--chip-c` vem da classe do grupo. */
.hist-chips--magenta { --chip-c: var(--fin-magenta); }
.hist-chips--venc { --chip-c: var(--fin-critical); }
.hist-chips--pago { --chip-c: var(--fin-good); }
.hist-chips--magenta .live-chip.is-active,
.hist-chips--venc .live-chip.is-active,
.hist-chips--pago .live-chip.is-active {
  color: var(--chip-c);
  border-color: var(--chip-c);
  background: var(--panel-2);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .hist-chips--magenta .live-chip.is-active,
  .hist-chips--venc .live-chip.is-active,
  .hist-chips--pago .live-chip.is-active {
    background: color-mix(in srgb, var(--chip-c) 15%, transparent);
  }
  .hist-chips--magenta .live-chip.is-active:focus-visible,
  .hist-chips--venc .live-chip.is-active:focus-visible,
  .hist-chips--pago .live-chip.is-active:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-c) 22%, transparent);
  }
}
.fin-bar-val {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.fin-bar-lbl {
  fill: var(--text-faint);
  font-size: 11px;
}
.fin-bar-tag {
  fill: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 600;
}
.fin-axis {
  stroke: var(--panel-border-strong);
  stroke-width: 1;
}

/* Barras agrupadas por status (cor como marca; identidade vem da legenda) */
.fin-gbar--new { fill: var(--fin-magenta); }
.fin-gbar--sub { fill: var(--fin-blue); }
.fin-gbar--avulso { fill: var(--fin-avulso); }
.fin-gbar--paid { fill: var(--fin-good); }
.fin-gbar--contrat { fill: var(--fin-orange); }
.fin-gbar--wait { fill: var(--fin-warning); }
.fin-gbar--atraso { fill: var(--fin-rose); }
.fin-gbar--overdue { fill: var(--fin-critical); }
.fin-gval {
  fill: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
}
/* Card de renovações: gráfico em largura natural com rolagem horizontal (rótulos horizontais legíveis) */
.fin-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}
.fin-svg--natural {
  max-width: none;
  width: auto;
}
.fin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 2px 0 8px;
}
.fin-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.fin-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.fin-legend-dot.new { background: var(--fin-magenta); }
.fin-legend-dot.sub { background: var(--fin-blue); }
.fin-legend-dot.avulso { background: var(--fin-avulso); }
.fin-legend-dot.paid { background: var(--fin-good); }
.fin-legend-dot.contrat { background: var(--fin-orange); }
.fin-legend-dot.wait { background: var(--fin-warning); }
.fin-legend-dot.atraso { background: var(--fin-rose); }
.fin-legend-dot.overdue { background: var(--fin-critical); }

/* Barras horizontais (HTML) — magnitude por categoria, rótulo direto */
.fin-hbars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}
.fin-hbar-row {
  display: grid;
  grid-template-columns: minmax(84px, 130px) 1fr auto;
  align-items: center;
  gap: 10px;
}
.fin-hbar-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.fin-hbar-track {
  height: 16px;
  background: var(--panel-border);
  border-radius: 999px;
  overflow: hidden;
}
.fin-hbar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.fin-hbar-num {
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* KPI com dois números (quantidade + valor). O destaque troca no clique: o número grande vem
   sempre primeiro e o outro logo depois, menor. Tamanhos por variável pra acompanhar o breakpoint. */
.fin-kpi-swap {
  --fin-big: 30px;
  --fin-small: 15.5px;
  /* duração da troca: manter em sincronia com SWAP_MS no finance.js (o deslize é animado por lá) */
  --fin-swap-t: 1s;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
}
.fin-kpi-swap:focus-visible { outline: none; box-shadow: var(--ring); }
.fin-kpi-a, .fin-kpi-b {
  transition: font-size var(--fin-swap-t) cubic-bezier(0.4, 0, 0.2, 1),
              color var(--fin-swap-t) cubic-bezier(0.4, 0, 0.2, 1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fin-kpi-a { order: 1; font-size: var(--fin-big); font-weight: 700; color: var(--text); }
.fin-kpi-b { order: 2; font-size: var(--fin-small); font-weight: 600; color: var(--text-muted); }
.fin-kpi-swap.is-swapped .fin-kpi-a { order: 2; font-size: var(--fin-small); font-weight: 600; color: var(--text-muted); }
.fin-kpi-swap.is-swapped .fin-kpi-b { order: 1; font-size: var(--fin-big); font-weight: 700; color: var(--text); }

@media (max-width: 640px) {
  .fin-kpi-value { font-size: 26px; }
  .fin-kpi-swap { --fin-big: 26px; --fin-small: 14px; }
  .fin-hbar-row { grid-template-columns: minmax(72px, 96px) 1fr auto; gap: 8px; }
  .fin-hbar-num { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-kpi-a, .fin-kpi-b { transition: none; }
}

/* Página dedicada /financeiro.html */
.finance-page {
  padding: 22px clamp(14px, 4vw, 40px) 56px;
}
.finance-page .finance-panel {
  margin: 0 auto;
}
a.chip-select {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   Painel financeiro — polimento visual + interatividade
   ============================================================ */
@keyframes finRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes finGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes finGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes finFade { from { opacity: 0; } to { opacity: 1; } }

.fin-kpis, .fin-stats { margin-bottom: 16px; }

/* Entrada suave + elevação no hover dos cards.
   fill-mode BACKWARDS (não "both"): aplica o quadro inicial durante o delay (sem flash), mas NÃO
   retém o transform ao fim — senão o transform travado anularia o translateY do :hover. */
.fin-kpi, .fin-stat, .fin-chart {
  animation: finRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.fin-kpis .fin-kpi:nth-child(2) { animation-delay: 0.04s; }
.fin-kpis .fin-kpi:nth-child(3) { animation-delay: 0.08s; }
.fin-kpis .fin-kpi:nth-child(4) { animation-delay: 0.12s; }
.fin-stats .fin-stat:nth-child(2) { animation-delay: 0.05s; }
.fin-stats .fin-stat:nth-child(3) { animation-delay: 0.1s; }
.fin-charts .fin-chart:nth-child(2) { animation-delay: 0.06s; }
.fin-charts .fin-chart:nth-child(3) { animation-delay: 0.1s; }
.fin-charts .fin-chart:nth-child(n + 4) { animation-delay: 0.14s; }
.fin-kpi:hover, .fin-stat:hover, .fin-chart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  border-color: var(--panel-border-strong);
}

/* KPI: cabeçalho (label + %) + barra de progresso da fatia */
.fin-kpi { position: relative; overflow: hidden; }
.fin-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-kpi-pct {
  font-size: 11px; font-weight: 700; line-height: 1.5;
  color: var(--fin-c, var(--text-muted));
  background: var(--panel-border);
  padding: 1px 7px; border-radius: 999px;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .fin-kpi-pct { background: color-mix(in srgb, var(--fin-c, var(--accent)) 16%, transparent); }
}
.fin-kpi-value { margin-top: 2px; }
.fin-kpi-bar {
  display: block; height: 5px; margin-top: 2px;
  background: var(--panel-border); border-radius: 999px; overflow: hidden;
}
.fin-kpi-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--fin-c, var(--accent));
  transform-origin: left; animation: finGrowX 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Stat tiles (previsão): faixa de destaque no topo */
.fin-stat { position: relative; overflow: hidden; }
.fin-stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--fin-c, var(--accent)), transparent 88%);
}

/* Barras: crescem na entrada; destaque no hover (cursor + brilho) */
.fin-svg path {
  transform-box: fill-box; transform-origin: bottom;
  animation: finGrowY 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transition: filter 0.12s ease; cursor: pointer;
}
.fin-svg path:hover { filter: brightness(1.14) saturate(1.06); }
.fin-svg text { animation: finFade 0.6s ease both; }
.fin-hbar-fill { transform-origin: left; animation: finGrowX 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.fin-hbar-row {
  cursor: pointer; border-radius: 7px; padding: 3px 4px; margin: -3px -4px;
  transition: background 0.12s ease;
}
.fin-hbar-row:hover { background: var(--accent-soft); }

/* Scrollbar do gráfico rolável */
.fin-scroll { scrollbar-width: thin; scrollbar-color: var(--panel-border-strong) transparent; }
.fin-scroll::-webkit-scrollbar { height: 9px; }
.fin-scroll::-webkit-scrollbar-thumb { background: var(--panel-border-strong); border-radius: 999px; }
.fin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Tooltip flutuante dos gráficos */
.fin-tip {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: flex-start; gap: 8px; max-width: 300px;
  padding: 8px 11px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--panel-border-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.12s ease; will-change: transform;
}
.fin-tip.is-on { opacity: 1; }
.fin-tip-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 3px; flex: none; }
.fin-tip-txt { display: flex; flex-direction: column; }
.fin-tip-head { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* pre-line: o corpo do tooltip pode ter mais de uma linha (ex.: faturas por status no card de método) */
.fin-tip-body { font-size: 12px; color: var(--text-muted); margin-top: 1px; white-space: pre-line; }

/* Botão Atualizar durante o carregamento */
.chip-select.is-loading { opacity: 0.6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fin-kpi, .fin-stat, .fin-chart, .fin-svg path, .fin-svg text, .fin-hbar-fill, .fin-kpi-bar i {
    animation: none !important;
  }
}

/* ============================================================
   Remodelagem: largura total + cards soltos na página
   ============================================================ */
.finance-page { padding: 20px clamp(16px, 3vw, 44px) 64px; }

/* Painel deixa de ser uma "caixa" e vira só um contêiner de largura total */
.finance-page .finance-panel {
  max-width: 1760px;      /* cap generoso: usa a tela toda, sem esticar demais em ultrawide */
  margin: 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Header como faixa limpa sobre o fundo da página */
.finance-panel .panel-header {
  margin: 2px 2px 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
.finance-panel .panel-header h2 { font-size: 22px; letter-spacing: -0.01em; }

/* Cards ganham um pouco mais de presença sobre o --bg da página */
.fin-kpi, .fin-stat, .fin-chart {
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Grades ocupando a largura inteira */
.fin-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fin-stats { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

/* Gráficos: grade responsiva de 6 colunas (composição sem buracos).
   Renovações = linha toda · Vencimentos/Aging = metade · Método/Ciclo/Status = 1/3. */
.fin-charts { grid-template-columns: 1fr; grid-auto-flow: row; gap: 16px; }
@media (min-width: 720px) {
  .fin-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-charts .fin-chart--wide { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .fin-charts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fin-charts .fin-chart { grid-column: span 2; }        /* padrão: 1/3 da largura */
  .fin-charts .fin-chart--half { grid-column: span 3; }  /* metade */
  .fin-charts .fin-chart--wide { grid-column: 1 / -1; }  /* largura total */
}

/* KPIs/stats um pouco mais altos pra respirar na largura maior */
.fin-kpi { padding: 15px 17px; }
.fin-stat { padding: 15px 17px; }
.fin-kpi-value { font-size: 32px; }
.fin-stat-value { font-size: 25px; }

/* ============================================================
   Tabbar (Painel | Ao vivo) + feed "Ao vivo"
   ============================================================ */
.fin-tabs {
  display: flex;
  gap: 2px;
  margin: 0 2px 18px;
  border-bottom: 1px solid var(--panel-border);
}
/* `display:flex` acima vence o [hidden] do navegador (que só define display:none na folha padrão),
   então esconder a barra de abas por JS exige esta regra. Usado no Comercial, onde quem não é
   admin não tem nenhuma aba liberada. */
.fin-tabs[hidden] { display: none; }
/* Mesmo motivo, agora para a ABA individual: a aba "Recuperados" nasce com `hidden` (só se chega a
   ela pelo número da comissão), e sem esta regra o display do próprio botão venceria o [hidden] do
   navegador e ela apareceria na barra assim mesmo. */
.fin-tab[hidden] { display: none; }
.fin-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fin-tab:hover { color: var(--text); }
.fin-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.fin-tab-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fin-good, #34d399);
  animation: livePulse 1.9s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

#finance-live { animation: finRise 0.4s ease both; }
.live-feed { display: flex; flex-direction: column; gap: 8px; }

/* Cabeçalho de mês — gruda logo abaixo da topbar sticky (≈58px) */
.live-month {
  position: sticky;
  top: 58px;
  z-index: 3;
  margin: 16px 0 6px;
  padding: 7px 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
}
.live-month:first-child { margin-top: 2px; }

/* Linha do feed */
.live-row {
  display: grid;
  /* última coluna = "3 pontinhos" (ou espaçador, nas linhas dentro de uma caixa de cliente) */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--live-c, var(--panel-border-strong));
  border-radius: var(--radius-sm);
  padding: 11px 16px 11px 14px;
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.live-row:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: var(--panel-border-strong);
}
.live-row--ok { --live-c: var(--fin-good); }
.live-row--wait { --live-c: var(--fin-warning); }
.live-row--over { --live-c: var(--fin-critical); }
.live-row--off { --live-c: var(--fin-neutral); }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live-c); flex: none; }
.live-cli { display: flex; flex-direction: column; min-width: 0; }
.live-cli-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-cli-meta {
  font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-col {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; min-width: 82px;
}
.live-col b { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.live-col span { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.live-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; color: var(--live-c); background: var(--panel-2); min-width: 74px; text-align: center;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .live-badge { background: color-mix(in srgb, var(--live-c) 16%, transparent); }
}

.live-status { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 18px 8px; }

/* Cliente com 2+ assinaturas no mês: uma caixa só, que abre as assinaturas individuais ao clicar */
.live-group { display: flex; flex-direction: column; }
.live-row--grp { cursor: pointer; background: var(--panel-2); }
.live-row--grp:focus-visible { outline: none; box-shadow: var(--ring); }
.live-grp-lead { display: flex; align-items: center; gap: 7px; }
.live-grp-chev {
  font-size: 11px; color: var(--text-muted);
  transform: rotate(-90deg); transition: transform 0.15s ease;
}
.live-group.is-open .live-grp-chev { transform: rotate(0); }
.live-grp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.live-pill {
  font-size: 11px; font-weight: 600; line-height: 1.6;
  padding: 0 8px; border-radius: 999px; white-space: nowrap;
  color: var(--pill-c, var(--text-muted));
  background: var(--panel); border: 1px solid var(--panel-border);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .live-pill {
    background: color-mix(in srgb, var(--pill-c) 14%, transparent);
    border-color: color-mix(in srgb, var(--pill-c) 32%, transparent);
  }
}
.live-pill--ok { --pill-c: var(--fin-good); }
.live-pill--wait { --pill-c: var(--fin-warning); }
.live-pill--over { --pill-c: var(--fin-critical); }
.live-pill--off { --pill-c: var(--fin-neutral); }
.live-pill.is-zero { --pill-c: var(--text-faint); }

/* Assinaturas individuais da caixa aberta: recuadas, com trilho ligando ao cliente */
.live-sub {
  display: flex; flex-direction: column; gap: 6px;
  margin: 7px 0 2px 24px; padding-left: 14px;
  border-left: 2px solid var(--panel-border-strong);
  /* backwards (não "both"): com "both" o transform final travaria e mataria o :hover das linhas */
  animation: finRise 0.25s ease backwards;
}
.live-sub-cap { font-size: 11.5px; color: var(--text-faint); margin: 0 0 2px 2px; }

/* Ação da linha: "3 pontinhos" (menu) ou ícone de link (fatura única) — mesma caixa, mesma coluna */
.live-dots, .live-dots-gap, .live-link { width: 26px; height: 26px; flex: none; }
.live-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint); border: 1px solid transparent; border-radius: 8px;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.live-link:hover { color: var(--accent); background: var(--panel-2); border-color: var(--accent); }
.live-row--grp .live-link:hover { background: var(--panel); }
.live-link:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
.live-dots {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; color: var(--text-faint);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; padding: 0;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.live-dots:hover, .live-dots.is-open { color: var(--text); background: var(--panel-2); border-color: var(--panel-border-strong); }
.live-row--grp .live-dots:hover, .live-row--grp .live-dots.is-open { background: var(--panel); }
.live-dots:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }

.live-menu {
  position: fixed; z-index: 60; left: 0; top: 0;
  width: min(360px, calc(100vw - 16px));
  background: var(--panel); border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius-sm); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  overflow: hidden; animation: finRise 0.14s ease backwards;
}
.live-menu[hidden] { display: none; }
.live-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-bottom: 1px solid var(--panel-border); background: var(--panel-2);
}
.live-menu-cli {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-menu-sub { font-size: 11.5px; color: var(--text-faint); }
.live-menu-list { max-height: 320px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.live-menu-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 2px 10px; padding: 7px 10px; border-radius: 8px; text-decoration: none;
  border-left: 3px solid var(--live-c, var(--panel-border-strong));
  background: var(--panel-2);
  transition: background 0.12s ease, transform 0.12s ease;
}
.live-menu-item:hover { background: var(--chip-bg-hover); transform: translateX(2px); }
.live-menu-item.is-nolink { cursor: not-allowed; opacity: 0.7; }
/* colunas explícitas: mês/detalhe à esquerda (2 linhas), selo de status à direita */
.live-menu-mes { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.live-menu-meta { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--text-faint); }
.live-menu-item .live-badge { grid-column: 2; grid-row: 1 / span 2; min-width: 68px; }
.live-menu-empty { padding: 16px 12px; font-size: 12.5px; color: var(--text-faint); text-align: center; }

@media (max-width: 760px) {
  .live-sub { margin-left: 10px; padding-left: 10px; }
}

/* Responsivo: em telas estreitas some com colunas do meio (ficam no tooltip) */
@media (max-width: 760px) {
  .live-row { grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 12px; }
  .live-col.live-venc, .live-col.live-pagas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-tab-live-dot, #finance-live { animation: none !important; }
}

/* ============================================================
   Ao vivo v2 — toolbar (busca + chips + ordenação) e meses colapsáveis
   ============================================================ */
.live-toolbar {
  position: sticky;
  top: 57px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  margin-bottom: 2px;
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
}
.live-search {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}
.live-search::placeholder { color: var(--text-faint); }
.live-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.live-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.live-chip {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-muted);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.live-chip:hover { color: var(--text); }
.live-chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
/* Contador dentro de um chip de filtro (quantos clientes com cobrança vencida na carteira). */
.com-chip-n {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-chip.is-active .com-chip-n { background: var(--panel); border-color: var(--accent); }
/* Sem nenhum vencido o chip continua visível, mas apagado: aparecer e desaparecer conforme os dados
   faria a barra pular, e "0" também é informação. */
.live-chip[disabled] { opacity: 0.45; cursor: default; }
.live-chip[disabled]:hover { color: var(--text-muted); }
.live-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.live-sort-lbl { font-size: 12px; color: var(--text-faint); margin-right: 4px; }
.live-sort-b {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.live-sort-b:hover { color: var(--text); background: var(--panel-2); }
.live-sort-b.is-active { color: var(--text); background: var(--panel-2); }
.live-sort-arrow { font-size: 9px; color: var(--accent); }

.live-count { font-size: 12.5px; color: var(--text-faint); margin: 10px 2px; }

/* Cabeçalho de mês colapsável (sobrescreve o sticky antigo) */
.live-month {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 8px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  user-select: none;
  border-radius: 8px 8px 0 0;
  transition: background 0.12s ease;
}
.live-month:hover { background: var(--panel-2); }
.live-month:first-child { margin-top: 2px; }
.live-chev { font-size: 11px; color: var(--text-muted); transition: transform 0.15s ease; }
.live-month.is-collapsed .live-chev { transform: rotate(-90deg); }
.live-month-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--panel-2);
  padding: 1px 9px;
  border-radius: 999px;
  letter-spacing: 0;
}
/* ===== Aba Histórico ===== */
#finance-hist { animation: finRise 0.4s ease backwards; }
.fin-stat--neutral { --fin-c: var(--fin-neutral); }
.hist-chips { margin-bottom: 10px; }
.hist-aviso {
  margin: 0 0 10px; padding: 8px 11px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
  background: var(--panel-2); border-left: 3px solid var(--panel-border-strong);
}
.hist-aviso--alerta { color: var(--text-muted); border-left-color: var(--fin-warning); }

/* Total em destaque no topo do card de faturas pagas (as barras dos métodos vêm logo abaixo) */
.hist-total {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
}
.hist-total-n {
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.hist-total-lbl { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; }
.hist-total-lbl b { color: var(--text-muted); font-weight: 700; }

/* Calendário de vencimentos */
.hist-cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hist-cal-mes { font-size: 13px; font-weight: 700; color: var(--text); min-width: 150px; text-align: center; }
.hist-cal-b {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--panel-border);
  color: var(--text-muted); font-size: 16px; line-height: 1;
}
.hist-cal-b:hover { color: var(--text); border-color: var(--accent); }
.hist-cal-b:focus-visible { outline: none; box-shadow: var(--ring); }

.hist-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
/* modo anual: dias 1–31 sem cabeçalho de semana (não são dias da semana, são dias do mês) */
.hist-cal-grid--ano { grid-template-columns: repeat(8, 1fr); }
.hist-chip-sep {
  width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--panel-border-strong);
}
.hist-cal-wd {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); text-align: center; padding-bottom: 2px;
}
.hist-cal-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; border-radius: 9px;
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
}
.hist-cal-cell.is-empty { border: 0; background: transparent; }
.hist-cal-cell b { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hist-cal-cell i {
  font-style: normal; font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hist-cal-cell.is-today { outline: 2px solid var(--cal-c, var(--accent)); outline-offset: -2px; }
/* Cor do calendário = a da série escolhida: vermelho em vencimentos, verde em pagamentos. */
.hist-cal-grid { --cal-c: var(--accent); }
.hist-cal-grid--venc { --cal-c: var(--fin-critical); }
.hist-cal-grid--pago { --cal-c: var(--fin-good); }
/* intensidade = nº de faturas no dia (fundo só como marca; o número fica em token de texto) */
.hist-cal-n1 { background: color-mix(in srgb, var(--cal-c) 12%, var(--panel-2)); }
.hist-cal-n2 { background: color-mix(in srgb, var(--cal-c) 24%, var(--panel-2)); }
.hist-cal-n3 { background: color-mix(in srgb, var(--cal-c) 38%, var(--panel-2)); }
.hist-cal-n4 { background: color-mix(in srgb, var(--cal-c) 52%, var(--panel-2)); }
.hist-cal-n1, .hist-cal-n2, .hist-cal-n3, .hist-cal-n4 { border-color: transparent; }
.hist-cal-foot { margin: 12px 2px 0; font-size: 12px; color: var(--text-faint); }
.hist-cal-foot b { color: var(--text-muted); font-weight: 700; }

@media (max-width: 560px) {
  .hist-cal-cell { min-height: 42px; }
  .hist-cal-cell i { font-size: 12px; }
}

/* Caixa única com TODOS os meses posteriores ao corrente (a vencer) — fechada por padrão */
.live-future {
  border: 1px dashed var(--panel-border-strong);
  border-radius: var(--radius-sm);
  margin: 10px 0 6px;
  overflow: hidden;
}
.live-future-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  transition: background 0.12s ease;
}
.live-future-head:hover { background: var(--panel-2); }
.live-future-head:focus-visible { outline: none; box-shadow: var(--ring); }
.live-future-chev { transform: rotate(-90deg); transition: transform 0.15s ease; }
.live-future.is-open .live-future-chev { transform: rotate(0); }
.live-future-t { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.live-future-sub { font-size: 12px; color: var(--text-faint); flex: 1; }
.live-future-body { padding: 0 12px 10px; }
.live-future-body .live-month { margin-top: 6px; }

.live-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.live-more {
  appearance: none;
  cursor: pointer;
  display: block;
  width: 100%;
  margin: 8px 0 2px;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--panel-border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.live-more:hover { color: var(--text); border-color: var(--accent); }

/* ============================ Aba Inadimplentes ============================ */
/* KPIs de resumo (próprios, pra controlar cor por severidade sem a barra do painel) */
.inad-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 4px;
}
.inad-kpi {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 10px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inad-kpi-v { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.inad-kpi-l { font-size: 12px; color: var(--text-muted); }
.inad-kpi--crit { border-left-color: var(--danger); }
.inad-kpi--warn { border-left-color: var(--warn); }
.inad-kpi--good { border-left-color: var(--accent-2); }
@media (max-width: 720px) { .inad-kpis { grid-template-columns: repeat(2, 1fr); } }

.inad-toolbar { margin-top: 16px; }
.inad-count { color: var(--text-muted); font-size: 12px; margin: 10px 2px; }
.inad-wrap { overflow-x: auto; }

.inad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inad-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--panel-border);
}
.inad-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: middle;
}
.inad-row:hover td { background: var(--panel-2); }
.inad-row.is-resolved { opacity: 0.55; }
.inad-row.is-resolved .inad-cli-name { text-decoration: line-through; }

.inad-cli { min-width: 190px; }
.inad-cli-name { display: block; font-weight: 600; color: var(--text); }
.inad-cli-meta { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.inad-val b { color: var(--danger); white-space: nowrap; font-size: 14px; }
.inad-num { text-align: center; color: var(--text-muted); }
.inad-atraso b { display: block; white-space: nowrap; }
.inad-atraso span { display: block; color: var(--text-muted); font-size: 11px; }
.inad-fatura { text-align: center; }

.inad-obs { min-width: 230px; }
.inad-note {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated, var(--panel));
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
}
.inad-note::placeholder { color: var(--text-faint); }
.inad-note:focus { outline: none; border-color: var(--accent); }
.inad-saved { display: inline-block; font-size: 11px; color: var(--text-muted); min-height: 13px; margin-top: 3px; }
.inad-saved.is-ok { color: var(--accent-2); }
.inad-saved.is-err { color: var(--danger); }

.inad-done { text-align: center; }
.inad-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.inad-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inad-toggle-ui {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel-border-strong, var(--panel-border));
  position: relative;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.inad-toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.inad-check:checked + .inad-toggle-ui { background: var(--accent-2); }
.inad-check:checked + .inad-toggle-ui::after { transform: translateX(18px); }
.inad-check:focus-visible + .inad-toggle-ui { box-shadow: 0 0 0 3px var(--ok-bg); }

/* =========================================================================
   COMERCIAL — 1ª aba: lista de clientes (um por cliente, sem repetir por
   assinatura). Nome em destaque; celular e email de login em miúdos embaixo.
   Reusa a toolbar/chips do feed do financeiro (.live-toolbar/.live-chip).
   ========================================================================= */
.com-count {
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 2px 2px 10px;
}

.com-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
}

.com-cli {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--panel-border);
}
.com-cli-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.com-cli:last-child { border-bottom: 0; }
.com-cli:hover { background: var(--accent-soft); }

.com-cli-nome {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* "Em miúdos": um degrau abaixo do nome, em cor secundária. */
.com-cli-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.com-cli-fone { white-space: nowrap; font-variant-numeric: tabular-nums; }
.com-cli-fone.is-empty { color: var(--text-faint); font-style: italic; }
.com-cli-sep { color: var(--text-faint); }
.com-cli-email { overflow-wrap: anywhere; }

.com-more { margin: 14px auto 4px; display: block; }

/* --- Comercial: contador nas abas ---------------------------------------- */
.com-tab-n {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-border);
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fin-tab.is-active .com-tab-n { background: var(--accent-soft); color: var(--accent); }

/* --- Comercial: ação da linha (etiqueta do vendedor + 3 pontinhos) ------- */
.com-cli-acao { display: flex; align-items: center; gap: 8px; }
.com-cli-tag {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
}
.com-dots {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-muted);
  width: 30px;
  height: 26px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.com-dots:hover { color: var(--text); border-color: var(--panel-border-strong); }
.com-dots:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* --- Comercial: menu de escolha do vendedor ------------------------------ */
.com-menu {
  position: fixed;
  z-index: 60;
  display: none;
  min-width: 250px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--panel-border-strong);
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}
.com-menu.is-open { display: block; }
.com-menu-head {
  margin: 0;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-faint);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.com-menu-title {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.com-menu-item {
  appearance: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin-top: 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}
.com-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.com-menu-item.is-current { color: var(--accent); }
.com-menu-check { color: var(--accent); }
.com-menu-clear { color: var(--text-muted); border-top: 1px solid var(--panel-border); border-radius: 0 0 8px 8px; margin-top: 6px; padding-top: 10px; }
.com-menu-clear:hover { color: var(--danger); background: transparent; }

/* --- Comercial: aba do vendedor (cabeçalho + assinaturas) ---------------- */
.com-vend-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 4px;
  font-size: 15px;
  color: var(--text);
}
.com-vend-head span { color: var(--text-muted); font-size: 12.5px; }

/* A linha da carteira ganha uma 3ª faixa (as assinaturas) sob nome e contato. */
.com-cli--full { grid-template-rows: auto auto; align-items: start; }
.com-cli-subs { grid-column: 1 / -1; margin-top: 8px; }

/* Grade da carteira: UMA tabela pra todos os clientes (linha = assinatura, coluna = mês), com
   rolagem horizontal única — é o que mantém a mesma coluna de mês alinhada entre clientes mesmo
   depois de rolar. */
.com-carteira { overflow-x: auto; }
.com-grade { width: 100%; border-collapse: collapse; font-size: 12px; }
/* Piso por coluna de mês: sem isso, mês só com traço encolhe e as colunas ficam desiguais. */
.com-grade thead th:not(.com-grade-info) { min-width: 96px; }
/* Reseta o que as regras globais de tabela aplicam e aqui atrapalham: o `th` é caixa-alta, 11px,
   com fundo cinza e padding de tabela larga; o `td` traz borda inferior; e `tbody tr` tem animação
   de entrada que, com a atualização automática, faria a grade piscar a cada 30s. */
.com-grade th,
.com-grade td {
  padding: 4px 6px;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  background: transparent;
  border-bottom: 0;
  vertical-align: middle;
}
.com-grade tbody tr { animation: none; }
.com-grade tbody tr:hover { background: transparent; }
.com-grade thead th {
  color: var(--text-faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-border);
}
/* A coluna da assinatura fica colada à esquerda pra não sumir ao rolar os meses. Precisa de fundo
   OPACO pros meses passarem por baixo — e o fundo certo é o da página: neste projeto o `.panel` é
   transparente, então usar var(--panel) aqui pintava um bloco mais claro que o resto. */
.com-grade .com-grade-info {
  position: sticky;
  left: 0;
  z-index: 1;
  /* `width:1%` é o truque de tabela pra esta coluna encolher até o conteúdo: assim a folga toda vai
     pras colunas de mês, e não pra coluna da assinatura. */
  width: 1%;
  text-align: left;
  padding-right: 18px;
  background: var(--bg);
  color: var(--text-muted);
}
/* Sem realce no hover das linhas da carteira: são blocos altos, e o tom passaria por trás da
   coluna fixa (que é opaca), deixando um retângulo destoante. */
.com-cli--full:hover { background: transparent; }
/* Grade interna de largura FIXA pra data, valor, ciclo e situação caírem na mesma coluna em todas
   as linhas — com flex, cada linha se ajustava ao próprio texto ("R$ 0,00" x "R$ 1.950,00") e os
   selos ativa/inativa ficavam desalinhados entre si. A data tem tamanho constante (dd/mm/aaaa); o
   valor é alinhado à direita e cabe o maior da base (R$ 6.510,00); o selo já tem largura mínima
   própria, então fecha alinhado dos dois lados.
   ⚠️ A 4ª trilha é `max-content`, e o `min-width` embaixo NÃO é redundante: a célula que segura esta
   grade é um <th> com `width: 1%` (o truque de tabela pra a coluna encolher até o conteúdo), e nessa
   combinação o Chromium dimensiona a trilha pelo selo CURTO e deixa o texto do selo longo vazar pra
   fora da borda — foi exatamente o que aconteceu com "cancelada · até jul/26". O `min-width` é o que
   obriga a célula a reservar a largura real do conteúdo. */
.com-grade-info-in {
  display: grid;
  /* A 1ª coluna é o número da assinatura: fixo em 62px pra a data começar sempre no mesmo x, mesmo
     quando o id passa de 3 pra 4 dígitos. Sem isso as linhas do bloco do cliente ficariam em degrau. */
  grid-template-columns: 62px 148px 92px 52px max-content;
  min-width: max-content;
  align-items: baseline;
  gap: 10px;
}
.com-grade-info-in .com-sub-valor { text-align: right; }

/* Faixa um tom mais clara na linha da assinatura: com a grade larga, é o que deixa seguir a linha
   com o olho até o mês certo. Precisa vencer o fundo da coluna fixa (que é opaco por ser sticky) —
   daí o seletor com a classe da tabela junto, senão `.com-grade .com-grade-info` ganharia. */
.com-grade .com-linha-sub > th,
.com-grade .com-linha-sub > td { background: var(--panel-2); }
.com-grade .com-linha-sub > th:first-child { border-radius: 8px 0 0 8px; }
.com-grade .com-linha-sub > td:last-child { border-radius: 0 8px 8px 0; }
.com-linha-sub + .com-linha-sub > th,
.com-linha-sub + .com-linha-sub > td { box-shadow: inset 0 1px 0 var(--panel-border); }

/* Cabeçalho do cliente e linha de total: colspan na tabela toda, com o conteúdo grudado à esquerda
   (position:sticky no <div> interno) pra não sair da tela quando os meses rolam. */
.com-cli-topo {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  /* Encolhe até o conteúdo: como fica grudado à esquerda enquanto os meses rolam, uma largura fixa
     só criaria uma faixa vazia por cima da grade. */
  width: max-content;
  max-width: 100%;
  /* A tabela centraliza as células (é o certo pras caixinhas de mês); aqui é texto corrido. */
  text-align: left;
}
/* Nome do cliente, o CPF/CNPJ e (na carteira) os ⋯, tudo na mesma linha. `flex-wrap` deixa o
   documento cair pra linha de baixo em tela estreita em vez de espremer o nome; o `min-width: 0` no
   nome é o que permite ele encolher e quebrar — sem isso o flex respeita o tamanho do texto e
   empurra o documento pra fora da caixa. */
.com-cli-nome-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.com-cli-nome-linha .com-cli-nome { min-width: 0; }

/* CPF/CNPJ ao lado do nome: um degrau abaixo em tamanho e cor, pra identificar sem competir com o
   nome. `tabular-nums` alinha os dígitos entre as linhas da lista, e `nowrap` impede que a máscara
   quebre no meio (um "12.345.678/" órfão no fim da linha é ilegível). */
.com-cli-doc {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: none;
}
.com-linha-cli > td { padding: 16px 6px 8px !important; }
.com-linha-total > td { padding: 8px 6px 18px !important; }
.com-linha-vazia > td { padding: 0 6px 16px !important; }
.com-grade tbody .com-linha-cli:not(:first-child) > td { border-top: 1px solid var(--panel-border); padding-top: 20px !important; }
/* Número da assinatura no banco do Wavoip. É o que liga a linha da carteira à aba Setup, à fatura no
   Asaas e a qualquer conferência feita direto no banco — por isso fica à vista, e não só na dica. */
.com-sub-id {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  user-select: all;
}
.com-sub-data { color: var(--text-muted); }
.com-sub-valor { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.com-sub-ciclo { color: var(--text-faint); }

/* Caixa colorida por mês: verde = pago, âmbar = aguardando, vermelho = vencida, cinza = cancelada. */
.com-mes {
  display: inline-block;
  min-width: 78px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mes-c);
  background: var(--panel-2);
  border: 1px solid var(--mes-c);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .com-mes {
    background: color-mix(in srgb, var(--mes-c) 18%, transparent);
    border-color: color-mix(in srgb, var(--mes-c) 45%, transparent);
  }
}
.com-mes--p { --mes-c: var(--fin-good); }
.com-mes--a { --mes-c: var(--fin-warning); }
.com-mes--v { --mes-c: var(--fin-critical); }
/* Estornada: rosa, vizinho do vermelho de "vencida" de propósito — as duas são dinheiro que deu
   errado, e estorno é mais grave que vencer (já entrou e voltou). O matiz não precisa ser
   distinguível de longe: cada caixinha traz a PALAVRA dentro dela, então a cor é reforço, não o canal
   de leitura — é o que permite a grade ter 6 situações sem cair no problema de daltonismo que impede
   uma legenda colorida ao lado. Contraste medido sobre a célula: 4,6:1 escuro / 5,9:1 claro. */
.com-mes--e { --mes-c: var(--fin-rose); }
.com-mes--c { --mes-c: var(--fin-neutral); }
/* Anulada: cobrança refeita de cliente ativo. Não é perda de nada, então perde o preenchimento e fica
   só com o contorno — a diferença é de FORMA, não de matiz, e some do olhar quem só quer ver o que
   deu errado. */
.com-mes--n { --mes-c: var(--text-faint); background: transparent !important; border-style: dashed; }
.com-mes-vazio { color: var(--text-faint); }

/* Caixinha que É um link de cobrança (vencida/aguardando). Vira <a> ou <button>, então precisa perder
   a aparência de controle e ganhar a de caixinha — e sinalizar que é clicável, senão ninguém descobre
   o link. O sinal é a setinha ↗ (ou o número, quando há várias), reforçado por sublinhado no hover. */
a.com-mes,
button.com-mes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  /* O <button> herda a borda do .com-mes; o reset abaixo evita que o agente de usuário sobreponha. */
  border-width: 1px;
  border-style: solid;
}
a.com-mes:hover,
button.com-mes:hover { text-decoration: underline; }
a.com-mes:focus-visible,
button.com-mes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.com-mes-seta-link { font-size: 9px; line-height: 1; opacity: 0.75; }
/* Quantas cobranças em aberto há naquele mês. Só aparece quando é mais de uma. */
.com-mes-n-link {
  min-width: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mes-c);
  color: var(--panel);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

/* Lista de cobranças de um mês (quando a caixinha tem mais de uma). Elemento único no body e
   `position: fixed`, igual ao menu dos 3 pontinhos: dentro da grade seria cortado pela rolagem
   horizontal. */
.com-cob {
  position: fixed;
  z-index: 60;
  display: none;
  min-width: 268px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
.com-cob.is-open { display: block; }
.com-cob-head {
  margin: 2px 6px 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}
.com-cob-tit {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
/* Colunas fixas pra situação, vencimento e valor alinharem entre as linhas. */
.com-cob-item {
  display: grid;
  grid-template-columns: 74px 1fr auto 12px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}
.com-cob-item:hover { background: var(--panel-2); color: var(--text); }
.com-cob-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.com-cob-sit {
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--mes-c);
  color: var(--mes-c);
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
}
.com-cob-venc { font-variant-numeric: tabular-nums; }
.com-cob-valor { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.com-cob-ir { font-size: 10px; opacity: 0.7; }
.com-cob-pe {
  margin: 6px 8px 2px;
  padding-top: 6px;
  border-top: 1px solid var(--panel-border);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Comercial: caixa "Assinaturas canceladas" ---------------------------- */
/* As canceladas saem do meio das vivas e são agrupadas no fim do bloco do cliente. A "caixa" é
   feita com um rótulo em colspan + as linhas esmaecidas logo abaixo: envolver os <tr> num <div>
   quebraria a tabela, e com ela o alinhamento da coluna de mês entre todos os clientes — que é
   justamente a razão de a carteira inteira ser UMA tabela só. */
.com-linha-cancel-head > td { padding: 12px 6px 4px !important; }
/* A caixa abre e fecha: o cabeçalho é um <button> de verdade (não um <div> com onclick) pra vir de
   graça o foco por teclado, o Enter/Espaço e o anúncio do estado por leitor de tela via
   aria-expanded. Fechada por padrão — ver o porquê em comercial.js. */
.com-cancel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 4px;
  margin-left: -4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
}
.com-cancel-toggle:hover { background: var(--panel-2); border-color: var(--panel-border); color: var(--text-muted); }
.com-cancel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A seta aponta pra baixo quando fechada ("abre pra baixo") e gira meia volta quando aberta. */
.com-cancel-seta {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.16s ease;
}
.com-cancel-toggle.is-open .com-cancel-seta { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .com-cancel-seta { transition: none; }
}
.com-cancel-tit {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.com-cancel-n {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}
.com-cancel-toggle:hover .com-cancel-n { background: var(--panel); }
.com-cancel-nota { font-size: 11.5px; color: var(--text-muted); }

/* Selo da cancelada que AINDA está no mês pago: fica entre as vivas, então precisa se distinguir das
   canceladas de fato sem virar um quarto status. Contorno tracejado = "situação de passagem".
   O padding cai 1px pra compensar a borda: `box-sizing` não segura a altura aqui (o selo não tem
   altura declarada), e sem isso esta linha ficaria 2px mais alta que as vizinhas. */
.live-badge.is-vigente { border: 1px dashed var(--live-c); padding: 2px 9px; }

/* Linha cancelada: mesma anatomia da viva, tom rebaixado. Ela ainda precisa ser LIDA (é o histórico
   do cliente), só não pode competir com a carteira viva logo acima.
   ⚠️ O fundo tem que continuar OPACO: a primeira coluna é `position:sticky`, e com `transparent`
   as caixinhas de mês passariam por baixo dela ao rolar. Por isso `var(--bg)` (a cor da página) e
   não `transparent` — o efeito visual é o mesmo, sem o vazamento. */
.com-grade .com-linha-sub.is-cancel > th,
.com-grade .com-linha-sub.is-cancel > td { background: var(--bg); }
/* Risco no valor: diz "esta não entra na soma" sem precisar de mais uma legenda. */
.com-linha-sub.is-cancel .com-sub-valor {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: line-through;
}
.com-linha-sub.is-cancel .com-sub-data,
.com-linha-sub.is-cancel .com-sub-id,
.com-linha-sub.is-cancel .com-sub-ciclo { color: var(--text-faint); }
.com-linha-sub.is-cancel .com-mes { opacity: 0.5; }

.com-subs-total { margin-top: 7px; font-size: 12.5px; color: var(--text-muted); }
.com-subs-total b { color: var(--text); font-size: 14px; }
.com-subs-ativo { margin-left: 4px; }
.com-subs-cancel { margin-left: 4px; color: var(--text-faint); }
.com-subs-vazio { margin: 0; font-size: 12px; color: var(--text-faint); font-style: italic; }

/* --- Comercial: resumo da assinatura na linha da aba Clientes ------------- */
/* A linha da aba Clientes tem 3 colunas (info | assinatura | ação); a da carteira do vendedor
   segue com 2, porque lá as assinaturas vão detalhadas na faixa de baixo. */
.com-cli--lista { grid-template-columns: 1fr auto auto; }

.com-assin-wrap { display: flex; align-items: center; gap: 10px; }
.com-assin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.com-assin b { color: var(--text); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.com-assin > span { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.com-assin.is-empty { color: var(--text-faint); font-size: 11.5px; font-style: italic; }

/* Cor do selo: mesmos tokens do "Ao vivo" (o `.live-badge` lê --live-c do ancestral; aqui a
   própria etiqueta define). */
.com-badge--ok { --live-c: var(--fin-good); }
.com-badge--wait { --live-c: var(--fin-warning); }
.com-badge--off { --live-c: var(--fin-neutral); }

/* Em tela estreita a assinatura desce pra baixo do nome em vez de espremer as 3 colunas. */
@media (max-width: 760px) {
  .com-cli--lista { grid-template-columns: 1fr auto; }
  .com-assin-wrap { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
}

/* =========================================================================
   COMERCIAL — cartões de indicadores da carteira (entre o nome do vendedor e
   a busca). Um cartão para o dinheiro e outro com três mini-gráficos.
   ========================================================================= */
.com-ind {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.6fr);
  gap: 12px;
  margin: 0 2px 16px;
}
@media (max-width: 900px) { .com-ind { grid-template-columns: 1fr; } }
/* Aba do vendedor: faturas (maior, tem os chips e o gráfico de 12 barras) + meta do mês ao lado. */
/* Uma coluna só: o vendedor agora tem UM cartão, e as duas colunas de dentro são feitas por
   `.com-vend-grade`. */
.com-ind--vend { grid-template-columns: 1fr; }
/* Com o fio entre os grupos de chips: quando eles quebram pra duas linhas, o fio some. */
@media (max-width: 560px) { .com-fat-fio { display: none; } }
.com-ind--vazio {
  display: block;
  margin: 0 2px 16px;
  padding: 14px 16px;
  border: 1px dashed var(--panel-border);
  border-radius: 12px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.com-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.com-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.com-card-tit { font-size: 12.5px; font-weight: 600; color: var(--text); }
.com-card-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
/* Número-herói: o valor do mês corrente, que é a leitura principal do cartão. */
.com-card-heroi {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.com-card-pe { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
/* Nota do que ficou de fora da conta (assinaturas canceladas). Um tom abaixo do pé do cartão: é
   ressalva, não indicador — mas precisa estar visível, porque explica um total menor do que a
   pessoa esperava ver. */
.com-card-nota {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-faint);
  margin: -4px 0 8px;
}

/* Corpo do cartão de indicadores: número à esquerda, gráfico à direita, apoiados na MESMA linha de
   base (`align-items: end`). Empilhados um sobre o outro o cartão ficava alto e estreito de conteúdo
   com metade da largura vazia; lado a lado, a largura toda trabalha. Em tela estreita voltam a
   empilhar — lado a lado, o gráfico ficaria menor que a legenda dele. */
/* O GRÁFICO é quem tem a largura mandatória (até 640px) e o bloco de números fica com a sobra — não
   o contrário. Com a coluna dos números em `auto`, ela crescia até o texto mais longo (a nota das
   canceladas) e sobravam 70px pro gráfico, que virava um risco no canto. Assim as 12 barras mantêm
   sempre o mesmo desenho, e o texto é que se acomoda. */
/* Proporção, e não um teto em px: o cartão agora divide a linha com o da meta, e um `640px` fixo
   comprimia a coluna dos números quando a largura sobrava menos. Os dois `minmax(0, …)` são o que
   impede a coluna de crescer até o texto — foi assim que o gráfico já encolheu pra 70px uma vez. */
.com-card-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 10px 24px;
  /* `stretch` + o `margin-top:auto` do gráfico: o número fica no ALTO e o gráfico no RODAPÉ, em vez de
     os dois colados no meio com um vão embaixo. É o que faz este gráfico terminar na mesma linha do
     gráfico do cartão da meta ao lado — sem isso, os dois cartões esticam pra mesma altura mas os
     gráficos param em alturas diferentes e não dá pra comparar um com o outro. */
  align-items: stretch;
  flex: 1;
  min-height: 0;
  margin-top: 2px;
}
.com-card-num { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* O número e o pé já têm margem própria; dentro do bloco a nota não precisa da margem negativa. */
.com-card-num .com-card-nota { margin: 2px 0 0; }
.com-card-num .com-card-pe { margin-bottom: 0; }

/* --- As duas leituras do cartão "Financeiro geral": recebido e vencido ------
   Uma linha cada, rótulo em cima e valor embaixo. Empilhado (e não "rótulo: valor" na mesma linha)
   porque o cartão divide a largura com o gráfico — lado a lado, o valor quebraria no meio do R$. */
.com-num-linha { display: flex; flex-direction: column; gap: 0; margin-top: 8px; cursor: help; }
.com-num-linha:first-child { margin-top: 2px; }
.com-num-rot { font-size: 11px; color: var(--text-muted); }
.com-num-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Vencido é dinheiro que não entrou, mas o NÚMERO fica na tinta normal: `--fin-critical` é token de
   MARCA nesta folha (borda/ponto), não de texto — ver a nota em "Painel financeiro". A situação vem
   do ponto colorido antes do rótulo e do tamanho menor, que já põe o vencido em segundo plano. */
.com-num-val--venc { font-size: 18px; }
.com-num-linha--venc .com-num-rot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--fin-critical);
  vertical-align: baseline;
}

/* Convite ao clique / volta pro ano. Os dois ocupam a mesma posição, então trocam sem a caixa pular. */
.com-num-dica { margin-top: 8px; font-size: 10.5px; color: var(--text-faint); font-style: italic; }
.com-num-voltar {
  margin-top: 8px;
  align-self: flex-start;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-muted);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.com-num-voltar:hover { border-color: var(--panel-border-strong); color: var(--text); }
.com-num-voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) { .com-card-corpo { grid-template-columns: 1fr; } }

/* Três métricas lado a lado, cada uma com o próprio gráfico de UMA série. */
/* Seletor de situação do cartão "Financeiro geral": um gráfico só, a série muda aqui.
   O ponto colorido de cada chip é a LEGENDA — com uma série de cada vez não existe caixa de legenda,
   então é o chip que amarra "verde = pagas". A cor nunca anda sozinha: vem sempre com o rótulo ao
   lado, que é a regra pra cor de status. O número e o rótulo do cartão usam tokens de TEXTO, nunca a
   cor da série — quem carrega a identidade é a marca, não a tipografia. */
/* Dois grupos de chips na MESMA fila: situação (com a cor da série) e unidade (R$ / quantidade),
   separados por um fio. Numa fila só porque a pergunta é uma só — "quanto venceu, em reais?"; em duas
   filas empilhadas o cartão ficaria com mais controle do que gráfico. `flex-wrap` deixa o segundo
   grupo cair pra linha de baixo em tela estreita, e aí o fio some (ver abaixo) pra não virar um
   traço solto no meio do nada. */
.com-fat-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 10px; }
.com-fat-grupo { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.com-fat-fio { width: 1px; align-self: stretch; min-height: 18px; background: var(--panel-border); }
/* Chip de unidade: sem ponto colorido, porque unidade não é uma série — é a régua. Pintá-lo daria a
   entender que "R$" tem cor própria no gráfico, e a cor ali é sempre a da situação escolhida. */
.com-fat-chip--un.is-active {
  --fat-c: var(--accent);
  border-color: var(--fat-c);
}
.com-fat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
}
.com-fat-chip:hover { border-color: var(--panel-border-strong); color: var(--text); }
.com-fat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* O ponto tem 8px: abaixo disso vira sujeira e some pra quem enxerga pouco. */
.com-fat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fat-c); flex: none; }
.com-fat-chip--pagas { --fat-c: var(--fin-good); }
.com-fat-chip--vencidas { --fat-c: var(--fin-critical); }
.com-fat-chip--canceladas { --fat-c: var(--fin-neutral); }
.com-fat-chip--estornadas { --fat-c: var(--fin-rose); }
/* Selecionado: borda e fundo na cor da série, texto em tinta normal (não colorida). */
.com-fat-chip.is-active { border-color: var(--fat-c); color: var(--text); font-weight: 600; }
@supports (background: color-mix(in srgb, red, blue)) {
  .com-fat-chip.is-active { background: color-mix(in srgb, var(--fat-c) 14%, transparent); }
}

/* Marcas: barra fina, ponta arredondada só em cima e ancorada na linha de base, 2px de respiro
   entre elas. A cor é da SÉRIE (uma por gráfico); número e rótulo ficam em token de texto — cor
   nunca é o único portador da informação. */
/* Cada mês é uma COLUNA (barra + rótulo), não uma barra solta: é o que permite pôr o nome do mês
   embaixo alinhado com a barra dele. A linha de base saiu daqui e foi pra `.com-spark-caixa`, senão
   ficaria por baixo dos rótulos em vez de entre a barra e o nome. */
.com-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-top: 8px;
  /* Encosta no rodapé da célula (ver `.com-card-corpo`). */
  margin-top: auto;
  /* A largura NÃO é controlada aqui, e sim pela coluna do grid em `.com-card-corpo` — um mecanismo
     só. Quando havia `max-width` aqui E uma coluna elástica lá, os dois disputavam e o gráfico
     encolhia pra ~70px num canto. */
}
/* A coluna virou <button>: os `border/background/font` zerados são pra ela continuar parecendo parte
   do gráfico, e não um botão de formulário. O que revela que dá pra clicar é o cursor, o realce no
   hover e a dica de mouse. */
.com-spark-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.com-spark-col:hover { background: var(--chip-bg); }
.com-spark-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Mês em foco: fundo marcado e rótulo em tinta cheia. A barra dele NÃO muda de cor — a cor ali é a
   da situação escolhida no chip, e repintar confundiria as duas leituras. */
.com-spark-col.is-sel { background: var(--accent-soft); }
.com-spark-col.is-sel .com-spark-rot { color: var(--accent); font-weight: 700; }
.com-spark-col.is-sel .com-bar { opacity: 1; }
.com-spark-caixa {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--panel-border);
}
.com-spark-rot {
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Mês corrente: o rótulo em tinta cheia. Marca onde termina o que já aconteceu, agora que a régua
   segue pra frente até a última cobrança agendada. */
.com-spark-col.is-hoje .com-spark-rot { color: var(--text); font-weight: 700; }
.com-bar {
  width: 100%;
  min-width: 3px;
  /* Teto de largura: sem ele, poucas barras num cartão largo viram blocos gordos — o guia pede marca
     fina. A folga sobrando fica dentro da própria coluna, que é centralizada. */
  max-width: 18px;
  border-radius: 3px 3px 0 0;
  background: var(--text-faint);
  transition: opacity 0.12s ease;
}
.com-bar:hover { opacity: 0.7; }
/* Mês sem nada: toco no rodapé, em cinza de traço — não some, mas também não compete. */
.com-bar.is-zero { height: 2px !important; background: var(--panel-border-strong); border-radius: 1px; }
.com-spark--pagas .com-bar { background: var(--fin-good); }
.com-spark--venc .com-bar { background: var(--fin-critical); }
.com-spark--canc .com-bar { background: var(--fin-neutral); }
.com-spark--est .com-bar { background: var(--fin-rose); }
/* --- Comercial: cartão da meta na aba do vendedor ------------------------- */
/* `overflow: visible` pelo mesmo motivo do card da aba Clientes: este card também ganhou o seletor de
   mês, e a lista é posicionada em absoluto — sem isso ela seria cortada na borda do card. */
/* Coluna direita do cartão do vendedor (meta + comissão). Era um cartão à parte; hoje divide a
   moldura com o gráfico. `overflow: visible` continua necessário: a lista do seletor de mês é
   posicionada em absoluto e precisa poder passar da borda. */
.com-metavend { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.com-card--vend { overflow: visible; }

/* As duas colunas dentro do cartão único: gráfico à esquerda (mais larga, carrega os chips e 12
   barras) e meta/comissão à direita, separadas por um fio. É o MESMO desenho de antes — o que saiu
   foi a moldura do meio, porque os dois lados falam do mesmo mês e do mesmo seletor. */
/* METADE e METADE: faturas por mês à esquerda, comissões à direita. Era 1,5 para 1 — o gráfico
   ficava com espaço de sobra e as comissões, que são o que se consulta todo dia, espremidas em
   pouco mais de um terço. Dividir no meio dá às duas colunas o mesmo peso. */
.com-vend-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  flex: 1;
  min-height: 0;
}
/* Sem isto, uma coluna com conteúdo largo (a tabela de comissões) estica além da metade e come a
   outra: em grid, a largura mínima de um item é a do conteúdo, não zero. */
.com-vend-grade > * { min-width: 0; }
.com-vend-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.com-vend-col--meta { padding-left: 22px; border-left: 1px solid var(--panel-border); }
@media (max-width: 1000px) {
  .com-vend-grade { grid-template-columns: 1fr; gap: 14px; }
  /* Empilhado, o fio vertical vira horizontal — senão a separação some justamente onde ela passa a
     ser mais necessária (um bloco embaixo do outro). */
  .com-vend-col--meta { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--panel-border); }
}

/* Progresso da meta. A barra é a mesma cor do gráfico de venda nova logo abaixo, porque mede a MESMA
   coisa — usar duas cores pro mesmo número faria parecer que são medidas diferentes. */
.com-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.com-prog-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.com-prog-val { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-prog-pct { font-size: 12.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.com-prog-trilho {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}
.com-prog-barra {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  /* Piso de 3px: com 0,4% da meta a barra some e parece que nada foi vendido. */
  min-width: 3px;
  transition: width 0.25s ease;
}
/* Meta batida: verde de "bom" — aqui a cor de status É apropriada, porque o número passou a significar
   atingiu/não atingiu, que é exatamente o que status codifica. */
.com-prog.bateu .com-prog-barra { background: var(--fin-good); }
.com-prog.bateu .com-prog-pct { color: var(--fin-good); }
.com-prog-pe { font-size: 11px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .com-prog-barra { transition: none; } }

/* Comissão do vendedor, no rodapé do cartão da meta (era o espaço "em construção").
   `margin-top: auto` ancora no RODAPÉ: o cartão estica pra acompanhar a altura do vizinho, e sem
   isso a faixa ficaria grudada no progresso com um vazio embaixo. */
.com-comis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}
.com-comis-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.com-comis-rot { font-size: 11px; color: var(--text-muted); }
/* O percentual da faixa atual: pílula discreta quando é 0% (não há o que comemorar) e em destaque
   quando existe comissão. */
.com-comis-pct {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--chip-bg);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.com-comis.tem-comis .com-comis-pct { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.com-comis-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.com-comis.tem-comis .com-comis-val { color: var(--text); }
.com-comis-pe { font-size: 11px; color: var(--text-muted); line-height: 1.35; }

/* Régua das 4 faixas: a regra inteira à vista, com a atual marcada. Quatro colunas iguais pra os
   degraus lerem como uma escada, e não como uma lista. */
.com-comis-faixas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.com-comis-faixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  line-height: 1.1;
  text-align: center;
}
.com-comis-faixa b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.com-comis-faixa span { font-size: 8.5px; white-space: nowrap; }
.com-comis-faixa.is-atual {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.com-spark .com-bar.is-zero { background: var(--panel-border-strong); }

.com-tip {
  position: fixed;
  z-index: 70;
  display: none;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.com-tip.is-open { display: block; }

/* --- Comercial: rosca "Clientes por vendedor" (aba Clientes) -------------- */
.com-ind--rosca { grid-template-columns: 1fr; }
/* Topo da aba Clientes: rosca + meta do mês, lado a lado. A meta leva a coluna maior — ela carrega o
   campo, o total e o gráfico dos vendedores, enquanto a rosca é uma figura de tamanho fixo. */
.com-ind--clientes { grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.35fr); }
@media (max-width: 900px) { .com-ind--clientes { grid-template-columns: 1fr; } }

/* --- Comercial: card da meta do mês --------------------------------------- */
/* `overflow: visible` explícito: a lista de meses é posicionada em absoluto e precisa poder passar da
   borda arredondada do card. */
.com-card--meta { gap: 6px; overflow: visible; }

/* Canto do card: seletor de mês + contagem de vendedores, nesta ordem. O seletor ficou no lugar que
   era só da contagem, e ela passou pro lado. */
.com-card-canto { display: inline-flex; align-items: baseline; gap: 10px; flex: none; }

.com-mes-sel { position: relative; display: inline-flex; }
.com-mes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.com-mes-btn:hover { border-color: var(--panel-border-strong); color: var(--text); }
.com-mes-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.com-mes-btn.is-open { border-color: var(--accent); color: var(--text); }
.com-mes-seta { font-size: 9px; line-height: 1; transition: transform 0.16s ease; }
.com-mes-btn.is-open .com-mes-seta { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .com-mes-seta { transition: none; } }

/* Lista de meses. Ancorada no botão (não `fixed`): fica dentro do card, então acompanha a rolagem
   sozinha e não precisa ser fechada quando a página rola. */
.com-mes-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 218px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
/* 4 colunas fixas (nome | "hoje" | meta | ✓) pra os valores alinharem entre as linhas mesmo quando só
   uma delas tem o selo "hoje" ou o ✓ — a coluna do ✓ existe vazia nas outras. */
.com-mes-item {
  display: grid;
  grid-template-columns: 1fr auto auto 12px;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.com-mes-item:hover { background: var(--panel-2); color: var(--text); }
.com-mes-item.is-current { color: var(--text); font-weight: 600; }
/* Mês que ainda não começou: aceita meta (planejamento), mas não tem desempenho. Um tom abaixo pra
   não parecer histórico. */
.com-mes-item.is-futuro .com-mes-item-nome { color: var(--text-faint); }
.com-mes-item.is-futuro:hover .com-mes-item-nome { color: var(--text-muted); }
.com-mes-item-nome { white-space: nowrap; }
/* Selo do mês corrente. Separado do ✓ de propósito: ✓ é "o card está mostrando este"; "hoje" é "este
   é o mês de verdade". Com uma marca só, dava pra escolher agosto e achar que já é agosto. */
.com-mes-hoje {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* A meta de cada mês aparece na própria lista: é o que deixa comparar os meses sem ter que abrir um
   por um. "sem meta" é dito com palavra, não com um R$ 0,00 que pareceria meta zerada de propósito. */
.com-mes-item-meta { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.com-mes-check { color: var(--accent); font-size: 11px; }

/* Campo de dinheiro + o rótulo "por vendedor" na mesma linha: sem ele o número solto poderia ser lido
   como a meta total, que é justamente a outra quantia do card. */
.com-meta-campo { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.com-meta-input {
  width: 9.5em;
  padding: 7px 10px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.com-meta-input::placeholder { color: var(--text-faint); font-weight: 400; }
.com-meta-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Quem não pode editar (vendedor) vê o mesmo número sem cara de campo — nada de campo desabilitado,
   que parece defeito. */
.com-meta-fixo { font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-meta-campo-rot { font-size: 11.5px; color: var(--text-muted); }

.com-meta-total { font-size: 12.5px; color: var(--text-muted); }
.com-meta-total b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.com-meta-vazia { font-size: 11.5px; color: var(--text-faint); font-style: italic; }

/* Gráfico de vendas por vendedor. Barras verticais, todas na MESMA cor (a identidade vem do nome
   embaixo de cada uma — ver o porquê em comercial.js). */
/* O gráfico CRESCE pra ocupar a altura sobrando, em vez de ser empurrado pro rodapé com
   `margin-top:auto`. Os dois cards do topo esticam pra mesma altura (a da rosca, que é alta por causa
   da legenda), e com a barra de altura fixa sobrava um vão vazio no meio deste card. Ocupando o
   espaço, as barras ficam mais altas — e barra mais alta é mais fácil de comparar. */
.com-meta-graf { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; padding-top: 10px; }
.com-meta-graf-tit { font-size: 10.5px; color: var(--text-faint); }
.com-meta-cols { display: flex; align-items: flex-end; gap: 8px; flex: 1; min-height: 0; }
.com-meta-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.com-meta-num { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A caixa é a área do gráfico: altura fixa, barra crescendo do rodapé. A linha da meta é desenhada
   DENTRO de cada caixa (um `::before` na altura da meta) e não como um elemento único atravessando o
   gráfico — atravessar exigiria posicionamento absoluto sobre as colunas, e aí a linha sairia de
   lugar sempre que o número em cima de uma barra quebrasse de tamanho. Repetida por coluna, ela é
   lida como uma linha só, com um respiro nos vãos. */
.com-meta-caixa {
  position: relative;
  width: 100%;
  /* Elástica, com piso: cresce com o card, mas nunca fica tão baixa que a diferença entre duas
     barras deixe de ser visível. */
  flex: 1;
  min-height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.com-meta-graf.tem-meta .com-meta-caixa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--meta-pct);
  border-top: 1px dashed var(--text-faint);
}
.com-meta-bar {
  width: 100%;
  max-width: 30px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  transition: opacity 0.12s ease;
}
.com-meta-col:hover .com-meta-bar { opacity: 0.72; }
/* Vendedor sem venda no mês: toco no rodapé. Não some (o nome dele precisa continuar na fila), mas
   também não finge altura. */
.com-meta-bar.is-zero { height: 2px !important; background: var(--panel-border-strong); border-radius: 1px; }
.com-meta-nome {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) { .com-meta-bar { transition: none; } }

/* --- Vendedor FORA da conta da meta -------------------------------------
   Fica no fim do gráfico, depois de um traço vertical: não é o último colocado do ranking, é outra
   categoria. A barra perde a cor de dado e vira cinza de traço — a mesma distinção que o resto do
   app usa entre "número que conta" e "número de contexto". A informação não depende só da cor: tem
   o traço separando, o rótulo "fora da meta" embaixo e a explicação na dica de mouse. */
.com-meta-col--corte {
  border-left: 1px dashed var(--panel-border-strong);
  padding-left: 8px;
  margin-left: 2px;
}
.com-meta-col--fora .com-meta-bar { background: var(--text-faint); opacity: 0.75; }
.com-meta-col--fora .com-meta-num,
.com-meta-col--fora .com-meta-nome { color: var(--text-faint); }
/* A caixa dele não leva a linha tracejada da meta — ele não é medido por ela. */
.com-meta-col--fora .com-meta-caixa::before { display: none; }
.com-meta-fora-rot {
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
}

/* A conta da meta total, em letra miúda embaixo do valor: "R$ 20.000,00 × 4 · Flávio fora da meta". */
.com-meta-conta { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.com-card--rosca { gap: 6px; }
.com-rosca-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.com-rosca { position: relative; width: 132px; height: 132px; flex: none; }
.com-rosca svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.com-fatia-trilho { fill: none; stroke: var(--panel-border); stroke-width: 13; }
.com-fatia { fill: none; stroke-width: 13; }
/* Número geral no meio da rosca — é a leitura principal do cartão. */
.com-rosca-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.com-rosca-centro b { font-size: 21px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-rosca-centro span { font-size: 10.5px; color: var(--text-muted); }

/* A legenda É a tabela: nome, quantidade e percentual. A cor localiza a fatia, mas quem informa
   é o número — 5 vendedores não cabem em 5 matizes distinguíveis (medido no validador). */
/* Teto de largura: esticada no cartão inteiro, o nome fica num canto e o número no outro, e o
   olho perde a ligação entre os dois. */
.com-leg { list-style: none; margin: 0; padding: 0; flex: 1 1 300px; min-width: 240px; max-width: 460px; }
.com-leg-item {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--panel-border);
}
.com-leg-item:last-child { border-bottom: 0; }
.com-leg-cor { width: 10px; height: 10px; border-radius: 3px; background: var(--text-faint); }
.com-leg-nome { color: var(--text-muted); overflow-wrap: anywhere; }
.com-leg-n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.com-leg-pct { color: var(--text-faint); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

/* Rodapé "Sem vendedor": saiu da rosca e virou uma linha clicável, fechada por padrão. Repete a mesma
   grade da legenda pra a linha nascer alinhada com as de cima, mesmo estando fora da <ul>. É um
   <button> de verdade — foco por teclado, Enter/Espaço e o estado anunciado via aria-expanded. */
.com-leg-sem {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 7px 8px;
  border: 1px dashed var(--panel-border-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.com-leg-sem:hover { border-color: var(--text-faint); color: var(--text-muted); }
.com-leg-sem:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.com-leg-sem.is-open { border-style: solid; border-color: var(--panel-border); }
/* O "ver" ocupa as duas últimas colunas quando fechado, pra a linha não ficar com buracos. */
.com-leg-ver {
  grid-column: 3 / span 2;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

/* Cor FIXA por vendedor (posição no quadro), nunca por tamanho da fatia. */
:root[data-theme="dark"] {
  --com-v0: #60a5fa; --com-v1: #fb923c; --com-v2: #2dd4bf; --com-v3: #e879f9; --com-v4: #fbbf24;
}
:root[data-theme="light"] {
  --com-v0: #2563eb; --com-v1: #ea580c; --com-v2: #0d9488; --com-v3: #c026d3; --com-v4: #ca8a04;
}
.com-fatia--0 { stroke: var(--com-v0); } .com-leg-cor.com-fatia--0 { background: var(--com-v0); }
.com-fatia--1 { stroke: var(--com-v1); } .com-leg-cor.com-fatia--1 { background: var(--com-v1); }
.com-fatia--2 { stroke: var(--com-v2); } .com-leg-cor.com-fatia--2 { background: var(--com-v2); }
.com-fatia--3 { stroke: var(--com-v3); } .com-leg-cor.com-fatia--3 { background: var(--com-v3); }
.com-fatia--4 { stroke: var(--com-v4); } .com-leg-cor.com-fatia--4 { background: var(--com-v4); }
.com-fatia--sem { stroke: var(--fin-neutral); } .com-leg-cor.com-fatia--sem { background: var(--fin-neutral); }

/* Dica no estado vazio da aba Clientes: explica que a lista completa não fica aberta ali. */
.com-busca-dica { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--text-faint); }

/* ---------- Aviso de "dados salvos" ----------
   Quando o banco do Wavoip recusa a consulta (teto de conexões da conta), o servidor entrega a
   última leitura boa em vez de deixar a tela vazia. Estes dois avisos existem pra ninguém confundir
   dado guardado com dado de agora: âmbar (atenção), não vermelho — nada está quebrado, só atrasado. */
.panel-count.is-stale {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn);
  font-weight: 600;
}

.live-stale {
  margin: 10px 2px 0;
  padding: 9px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

/* ===== Comercial · aba Setup (conferência da taxa de implantação) ===== */
/* O setup não existe no banco do Wavoip: esta tela é onde a dedução automática vira número
   confirmado. Por isso ela é mais "formulário" que "relatório" — o campo editável é o protagonista
   e cada linha diz de onde o palpite veio. */
.com-setup-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.com-setup-tit { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.com-setup-sub { margin: 0; max-width: 70ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.com-setup-sub b { color: var(--text); }
.com-setup-soma {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.com-setup-soma span { font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
.com-setup-meses { margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap; }

.com-setup-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.com-setup-tab th,
.com-setup-tab td {
  padding: 8px 10px;
  text-align: left;
  font-weight: 400;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: middle;
}
.com-setup-tab thead th {
  color: var(--text-faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.com-setup-tab tbody tr { animation: none; }
/* Linha já conferida recua um tom: o olho vai direto pro que ainda falta. */
.com-setup-tab tbody tr.is-ok .com-setup-cli b { color: var(--text-muted); }
.com-setup-n { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-setup-cli b { display: block; color: var(--text); font-weight: 600; }
.com-setup-cli span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--text-faint); }
.com-setup-sem { color: var(--text-faint); font-style: italic; }

/* Selo de confiança da dedução. Três níveis, e a cor NUNCA anda sozinha: o rótulo diz em palavras
   ("boa", "razoável", "sem base") e a dica de mouse explica o critério. */
.com-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: help;
  vertical-align: middle;
}
.com-selo--ok { border-color: var(--fin-good); color: var(--fin-good); }
.com-selo--med { border-color: var(--warn); color: var(--warn); }
.com-selo--low { color: var(--text-faint); }

.com-setup-edit { display: flex; align-items: center; gap: 8px; }
.com-setup-input {
  width: 110px;
  padding: 5px 9px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.com-setup-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.com-setup-input:disabled { opacity: 0.5; }
.com-setup-estado { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.com-setup-estado.is-ok { color: var(--fin-good); }

/* ===== Financeiro · aba Relatórios ===== */
/* Uma ficha por alvo: nome em cima, os meses embaixo — o desenho que o Leonardo pediu. Cliente
   pós-pago e revenda usam a MESMA ficha; muda só o subtítulo e a regra de cobrança. */
.rel-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 18px 2px 12px; }
.rel-tit { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.rel-sub { margin: 0; max-width: 66ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* Tarja de "isto ainda é desenho". Some quando a geração real entrar. */
.rel-tarja {
  margin: 0 2px 18px;
  padding: 9px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}

.rel-grupo {
  margin: 22px 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.rel-card {
  margin: 0 2px 10px;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.rel-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rel-card-nome { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.rel-card-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.rel-card-canto { display: flex; align-items: center; gap: 10px; flex: none; }
/* A janela é o dado que distingue um alvo do outro — ganha peso de etiqueta, não de legenda. */
.rel-janela {
  padding: 3px 9px;
  border: 1px solid var(--panel-border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rel-regra { margin: 10px 0 0; font-size: 12.5px; color: var(--text); }
.rel-regra--falta { color: var(--text-faint); font-style: italic; }
/* Ponto que precisa de decisão humana (CNPJ em duas contas, conta sem dispositivo). Âmbar: é
   atenção, não erro. */
.rel-aviso {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Os meses, em fila. O mais recente primeiro — é o que se consulta. */
.rel-meses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rel-mes {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 132px;
  padding: 9px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rel-mes:hover { border-color: var(--accent); }
.rel-mes:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Período ainda correndo: tracejado, porque o número vai mudar até fechar a janela. */
.rel-mes.is-aberto { border-style: dashed; }
.rel-mes-rot { font-size: 10.5px; color: var(--text-faint); }
.rel-mes-val { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rel-mes-qtd { font-size: 10.5px; color: var(--text-muted); }
.rel-sem-mes { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); font-style: italic; }

/* Soma dos períodos em aberto, no topo da aba. */
.rel-soma {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 20px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rel-soma span { font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
/* O motivo pelo qual o alvo está no painel — texto do Leonardo, não do sistema. */
.rel-motivo { margin: 6px 0 0; font-size: 11.5px; color: var(--text-faint); font-style: italic; }
/* Período que ainda não foi gerado: o bloco vira o botão de gerar. */
.rel-mes--vazio { border-style: dashed; color: var(--text-faint); }
.rel-mes--vazio .rel-mes-val { font-size: 13px; color: var(--accent); }
.rel-mes--vazio:disabled { opacity: 0.6; cursor: progress; }
.rel-mes.is-sel { border-color: var(--accent); background: var(--accent-soft); }

/* Detalhe do período: a lista de dispositivos que formou o número. */
.rel-detalhe { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.rel-det-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; font-size: 12px; color: var(--text-muted);
}
.rel-det-quando { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.rel-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.rel-tab th, .rel-tab td {
  padding: 6px 8px; text-align: left; font-weight: 400; font-size: 12px;
  text-transform: none; letter-spacing: normal; background: transparent;
  border-bottom: 1px solid var(--panel-border); white-space: nowrap;
}
.rel-tab thead th {
  color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.rel-tab tbody tr { animation: none; }
/* Dispositivo que entrou na conta: tinta cheia. Os outros ficam de contexto. */
.rel-tab tbody tr { color: var(--text-faint); }
.rel-tab tbody tr.is-cobrado { color: var(--text); }
.rel-tab tbody tr.is-cobrado td:last-child { color: var(--accent); font-weight: 700; }
.rel-n { text-align: right !important; font-variant-numeric: tabular-nums; }

/* Baixar em Excel, colado no nome do cliente. Desabilitado enquanto nenhum período estiver
   escolhido embaixo — é o período selecionado que ele baixa. */
.rel-baixar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-faint);
  vertical-align: middle;
  cursor: not-allowed;
}
.rel-baixar.is-on { color: var(--accent); border-color: var(--accent); cursor: pointer; }
.rel-baixar.is-on:hover { background: var(--accent-soft); }
.rel-baixar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Os dois totais do topo: o que entra dos clientes e o que sai de comissão pras revendas. Separados
   de propósito — somar os dois daria um número sem significado. */
.rel-somas { display: flex; align-items: flex-start; gap: 26px; }
.rel-soma--saida { color: var(--text-muted); }
.rel-soma--saida span { color: var(--text-faint); }
/* Nota do que foi escondido por ter dado zero — some quando não há nenhum. */
.rel-escondidos { margin: 8px 0 0; font-size: 10.5px; color: var(--text-faint); font-style: italic; }

/* Barra de pesquisa da aba Setup. Cresce pra ocupar o vão entre os chips e a lista de meses — a
   busca é o que mais se usa numa lista de 563 linhas. */
.com-setup-busca { flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.com-setup-conta {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Botão OK da aba Setup: confirma a dedução em um clique. Só aparece enquanto a linha está "a
   conferir" — depois de confirmada, o lugar dele é o selo de conferido. */
.com-setup-ok {
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}
.com-setup-ok:hover { background: var(--accent); color: var(--panel); }
.com-setup-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A conta da comissão aberta em duas parcelas: a faixa sobre o produto e os 20% do setup. */
.com-comis-conta { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.com-comis-conta span { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.com-comis-conta b { color: var(--text); font-weight: 700; }
.com-comis-conta i { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.com-comis-semsetup { font-style: italic; color: var(--text-faint) !important; }

/* Vendas fora do sistema — bloco no rodapé da aba Setup. Separado por uma linha e um respiro maior
   de propósito: é lançamento manual, não pode se confundir visualmente com o que veio do banco. */
.com-avulsas {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--panel-border);
}
.com-avulsa-vazio { padding: 14px 10px; text-align: center; color: var(--text-faint); font-size: 12px; }
.com-avulsa-acao { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.com-avulsa-x {
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}
.com-avulsa-x:hover:not(:disabled) { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }
.com-avulsa-x:disabled { opacity: .5; cursor: default; }

.com-avulsa-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 0;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.com-avulsa-form input,
.com-avulsa-form select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.com-avulsa-form .com-avulsa-cli { flex: 2 1 220px; }
.com-avulsa-form .com-avulsa-obs { flex: 3 1 260px; }
.com-avulsa-form .com-avulsa-val { flex: 0 0 120px; text-align: right; font-variant-numeric: tabular-nums; }
.com-avulsa-form button {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #2f6fed);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.com-avulsa-form button:disabled { opacity: .6; cursor: default; }

/* Dica de "clique num mês" no cabeçalho do gráfico do vendedor. Fica embaixo do período, em corpo
   menor: o mês do cartão passou a ser escolhido só pelo gráfico, e sem dizer isso em algum lugar a
   pessoa procura um seletor que não existe mais. */
.com-card-dica {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-faint);
}
.com-avulsa-parte { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
.com-avulsa-form .com-avulsa-set { flex: 0 0 150px; text-align: right; font-variant-numeric: tabular-nums; }

/* ═══ App IMPLANTAÇÃO ═══════════════════════════════════════════════════════════════════════════
   Série única no --accent. A tentação era pintar as etapas de bloqueio de vermelho/âmbar dentro do
   mesmo gráfico; o validador de paleta reprovou (faixa de luminosidade no escuro, e o âmbar em
   2,94:1 no claro). Cor de status entra só como BOLINHA ao lado de um rótulo escrito. */

.impl-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.impl-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.impl-tile-rot { font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; }
.impl-tile-val { font-size: 30px; font-weight: 600; color: var(--text); line-height: 1.1; }
.impl-tile-val small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.impl-tile-sub { font-size: 12px; color: var(--text-faint); }

/* Bolinha de status. Sempre acompanhada de palavra — nunca sozinha. */
.impl-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: baseline;
}
.impl-dot--nossa { background: var(--fin-critical); }
.impl-dot--cliente { background: var(--fin-warning); }

.impl-aviso {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--fin-warning);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.impl-aviso--ok { border-left-color: var(--accent); }
.impl-aviso strong { color: var(--text); }

.impl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.impl-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.impl-card--wide { grid-column: 1 / -1; }
.impl-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.impl-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.impl-card-head span { font-size: 12px; color: var(--text-faint); }

/* ── barras horizontais ── */
.impl-hbars { display: flex; flex-direction: column; gap: 7px; }
.impl-hbar {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr 48px;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 2px 4px;
}
.impl-hbar[role="button"] { cursor: pointer; }
.impl-hbar[role="button"]:hover, .impl-hbar[role="button"]:focus-visible { background: var(--panel-2); outline: none; }
.impl-hbar.is-ativo { background: var(--accent-soft); }
.impl-hbar-rot { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; min-width: 0; }
.impl-hbar-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impl-marca { font-size: 11px; color: var(--text-faint); margin-right: 6px; }
.impl-hbar-trilho { background: var(--panel-2); border-radius: 4px; height: 14px; overflow: hidden; }
/* Ponta arredondada só do lado do dado; a base fica ancorada no zero. */
.impl-hbar-fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; transition: width 0.3s ease; }
/* Número em token de TEXTO, nunca na cor da série. */
.impl-hbar-val { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ── histograma ── */
.impl-hist { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.impl-hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.impl-hist-num { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.impl-hist-trilho { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.impl-hist-fill { width: 100%; max-width: 46px; margin: 0 auto; background: var(--accent); border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.impl-hist-rot { font-size: 11px; color: var(--text-faint); text-align: center; }

.impl-nota { font-size: 12px; color: var(--text-faint); margin: 12px 0 0; line-height: 1.5; }
.impl-vazio { font-size: 13px; color: var(--text-faint); padding: 12px 0; text-align: center; }

/* ── lista ── */
.impl-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.impl-busca {
  flex: 1; min-width: 240px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
}
.impl-busca:focus { outline: none; border-color: var(--accent); }
.impl-tabela-wrap { overflow-x: auto; }

/* ⚠️ Três regras GLOBAIS do projeto vazam pra qualquer tabela nova e já quebraram a grade do
   Comercial: th em CAIXA-ALTA com faixa cinza, animação de fade nas linhas (que com atualização
   automática piscaria sozinha) e width:100% forçado. Resetadas aqui dentro. */
.impl-tabela { width: 100%; border-collapse: collapse; }
.impl-tabela th {
  text-transform: none;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--panel-border);
}
.impl-tabela tbody tr { animation: none; border-bottom: 1px solid var(--panel-border); }
.impl-tabela tbody tr:last-child { border-bottom: 0; }
.impl-tabela td { padding: 9px 10px; font-size: 13px; color: var(--text-muted); vertical-align: top; }
.impl-tabela .impl-num { text-align: right; font-variant-numeric: tabular-nums; }
.impl-cli { color: var(--text); font-weight: 500; }
.impl-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.impl-tag {
  font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--panel-border); border-radius: 4px;
  padding: 1px 5px; margin-left: 4px; font-weight: 400;
}
.impl-atraso { color: var(--fin-critical); font-weight: 600; }

/* ── tooltip ── */
.impl-tip {
  position: fixed;
  z-index: 80;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border-strong);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--text);
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  max-width: 280px;
}

@media (max-width: 700px) {
  .impl-hbar { grid-template-columns: 1fr 40px; }
  .impl-hbar-trilho { grid-column: 1 / -1; }
}

/* ── Implantação: filtros, funil, small multiples e relatório ── */

/* A barra de abas do projeto tem display:flex, que VENCE o atributo hidden (a folha padrão do
   navegador só aplica display:none). Já mordeu no Comercial — por isso o reset explícito existe. */
.impl-filtros {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
  font-size: 13px;
}
.impl-filtros--vazio { color: var(--text-faint); font-size: 12px; }
.impl-filtros-rot { color: var(--text-muted); font-size: 12px; }
.impl-chip {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.impl-chip:hover { background: var(--accent); color: var(--bg); }
.impl-chip--limpar { background: transparent; border-color: var(--panel-border); color: var(--text-muted); }
.impl-chip--limpar:hover { background: var(--panel-2); color: var(--text); }

/* ── funil ── */
.impl-funil { display: flex; flex-direction: column; gap: 6px; }
.impl-funil-linha { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; align-items: center; gap: 12px; }
.impl-funil-rot { font-size: 13px; color: var(--text-muted); }
.impl-funil-barra { position: relative; background: var(--panel-2); border-radius: 6px; height: 30px; display: flex; align-items: center; }
.impl-funil-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.35s ease; }
.impl-funil-num {
  position: absolute; left: 10px; font-size: 13px; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* A faixa final é resultado, não etapa em curso — recuada pra não se ler como "a próxima fase". */
.impl-funil-linha.is-fim { opacity: 0.72; margin-top: 4px; }
.impl-funil-linha.is-fim .impl-funil-fill { background: var(--text-faint); }

/* ── small multiples ── */
.impl-multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.impl-multiple h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
.impl-coletando {
  background: var(--panel-2); border: 1px dashed var(--panel-border-strong);
  border-radius: 8px; padding: 14px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
.impl-coletando strong { color: var(--text); }

.impl-hist-col.is-ativo .impl-hist-fill { outline: 2px solid var(--text); outline-offset: 1px; }
.impl-hist-col[role="button"] { cursor: pointer; }
.impl-hist-col[role="button"]:hover .impl-hist-fill { filter: brightness(1.15); }

/* ── relatório ── */
.impl-rel-topo { margin-bottom: 14px; }
.impl-select {
  background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 7px 11px; color: var(--text); font-size: 13px; font-family: inherit;
}
.impl-rel {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 26px 30px; max-width: 900px;
}
.impl-rel-titulo { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: var(--text); }
.impl-rel-p { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
.impl-rel-p strong { color: var(--text); font-weight: 600; }
.impl-rel-bloco {
  border-top: 1px solid var(--panel-border); padding-top: 16px; margin-top: 20px;
}
.impl-rel-bloco h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.impl-rel-bloco--alerta { border-left: 3px solid var(--fin-critical); padding-left: 16px; border-top-color: transparent; }
.impl-rel-sub { font-size: 12px; color: var(--text-faint); margin: 0 0 10px; }
.impl-rel-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.impl-rel-lista li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--panel-border); font-size: 13px; color: var(--text);
}
.impl-rel-lista li:last-child { border-bottom: 0; }
.impl-rel-meta { color: var(--text-faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.impl-rel-rodape {
  margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--panel-border);
  font-size: 12px; color: var(--text-faint); line-height: 1.6;
}

@media (max-width: 760px) {
  .impl-funil-linha { grid-template-columns: 1fr; gap: 4px; }
  .impl-rel { padding: 20px 18px; }
}

/* ═══ Implantação v2 — casca com barra lateral ══════════════════════════════════════════════════
   Só este app usa este desenho; Financeiro, Comercial e Monitor seguem com a .topbar do projeto.

   CORES DE SÉRIE: slots próprios de gráfico (azul/laranja), NÃO o --accent teal da interface.
   Medido, não estético: no tema escuro a faixa de luminosidade aceita pra categóricas é L 0,48–0,67
   e o teal do projeto está em 0,78 — reprova como cor de série. O par abaixo passa nos dois temas
   (ΔE 24,7–26,8 em daltonismo, 31,8–33,6 em visão normal). O teal segue como accent da UI e como
   cor de SÉRIE ÚNICA nos gráficos de uma medida só, onde não há par pra distinguir. */
:root,
:root[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; }
:root[data-theme="light"] { --serie-1: #2a78d6; --serie-2: #eb6834; }

.impl-body { margin: 0; background: var(--bg); }
.impl-shell { display: flex; min-height: 100vh; }

.impl-side {
  width: 68px; flex: 0 0 68px;
  background: var(--panel); border-right: 1px solid var(--panel-border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 0; position: sticky; top: 0; height: 100vh;
}
.impl-side-logo {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
}
.impl-side-logo svg { width: 21px; height: 21px; }
.impl-side-nav { display: flex; flex-direction: column; gap: 6px; }
.impl-side-btn {
  width: 42px; height: 42px; border-radius: 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--text-faint);
  display: grid; place-items: center; text-decoration: none;
}
.impl-side-btn svg { width: 20px; height: 20px; }
.impl-side-btn:hover { background: var(--panel-2); color: var(--text); }
.impl-side-btn.is-on { background: var(--accent-soft); color: var(--accent); }
.impl-side-btn--pe { margin-top: auto; }

.impl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.impl-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--panel-border);
  background: var(--panel); position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.impl-crumb { font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.impl-crumb strong { color: var(--text); font-weight: 600; }
.impl-crumb-sep { opacity: 0.6; }
.impl-top-right { display: flex; align-items: center; gap: 8px; }
.impl-search { position: relative; display: flex; align-items: center; }
.impl-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.impl-search input {
  width: 280px; background: var(--panel-2); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 8px 14px 8px 34px; color: var(--text); font-size: 13px; font-family: inherit;
}
.impl-search input:focus { outline: none; border-color: var(--accent); }
.impl-top-meta { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.impl-icone {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--panel-border);
  background: var(--panel-2); color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
}
.impl-icone svg { width: 17px; height: 17px; }
.impl-icone:hover { color: var(--text); border-color: var(--panel-border-strong); }

#impl-body { padding: 20px 24px 40px; }

/* ── KPIs com minigráfico ── */
.impl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.impl-kpi {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.impl-kpi-rot { font-size: 12px; color: var(--text-muted); }
.impl-kpi-val { font-size: 32px; font-weight: 600; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.impl-kpi-val small { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.impl-kpi-sub { font-size: 11px; color: var(--text-faint); }
.impl-spark { width: 100%; height: 34px; margin-top: 8px; display: block; }
/* A cor do minigráfico segue a MEDIDA, não a posição do card: "Entraram" e "Fecharam" também
   aparecem no gráfico de linha abaixo, então usam os mesmos slots de série lá (azul e laranja).
   Trocar de cor entre os dois gráficos faria a mesma medida parecer duas coisas diferentes.
   As medidas que só existem no KPI (saldo e ciclo) ficam no accent, como qualquer série única. */
.impl-spark--acc polyline { stroke: var(--accent); }
.impl-spark--acc circle { fill: var(--accent); }
.impl-spark--s1 polyline { stroke: var(--serie-1); }
.impl-spark--s1 circle { fill: var(--serie-1); }
.impl-spark--s2 polyline { stroke: var(--serie-2); }
.impl-spark--s2 circle { fill: var(--serie-2); }

/* ── layout principal + trilho ── */
.impl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.impl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.impl-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 78px; }
.impl-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.impl-card--rail { padding: 16px; }
.impl-card--alto { min-height: 320px; }
.impl-rodape { font-size: 11px; color: var(--text-faint); margin: 20px 0 0; line-height: 1.6; }

/* ── gráfico de linha (2 séries) ── */
.impl-legenda { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.impl-leg { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.impl-leg-dot { width: 9px; height: 9px; border-radius: 50%; }
.impl-leg-dot--s1 { background: var(--serie-1); }
.impl-leg-dot--s2 { background: var(--serie-2); }
.impl-linha { width: 100%; height: auto; display: block; overflow: visible; }
.impl-serie { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.impl-serie--s1 { stroke: var(--serie-1); }
.impl-serie--s2 { stroke: var(--serie-2); }
/* Anel da superfície nas marcas que se cruzam — sem ele os pontos das duas séries se fundem. */
.impl-pt { stroke: var(--panel); stroke-width: 2; }
.impl-pt--s1 { fill: var(--serie-1); }
.impl-pt--s2 { fill: var(--serie-2); }
.impl-grid { stroke: var(--panel-border); stroke-width: 1; }
.impl-eixo { fill: var(--text-faint); font-size: 11px; font-family: inherit; }
.impl-alvo { fill: transparent; }
.impl-alvo:hover { fill: var(--panel-2); opacity: 0.55; }

/* ── barras agrupadas ── */
.impl-agrup { display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.impl-agrup-col { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
/* 2px de vão entre as duas marcas do grupo — separador de superfície pedido pelo guia. */
.impl-agrup-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.impl-agrup-b { width: 14px; border-radius: 3px 3px 0 0; min-height: 0; }
.impl-agrup-b--s1 { background: var(--serie-1); }
.impl-agrup-b--s2 { background: var(--serie-2); }
.impl-agrup-rot {
  font-size: 11px; color: var(--text-faint); text-align: center; padding-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── rosca (um valor, é medidor e não gráfico categórico) ── */
.impl-rosca { display: flex; flex-direction: column; align-items: center; }
.impl-rosca svg { width: 100%; max-width: 165px; height: auto; }
.impl-rosca-trilho { stroke: var(--panel-2); }
.impl-rosca-fill { stroke: var(--accent); transition: stroke-dasharray 0.5s ease; }
.impl-rosca-num { fill: var(--text); font-size: 27px; font-weight: 600; font-family: inherit; }
.impl-rosca-cap { fill: var(--text-faint); font-size: 10px; font-family: inherit; }
.impl-rosca-leg { font-size: 11px; color: var(--text-faint); text-align: center; margin: 6px 0 0; line-height: 1.5; }

/* ── trilho "Precisa de você" ── */
.impl-rail-sub { font-size: 11px; color: var(--text-faint); margin: -6px 0 10px; line-height: 1.5; }
/* Máscara de desvanecimento no rodapé: a lista rola, e cortar uma linha ao meio sem aviso se lê
   como defeito de layout em vez de "tem mais coisa aqui embaixo". */
.impl-rail-lista { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
/* A máscara só entra quando a lista REALMENTE transborda (classe posta pelo JS): aplicada sempre,
   ela apagaria o rodapé da última linha mesmo numa lista curta, inventando um corte que não existe. */
.impl-rail-lista.is-rolavel {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.impl-rail-lista li { padding: 9px 0; border-bottom: 1px solid var(--panel-border); }
.impl-rail-lista li:last-child { border-bottom: 0; }
.impl-rail-cli { font-size: 13px; color: var(--text); font-weight: 500; }
.impl-rail-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.impl-rail-dias { font-variant-numeric: tabular-nums; color: var(--fin-critical); font-weight: 600; }

.impl-card-head h3 { display: flex; align-items: center; gap: 2px; }

@media (max-width: 1100px) {
  .impl-layout { grid-template-columns: 1fr; }
  .impl-rail { position: static; }
  .impl-search input { width: 180px; }
}
@media (max-width: 700px) {
  .impl-side { width: 54px; flex-basis: 54px; }
  #impl-body { padding: 14px; }
  .impl-search { display: none; }
}
.impl-agrup-col[role="button"] { cursor: pointer; border-radius: 6px; }
.impl-agrup-col[role="button"]:hover, .impl-agrup-col[role="button"]:focus-visible { background: var(--panel-2); outline: none; }
.impl-agrup-col.is-ativo { background: var(--accent-soft); }

/* ── Aba Quadro: espelha as colunas do kanban do CRM ── */
.impl-quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.impl-coluna {
  flex: 0 0 258px; background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 190px);
}
.impl-coluna-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--panel-border); }
.impl-coluna-head h3 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text);
  text-transform: none; letter-spacing: 0; line-height: 1.35;
}
.impl-coluna-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.impl-coluna-n {
  background: var(--panel-2); color: var(--text); border-radius: 6px;
  padding: 1px 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.impl-coluna-val { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.impl-coluna-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; }
.impl-coluna-vazia { font-size: 12px; color: var(--text-faint); text-align: center; padding: 14px 0; margin: 0; font-style: italic; }

.impl-mini {
  background: var(--panel-2); border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border-strong);
  border-radius: 8px; padding: 9px 10px; cursor: default;
}
/* Urgência pela borda ESQUERDA, com os dias escritos no rodapé do card: a cor reforça, não carrega.
   Mesmas faixas do histograma "há quanto tempo na etapa" — duas réguas diferentes na mesma tela
   fariam o mesmo card parecer urgente num lugar e tranquilo no outro. */
.impl-mini--u0 { border-left-color: var(--panel-border-strong); }
.impl-mini--u1 { border-left-color: var(--fin-warning); }
.impl-mini--u2 { border-left-color: var(--fin-orange); }
.impl-mini--u3 { border-left-color: var(--fin-critical); }
.impl-mini-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.impl-mini-nome { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.impl-mini-rep {
  flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--fin-warning);
  border: 1px solid var(--fin-warning); border-radius: 5px; padding: 0 4px; line-height: 1.5;
}
.impl-mini-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.impl-mini-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.impl-mini-resp { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impl-mini-dias { font-size: 11px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.impl-mini-val {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--panel-border);
  font-size: 11.5px; font-weight: 600; color: var(--text);
  display: flex; justify-content: space-between; gap: 8px;
}
.impl-mini-val span { font-weight: 400; color: var(--text-faint); }

.impl-quadro-aviso {
  background: var(--panel-2); border: 1px solid var(--panel-border); border-left: 3px solid var(--fin-warning);
  border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--text-muted);
  margin: 0 0 14px; line-height: 1.55;
}
.impl-quadro-aviso strong { color: var(--text); }

/* "Recorrência a pagar" — a 3ª linha do bloco de números do cartão do vendedor. Cor própria porque
   ela não é faturamento como as outras duas: é comissão a pagar, dinheiro que SAI. */
.com-num-val--rec { color: var(--accent, #2f6fed); }

/* Aba Inadimplentes: aparelhos do cliente e marcação de quem já saiu ------------------------- */
/* A coluna de aparelhos responde "ainda tem o que cortar?". Verde = continua usando mesmo devendo,
   que é o caso que exige ação; cinza = a plataforma já travou; traço = não tem aparelho nenhum. */
.inad-disp { white-space: nowrap; text-align: center; font-size: 12px; }
.inad-disp-on { color: var(--danger, #c0392b); font-weight: 700; }
.inad-disp-off { color: var(--text-faint); }
.inad-disp-nada { color: var(--text-faint); opacity: .6; }

/* Selo do cliente que já cancelou. Fica junto do nome, não numa coluna: é uma qualificação da
   pessoa, não um dado a comparar linha a linha. */
.inad-tag-saiu,
.inad-tag-parte {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  vertical-align: middle;
}
.inad-tag-saiu { background: var(--panel-border); color: var(--text-faint); }
.inad-tag-parte { background: transparent; border: 1px solid var(--panel-border); color: var(--text-muted); }

/* ═══ Painel de parede da FILA ══════════════════════════════════════════════════════════════════
   Tela de TV: escala grande, alto contraste, nenhuma ação. Não segue o alternador de tema —
   painel.html fixa o escuro, porque numa tela ligada o dia inteiro o fundo claro cansa e o
   vermelho de alerta perde contraste. */
.fila-body {
  margin: 0; background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column;
}
.fila-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 34px; border-bottom: 1px solid var(--panel-border);
}
.fila-titulo h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.fila-titulo span { font-size: 15px; color: var(--text-muted); }
.fila-topo-dir { display: flex; align-items: center; gap: 34px; }
.fila-contador { display: flex; flex-direction: column; align-items: flex-end; }
.fila-contador-n { font-size: 62px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
/* Cor pela PIOR espera da fila, não pela existência dela — as mesmas faixas das linhas. */
.fila-contador-n.is-zero { color: var(--fin-good); }
.fila-contador-n.n0 { color: var(--text); }
.fila-contador-n.n1 { color: var(--fin-warning); }
.fila-contador-n.n2 { color: var(--fin-orange); }
.fila-contador-n.n3 { color: var(--fin-critical); }
.fila-etiqueta--mais { color: var(--text-faint); border-style: dashed; }
.fila-contador-rot { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.fila-relogio { display: flex; flex-direction: column; align-items: flex-end; }
#fila-hora { font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fila-estado { font-size: 12px; color: var(--fin-good); }
.fila-estado.is-velho { color: var(--fin-warning); }
.fila-estado.is-erro { color: var(--fin-critical); }

.fila-corpo { flex: 1; padding: 20px 34px 34px; overflow-y: auto; }
.fila-carregando { color: var(--text-muted); font-size: 18px; }
.fila-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fila-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 22px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-left: 6px solid var(--panel-border-strong);
  border-radius: 12px; padding: 16px 22px;
}
/* Faixas de espera. A cor reforça; o tempo escrito ao lado é o que carrega o dado. */
.fila-item--n0 { border-left-color: var(--panel-border-strong); }
.fila-item--n1 { border-left-color: var(--fin-warning); }
.fila-item--n2 { border-left-color: var(--fin-orange); }
.fila-item--n3 { border-left-color: var(--fin-critical); }
.fila-item-nome { font-size: 22px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-item-filas { display: flex; gap: 6px; flex-wrap: wrap; }
.fila-etiqueta {
  font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--panel-border-strong); border-radius: 999px; padding: 3px 11px;
}
.fila-etiqueta--vazia { color: var(--text-faint); font-style: italic; }
.fila-item-tempo { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 132px; text-align: right; }
.fila-item--n3 .fila-item-tempo { color: var(--fin-critical); }
.fila-item--n2 .fila-item-tempo { color: var(--fin-orange); }

.fila-limpa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 70px 0; }
.fila-limpa-marca { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--fin-good); display: grid; place-items: center; }
.fila-limpa-marca svg { width: 38px; height: 38px; }
.fila-limpa p { font-size: 21px; color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .fila-item { grid-template-columns: 1fr auto; gap: 10px; }
  .fila-item-filas { grid-column: 1 / -1; }
  .fila-titulo h1 { font-size: 22px; }
  .fila-contador-n { font-size: 44px; }
}

/* Linha da recorrência dentro da conta da comissão. Mesmo desenho das outras parcelas, mas sem
   percentual na frente: ele varia por safra (5% ou 3%) e mostrar um só seria mentira. */
.com-comis-rec b { font-weight: 700; }

/* BOLETO TRAVADO — venceu e os 5 dias úteis do vendedor acabaram.
   Vermelho opaco com a letra vazada: a caixinha continua legível, mas visivelmente "apagada", e a
   ausência de sublinhado/seta já diz que não há link. É o único estado da régua que não é clicável
   por motivo de regra, e não por falta de dado — daí merecer um desenho próprio. */
/* FORA DO PRAZO — venceu e os 5 dias úteis acabaram. Vermelho cheio para separar da "vencida" que
   ainda está no prazo, mas com a letra LEGÍVEL e clicável: a caixinha avisa que a comissão acabou,
   não que o boleto foi tirado do vendedor. (Era vazada e sem link até 20/08/2026.) */
.com-mes--t {
  background: var(--danger, #c0392b);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Coluna do vendedor responsável na aba Inadimplentes. "Sem vendedor" é destacado de propósito:
   é ele que muda a comissão da cobrança de 1% para 3%, e é quem a equipe precisa achar primeiro. */
.inad-vend { white-space: nowrap; font-size: 12px; }
.inad-vend-nome { color: var(--text-muted); }
.inad-vend-sem { color: var(--warn, #b7791f); font-weight: 600; }

/* ---- Aba Recuperados: relatório por fatura da comissão da cobrança ---- */
/* O número da comissão vira botão. A seta é o que avisa que dali se chega a outro lugar — sem ela o
   cartão parece só mais um indicador. */
.inad-kpi--click { cursor: pointer; border: 0; font: inherit; text-align: left; }
.inad-kpi--click:hover { filter: brightness(1.06); }
.inad-kpi-seta { font-style: normal; opacity: .7; margin-left: 4px; }

.rec-datas { white-space: nowrap; font-size: 12px; }
.rec-datas span { display: block; color: var(--text-faint); font-size: 11px; }
.rec-pct { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-atraso { text-align: center; }
/* Faixa de atraso por cor: até 15 dias é rotina, acima de 30 é risco de perder o cliente. */
.rec-faixa { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rec-faixa--ok { background: color-mix(in srgb, var(--ok, #2f855a) 16%, transparent); color: var(--ok, #2f855a); }
.rec-faixa--meio { background: color-mix(in srgb, var(--warn, #b7791f) 18%, transparent); color: var(--warn, #b7791f); }
.rec-faixa--alto { background: color-mix(in srgb, var(--danger, #c0392b) 16%, transparent); color: var(--danger, #c0392b); }
.rec-motivo { font-size: 12px; color: var(--text-muted); max-width: 34ch; }
.rec-sem-motivo { color: var(--text-faint); }

/* Volta da aba Recuperados. Ela não tem botão na barra de abas — este link é o único caminho de
   retorno, então fica no topo, antes de qualquer número. */
.rec-voltar {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rec-voltar:hover { color: var(--text); border-color: var(--text-faint); }

/* SITUAÇÃO do cliente na cobrança — substituiu a observação livre. O aviso fica logo abaixo do
   seletor, em vermelho, porque ele significa que a marcação NÃO foi confirmada pelo banco: o cliente
   continua devendo apesar de alguém ter dito o contrário. */
.inad-sit {
  width: 100%;
  max-width: 190px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.inad-sit:disabled { opacity: .6; }
.inad-aviso {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--danger, #c0392b);
  max-width: 30ch;
}

/* MOTIVO do atraso, ao lado da situação. O campo de texto só existe quando "Outro" está escolhido —
   `is-hidden` some com ele em vez de deixá-lo desabilitado, que ocuparia espaço à toa em 259 linhas. */
.inad-motivo { min-width: 180px; }
.inad-mot {
  width: 100%;
  max-width: 190px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.inad-mot-txt {
  width: 100%;
  max-width: 190px;
  height: 30px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.inad-mot-saved { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-faint); }

/* Botão que fecha a operação de situação + motivo. Nasce desabilitado e só acende quando algo muda
   na linha — assim ele mesmo diz o que ainda falta gravar, sem precisar de aviso à parte.
   Enquanto ele estiver aceso, a linha fica com um fio na lateral: numa lista de 259 clientes, é o
   que impede alguém de rolar a tela e esquecer uma edição pela metade. */
.inad-salvar { white-space: nowrap; vertical-align: top; padding-top: 4px; }
.inad-btn-salvar {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #2f6fed);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.inad-btn-salvar:disabled {
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--panel-border);
  cursor: default;
}
.inad-row.is-editando > td:first-child { box-shadow: inset 3px 0 0 var(--accent, #2f6fed); }

/* UMA LINHA POR FATURA, agrupadas por cliente. As colunas de identificação e de decisão usam rowspan
   e cobrem as faturas daquele cliente; o fio de cima marca onde um cliente começa e o outro acaba —
   sem ele, 390 linhas viram um bloco contínuo e ninguém acha o limite entre dois clientes. */
.inad-row.is-primeira > * { border-top: 1px solid var(--panel-border); }
.inad-row.is-continuacao > td { background: color-mix(in srgb, var(--panel) 40%, transparent); }
.inad-cli-total { display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint); }
/* Etiqueta na própria fatura: diz de onde ela veio quando isso muda a leitura do valor. */
.inad-fat-canc, .inad-fat-avulsa {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  vertical-align: middle;
}
.inad-fat-canc { background: var(--panel-border); color: var(--text-faint); }
.inad-fat-avulsa { border: 1px solid var(--panel-border); color: var(--text-muted); }

/* Inadimplentes no desenho do "Ao vivo": feed de caixas por cliente. Os controles de decisão ficam
   numa faixa logo abaixo do cabeçalho da caixa — sempre visíveis, sem precisar abrir as faturas,
   porque marcar situação é a ação mais frequente da aba. */
/* Os controles ficam NA MESMA BARRA da fatura, no fim — junto do botão de ação. Compactos de
   propósito: dividem a linha com valor, vencimento e dias, e crescer aqui empurraria tudo. */
.inad-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 6px 0 0;
}
.inad-acoes .inad-sit,
.inad-acoes .inad-mot { width: 132px; max-width: 132px; height: 28px; margin: 0; font-size: 12px; }
.inad-acoes .inad-mot-txt { width: 140px; max-width: 140px; height: 28px; margin: 0; font-size: 12px; }
.inad-acoes .inad-btn-salvar { height: 28px; padding: 0 11px; font-size: 12px; }
.inad-acoes .inad-aviso {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1;
  cursor: help;
}
.inad-acoes .inad-mot-saved { margin: 0; white-space: nowrap; }
.inad-acoes.is-editando { box-shadow: inset 3px 0 0 var(--accent, #2f6fed); }

/* CADASTRO MANUAL na comissão da cobrança. Card enxuto no topo da aba Recuperados: a busca aceita
   número OU link, e o resultado aparece logo abaixo com um botão por fatura. */
.rec-cad {
  margin: 0 2px 16px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
}
.rec-cad-tit { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.rec-cad-sub { display: block; margin-top: 3px; max-width: 76ch; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
/* Cadastro em campos rotulados: são seis informações, e sem rótulo ninguém adivinha qual caixa é
   qual. Alinham em linha e quebram sozinhos em tela estreita. */
.rec-cad-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.rec-cad-campo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 190px; }
.rec-cad-campo--curto { flex: 0 1 140px; }
.rec-cad-campo > span { font-size: 11px; color: var(--text-faint); }
.rec-cad-form input,
.rec-cad-form select {
  height: 32px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px;
}
.rec-cad-form .rec-cad-campo input,
.rec-cad-form .rec-cad-campo select { width: 100%; }
.rec-cad-form button {
  height: 32px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--accent, #2f6fed); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rec-cad-res { margin-top: 10px; }
.rec-cad-item {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--panel-border);
}
.rec-cad-cli { flex: 1; display: flex; flex-direction: column; font-size: 12.5px; }
.rec-cad-cli i { font-style: normal; font-size: 11px; color: var(--text-faint); }
.rec-cad-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-cad-add {
  height: 28px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--ok, #2f855a); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rec-cad-add:disabled { opacity: .6; cursor: default; }
.rec-cad-vazio { font-size: 12px; color: var(--text-faint); padding: 6px 0; }
/* Marca da fatura incluída à mão, no relatório — ela não entrou pela regra automática, e quem lê
   precisa saber disso pra conferir. */
.rec-manual {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2f6fed) 16%, transparent);
  color: var(--accent, #2f6fed); font-size: 10.5px; font-weight: 600;
}
.rec-cad-rem {
  border: 0; background: transparent; color: var(--text-faint);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rec-cad-rem:hover { color: var(--danger, #c0392b); }

/* Retorno da busca automática do cadastro: some quando não há nada a dizer, verde quando a fatura
   foi achada, âmbar quando não — e nesse caso a mensagem diz o que fazer, não só que falhou. */
.rec-cad-achou { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.rec-cad-achou.is-sim { color: var(--ok, #2f855a); }
.rec-cad-achou.is-nao { color: var(--warn, #b7791f); }

/* ---- RELATÓRIO MENSAL DA COBRANÇA ----
   Mesma linguagem da aba Relatórios de uso: cabeçalho com o mês, cartões grandes e blocos abaixo. */
.rel-cob { margin: 0 2px 18px; }
.rel-cob[hidden] { display: none; }

/* Cartão que abre o relatório. Ocupa a linha inteira porque é a única coisa naquele lugar e porque
   um botão pequeno seria lido como "detalhe", quando na verdade é a porta de uma tela inteira. */
.rel-cob-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; margin: 0 2px 14px; padding: 13px 16px; text-align: left;
  border: 1px solid var(--panel-border); border-radius: 12px;
  background: var(--panel); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .12s ease;
}
.rel-cob-card:hover { border-color: var(--text-faint); }
.rel-cob-card.is-aberto { border-color: var(--ok, #2f855a); }
.rel-cob-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel-cob-card-txt b { font-size: 13.5px; font-weight: 700; }
.rel-cob-card-txt i { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.rel-cob-card-seta { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.rel-cob-card.is-aberto .rel-cob-card-seta { color: var(--ok, #2f855a); }
/* Na impressão o cartão não vai junto: ele é o controle, não o relatório. */
@media print { body.imprimindo-relatorio .rel-cob-card { display: none !important; } }
.rel-cob-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel);
}
.rel-cob-tit { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.rel-cob-sub { margin: 0; max-width: 72ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.rel-cob-meses { display: flex; flex-wrap: wrap; gap: 4px; }

.rel-cob-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.rel-cob-bloco { padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); }
.rel-cob-bloco--largo { grid-column: 1 / -1; }
.rel-cob-bloco h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.rel-cob-nota { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
.rel-cob-vazio { margin: 0; font-size: 12px; color: var(--text-faint); }

.rel-cob-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rel-cob-tab td { padding: 5px 0; border-top: 1px solid var(--panel-border); }
.rel-cob-tab tr:first-child td { border-top: 0; }
.rel-cob-tab .rel-cob-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-cob-tab tr.is-sem td:first-child { color: var(--warn, #b7791f); font-weight: 600; }

/* Barra horizontal: a leitura aqui é comparar tamanhos, então a barra basta — sem eixo, sem grade. */
.rel-cob-barras { display: flex; flex-direction: column; gap: 7px; }
.rel-cob-barra { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.rel-cob-barra-rot { color: var(--text-muted); }
.rel-cob-barra-trilho { height: 8px; border-radius: 999px; background: var(--panel-border); overflow: hidden; }
.rel-cob-barra-trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--accent, #2f6fed); }
.rel-cob-barra-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* Botões de exportação do relatório da cobrança. */
/* Mês primeiro, download depois: a ordem na tela é a ordem da decisão. */
.rel-cob-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rel-cob-baixar { position: relative; }
.rel-cob-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 128px; padding: 4px;
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.rel-cob-menu[hidden] { display: none; }
.rel-cob-menu-item {
  display: block; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.rel-cob-menu-item:hover { background: var(--panel-border); }
.rel-cob-btn {
  display: inline-block; height: 30px; line-height: 28px; padding: 0 12px;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.rel-cob-btn:hover { color: var(--text); border-color: var(--text-faint); }

/* IMPRESSÃO: sai só o relatório. Sem isto a folha viria com menu, abas, cadastro e a lista inteira
   de faturas — três páginas de ruído antes do que interessa. */
@media print {
  body.imprimindo-relatorio > *:not(#app):not(main) { display: none !important; }
  body.imprimindo-relatorio .fin-tabs,
  body.imprimindo-relatorio .panel-head,
  body.imprimindo-relatorio .rec-voltar,
  body.imprimindo-relatorio .rec-cad,
  body.imprimindo-relatorio .rel-cob-acoes,
  body.imprimindo-relatorio .inad-count,
  body.imprimindo-relatorio .inad-wrap,
  body.imprimindo-relatorio #finance-recup > .inad-kpis,
  body.imprimindo-relatorio #finance-recup > .inad-wrap { display: none !important; }
  body.imprimindo-relatorio #com-tabs,
  body.imprimindo-relatorio #com-refresh,
  body.imprimindo-relatorio #com-updated,
  body.imprimindo-relatorio .com-obs-voltar,
  body.imprimindo-relatorio .rel-cob-meses { display: none !important; }
  /* No papel não há cor: a intensidade do dia vira tom de cinza, senão todos ficariam iguais. */
  body.imprimindo-relatorio .com-cal-dia.tem {
    background: color-mix(in srgb, #333 calc(var(--f) * 45%), #fff) !important;
    border-color: #999 !important;
  }
  body.imprimindo-relatorio .rel-cob { break-inside: auto; }
  body.imprimindo-relatorio .rel-cob-bloco { break-inside: avoid; }
  /* Fundo branco e texto preto: o tema escuro na impressora vira uma página inteira de tinta. */
  body.imprimindo-relatorio, body.imprimindo-relatorio * { background: #fff !important; color: #111 !important; }
  body.imprimindo-relatorio .rel-cob-barra-trilho { background: #e5e5e5 !important; }
  body.imprimindo-relatorio .rel-cob-barra-trilho > span { background: #555 !important; }
}

/* A barra de observação saiu da carteira em 20/08/2026: o histórico agora abre clicando no NOME do
   cliente, e um campo de texto por linha em centenas de clientes só roubava espaço da grade.
   O que ficou na carteira é a marca abaixo — o pontinho que avisa que há recado ali dentro. */










/* ---- PÁGINA DE OBSERVAÇÕES DO CLIENTE ----
   Linha do tempo do mais antigo pro mais recente: é a ordem em que a história aconteceu, e é assim
   que se lê "prometeu pagar → não pagou → pediu desconto". */
.com-obs-pag { max-width: 860px; }
.com-obs-voltar {
  margin-bottom: 14px; padding: 4px 10px;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.com-obs-voltar:hover { color: var(--text); border-color: var(--text-faint); }
.com-obs-cab { margin-bottom: 14px; }
.com-obs-tit { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.com-obs-sub { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); }

.com-obs-linha { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--panel-border); }
.com-obs-linha li { position: relative; padding: 0 0 16px 14px; }
/* O ponto na linha marca cada entrada — é o que faz a sequência ser lida como sequência. */
.com-obs-linha li::before {
  content: ""; position: absolute; left: -25px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--panel-border);
}
.com-obs-linha li:last-child::before { border-color: var(--accent, #2f6fed); background: var(--accent, #2f6fed); }
.com-obs-quando { display: block; font-size: 11px; color: var(--text-faint); }
.com-obs-texto { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--text); }

.com-obs-nova { display: flex; gap: 8px; margin-top: 18px; }
.com-obs-nova input {
  flex: 1; height: 34px; padding: 0 11px;
  border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.com-obs-nova button {
  height: 34px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--accent, #2f6fed); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.com-obs-aviso { margin-top: 16px; font-size: 12px; color: var(--text-faint); }

/* Atalho pro histórico, na barra da carteira. */



/* Marca de que o cliente tem observação — um ponto ao lado do nome, com o último recado na dica.
   É o que permite varrer a carteira e achar de relance quem tem algo acontecendo, sem uma coluna
   inteira de texto competindo com a grade de meses. */
.com-cli-nome--link {
  border: 0; padding: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.com-cli-nome--link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ÚLTIMA OBSERVAÇÃO ao lado dos três pontinhos. Corpo pequeno e uma linha só: quem varre a carteira
   lê o recado de relance, e o texto inteiro sai na dica. `min-width:0` + `truncate` são o que impedem
   um recado longo de empurrar a grade de meses pra fora da tela. */
.com-cli-ult {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-width: 0; max-width: 42ch; margin-left: 10px;
  padding-left: 10px; border-left: 2px solid var(--warn, #b7791f);
  cursor: pointer; vertical-align: middle;
}
.com-cli-ult-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--text-muted);
}
.com-cli-ult-quem { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.com-cli-ult:hover .com-cli-ult-txt { color: var(--text); }

/* ---- RELATÓRIO MENSAL DO VENDEDOR ---- */
.com-rel-abrir {
  padding: 3px 10px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.com-rel-abrir:hover { color: var(--text); border-color: var(--text-faint); }
/* Centralizado: o relatório tem largura máxima pra a leitura não ficar larga demais, e sem isto ele
   encostava na borda esquerda com um vazio enorme do lado direito. */
.com-rel { max-width: 1100px; margin-inline: auto; }

/* Calendário de pagamentos: a intensidade da cor é o valor do dia. Comparar tons é imediato — uma
   lista de datas com valores exigiria fazer a comparação de cabeça. */
.com-cal-sem, .com-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.com-cal-sem { margin-bottom: 4px; }
.com-cal-sem span { text-align: center; font-size: 10.5px; color: var(--text-faint); }
.com-cal-dia, .com-cal-vazio {
  min-height: 46px; padding: 4px 5px; border-radius: 8px;
  border: 1px solid var(--panel-border); background: transparent;
}
.com-cal-vazio { border-color: transparent; }
.com-cal-dia b { display: block; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.com-cal-dia i { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: var(--text); }
.com-cal-dia.tem {
  background: color-mix(in srgb, var(--ok, #2f855a) calc(var(--f) * 55%), transparent);
  border-color: color-mix(in srgb, var(--ok, #2f855a) 40%, transparent);
  cursor: help;
}
.com-cal-dia.tem b { color: var(--text); }

/* ---- BARRA DE DENTRO DO VENDEDOR ---- */
/* O "voltar" não é uma aba: é a saída. Fica na ponta esquerda, sem o sublinhado de aba ativa, pra
   não competir com Carteira/Prospecção — quem procura a saída acha, quem está navegando não tropeça. */
.com-tab-voltar { color: var(--text-muted); font-weight: 600; }
.com-tab-voltar:hover { color: var(--text); }
.com-tab-quem {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 4px 0 10px; padding: 0 12px 0 0;
  border-right: 1px solid var(--panel-border);
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.com-prosp-vazio {
  margin-top: 14px; padding: 28px 24px;
  border: 1px dashed var(--panel-border); border-radius: 14px;
  background: var(--panel-bg, transparent);
}
.com-prosp-tit { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.com-prosp-sub { margin: 8px 0 0; max-width: 62ch; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

/* ---- PROSPECÇÃO ---- */
.prosp-topo { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
/* O "Novo cadastro +" é a única ação da tela e o começo de tudo aqui: card cheio, não um botão
   discreto. Quem abre uma prospecção vazia tem que enxergar o que fazer sem procurar. */
.prosp-novo {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 12px;
  border: 1px dashed var(--text-faint); background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.prosp-novo:hover { border-color: var(--ok, #2f855a); background: color-mix(in srgb, var(--ok, #2f855a) 10%, transparent); }
.prosp-novo-mais { font-size: 18px; line-height: 1; font-weight: 700; color: var(--ok, #2f855a); }
.prosp-conta { margin: 0; font-size: 12px; color: var(--text-muted); }
.prosp-vazio { margin: 18px 2px; font-size: 13px; color: var(--text-muted); }

/* Só na horizontal. O `overflow-y` fica escondido de propósito: com `auto`, qualquer coisa que
   passasse um pixel pra baixo criava uma barra vertical curtíssima dentro da tabela. */
.prosp-tab-wrap { overflow-x: auto; overflow-y: hidden; }
.prosp-tab { width: 100%; }
/* Só o que NÃO pode quebrar é que fica travado: CNPJ, telefone, data e o selo de status. Nome de
   empresa e de responsáveis podem quebrar em duas linhas — travar tudo empurrava a tabela pra fora
   da tela e criava a barra horizontal mesmo num monitor largo. */
.prosp-tab th, .prosp-tab td { white-space: nowrap; }
.prosp-tab td.prosp-empresa, .prosp-tab td.prosp-resp,
.prosp-tab th.prosp-empresa, .prosp-tab th.prosp-resp { white-space: normal; }
.prosp-tab td.prosp-empresa { min-width: 150px; }
.prosp-tab td.prosp-resp { min-width: 130px; }
.prosp-empresa { font-weight: 600; }
.prosp-n { text-align: right; }
.prosp-acao { position: relative; width: 34px; text-align: right; }
.prosp-selo {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--panel-border); font-size: 11.5px; font-weight: 600;
}
.prosp-selo.is-ok { color: var(--ok, #2f855a); border-color: color-mix(in srgb, var(--ok, #2f855a) 45%, transparent); }
.prosp-selo.is-wait { color: var(--warn, #b7791f); border-color: color-mix(in srgb, var(--warn, #b7791f) 45%, transparent); }
.prosp-selo.is-off { color: var(--text-faint); }
/* Venda feita é o único PREENCHIDO: é o fim do funil e tem que saltar aos olhos numa lista longa. */
.prosp-selo.is-venda {
  background: var(--ok, #2f855a); border-color: var(--ok, #2f855a); color: #fff;
}

/* O selo de status é um seletor de verdade, só que sem cara de formulário: um clique abre a lista do
   navegador e escolher já grava. A setinha some porque numa tabela de trinta linhas ela viraria
   trinta setinhas competindo com o dado. */
.prosp-selo-sel {
  appearance: none; -webkit-appearance: none;
  background-image: none; cursor: pointer;
  font-family: inherit; line-height: 1.35;
  /* Um seletor nasce com a largura da MAIOR opção ("Encaminhado Mensagem"), o que deixaria todos os
     selos do tamanho do maior e ainda empurraria a tabela pra fora da tela. `field-sizing` faz ele
     ter a largura do que está escolhido — que é como um selo tem que se comportar. */
  field-sizing: content;
  max-width: 190px;
}
.prosp-selo-sel:hover { border-color: currentColor; }
.prosp-selo-sel:focus-visible { outline: 2px solid var(--ok, #2f855a); outline-offset: 2px; }
/* A lista aberta é desenhada pelo sistema: sem cor de fundo explícita ela sai branca no tema escuro. */
.prosp-selo-sel option { background: var(--panel-bg, #111); color: var(--text); font-weight: 400; }
.prosp-selo-sel.is-venda option { color: var(--text); }
/* O botão da linha EDITA direto — não abre menu. Mesmo tamanho e lugar dos 3 pontinhos que estavam
   aqui antes, pra a mão não ter que reaprender onde clicar. */
.prosp-dots {
  appearance: none; cursor: pointer;
  width: 30px; height: 26px; border-radius: 8px;
  border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-muted);
  font-size: 14px; line-height: 1;
  transition: color .15s ease, border-color .15s ease;
}
.prosp-dots:hover { color: var(--ok, #2f855a); border-color: var(--ok, #2f855a); }

/* O card de cadastro: nasce no centro e é arrastável pelo cabeçalho, pra conferir a tabela por baixo
   sem perder o que já foi digitado. */
.prosp-fundo {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.55);
}
/* `max-height: 100%` (e não 90vh) faz o card usar TODO o espaço que sobra dentro do fundo. Com 90vh
   sobrava uma faixa inutilizada em cima e embaixo, e o corpo entrava em rolagem por causa de alguns
   pixels — uma barra que anda cinco pixels e não parece levar a lugar nenhum. */
.prosp-card {
  width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column;
  border: 1px solid var(--panel-border); border-radius: 16px;
  background: var(--panel-bg, #111); box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
/* O cabeçalho e o rodapé não encolhem: quem rola é só o miolo. Sem isto, numa tela baixa o botão
   "Salvar" era espremido junto e a rolagem parava antes do fim do formulário. */
.prosp-card-topo, .prosp-card-pe { flex: 0 0 auto; }
.prosp-card.is-arrastando { user-select: none; }
.prosp-card-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--panel-border); cursor: move;
}
.prosp-card-tit { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.prosp-x {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.prosp-x:hover { color: var(--text); }
/* Cinco linhas cheias, sem buraco. A barra de rolagem continua aqui como rede de segurança pra
   telas muito baixas, mas o card foi apertado até caber inteiro numa tela de notebook — ver uma
   rolagem com oito campos dá a impressão de que há mais coisa escondida embaixo, e não há. */
/* `min-height: 0` é obrigatório: um filho de flex-column não encolhe abaixo do próprio conteúdo sem
   ele, e o `overflow-y` acabava rolando um pedaço só, sem nunca chegar no último campo. */
.prosp-card-corpo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px 16px;
  padding: 15px 18px; overflow-y: auto; min-height: 0; overscroll-behavior: contain;
}
.prosp-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prosp-campo--largo { grid-column: 1 / -1; }
.prosp-campo > span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.prosp-campo input, .prosp-campo select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--panel-border); border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px;
}
.prosp-campo input:focus, .prosp-campo select:focus { outline: none; border-color: var(--ok, #2f855a); }
.prosp-campo select option { background: var(--panel-bg, #111); color: var(--text); }
.prosp-outros { margin-top: 6px; }
.prosp-outros[hidden] { display: none; }
/* O calendário nativo do navegador é o que abre no campo de data — o ícone precisa aparecer no
   tema escuro, senão o campo parece um texto comum e ninguém descobre que há calendário. */
.prosp-campo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6); cursor: pointer;
}
.prosp-card-pe {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 11px 18px; border-top: 1px solid var(--panel-border);
}
.prosp-erro { margin-right: auto; font-size: 12px; color: var(--bad, #c53030); }
.prosp-salvar {
  padding: 9px 22px; border: 0; border-radius: 9px;
  background: var(--ok, #2f855a); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.prosp-salvar:disabled { opacity: .6; cursor: default; }

@media (max-width: 720px) {
  .prosp-card-corpo { grid-template-columns: 1fr; }
}

/* Cadastro pela metade guardado: o botão muda de cara pra dizer que há algo a retomar, em vez de
   parecer que vai abrir um formulário em branco por cima do que a pessoa escreveu. */
.prosp-novo.is-pendente { border-style: solid; border-color: var(--warn, #b7791f); }
.prosp-novo.is-pendente .prosp-novo-mais { color: var(--warn, #b7791f); }
.prosp-pendente { margin: 0; font-size: 12px; color: var(--warn, #b7791f); }
.prosp-descartar {
  border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0;
}
.prosp-descartar:hover { color: var(--text); }

/* ---- RELATÓRIO GERAL (comissão de liderança) ---- */
.com-rel.ger { max-width: 1180px; margin-inline: auto; }
.ger-meta {
  margin: 16px 0 18px; padding: 18px 20px 30px;
  border: 1px solid var(--panel-border); border-radius: 14px;
}
.ger-meta-tit { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ger-meta-num { margin: 4px 0 18px; font-size: 26px; font-weight: 800; color: var(--text); }
.ger-meta-num span { margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
/* As faixas viram marcas na régua: ver onde o time está e o que falta pra próxima é a pergunta do
   dia 20 do mês, e um número solto não responde isso. */
/* Altura suficiente pras marcas (percentual + valor, duas linhas) não encostarem no texto de baixo. */
.ger-barra { position: relative; height: 46px; }
.ger-barra-trilho {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.ger-barra-trilho > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ok, #2f855a); transition: width .3s ease;
}
.ger-marca { position: absolute; top: 14px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.ger-marca::before {
  content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 14px;
  background: var(--text-faint); transform: translateX(-50%);
}
.ger-marca.is-ok::before { background: var(--ok, #2f855a); }
.ger-marca b { display: block; font-size: 11px; font-weight: 700; color: var(--text-faint); }
.ger-marca.is-ok b { color: var(--ok, #2f855a); }
.ger-marca i { font-style: normal; font-size: 10px; color: var(--text-faint); }
.ger-meta-pe { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* A conta aberta, linha a linha. Sem isso o valor final é um número que ninguém consegue conferir. */
.ger-linhas { list-style: none; margin: 12px 0 0; padding: 0; }
.ger-linhas li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--panel-border);
  font-size: 12.5px; color: var(--text-muted);
}
.ger-linhas li:last-child { border-bottom: 0; }
.ger-linhas li i { font-style: normal; font-size: 11px; color: var(--text-faint); }
.ger-linhas li b { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ger-linhas .ger-soma { border-top: 1px solid var(--text-faint); border-bottom: 0; }
.ger-linhas .ger-soma span { font-weight: 700; color: var(--text); }
.ger-mais { margin-top: 14px; }
.ger-tabela .rel-cob-tab thead th { font-size: 11px; color: var(--text-faint); }
.ger-tabela .rel-cob-tab { width: 100%; font-size: 12.5px; }
.ger-tabela .rel-cob-tab td, .ger-tabela .rel-cob-tab th { padding-left: 8px; }
.ger-tabela .rel-cob-tab td:first-child, .ger-tabela .rel-cob-tab th:first-child { padding-left: 0; }
/* A tabela do time tem 6 colunas de dinheiro e precisa de mais espaço que o bloco da conta ao lado;
   com as duas em colunas iguais, a última coluna era cortada. */
/* A tabela ganhou uma coluna (a faixa de cada vendedor) e precisa de mais espaço que a conta ao lado. */
.ger .rel-cob-grade { grid-template-columns: minmax(280px, 0.7fr) minmax(600px, 1.3fr); }
.ger-tabela { overflow-x: auto; }
@media (max-width: 1000px) {
  .ger .rel-cob-grade { grid-template-columns: 1fr; }
}
/* A última marca fica na ponta da régua: centralizada, metade dela sairia da caixa. */
.ger-marca:last-child { transform: translateX(-100%); text-align: right; }
.ger-marca:last-child::before { left: auto; right: 0; transform: none; }
.ger-marca:first-child { transform: translateX(-50%); }
.ger-tabela .rel-cob-tab tfoot td { padding-top: 10px; border-top: 1px solid var(--text-faint); }
.ger-fora { margin-top: -4px; padding: 8px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn, #b7791f) 10%, transparent); color: var(--text-muted); }

/* Com o card aberto, a página atrás não rola: duas barras ao mesmo tempo — uma da página, curta, e
   outra do card — fazem parecer que a rolagem "não vai até o fim". */
body.prosp-travado { overflow: hidden; }
/* Sumir com a barra da página empurraria o conteúdo 10px pra direita no instante em que o card abre.
   A margem reservada segura tudo no lugar — o "pulo" era lido como a tela se mexendo sozinha. */
body.prosp-travado { padding-right: var(--barra-janela, 0px); }

/* Faixa de "tem versão nova" — canto de baixo, sem tapar nada, e some no × de quem está no meio de
   algo. Ver js/versao.js. */
.versao-nova {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  border: 1px solid var(--panel-border); background: var(--panel-bg, #111);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  font-size: 12.5px; color: var(--text);
}
.versao-nova > button {
  padding: 6px 14px; border: 0; border-radius: 999px;
  background: var(--ok, #2f855a); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.versao-nova .versao-depois {
  padding: 0 6px; background: transparent; color: var(--text-muted); font-size: 17px; font-weight: 400;
}

/* Barra do topo SEM a logo (Comercial e Financeiro). A logo saiu porque nestas duas telas ela só
   repetia o que a Home já diz e empurrava o título da página pra baixo — e o "← Home" ao lado já é
   o caminho de volta. Sem ela, `space-between` jogaria os botões pra esquerda: aqui eles ficam à
   direita, e a barra encolhe pra o título subir. */
.topbar--sem-logo { justify-content: flex-end; padding-top: 8px; padding-bottom: 8px; }
.topbar--sem-logo + .finance-page { padding-top: 10px; }

/* ---- BOLETO DO PERÍODO (aba Relatórios) ---- */
/* A cor do cartão do mês responde "e a cobrança?" sem abrir nada. Só a BORDA ESQUERDA é pintada:
   preencher o cartão inteiro brigaria com o valor, que é o dado principal ali. */
.rel-mes.is-pago { border-left: 3px solid var(--ok, #2f855a); }
.rel-mes.is-naopago { border-left: 3px solid var(--bad, #c53030); }
.rel-mes.is-aberto { border-left: 3px solid var(--warn, #b7791f); }
.rel-mes-selo { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; }
.rel-mes.is-pago .rel-mes-selo { color: var(--ok, #2f855a); }
.rel-mes.is-naopago .rel-mes-selo { color: var(--bad, #c53030); }
.rel-mes.is-aberto .rel-mes-selo { color: var(--warn, #b7791f); }

.rel-bol {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0; padding: 12px 14px;
  border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel);
}
.rel-bol-topo { display: flex; align-items: center; gap: 12px; }
.rel-bol-tit { font-size: 12.5px; font-weight: 700; color: var(--text); }
.rel-bol-selo {
  padding: 2px 10px; border-radius: 999px; border: 1px solid var(--panel-border);
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.rel-bol-selo.is-pago { background: var(--ok, #2f855a); border-color: var(--ok, #2f855a); color: #fff; }
.rel-bol-selo.is-naopago { color: var(--bad, #c53030); border-color: var(--bad, #c53030); }
.rel-bol-selo.is-duvida { color: var(--warn, #b7791f); border-color: var(--warn, #b7791f); }
.rel-bol-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rel-bol-link {
  flex: 1 1 320px; min-width: 0; padding: 8px 11px;
  border: 1px solid var(--panel-border); border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
}
.rel-bol-link:focus { outline: none; border-color: var(--ok, #2f855a); }
.rel-bol-btn {
  padding: 8px 16px; border: 0; border-radius: 9px;
  background: var(--ok, #2f855a); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.rel-bol-btn:disabled { opacity: .6; cursor: default; }
.rel-bol-tirar {
  padding: 8px 10px; border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.rel-bol-tirar:hover { color: var(--text); }
.rel-bol-det, .rel-bol-quando { font-size: 11.5px; color: var(--text-faint); }
.rel-bol-abrir { font-size: 11.5px; color: var(--text-muted); }

/* O "Ao vivo" abre sem lista: a base de clientes só aparece quando alguém procura por um nome. */
.live-vazio { padding: 34px 4px; }
.live-vazio-tit { margin: 0; font-size: 13.5px; color: var(--text); }
.live-vazio-sub { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.live-corte { margin-left: 6px; color: var(--warn, #b7791f); }

/* Gaveta das faturas CANCELADAS, no rodapé da caixa do cliente. Fechada por padrão: cancelada não é
   cobrança de ninguém, e num cliente antigo elas são a maioria das linhas — abertas, empurram pra
   baixo justamente o que alguém precisa olhar. */
.live-canc { margin-top: 6px; }
.live-canc-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; border: 1px dashed var(--panel-border); border-radius: 10px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.live-canc-btn:hover { color: var(--text); border-color: var(--text-faint); }
.live-canc-btn i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-faint); }
.live-canc-chev { display: inline-block; transition: transform .15s ease; font-size: 10px; }
.live-canc.is-open > .live-canc-btn { margin-bottom: 6px; }
.live-canc.is-open .live-canc-chev { transform: rotate(180deg); }

/* Nome do cliente no "Ao vivo" vira o caminho pra página dele. Sublinhado pontilhado: diz que é
   clicável sem virar um link azul no meio de uma barra que já é toda clicável. */
.live-cli-link {
  padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted var(--text-faint); text-underline-offset: 3px;
}
.live-cli-link:hover { text-decoration-color: currentColor; }

/* Etiqueta do setor na linha do tempo: quem escreveu o recado, a venda ou a cobrança. */
.obs-setor {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--panel-border);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.obs-setor--comercial { color: var(--ok, #2f855a); border-color: color-mix(in srgb, var(--ok, #2f855a) 45%, transparent); }
.obs-setor--financeiro { color: var(--warn, #b7791f); border-color: color-mix(in srgb, var(--warn, #b7791f) 45%, transparent); }

/* A escada do Rocha. Mostrada inteira de propósito: ela é invertida (menos venda, mais porcentagem),
   e sem a tabela à vista o número de uma linha parece erro. */
.ger-escada {
  display: flex; flex-direction: column; gap: 8px;
  margin: 16px 0 18px; padding: 14px 16px;
  border: 1px solid var(--panel-border); border-radius: 14px;
}
.ger-escada-rot { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ger-escada-passos { display: flex; flex-wrap: wrap; gap: 8px; }
.ger-escada-passo {
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
  padding: 8px 12px; border: 1px solid var(--panel-border); border-radius: 10px;
}
.ger-escada-passo b { font-size: 16px; font-weight: 800; color: var(--text); }
.ger-escada-passo > span { font-size: 11px; color: var(--text-faint); }
.ger-escada-pe { font-size: 11.5px; color: var(--text-faint); }

/* O TÍTULO da tela é o caminho de volta pro menu. Herda tudo do <h2> — quem lê vê o mesmo título de
   sempre; quem passa o mouse descobre que dá pra clicar. Sem cor de link: um título azul no topo
   pareceria um aviso, não um título. */
.panel-voltar {
  color: inherit; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .12s ease, opacity .12s ease;
}
.panel-voltar:hover { border-bottom-color: currentColor; }
.panel-voltar:focus-visible { outline: 2px solid var(--ok, #2f855a); outline-offset: 4px; border-radius: 4px; }

/* A SEGUNDA repartição da comissão do Rocha — o que ele recebe sobre a equipe — logo abaixo da
   comissão da carteira dele. Borda pontilhada pra separar as duas sem parecer outro cartão solto:
   são duas partes do mesmo pagamento. */
.com-comis--equipe { margin-top: 10px; border-top: 1px dashed var(--panel-border); padding-top: 12px; }
/* Link, não botão: mora no rodapé do bloco, junto do texto, e um botão ali brigaria com o valor. */
.com-comis-abrir {
  padding: 0; border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: inherit; text-decoration: underline; cursor: pointer;
}
.com-comis-abrir:hover { color: var(--text); }
/* A soma das duas partes: é o número que vai ser pago, e ele precisa saltar mais que as parcelas. */
.com-comis-somatorio {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--text-faint);
}
.com-comis-somatorio > span { font-size: 12px; font-weight: 700; color: var(--text); }
.com-comis-somatorio i { font-style: normal; font-weight: 400; color: var(--text-faint); }
.com-comis-somatorio b { font-size: 17px; font-weight: 800; color: var(--ok, #2f855a); white-space: nowrap; }

/* As DUAS repartições da comissão do Rocha, lado a lado. Empilhadas, o total a pagar caía pra fora
   da primeira tela — e é justamente o número que alguém abre a aba pra ver. */
.com-comis-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.com-comis-par > .com-comis { margin-top: 0; }
/* Lado a lado a separação é uma linha VERTICAL, não a de cima que servia pro empilhado. */
.com-comis-par > .com-comis--equipe {
  border-top: 0; padding-top: 0;
  border-left: 1px dashed var(--panel-border); padding-left: 16px;
}
/* Em duas colunas o espaço é metade: a conta aberta encolhe um pouco pra continuar em uma linha. */
.com-comis-par .com-comis-conta { font-size: 11.5px; }
.com-comis-par .com-comis-val { font-size: 21px; }
.com-comis-par .com-comis-somatorio b { font-size: 16px; }
/* Em duas colunas o somatório empilha: rótulo em cima, valor embaixo — lado a lado eles se
   espremeriam e o "carteira + equipe" quebraria em duas linhas soltas. */
.com-comis-par .com-comis-somatorio { flex-direction: column; align-items: flex-start; gap: 2px; }
.com-comis-par .com-comis-somatorio > span { display: flex; flex-direction: column; }
/* O nome do vendedor não empurra o valor pra fora: ele encolhe e, se precisar, corta com reticência. */
.com-comis--equipe .com-comis-conta > span { display: flex; align-items: baseline; gap: 6px; }
.com-comis--equipe .com-comis-conta > span i { margin-left: auto; white-space: nowrap; }
@media (max-width: 900px) {
  .com-comis-par { grid-template-columns: 1fr; }
  .com-comis-par > .com-comis--equipe {
    border-left: 0; padding-left: 0;
    border-top: 1px dashed var(--panel-border); margin-top: 10px; padding-top: 12px;
  }
}

/* O gerente de vendas ganha uma CAIXINHA VERDE em volta do nome. A borda de baixo continua sendo a
   marca de "aba aberta" — por isso a caixa fica só nos outros três lados, senão as duas se
   confundiriam. Passar o mouse ou abrir a aba preenche o fundo. */
.fin-tab.is-gerente {
  /* Verde SUAVE: a caixa é uma etiqueta de cargo, não um alerta. O verde puro do dashboard é o de
     "pago"/"no prazo" — no meio da barra ele gritava mais que a própria aba aberta. Misturado com o
     cinza do texto, marca sem disputar atenção. */
  color: color-mix(in srgb, var(--ok, #2f855a) 60%, var(--text-muted));
  border: 1px solid color-mix(in srgb, var(--ok, #2f855a) 32%, transparent);
  border-bottom-width: 2px;
  border-radius: 9px 9px 0 0;
  padding: 8px 14px;
}
.fin-tab.is-gerente:hover {
  color: color-mix(in srgb, var(--ok, #2f855a) 80%, var(--text-muted));
  background: color-mix(in srgb, var(--ok, #2f855a) 7%, transparent);
  border-color: color-mix(in srgb, var(--ok, #2f855a) 45%, transparent);
}
.fin-tab.is-gerente.is-active {
  background: color-mix(in srgb, var(--ok, #2f855a) 10%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ok, #2f855a) 55%, transparent);
}
/* O contador ao lado do nome acompanha a caixa, senão fica um cinza solto dentro do verde. */
.fin-tab.is-gerente .com-tab-n,
.fin-tab.is-gerente.is-active .com-tab-n {
  background: color-mix(in srgb, var(--ok, #2f855a) 12%, transparent);
  color: color-mix(in srgb, var(--ok, #2f855a) 60%, var(--text-muted));
}

/* "Vendida por" na linha da assinatura. Discreto por padrão: na esmagadora maioria das linhas quem
   vendeu É o dono do cliente, e um seletor chamativo em cada linha viraria ruído. Marcado, ganha cor
   — aí é informação que muda dinheiro e precisa saltar. */
.com-sub-vendida-sel {
  appearance: none; -webkit-appearance: none; field-sizing: content;
  max-width: 190px; padding: 1px 7px; border-radius: 999px;
  border: 1px dashed var(--panel-border); background: transparent; color: var(--text-faint);
  font: inherit; font-size: 10.5px; cursor: pointer;
}
.com-sub-vendida-sel:hover { color: var(--text-muted); border-color: var(--text-faint); }
.com-sub-vendida-sel.tem-marca {
  border-style: solid; border-color: color-mix(in srgb, var(--warn, #b7791f) 50%, transparent);
  color: var(--warn, #b7791f); font-weight: 600;
}
.com-sub-vendida-sel option { background: var(--panel-bg, #111); color: var(--text); font-weight: 400; }
.com-sub-vendida {
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn, #b7791f) 50%, transparent);
  font-size: 10.5px; font-weight: 600; color: var(--warn, #b7791f);
}

/* HISTÓRICO DE RECORRÊNCIA — os meses já fechados, dentro do card Financeiro geral. Separado por um
   fio porque é outra natureza de número: o de cima é o mês corrente, que ainda se mexe; este é
   recibo, e não muda mais. */
.com-hist {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--panel-border);
}
.com-hist-tit {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.com-hist-tit i { font-style: normal; font-size: 10px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--text-faint); }
.com-hist-vazio { font-size: 11.5px; color: var(--text-faint); }
.com-hist-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.com-hist-lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 12px; color: var(--text-muted); cursor: help;
}
.com-hist-lista li b { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.com-hist-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-top: 6px; border-top: 1px solid var(--panel-border);
  font-size: 11.5px; color: var(--text-muted);
}
.com-hist-total b { font-size: 13px; font-weight: 800; color: var(--ok, #2f855a); }

/* O número de canceladas/estornadas no bloco do card — cada chip mostra o seu, sozinho. */
.com-num-val--canc { color: var(--text-faint); }
.com-num-val--est { color: var(--warn, #b7791f); }
.com-num-linha--canc .com-num-rot::before,
.com-num-linha--est .com-num-rot::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; vertical-align: middle;
}
.com-num-linha--canc .com-num-rot::before { background: var(--text-faint); }
.com-num-linha--est .com-num-rot::before { background: var(--warn, #b7791f); }
/* A nota do chip agora fica colada no número que ela explica. */
.com-num-nota { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.45; color: var(--text-faint); max-width: 46ch; }

/* UNIFICAÇÃO DE FATURAS na página do cliente. Fechada por padrão: é uma correção ocasional, não algo
   que se consulta todo dia — aberta sempre, empurraria o histórico de observações pra baixo. */
.unif { margin: 14px 0; border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.unif-cab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.unif-cab:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.unif-cab-tit { font-size: 12.5px; font-weight: 700; }
.unif-cab-seta { margin-left: auto; color: var(--text-faint); font-size: 11px; }
.unif-selo {
  padding: 1px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--warn, #b7791f); border: 1px solid color-mix(in srgb, var(--warn, #b7791f) 50%, transparent);
}
.unif-ajuda { margin: 0 14px 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); max-width: 78ch; }
.unif-vazio { margin: 0 14px 12px; font-size: 12px; color: var(--text-faint); }
.unif-lista { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.unif-linha {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 9px;
}
.unif-linha.tem-marca { border-color: color-mix(in srgb, var(--warn, #b7791f) 50%, transparent); }
.unif-rot { font-size: 12px; color: var(--text); }
.unif-acoes { margin-left: auto; display: flex; gap: 12px; font-size: 11.5px; color: var(--text-muted); }
.unif-acoes label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }

/* CADASTRO DE OBSERVAÇÃO FINANCEIRA. Fechado por padrão: é registro de correção, não o caminho
   normal — quem só quer deixar um recado usa o campo de texto logo abaixo. */
.of { margin: 14px 0; border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.of-cab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.of-cab:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.of-cab-tit { font-size: 12.5px; font-weight: 700; }
.of-cab-seta { margin-left: auto; color: var(--text-faint); font-size: 11px; }
/* Uma coluna: os campos aparecem e somem conforme a ação, e em duas colunas eles pulariam de lugar
   a cada escolha. */
.of-corpo { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 12px; max-width: 560px; }
.of-campo { display: flex; flex-direction: column; gap: 4px; }
.of-campo > span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.of-campo input, .of-campo select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--panel-border); border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px;
}
.of-campo input:focus, .of-campo select:focus { outline: none; border-color: var(--ok, #2f855a); }
.of-campo select option { background: var(--panel-bg, #111); color: var(--text); }
.of-pe { display: flex; align-items: center; gap: 12px; padding: 0 14px 12px; }
.of-erro { margin-right: auto; font-size: 12px; color: var(--bad, #c53030); }
.of-salvar {
  padding: 8px 20px; border: 0; border-radius: 9px;
  background: var(--ok, #2f855a); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.of-salvar:disabled { opacity: .5; cursor: default; }
.of-nota { margin: 0 14px 12px; font-size: 11px; line-height: 1.5; color: var(--text-faint); max-width: 70ch; }
/* O registro estruturado ganha uma segunda etiqueta na linha do tempo: ele não é um recado, é um
   apontamento que mexe (ou pode mexer) no cálculo. */
.obs-setor--ficha { color: var(--text-faint); }

/* LINHA DO TEMPO — registro lançado não se altera; o que existe é retificar. */
.obs-item { position: relative; }
.obs-item.is-retificada { opacity: .55; }
.obs-item.is-retificada .com-obs-texto { text-decoration: line-through; text-decoration-thickness: 1px; }
.obs-tag {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--panel-border); font-size: 10px; color: var(--text-faint);
}
.obs-tag--velha { border-color: color-mix(in srgb, var(--warn, #b7791f) 45%, transparent); color: var(--warn, #b7791f); }
.obs-acao { position: absolute; right: 0; top: 2px; }
.obs-dots {
  width: 26px; height: 22px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-muted);
  font-size: 13px; line-height: 1;
}
.obs-dots:hover { color: var(--text); border-color: var(--text-faint); }
.obs-menu {
  position: absolute; right: 0; top: 100%; z-index: 30; padding: 4px;
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--panel-bg, #111); box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.obs-menu button {
  display: block; width: 100%; padding: 7px 14px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.obs-menu button:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
/* Enquanto se corrige, o campo muda de cara — senão dá pra achar que está escrevendo uma nova. */
.com-obs-nova.is-retificando input { border-color: color-mix(in srgb, var(--warn, #b7791f) 60%, transparent); }
.obs-cancelar {
  border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer;
}

/* INADIMPLENTES DO VENDEDOR — a contagem dos 5 dias úteis é o dado principal da linha, então ela
   ganha cor própria: verde enquanto sobra tempo, amarelo no fim, vermelho depois de passar. */
.iv-prazo {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--panel-border); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.iv-prazo.is-ok { color: var(--ok, #2f855a); border-color: color-mix(in srgb, var(--ok, #2f855a) 45%, transparent); }
.iv-prazo.is-quase { color: var(--warn, #b7791f); border-color: color-mix(in srgb, var(--warn, #b7791f) 55%, transparent); }
.iv-prazo.is-hoje {
  color: #fff; background: var(--warn, #b7791f); border-color: var(--warn, #b7791f);
}
.iv-prazo.is-fora { color: var(--bad, #c53030); border-color: color-mix(in srgb, var(--bad, #c53030) 45%, transparent); }
.iv-marca {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--panel-border); font-size: 10px; color: var(--text-faint);
}

/* Selo na linha de assinatura cancelada: diz que o financeiro registrou aquele cancelamento (ou que
   só existe o registro, e a plataforma ainda não marcou). É a ponte entre o relatório e as
   observações — ver relatorioVendedor.js. */
.rel-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  background: rgba(34, 160, 96, 0.14);
  color: #1c8a52;
  border: 1px solid rgba(34, 160, 96, 0.3);
}
.rel-selo--nota {
  background: rgba(214, 158, 46, 0.16);
  color: #a06a10;
  border-color: rgba(214, 158, 46, 0.34);
}

/* "RESOLVIDO PELO VENDEDOR" na aba de inadimplentes do vendedor.
   A seleção é a palavra da pessoa; o selo ao lado é o que a página do boleto disse. As duas coisas
   têm peso visual diferente de propósito — ver inadimplenciaResolvida.js. */
.iv-res {
  flex: 0 0 auto;
  max-width: 190px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.iv-res.is-marcada { border-color: rgba(34, 160, 96, 0.5); font-weight: 600; }
.iv-res:disabled { opacity: 0.6; cursor: progress; }

.iv-conf {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.iv-conf.is-ok { background: rgba(34, 160, 96, 0.14); color: #1c8a52; border: 1px solid rgba(34, 160, 96, 0.3); }
.iv-conf.is-nao { background: rgba(214, 69, 69, 0.13); color: #b23b3b; border: 1px solid rgba(214, 69, 69, 0.3); }
.iv-conf.is-duvida { background: rgba(214, 158, 46, 0.16); color: #a06a10; border: 1px solid rgba(214, 158, 46, 0.34); }

.iv-reconf {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent, #2f6feb);
  text-decoration: underline;
  cursor: pointer;
}
.iv-reconf:disabled { opacity: 0.6; cursor: progress; text-decoration: none; }

/* A cobrança assina na mesma linha do tempo do comercial e do financeiro — ver faturaSituacao.js. */
.obs-setor--cobranca { color: var(--fin-crit, #b23b3b); border-color: color-mix(in srgb, var(--fin-crit, #b23b3b) 45%, transparent); }




/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CASCO DO APP — o mesmo desenho da Implantação, agora no Financeiro e no Comercial.
   Barra lateral fixa à esquerda com a navegação, faixa de topo com a trilha e as ações, conteúdo
   embaixo. A diferença para a Implantação é a largura da lateral: lá são só ícones, aqui os nomes
   das abas ficam escritos (pedido do Leonardo em 29/08/2026).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
.app-body { margin: 0; }
/* O casco ocupa a tela inteira e QUEM ROLA É O CONTEÚDO, não a página. Isso mantém a coluna da
   esquerda e a faixa de ações sempre no lugar, e — o que importava aqui — faz as barras que grudam
   no topo (a busca do "Ao vivo", por exemplo) grudarem logo abaixo da faixa de ações, em vez de
   nascerem empurradas pra baixo pelo próprio deslocamento. */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.app-side {
  width: 208px; flex: 0 0 208px;
  background: var(--panel); border-right: 1px solid var(--panel-border);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px; height: 100%;
}
.app-side-marca {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 4px; margin-bottom: 16px;
  color: var(--text); text-decoration: none;
}
.app-side-logo {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
}
.app-side-logo svg { width: 19px; height: 19px; }
.app-side-nome { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

/* A navegação rola sozinha quando a lista é longa (o comercial tem uma aba por vendedor), sem
   arrastar junto a marca em cima nem o link do pé. */
.app-side-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  margin: 0; border: 0; overflow-y: auto; min-height: 0;
}
/* As abas continuam sendo `.fin-tab` porque é por essa classe que o JS marca a ativa — o que muda
   aqui é só a aparência: item de coluna em vez de aba de linha. */
.app-side-nav .fin-tab {
  width: 100%; justify-content: flex-start; text-align: left;
  padding: 8px 11px; margin: 0;
  border: 0; border-radius: 9px;
  font-size: 13.5px; font-weight: 500;
}
.app-side-nav .fin-tab:hover { background: var(--panel-2); color: var(--text); }
.app-side-nav .fin-tab.is-active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
/* O número da aba (quantos clientes, quantos setups) encosta na direita, longe do nome. */
.app-side-nav .com-tab-n { margin-left: auto; }
/* Dentro de um vendedor a barra troca de conteúdo: o "← Vendedores" e o nome de quem está aberto
   viram o cabeçalho da coluna, e as telas dele ficam embaixo. */
.app-side-nav .com-tab-voltar { margin-bottom: 8px; }
.app-side-nav .com-tab-quem {
  display: block; padding: 4px 11px 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint);
}
.app-side-pe {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 9px;
  color: var(--text-faint); text-decoration: none; font-size: 13px;
}
.app-side-pe svg { width: 17px; height: 17px; }
.app-side-pe:hover { background: var(--panel-2); color: var(--text); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.app-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--panel-border);
  background: var(--panel); z-index: 40; flex-wrap: wrap; flex: 0 0 auto;
}
.app-top-right { display: flex; align-items: center; gap: 8px; }
/* Sem a trilha, o topo guarda só as ações — encostadas à direita. */
.app-top--so-acoes { justify-content: flex-end; }
.app-top-meta { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.app-icone {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--panel-border);
  background: var(--panel-2); color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
}
.app-icone svg { width: 17px; height: 17px; }
.app-icone:hover { color: var(--text); border-color: var(--panel-border-strong); }

/* O conteúdo herda o respiro que a página já tinha; o cap de largura continua no .finance-panel. */
.app-conteudo.finance-page { padding: 0 24px 48px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* O respiro de cima fica DENTRO do que rola, e não como padding da área de rolagem: assim as barras
   que grudam no topo encostam na faixa de ações, sem uma frestinha por onde as linhas apareceriam. */
.app-conteudo .finance-panel { padding-top: 20px; }

/* Tela estreita: a lateral vira uma faixa em cima, que é o desenho que cabe. */
@media (max-width: 900px) {
  .app-shell { display: block; height: auto; overflow: visible; }
  .app-conteudo.finance-page { overflow: visible; }
  .app-side {
    width: auto; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 10px;
    border-right: 0; border-bottom: 1px solid var(--panel-border);
    padding: 10px 14px;
  }
  .app-side-marca { margin-bottom: 0; }
  .app-side-nav { flex-direction: row; overflow-x: auto; }
  .app-side-nav .fin-tab { width: auto; }
  .app-side-pe { margin-top: 0; margin-left: auto; }
  .app-conteudo.finance-page { padding: 16px; }
}

/* O CONTEÚDO DE TODA ABA COMEÇA NA MESMA LINHA — a margem de cima do conteúdo, e nada além dela.
   Cada aba foi escrita em época diferente e algumas traziam um respiro próprio no primeiro bloco
   (a de Relatórios, 18px), então trocar de aba fazia o conteúdo pular pra baixo e voltar. O respiro
   quem dá é o contêiner. */
.app-conteudo .finance-panel > div > :first-child { margin-top: 0; }
/* Coluna de verdade em vez de blocos soltos: as abas escondidas ficam entre quebras de linha no
   HTML, e esse espaço em branco empurrava a aba visível 4px pra baixo. Num contêiner flex ele nem
   existe. */
.app-conteudo .finance-panel { display: flex; flex-direction: column; }

/* ALINHAMENTO DO TOPO DO CONTEÚDO — as abas tinham que começar todas na mesma linha, e não
   começavam: cada tela trazia a própria margem de cima, herdada de quando havia um título e uma
   barra de abas acima delas. "Ao vivo" e "Relatórios" eram as mais fora do lugar.

   1. A primeira coisa de cada aba não carrega margem própria: quem dá o respiro é o padding do
      conteúdo, uma vez só, igual para todas. */
.app-conteudo .finance-panel > div > *:first-child { margin-top: 0; }

/* 2. O contêiner do conteúdo herdava `overflow: hidden` do `.panel`, e era ISSO que desalinhava o
      "Ao vivo": uma barra `sticky` dentro de uma caixa que não rola gruda na caixa, não na tela, e
      nascia empurrada pra baixo pelo próprio deslocamento. Sem o recorte, ela volta a nascer no
      lugar e passa a grudar embaixo da faixa de ações ao rolar. */
.app-conteudo .finance-panel { overflow: visible; }

/* 3. As barras que grudam no topo grudavam a 57px — a altura da barra ANTIGA da página, que não
      existe mais. Agora zero, porque quem rola é a coluna do conteúdo: o topo dela já é logo abaixo
      da faixa de ações. */
.app-conteudo .live-toolbar,
.app-conteudo .inad-toolbar,
.app-conteudo .rel-toolbar { top: 0px; }

/* A VARIAÇÃO em relação ao mês passado, embaixo do número do cartão. Fica menor e mais apagada que o
   rótulo de propósito: é contexto do número, não outro número. */
.inad-kpi-d {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.inad-kpi-d em { font-style: normal; font-weight: 400; opacity: 0.75; }
.inad-kpi-d.is-bom { color: #1c8a52; }
.inad-kpi-d.is-ruim { color: #b23b3b; }

/* Busca da prospecção: mesma caixa da busca da carteira, ocupando o espaço entre o botão de cadastro
   e a contagem. A lista inteira do vendedor já está no navegador — filtrar aqui é instantâneo. */
.prosp-busca { flex: 1 1 260px; max-width: 420px; }
.prosp-topo .prosp-conta, .prosp-topo .prosp-pendente { margin-left: auto; }

/* Faixa que separa o "agora" (KPIs e previsão) do que é retrospectiva, no Painel do financeiro.
   Daí pra baixo vêm os gráficos por mês e os cartões que antes só existiam na aba Histórico. */
.fin-sec-tit {
  margin: 26px 2px 12px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Os cartões do histórico moram dentro da grade do Painel, e não numa grade própria: `display:
   contents` faz o contêiner sumir do layout e os cartões virarem itens da MESMA grade. Sem isso eles
   ficavam colados na fileira de cima — o espaçamento é do grid, e entre dois grids vizinhos não há
   nenhum. */
#painel-hist, #painel-hist > .fin-charts { display: contents; }

/* CARTÃO "ÚLTIMAS ALTERAÇÕES FINANCEIRAS" — no topo do "Ao vivo", acima da busca de clientes.
   Fecha e abre porque nem todo dia se quer olhar pra ele, e ocupando a largura toda ele empurraria
   o resto da tela pra baixo sem ser pedido. */
.reg-vazio { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.reg-lista { list-style: none; margin: 0; padding: 0; }
.reg-item {
  display: grid;
  grid-template-columns: 96px minmax(120px, 200px) 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--panel-border);
  font-size: 12.5px;
}
.reg-item:first-child { border-top: 0; }
.reg-item.is-velho { opacity: 0.55; }
.reg-quando { color: var(--text-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.reg-cli {
  border: 0; background: none; padding: 0; font: inherit; text-align: left;
  color: var(--text); font-weight: 600; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-cli:hover { text-decoration: underline; }
.reg-texto { color: var(--text-muted); }
.reg-quem { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 820px) {
  .reg-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Aba REGISTROS — tela filha do "Ao vivo", como as telas de um vendedor no Comercial. */
.reg-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 2px 14px; }
.reg-tit { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.reg-sub { margin: 0; max-width: 72ch; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* DENTRO de uma seção: o "voltar" em cima, o nome da seção como cabeçalho e as telas dela em baixo.
   Mesmo desenho da carteira de um vendedor no Comercial. */
.app-side-nav .app-side-voltar {
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 4px;
}
/* `display:block` vence o [hidden] da folha padrão do navegador — a mesma armadilha já documentada
   em .fin-tabs[hidden] aqui em cima. Sem esta linha o rótulo da seção fica na tela pra sempre. */
.app-side-secao[hidden] { display: none; }
.app-side-secao {
  display: block;
  padding: 4px 11px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint);
}
.app-side-nav .fin-tab--sub { font-size: 13.5px; }

/* ══════════════════════════════════════════════════════ CS — ESTEIRA DE CLIENTES
   Colunas lado a lado, uma por etapa. A coluna é uma fila de trabalho: o mais atrasado fica no topo,
   e o vermelho diz o que já devia ter sido feito.

   Quantas colunas são vem do JS, em `--cs-colunas`: o CS tem seis (a caixa de espera mais as cinco
   da cadência) e a cobrança tem cinco. Estava fixo em cinco, e por isso o D+28 caía sozinho numa
   segunda fileira — a esteira lia como se fossem dois quadros. */
.cs-esteira {
  display: grid;
  grid-template-columns: repeat(var(--cs-colunas, 5), minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.cs-col {
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px 10px;
  /* Alta o bastante pra caber uma fila de trabalho de verdade sem a coluna virar um retângulo
     espremido — e pra a coluna vazia não parecer erro de desenho ao lado da cheia. */
  min-height: 440px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.cs-col.is-alvo { border-color: var(--accent); background: var(--accent-soft); }
.cs-col-cab { display: flex; align-items: center; gap: 8px; }
.cs-col-rot { font-size: 14px; font-weight: 700; color: var(--text); }
.cs-col-n {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--panel-border);
  font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: center;
}
.cs-col-atraso {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: #b23b3b; white-space: nowrap;
}
.cs-col-sub { margin: 2px 0 10px; font-size: 10.5px; color: var(--text-faint); }
.cs-col-corpo { display: flex; flex-direction: column; gap: 8px; }
.cs-col-vazio { margin: 6px 0; font-size: 11.5px; color: var(--text-faint); font-style: italic; }

.cs-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: grab;
}
.cs-card.is-arrastando { opacity: 0.4; }
.cs-card.is-atrasado { border-left-color: #c53030; }
.cs-card.is-hoje { border-left-color: #d69e2e; }
.cs-card-nome {
  margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-card-meta { margin: 0 0 6px; font-size: 10.5px; color: var(--text-faint); }
.cs-marca { color: #a06a10; font-weight: 600; }
.cs-prazo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.cs-prazo.is-atrasado { background: rgba(214, 69, 69, 0.13); color: #b23b3b; }
.cs-prazo.is-hoje { background: rgba(214, 158, 46, 0.16); color: #a06a10; }
.cs-prazo.is-ok { background: rgba(127, 127, 127, 0.12); color: var(--text-muted); }
.cs-card-pe { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cs-card-b {
  flex: 1; border: 1px solid var(--panel-border); background: var(--panel-2);
  border-radius: 7px; padding: 4px 6px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
}
.cs-card-b:hover { color: var(--text); border-color: var(--panel-border-strong); }
.cs-card-x {
  border: 0; background: none; color: var(--text-faint);
  font-size: 15px; line-height: 1; padding: 2px 5px; cursor: pointer;
}
.cs-card-x:hover { color: #b23b3b; }

/* Adicionar cliente: a busca vai ao servidor e os achados viram botões. */
.cs-add { position: relative; margin: 0 2px 12px; }
.cs-add-busca { width: 100%; max-width: 560px; }
.cs-erro { margin: 6px 0 0; font-size: 12px; color: #b23b3b; }
.cs-achados {
  list-style: none; margin: 6px 0 0; padding: 6px; max-width: 560px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
}
.cs-achados li { list-style: none; }
.cs-achados button {
  width: 100%; display: flex; align-items: baseline; gap: 10px;
  border: 0; background: none; padding: 7px 8px; border-radius: 7px;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
}
.cs-achados button:hover { background: var(--panel-2); }
.cs-achados button span { font-size: 11px; color: var(--text-faint); }
.cs-achados-vazio { margin: 6px 0 0; font-size: 12px; color: var(--text-faint); }

@media (max-width: 1100px) {
  .cs-esteira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pé da caixa do cliente na fila de inadimplentes: a ponte para a esteira do CS. */
.inad-pe { display: flex; justify-content: flex-end; padding: 8px 4px 2px; }
.inad-cs { font-size: 12px; }
/* "Atender" — o botão que assume a cobrança do cliente e o joga na esteira. É a ação principal da
   tela de triagem, então tem peso de botão de verdade, não de chip. */
.inad-atender {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.inad-atender:hover { filter: brightness(1.08); }
.inad-atender:disabled { opacity: 0.65; cursor: progress; }
/* O que já foi marcado antes continua visível na linha, agora só como texto. */
.inad-marcado { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* TELA DE UMA ABA SÓ (o CS): a lateral encolhe e o conteúdo ganha o espaço. O quadro tem seis
   colunas e é ele que precisa de largura — não um menu com um item. Os nomes continuam escritos. */
.app-side--estreita { width: 148px; flex: 0 0 148px; padding: 16px 8px; }
.app-side--estreita .app-side-marca { gap: 8px; margin-bottom: 12px; }
.app-side--estreita .app-side-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; }
.app-side--estreita .app-side-logo svg { width: 16px; height: 16px; }
.app-side--estreita .app-side-nome { font-size: 13px; }
.app-side--estreita .app-side-nav .fin-tab { padding: 7px 9px; font-size: 13px; }
.app-side--estreita .app-side-pe { padding: 8px 9px; font-size: 12.5px; }

/* Conteúdo mais largo: sobra dos 24px de respiro que as outras telas usam. */
.app-conteudo--largo.finance-page { padding-left: 14px; padding-right: 14px; }
.app-conteudo--largo .finance-panel { max-width: none; }

/* TRÊS PONTINHOS no cartão da esteira do CS: o menu do cartão. Classe própria (e não a do comercial)
   porque lá o handler já para a propagação do clique — reaproveitar a classe faria um dos dois
   deixar de funcionar. */
.cs-dots-wrap { position: relative; display: inline-flex; }
.cs-dots {
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
  color: var(--text-faint);
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.cs-dots:hover { color: var(--text); border-color: var(--panel-border-strong); }
.cs-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}
.cs-menu button {
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: 12.5px; text-align: left;
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
}
.cs-menu button:hover { background: var(--panel-2); }

/* O formulário do registro, dentro do próprio cartão. */
.cs-reg { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--panel-border); }
.cs-reg-rot { margin: 0 0 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.04em; color: var(--text-faint); }
.cs-reg-txt {
  width: 100%; resize: vertical;
  padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--panel-border); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 12px;
}
.cs-reg-txt:focus { outline: none; border-color: var(--accent); }
.cs-reg-erro { margin: 5px 0 0; font-size: 11px; color: #b23b3b; }
.cs-reg-pe { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.cs-reg-cancelar { border: 0; background: none; color: var(--text-faint); font: inherit; font-size: 11.5px; cursor: pointer; }
.cs-reg-cancelar:hover { color: var(--text); }
.cs-reg-salvar {
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  border-radius: 7px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
/* A etiqueta do CS na linha do tempo. */
.obs-setor--cs { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* FICHA DO CLIENTE aberta por cima da esteira do CS: a linha do tempo inteira, de todos os setores.
   Painel por cima, e não dentro do cartão, porque a lista é longa e o cartão tem a largura de uma
   coluna — ler ali seria pior do que não ler. */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.62);
}
.cs-modal-caixa {
  width: min(720px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.cs-modal-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--panel-border);
}
.cs-modal-tit { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--text); }
.cs-modal-sub { margin: 0; max-width: 62ch; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.cs-modal-x {
  border: 0; background: none; color: var(--text-faint);
  font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.cs-modal-x:hover { color: var(--text); }
.cs-modal-corpo { padding: 12px 18px 18px; overflow-y: auto; }

.cs-hist-lista { list-style: none; margin: 0; padding: 0; }
.cs-hist-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 0; border-top: 1px solid var(--panel-border);
}
.cs-hist-item:first-child { border-top: 0; }
.cs-hist-item.is-velho { opacity: 0.5; }
.cs-hist-quando { font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cs-hist-texto { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.cs-hist-vazio { margin: 0; font-size: 12.5px; color: var(--text-faint); font-style: italic; }

/* ── STATUS DO CLIENTE (aba Status do CS) ──────────────────────────────────
   O status é a temperatura da relação: bom, atenção ou risco. Os três tons são os MESMOS do selo no
   cartão da esteira e dos botões do seletor, de propósito — quem aprendeu a cor num lugar já a
   reconhece no outro. */
.cs-st {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.cs-st--bom { color: var(--ok, #2e9c7d); }
.cs-st--atencao { color: var(--warn, #c79a2b); }
.cs-st--risco { color: var(--crit, #d2603a); }

.cs-stbox {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border, #2a3542);
  border-radius: 8px;
  background: var(--bg-soft, rgba(255, 255, 255, .03));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-stopts { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-stopt {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a3542);
  background: transparent;
  color: var(--text-soft, #9fb0c0);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.cs-stopt:hover { border-color: currentColor; }
.cs-stopt--bom:hover, .cs-stopt--bom.is-on { color: var(--ok, #2e9c7d); border-color: currentColor; }
.cs-stopt--atencao:hover, .cs-stopt--atencao.is-on { color: var(--warn, #c79a2b); border-color: currentColor; }
.cs-stopt--risco:hover, .cs-stopt--risco.is-on { color: var(--crit, #d2603a); border-color: currentColor; }
.cs-stopt.is-on { background: rgba(127, 127, 127, .12); }
.cs-st-txt {
  width: 100%;
  resize: vertical;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--border, #2a3542);
  background: var(--bg, #0f151c);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.cs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 14px; }
.cs-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a3542);
  background: transparent;
  color: var(--text-soft, #9fb0c0);
  font-size: 12px;
  cursor: pointer;
}
.cs-chip span { opacity: .65; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cs-chip:hover { color: inherit; }
.cs-chip.is-on { color: inherit; border-color: currentColor; background: rgba(127, 127, 127, .12); }

.cs-sttab .cs-stnota { max-width: 320px; white-space: normal; color: var(--text-soft, #9fb0c0); }
.cs-sttab .cs-stacao { white-space: nowrap; display: flex; gap: 6px; justify-content: flex-end; }
.cs-strow > td { padding: 0 0 12px; }

/* Quarto tom, só do eixo de relacionamento: "colaborativo" não é problema nem virtude — pintar de
   amarelo faria parecer alerta o que é normalidade. */
.cs-st--neutro { color: var(--text-soft, #9fb0c0); }
.cs-stopt--neutro:hover, .cs-stopt--neutro.is-on { color: var(--text, #dce6f0); border-color: currentColor; }
.cs-stopt b { font-variant-numeric: tabular-nums; opacity: .7; margin-right: 2px; }
.cs-stajuda { margin: 0; font-size: 12px; color: var(--text-soft, #9fb0c0); min-height: 1em; }
.cs-card .cs-st + .cs-st { margin-left: 5px; }

/* ── ABA RETENÇÃO (CS) ─────────────────────────────────────────────────────── */
.cs-mes { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cs-mes label { font-size: 12px; color: var(--text-soft, #9fb0c0); }
.cs-mes-sel {
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border, #2a3542);
  background: var(--bg, #0f151c); color: inherit; font: inherit; font-size: 13px;
}
.cs-pizzas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 16px 0; }
.cs-pzbox {
  border: 1px solid var(--border, #2a3542); border-radius: 10px; padding: 16px 18px;
  background: var(--bg-soft, rgba(255, 255, 255, .02));
}
.cs-pzbox h3 { margin: 0 0 2px; font-size: 15px; }
.cs-pz-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--text-soft, #9fb0c0); }
.cs-pz { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cs-pz svg { width: 140px; height: 140px; flex: none; }
.cs-pz-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1; }
.cs-pz-leg li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cs-pz-leg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cs-pz-leg span { flex: 1; color: var(--text-soft, #9fb0c0); }
.cs-pz-leg b { font-variant-numeric: tabular-nums; }
.cs-pz-leg em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-soft, #9fb0c0); width: 38px; text-align: right; }
.cs-pz-vazio { padding: 28px 0; text-align: center; color: var(--text-soft, #9fb0c0); font-size: 13px; }

/* ── ETIQUETA DO VENDEDOR ──────────────────────────────────────────────────
   Fundo cheio e sem borda, ao contrário dos selos de status, que são vazados. A diferença de forma
   é intencional: são duas informações distintas, e repetir a mesma forma faria o cartão virar uma
   fileira de pílulas iguais em que nada se destaca. */
.cs-vend {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(127, 143, 160, .16);
  color: var(--text-soft, #9fb0c0);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  font-family: inherit;
}
.cs-vend:hover { background: rgba(127, 143, 160, .3); color: inherit; }
.cs-vend--sem { background: transparent; color: var(--text-dim, #6b7b88); font-style: italic; font-weight: 500; }
.cs-vend--sem:hover { background: rgba(127, 143, 160, .16); }
.cs-vend--linha { margin: 0 0 0 8px; font-size: 10.5px; vertical-align: middle; }
.cs-chips--vend { margin-top: 0; margin-bottom: 10px; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   RELATÓRIO DE ATENDIMENTO  (relatorio.html + js/relatorio.js)
   Prefixo `rel-`. Cores dos gráficos em tokens PRÓPRIOS, e não no --accent do app: o token da marca
   é claro demais no tema escuro para virar área de tinta (fica fora da faixa de luminosidade que
   mantém a leitura confortável). Os dois pares abaixo passaram no validador de paleta em ambos os
   temas — separação para daltonismo, contraste contra o painel e faixa de luminosidade.
   Vermelho é STATUS (fora da meta) e nunca série: onde ele aparece, há sempre rótulo em texto ao
   lado, porque cor sozinha não pode ser a única a contar a história.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"] {
  --rel-serie: #12a596;
  --rel-alerta: #e85d54;
}

:root[data-theme="light"] {
  --rel-serie: #0d9488;
  --rel-alerta: #dc2626;
}

.rel-body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
}

/* ── topo ─────────────────────────────────────────────────────────────────────────────────────── */

.rel-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-border);
}

.rel-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.rel-top h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.rel-sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.rel-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rel-meta {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.rel-meta--carregando {
  color: var(--accent);
}

.rel-voltar,
.rel-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.rel-voltar svg,
.rel-icone svg {
  width: 18px;
  height: 18px;
}

.rel-voltar:hover,
.rel-icone:hover:not(:disabled) {
  background: var(--chip-bg-hover);
  color: var(--text);
  border-color: var(--panel-border-strong);
}

.rel-icone:disabled {
  opacity: 0.35;
  cursor: default;
}

.rel-icone--sm {
  width: 28px;
  height: 28px;
  font-size: 17px;
  line-height: 1;
}

/* ── filtros: uma linha só, acima do conteúdo ─────────────────────────────────────────────────── */

.rel-filtros {
  position: sticky;
  top: 63px;
  z-index: 19;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 12px 24px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--panel-border);
}

.rel-chips {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--chip-bg);
  border-radius: var(--radius-sm);
}

.rel-chips--linha {
  margin-bottom: 12px;
  background: none;
  padding: 0;
}

.rel-chip {
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.rel-chip:hover {
  color: var(--text);
}

.rel-chip.is-on {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.rel-chip--fantasma {
  background: none;
  border: 1px solid var(--panel-border);
  font-size: 12px;
  padding: 5px 12px;
}

.rel-chip--sm {
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--panel-border);
}

.rel-chip--sm.is-on {
  border-color: transparent;
}

.rel-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rel-nav-rot {
  min-width: 170px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.rel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}

.rel-toggle input {
  accent-color: var(--rel-serie);
  width: 15px;
  height: 15px;
}

/* ── conteúdo ─────────────────────────────────────────────────────────────────────────────────── */

.rel-main {
  padding: 20px 24px 60px;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rel-estado {
  padding: 48px 0;
  text-align: center;
  color: var(--text-muted);
}

.rel-estado--erro {
  color: var(--danger);
}

.rel-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}

.rel-card--aviso {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--panel-border));
  background: linear-gradient(0deg, var(--panel), var(--panel)) padding-box,
    var(--warn-bg) border-box;
}

.rel-card-top h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
}

.rel-card-top p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 88ch;
  line-height: 1.5;
}

.rel-card-top {
  margin-bottom: 18px;
}

/* ── KPIs ─────────────────────────────────────────────────────────────────────────────────────── */

.rel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.rel-kpi {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rel-kpi-rot {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.rel-kpi-val {
  font-size: 26px;
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.rel-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.rel-kpi--destaque {
  border-color: color-mix(in srgb, var(--rel-serie) 45%, var(--panel-border));
}

.rel-kpi--destaque .rel-kpi-val {
  color: var(--rel-serie);
}

.rel-kpi--ok .rel-kpi-val {
  color: var(--ok);
}

.rel-kpi--alerta .rel-kpi-val {
  color: var(--rel-alerta);
}

/* ── barras de volume ─────────────────────────────────────────────────────────────────────────── */

.rel-colunas {
  display: flex;
  align-items: flex-end;
  gap: 2px; /* respiro de 2px entre barras: sem ele duas barras altas viram um bloco só */
  height: 190px;
}

.rel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.rel-col-trilho {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Respiro no topo para o rótulo do maior degrau caber ACIMA da barra: escrito por dentro da área
     pintada, o número ficava ilegível sobre a cor cheia. */
  padding-top: 16px;
  border-bottom: 1px solid var(--panel-border);
}

.rel-col-barra {
  width: 100%;
  max-width: 34px;
  background: var(--rel-serie);
  border-radius: 4px 4px 0 0; /* ponta arredondada só no topo: a base fica ancorada na linha do zero */
  min-height: 2px;
  transition: opacity 0.15s;
}

.rel-col:hover .rel-col-barra {
  opacity: 0.78;
}

.rel-col-num {
  position: absolute;
  top: 0;
  font-size: 11px;
  font-weight: 620;
  color: var(--text-muted);
}

.rel-col-rot {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
}

.rel-colunas--densa .rel-col-rot {
  font-size: 10px;
}

/* ── linha do SLA ─────────────────────────────────────────────────────────────────────────────── */

.rel-linha {
  width: 100%;
  height: 170px;
  overflow: visible;
}

.rel-linha .rel-serie {
  stroke: var(--rel-serie);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rel-linha .rel-ponto {
  fill: var(--rel-serie);
  stroke: var(--panel);
  stroke-width: 2; /* anel da cor do fundo: ponto sobreposto continua legível */
}

.rel-linha .rel-ponto.is-fora {
  fill: var(--rel-alerta);
}

.rel-linha .rel-ponto:hover {
  r: 6;
}

.rel-meta-linha {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.rel-meta-rot {
  fill: var(--text-faint);
  font-size: 10px;
}

/* ── mapa de calor ────────────────────────────────────────────────────────────────────────────── */

.rel-mapa {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rel-mapa-linha {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rel-mapa-dia {
  width: 32px;
  flex: none;
  font-size: 11px;
  color: var(--text-faint);
}

.rel-cel {
  flex: 1;
  height: 20px;
  border-radius: 3px;
  background: var(--rel-serie);
  /* Rampa sequencial de UMA cor: a intensidade é o valor. Cinco degraus + o zero, que fica quase
     invisível de propósito — hora sem atendimento não deve competir por atenção. */
  opacity: 0.07;
}

.rel-cel--0 { opacity: 0.07; }
.rel-cel--1 { opacity: 0.22; }
.rel-cel--2 { opacity: 0.4; }
.rel-cel--3 { opacity: 0.58; }
.rel-cel--4 { opacity: 0.78; }
.rel-cel--5 { opacity: 1; }

.rel-legenda .rel-cel {
  flex: none;
  width: 22px;
  height: 12px;
}

.rel-mapa-horas {
  margin-top: 2px;
}

.rel-mapa-hora {
  flex: 1;
  font-size: 9.5px;
  color: var(--text-faint);
  text-align: center;
}

.rel-legenda {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-faint);
}

.rel-legenda span:last-child {
  margin-left: 4px;
}

/* ── tabelas ──────────────────────────────────────────────────────────────────────────────────── */

.rel-tabela-wrap {
  overflow-x: auto;
}

.rel-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rel-tabela th,
.rel-tabela td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}

.rel-tabela th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 600;
}

.rel-tabela .num {
  text-align: right;
}

.rel-tabela tbody tr:hover {
  background: var(--panel-2);
}

.rel-tabela td.is-alerta {
  color: var(--rel-alerta);
}

.rel-td-sub {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
}

.rel-quem {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rel-quem-nome {
  font-weight: 560;
}

.rel-quem-tel {
  font-size: 11px;
  color: var(--text-faint);
}

.rel-mini-trilho {
  margin-top: 5px;
  height: 4px;
  width: 190px;
  max-width: 100%;
  background: var(--chip-bg);
  border-radius: 3px;
  overflow: hidden;
}

.rel-mini-barra {
  height: 100%;
  background: var(--rel-serie);
  border-radius: 3px;
}

.rel-vazio,
.rel-nota {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

.rel-nota {
  margin-top: 10px;
  color: var(--text-faint);
}

.rel-nota--rodape {
  padding: 4px 4px 0;
  max-width: 110ch;
}

/* ── dica (tooltip) ───────────────────────────────────────────────────────────────────────────── */

.rel-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  max-width: 320px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .rel-top,
  .rel-filtros,
  .rel-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .rel-filtros {
    top: 61px;
  }

  .rel-nav-rot {
    min-width: 120px;
    font-size: 13px;
  }
}

/* Eixo do zero e ponto cortado pelo topo da escala do gráfico de SLA (ver graficoSla em
   js/relatorio.js): o extremo continua visível na borda, com o valor real na dica. */
.rel-linha .rel-eixo {
  stroke: var(--panel-border);
  stroke-width: 1;
}

.rel-linha .rel-ponto.is-acima {
  stroke: var(--rel-alerta);
  stroke-width: 2.5;
}

/* Ações de coleta no rodapé do relatório (só admin as vê; o POST é requireAdmin no servidor). */
.rel-acoes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}

.rel-coleta-aviso {
  font-size: 11.5px;
  color: var(--accent);
}

/* Poucos degraus (uma semana, um ano): barra mais larga, senão sobra um vazio que parece dado
   faltando. Com muitos degraus o teto de 34px do padrão continua valendo. */
.rel-colunas--larga .rel-col-barra {
  max-width: 56px;
}

/* Rótulo do topo da escala à DIREITA: à esquerda ele encosta no ponto cortado quando o extremo cai
   nas primeiras horas do dia. */
.rel-linha .rel-meta-rot--fim {
  text-anchor: end;
}