@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=JetBrains+Mono:wght@400;700&display=swap');
:root {
  --navy: #0A0A0A;
  --navy-2: #1A1A1A;
  --gold: #B8632A;
  --gold-light: #E8A06F;
  --teal: #D17A3D;
  --bg: #F5F1EA;
  --card: #FFFFFF;
  --border: #E3E6EC;
  --text: #1A1A1A;
  --text-muted: #5B6472;
  --danger: #B3261E;
  --success: #1F7A4D;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.serif {
  font-family: "Georgia", "Iowan Old Style", serif;
}

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Login ---------- */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(184,99,42,.14), transparent 60%),
    var(--navy);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: 36px 32px 30px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.login-brand .mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  background: #0D0D0D;
  padding: 5px;
}

.login-brand .name {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.login-brand .sub {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: .3px;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--navy-2); }

.btn-primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  transition: background .15s;
}
.btn-primary:hover { background: var(--navy-2); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.login-error {
  background: #FCEBEA;
  color: var(--danger);
  border: 1px solid #F3C7C4;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}

.login-hint {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ---------- App shell ---------- */

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: stretch;
  padding: 0 20px;
  height: 58px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 22px;
  margin-right: 6px;
  border-right: 1px solid rgba(255,255,255,.14);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.topbar-brand .mark {
  width: 30px; height: 30px; object-fit: contain;
  border-radius: 6px;
  background: #0D0D0D;
  padding: 3px;
}

.topnav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
}

.topnav-item {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.72);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.topnav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.topnav-item.active {
  color: #fff;
  border-bottom-color: var(--gold);
  background: rgba(255,255,255,.05);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  white-space: nowrap;
}
.topbar-user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11.5px;
}
.topbar-user button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
}
.topbar-user button:hover { background: rgba(255,255,255,.1); }

.body-area { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 216px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 18px 12px;
}
.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  padding: 0 10px 10px;
}
.side-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.side-item:hover { background: var(--bg); }
.side-item.active { background: #F4E9DF; color: var(--navy-2); font-weight: 700; }

.content {
  flex: 1;
  padding: 26px 30px 60px;
  overflow-y: auto;
  min-width: 0;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 10px;
}
.page-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---------- Cards / KPIs ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}
.kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  font-family: "Georgia", serif;
}
.kpi-foot {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.card-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ---------- Tables ---------- */

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  padding: 9px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
table.data-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data-table tr:hover td { background: #FAFBFD; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}
.badge-green { background: #E5F4EA; color: var(--success); }
.badge-gold { background: #F0DFD1; color: #8B4A1F; }
.badge-gray { background: #EEF0F3; color: var(--text-muted); }
.badge-red { background: #FCEBEA; color: var(--danger); }
.badge-navy { background: #EFEFEF; color: var(--navy); }

/* ---------- Associados grid (mapa) ---------- */

.assoc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.assoc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  box-shadow: var(--shadow);
  cursor: default;
}
.assoc-avatar {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.assoc-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.assoc-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.5;
}

/* ---------- Empty / placeholder state ---------- */

.empty-state {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 46px 30px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state .icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #EEF0F3;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 20px;
}
.empty-state h3 {
  color: var(--text);
  font-size: 15px;
  margin: 0 0 8px;
}
.empty-state p {
  font-size: 13px;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.55;
}
.empty-state .tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 4px 11px;
  border-radius: 20px;
  background: #F0DFD1;
  color: #8B4A1F;
}

/* ---------- Funil (kanban simples) ---------- */

.funil-board {
  display: grid;
  gap: 12px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  overflow-x: auto;
  padding-bottom: 6px;
}
.funil-col {
  background: #F0F2F6;
  border-radius: var(--radius);
  padding: 10px;
  min-height: 160px;
}
.funil-col-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  padding: 4px 6px 10px;
  display: flex;
  justify-content: space-between;
}
.funil-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.funil-card .empresa { font-size: 13px; font-weight: 700; color: var(--text); }
.funil-card .contato { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.funil-card .valor { font-size: 12px; color: var(--teal); font-weight: 700; margin-top: 6px; }
.funil-card select {
  margin-top: 8px;
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
}

/* ---------- Forms ---------- */

.form-row { margin-bottom: 12px; }
.form-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
}
.btn-sm {
  padding: 7px 14px;
  border-radius: 7px;
  border: none;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.btn-sm:hover { background: var(--navy-2); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg); }

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar input, .toolbar select {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
}

.loading { color: var(--text-muted); font-size: 13px; padding: 20px 0; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .content { padding: 18px 16px 40px; }
  .topbar-brand .name-full { display: none; }
}
\n

/* ---------- Gráficos de barra (Expansão / CS) ---------- */

.chart-bars { display: flex; flex-direction: column; gap: 10px; }
.chart-row { display: flex; align-items: center; gap: 12px; }
.chart-label { width: 220px; font-size: 12.5px; color: var(--text-muted); flex: none; }
.chart-bar-wrap { flex: 1; background: var(--bg); border-radius: 8px; height: 22px; overflow: hidden; }
.chart-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 8px;
  transition: width .4s;
}
.chart-value { width: 34px; text-align: right; font-weight: 700; font-size: 13.5px; flex: none; }

/* ---------- Extras do kanban de funil ---------- */

.funil-card .tag-origem {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--navy-2);
  background: #F4E9DF;
  border-radius: 5px;
  padding: 2px 7px;
  margin-top: 6px;
}
.funil-card .motivo-perda {
  font-size: 11px;
  color: var(--danger);
  margin-top: 6px;
  font-style: italic;
}
.funil-card .btn-csc { margin-top: 8px; width: 100%; }
\n

.grid2-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grid2-admin { grid-template-columns: 1fr; } }


/* ==========================================================================
   Casca: marca clicavel, menu do usuario e assinatura
   (15/09/2026 — o "Início" saiu da barra e virou a marca; as configurações
   passaram para o menu do nome; a assinatura segue o padrão do VOX EDU)
   ========================================================================== */

button.topbar-brand {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,.14);
  color: inherit;
  cursor: pointer;
  transition: background .15s;
}
button.topbar-brand:hover { background: rgba(255,255,255,.07); }
button.topbar-brand.no-inicio .mark { box-shadow: 0 0 0 2px var(--gold); }

.topbar-user { position: relative; padding-left: 10px; }
.user-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  max-width: 260px;
}
.user-btn:hover { background: rgba(255,255,255,.08); }
.user-btn .quem { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-btn .quem b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.user-btn .quem i {
  font-style: normal;
  font-size: 10.5px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
}
.user-btn .seta { font-size: 10px; color: rgba(255,255,255,.6); }

.user-menu {
  position: absolute;
  top: 52px;
  right: 0;
  min-width: 238px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
  padding: 6px;
  z-index: 60;
}
.user-menu[hidden] { display: none; }
.user-menu .um-cab {
  padding: 9px 11px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-menu .um-cab b { font-size: 13px; color: var(--navy); }
.user-menu .um-cab span { font-size: 11.5px; color: var(--text-muted); }
.user-menu .um-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--text);
}
.user-menu .um-item:hover { background: var(--bg); }
.user-menu .um-item.sair { color: var(--danger); font-weight: 600; }
.user-menu .um-sep { height: 1px; background: var(--border); margin: 5px 4px; }

.sidebar { display: flex; flex-direction: column; }
.sidebar .sidebar-pe { margin-top: auto; padding: 14px 10px 2px; }

.vp-assinatura { line-height: 1.3; cursor: default; }
.vp-assinatura .sig-marca { display: flex; align-items: baseline; gap: 7px; }
.vp-assinatura .sig-marca .nome {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .18s;
}
.vp-assinatura .sig-marca .ver {
  font-size: 9.5px;
  color: var(--text-muted);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.vp-assinatura .sig-credito {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  opacity: .85;
}
.vp-assinatura .sig-credito b { font-weight: 600; }
.vp-assinatura:hover .sig-marca .nome,
.vp-assinatura:hover .sig-credito b { color: var(--gold); }

.app-rodape {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 12px 30px;
  flex-shrink: 0;
}
.vp-assinatura.compacta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vp-assinatura.compacta .sig-credito { margin-top: 0; }

/* ==========================================================================
   Inicio — boas-vindas, panorama pessoal, termometro e blocos por modulo
   ========================================================================== */

.ini-voce {
  background: linear-gradient(135deg, var(--navy) 0%, #241a12 100%);
  color: #fff;
  border-radius: 14px;
  padding: 24px 26px 20px;
  margin-bottom: 26px;
  box-shadow: var(--shadow);
}
.ini-voce-topo {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ini-voce .ola { margin: 0; font-size: 22px; font-weight: 500; }
.ini-voce .ola b { font-weight: 700; color: var(--gold-light); }
.ini-voce .sub { margin: 7px 0 0; font-size: 13.5px; color: rgba(255,255,255,.82); }
.ini-voce .onde { margin: 9px 0 0; font-size: 11.5px; color: rgba(255,255,255,.5); }

.ini-selo {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: right;
  min-width: 128px;
}
.ini-selo b { display: block; font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; }
.ini-selo span { font-size: 14px; font-weight: 700; }
.ini-selo.bom span { color: #7BD6A4; }
.ini-selo.atencao span { color: var(--gold-light); }
.ini-selo.ruim span { color: #FF9C93; }
.ini-selo.neutro span { color: rgba(255,255,255,.8); }

.ini-voce-listas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.ini-lista {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  padding: 12px 6px 8px;
}
.ini-lista .cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 10px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.ini-lista .cab .cont { font-size: 11px; font-weight: 500; text-transform: none; color: rgba(255,255,255,.5); }
.ini-lista .item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
}
.ini-lista .item:hover { background: rgba(255,255,255,.08); }
.ini-lista .item .n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ini-lista .item .n b {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ini-lista .item .n i { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.5); }
.ini-lista .item .d { font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; }
.ini-lista .nada { padding: 8px 10px 12px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.ini-lista .mais { padding: 6px 10px 4px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.ini-lista .mais .link {
  background: transparent; border: none; color: var(--gold-light);
  font-size: 11.5px; padding: 0; text-decoration: underline;
}

.farol-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #8A8A8A; }
.farol-ponto.bom { background: #3FAE74; }
.farol-ponto.atencao { background: var(--gold); }
.farol-ponto.ruim { background: #E3564C; }

.ini-atz { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.chip-atz {
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  padding: 6px 13px;
  color: #fff;
}
.chip-atz:hover { background: rgba(255,255,255,.14); }
.chip-atz b { font-size: 14px; }
.chip-atz span { font-size: 11.5px; color: rgba(255,255,255,.62); }
.chip-atz.pronto b { color: #7BD6A4; }
.chip-atz.em_andamento b { color: var(--gold-light); }
.chip-atz.a_fazer b { color: #8FC6E0; }
.chip-atz.com_voce b { color: #D3AEEA; }

.ini-secao { margin: 4px 0 14px; }
.ini-secao h3 { margin: 0; font-size: 15px; color: var(--navy); }
.ini-secao p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }

.ini-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.ini-indicadores.destaque { margin-bottom: 26px; }
.ini-ind {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  box-shadow: var(--shadow);
}
.ini-ind:hover:not(:disabled) { border-color: var(--gold); }
.ini-ind:disabled { cursor: default; }
.ini-ind .k { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.ini-ind .v { font-size: 23px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.ini-ind .d { font-size: 11px; color: var(--text-muted); }
.ini-ind .faixa { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.ini-ind.bom { border-left-color: var(--success); }
.ini-ind.bom .faixa { color: var(--success); }
.ini-ind.atencao { border-left-color: var(--gold); }
.ini-ind.atencao .faixa { color: #9A6A12; }
.ini-ind.ruim { border-left-color: var(--danger); }
.ini-ind.ruim .faixa { color: var(--danger); }

.ini-bloco { padding: 18px 20px; }
.ini-bloco-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.ini-bloco-cab .tit h3 { margin: 0; font-size: 15.5px; color: var(--navy); }
.ini-bloco-cab .tit span { font-size: 12.5px; color: var(--text-muted); }
.ini-bloco-cab .recado {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  max-width: 420px; text-align: right;
}
.ini-bloco-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 860px) {
  .ini-voce-listas { grid-template-columns: 1fr; }
  .ini-voce { padding: 20px 18px 16px; }
  .app-rodape { padding: 12px 16px; }
  .ini-bloco-cab .recado { text-align: left; }
}

/* ==========================================================================
   Atualizacoes do sistema
   ========================================================================== */

.atz-kpi { text-align: left; cursor: pointer; }
.atz-kpi.ativo { outline: 2px solid var(--gold); }

.atz-filtros { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.atz-filtros input { flex: 1 1 260px; }
.atz-filtros select { flex: 0 1 190px; }

.atz-tabela tbody tr.atz-linha { cursor: pointer; }
.atz-tabela tbody tr.atz-linha:hover { background: var(--bg); }
.atz-tabela tr.atz-linha.aberta { background: #FFF6EA; }
.atz-tabela .atz-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.atz-tabela .atz-resumo { color: var(--text-muted); font-size: 12.5px; }
.atz-origem { font-size: 10px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.atz-selo {
  display: inline-block; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 99px; padding: 3px 10px; white-space: nowrap;
}
.atz-detalhe-linha td { background: #FFFBF5; }
.atz-detalhe { padding: 6px 4px 12px; cursor: default; }
.atz-detalhe-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.atz-detalhe-topo h3 { margin: 0; font-size: 14.5px; color: var(--navy); }
.atz-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); }
.atz-meta .pill { background: var(--bg); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; }
.atz-texto { margin-top: 10px; font-size: 13px; line-height: 1.65; max-width: 860px; }
.atz-texto p { margin: 0 0 9px; }
.atz-texto code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.atz-fonte { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.atz-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }


/* ==========================================================================
   Painel CS — o giro do clube no recorte escolhido (16/09/2026)
   ========================================================================== */

.pc-tempo { padding: 12px 16px; }
.pc-tempo-linha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pc-rotulo { display: flex; flex-direction: column; line-height: 1.2; }
.pc-rotulo b { font-size: 13px; }
.pc-rotulo span { font-size: 11px; color: var(--text-muted); }

.pc-chips { display: flex; gap: 6px; background: var(--bg); padding: 4px; border-radius: 10px; }
.pc-chip {
  border: none; background: transparent; border-radius: 8px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.pc-chip:hover { color: var(--text); }
.pc-chip.on { background: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

.pc-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pc-seta {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; font-size: 16px; line-height: 1; color: var(--text);
}
.pc-seta:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pc-seta:disabled { opacity: .35; cursor: default; }
.pc-periodo { font-size: 14px; font-weight: 700; color: var(--navy); min-width: 190px; text-align: center; }
.pc-hoje {
  border: none; background: transparent; color: var(--gold);
  font-size: 12px; text-decoration: underline; padding: 4px 2px;
}

.pc-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.pc-kpi {
  background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--border);
  border-radius: 11px; padding: 13px 15px; box-shadow: var(--shadow);
}
.pc-kpi.bom { border-top-color: var(--success); }
.pc-kpi.atencao { border-top-color: var(--gold); }
.pc-kpi.ruim { border-top-color: var(--danger); }
.pc-kpi .k { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pc-kpi .v { font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.2; margin: 2px 0 4px; }
.pc-kpi .r { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pc-kpi .r .vs { font-size: 10px; color: var(--text-muted); }
.pc-kpi .d { font-size: 10.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.35; }

.pc-var { font-size: 11.5px; font-weight: 700; }
.pc-var.bom { color: var(--success); }
.pc-var.ruim { color: var(--danger); }
.pc-var.neutro { color: var(--text-muted); font-weight: 500; }

.pc-cab { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.pc-legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); }
.pc-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

.pc-svg { overflow-x: auto; margin-top: 12px; }
.pc-svg .pc-barra:hover rect:first-child { fill: rgba(0,0,0,.04); }

.pc-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pc-duas > .card { margin-bottom: 16px; }

.pc-rosca { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pc-perfil-lista { flex: 1 1 240px; display: flex; flex-direction: column; gap: 9px; }
.pc-perfil-item { display: flex; align-items: flex-start; gap: 9px; }
.pc-perfil-item .bolinha { width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; flex: none; }
.pc-perfil-item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-perfil-item .txt b { font-size: 12.5px; }
.pc-perfil-item .txt i { font-style: normal; font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }
.pc-perfil-item .val { text-align: right; display: flex; flex-direction: column; }
.pc-perfil-item .val b { font-size: 13px; }
.pc-perfil-item .val i { font-style: normal; font-size: 10.5px; color: var(--text-muted); }

.pc-giro-num { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 7px; }
.pc-giro-num b { font-size: 30px; color: var(--navy); line-height: 1; }
.pc-giro-num span { font-size: 12px; color: var(--text-muted); }
.pc-barra-giro { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.pc-barra-giro div { height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: 99px; }
.pc-giro-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin-top: 14px; }
.pc-giro-item { border-left: 3px solid var(--border); padding: 2px 0 2px 9px; display: flex; flex-direction: column; }
.pc-giro-item b { font-size: 17px; color: var(--navy); line-height: 1.2; }
.pc-giro-item span { font-size: 10.5px; color: var(--text-muted); }

.pc-rank { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.pc-rank-linha { display: flex; align-items: center; gap: 9px; }
.pc-rank-linha[data-ir] { cursor: pointer; }
.pc-rank-linha .pos {
  width: 19px; height: 19px; border-radius: 5px; background: var(--bg); flex: none;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.pc-rank-linha .corpo { flex: 1; min-width: 0; }
.pc-rank-linha .nome {
  font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pc-fora { font-style: normal; font-size: 10px; color: var(--text-muted); font-weight: 500; }
.pc-rank-linha .trilho { height: 6px; border-radius: 99px; background: var(--bg); margin-top: 4px; overflow: hidden; }
.pc-rank-linha .trilho div { height: 100%; border-radius: 99px; }
.pc-rank-linha .val { text-align: right; flex: none; display: flex; flex-direction: column; }
.pc-rank-linha .val b { font-size: 12.5px; }
.pc-rank-linha .val i { font-style: normal; font-size: 10px; color: var(--text-muted); }

.pc-franquias { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.pc-fr .nome { font-size: 12.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.pc-fr .nome span { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.pc-fr .barras { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; }
.pc-fr .b { height: 7px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.pc-fr .b div { height: 100%; border-radius: 99px; }
.pc-fr .vals { display: flex; justify-content: space-between; font-size: 11px; }

.pc-tag { display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }

.pc-trab { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.pc-trab-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px;
}
.pc-trab-item:hover { border-color: var(--gold); }
.pc-trab-item b { font-size: 20px; color: var(--navy); line-height: 1.1; }
.pc-trab-item span { font-size: 11px; color: var(--text-muted); }

.pc-vazio { font-size: 12.5px; color: var(--text-muted); padding: 14px 2px; }

@media (max-width: 900px) {
  .pc-duas { grid-template-columns: 1fr; }
  .pc-nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .pc-periodo { min-width: 0; }
}


/* ---------- Receita: o painel dentro do painel (16/09/2026) ---------- */

.pc-receita {
  background: linear-gradient(135deg, #0B3A2E 0%, #08251E 60%, #0D1F1A 100%);
  color: #fff; border-radius: 14px; padding: 22px 24px 18px;
  margin-bottom: 18px; box-shadow: var(--shadow);
}
.pc-rec-topo { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.pc-rec-principal { min-width: 260px; flex: 1 1 320px; }
.pc-rec-principal .rot {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.pc-rec-principal .val { font-size: 40px; font-weight: 700; line-height: 1.1; margin: 4px 0 6px; }
.pc-rec-principal .cmp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-rec-principal .cmp .vs { font-size: 11.5px; color: rgba(255,255,255,.55); }
.pc-rec-principal .nota { font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 8px; }
.pc-rec-principal .nota b { color: #7BD6A4; }
.pc-rec-principal .proj {
  display: inline-block; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.08); border-radius: 99px; padding: 5px 12px;
}
.pc-rec-principal .proj b { color: var(--gold-light); }
.pc-receita .pc-var.bom { color: #7BD6A4; }
.pc-receita .pc-var.ruim { color: #FF9C93; }
.pc-receita .pc-var.neutro { color: rgba(255,255,255,.6); }

.pc-rec-lado {
  display: grid; grid-template-columns: repeat(2, minmax(126px, 1fr));
  gap: 10px; align-content: flex-start;
}
.pc-rec-mini {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px;
}
.pc-rec-mini span { font-size: 10.5px; color: rgba(255,255,255,.58); }
.pc-rec-mini b { font-size: 16px; }

.pc-rec-ano {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14);
}
.pc-rec-ano > div { display: flex; flex-direction: column; }
.pc-rec-ano b { font-size: 18px; }
.pc-rec-ano span { font-size: 11px; color: rgba(255,255,255,.55); }
.pc-rec-ano .var b { font-size: 18px; }

.pc-secao { margin: 22px 0 12px; }
.pc-secao h3 { margin: 0; font-size: 15px; color: var(--navy); }
.pc-secao p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }

.pc-origem { display: flex; flex-direction: column; gap: 13px; margin-top: 12px; }
.pc-org .topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-org .nome { font-size: 12.5px; font-weight: 600; }
.pc-org .taxa {
  color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 2px 8px;
}
.pc-org .trilho { height: 8px; border-radius: 99px; background: var(--bg); margin: 6px 0 4px; overflow: hidden; }
.pc-org .trilho div { height: 100%; border-radius: 99px; }
.pc-org .pe { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-org .pe b { font-size: 13.5px; }
.pc-org .pe span { font-size: 11px; color: var(--text-muted); }
.pc-licao {
  margin-top: 14px; background: #F2F8F4; border-left: 3px solid #1F7A4D;
  border-radius: 8px; padding: 10px 13px; font-size: 12.5px; line-height: 1.55;
}
.pc-mini-nota { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

@media (max-width: 760px) {
  .pc-rec-principal .val { font-size: 32px; }
  .pc-rec-lado { grid-template-columns: repeat(2, 1fr); width: 100%; }
}


/* ---------- Início: agenda pessoal (16/09/2026) ---------- */

.ini-agenda { margin-bottom: 22px; }
.ini-agenda-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.ini-agenda-lista .item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 9px; padding: 9px 10px;
  border-left: 3px solid var(--gold);
}
.ini-agenda-lista .item:hover { background: var(--bg); }
.ini-agenda-lista .quando { flex: none; display: flex; flex-direction: column; min-width: 54px; }
.ini-agenda-lista .quando b { font-size: 13px; color: var(--navy); }
.ini-agenda-lista .quando i { font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.ini-agenda-lista .n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ini-agenda-lista .n b {
  font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ini-agenda-lista .n i { font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.ini-nada { font-size: 12.5px; color: var(--text-muted); padding: 12px 2px 4px; }

/* ==========================================================================
   Atendimento — caixa de entrada e painel (16/09/2026)
   A conversa é o objeto principal da tela: lista à esquerda, diálogo à direita.
   ========================================================================== */

.atd-filtros { padding: 12px 16px; }
.atd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.atd-chip {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.atd-chip:hover { border-color: var(--gold); }
.atd-chip .n {
  background: rgba(15,23,42,.07); border-radius: 99px; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
}
.atd-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.atd-chip.on .n { background: rgba(255,255,255,.22); }
.atd-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

.atd-split { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .atd-split { grid-template-columns: 1fr; } }

.atd-lista { max-height: 72vh; overflow-y: auto; padding: 14px 10px; }
.atd-lista .card-title { padding: 0 6px 6px; }

.atd-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  padding: 9px 10px; margin-bottom: 2px;
}
.atd-item:hover { background: rgba(15,23,42,.035); }
.atd-item.on { background: #F4E9DF; border-color: var(--gold); }
.atd-item .topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.atd-item .topo b { font-size: 13px; color: var(--navy); }
.atd-item .quando { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.atd-item .previa {
  font-size: 11.5px; color: var(--text-muted); margin: 3px 0 4px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atd-item .pe { font-size: 10.5px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.atd-item .pe .ponto { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }
.atd-item .pe .parado { color: #B4531B; }

.atd-conversa { display: flex; flex-direction: column; min-height: 340px; }
.atd-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.atd-cab b { font-size: 15px; color: var(--navy); }
.atd-cab .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.atd-selo { color: #fff; border-radius: 99px; padding: 3px 11px; font-size: 11px; font-weight: 700; }

.atd-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 4px; }
.atd-passar {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px;
  font-size: 12.5px; background: #fff; color: var(--text);
}

.atd-msgs {
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 14px;
  max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.atd-msg { max-width: 82%; }
.atd-msg .quem { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
.atd-msg .txt {
  white-space: pre-wrap; font-size: 13px; line-height: 1.45;
  border-radius: 12px; padding: 9px 12px;
}
.atd-msg.dela .txt { background: rgba(15,23,42,.05); border-top-left-radius: 3px; }
.atd-msg.nossa { align-self: flex-end; }
.atd-msg.nossa .quem { text-align: right; }
.atd-msg.nossa .txt { background: #F4E9DF; border-top-right-radius: 3px; }

/* ---------- Painel do CS: fila de ações e dinheiro parado (16/09/2026) ---------- */

.pc-acoes {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--gold);
  border-radius: 13px; padding: 16px 18px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.pc-acoes-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.pc-acoes-cab .tit { display: flex; gap: 10px; align-items: flex-start; color: var(--gold); }
.pc-acoes-cab h3 { margin: 0; font-size: 15.5px; color: var(--navy); }
.pc-acoes-cab p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.pc-acoes-cab p b { color: var(--danger); }
.pc-acoes-total { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

.pc-acoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 10px; }
.pc-acao {
  position: relative; text-align: left; background: var(--bg);
  border: 1px solid var(--border); border-top: 3px solid var(--border);
  border-radius: 11px; padding: 12px 13px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.pc-acao:hover { background: #fff; border-color: var(--gold); }
.pc-acao.alta { border-top-color: var(--danger); }
.pc-acao.media { border-top-color: var(--gold); }
.pc-acao .ic { position: absolute; top: 11px; right: 12px; color: var(--text-muted); opacity: .45; }
.pc-acao .n { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.05; }
.pc-acao.alta .n { color: var(--danger); }
.pc-acao .r { font-size: 12.5px; font-weight: 700; }
.pc-acao .p { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-top: 3px; }
.pc-acao .ir { font-size: 11px; font-weight: 700; color: var(--gold); margin-top: 7px; }

.pc-acoes-vazio {
  display: flex; gap: 11px; align-items: flex-start; font-size: 13px;
  border-left: 4px solid var(--success); line-height: 1.5;
}
.pc-acoes-vazio .pc-ic { color: var(--success); flex: none; margin: 1px 0 0; }

.pc-dinheiro { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.pc-din {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 2px;
}
.pc-din.bom { border-left-color: var(--success); }
.pc-din.ruim { border-left-color: var(--danger); }
.pc-din .k { font-size: 11.5px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pc-din .k .pc-ic { margin: 0; opacity: .7; }
.pc-din b { font-size: 20px; color: var(--navy); line-height: 1.2; }
.pc-din i { font-style: normal; font-size: 11px; color: var(--text-muted); }

/* ==========================================================================
   Expansão 2.0 — a fila de venda, o quadro e a ficha do negócio (16/09/2026)
   A tela é de quem está com o telefone na mão: informação curta, botão perto.
   ========================================================================== */

.vd-barra { padding: 12px 16px; }
.vd-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vd-rot { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.vd-input {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; background: #fff; color: var(--text); font-family: inherit;
}
.vd-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.vd-alerta { font-size: 11.5px; color: #B4531B; font-weight: 600; }
.vd-aviso { font-size: 12.5px; color: var(--text-muted); }
.vd-aviso.ok { color: var(--success); font-weight: 600; }
.vd-aviso.erro { color: var(--danger); font-weight: 600; }
.vd-vazio { color: var(--text-muted); font-size: 12.5px; padding: 8px 2px; line-height: 1.5; }
.vd-selo { border-radius: 99px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; margin-left: 8px; }
.vd-peso { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.vd-ajuda { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin-top: 3px; font-style: italic; }

/* ---------------------------------------------------------------- a fila */

.vd-bloco { border-left: 3px solid transparent; }
.vd-bloco.urgente { border-left-color: var(--danger); }
.vd-bloco.atrasado { border-left-color: var(--gold); }
.vd-bloco.cinza { opacity: .92; }
.vd-cont {
  background: rgba(15,23,42,.07); border-radius: 99px; padding: 1px 8px;
  font-size: 11.5px; font-weight: 700; margin-left: 6px;
}
.vd-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; margin-top: 12px; }
.vd-item { border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; background: #fff; }
.vd-item-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.vd-item-topo b { font-size: 13.5px; color: var(--navy); }
.vd-prazo { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; font-weight: 600; }
.vd-prazo.venceu { color: var(--danger); }
.vd-acao { font-size: 12.5px; margin: 7px 0 2px; line-height: 1.4; }
.vd-resposta { font-size: 12px; color: #B3261E; font-weight: 600; margin-top: 4px; }
.vd-botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.vd-botoes .btn-ghost, .vd-botoes .btn-sm { font-size: 12px; padding: 5px 10px; }

/* --------------------------------------------------------------- o quadro */

.vd-quadro-wrap { overflow-x: auto; padding-bottom: 6px; }
.vd-quadro { display: flex; gap: 12px; align-items: flex-start; min-width: 1100px; }
.vd-coluna { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.vd-col-topo { display: flex; justify-content: space-between; align-items: baseline; }
.vd-col-topo b { font-size: 12.5px; color: var(--navy); }
.vd-col-topo span { font-size: 11.5px; color: var(--text-muted); }
.vd-col-desc { font-size: 11px; color: var(--text-muted); margin: 3px 0 9px; line-height: 1.45; }
.vd-col-lista { max-height: 66vh; overflow-y: auto; }
.vd-card {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid #C9CBD1;
  border-radius: 8px; padding: 9px 10px; margin-bottom: 7px; cursor: pointer;
}
.vd-card:hover { border-color: var(--gold); }
.vd-card.responde { border-left-color: var(--danger); background: #FFF6F5; }
.vd-card.parado { border-left-color: var(--gold); }
.vd-card-nome { font-size: 13px; font-weight: 600; line-height: 1.3; }
.vd-card-linha { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.vd-card-tarefa { font-size: 11.5px; margin-top: 5px; line-height: 1.4; }
.vd-card-tarefa.venceu { color: var(--danger); }

/* ---------------------------------------------------------------- a ficha */

.vd-drawer-fundo {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 120;
  display: flex; justify-content: flex-end;
}
.vd-drawer {
  background: #fff; width: min(760px, 100%); height: 100%;
  display: flex; flex-direction: column; box-shadow: -18px 0 48px rgba(0,0,0,.28);
}
.vd-drawer-topo {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.vd-drawer-topo b { font-size: 16px; color: var(--navy); }
.vd-drawer-acoes { display: flex; gap: 8px; }
.vd-abas { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.vd-aba {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 12px; font-size: 13px; color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.vd-aba.on { color: var(--navy); border-bottom-color: var(--gold); }
.vd-mover {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 20px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.vd-corpo { padding: 16px 20px 26px; overflow-y: auto; flex: 1; }
.vd-corpo h4 { margin: 18px 0 8px; font-size: 13px; color: var(--navy); }
.vd-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 620px) { .vd-dois { grid-template-columns: 1fr; } }

.vd-briefing {
  background: #FAF5EF; border: 1px solid var(--gold-light); border-radius: 9px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px;
}
.vd-nota-alerta {
  background: #FCEBEA; border: 1px solid #F3C7C3; border-radius: 9px;
  padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px;
}

.vd-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 40vh; overflow-y: auto; padding-right: 4px; }
.vd-msg { max-width: 84%; }
.vd-msg .quem { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
.vd-msg .txt { white-space: pre-wrap; font-size: 13px; line-height: 1.45; border-radius: 12px; padding: 9px 12px; }
.vd-msg.dela .txt { background: rgba(15,23,42,.05); border-top-left-radius: 3px; }
.vd-msg.nossa { align-self: flex-end; }
.vd-msg.nossa .quem { text-align: right; }
.vd-msg.nossa .txt { background: #F4E9DF; border-top-right-radius: 3px; }

.vd-envio { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.vd-modelos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.vd-chip {
  border: 1px solid var(--border); background: #fff; border-radius: 99px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: var(--text);
}
.vd-chip:hover { border-color: var(--gold); }
.vd-envio textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical;
}
.vd-envio-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }

.vd-tarefas { display: flex; flex-direction: column; gap: 8px; }
.vd-tarefa {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 9px; padding: 10px 12px;
}
.vd-tarefa.venceu { border-left-color: var(--danger); }
.vd-tarefa b { font-size: 13px; }
.vd-tarefa-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.vd-script {
  white-space: pre-wrap; font-size: 12px; line-height: 1.5; color: var(--text-muted);
  background: var(--bg); border-radius: 7px; padding: 8px 10px; margin-top: 7px;
}
.vd-feitas { font-size: 12px; color: var(--text-muted); line-height: 1.8; }

.vd-criterios { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.vd-criterio {
  display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
}
.vd-criterio b { font-size: 13px; }
.vd-opcoes { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
.vd-op {
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; background: #fff;
}
.vd-op input { display: none; }
.vd-op.on { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 620px) { .vd-criterio { flex-direction: column; } }

.vd-resultado { border-radius: 9px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; }
.vd-resultado b { font-size: 14px; }
.vd-resultado.quente { background: #FCEBEA; color: #7A1D17; }
.vd-resultado.morno { background: #F0DFD1; color: #7A3E0A; }
.vd-resultado.frio { background: #E8F0F6; color: #26485E; }
.vd-hist-apres { margin-bottom: 10px; }

.vd-timeline { display: flex; flex-direction: column; gap: 9px; }
.vd-linha-tempo { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.5; }
.vd-quando { font-size: 11px; color: var(--text-muted); white-space: nowrap; width: 96px; flex-shrink: 0; }
.vd-tag {
  background: rgba(15,23,42,.06); border-radius: 5px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted);
}

/* --------------------------------------------------------------- o painel */

.vd-funil { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vd-funil-fase {
  flex: 1; min-width: 110px; background: var(--bg); border-radius: 9px;
  padding: 10px; text-align: center;
}
.vd-funil-n { font-size: 22px; font-weight: 700; color: var(--navy); }
.vd-funil-rot { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }
.vd-barras { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.vd-barra-linha { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.vd-barra-rot { width: 130px; flex-shrink: 0; color: var(--text); }
.vd-barra-trilho { flex: 1; background: var(--bg); border-radius: 99px; height: 9px; overflow: hidden; }
.vd-barra-fill { height: 100%; border-radius: 99px; }
.vd-barra-val { width: 42px; text-align: right; font-weight: 700; color: var(--navy); }
.vd-fracos { margin-top: 14px; font-size: 12.5px; line-height: 1.6; }
.vd-fracos b { display: block; margin-bottom: 5px; font-size: 12px; color: var(--navy); }
/* ==========================================================================
   Atendimento — a esteira, o termômetro e o feedback (16/09/2026)
   Arquivo separado do atendimento.css porque o shared.css publicado já tinha a
   primeira versão: bloco novo, marca nova.
   ========================================================================== */

.atd-item .pe { flex-wrap: wrap; gap: 4px 6px; }

/* A esteira: quem é a pessoa, quantas vezes já falamos e o que o atendimento virou */
.atd-quem {
  display: flex; flex-direction: column; gap: 1px; margin-top: 10px;
  border-left: 3px solid var(--gold); padding: 4px 0 4px 10px;
}
.atd-quem b { font-size: 13px; color: var(--navy); }
.atd-quem span { font-size: 11.5px; color: var(--text-muted); }
.atd-quem.sem { border-left-color: var(--border); }

.atd-toques {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 2px;
  font-size: 11.5px; color: var(--text-muted);
}
.atd-toques b { color: var(--navy); font-size: 13px; }

.atd-campos { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.atd-item .pe .num { font-weight: 700; color: var(--navy); margin-right: 2px; }
.atd-gerou {
  font-size: 11.5px; color: var(--success, #1F7A5C); font-weight: 600;
  align-self: center;
}

.atd-responder { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.atd-responder textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 13px; resize: vertical;
}
.atd-responder .linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.atd-responder .aviso { font-size: 11.5px; color: var(--text-muted); flex: 1 1 200px; }
.atd-responder .saida { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.atd-historia { margin-top: 14px; font-size: 12px; }
.atd-historia summary { cursor: pointer; color: var(--text-muted); font-weight: 600; }
.atd-historia .li { border-top: 1px solid var(--border); padding: 8px 0; }
.atd-historia .li span { font-size: 10.5px; color: var(--text-muted); }
.atd-historia .li div { white-space: pre-wrap; margin-top: 2px; }

.atd-linhas { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.atd-linha-card {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 0 6px 10px; min-width: 190px;
}
.atd-linha-card b { font-size: 13px; color: var(--navy); }
.atd-linha-card span { font-size: 11.5px; color: var(--text-muted); }
.atd-linha-card .est { font-weight: 600; }

/* Termômetro das conversas e o feedback do atendimento */
.atd-term { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.atd-term-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 11px; background: var(--card); padding: 10px 12px;
}
.atd-term-item:hover { border-color: var(--gold); }
.atd-term-item .k { font-size: 11.5px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.atd-term-item .k i { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.atd-term-item b { font-size: 21px; line-height: 1.1; }
.atd-term-item .barra { height: 4px; border-radius: 99px; background: rgba(15,23,42,.08); overflow: hidden; }
.atd-term-item .barra span { display: block; height: 100%; }
.atd-term-item .d { font-size: 10.5px; color: var(--text-muted); }

.atd-fb {
  border-left: 3px solid var(--border); padding: 8px 0 8px 10px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.atd-fb b { font-size: 13px; }
.atd-fb span { font-size: 12px; color: var(--text-muted); }
.atd-fb .q { font-size: 11px; color: var(--text-muted); }
.atd-fb .linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* ===================== MARKETING v2 — mês, gatilhos e tráfego pago =====================
   Mesma linguagem visual dos mapas do CS: cartão branco, número grande, barra,
   ícone de traço. Cor só quando significa alguma coisa — pilar do conteúdo,
   estado da campanha, gravidade do aviso. */

.mk-ic { flex: none; }

.mk-mes-nav { display: flex; align-items: center; gap: 8px; }
.mk-mes-atual { font-weight: 600; min-width: 150px; text-align: center; }

/* botões do Marketing v2: o .btn-primary do app nasce com width:100% (é o botão
   do login) e aqui esticava até espremer o texto do lado numa coluna. */
.mk-acao .btn-primary, .mk-drawer-acoes .btn-primary, .page-header .btn-primary {
  width: auto; flex: none; padding: 8px 16px; white-space: nowrap;
}
.mk-dia { min-width: 0; }

/* ---------- O que fazer agora ---------- */
.mk-acoes { margin-bottom: 14px; }
.mk-acoes-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mk-acoes-cab h3 { margin: 0; font-size: 15px; }
.mk-acoes-grade { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-acao {
  display: flex; align-items: center; gap: 12px; flex: 1 1 260px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px;
}
.mk-acao-txt { flex: 1; font-size: 13px; }
.mk-acoes-msg { font-size: 13px; color: var(--text-muted); margin: 6px 0 10px; min-height: 18px; }

/* ---------- Placar ---------- */
.mk-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.mk-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow);
}
.mk-kpi.ruim { border-color: var(--danger); }
.mk-kpi-cab {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text-muted); text-transform: lowercase;
}
.mk-kpi strong { display: block; font-size: 24px; margin: 6px 0 2px; }
.mk-kpi small { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.mk-kpi-var { margin-bottom: 4px; }

.mk-var { font-size: 12px; font-weight: 600; }
.mk-var.bom { color: var(--success); }
.mk-var.ruim { color: var(--danger); }
.mk-var.neutro { color: var(--text-muted); font-weight: 400; }

/* ---------- Calendário ---------- */
.mk-duas { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 14px; }
.mk-lado { display: flex; flex-direction: column; gap: 14px; }

.mk-cal-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mk-cal-cab h3 { margin: 0; font-size: 15px; }
.mk-legenda { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.mk-lg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.mk-sq { width: 10px; height: 10px; border-radius: 2px; background: var(--navy); display: inline-block; }
.mk-sq.fixo { background: var(--navy); }
.mk-sq.gatilho { background: var(--gold); }
.mk-sq.vaga { background: transparent; border: 1px dashed var(--text-muted); }

.mk-cal-dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
}
.mk-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.mk-dia {
  min-height: 74px; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; background: var(--card); display: flex; flex-direction: column; gap: 3px;
}
.mk-dia.fora { opacity: .35; background: var(--bg); }
.mk-dia.hoje { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.mk-dia.evento { background: #FFF6EC; border-color: var(--gold-light); }
.mk-dia-n { font-size: 11px; color: var(--text-muted); display: flex; gap: 4px; align-items: baseline; }
.mk-dia-n b { font-size: 9px; color: var(--teal); font-weight: 700; }

.mk-pill {
  display: flex; align-items: center; gap: 3px; width: 100%; text-align: left;
  border: 1px solid var(--border); border-left: 3px solid var(--pc, var(--navy));
  background: var(--card); border-radius: 5px; padding: 3px 5px;
  font-size: 10.5px; line-height: 1.25; color: var(--text); font-family: inherit;
}
.mk-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mk-pill:hover { background: var(--bg); }
.mk-pill.vaga { border-style: dashed; color: var(--text-muted); cursor: default; background: transparent; }
.mk-pill.gatilho { background: #FAF5EF; }
.mk-pill.reservada { border-style: dashed; background: transparent; color: var(--text-muted); }
.mk-pill.postado { opacity: .55; text-decoration: line-through; }
.mk-pill.atrasado { border-color: var(--danger); background: #FDF1F0; }
.mk-pill.aprovado { box-shadow: 0 0 0 1px var(--success) inset; }
.mk-ok { color: var(--success); font-style: normal; }

/* ---------- Blocos laterais ---------- */
.mk-bloco { margin-bottom: 14px; }
.mk-bloco-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mk-bloco-cab h3 { margin: 0; font-size: 15px; }
.mk-bloco-cab .btn-ghost { margin-left: auto; }
.mk-nota { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.45; }
.mk-vazio { font-size: 12px; color: var(--text-muted); }

.mk-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.mk-barra-rot { width: 92px; color: var(--text-muted); text-transform: capitalize; flex: none; }
.mk-barra-trilho { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.mk-barra-trilho i { display: block; height: 100%; border-radius: 4px; }
.mk-barra b { width: 42px; text-align: right; flex: none; }

/* ---------- Gaveta da pauta ---------- */
.mk-drawer-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.mk-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 94vw); z-index: 41;
  background: var(--card); box-shadow: -8px 0 24px rgba(0,0,0,.14);
  padding: 18px; overflow-y: auto;
}
.mk-drawer-topo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.mk-drawer-topo h3 { margin: 0 0 4px; font-size: 17px; }
.mk-drawer-topo p { margin: 0; font-size: 12px; color: var(--text-muted); }
.mk-drawer-topo .btn-ghost { margin-left: auto; flex: none; }
.mk-campo { margin-bottom: 14px; }
.mk-campo strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.mk-campo p { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.mk-campo.vazio p { color: var(--text-muted); font-style: italic; }
.mk-fato {
  display: flex; gap: 10px; background: #FAF5EF; border: 1px solid var(--gold-light);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px;
}
.mk-fato strong { font-size: 12px; }
.mk-fato p { margin: 2px 0 4px; font-size: 13px; }
.mk-fato small { font-size: 11px; color: var(--text-muted); }
.mk-drawer-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--border); }
.mk-drawer-msg { font-size: 12px; color: var(--text-muted); }

/* ---------- Gatilhos ---------- */
.mk-gat-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mk-gat { display: flex; flex-direction: column; gap: 8px; }
.mk-gat.off { opacity: .6; }
.mk-gat-cab { display: flex; align-items: flex-start; gap: 10px; }
.mk-gat-cab h3 { margin: 0; font-size: 15px; }
.mk-gat-tipo { font-size: 11px; color: var(--text-muted); }
.mk-gat-desc { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.mk-gat-num { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.mk-gat-cfg { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.mk-gat-cfg label { font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.mk-gat-cfg input {
  width: 110px; padding: 5px 7px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit; font-size: 13px;
}
.mk-gat-pe { font-size: 11px; color: var(--text-muted); }

.mk-switch { margin-left: auto; position: relative; width: 38px; height: 21px; flex: none; }
.mk-switch input { opacity: 0; width: 0; height: 0; }
.mk-switch span {
  position: absolute; inset: 0; background: var(--border); border-radius: 21px;
  transition: background .15s;
}
.mk-switch span::before {
  content: ""; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.mk-switch input:checked + span { background: var(--success); }
.mk-switch input:checked + span::before { transform: translateX(17px); }

.mk-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mk-tab th {
  text-align: left; font-size: 11px; text-transform: lowercase; color: var(--text-muted);
  font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mk-tab td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mk-tab td small { display: block; font-size: 10.5px; color: var(--text-muted); }
.mk-tab-wrap { overflow-x: auto; }
.mk-tab.tp td.nome { min-width: 220px; }
.mk-tab.tp tr.ativa td { background: #F6FBF8; }

.mk-tag { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--bg); }
.mk-tag.bom { background: #E8F5EE; color: var(--success); }

.mk-datas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mk-data { display: flex; gap: 10px; font-size: 12px; }
.mk-data b { color: var(--teal); flex: none; }
.mk-data strong { font-size: 12.5px; }
.mk-data p { margin: 2px 0 0; color: var(--text-muted); line-height: 1.4; }

/* ---------- Tráfego pago ---------- */
.mk-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.mk-chip {
  border: 1px solid var(--border); background: var(--card); border-radius: 20px;
  padding: 5px 13px; font-size: 12.5px; font-family: inherit; color: var(--text);
}
.mk-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mk-periodo { font-size: 11.5px; color: var(--text-muted); margin-left: 6px; }

.mk-desconectado {
  display: flex; gap: 12px; align-items: flex-start;
  border-left: 3px solid var(--gold);
}
.mk-desconectado h3 { margin: 0 0 4px; font-size: 15px; }
.mk-desconectado p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.mk-desconectado code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }

.mk-sinais { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.mk-sinal {
  border: 1px solid var(--border); border-left: 3px solid var(--text-muted);
  border-radius: var(--radius); padding: 10px 12px; background: var(--bg);
}
.mk-sinal.alto { border-left-color: var(--danger); background: #FDF1F0; }
.mk-sinal.medio { border-left-color: var(--gold); background: #FAF5EF; }
.mk-sinal.bom { border-left-color: var(--success); background: #F1F8F4; }
.mk-sinal strong { font-size: 12.5px; }
.mk-sinal p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

.mk-resumo {
  background: var(--bg); border-radius: var(--radius); padding: 12px 14px;
  font-size: 13.5px; line-height: 1.6; margin-bottom: 12px;
}

.mk-duas-tp { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.mk-svg { width: 100%; height: 170px; display: block; }

.mk-veic {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--bg); color: var(--text-muted); white-space: nowrap;
}
.mk-veic.ativa { background: #E8F5EE; color: var(--success); }
.mk-veic.pausada { background: #F1F1F1; }
.mk-veic\.com\ problema, .mk-veic.reprovada { background: #FDF1F0; color: var(--danger); }

@media (max-width: 1100px) {
  .mk-duas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mk-dia { min-height: 56px; }
  .mk-pill { font-size: 9.5px; }
  .mk-drawer { width: 100vw; }
}

/* ==========================================================================
   Atendimento — a caixa no modelo do SacFlow (16/09/2026)
   Três colunas sem rolagem de página: fila · conversa · contato.
   ========================================================================== */

/* o sistema não tem o reset de [hidden]: sem isto, popover com display próprio nunca fecha */
.atd-ws [hidden], .atd-janela [hidden], .atd-rail [hidden] { display: none !important; }

.atd-ws { --atd-linha: #E6E8EC; --atd-fundo: #F5F1EA; --atd-laranja: #B8632A; --atd-laranja-escuro: #C96E12;
  --atd-laranja-claro: #F4E9DF; --atd-tinta: #1A1A1A; --atd-suave: #5B6472; }

/* a tela cheia: sem padding, sem rodapé, cada coluna rola por dentro */
body.atd-cheio .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
body.atd-cheio .body-area { min-height: 0; overflow: hidden; }
body.atd-cheio .content { padding: 0; overflow: hidden; display: flex; }
body.atd-cheio .app-rodape { display: none; }

/* ------------------------------------------------------------ barra escura */
.sidebar.atd-rail {
  width: 96px; background: #111214; border-right: 0; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.atd-rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; border: 0; background: transparent; color: #B9BEC6; border-radius: 10px;
  padding: 12px 4px 10px; font-size: 11.5px; line-height: 1.2; text-align: center; cursor: pointer;
}
.atd-rail-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.atd-rail-item.on { background: rgba(184,99,42,.16); color: #fff; }
.atd-rail-item.on::before {
  content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--gold, #B8632A);
}
.atd-rail-item:focus-visible { outline: 2px solid var(--gold, #B8632A); outline-offset: 2px; }
.atd-rail-badge {
  position: absolute; top: 6px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px; background: var(--gold, #B8632A); color: #111; font-size: 10.5px; line-height: 18px;
}
.atd-rail-pe { margin-top: auto; }

/* --------------------------------------------------------------- botões */
.atd-ic { flex-shrink: 0; display: block; }
.atd-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid #D9DDE3; background: #fff; color: #1A1A1A;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.atd-btn:hover { border-color: #B9BEC6; background: #FAFAFB; }
.atd-btn.primario { background: #B8632A; border-color: #B8632A; color: #111; }
.atd-btn.primario:hover { background: #F58A22; border-color: #F58A22; }
.atd-btn:disabled { opacity: .45; cursor: not-allowed; }
.atd-btn:focus-visible, .atd-btn-ic:focus-visible, .atd-btn-txt:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.atd-btn-ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: #3F4854; cursor: pointer; flex-shrink: 0;
}
.atd-btn-ic:hover { background: #F1F2F4; }
.atd-btn-ic.redondo { width: 30px; height: 30px; border-radius: 99px; border-color: #D9DDE3; }
.atd-btn-ic.ligado { border-color: #B8632A; color: #C96E12; }
.atd-btn-ic b {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 99px;
  background: #B8632A; color: #111; font-size: 10px; line-height: 16px;
}
.atd-btn-ic.gravando { color: #B3261E; background: #FDECEA; }
.atd-btn-txt {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #3F4854;
  font-size: 13.5px; font-weight: 600; padding: 8px 6px; border-radius: 8px; cursor: pointer;
}
.atd-btn-txt:hover { background: #F1F2F4; }

/* -------------------------------------------------------------- estrutura */
.atd-ws {
  flex: 1; min-width: 0; min-height: 0; height: 100%;
  display: grid; grid-template-columns: minmax(320px, 390px) minmax(0, 1fr) minmax(300px, 340px);
  background: #fff;
}
.atd-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.atd-col-lista { border-right: 1px solid #E6E8EC; background: #fff; }
.atd-col-conversa { background: #F5F1EA; }
.atd-col-detalhes { border-left: 1px solid #E6E8EC; background: #fff; }

/* ------------------------------------------------------------------ fila */
.atd-lista-topo { padding: 20px 18px 12px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid #EEF0F3; }
.atd-lista-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atd-lista-titulo h2 { margin: 0; font-size: 24px; font-weight: 800; color: #111; letter-spacing: -.01em; }
.atd-busca-linha { display: flex; gap: 8px; }
.atd-busca {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  border: 1px solid #D9DDE3; border-radius: 10px; color: #8A8F98; background: #fff;
}
.atd-busca:focus-within { border-color: #1A1A1A; }
.atd-busca input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14.5px; color: #1A1A1A; background: transparent; }
.atd-busca-linha .atd-btn-ic { width: 44px; height: 44px; border-color: #D9DDE3; }
.atd-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.atd-aba {
  height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid #D9DDE3; background: #fff;
  color: #3F4854; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.atd-aba:hover { border-color: #B9BEC6; }
.atd-aba.on { background: #F4E9DF; border-color: #B8632A; color: #6B3616; }
.atd-caixas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.atd-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 10px; border: 1px solid transparent; background: #F5F1EA; color: #3F4854; cursor: pointer;
}
.atd-caixa span { font-size: 12.5px; font-weight: 600; }
.atd-caixa b { font-size: 17px; font-variant-numeric: tabular-nums; color: #111; }
.atd-caixa:hover { border-color: #D9DDE3; }
.atd-caixa.on { background: #111214; color: #fff; }
.atd-caixa.on b { color: #B8632A; }

.atd-itens { flex: 1; overflow-y: auto; }
.atd-item-l {
  display: flex; gap: 12px; width: 100%; text-align: left; padding: 14px 16px 14px 14px;
  border: 0; border-bottom: 1px solid #EEF0F3; border-left: 4px solid var(--dep, #D9DDE3);
  background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.atd-item-l:hover { background: #FAFAFB; }
.atd-item-l.on { background: #FFF7EE; }
.atd-item-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atd-item-meio .linha1, .atd-item-meio .linha2 { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.atd-item-meio .linha1 b { font-size: 15px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-item-meio .previa { font-size: 13.5px; color: #5B6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-item-meio .linha3 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.atd-tempo { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #C96E12; white-space: nowrap; }
.atd-tempo.estourou { color: #B3261E; background: #FDECEA; padding: 1px 7px; border-radius: 99px; }
.atd-tempo.neutro { color: #8A8F98; font-weight: 500; }
.atd-nlidas {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #B8632A; color: #111;
  font-size: 11.5px; line-height: 22px; text-align: center; flex-shrink: 0;
}
.atd-canal { color: #1F7A4D; flex-shrink: 0; }
.atd-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px;
  border: 1px solid #E0E3E8; background: #F7F8FA; color: #3F4854; font-size: 11.5px; font-weight: 600;
}
.atd-tag.grande { padding: 5px 8px 5px 12px; font-size: 12.5px; background: #F4E9DF; border-color: #E7CBB6; color: #6B3616; }
.atd-tag.grande button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.atd-tag.prio-alta { background: #F4E9DF; border-color: #E7CBB6; color: #6B3616; }
.atd-tag.prio-urgente { background: #FDECEA; border-color: #F5C2BD; color: #8C1D16; }

.atd-av {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; font-weight: 700; letter-spacing: .02em;
}
.atd-av-dep { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 99px; border: 2px solid #fff; }

.atd-vazio { display: flex; flex-direction: column; gap: 4px; padding: 30px 20px; text-align: center; color: #5B6472; font-size: 13.5px; }
.atd-vazio b { color: #1A1A1A; font-size: 15px; }
.atd-dica { font-size: 12.5px; color: #8A8F98; }

/* -------------------------------------------------------------- conversa */
.atd-sem-conversa {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #8A8F98; text-align: center; padding: 30px;
}
.atd-sem-conversa b { color: #1A1A1A; font-size: 18px; }
.atd-sem-conversa span { max-width: 36ch; }

.atd-conv-topo {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: #fff;
  border-bottom: 1px solid #E6E8EC; flex-wrap: wrap;
}
.atd-voltar { display: none; }
.atd-conv-quem { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.atd-conv-quem h3 { margin: 0; font-size: 19px; font-weight: 800; color: #111; line-height: 1.2; }
.atd-conv-quem h3 .sep { color: #B9BEC6; font-weight: 400; margin: 0 2px; }
.atd-conv-quem .sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; color: #5B6472; }
.atd-conv-quem .sub i { font-style: normal; color: #C3C8CF; }
.atd-conv-quem .wa { display: inline-flex; align-items: center; gap: 5px; color: #1F7A4D; }
.atd-selo2 {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  padding: 4px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
}
.atd-selo2.laranja { background: #F4E9DF; color: #7A3F18; border: 1px solid #E7CBB6; }
.atd-selo2.vermelho { background: #FDECEA; color: #8C1D16; border: 1px solid #F5C2BD; }
.atd-selo2.azul { background: #EAF3F8; color: #1F5A7A; border: 1px solid #CDE2EE; }
.atd-selo2.ok { background: #E8F4EC; color: #1F6B42; border: 1px solid #C8E3D2; }
.atd-conv-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.atd-menu-wrap { position: relative; }
.atd-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px;
  background: #fff; border: 1px solid #E6E8EC; border-radius: 12px; box-shadow: 0 12px 32px rgba(17,18,20,.16);
}
.atd-menu.acima { top: auto; bottom: calc(100% + 6px); }
.atd-menu > button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: #1A1A1A; font-size: 13.5px; text-align: left; cursor: pointer;
}
.atd-menu > button:hover { background: #F5F1EA; }
.atd-menu > button.perigo { color: #B3261E; }
.atd-tag-nova { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid #EEF0F3; margin-top: 4px; }
.atd-tag-nova input { flex: 1; min-width: 0; height: 34px; border: 1px solid #D9DDE3; border-radius: 8px; padding: 0 8px; }
.atd-tag-nova .atd-btn { height: 34px; padding: 0 10px; }

.atd-conv-corpo { flex: 1; overflow-y: auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.atd-dia { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; color: #3F4854; font-size: 13px; font-weight: 600; }
.atd-dia::before, .atd-dia::after { content: ""; flex: 1; height: 1px; background: #DDE1E6; }
.atd-dia span { text-transform: capitalize; }
.atd-sis { display: flex; justify-content: center; }
.atd-sis span {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 10px;
  background: #fff; border: 1px solid #E6E8EC; color: #3F4854; font-size: 13px; max-width: 90%;
}
.atd-sis span i { font-style: normal; color: #8A8F98; margin-left: 8px; }
.atd-sis.erro span { background: #FDECEA; border-color: #F5C2BD; color: #8C1D16; }

.atd-msg2 { display: flex; gap: 10px; align-items: flex-end; max-width: 78%; }
.atd-msg2.nossa { align-self: flex-end; flex-direction: row-reverse; }
.atd-msg2-bolha {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 8px;
  border-radius: 14px; background: #fff; border: 1px solid #E6E8EC; box-shadow: 0 1px 1px rgba(17,18,20,.04);
}
.atd-msg2.dela .atd-msg2-bolha { border-bottom-left-radius: 4px; }
.atd-msg2.nossa .atd-msg2-bolha { background: #F4E9DF; border-color: #E7CBB6; border-bottom-right-radius: 4px; }
.atd-msg2.nossa.robo .atd-msg2-bolha { background: #F1F2F4; border-color: #E0E3E8; }
.atd-msg2-bolha .quem { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #7A3F18; }
.atd-msg2.robo .atd-msg2-bolha .quem { color: #5B6472; }
.atd-msg2-bolha .txt { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.45; color: #1A1A1A; }
.atd-msg2-bolha .hora { align-self: flex-end; font-size: 11px; color: #8A8F98; }
.atd-msg2-bolha .lida { font-style: normal; color: #2B6A8E; letter-spacing: -2px; }
.atd-msg2-bolha audio { max-width: 260px; height: 40px; }
.atd-anexo { display: flex; align-items: center; gap: 12px; min-width: 240px; padding: 4px 0; }
.atd-anexo-ic {
  width: 42px; height: 48px; border-radius: 6px; background: #EEF0F3; color: #3F4854; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.atd-anexo-ic.pdf { background: #E5484D; color: #fff; }
.atd-anexo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.atd-anexo-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-anexo-txt span { font-size: 12px; color: #5B6472; }
.atd-anexo .atd-btn-ic { border-color: #D9DDE3; background: #fff; }
.atd-anexo-lin { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }

.atd-nota {
  align-self: flex-end; max-width: 78%; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 8px;
  border-radius: 14px; border-bottom-right-radius: 4px; background: #FFF8D6; border: 1px solid #F1E2A4;
}
.atd-nota .quem { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #7A5A00; }
.atd-nota .txt { white-space: pre-wrap; font-size: 14px; color: #3F3000; }
.atd-nota .txt b { color: #7A3F18; }
.atd-nota .hora { align-self: flex-end; font-size: 11px; color: #8A7A40; }

/* ------------------------------------------------------------ compositor */
.atd-comp { margin: 0 16px 16px; background: #fff; border: 1px solid #E6E8EC; border-radius: 14px; box-shadow: 0 4px 18px rgba(17,18,20,.05); }
.atd-comp-abas { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid #EEF0F3; }
.atd-comp-abas button {
  border: 0; background: transparent; padding: 13px 12px 11px; font-size: 14px; font-weight: 600; color: #5B6472;
  border-bottom: 3px solid transparent; cursor: pointer;
}
.atd-comp-abas button.on { color: #111; border-bottom-color: #B8632A; }
.atd-comp.nota .atd-comp-abas button.on { border-bottom-color: #D9B300; }
.atd-comp-aviso { margin: 10px 14px 0; padding: 8px 12px; border-radius: 8px; background: #FFF8D6; border: 1px solid #F1E2A4; color: #5A4500; font-size: 12.5px; }
.atd-comp-aviso a { color: #6B3616; font-weight: 700; }
.atd-comp-caixa { position: relative; margin: 10px 14px 12px; border: 1px solid #D9DDE3; border-radius: 12px; }
.atd-comp-caixa:focus-within { border-color: #1A1A1A; }
.atd-comp.nota .atd-comp-caixa { background: #FFFCEB; border-color: #F1E2A4; }
.atd-comp-caixa textarea {
  display: block; width: 100%; min-height: 70px; max-height: 220px; resize: vertical; border: 0; outline: 0;
  padding: 12px 14px 4px; font: inherit; font-size: 14.5px; color: #1A1A1A; background: transparent;
}
.atd-comp-barra { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px; flex-wrap: wrap; }
.atd-comp-div { width: 1px; height: 24px; background: #E0E3E8; margin: 0 6px; }
.atd-comp-dica { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #7A5A00; padding-left: 6px; }
.atd-comp-grav { font-size: 12.5px; color: #B3261E; font-weight: 600; }
.atd-enviar { margin-left: auto; display: flex; }
.atd-enviar .atd-btn.primario { height: 46px; border-radius: 10px 0 0 10px; padding: 0 20px; }
.atd-enviar .atd-btn.primario:only-child { border-radius: 10px; }
.atd-enviar .atd-btn.seta { border-radius: 0 10px 10px 0; padding: 0 10px; border-left: 1px solid rgba(0,0,0,.15); }
.atd-enviar .atd-menu-wrap, .atd-enviar { position: relative; }
.atd-sugestoes, .atd-rapidas {
  position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 30; width: min(420px, calc(100% - 16px));
  max-height: 300px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #E6E8EC;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(17,18,20,.16);
}
.atd-rapidas { left: 0; width: 380px; max-width: 80vw; }
.atd-sugestoes button, .atd-rapidas button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0;
  border-radius: 8px; background: transparent; cursor: pointer;
}
.atd-sugestoes button:hover, .atd-rapidas button:hover { background: #F5F1EA; }
.atd-sugestoes b, .atd-rapidas b { font-size: 13px; color: #1A1A1A; }
.atd-sugestoes span, .atd-rapidas span { font-size: 12.5px; color: #5B6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-rapidas a { display: block; padding: 8px 10px; font-size: 12.5px; color: #7A3F18; font-weight: 600; border-top: 1px solid #EEF0F3; margin-top: 4px; }
.atd-emojis {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; grid-template-columns: repeat(6, 36px);
  gap: 2px; padding: 8px; background: #fff; border: 1px solid #E6E8EC; border-radius: 12px; box-shadow: 0 12px 32px rgba(17,18,20,.16);
}
.atd-emojis button { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 8px; font-size: 20px; cursor: pointer; }
.atd-emojis button:hover { background: #F5F1EA; }
.atd-barra-fim {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 16px 16px;
  padding: 14px 18px; background: #fff; border: 1px solid #E6E8EC; border-radius: 14px; color: #3F4854; font-size: 14px;
}

/* ------------------------------------------------------- painel do contato */
.atd-det-abas { display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid #EEF0F3; }
.atd-det-abas button[role="tab"] {
  border: 0; background: transparent; padding: 18px 12px 14px; font-size: 14.5px; font-weight: 600; color: #5B6472;
  border-bottom: 3px solid transparent; cursor: pointer;
}
.atd-det-abas button[role="tab"].on { color: #111; border-bottom-color: #B8632A; }
.atd-det-fechar { margin-left: auto; display: none; }
.atd-det-corpo { flex: 1; overflow-y: auto; padding: 18px 18px 30px; }
.atd-det-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.atd-det-cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.atd-det-cab b { font-size: 18px; color: #111; line-height: 1.2; }
.atd-det-cab span { font-size: 13.5px; color: #5B6472; }
.atd-chip-v {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 10px;
  border-radius: 99px; font-size: 12px !important; font-weight: 700;
}
.atd-chip-v.ok { background: #E8F4EC; color: #1F6B42 !important; border: 1px solid #C8E3D2; }
.atd-chip-v.aviso { background: #F4E9DF; color: #7A3F18 !important; border: 1px solid #E7CBB6; }
.atd-chip-v.neutro { background: #F1F2F4; color: #5B6472 !important; border: 1px solid #E0E3E8; }
.atd-det-corpo h4 { margin: 0 0 8px; font-size: 14px; color: #111; }
.atd-contato-l { display: flex; align-items: center; gap: 10px; min-height: 40px; color: #3F4854; }
.atd-contato-l span { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-contato-l .atd-btn-ic { width: 32px; height: 32px; }
.atd-saldo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; background: #F7F8FA; }
.atd-saldo span { font-size: 12px; color: #5B6472; }
.atd-saldo b { font-size: 15px; color: #111; font-variant-numeric: tabular-nums; }
.atd-toques2 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: #5B6472; }
.atd-toques2 b { color: #111; }
.atd-sep { height: 1px; background: #EEF0F3; margin: 16px 0; }
.atd-campo { display: flex; gap: 12px; padding: 8px 0; color: #3F4854; }
.atd-campo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atd-campo .rot { font-size: 12.5px; color: #5B6472; }
.atd-campo select, .atd-campo textarea {
  width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 4px 6px 4px 0;
  font: inherit; font-size: 14.5px; color: #111; font-weight: 600;
}
.atd-campo textarea { font-weight: 400; resize: vertical; padding: 6px 8px; border-color: #E6E8EC; }
.atd-campo select:hover, .atd-campo select:focus { border-color: #D9DDE3; padding-left: 6px; }
.atd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atd-tags .atd-menu { left: 0; right: auto; min-width: 200px; }
.atd-sanf { border: 1px solid #E6E8EC; border-radius: 12px; margin-top: 10px; background: #fff; }
.atd-sanf summary {
  list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px; cursor: pointer; color: #1A1A1A;
}
.atd-sanf summary::-webkit-details-marker { display: none; }
.atd-sanf summary b { flex: 1; font-size: 14.5px; }
.atd-sanf summary .qtd { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #F4E9DF; color: #6B3616; font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; }
.atd-sanf[open] summary .atd-ic:last-child { transform: rotate(180deg); }
.atd-sanf .corpo { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.atd-tarefa { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid #F1F2F4; cursor: pointer; }
.atd-tarefa input { margin-top: 3px; accent-color: #B8632A; }
.atd-tarefa span { display: flex; flex-direction: column; gap: 2px; }
.atd-tarefa b { font-size: 13.5px; }
.atd-tarefa i { font-style: normal; font-size: 12px; color: #5B6472; }
.atd-tarefa i.atrasada, .atd-tarefa-l i.atrasada { color: #B3261E; font-weight: 700; }
.atd-tarefa.feita b { text-decoration: line-through; color: #8A8F98; }
.atd-funil-b { padding: 8px 0; border-top: 1px solid #F1F2F4; display: flex; flex-direction: column; gap: 3px; }
.atd-funil-b .t { display: flex; align-items: center; gap: 8px; }
.atd-funil-b .t b { font-size: 13.5px; }
.atd-funil-b .t .qtd { font-size: 12px; color: #6B3616; font-weight: 700; }
.atd-funil-b .t a { margin-left: auto; font-size: 12px; color: #7A3F18; }
.atd-funil-b > span { font-size: 12.5px; color: #3F4854; }
.atd-funil-b i { font-style: normal; color: #8A8F98; }
.atd-hist {
  display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px;
  border: 1px solid #E6E8EC; border-radius: 12px; background: #fff; cursor: pointer;
}
.atd-hist:hover { border-color: #E7CBB6; }
.atd-hist .l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.atd-hist .l1 i { font-style: normal; color: #5B6472; font-size: 12.5px; }
.atd-hist .l2 { display: flex; flex-wrap: wrap; gap: 4px; }
.atd-linha-c { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid #F1F2F4; }
.atd-linha-c i { font-style: normal; font-size: 11.5px; color: #8A8F98; }
.atd-linha-c b { font-size: 13px; }
.atd-linha-c span { font-size: 12.5px; color: #5B6472; }

/* --------------------------------------------------------------- janelas */
.atd-janela h3 { margin: 0 0 4px; font-size: 19px; color: #111; }
.atd-janela > p { margin: 0 0 14px; font-size: 13px; color: #5B6472; }
.atd-janela-pe { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.atd-janela-pe .erro { flex: 1; color: #B3261E; font-size: 12.5px; }
.atd-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #3F4854; margin: 6px 0; }
.atd-check input { margin-top: 2px; accent-color: #B8632A; }
.atd-aviso-amarelo { padding: 10px 12px; border-radius: 10px; background: #FFF8D6; border: 1px solid #F1E2A4; color: #5A4500; font-size: 13px; line-height: 1.5; }
.atd-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atd-achados { display: flex; flex-direction: column; gap: 2px; margin: -4px 0 8px; }
.atd-achados button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.atd-achados button:hover { background: #F5F1EA; }
.atd-achados span { display: flex; flex-direction: column; }
.atd-achados b { font-size: 13.5px; }
.atd-achados i { font-style: normal; font-size: 12px; color: #5B6472; }

.atd-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 12px; background: #111214; color: #fff; font-size: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.atd-toast.erro { background: #8C1D16; }

/* ------------------------------------------------------ outras áreas */
.atd-abas-vera { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.atd-abas-vera a { padding: 7px 14px; border-radius: 99px; border: 1px solid #D9DDE3; background: #fff; color: #3F4854; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.atd-abas-vera a.on { background: #F4E9DF; border-color: #B8632A; color: #6B3616; }
.atd-pag { max-width: 1100px; }
.atd-pag-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.atd-pag-topo h2 { margin: 0; font-size: 24px; font-weight: 800; color: #111; }
.atd-pag-topo p { margin: 4px 0 0; color: #5B6472; font-size: 14px; max-width: 70ch; }
.atd-pag-topo code { background: #F1F2F4; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.atd-pag-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.atd-tarefa-l, .atd-resp {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #E6E8EC; border-radius: 12px;
}
.atd-tarefa-l > div, .atd-resp > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atd-tarefa-l b { font-size: 14.5px; }
.atd-tarefa-l span { font-size: 12.5px; color: #5B6472; }
.atd-tarefa-l span i { font-style: normal; }
.atd-tarefa-l .desc { color: #3F4854; }
.atd-tarefa-l input { width: 18px; height: 18px; accent-color: #B8632A; }
.atd-tarefa-l.feita b { text-decoration: line-through; color: #8A8F98; }
.atd-resp b { font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: #7A3F18; }
.atd-resp span { font-size: 13px; color: #1A1A1A; font-weight: 600; }
.atd-resp p { margin: 2px 0 0; font-size: 13.5px; color: #5B6472; white-space: pre-wrap; }
.atd-cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atd-cal-nav b { font-size: 14px; min-width: 150px; text-align: center; }
.atd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.atd-cal-dia { min-height: 260px; background: #fff; border: 1px solid #E6E8EC; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.atd-cal-dia.hoje { border-color: #B8632A; box-shadow: inset 0 3px 0 #B8632A; }
.atd-cal-dia .cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.atd-cal-dia .cab span { font-size: 12px; color: #5B6472; text-transform: capitalize; }
.atd-cal-dia .cab b { font-size: 20px; color: #111; }
.atd-cal-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; background: #F5F1EA; border-left: 3px solid #8A8F98; }
.atd-cal-item.retorno { background: #F4E9DF; border-left-color: #B8632A; }
.atd-cal-item.feito { opacity: .55; }
.atd-cal-item i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #3F4854; }
.atd-cal-item b { font-size: 12.5px; line-height: 1.3; }
.atd-cal-item span { font-size: 11.5px; color: #5B6472; }

/* ------------------------------------------------------------- telas menores */
@media (max-width: 1280px) {
  .atd-ws { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .atd-col-detalhes { display: none; }
  .atd-ws.detalhes-abertos .atd-col-detalhes {
    display: flex; position: fixed; right: 0; top: 58px; bottom: 0; width: min(360px, 100vw); z-index: 60;
    box-shadow: -12px 0 32px rgba(17,18,20,.18);
  }
  .atd-det-fechar { display: inline-flex; }
}
@media (max-width: 1000px) {
  .atd-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sidebar.atd-rail { width: 64px; padding: 8px 4px; }
  .atd-rail-item span { display: none; }
  .atd-rail-badge { right: 6px; }
  .atd-ws { grid-template-columns: 1fr; }
  .atd-col-conversa { display: none; }
  .atd-ws.com-conversa .atd-col-lista { display: none; }
  .atd-ws.com-conversa .atd-col-conversa { display: flex; }
  .atd-voltar { display: inline-flex; }
  .atd-conv-topo { padding: 12px; gap: 10px; }
  .atd-conv-acoes { width: 100%; }
  .atd-conv-acoes .atd-btn { flex: 1; justify-content: center; }
  .atd-msg2, .atd-nota { max-width: 92%; }
  .atd-conv-corpo { padding: 12px; }
  .atd-comp, .atd-barra-fim { margin: 0 8px 8px; }
  .atd-dupla { grid-template-columns: 1fr; }
  .atd-cal { grid-template-columns: 1fr; }
  .atd-cal-dia { min-height: 0; }
}

/* ==========================================================================
   A barra escura em todos os módulos (16/09/2026)
   ========================================================================== */
.sidebar.atd-rail [hidden] { display: none !important; }
body:not(.atd-cheio) .sidebar.atd-rail {
  position: sticky; top: 58px; align-self: flex-start; height: calc(100vh - 58px);
}
.rail-modulo {
  padding: 6px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08);
  color: #B8632A; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; overflow-wrap: anywhere;
}
.rail-traco { height: 1px; margin: 6px 10px; background: rgba(255,255,255,.14); flex-shrink: 0; }
.sidebar.atd-rail .atd-rail-item { flex-shrink: 0; }
@media (max-width: 860px) {
  .rail-modulo { font-size: 9px; letter-spacing: .02em; }
}


/* ============================================================ FUNIL DO BDR (17/09/2026) */
.bd-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bd-topo-acoes { display: flex; gap: 8px; }
.bd-topo-acoes button { display: inline-flex; align-items: center; gap: 6px; }
.bd-novo { padding: 9px 16px; font-size: 13.5px; }
.bd-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.bd-pessoas { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-pessoa { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: #fff; border-radius: 99px; padding: 4px 12px 4px 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.bd-pessoa:first-child { padding-left: 12px; }
.bd-pessoa.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.bd-busca { flex: 1; min-width: 220px; }
.bd-av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.bd-av.mini { width: 18px; height: 18px; font-size: 8.5px; }
.bd-av-vazio { background: #C9CBD1; }

.bd-placar { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(300px, 2fr); gap: 10px; margin-bottom: 14px; }
.bd-met { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.bd-met span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.bd-met b { font-size: 22px; color: var(--navy); line-height: 1.15; }
.bd-met small { font-size: 11px; color: var(--text-muted); }
.bd-met.alerta { border-color: #F3C7C3; background: #FFF6F5; }
.bd-met.alerta b { color: var(--danger); }
.bd-met.atencao b { color: #8B4A1F; }
.bd-met.bom b { color: var(--success); }
.bd-funil-mini { background: var(--navy); color: #fff; border-radius: 10px; padding: 10px 14px; }
.bd-fm-rot { font-size: 11.5px; color: var(--gold-light); font-weight: 600; margin-bottom: 4px; }
.bd-fm-linha { display: flex; align-items: center; gap: 10px; }
.bd-fm-linha > div { display: flex; flex-direction: column; }
.bd-fm-linha b { font-size: 21px; line-height: 1.15; }
.bd-fm-linha span { font-size: 11px; color: rgba(255,255,255,.7); }
.bd-fm-linha i { color: var(--gold); display: inline-flex; }

.bd-quadro-wrap { overflow-x: auto; padding-bottom: 8px; }
.bd-quadro { display: flex; gap: 10px; align-items: stretch; min-width: 1520px; }
.bd-grupo { display: flex; flex-direction: column; gap: 6px; }
.bd-grupo-rot { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); display: flex; align-items: center; gap: 5px; padding-left: 2px; }
.bd-grupo.espelho .bd-grupo-rot { color: var(--text-muted); }
.bd-grupo-cols { display: flex; gap: 10px; flex: 1; }
.bd-col { width: 232px; background: #EEF0F3; border-radius: 12px; display: flex; flex-direction: column; border: 2px solid transparent; transition: border-color .12s, background .12s; }
.bd-col.espelho, .bd-col.misto { background: repeating-linear-gradient(135deg, #F5F1EA 0 8px, #EFF1F4 8px 16px); border: 1px dashed #CDD2DA; width: 214px; }
.bd-col.sobre { border-color: var(--gold); background: #F6EDE4; }
.bd-col-topo { padding: 10px 11px 6px; border-bottom: 1px solid rgba(0,0,0,.05); }
.bd-col-nome { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--navy); }
.bd-col.espelho .bd-col-nome { color: #4A5360; }
.bd-conta { margin-left: auto; background: #fff; border-radius: 99px; padding: 1px 8px; font-size: 11px; color: var(--text-muted); }
.bd-olho { color: var(--text-muted); display: inline-flex; }
.bd-col-valor { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.bd-col-valor span { display: inline-flex; align-items: center; gap: 3px; }
.bd-col-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.bd-col-lista { padding: 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; max-height: 64vh; min-height: 120px; }
.bd-vazio { font-size: 11.5px; color: #9AA1AC; text-align: center; padding: 22px 6px; border: 1px dashed #D5D9E0; border-radius: 8px; }

.bd-ponte { width: 108px; flex-shrink: 0; align-self: stretch; margin-top: 21px; border-radius: 12px; border: 2px dashed #E7B27A; background: #FAF5EF; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 10px 8px; color: #8A4B0C; transition: all .12s; }
.bd-ponte b { font-size: 12.5px; }
.bd-ponte span { font-size: 10.5px; color: #B07A45; }
.bd-ponte-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; }
.bd-ponte-regra { font-size: 10px; line-height: 1.35; color: #9C6A3A; margin-top: 6px; }
.bd-quadro.arrastando .bd-ponte { border-color: var(--gold); background: #F0DFD1; transform: scale(1.02); }
.bd-ponte.sobre { background: var(--gold) !important; color: #fff; }
.bd-ponte.sobre span, .bd-ponte.sobre .bd-ponte-regra { color: #fff; }

.bd-card { background: #fff; border-radius: 9px; padding: 9px 10px 8px; box-shadow: 0 1px 2px rgba(16,24,40,.08); border: 1px solid transparent; border-left: 3px solid #D5D9E0; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.bd-card:hover { box-shadow: 0 6px 18px rgba(16,24,40,.12); border-color: var(--gold-light); border-left-color: var(--gold); }
.bd-card[draggable="true"] { cursor: grab; }
.bd-card.arrastando { opacity: .45; transform: rotate(1.5deg); }
.bd-card.parado { border-left-color: #E0892B; background: linear-gradient(0deg, #FFFAF3, #fff); }
.bd-card.responde { border-left-color: var(--danger); background: #FFF6F5; }
.bd-card.espelho { background: #FBFBFC; border-left-color: #B9C0CB; }
.bd-card.perdido { opacity: .8; border-left-color: #D9A3A0; }
.bd-card-l1 { display: flex; justify-content: space-between; gap: 6px; }
.bd-card-l1 b { font-size: 13px; line-height: 1.3; color: var(--navy); }
.bd-cad { color: #9AA1AC; flex-shrink: 0; }
.bd-card-l2 { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.bd-card-l3 { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.bd-temp { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.bd-valor { font-size: 11px; font-weight: 600; color: #3C4450; }
.bd-dias { font-size: 10.5px; color: var(--text-muted); background: #F0F2F5; border-radius: 99px; padding: 1px 6px; }
.bd-dias.parado { background: #F0DFD1; color: #8B4A1F; font-weight: 700; }
.bd-card-tarefa, .bd-card-reuniao, .bd-card-respondeu, .bd-card-semp, .bd-card-ok, .bd-card-perdeu, .bd-card-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; margin-top: 6px; line-height: 1.35; }
.bd-card-tarefa { color: #3C4450; }
.bd-card-tarefa.hoje { color: #8B4A1F; font-weight: 600; }
.bd-card-tarefa.venceu { color: var(--danger); font-weight: 600; }
.bd-card-reuniao { color: #17724A; font-weight: 600; }
.bd-card-respondeu { color: var(--danger); font-weight: 700; }
.bd-card-semp { color: #8B4A1F; font-style: italic; }
.bd-card-ok { color: var(--success); font-weight: 600; }
.bd-card-perdeu { color: #9B3A35; }
.bd-card-sub { color: var(--text-muted); }
.bd-card-pessoas { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding-top: 6px; border-top: 1px solid #F0F2F5; }
.bd-quem { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.bd-part { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: #9AA1AC; }
.bd-rodape { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.bd-modal-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.bd-modal-acoes button { display: inline-flex; align-items: center; gap: 6px; }
.bd-motivos { display: flex; flex-direction: column; gap: 6px; }
.bd-motivo { display: flex; gap: 8px; align-items: center; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.bd-motivo:has(input:checked) { border-color: var(--gold); background: #FAF5EF; }
.bd-mr-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; color: var(--gold); }
.bd-mr-topo h3 { margin: 0; color: var(--navy); }
.bd-mr-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) {
  .bd-mr-grade { grid-template-columns: 1fr; }
  .bd-placar { grid-template-columns: 1fr 1fr; }
  .bd-funil-mini { grid-column: 1 / -1; }
}
.bd-mr-qualif { border-radius: 9px; padding: 9px 11px; font-size: 12.5px; margin: 4px 0 10px; }
.bd-mr-qualif.ok { background: #EAF5EF; color: #17724A; }
.bd-mr-qualif.baixa { background: #F6EDE4; color: #8A4B0C; }
.bd-mr-qualif textarea { width: 100%; margin-top: 7px; border: 1px solid #E7B27A; border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: 12.5px; }
.bd-mr-regra { background: #F6F7F9; border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.bd-mr-passo { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; color: #3C4450; }
.bd-mr-passo > span { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bd-nl-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 10px 0 4px; }
.bd-dup { background: #F6EDE4; border: 1px solid #F1C58F; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 6px; }
.bd-dup a { color: #8A4B0C; font-weight: 600; }

.bd-fp { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 9px 20px; border-bottom: 1px solid var(--border); background: #FCFCFD; }
.bd-fp-item { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.bd-fp-rot { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.bd-fp-papel { font-size: 10.5px; background: var(--navy); color: #fff; border-radius: 99px; padding: 1px 7px; font-weight: 600; }
.bd-fp-part { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px 2px 6px; font-size: 12.5px; font-weight: 600; color: #3C4450; background: #fff; }
.bd-fp-part small { font-weight: 500; color: var(--text-muted); font-size: 10.5px; }
.bd-fp-x { border: none; background: none; color: #9AA1AC; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.bd-fp-add { border: 1px dashed #C9CBD1; background: none; border-radius: 99px; padding: 3px 9px; font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
.bd-fp-marcar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.bd-fp-reuniao { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #17724A; font-weight: 600; }
.bd-so-olha-aviso { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px 20px; background: #EEF3F8; color: #2F4A63; font-size: 12.5px; line-height: 1.45; border-bottom: 1px solid #D7E2EC; }
.bd-so-olha-aviso > div { flex: 1; min-width: 240px; }
.bd-recado { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.bd-so-olha .vd-envio, .bd-so-olha .vd-corpo .btn-sm, .bd-so-olha .vd-corpo .btn-ghost, .bd-so-olha .vd-tarefa-acoes { display: none !important; }
.bd-so-olha .vd-corpo input, .bd-so-olha .vd-corpo textarea, .bd-so-olha .vd-corpo select { pointer-events: none; background: #F6F7F9; }

.bd-sem-tel { color: var(--danger); font-weight: 600; }
.bd-comp { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); background: #F0F2F5; border-radius: 99px; padding: 1px 7px; }


/* ------------------------------------------------ reunião gravada (17/09/2026) */
.vr-box { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; background: #FCFCFD; }
.vr-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--navy); }
.vr-topo b { font-size: 14px; }
.vr-tag { font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 2px 8px; background: #EEF0F3; color: var(--text-muted); }
.vr-tag.on { background: #EAF5EF; color: #17724A; }
.vr-tag.ok { background: #F6EDE4; color: #8A4B0C; }
.vr-mini { border: 1px dashed #C9CBD1; background: none; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.vr-mini:hover { border-color: var(--gold); color: var(--navy); }
.vr-link { font-size: 12px; margin-top: 8px; word-break: break-all; }
.vr-vazio { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.vr-resumo { margin-top: 10px; }
.vr-resumo b { font-size: 12px; color: var(--text-muted); }
.vr-resumo p { margin: 4px 0 8px; font-size: 13px; line-height: 1.55; }
.vr-fala { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.vr-fala span { background: var(--navy); color: #fff; border-radius: 99px; padding: 2px 8px; font-weight: 600; white-space: nowrap; }
.vr-criterios { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0; }
@media (max-width: 620px) { .vr-criterios { grid-template-columns: 1fr; } }
.vr-crit { border: 1px solid var(--border); border-left: 3px solid #C9CBD1; border-radius: 8px; padding: 7px 9px; background: #fff; }
.vr-crit.sim { border-left-color: var(--success); }
.vr-crit.parcial { border-left-color: var(--gold); }
.vr-crit.nao { border-left-color: var(--danger); }
.vr-crit b { font-size: 12.5px; }
.vr-crit span { float: right; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.vr-prova { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; font-style: italic; }
.vr-lista { margin: 8px 0; font-size: 12.5px; line-height: 1.5; }
.vr-lista h5 { margin: 0 0 4px; font-size: 12px; color: var(--navy); }
.vr-alerta { color: var(--danger); font-weight: 600; }
.vr-linha-info { font-size: 12.5px; margin-top: 5px; line-height: 1.5; }
.vr-linha-info.risco { color: #9B3A35; }
.vr-msg { background: #FAF5EF; border: 1px solid var(--gold-light); border-radius: 9px; padding: 9px 11px; margin-top: 9px; }
.vr-msg b { font-size: 12px; }
.vr-msg p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.vr-acoes { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.vr-transcricao { max-height: 55vh; overflow-y: auto; white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; background: #F6F7F9; border-radius: 8px; padding: 10px 12px; }


/* --------------------------------------- nota da conversa do BDR (17/09/2026) */
.vc-box { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-top: 16px; background: #FCFCFD; }
.vc-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--navy); }
.vc-topo b { font-size: 14px; }
.vc-nota { font-size: 13px; font-weight: 800; border-radius: 99px; padding: 2px 10px; }
.vc-nota.alta { background: #EAF5EF; color: #17724A; }
.vc-nota.media { background: #F6EDE4; color: #8A4B0C; }
.vc-nota.baixa { background: #FCEBEA; color: var(--danger); }
.vc-resumo { font-size: 13px; line-height: 1.55; margin: 9px 0; }
.vc-metricas { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.vc-num { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; min-width: 96px; }
.vc-num b { display: block; font-size: 16px; color: var(--navy); line-height: 1.2; }
.vc-num span { font-size: 10.5px; color: var(--text-muted); }
.vc-criterios { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
@media (max-width: 620px) { .vc-criterios { grid-template-columns: 1fr; } }
.vc-crit { border: 1px solid var(--border); border-left: 3px solid #C9CBD1; border-radius: 8px; padding: 7px 9px; background: #fff; }
.vc-crit.sim { border-left-color: var(--success); }
.vc-crit.parcial { border-left-color: var(--gold); }
.vc-crit.nao { border-left-color: var(--danger); }
.vc-crit b { font-size: 12.5px; }
.vc-peso { float: right; font-size: 10.5px; color: var(--text-muted); font-weight: 700; }
.vc-prova { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.vc-erro { background: #FCEBEA; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-top: 9px; line-height: 1.5; }
.vc-linha { font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.vc-treino { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: #3C4450; }
.vc-msg { background: #FAF5EF; border: 1px solid var(--gold-light); border-radius: 9px; padding: 9px 11px; margin-top: 10px; }
.vc-msg p { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* ---------------------------------------------- telas validadas (17/09/2026)
   A tela que o Bruno já conferiu fica verde no menu. A bolinha no canto só
   aparece para o administrador: vazia no hover, verde com ✓ quando validada. */
.atd-rail-item.tela-ok { background: rgba(46,184,104,.16); color: #7EE2A8; }
.atd-rail-item.tela-ok:hover { background: rgba(46,184,104,.24); color: #B5F2CE; }
.atd-rail-item.tela-ok.on { background: rgba(46,184,104,.28); color: #fff; }
.atd-rail-item.tela-ok.on::before { background: #2EB868; }
.side-item.tela-ok { background: #E6F6EC !important; color: #17663A; }
.side-item.tela-ok.active { background: #CFEFDC !important; }
.tela-ok-bola {
  position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(185,190,198,.55); font-style: normal; font-size: 10px; font-weight: 700;
  line-height: 13px; text-align: center; color: #fff; opacity: 0; transition: opacity .15s;
  cursor: pointer;
}
.side-item .tela-ok-bola { top: 50%; margin-top: -8px; right: 8px; border-color: rgba(15,23,42,.25); }
.atd-rail-item:hover .tela-ok-bola, .side-item:hover .tela-ok-bola { opacity: 1; }
.tela-ok-bola:hover { border-color: #2EB868; background: rgba(46,184,104,.3); }
.tela-ok-bola.sim { opacity: 1; background: #2EB868; border-color: #2EB868; }
@media (max-width: 860px) { .tela-ok-bola { top: 2px; right: 2px; } }

/* ================================================================ FUNIL 2.0 (18/09/2026)
   BDR e Consultor no mesmo desenho: abas, placar clicável, quadro/lista,
   card com próximo passo em destaque, menu ⋮, faixas de Fechados/Perdidos. */
.fx-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.fx-topo-acoes { display: flex; gap: 8px; }
.fx-topo-acoes button { display: inline-flex; align-items: center; gap: 6px; }
.fx-novo { padding: 9px 16px; font-size: 13.5px; background: #D17A3D; border-color: #D17A3D; color: #fff; }
.fx-novo:hover { background: #8B4A1F; }

.fx-abas { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.fx-aba { padding: 8px 2px 9px; font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.fx-aba:hover { color: var(--text); }
.fx-aba.on { color: #8B4A1F; border-bottom-color: #D17A3D; }

.fx-placar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(290px, 1.7fr); gap: 10px; margin-bottom: 14px; }
.fx-met { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; color: inherit; cursor: default; min-width: 0; }
.fx-met[data-so]:not([data-so=""]) { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.fx-met[data-so]:not([data-so=""]):hover { border-color: var(--gold-light); box-shadow: 0 3px 10px rgba(16,24,40,.07); }
.fx-met.on { border-color: #D17A3D; box-shadow: 0 0 0 2px rgba(232,116,12,.18); }
.fx-met-ic { width: 36px; height: 36px; border-radius: 9px; background: #EEF3F8; color: #2F5D8A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-met-txt { display: flex; flex-direction: column; min-width: 0; }
.fx-met-txt span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-met-txt b { font-size: 21px; color: var(--navy); line-height: 1.15; white-space: nowrap; }
.fx-met-txt small { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-met.alerta .fx-met-ic { background: #FCEBEA; color: var(--danger); }
.fx-met.alerta b { color: var(--danger); }
.fx-met.atencao .fx-met-ic { background: #FFF1DF; color: #8B4A1F; }
.fx-met.atencao b { color: #8B4A1F; }
.fx-met.bom .fx-met-ic { background: #EAF5EF; color: var(--success); }
.fx-res { display: flex; flex-direction: column; justify-content: center; }

.fx-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fx-barra-dir { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; justify-content: flex-end; min-width: 280px; }
.fx-busca { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; color: var(--text-muted); }
.fx-busca input { border: none; outline: none; flex: 1; padding: 8px 0; font: inherit; font-size: 13px; background: transparent; min-width: 0; }
.fx-busca:focus-within { border-color: var(--gold); }
.fx-sel { height: 36px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fx-filtros-bt.on { border-color: #D17A3D; color: #8B4A1F; font-weight: 600; }
.fx-filtros-w { position: relative; }
.fx-pop { position: absolute; right: 0; top: 42px; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.16); padding: 12px; width: 280px; }
.fx-pop[hidden] { display: none; }
.fx-pop-rot { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 2px 0 6px; }
.fx-pop-op { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fx-pop-op button { border: 1px solid var(--border); background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 12px; color: var(--text); cursor: pointer; }
.fx-pop-op button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.fx-modo { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.fx-modo button { border: none; background: none; height: 34px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fx-modo button.on { background: #FFF1DF; color: #8B4A1F; font-weight: 600; }
.fx-filtrando { font-size: 12px; color: #8A4B0C; background: #F6EDE4; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx-filtrando button { border: none; background: none; color: #8B4A1F; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; }

.fx-quadro-wrap { overflow-x: auto; padding-bottom: 8px; }
.fx-quadro { display: flex; gap: 10px; align-items: stretch; }
.fx-col { width: 256px; flex-shrink: 0; background: #F1F3F6; border-radius: 12px; display: flex; flex-direction: column; border: 2px solid transparent; border-top: 4px solid var(--fx-cor, #2F5D8A); transition: border-color .12s, background .12s; }
.fx-col.espelho { background: repeating-linear-gradient(135deg, #F6F7F9 0 8px, #F1F3F6 8px 16px); border: 1px dashed #CDD2DA; border-top: 4px solid var(--fx-cor, #2F5D8A); width: 236px; }
.fx-col.sobre { border-color: var(--gold); background: #F6EDE4; }
.fx-col-topo { padding: 10px 12px 8px; }
.fx-col-nome { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--navy); }
.fx-conta { background: #fff; border-radius: 99px; padding: 1px 8px; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.fx-col-valor { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.fx-col-valor span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.fx-col-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.fx-col-lista { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 62vh; min-height: 110px; }
.fx-add { margin: 0 8px 8px; border: 1px dashed #C9CED6; background: rgba(255,255,255,.6); border-radius: 8px; padding: 7px; font: inherit; font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.fx-add:hover { border-color: #D17A3D; color: #8B4A1F; background: #fff; }
.fx-ponte { width: 92px; margin-top: 0; }
.fx.arrastando .fx-ponte { border-color: var(--gold); background: #F0DFD1; }
.fx.arrastando .fx-faixa { border-style: dashed; border-color: #E7B27A; }

.fx-card { background: #fff; border-radius: 10px; padding: 10px 11px 9px; box-shadow: 0 1px 2px rgba(16,24,40,.08); border: 1px solid #E8EBF0; border-left: 3px solid var(--fx-cor, #D5D9E0); cursor: pointer; transition: box-shadow .12s, transform .12s; position: relative; }
.fx-card:hover { box-shadow: 0 6px 18px rgba(16,24,40,.12); }
.fx-card[draggable="true"] { cursor: grab; }
.fx-card.arrastando { opacity: .45; transform: rotate(1.5deg); }
.fx-card.espelho { background: #FBFBFC; border-left-color: #B9C0CB; }
.fx-card.parado { border-left-color: #E0892B; }
.fx-card.responde { border-left-color: var(--danger); background: #FFF8F7; }
.fx-card.fechado { border-left-color: #C9CED6; }
.fx-card-l1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.fx-card-l1 b { font-size: 13.5px; line-height: 1.3; color: var(--navy); }
.fx-mais { border: none; background: none; color: #7A8290; padding: 2px; margin: -3px -5px 0 0; border-radius: 6px; cursor: pointer; flex-shrink: 0; display: inline-flex; }
.fx-mais:hover { background: #F0F2F5; color: var(--navy); }
.fx-card-l2 { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.fx-card-l3 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.fx-valor { font-size: 12.5px; font-weight: 600; color: #2A313B; }
.fx-dias { font-size: 11px; font-weight: 600; color: #6B7380; background: #F0F2F5; border-radius: 6px; padding: 1px 6px; }
.fx-dias.novo { background: #FFF1DF; color: #8B4A1F; }
.fx-dias.ruim { background: #FDE3D0; color: #B3401E; }
.fx-acao { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px solid #F0F2F5; }
.fx-acao-ic { color: #2F5D8A; display: inline-flex; margin-top: 1px; flex-shrink: 0; }
.fx-acao b { display: block; font-size: 12.5px; font-weight: 600; color: #2F5D8A; line-height: 1.3; }
.fx-acao small { display: block; font-size: 12px; color: #3C4450; margin-top: 1px; }
.fx-acao.hoje small { color: #8B4A1F; font-weight: 600; }
.fx-acao.venceu .fx-acao-ic, .fx-acao.venceu b, .fx-acao.venceu small { color: var(--danger); }
.fx-acao.venceu small { font-weight: 700; }
.fx-acao.responde .fx-acao-ic, .fx-acao.responde b { color: var(--danger); }
.fx-acao.semp .fx-acao-ic, .fx-acao.semp b { color: #8B4A1F; }
.fx-acao.semp small { color: var(--text-muted); }
.fx-acao.ok .fx-acao-ic, .fx-acao.ok b { color: var(--success); }
.fx-acao.perdeu .fx-acao-ic, .fx-acao.perdeu b { color: #9B3A35; }
.fx-agendar { width: 100%; margin-top: 8px; border: 1px solid #D6DCE4; background: #fff; border-radius: 8px; padding: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: #2F5D8A; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.fx-agendar:hover { border-color: #D17A3D; color: #8B4A1F; background: #FAF5EF; }
.fx-card-pessoas { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.fx-papel { margin-left: auto; font-size: 10.5px; color: var(--text-muted); background: #F0F2F5; border-radius: 6px; padding: 1px 7px; font-weight: 600; }
.fx-acomp { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }

.fx-faixa { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; transition: border-color .12s, background .12s; }
.fx-faixa.sobre { border-color: var(--gold); background: #F6EDE4; }
.fx-faixa-topo { width: 100%; display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 10px 14px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.fx-faixa.fechados .fx-faixa-topo > svg:first-child { color: var(--success); }
.fx-faixa.perdidos .fx-faixa-topo > svg:first-child { color: var(--danger); }
.fx-faixa-topo span { color: var(--text-muted); font-size: 12px; }
.fx-faixa-n { margin-left: auto; font-style: normal; background: #F0F2F5; border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.fx-faixa.aberta .fx-faixa-topo > svg:last-child { transform: rotate(180deg); }
.fx-faixa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 0 12px 12px; max-height: 420px; overflow-y: auto; }

.fx-lista-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.fx-lista { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 820px; }
.fx-lista th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; background: #FAFBFC; }
.fx-lista th.on { color: #8B4A1F; }
.fx-lista th.on::after { content: " ↓"; }
.fx-lista td { padding: 9px 12px; border-bottom: 1px solid #F0F2F5; vertical-align: middle; }
.fx-lista tbody tr { cursor: pointer; }
.fx-lista tbody tr:hover td { background: #FAF5EF; }
.fx-lista td b { display: block; color: var(--navy); }
.fx-lista td small { color: var(--text-muted); font-size: 11.5px; }
.fx-lista-resp { display: inline-flex; align-items: center; gap: 6px; }
.fx-lista-passo.venceu { color: var(--danger); }
.fx-lista-passo.hoje b { color: #8B4A1F; }
.fx-lista-passo.responde { color: var(--danger); font-weight: 600; }
.fx-lista-passo.semp { color: #8B4A1F; font-style: italic; }
.fx-lista-vazia { text-align: center; color: var(--text-muted); padding: 28px !important; }

.fx-menu { position: fixed; z-index: 120; width: 220px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 36px rgba(16,24,40,.2); padding: 6px; }
.fx-menu button { width: 100%; display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.fx-menu button:hover { background: #F5F1EA; }
.fx-menu button.ok { color: var(--success); }
.fx-menu button.ruim { color: var(--danger); }
.fx-menu-rot { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px 10px 3px; }
.fx-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.fx-menu-nota { font-size: 12px; color: var(--text-muted); padding: 6px 10px 8px; line-height: 1.4; }

@media (max-width: 1280px) {
  .fx-placar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fx-res { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .fx-placar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fx-met { padding: 8px 10px; }
  .fx-met-ic { width: 30px; height: 30px; }
  .fx-met-txt b { font-size: 18px; }
  .fx-met-txt small { display: none; }
  .fx-barra { flex-direction: column; align-items: stretch; }
  .fx-barra .bd-pessoas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .fx-barra-dir { min-width: 0; width: 100%; justify-content: flex-start; }
  .fx-busca { flex-basis: 100%; }
  .fx-barra-dir > select.fx-sel { flex: 1 1 0; min-width: 0; }
  .fx-filtros-w { flex: 0 0 auto; }
  .fx-modo { flex: 1 1 100%; }
  .fx-modo button { flex: 1; justify-content: center; }
  .fx-pop { right: auto; left: 0; width: min(280px, 80vw); }
  .fx-met-txt span { white-space: normal; line-height: 1.25; }
  .fx-topo-acoes button { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
  .fx-quadro-wrap { scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; }
  .fx-col, .fx-col.espelho { width: 84vw; scroll-snap-align: start; }
  .fx-ponte { display: none; }
  .fx-topo-acoes { width: 100%; }
  .fx-topo-acoes button { flex: 1; justify-content: center; }
  .fx-mais { padding: 6px; margin: -7px -8px 0 0; }
}

/* 18/09 — BDR: mesa própria na tela inteira + "foto da direita" do consultor */
.fx-quadro.cheio .fx-col { flex: 1 1 0; width: auto; min-width: 220px; }
.fx-quadro.cheio .fx-col.espelho { flex: 1 1 0; width: auto; }
.fx-palco { overflow: hidden; padding-bottom: 8px; }
.fx-trilho { display: flex; width: 200%; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.fx-palco[data-lado="consultor"] .fx-trilho { transform: translateX(-50%); }
.fx-painel { width: 50%; flex-shrink: 0; padding-right: 2px; }
.fx-palco[data-lado="mesa"] .fx-painel-cons, .fx-palco[data-lado="consultor"] .fx-painel-mesa { visibility: hidden; transition: visibility 0s .38s; }
.fx-painel-cons .fx-quadro { padding-left: 0; }
.fx-virar { flex: 0 0 58px; align-self: stretch; border: 1px solid var(--border); background: #fff; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: #2F5D8A; font: inherit; padding: 10px 4px; transition: background .12s, border-color .12s; }
.fx-virar:hover { background: #EEF3F8; border-color: #9DB4CC; }
.fx-virar b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; letter-spacing: .02em; }
.fx-virar.dir b { transform: none; }
.fx-virar.dir { background: #1A1A1A; border-color: #1A1A1A; color: #fff; }
.fx-virar.dir:hover { background: #2F5D8A; border-color: #2F5D8A; }
.fx-lados { display: none; }
.fx-virar-n { background: #1F7A4D; color: #fff; border-radius: 99px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; }
.fx-painel-mesa .fx-ponte { flex: 0 0 92px; }
@media (max-width: 760px) {
  .fx-quadro.cheio .fx-col, .fx-quadro.cheio .fx-col.espelho { flex: 0 0 78vw; }
  .fx-painel .fx-quadro { overflow-x: auto; scroll-snap-type: x mandatory; }
  .fx-virar { display: none; }
  .fx-lados { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; margin-bottom: 8px; }
  .fx-virar-cel { flex: 1; border: none; background: none; padding: 9px 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  .fx-virar-cel.on { background: #1A1A1A; color: #fff; }
  .fx-virar-cel i { font-style: normal; background: #1F7A4D; color: #fff; border-radius: 99px; padding: 0 7px; font-size: 11px; }
}
/* fim FUNIL 2.0 */


/* ==========================================================================
   BRICK + BRN + Tião (18/09/2026)
   Rodapé e pé da barra lateral: BRICK à esquerda (com o convite do tijolo),
   BRN à direita. Discreto — a cor só acende no toque.
   ========================================================================== */
.bk-assinatura { display: flex; flex-direction: column; gap: 10px; line-height: 1.3; }
.bk-assinatura.compacta { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.bk-brick { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-muted); text-align: left; }
.bk-brick img { height: 17px; width: auto; display: block; flex: none; }
.bk-frase { font-size: 11.5px; }
.bk-frase b { color: #A85307; font-weight: 600; }
.bk-brick:hover .bk-frase b { text-decoration: underline; }
.bk-brn { display: flex; align-items: center; gap: 8px; color: var(--text-muted); text-decoration: none; font-size: 11px; }
.bk-brn img { height: 12px; width: auto; display: block; opacity: .85; }
.bk-brn .ver { font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
.bk-brn .bk-credito b { font-weight: 600; }
.bk-brn:hover img { opacity: 1; }
.bk-brn:hover .bk-credito b { color: #A85307; }
/* Na barra lateral, empilhado e sem a frase longa. */
.sidebar-pe .bk-brick { flex-direction: column; align-items: flex-start; gap: 5px; }
.sidebar-pe .bk-frase { font-size: 10.5px; }
.sidebar-pe .bk-brn { flex-wrap: wrap; row-gap: 3px; }
/* O balão do Tião mora no canto direito de baixo: o rodapé deixa o lugar dele livre. */
.app-rodape { padding-right: 104px; }
@media (max-width: 720px) {
  .app-rodape { padding-right: 90px; }
  .bk-assinatura.compacta { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Entrada: as duas marcas abaixo do cartão de login. */
.bk-login { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.bk-login .bk-feito { display: flex; align-items: center; gap: 9px; }
.bk-login .bk-feito img { height: 16px; }
/* O balão do Tião sobe um pouco onde o canto de baixo já tem botão (Atendimento). */
body.atd-cheio #tiao-balao { --tiao-baixo: 92px; }

/* ================================================================ PRÉ-VENDA 2.0 (18/09/2026) */
/* potinhos das tarefas no card */
.fx-pots { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; padding-top: 7px; border-top: 1px solid #F0F2F5; min-height: 22px; }
.fx-pot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; font-style: normal; }
.fx-pot.vencida { background: #D93025; box-shadow: 0 0 0 2px #FDE2DF; }
.fx-pot.hoje { background: #F29B24; box-shadow: 0 0 0 2px #FFEBCF; }
.fx-pot.futura { background: #2E9E62; box-shadow: 0 0 0 2px #DDF2E6; }
.fx-pot.feita { background: #C9CED6; }
.fx-pot.vazio { background: transparent; border: 1.5px dashed #C99A62; }
.fx-pot-mais, .fx-pot-sem { font-size: 10.5px; color: var(--text-muted); }
.fx-pot-sem { color: #8B4A1F; font-style: italic; }
.fx-pot-atraso { font-size: 10.5px; color: #D93025; font-weight: 700; margin-left: 2px; }
.fx-respondeu { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--danger); border-radius: 99px; padding: 1px 7px; }
.fx-seg { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; color: #5B2E8A; background: #F1E8FA; border-radius: 6px; padding: 2px 8px; letter-spacing: .01em; }
.fx-seg.vazio { color: #9AA1AC; background: #F5F1EA; font-weight: 500; font-style: italic; }
.fx-status { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11.5px; color: #3C4450; }
.fx-status.ok { color: var(--success); font-weight: 600; }
.fx-status.perdeu { color: #9B3A35; }
.fx-acomp-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-muted); margin-left: 4px; }
.fx-card.novo { border: 2px solid #1FAF5A; border-left-width: 5px; background: linear-gradient(180deg, #EFFBF3, #fff 60%); box-shadow: 0 4px 16px rgba(31,175,90,.18); }
.fx-novo-selo { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: -2px 0 6px; font-size: 10.5px; font-weight: 800; color: #0F7A3D; text-transform: uppercase; letter-spacing: .04em; }
.fx-novo-selo span { text-transform: none; font-weight: 600; color: #3C4450; background: #fff; border: 1px solid #BFE7CD; border-radius: 99px; padding: 0 7px; letter-spacing: 0; }
.fx-novo-mini { font-size: 10px; color: #fff; background: #1FAF5A; border-radius: 99px; padding: 0 6px; }
.fx-met.novo { border-color: #1FAF5A; background: #EFFBF3; }
.fx-met.novo .fx-met-ic { background: #1FAF5A; color: #fff; }
.fx-met.novo b { color: #0F7A3D; }
.fx-datas { display: inline-flex; gap: 6px; }
.fx-datas .fx-sel { width: 142px; }
.fx-pop-sel { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fx-pop-sel span { width: 70px; font-size: 12px; color: var(--text-muted); }
.fx-pop-sel select { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12.5px; padding: 0 6px; }
.fx-pop { width: 330px; max-height: 70vh; overflow-y: auto; }
.fx-lista td small { display: block; }
.fx-lista-passo .fx-pots { border: none; margin: 0; padding: 0; }
.fx-lista-prox { display: block; font-size: 11.5px; color: #3C4450; margin-top: 3px; }
.fx-lista-prox.venceu { color: var(--danger); }
.fx-class { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

/* ficha em tela cheia */
.vd-drawer-fundo.pv-cheia { justify-content: center; align-items: stretch; padding: 18px; }
.pv-cheia .vd-drawer { width: min(1480px, 100%); height: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.pv-cheia .vd-drawer-topo { padding: 14px 22px 12px; align-items: center; }
.pv-cheia .vd-drawer-topo b { font-size: 19px; }
.pv-voltar { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); cursor: pointer; margin-right: 14px; white-space: nowrap; }
.pv-voltar:hover { color: var(--navy); }
.pv-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, 430px) 1fr; }
.pv-lado { background: #F6F7F9; border-right: 1px solid var(--border); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pv-principal { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pv-principal .vd-corpo { flex: 1; overflow-y: auto; }
.pv-bloco { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; }
.pv-bloco:empty { display: none; }
.pv-tarefas { border: 2px solid #1A1A1A; box-shadow: 0 6px 20px rgba(16,24,40,.08); }
.pv-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pv-bloco-topo b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--navy); }
.pv-contas { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #3C4450; }
.pv-contas .fx-pot { margin-left: 6px; }
.pv-cad { display: flex; align-items: center; gap: 6px; font-size: 12px; background: #EEF3F8; color: #2F4A63; border-radius: 8px; padding: 7px 9px; margin-bottom: 10px; }
.pv-cad span { flex: 1; }
.pv-cad.vazio { background: #FAF5EF; color: #8A4B0C; }
.pv-cad select { border: 1px solid #E7B27A; border-radius: 6px; font: inherit; font-size: 12px; padding: 3px 5px; background: #fff; max-width: 190px; }
.pv-t { display: flex; gap: 9px; padding: 9px 2px; border-top: 1px solid #F0F2F5; }
.pv-t > .fx-pot { margin-top: 4px; }
.pv-t-corpo { flex: 1; min-width: 0; }
.pv-t-l1 { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--navy); }
.pv-t-l1 b { font-weight: 600; }
.pv-t-l2 { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.pv-t.vencida .pv-t-l2 { color: #D93025; font-weight: 700; }
.pv-t.hoje .pv-t-l2 { color: #8B4A1F; font-weight: 700; }
.pv-t-cad { color: #2F5D8A; }
.pv-t-script { margin-top: 5px; font-size: 12px; }
.pv-t-script summary { cursor: pointer; color: #2F5D8A; font-size: 11.5px; }
.pv-t-script > div { background: #F6F7F9; border-radius: 8px; padding: 8px 10px; margin: 5px 0; line-height: 1.45; color: #2A313B; }
.pv-t-acoes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.pv-feito { border: none; background: #1F7A4D; color: #fff; border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pv-feito:disabled { opacity: .5; }
.pv-mini { border: 1px solid var(--border); background: #fff; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 11.5px; color: #3C4450; cursor: pointer; }
.pv-mini:hover { border-color: #9DB4CC; }
.pv-mini.ruim { color: var(--danger); }
.pv-resultado { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; background: #F6F7F9; border-radius: 8px; padding: 8px; }
.pv-resultado span { font-size: 12px; font-weight: 700; width: 100%; }
.pv-resultado input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12px; }
.pv-nova { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #D5D9E0; display: flex; flex-direction: column; gap: 6px; }
.pv-nova.editar { border: none; padding: 0; margin: 0; }
.pv-nova input, .pv-nova select { border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; font: inherit; font-size: 12.5px; min-width: 0; }
.pv-nova-l2 { display: flex; gap: 6px; }
.pv-nova-l2 { flex-wrap: wrap; }
.pv-nova-l2 select { flex: 1 1 110px; }
.pv-nova-l2 input[type="date"] { flex: 1 1 130px; }
.pv-nova-l2 input[type="time"] { flex: 0 1 96px; }
.pv-nova-l2 .btn-sm { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pv-atalhos { display: flex; gap: 5px; flex-wrap: wrap; }
.pv-feitas { margin-top: 8px; font-size: 12px; }
.pv-feitas summary { cursor: pointer; color: var(--text-muted); }
.pv-t.feita { opacity: .7; }
.pv-vazio { font-size: 12.5px; color: #8A4B0C; background: #FAF5EF; border-radius: 8px; padding: 10px; }
.pv-dica { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin: 4px 0 10px; }
.pv-ok { font-size: 11.5px; color: var(--success); font-weight: 600; }
.pv-carregando { font-size: 12px; color: var(--text-muted); }
.pv-lado .form-row { margin-bottom: 8px; }
.pv-lado .form-row label { font-size: 11.5px; }
.pv-lado .form-row input, .pv-lado .form-row select { font-size: 12.5px; padding: 6px 8px; }
.pv-nota { font-size: 15px; font-weight: 800; border-radius: 99px; padding: 2px 10px; }
.pv-nota.quente, .pv-faixa.quente { background: #FCEBEA; color: #B3261E; }
.pv-nota.morno, .pv-faixa.morno { background: #F0DFD1; color: #8B4A1F; }
.pv-nota.frio, .pv-faixa.frio { background: #E8F0F6; color: #4C6B86; }
.pv-faixa { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 6px 9px; margin-bottom: 8px; }
.pv-crit { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; padding: 6px 4px; border-bottom: 1px solid #F0F2F5; cursor: pointer; }
.pv-crit input { margin-top: 2px; }
.pv-crit span { flex: 1; }
.pv-crit small { display: block; color: var(--success); font-size: 11px; }
.pv-crit b { color: #2F5D8A; font-size: 12px; }
.pv-crit.mini { border: none; padding: 3px 4px; font-size: 12px; }
.pv-check { margin: 8px 0; font-size: 12.5px; }
.pv-check summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.pv-score-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* sino */
.pv-sino-w { position: relative; display: flex; align-items: center; margin: 0 6px; }
.pv-sino { position: relative; background: transparent; border: 1px solid rgba(255,255,255,.18); color: #fff; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pv-sino:hover { background: rgba(255,255,255,.08); }
.pv-sino i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 99px; background: #1FAF5A; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #000; }
.pv-sino-pop { position: absolute; right: 0; top: 46px; width: 340px; max-height: 70vh; overflow-y: auto; background: #fff; color: var(--text); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.3); z-index: 200; padding: 8px; }
.pv-sino-pop[hidden] { display: none; }
.pv-sino-topo { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; }
.pv-sino-topo button { border: none; background: none; color: #2F5D8A; font-size: 11.5px; cursor: pointer; }
.pv-sino-item { width: 100%; text-align: left; border: none; background: none; border-radius: 8px; padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; }
.pv-sino-item:hover { background: #F5F1EA; }
.pv-sino-item.nova { background: #EFFBF3; }
.pv-sino-item b { font-size: 13px; color: var(--navy); }
.pv-sino-item span { font-size: 12px; color: #3C4450; }
.pv-sino-item small { font-size: 11px; color: var(--text-muted); }
.pv-aviso { position: fixed; right: 20px; bottom: 20px; z-index: 300; background: #0F7A3D; color: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 14px 36px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 2px; cursor: pointer; max-width: 340px; animation: pvSobe .25s ease-out; }
.pv-aviso b { font-size: 14px; }
.pv-aviso span { font-size: 12.5px; opacity: .92; }
@keyframes pvSobe { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* parametrizações e cadências */
.pv-params { margin-top: 14px; }
.pv-abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.pv-abas button { border: none; background: none; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.pv-abas button.on { color: var(--navy); border-bottom-color: #D17A3D; }
.pv-item { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.pv-item input { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 13px; background: transparent; }
.pv-item input:hover, .pv-item input:focus { border-color: var(--border); background: #fff; }
.pv-item.off input { color: #9AA1AC; text-decoration: line-through; }
.pv-arvore { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.pv-arvore > .pv-item input { font-weight: 700; }
.pv-filhos { margin-left: 18px; border-left: 2px solid #EEF0F3; padding-left: 10px; }
.pv-lista-itens { columns: 3 260px; column-gap: 18px; }
.pv-lista-itens .pv-item { break-inside: avoid; }
.pv-add { display: flex; gap: 6px; margin: 6px 0; }
.pv-add input { flex: 1; max-width: 320px; border: 1px dashed #C9CED6; border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12.5px; }
.pv-gatilhos { display: flex; flex-direction: column; gap: 4px; }
.pv-gat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #F0F2F5; font-size: 13px; }
.pv-gat select { min-width: 240px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12.5px; }
.pv-gat-funil { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 10px; }
.pv-cad-topo { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.pv-cad-topo h3 { margin: 0; }
.pv-cad-topo .btn-sm { display: inline-flex; align-items: center; gap: 5px; }
.pv-cadencia.off { opacity: .6; }
.pv-cad-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-cad-nome { font-size: 15px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font-family: inherit; min-width: 260px; }
.pv-cad-nome:hover, .pv-cad-nome:focus { border-color: var(--border); }
.pv-passos { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.pv-passo { display: grid; grid-template-columns: 90px 150px 1fr 30px; gap: 6px; align-items: center; background: #F6F7F9; border-radius: 9px; padding: 8px; }
.pv-passo label { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.pv-passo label input { width: 46px; }
.pv-passo input, .pv-passo select, .pv-passo textarea { border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 12.5px; min-width: 0; }
.pv-passo textarea { grid-column: 1 / -1; resize: vertical; line-height: 1.4; }
.pv-camp td small { display: block; color: var(--text-muted); font-size: 11px; }
.pv-camp tr.pv-sem td { color: #6B7380; }

@media (max-width: 900px) {
  .vd-drawer-fundo.pv-cheia { padding: 0; }
  .pv-cheia .vd-drawer { border-radius: 0; }
  .pv-grade { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .pv-lado, .pv-bloco, .pv-principal { min-width: 0; }
  .pv-cad { flex-wrap: wrap; }
  .pv-lado { border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  .pv-principal .vd-corpo { overflow: visible; }
  .fx-class { grid-template-columns: 1fr; }
  .pv-passo { grid-template-columns: 1fr 1fr; }
  .pv-passo input[data-f="titulo"] { grid-column: 1 / -1; }
  .pv-gat { flex-direction: column; align-items: stretch; }
  .pv-gat select { min-width: 0; }
  .pv-sino-pop { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; }
}
.pv-descartar { margin-top: 6px; color: #6B7380; }
.pv-descartado { margin-top: 8px; font-size: 12px; color: #6B3616; background: #F6EDE4; border-radius: 8px; padding: 7px 9px; }
.fx-faixa.descartados .fx-faixa-topo > svg:first-child { color: #9AA1AC; }
.pv-desc-lista { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.pv-desc-item { display: grid; grid-template-columns: 1.4fr 1fr auto auto auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 6px 4px; border-bottom: 1px solid #F0F2F5; }
.pv-desc-item small { display: block; color: var(--text-muted); font-size: 11px; }
.pv-desc-mot { color: #6B3616; }
.pv-ev { border-top: 1px solid #F0F2F5; padding: 7px 0; font-size: 12.5px; opacity: .8; }
.pv-ev.foi { opacity: 1; }
.pv-ev-l1 { display: flex; justify-content: space-between; gap: 8px; }
.pv-ev-l1 small { color: var(--text-muted); }
.pv-ev-l2 { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.pv-ev-l2 .ok { color: var(--success); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pv-ev-l2 .nao { color: #9B3A35; }
.pv-ev-fb { font-size: 11.5px; color: #3C4450; background: #F6F7F9; border-radius: 7px; padding: 5px 8px; margin-top: 5px; }
.pv-ev-fb i { display: block; margin-top: 3px; color: var(--text-muted); }
@media (max-width: 900px) { .pv-desc-item { grid-template-columns: 1fr auto; } }
/* fim PRÉ-VENDA 2.0 */

/* ================================================================ AMIGO VP (18/09/2026) */
.am-topo { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-bottom: 12px; }
.am-kpis { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.am-topo .fx-novo { align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.am-kpi { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-kpi span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.am-kpi b { font-size: 22px; color: var(--navy); line-height: 1.15; }
.am-kpi small { font-size: 10.5px; color: var(--text-muted); }
.am-kpi.bom b { color: var(--success); }
.am-kpi.novo { border-color: #1FAF5A; background: #EFFBF3; }
.am-kpi.novo b { color: #0F7A3D; }
.am-kpi.alerta b { color: var(--danger); }
.am-corpo { padding: 14px; }
.am-st { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 8px; background: #F0F2F5; color: #3C4450; white-space: nowrap; }
.am-st.convertida, .am-st.entregue { background: #EAF5EF; color: var(--success); }
.am-st.perdida, .am-st.cancelado { background: #FCEBEA; color: var(--danger); }
.am-st.liberado { background: #F6EDE4; color: #8B4A1F; }
.am-saldo { color: var(--gold); font-size: 15px; }
.am-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 12px; }
.am-premio { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.am-premio.off { opacity: .55; }
.am-premio.novo { border-style: dashed; align-items: center; justify-content: center; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; min-height: 140px; flex-direction: row; }
.am-premio-topo { display: flex; justify-content: space-between; align-items: center; }
.am-premio-topo b { font-size: 16px; color: var(--gold); }
.am-prog { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: 2px 7px; background: #F6EDE4; color: #8B4A1F; }
.am-prog.game { background: #EEF3F8; color: #2F5D8A; }
.am-in { border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 14px; font-weight: 700; }
.am-in.desc { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.am-in:hover, .am-in:focus { border-color: var(--border); }
.am-estoque { font-size: 12px; color: #3C4450; }
.am-estoque.baixo { color: var(--danger); }
.am-premio-acoes { display: flex; gap: 5px; flex-wrap: wrap; }
.am-ficha { margin-top: 8px; font-size: 12px; background: #F6EDE4; color: #6B3616; border-radius: 8px; padding: 7px 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.am-ficha input { flex: 1; min-width: 160px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 12px; }
.gm-periodos { display: flex; gap: 6px; margin-bottom: 10px; }
.gm-periodos button { border: 1px solid var(--border); background: #fff; border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.gm-periodos button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.gm-grid { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
.gm-lado { padding: 12px; }
.gm-pos { font-weight: 800; color: var(--text-muted); width: 34px; }
.gm-pos.p1 { color: #B8860B; } .gm-pos.p2 { color: #8A8F98; } .gm-pos.p3 { color: #A0522D; }
.gm-barra { height: 6px; background: #EEF0F3; border-radius: 99px; overflow: hidden; margin: 4px 0 2px; max-width: 160px; }
.gm-barra i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.gm-barra.grande { max-width: none; height: 9px; margin-top: 10px; }
.gm-conq { color: #B8860B; font-size: 14px; margin-right: 1px; }
.gm-conqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gm-conq-tag { font-size: 11.5px; background: #FFF6DB; color: #7A5A00; border-radius: 99px; padding: 3px 9px; }
.gm-mot { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 5px 0; border-bottom: 1px solid #F0F2F5; font-size: 12.5px; }
.gm-mot small { color: var(--text-muted); font-size: 11px; grid-column: 1 / -1; }
.gm-pts { width: 70px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font: inherit; }
.gm-lancar { max-width: 520px; }
.gm-extrato { max-height: 45vh; overflow-y: auto; margin-top: 8px; }
.gm-lin { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #F0F2F5; font-size: 12.5px; }
.gm-lin small { display: block; color: var(--text-muted); font-size: 11px; }
.gm-lin b { color: var(--success); }
.gm-lin b.neg { color: var(--danger); }
@media (max-width: 1100px) { .am-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .am-kpis { grid-template-columns: 1fr 1fr; } }
.gm-campeoes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.gm-camp { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: #fff; min-width: 0; }
.gm-camp.geral { border-color: var(--gold); background: #FAF5EF; }
.gm-camp > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 5px; }
.gm-camp-l { display: grid; grid-template-columns: 22px 1fr; gap: 0 4px; font-size: 12px; margin-top: 3px; }
.gm-camp-l i { font-style: normal; font-weight: 800; color: var(--gold); }
.gm-camp-l b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-camp-l small { grid-column: 2; color: var(--text-muted); font-size: 10.5px; }
@media (max-width: 1100px) { .gm-campeoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gm-campeoes { grid-template-columns: 1fr 1fr; } }
/* fim AMIGO VP */

/* ================================================================ FÓRMULA VP (18/09/2026) */
.fvp-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fvp-mes { display: flex; align-items: center; gap: 10px; }
.fvp-mes b { font-size: 15px; text-transform: capitalize; min-width: 170px; text-align: center; }
.fvp-mes button { border: 1px solid var(--border); background: #fff; border-radius: 8px; width: 32px; height: 32px; font-size: 18px; cursor: pointer; }
.fvp-pista { position: relative; background: #0A0A0A; border-radius: 16px; padding: 26px 20px 0; margin-bottom: 14px; overflow: hidden; }
.fvp-quadriculado { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: repeating-conic-gradient(#fff 0 25%, #0A0A0A 0 50%) 0 0 / 20px 20px; opacity: .9; }
.fvp-podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; max-width: 860px; margin: 0 auto; }
.fvp-degrau { background: #1A1A1A; border: 1px solid #2A2A2A; border-bottom: none; border-radius: 14px 14px 0 0; color: #fff; text-align: center; padding: 16px 12px 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fvp-degrau.vazio { background: transparent; border: none; cursor: default; }
.fvp-degrau.p1 { padding-top: 22px; padding-bottom: 38px; border-color: var(--gold); box-shadow: 0 -8px 30px rgba(184,99,42,.35); }
.fvp-degrau.p2 { padding-bottom: 24px; }
.fvp-degrau .bd-av { width: 44px; height: 44px; font-size: 15px; }
.fvp-degrau b { font-size: 14px; }
.fvp-degrau small { color: #A8A8A8; font-size: 11px; }
.fvp-pos { font-size: 22px; font-weight: 900; color: var(--gold); }
.fvp-degrau.p1 .fvp-pos { font-size: 30px; }
.fvp-idx { font-size: 34px; font-weight: 900; line-height: 1; margin-top: 6px; }
.fvp-idx small { display: block; font-size: 10px; font-weight: 600; color: #A8A8A8; text-transform: uppercase; letter-spacing: .08em; }
.fvp-pts { font-size: 12px; color: #E8A06F; }
.fvp-selos span { font-size: 15px; }
.fvp-grid .fx-lista td { vertical-align: middle; }
.fvp-gauge { position: relative; width: 150px; height: 22px; background: #EEF0F3; border-radius: 99px; overflow: hidden; display: flex; align-items: center; }
.fvp-gauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.fvp-gauge b { position: relative; z-index: 1; font-size: 12px; margin-left: 8px; color: #fff; }
.fvp-gauge.ouro i { background: linear-gradient(90deg, #8B4A1F, #B8632A, #E8A06F); }
.fvp-gauge.bom i { background: #1F7A4D; }
.fvp-gauge.meio i { background: #D17A3D; }
.fvp-gauge.baixo i { background: #B3261E; }
.fvp-gauge.vazio { background: #F5F1EA; }
.fvp-gauge.vazio b { color: var(--text-muted); }
.fvp-gauge.vazio small { position: relative; font-size: 10.5px; color: var(--text-muted); margin-left: 6px; }
.fvp-cob { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.fvp-tele { min-width: min(520px, 90vw); }
.fvp-crit { display: grid; grid-template-columns: 1fr auto 150px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #F0F2F5; font-size: 12.5px; }
.fvp-crit small { display: block; color: var(--text-muted); font-size: 11px; }
.fvp-crit > span { color: var(--text-muted); font-size: 11px; }
.fvp-elogio { padding: 12px 14px; margin-bottom: 12px; }
.fvp-elogio-l { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fvp-elogio-l select, .fvp-elogio-l input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; }
.fvp-elogio-l input { flex: 1; min-width: 220px; }
.fvp-feed { display: flex; flex-direction: column; gap: 8px; }
.fvp-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.fvp-item.foco { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,99,42,.18); }
.fvp-ic { width: 44px; height: 44px; border-radius: 12px; background: #0A0A0A; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.fvp-item b { font-size: 14px; color: var(--navy); }
.fvp-item p { margin: 3px 0; font-size: 12.5px; color: #3C4450; }
.fvp-item small { font-size: 11px; color: var(--text-muted); }
.fvp-aplauso { border: 1px solid var(--border); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.fvp-aplauso.on { background: #FAF5EF; border-color: var(--gold); cursor: default; }
.fvp-crits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fvp-crit-g { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.fvp-crit-g > b { display: block; margin-bottom: 6px; }
.fvp-crit-l { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid #F0F2F5; font-size: 12.5px; }
.fvp-crit-l span { flex: 1 1 100%; }
.fvp-crit-l label { font-size: 11.5px; color: var(--text-muted); }
.fvp-crit-l input { width: 60px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 5px; font: inherit; }
.fvp-premiar { display: flex; gap: 8px; flex-wrap: wrap; }
.fvp-premiar input, .fvp-premiar select { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; }
.fvp-premiar #fpTxt { flex: 1; min-width: 220px; }
.pv-aviso.fvp { background: #0A0A0A; border: 1px solid var(--gold); padding-top: 16px; overflow: hidden; }
.pv-aviso.fvp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-conic-gradient(#fff 0 25%, #0A0A0A 0 50%) 0 0 / 12px 12px; }
.pv-aviso-ap { margin-top: 6px; align-self: flex-start; border: 1px solid var(--gold); background: transparent; color: #fff; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
@media (max-width: 900px) {
  .fvp-podio { gap: 6px; }
  .fvp-degrau { padding: 10px 4px 12px; }
  .fvp-idx { font-size: 24px; }
  .fvp-crits { grid-template-columns: 1fr; }
  .fvp-crit { grid-template-columns: 1fr; }
}
/* fim FÓRMULA VP */