/* ============================================================
   ECS — UI v3 (camada de design por cima do styles.css)
   Principios: hierarquia clara, grade de 4/8 px, alvos >= 44 px,
   estados explicitos (a fazer / feito / alerta), contraste AA,
   movimento curto com proposito e respeito a prefers-reduced-motion.
   ============================================================ */

:root {
  /* Superficies em camadas (profundidade sem sombras pesadas) */
  --bg: #090b14;
  --bg-card: #11142a;
  --bg-elevated: #171b36;
  --bg-input: #0d1022;
  --surface-3: #1e2344;

  --border: rgba(148, 163, 255, 0.10);
  --border-md: rgba(148, 163, 255, 0.16);
  --hairline: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));

  --text: #e6e9f7;
  --text-dim: #9aa4c2;
  --text-muted: #5f6a8c;

  /* Marca */
  --violet: #7c5cff;
  --violet-dim: #5b3fe0;
  --violet-glow: rgba(124, 92, 255, .24);
  --accent-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #3b82f6 100%);
  --accent-soft: rgba(124, 92, 255, .12);

  /* Semantica */
  --ok: #22c55e;
  --ok-soft: rgba(34, 197, 94, .14);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, .14);
  --risk: #ef4444;
  --risk-soft: rgba(239, 68, 68, .14);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, .14);

  /* Forma e movimento */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(3, 5, 20, .35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 48px rgba(3, 5, 20, .55);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Base ── */
body {
  font-family: var(--font);
  font-size: 14.5px;
  letter-spacing: -0.006em;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(99, 102, 241, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(139, 92, 246, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.02em; font-weight: 700; }
.num, .tabular, .stop-num, .panel-kpi-value, .work-num, .avail-cell { font-variant-numeric: tabular-nums; }
::selection { background: var(--violet-glow); }
:focus-visible { outline: 2px solid #a78bfa !important; outline-offset: 2px; border-radius: 8px; }

/* ── Cartoes ── */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) , var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-header { border-bottom-color: var(--border); }
/* Caixas coloridas de indicadores (Painel, Relatorios): o fundo do .card acima nao pode apagar a cor delas */
.card.kpi-purple { background: linear-gradient(135deg, #4c1d95, #7c3aed); border-color: transparent; }
.card.kpi-teal   { background: linear-gradient(135deg, #0e5461, #0e9dbd); border-color: transparent; }
.card.kpi-green  { background: linear-gradient(135deg, #14532d, #16a34a); border-color: transparent; }
.card.kpi-red    { background: linear-gradient(135deg, #7f1d1d, #dc2626); border-color: transparent; }
.card.kpi-aqua   { background: linear-gradient(135deg, #0f766e, #1d4ed8); border-color: transparent; }
.card.kpi-blue   { background: linear-gradient(135deg, #1e3a8a, #3b82f6); border-color: transparent; }

/* ── Botoes (retorno ao toque) ── */
.btn { border-radius: 12px; font-weight: 600; transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s; }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--accent-grad) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, .35);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(99, 102, 241, .5); filter: brightness(1.05); }
.btn-success { box-shadow: 0 8px 22px rgba(16, 185, 129, .28) !important; }
.form-control, .form-select { border-radius: 12px; background-color: var(--bg-input); border-color: var(--border-md); }
.form-control:focus, .form-select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 4px var(--violet-glow); }

/* ── Web: menu lateral e topo ── */
.sidebar { background: linear-gradient(180deg, #0f1226, #0b0d1c) !important; }
.sidebar .nav-link { border-radius: 12px; padding: .6rem .9rem; color: var(--text-dim); }
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(124, 92, 255, .22), rgba(124, 92, 255, .04));
  box-shadow: inset 3px 0 0 #8b5cf6;
}
.app-topbar { background: rgba(9, 11, 20, .72); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1020; }
.page-content { max-width: 1440px; }

/* Abas do modulo (web): controle segmentado */
.cobranca-nav .nav { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 5px; display: inline-flex !important; gap: 2px; }
.cobranca-nav .nav-link { border-radius: 12px; color: var(--text-dim); padding: .5rem .95rem; font-weight: 600; }
.cobranca-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.cobranca-nav .nav-link.active { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, .35); }

/* ── App de campo: topo e barra inferior ── */
.field-top { background: rgba(9, 11, 20, .78); backdrop-filter: saturate(150%) blur(14px); }
.field-top-title { font-size: 1.12rem; letter-spacing: -0.02em; }
.field-nav { background: rgba(14, 17, 36, .9); backdrop-filter: saturate(150%) blur(16px); border-top: 1px solid var(--border); }
.field-nav-item { transition: color .2s var(--ease); }
.field-nav-item .field-nav-icon { transition: background .25s var(--ease), transform .2s var(--ease); }
.field-nav-item:active .field-nav-icon { transform: scale(.92); }
.field-nav-item.active .field-nav-icon { background: var(--accent-soft); color: #c4b5fd; }
.field-nav-item.is-primary .field-nav-icon { background: var(--accent-grad); box-shadow: 0 10px 26px rgba(99, 102, 241, .55); border-radius: 18px; }

/* ── Hoje: heroi do dia ── */
.day-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: 18px; border-radius: var(--r-xl);
  background:
    radial-gradient(420px 220px at 110% -20%, rgba(59, 130, 246, .35), transparent 60%),
    radial-gradient(360px 240px at -20% 120%, rgba(139, 92, 246, .35), transparent 60%),
    linear-gradient(160deg, #1a1d3d, #121531);
  border: 1px solid var(--border-md);
  box-shadow: var(--shadow-2);
  margin-bottom: 14px;
}
.day-ring { --pct: 0; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #151838 78%, transparent 80% 100%), conic-gradient(#22c55e calc(var(--pct) * 1%), rgba(255, 255, 255, .09) 0); }
.day-ring strong { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1; }
.day-ring small { display: block; font-size: .64rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; text-align: center; }
.day-hero-date { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
.day-hero h1 { font-size: 1.35rem; margin: 2px 0 4px; color: #fff; }
.day-hero p { margin: 0; color: var(--text); font-size: .9rem; }
.day-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.day-stat { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.day-stat b { display: block; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.day-stat span { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.day-route { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--text); }
.day-route svg { width: 15px; height: 15px; color: #c4b5fd; flex-shrink: 0; }

/* Proxima acao (holofote) */
.now-card { position: relative; padding: 16px; border-radius: var(--r-lg); margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(124, 92, 255, .16), rgba(124, 92, 255, .04)), var(--bg-card);
  border: 1px solid rgba(139, 92, 246, .45); box-shadow: 0 0 0 4px rgba(124, 92, 255, .08), var(--shadow-1); }
.now-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #c4b5fd; }
.now-eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 0 rgba(167, 139, 250, .7); animation: pulse 1.8s infinite; }
.now-card h2 { font-size: 1.2rem; margin: 6px 0 2px; color: #fff; }
.now-card .now-why { font-size: .9rem; color: var(--text); }
.now-card .now-meta { font-size: .78rem; color: var(--text-dim); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.now-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.now-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; }
.now-actions svg { width: 17px; height: 17px; }
.now-more { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin-top: 6px; font-size: .82rem; color: var(--text-2, #a1a8c3); text-decoration: none; }
.now-more:hover { color: #fff; }
.now-more svg { width: 15px; height: 15px; }

/* Controle segmentado */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; gap: 4px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 14px; }
.seg a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; color: var(--text-dim); text-decoration: none; font-weight: 700; font-size: .9rem; transition: background .2s var(--ease), color .2s; }
.seg a svg { width: 17px; height: 17px; }
.seg a b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; background: rgba(255, 255, 255, .08); color: var(--text); }
.seg a.active { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, .35); }
.seg a.active b { background: rgba(255, 255, 255, .25); color: #fff; }

/* Linha do tempo de tarefas com marcacao */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, rgba(124, 92, 255, .4), rgba(124, 92, 255, .05)); }
.tl-row { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 6px 0; }
.check-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-md); background: var(--bg); color: var(--text-dim); font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; transition: all .25s var(--ease); }
button.check-dot { cursor: pointer; }
button.check-dot:hover { border-color: #8b5cf6; color: #fff; box-shadow: 0 0 0 4px var(--violet-glow); }
.check-dot.is-next { border-color: #8b5cf6; color: #fff; background: #1a1640; box-shadow: 0 0 0 4px rgba(124, 92, 255, .18); }
.check-dot.is-done { border-color: transparent; background: var(--ok); color: #04130a; animation: pop .35s var(--ease); }
.check-dot.is-warn { border-color: transparent; background: var(--warn); color: #1f1300; }
.check-dot.is-fail { border-color: transparent; background: #4b5563; color: #fff; }
.check-dot svg { width: 20px; height: 20px; }
.tl-card { display: block; padding: 12px 14px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: border-color .2s, transform .15s var(--ease); min-width: 0; }
.tl-card:hover { border-color: var(--border-md); color: var(--text); }
.tl-card:active { transform: scale(.99); }
.tl-row.is-done .tl-card { opacity: .72; }
.tl-row.is-overdue .tl-card { border-color: rgba(239, 68, 68, .45); }
.tl-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tl-top strong { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-time { font-size: .76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tl-why { font-size: .85rem; margin-top: 2px; }
.tl-sub { font-size: .76rem; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tl-actions .btn { min-height: 40px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; }
.tl-actions svg { width: 16px; height: 16px; }
.stage-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--stage, #64748b) 18%, transparent); color: color-mix(in srgb, var(--stage, #94a3b8) 75%, #fff); }

/* Selo de comprovacao (rastreio) */
.proof { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; margin-top: 6px; }
.proof svg { width: 13px; height: 13px; }
.proof.tone-ok { background: var(--ok-soft); color: #86efac; }
.proof.tone-warn { background: var(--warn-soft); color: #fcd34d; }
.proof.tone-manual { background: rgba(148, 163, 184, .14); color: #cbd5e1; }

/* Folha de resultado (check do contato) */
.ts-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(3, 5, 15, .6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; }
.ts-backdrop.show { opacity: 1; }
.ts-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; max-width: 560px; margin: 0 auto; padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #1a1e3d, #12152c); border: 1px solid var(--border-md); box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
  transform: translateY(105%); transition: transform .32s var(--ease); }
.ts-sheet.show { transform: translateY(0); }
.ts-grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); margin: 0 auto 14px; }
.ts-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #c4b5fd; }
.ts-eyebrow svg { width: 15px; height: 15px; }
.ts-title { font-size: 1.25rem; font-weight: 800; color: #fff; margin: 4px 0 2px; letter-spacing: -.02em; }
.ts-sub { font-size: .84rem; color: var(--text-dim); margin-bottom: 14px; }
.ts-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; padding: 12px; border-radius: 16px; border: 1px solid var(--border-md); background: rgba(255, 255, 255, .03); color: var(--text); text-align: left; font-weight: 700; transition: all .18s var(--ease); }
.ts-opt svg { width: 20px; height: 20px; }
.ts-opt:active { transform: scale(.97); }
.ts-opt.tone-ok svg { color: #4ade80; } .ts-opt.tone-promise svg { color: #c4b5fd; } .ts-opt.tone-warn svg { color: #fbbf24; } .ts-opt.tone-risk svg { color: #f87171; }
.ts-opt.selected { border-color: #8b5cf6; background: var(--accent-soft); box-shadow: 0 0 0 3px var(--violet-glow); }
.ts-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ts-extra .form-control { min-height: 46px; }
.ts-footer { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 14px; }
.ts-footer .btn { min-height: 50px; }
.ts-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 2100; transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: #0f172a; border: 1px solid rgba(34, 197, 94, .45); color: #dcfce7; font-weight: 600; box-shadow: var(--shadow-2); transition: all .3s var(--ease); max-width: calc(100% - 32px); }
.ts-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ts-toast svg { width: 18px; height: 18px; color: #4ade80; }

/* Rastreio do dia (gestor) */
.trail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; }
.trail-map { position: relative; min-height: 520px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-md); background: var(--bg-elevated); }
.trail-map > div { position: absolute; inset: 0; }
.trail-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.trail-kpi { padding: 12px 14px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); }
.trail-kpi span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.trail-kpi b { display: block; font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
.trail-kpi small { color: var(--text-dim); }
.trail-list { list-style: none; margin: 0; padding: 8px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); max-height: 640px; overflow-y: auto; }
.trail-item { display: grid; grid-template-columns: 52px 34px 1fr; gap: 10px; align-items: start; padding: 10px 8px; border-radius: 12px; }
.trail-item:hover { background: rgba(255, 255, 255, .03); }
.trail-item time { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; padding-top: 6px; }
.trail-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-elevated); }
.trail-icon svg { width: 16px; height: 16px; }
.trail-icon.k-visita { color: #a78bfa; } .trail-icon.k-ligacao { color: #38bdf8; } .trail-icon.k-whatsapp { color: #4ade80; }
.trail-body strong { color: #fff; font-weight: 650; display: block; }
.trail-body span { font-size: .8rem; color: var(--text-dim); }
.trail-gap { font-size: .74rem; color: #fcd34d; padding: 2px 8px 2px 70px; }

@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, .6); } 70% { box-shadow: 0 0 0 10px rgba(167, 139, 250, 0); } 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); } }

@media (max-width: 991.98px) {
  .trail-grid { grid-template-columns: 1fr; }
  .trail-map { min-height: 360px; }
  .trail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .ts-sheet { bottom: 24px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Painel da cobranca v2: guia em "Precisa de voce", plano por regiao, etapa x filial ── */
.panel-head { margin-bottom: 12px; }
.panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-lead { margin: 4px 0 0; font-size: .86rem; color: var(--text-dim); max-width: 760px; }
.panel-lead b { color: var(--text); font-weight: 600; }

.attention-count { min-width: 34px; height: 26px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #fff; background: color-mix(in srgb, var(--tone) 28%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); font-variant-numeric: tabular-nums; }
.attention-body { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border); }
.attention-guide { padding: 14px 16px; background: color-mix(in srgb, var(--tone) 7%, transparent); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.attention-guide p { margin: 0 0 6px; font-size: .86rem; color: var(--text); }
.guide-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tone, var(--text-dim)); }
.attention-cases .guide-label { color: var(--text-dim); display: block; padding: 14px 16px 2px; }
.guide-steps { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 8px; }
.guide-steps li { counter-increment: step; position: relative; padding-left: 30px; font-size: .86rem; color: var(--text); line-height: 1.4; }
.guide-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; background: var(--tone, #6366f1); }
.attention-cases .attention-items { padding-top: 0; }
.attention-cases .attention-items > li:first-child { border-top: 0; }
@media (max-width: 860px) {
  .attention-body { grid-template-columns: 1fr; }
  .attention-guide { border-right: 0; border-bottom: 1px solid var(--border); }
}

.plan-radio { position: absolute; opacity: 0; pointer-events: none; }
.plan-switch { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-md); }
.plan-switch label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.plan-switch svg { width: 15px; height: 15px; }
#planRegion:checked ~ .panel-head .plan-switch-region,
#planAgent:checked ~ .panel-head .plan-switch-agent { background: var(--accent-grad, #6366f1); color: #fff; }
#planRegion:focus-visible ~ .panel-head .plan-switch-region,
#planAgent:focus-visible ~ .panel-head .plan-switch-agent { outline: 2px solid #a78bfa; outline-offset: 2px; }
#planRegion:checked ~ .plan-view-agent,
#planAgent:checked ~ .plan-view-region { display: none; }

.plan-view-region { display: flex; flex-direction: column; gap: 14px; }
.region-branch { border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-md); padding: 14px; }
.region-branch-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; margin-bottom: 12px; }
.region-branch-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 1rem; }
.region-branch-name svg { width: 17px; height: 17px; color: #a78bfa; }
.region-branch-meta { justify-self: end; font-size: .85rem; color: var(--text-dim); }
.region-branch-meta b { color: #fff; font-variant-numeric: tabular-nums; }
.region-branch-bar { grid-column: 1 / -1; }
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.region-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 13px; background: var(--bg-elevated); border: 1px solid var(--border); border-top: 3px solid #8b5cf6; min-width: 0; }
.region-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.region-top strong { color: #fff; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-count { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.region-areas { display: flex; gap: 6px; font-size: .8rem; color: var(--text-dim); line-height: 1.35; }
.region-areas svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: #c4b5fd; }
.region-agents { display: flex; flex-wrap: wrap; gap: 6px; }
.region-agent { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; color: var(--text); background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .35); }
.region-agent b { color: #fff; font-variant-numeric: tabular-nums; }
.region-foot { font-size: .76rem; color: #fca5a5; }
.region-none { padding: 10px 2px; font-size: .85rem; color: var(--text-dim); }
.region-uncovered { margin-top: 10px; font-size: .84rem; }
.region-uncovered > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text); min-height: 36px; }
.region-uncovered > summary svg { width: 15px; height: 15px; color: #fbbf24; }
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.region-chips span { padding: 3px 10px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-md); font-size: .78rem; color: var(--text-dim); }
.region-chips b { color: #fbbf24; margin-left: 2px; }

.matrix-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border-md); background: var(--bg-card); }
.stage-matrix { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 640px; }
.stage-matrix thead th { position: sticky; top: 0; background: var(--bg-elevated); color: var(--text-dim); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--border-md); }
.stage-matrix th, .stage-matrix td { padding: 10px 12px; text-align: left; vertical-align: middle; }
.stage-matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
.matrix-row { cursor: pointer; border-top: 1px solid var(--border); }
.matrix-row:hover, .matrix-row:focus-visible { background: var(--bg-elevated); outline: none; }
.matrix-row th { font-weight: 700; color: #fff; }
.matrix-stage { display: flex; align-items: center; gap: 10px; }
.matrix-stage .stage-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--stage); flex-shrink: 0; }
.stage-matrix tbody th { min-width: 300px; }
.matrix-stage small { display: block; font-weight: 400; color: var(--text-dim); font-size: .74rem; max-width: 380px; }
.matrix-row td b { display: block; color: #fff; font-size: .98rem; }
.matrix-row td small { display: block; color: var(--text-dim); font-size: .72rem; white-space: nowrap; }
.matrix-row td.is-zero { color: var(--text-dim); opacity: .5; }
.matrix-total { background: rgba(139, 92, 246, .07); }
.matrix-row[aria-expanded="true"] { background: var(--bg-elevated); }
.matrix-detail td { padding: 0 8px 8px; background: var(--bg-elevated); }

/* ── Hoje v4: metas do dia + tarefas numa ordem so (mobile primeiro) ── */
.today-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 14px; }
.today-head-text { flex: 1; min-width: 0; }
.today-date { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
.today-head h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.025em; color: #fff; margin: 2px 0 4px; }
.today-head p { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--text); }

.score-ring { --pct: 0; --ring: #8b5cf6; flex-shrink: 0; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), rgba(255, 255, 255, .07) 0); position: relative; }
.score-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg); }
.score-ring > div { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.score-ring b { font-size: 1.25rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.score-ring small { font-size: .66rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.score-ring.is-hit { --ring: var(--ok); }

.section-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin: 18px 2px 8px; }

.goals { padding: 12px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-1); margin-bottom: 14px; }
.goals .section-label { margin: 0 2px 10px; }
.goal-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.goal { --goal: #8b5cf6; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 10px 10px; border-radius: 16px; min-width: 0;
  background: color-mix(in srgb, var(--goal) 9%, var(--bg-elevated)); border: 1px solid color-mix(in srgb, var(--goal) 22%, transparent); }
.goal-conversas { --goal: #38bdf8; }
.goal-resolvidos { --goal: #f59e0b; }
.goal.is-hit { --goal: var(--ok); }
.goal-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--goal); background: color-mix(in srgb, var(--goal) 18%, transparent); margin-bottom: 6px; }
.goal-icon svg { width: 17px; height: 17px; }
.goal-num { font-size: .8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; line-height: 1.1; }
.goal-num b { font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.goal-name { font-size: .78rem; font-weight: 600; color: var(--text); }
.goal-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 8px; }
.goal-bar span { display: block; height: 100%; border-radius: inherit; background: var(--goal); transition: width .6s var(--ease); min-width: 4px; }
.goal.is-hit .goal-name { color: #86efac; }
.goal-help { margin-top: 10px; font-size: .8rem; }
.goal-help > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--text-dim); cursor: pointer; list-style: none; }
.goal-help > summary::-webkit-details-marker { display: none; }
.goal-help > summary svg { width: 14px; height: 14px; }
.goal-help ul { margin: 4px 0 2px; padding-left: 18px; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.goal-help b { color: #fff; font-weight: 600; }

.task-blocks { display: flex; flex-direction: column; gap: 10px; }
.task-block { border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); overflow: hidden; }
.task-block.is-current { border-color: rgba(139, 92, 246, .55); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.task-block > summary { list-style: none; display: grid; grid-template-columns: 34px 1fr auto 18px; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; min-height: 60px; }
.task-block > summary::-webkit-details-marker { display: none; }
.block-step { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; background: var(--accent-grad); }
.block-step svg { width: 17px; height: 17px; }
.task-block.is-finished .block-step { background: var(--ok); color: #04130a; }
.block-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.block-text strong { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 700; color: #fff; }
.block-text strong svg { width: 16px; height: 16px; color: #c4b5fd; }
.block-text small { font-size: .78rem; color: var(--text-dim); line-height: 1.35; }
.block-count { font-size: .8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.block-count b { font-size: 1rem; color: #fff; }
.block-chevron { width: 18px; height: 18px; color: var(--text-dim); transition: transform .2s var(--ease); }
.task-block[open] .block-chevron { transform: rotate(180deg); }
.task-block .tl { padding: 0 12px 10px 10px; }
.task-block .tl::before { left: 31px; }
.task-block.is-finished > summary { opacity: .8; }

.tl-body { min-width: 0; }
.tl-row.is-now .tl-card { border-color: rgba(139, 92, 246, .5); background: #16153a; }
.tl-time.is-late { color: #fca5a5; font-weight: 700; }
.tl-sub .stage-tag { margin: 0 6px 0 0; vertical-align: 1px; }

@media (max-width: 380px) {
  .today-head h1 { font-size: 1.3rem; }
  .score-ring { width: 68px; height: 68px; }
  .task-block > summary { grid-template-columns: 30px 1fr auto 16px; gap: 8px; padding: 12px; }
  .block-step { width: 30px; height: 30px; }
}
@media (max-width: 340px) {
  .goal { padding: 10px 8px 8px; }
  .goal-num b { font-size: 1.2rem; }
}

/* Painel: metas por agent */
.plan-goals { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-goal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .76rem; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border-md); white-space: nowrap; }
.plan-goal svg { width: 13px; height: 13px; color: var(--text-dim); }
.plan-goal b { color: #fff; font-variant-numeric: tabular-nums; }
.plan-goal.is-hit { border-color: rgba(34, 197, 94, .5); background: var(--ok-soft); }
.plan-goal.is-hit svg { color: var(--ok); }
.plan-goals-legend { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 0 2px 10px; font-size: .84rem; color: var(--text-dim); }
.plan-goals-legend b { color: #fff; }
.plan-goals-keys { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: .76rem; }
.plan-goals-keys span { display: inline-flex; align-items: center; gap: 4px; }
.plan-goals-keys svg { width: 13px; height: 13px; }

/* Esteira por tarefas: fase (cores fixas por canal: WhatsApp verde, ligacao azul, visita laranja) */
.phase-tag { display: inline-flex; align-items: center; margin: 0 6px 0 0; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; vertical-align: 1px; background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.phase-tag.phase-whatsapp { background: rgba(34, 197, 94, .16); color: #86efac; }
.phase-tag.phase-ligacao { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
.phase-tag.phase-visita { background: rgba(249, 115, 22, .16); color: #fdba74; }
.tl-note { font-size: .82rem; color: var(--text); font-style: italic; margin-top: 4px; line-height: 1.35; }
.ts-required { color: #fca5a5; font-size: .76rem; }

/* Tarefas de contato da filial */
.ct-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; margin-bottom: 12px; }
.ct-filters .form-control, .ct-filters .form-select { min-height: 44px; }
.ct-score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.ct-chip { --tone: #8b5cf6; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 64px; border-radius: 14px; text-decoration: none; color: var(--text-dim);
  background: var(--bg-card); border: 1px solid var(--border); font-size: .76rem; }
.ct-chip b { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ct-chip.tone-done { --tone: var(--ok); }
.ct-chip.tone-idle { --tone: #94a3b8; }
.ct-chip.tone-fail { --tone: var(--risk); }
.ct-chip.tone-fail b { color: #fca5a5; }
.ct-chip.active { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); color: var(--text); }
.ct-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ct-agent { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); text-decoration: none; color: var(--text); --goal: var(--ok); }
.ct-agent:hover { border-color: var(--border-md); color: var(--text); }
.ct-agent-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ct-agent-top strong { color: #fff; }
.ct-agent-top span { color: var(--text-dim); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ct-agent-top b { color: #fff; font-size: 1rem; }
.ct-agent .goal-bar { margin-top: 0; }
.ct-agent small { color: var(--text-dim); font-size: .76rem; }
.ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-row { --tone: #94a3b8; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--tone); }
.ct-row.tone-done { --tone: var(--ok); }
.ct-row.tone-fail { --tone: var(--risk); }
.ct-status { color: var(--tone); padding-top: 1px; }
.ct-status svg { width: 20px; height: 20px; }
.ct-body { min-width: 0; }
.ct-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ct-top a { color: #fff; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-time { font-size: .76rem; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ct-meta { font-size: .78rem; color: var(--text-dim); margin-top: 3px; }
.ct-reason { font-size: .82rem; color: var(--text); margin-top: 4px; }
.ct-result { font-size: .84rem; color: var(--text); margin-top: 4px; line-height: 1.4; }
.ct-result b { color: #fff; }
@media (max-width: 380px) {
  .ct-score { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.now-actions .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .now-actions { gap: 6px; }
  .now-actions .btn { padding: 6px 6px; font-size: .9rem; gap: 4px; }
  .now-actions svg { width: 16px; height: 16px; }
  .subnav { gap: 0; }
  .subnav-item { padding: 8px 10px; font-size: .9rem; }
}

/* Faixa do fluxo da cobranca: 1 WhatsApp (sistema) -> 2 Ligacao (agent) -> 3 Visita (agent) */
.flow-strip { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); align-items: stretch; gap: 6px; margin-bottom: 6px; }
.flow-step { --flow: #22c55e; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--text); min-width: 0;
  background: color-mix(in srgb, var(--flow) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--flow) 30%, transparent); }
.flow-step:hover { color: var(--text); border-color: var(--flow); }
.flow-ligacao { --flow: #38bdf8; }
.flow-visita { --flow: #f97316; }
.flow-head { display: flex; align-items: center; gap: 8px; }
.flow-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #06120b; background: var(--flow); flex-shrink: 0; }
.flow-who { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-title { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; color: #fff; }
.flow-title svg { width: 16px; height: 16px; color: var(--flow); }
.flow-clients { font-size: .78rem; color: var(--text-dim); }
.flow-clients b, .flow-today b { color: #fff; font-variant-numeric: tabular-nums; }
.flow-today { font-size: .78rem; color: var(--text-dim); }
.flow-step .goal-bar { --goal: var(--flow); margin-top: 4px; }
.flow-arrow { display: grid; place-items: center; color: var(--text-dim); }
.flow-arrow svg { width: 18px; height: 18px; }
.flow-note { font-size: .8rem; color: var(--text-dim); margin: 0 2px 16px; }
@media (max-width: 640px) {
  .flow-strip { grid-template-columns: 1fr; gap: 0; }
  .flow-arrow { height: 18px; transform: rotate(90deg); }
  .flow-step { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "head title today" "head clients bar"; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; }
  .flow-head { grid-area: head; flex-direction: column; gap: 2px; }
  .flow-who { display: none; }
  .flow-title { grid-area: title; }
  .flow-clients { grid-area: clients; }
  .flow-today { grid-area: today; justify-self: end; }
  .flow-step .goal-bar { grid-area: bar; width: 70px; justify-self: end; margin-top: 0; }
}
.cobranca-nav .nav-short { display: none; }
@media (max-width: 640px) {
  .cobranca-nav .nav-long { display: none; }
  .cobranca-nav .nav-short { display: inline; }
}

/* Sistema de cobranca WhatsApp: estado do bot e numeros do dia */
.bot-status { --bot: #94a3b8; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--bot) 9%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--bot) 35%, transparent); }
.bot-status.is-on { --bot: var(--ok); }
.bot-status.is-test { --bot: #38bdf8; }
.bot-status.is-off { --bot: #f59e0b; }
.bot-status-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--bot); background: color-mix(in srgb, var(--bot) 18%, transparent); flex-shrink: 0; }
.bot-status-icon svg { width: 22px; height: 22px; }
.bot-status-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--text); }
.bot-status-text strong { color: #fff; font-size: 1rem; }
.bot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bot-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border-md); }
.bot-chip svg { width: 13px; height: 13px; color: var(--ok); }
.bot-chip.is-missing svg { color: #f59e0b; }
.bot-chip.is-missing { border-color: rgba(245, 158, 11, .45); }
.bot-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bot-tile { --tone: #8b5cf6; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--tone); }
.bot-tile b { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bot-tile span { font-size: .8rem; color: var(--text); }
.bot-tile small { font-size: .72rem; color: var(--text-dim); }
.bot-tile.tone-ok { --tone: var(--ok); }
.bot-tile.tone-info { --tone: #38bdf8; }
.bot-tile.tone-warn { --tone: #f59e0b; }
@media (max-width: 420px) {
  .bot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.now-actions.is-two { grid-template-columns: 1.4fr 1fr; }

/* Status de cobranca do cliente (uma etiqueta) */
.cstatus { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.cstatus.tone-info { background: var(--info-soft); color: #7dd3fc; border-color: rgba(56, 189, 248, .35); }
.cstatus.tone-ok { background: var(--ok-soft); color: #86efac; border-color: rgba(34, 197, 94, .35); }
.cstatus.tone-warn { background: var(--warn-soft); color: #fcd34d; border-color: rgba(245, 158, 11, .35); }
.cstatus.tone-danger { background: rgba(239, 68, 68, .14); color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
.cstatus.tone-muted { background: rgba(148, 163, 184, .12); color: #94a3b8; border-color: rgba(148, 163, 184, .3); }
.cstatus-lg { font-size: .85rem; padding: 4px 12px; }
.cstatus-detail { font-size: .78rem; color: var(--text-muted, #94a3b8); }

/* Sistema de cobranca WhatsApp: regras (quem e como) e clientes */
.wa-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-rule { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--border-strong, rgba(148, 163, 184, .35)); border-radius: var(--r-md); background: var(--surface-1, rgba(15, 23, 42, .5)); }
.wa-rule.is-bot { border-left: 6px solid var(--ok); }
.wa-rule.is-agent { border-left: 6px solid var(--info); }
.wa-rule-n { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(148, 163, 184, .18); }
.wa-rule-body { flex: 1; min-width: 0; }
.wa-rule-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wa-rule-by { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #94a3b8; }
.wa-rule-by svg { width: 13px; height: 13px; }
.wa-rule-how { margin-top: 2px; }
.wa-rule-then { margin-top: 2px; font-size: .82rem; color: #94a3b8; }
.wa-rule-warn { color: #fcd34d; }
.wa-rule-total { flex: 0 0 auto; text-align: right; line-height: 1.1; }
.wa-rule-total b { display: block; font-size: 1.4rem; }
.wa-rule-total small { font-size: .7rem; color: #94a3b8; }
.wa-excluded { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .85rem; color: #cbd5e1; }
.wa-excluded-item { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .35); }
.wa-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wa-filter-chip { padding: 4px 12px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, .35); color: inherit; text-decoration: none; font-size: .82rem; }
.wa-filter-chip.is-active { border-color: var(--info); background: var(--info-soft); }
.wa-clients { list-style: none; margin: 0; padding: 0; border: 2px solid rgba(148, 163, 184, .35); border-radius: var(--r-md); overflow: hidden; }
.wa-clients li + li { border-top: 1px solid rgba(148, 163, 184, .2); }
.wa-clients a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; }
.wa-clients a:hover { background: rgba(148, 163, 184, .08); }
.wa-client-main, .wa-client-side { display: flex; flex-direction: column; min-width: 0; }
.wa-client-side { align-items: flex-end; gap: 2px; }
.wa-client-main small, .wa-client-side small { font-size: .75rem; color: #94a3b8; }
.wa-client > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.wa-client > summary::-webkit-details-marker { display: none; }
.wa-client > summary:hover, .wa-client[open] > summary { background: rgba(148, 163, 184, .08); }
.wa-chat { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 14px; background: rgba(148, 163, 184, .06); }
.wa-chat-empty { margin: 0; font-size: .85rem; color: #94a3b8; }
.wa-bubble { max-width: 85%; display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; border-radius: 12px; font-size: .88rem; overflow-wrap: anywhere; }
.wa-bubble.is-out { align-self: flex-end; background: var(--ok-soft, rgba(16, 185, 129, .15)); border-bottom-right-radius: 4px; }
.wa-bubble.is-in { align-self: flex-start; background: var(--info-soft, rgba(56, 189, 248, .15)); border-bottom-left-radius: 4px; }
.wa-bubble.is-failed { outline: 2px solid var(--risk); }
.wa-bubble-who { font-size: .72rem; font-weight: 700; opacity: .8; }
.wa-bubble-meta { font-size: .7rem; color: #94a3b8; align-self: flex-end; }
.wa-clients .wa-chat-open { display: inline-flex; align-self: flex-start; gap: 4px; padding: 6px 0 0; font-size: .82rem; color: var(--info); }
.wa-clients .wa-chat-open:hover { background: none; }
.wa-chat-open svg { width: 14px; height: 14px; }
@media (max-width: 576px) { .wa-rule { flex-wrap: wrap; } .wa-rule-total { text-align: left; } }

/* Plano por agent (Operacao): nome · ligacoes · visitas · rota */
.plan-row.is-op { grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(160px, 1.4fr); }
.plan-row.is-op a { color: inherit; text-decoration: none; }
.plan-row.is-op a:hover .plan-progress-text, .plan-row.is-op a.plan-name:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .plan-row.is-op { grid-template-columns: 1fr 1fr; }
  .plan-row.is-op .plan-name, .plan-row.is-op .plan-route { grid-column: 1 / -1; }
  .plan-row.is-op .plan-progress { grid-column: auto; grid-row: auto; text-align: left; }
}

/* Metas mensais (Operacao › Metas) */
.goal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.goal-month { font-size: 1.05rem; min-width: 150px; text-align: center; }
.goal-days { font-size: .82rem; color: #94a3b8; }
.goal-list { display: grid; gap: 10px; }
.goal-row { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 2px solid rgba(148, 163, 184, .35); border-radius: var(--r-md); background: rgba(15, 23, 42, .45); }
.goal-row.is-active { border-color: var(--info); }
.goal-row-name { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.goal-row-name small { color: #94a3b8; font-size: .78rem; }
.goal-row-name:hover strong { text-decoration: underline; }
.goal-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.goal-cell { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid rgba(148, 163, 184, .3); }
.goal-cell-label { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #94a3b8; }
.goal-cell-label svg { width: 13px; height: 13px; }
.goal-cell-value b { font-size: 1rem; }
.goal-cell-value small { color: #94a3b8; }
.goal-cell-bar { height: 6px; border-radius: 99px; background: rgba(148, 163, 184, .2); overflow: hidden; }
.goal-cell-bar span { display: block; height: 100%; background: var(--info); }
.goal-cell-foot { font-size: .72rem; color: #94a3b8; }
.goal-cell.is-hit { border-color: rgba(34, 197, 94, .55); } .goal-cell.is-hit .goal-cell-bar span { background: var(--ok); } .goal-cell.is-hit .goal-cell-foot { color: #86efac; }
.goal-cell.is-pace .goal-cell-bar span { background: var(--info); }
.goal-cell.is-behind { border-color: rgba(245, 158, 11, .55); } .goal-cell.is-behind .goal-cell-bar span { background: var(--warn); } .goal-cell.is-behind .goal-cell-foot { color: #fcd34d; }
.goal-cell.is-empty { opacity: .65; }
.goal-edit { grid-column: 1 / -1; }
.goal-edit summary { cursor: pointer; font-size: .82rem; color: #93c5fd; }
.goal-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: end; margin-top: 8px; }
.goal-form label { display: flex; flex-direction: column; gap: 3px; font-size: .75rem; color: #94a3b8; }
.goal-split { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.goal-split-item { padding: 3px 10px; border-radius: 999px; font-size: .8rem; border: 1px solid rgba(148, 163, 184, .35); }
.goal-split-item.is-ok { border-color: rgba(34, 197, 94, .5); }
.goal-split-item.is-missing { border-color: rgba(245, 158, 11, .6); color: #fcd34d; }
.goal-edit-agents { margin-top: 10px; padding: 10px 14px; border: 2px dashed rgba(148, 163, 184, .35); border-radius: var(--r-md); }
.goal-agents-form input { min-width: 90px; }
.plan-meta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid rgba(148, 163, 184, .35); }
.plan-meta.is-pace { border-color: rgba(34, 197, 94, .5); color: #86efac; }
.plan-meta.is-behind { border-color: rgba(245, 158, 11, .6); color: #fcd34d; }
@media (max-width: 900px) { .goal-row { grid-template-columns: 1fr; } .goal-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .goal-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carteira-details > summary { cursor: pointer; list-style: none; } .carteira-details > summary::-webkit-details-marker { display: none; } .carteira-details > summary .panel-title::after { content: ' ▸'; color: #94a3b8; } .carteira-details[open] > summary .panel-title::after { content: ' ▾'; }

/* Painel do time (Plano de hoje): barra empilhada feito · em andamento · sem sucesso · falta */
.stack-bar { position: relative; display: flex; width: 100%; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(148, 163, 184, .18); }
.stack-bar.is-big { height: 18px; }
.stack-bar > span { display: block; height: 100%; transition: width .4s ease; }
.sb-done { background: linear-gradient(90deg, #16a34a, #22c55e); }
.sb-live { background: linear-gradient(90deg, #2563eb, #38bdf8); animation: sb-pulse 1.6s ease-in-out infinite; }
.sb-fail { background: linear-gradient(90deg, #dc2626, #f87171); }
.sb-todo { background: rgba(148, 163, 184, .22); }
@keyframes sb-pulse { 50% { opacity: .65; } }
.sb-pace { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: #fde047; border-radius: 2px; box-shadow: 0 0 0 2px rgba(15, 23, 42, .7); }
.team-hero { margin: 4px 0 18px; padding: 16px 18px; border: 2px solid rgba(148, 163, 184, .35); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(22, 163, 74, .08)); }
.team-hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.team-hero-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.team-hero-value { font-size: 1.8rem; line-height: 1.1; }
.team-hero-value small { font-size: .9rem; font-weight: 500; color: #cbd5e1; }
.team-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.team-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 2px solid transparent; color: inherit; text-decoration: none; }
.team-chip svg { width: 14px; height: 14px; }
.team-chip.is-stopped { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .6); color: #fca5a5; }
.team-chip.is-behind { background: var(--warn-soft); border-color: rgba(245, 158, 11, .6); color: #fcd34d; }
.team-chip.is-ok { background: var(--ok-soft); border-color: rgba(34, 197, 94, .55); color: #86efac; }
.team-chip.is-alert { background: rgba(168, 85, 247, .15); border-color: rgba(168, 85, 247, .6); color: #d8b4fe; }
.team-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .8rem; color: #cbd5e1; }
.lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sb-pace-key { display: inline-block; width: 3px; height: 12px; background: #fde047; margin-right: 6px; vertical-align: -2px; }
.team-pace-key { color: #94a3b8; }
.team-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.team-split > * { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(15, 23, 42, .5); border: 1px solid rgba(148, 163, 184, .25); color: inherit; text-decoration: none; font-size: .85rem; }
.team-split > * svg { width: 15px; height: 15px; }
.team-split .stack-bar { flex-basis: 100%; }
.team-split > a:hover { border-color: var(--info); }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.agent-card { --state: #22c55e; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px solid rgba(148, 163, 184, .3); border-top: 5px solid var(--state); border-radius: var(--r-md); background: rgba(15, 23, 42, .55); }
.agent-card.is-behind { --state: #f59e0b; }
.agent-card.is-stopped { --state: #ef4444; background: rgba(127, 29, 29, .18); }
.agent-card.is-done { --state: #38bdf8; }
.agent-card.is-idle { --state: #64748b; opacity: .8; }
.agent-card-head { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.agent-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: color-mix(in srgb, var(--state) 25%, transparent); color: var(--state); border: 2px solid var(--state); }
.agent-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agent-who small { font-size: .75rem; color: #94a3b8; }
.agent-state { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: var(--state); border: 1.5px solid var(--state); white-space: nowrap; }
.agent-progress { display: flex; align-items: center; gap: 10px; }
.agent-pct { flex: 0 0 auto; font-size: .8rem; color: #cbd5e1; }
.agent-pct b { font-size: 1.15rem; color: #fff; }
.agent-lines { display: grid; gap: 4px; font-size: .84rem; }
.agent-lines a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.agent-lines a:hover { text-decoration: underline; }
.agent-lines svg { width: 14px; height: 14px; color: #94a3b8; }
.agent-live { color: #7dd3fc; font-weight: 700; }
.agent-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .76rem; color: #94a3b8; }
.agent-foot svg { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 768px) { .team-split { grid-template-columns: 1fr; } .team-hero-value { font-size: 1.45rem; } }

/* App do agent: meta do mes */
.month-goal { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid rgba(34, 197, 94, .45); background: rgba(22, 163, 74, .08); }
.month-goal.is-behind { border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .08); }
.month-goal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.month-goal-head span { font-size: .78rem; font-weight: 700; color: #86efac; }
.month-goal.is-behind .month-goal-head span { color: #fcd34d; }
.month-goal-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.month-goal-cell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; padding: 8px; border-radius: var(--r-sm); background: rgba(15, 23, 42, .5); font-size: .8rem; }
.month-goal-cell > span:first-child { flex-basis: 100%; display: flex; align-items: center; gap: 4px; color: #94a3b8; font-size: .72rem; font-weight: 700; }
.month-goal-cell > span:first-child svg { width: 13px; height: 13px; }
.month-goal-cell b { font-size: 1rem; }
.month-goal-cell small { color: #94a3b8; }
.month-goal-cell .goal-cell-bar { flex-basis: 100%; }
.month-goal-cell.is-hit .goal-cell-bar span { background: var(--ok); }
.month-goal-cell.is-behind .goal-cell-bar span { background: var(--warn); }

/* Painel do time: filtros, troca agent/filial e faixas de atraso */
button.team-chip { cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; }
.team-chip.is-active { outline: 2px solid #fff; outline-offset: 1px; }
.view-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, .35); }
.view-toggle button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: #cbd5e1; font-weight: 700; font-size: .85rem; cursor: pointer; }
.view-toggle button svg { width: 15px; height: 15px; }
.view-toggle button.active { background: var(--info-soft); color: #7dd3fc; }
.view-toggle-clear { color: #fcd34d !important; }
.delay-bands { display: inline-flex; gap: 4px; margin-left: 4px; }
.delay-bands > span { padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid; }
.db-5 { color: #fcd34d; border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .1); }
.db-15 { color: #fdba74; border-color: rgba(249, 115, 22, .55); background: rgba(249, 115, 22, .1); }
.db-30 { color: #fca5a5; border-color: rgba(239, 68, 68, .6); background: rgba(239, 68, 68, .12); }
.agent-delays { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8rem; color: #cbd5e1; }
.team-delays { flex-wrap: wrap; }
.agent-lines span { display: flex; align-items: center; gap: 6px; }

/* Central de atendimento (Sistema de cobranca WhatsApp) */
.cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cc-item { --kind: #64748b; border: 2px solid rgba(148, 163, 184, .3); border-left: 6px solid var(--kind); border-radius: var(--r-md); background: rgba(15, 23, 42, .5); }
.cc-item.is-respondeu, .cc-item.is-atendente { --kind: #22c55e; }
.cc-item.is-ignorou { --kind: #f59e0b; }
.cc-item.is-falhou { --kind: #ef4444; }
.cc-item.is-ligacao { --kind: #38bdf8; }
.cc-item summary { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.cc-item summary::-webkit-details-marker { display: none; }
.cc-item details[open] summary { border-bottom: 1px solid rgba(148, 163, 184, .2); }
.cc-item details > :not(summary) { margin-left: 14px; margin-right: 14px; }
.cc-item details > a { margin-bottom: 12px; }
.cc-kind { flex: 0 0 auto; min-width: 104px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-align: center; color: var(--kind); border: 1.5px solid var(--kind); }
.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-summary { font-size: .86rem; color: #e2e8f0; }
.cc-meta { font-size: .74rem; color: #94a3b8; }
.cc-time { flex: 0 0 auto; font-size: .8rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.cc-steps { list-style: none; padding: 10px 0 4px; margin: 0; display: grid; gap: 6px; }
.cc-step { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; }
.cc-step svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: #94a3b8; }
.cc-step.ch-whatsapp svg { color: #4ade80; }
.cc-step.ch-ligacao svg { color: #38bdf8; }
.cc-step.tone-client .cc-step-body { background: rgba(34, 197, 94, .1); border-radius: 8px; padding: 2px 8px; }
.cc-step.tone-fail .cc-step-body { color: #fca5a5; }
.cc-step-time { flex: 0 0 42px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.cc-step-status { font-size: .7rem; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .4); color: #cbd5e1; }
.cc-step-status.st-lida { border-color: rgba(56, 189, 248, .6); color: #7dd3fc; }
.cc-step-status.st-falhou { border-color: rgba(239, 68, 68, .6); color: #fca5a5; }
@media (max-width: 576px) { .cc-item summary { flex-wrap: wrap; } .cc-kind { min-width: 0; } }

/* Ficha de cobranca do cliente: resumo, numeros, tentativas e historia por cor */
.cf-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 14px; padding: 16px 18px; border: 2px solid rgba(148, 163, 184, .35); border-radius: var(--r-lg); background: rgba(15, 23, 42, .55); }
.cf-name { font-size: 1.35rem; margin: 0; }
.cf-sub { font-size: .82rem; color: #94a3b8; margin: 2px 0 8px; }
.cf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-plan { display: grid; gap: 8px; }
.cf-plan-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 2px solid; }
.cf-plan-item svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.cf-plan-item small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.cf-plan-item b { font-size: .95rem; }
.cf-plan-item.is-goal { border-color: rgba(168, 85, 247, .55); background: rgba(168, 85, 247, .1); } .cf-plan-item.is-goal svg { color: #c4b5fd; }
.cf-plan-item.is-next { border-color: rgba(56, 189, 248, .55); background: rgba(56, 189, 248, .08); } .cf-plan-item.is-next svg { color: #7dd3fc; }
.cf-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.cf-num { --tone: #94a3b8; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid color-mix(in srgb, var(--tone) 55%, transparent); border-top-width: 5px; background: color-mix(in srgb, var(--tone) 8%, rgba(15, 23, 42, .6)); }
.cf-num small { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
.cf-num b { font-size: 1.3rem; }
.cf-num span { font-size: .76rem; color: #cbd5e1; }
.cf-num.tone-ok { --tone: #22c55e; } .cf-num.tone-info { --tone: #38bdf8; } .cf-num.tone-warn { --tone: #f59e0b; } .cf-num.tone-orange { --tone: #f97316; } .cf-num.tone-danger { --tone: #ef4444; }
.cf-attempts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.cf-att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid rgba(148, 163, 184, .3); font-size: .82rem; }
.cf-att svg { width: 15px; height: 15px; color: #94a3b8; }
.cf-att > b { margin-right: 2px; }
.cf-pill { padding: 1px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid rgba(148, 163, 184, .4); color: #cbd5e1; }
.cf-pill.is-acao { border-color: rgba(56, 189, 248, .6); color: #7dd3fc; background: rgba(56, 189, 248, .08); }
.cf-pill.is-resposta { border-color: rgba(34, 197, 94, .6); color: #86efac; background: rgba(34, 197, 94, .08); }
.cf-pill.is-sem_retorno { border-color: rgba(245, 158, 11, .6); color: #fcd34d; background: rgba(245, 158, 11, .08); }
.cf-pill.is-problema { border-color: rgba(239, 68, 68, .6); color: #fca5a5; background: rgba(239, 68, 68, .1); }
.cf-pill.is-acordo { border-color: rgba(168, 85, 247, .6); color: #d8b4fe; background: rgba(168, 85, 247, .1); }
.cf-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-filters button { padding: 3px 10px; border-radius: 999px; border: 1.5px solid rgba(148, 163, 184, .4); background: transparent; color: #cbd5e1; font-size: .76rem; font-weight: 700; cursor: pointer; }
.cf-filters button.active { background: rgba(148, 163, 184, .2); color: #fff; }
.cf-filters button.is-acao { border-color: rgba(56, 189, 248, .6); } .cf-filters button.is-resposta { border-color: rgba(34, 197, 94, .6); } .cf-filters button.is-sem_retorno { border-color: rgba(245, 158, 11, .6); } .cf-filters button.is-problema { border-color: rgba(239, 68, 68, .6); } .cf-filters button.is-acordo { border-color: rgba(168, 85, 247, .6); }
.cf-list { list-style: none; margin: 0; padding: 6px 0; }
.cf-item { --tone: #94a3b8; display: flex; align-items: flex-start; gap: 12px; padding: 9px 16px; position: relative; }
.cf-item + .cf-item { border-top: 1px solid rgba(148, 163, 184, .12); }
.cf-item.is-acao { --tone: #38bdf8; } .cf-item.is-resposta { --tone: #22c55e; } .cf-item.is-sem_retorno { --tone: #f59e0b; } .cf-item.is-problema { --tone: #ef4444; } .cf-item.is-acordo { --tone: #a855f7; }
.cf-dot { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); }
.cf-dot svg { width: 15px; height: 15px; color: var(--tone); }
.cf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-title { font-weight: 700; font-size: .9rem; }
.cf-detail { font-size: .8rem; color: #cbd5e1; }
.cf-when { flex: 0 0 auto; text-align: right; font-size: .76rem; color: #94a3b8; display: flex; flex-direction: column; }
.cf-when small { font-size: .72rem; }
.cf-full { border-top: 1px solid rgba(148, 163, 184, .2); }
.cf-full summary { padding: 10px 16px; cursor: pointer; font-size: .8rem; color: #94a3b8; }
@media (max-width: 900px) { .cf-hero { grid-template-columns: 1fr; } .cf-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-attempts { grid-template-columns: 1fr; } }

/* Ausencia do agent (cartao do Plano de hoje) */
.agent-card.is-off { --state: #64748b; opacity: .85; }
.agent-absence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px dashed rgba(148, 163, 184, .25); padding-top: 8px; }
.absence-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #cbd5e1; background: rgba(100, 116, 139, .25); border: 1px solid rgba(148, 163, 184, .45); }
.absence-chip svg, .absence-form summary svg { width: 13px; height: 13px; }
.absence-link { border: 0; background: none; color: #93c5fd; font-size: .78rem; text-decoration: underline; padding: 0; cursor: pointer; }
.absence-form { width: 100%; }
.absence-form summary { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: #94a3b8; cursor: pointer; list-style: none; }
.absence-form summary::-webkit-details-marker { display: none; }
.absence-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.absence-form label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: #94a3b8; }
.absence-form .absence-why { grid-column: 1 / -1; }
.absence-form button { grid-column: 1 / -1; }

/* Prazo de promessa (Sistema de cobrança) */
.promise-rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; padding: .75rem 1rem; border: 2px solid rgba(129, 140, 248, .55); border-radius: 12px; background: rgba(99, 102, 241, .12); }
.promise-rule-text { display: flex; align-items: center; gap: .55rem; }
.promise-rule-text i { width: 20px; height: 20px; color: #818cf8; flex: none; }
.promise-rule-text small { display: block; color: #a5b4fc; }
.promise-rule-form .input-group { width: 210px; }
@media (max-width: 576px) { .promise-rule-form, .promise-rule-form .input-group { width: 100%; } }

/* ── Cobranca v4: caixas de indicadores com cor, metas por situacao e tabelas ── */
.ct-chip, .bot-tile { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); border-top: 3px solid var(--tone);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 16%, var(--bg-card)) 0%, var(--bg-card) 75%); transition: transform .15s, border-color .15s; }
.ct-chip > svg, .bot-tile > svg { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; padding: 5px; border-radius: 9px; color: var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); }
.ct-chip b, .bot-tile b { color: color-mix(in srgb, var(--tone) 35%, #fff); }
.ct-chip span, .bot-tile span { color: var(--text); font-weight: 600; padding-right: 30px; }
a.ct-chip:hover { transform: translateY(-2px); border-color: var(--tone); color: var(--text); }
.ct-chip.active { border-top-width: 3px; background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 26%, var(--bg-card)) 0%, var(--bg-card) 85%); }
.ct-chip.tone-all, .bot-tile.tone-all { --tone: #8b5cf6; }
.ct-chip.tone-todo { --tone: #38bdf8; }
.ct-chip.tone-warn, .bot-tile.tone-warn { --tone: #f59e0b; }
.ct-chip.tone-wa, .bot-tile.tone-wa { --tone: #14b8a6; }
.ct-chip.tone-call { --tone: #3b82f6; }
.bot-tile.tone-reply { --tone: #a78bfa; }
@media (max-width: 480px) {
  .ct-chip > svg { width: 22px; height: 22px; padding: 4px; top: 8px; right: 8px; }
  .ct-chip span { padding-right: 0; }
  .ct-chip b { padding-right: 24px; }
}

/* Metas: cada indicador tem a sua cor; a situacao pinta borda, barra e etiqueta */
.goal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 14px; font-size: .78rem; color: var(--text-dim); }
.goal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.goal-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--lv); }
.lg-hit, .goal-cell.is-hit, .lv-hit { --lv: #22c55e; }
.lg-pace, .goal-cell.is-pace, .lv-pace { --lv: #38bdf8; }
.lg-behind, .goal-cell.is-behind, .lv-behind { --lv: #f59e0b; }
.lg-late, .goal-cell.is-late, .lv-late { --lv: #ef4444; }
.lg-empty, .goal-cell.is-empty, .lv-empty { --lv: #64748b; }
.goal-row { border: 1px solid color-mix(in srgb, var(--lv) 40%, transparent); border-left: 5px solid var(--lv); background: linear-gradient(90deg, color-mix(in srgb, var(--lv) 9%, var(--bg-card)) 0%, var(--bg-card) 40%); }
.goal-row.is-active { box-shadow: 0 0 0 2px var(--info); }
.goal-row-name strong { color: #fff; font-size: 1rem; }
.goal-score { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  color: color-mix(in srgb, var(--lv) 45%, #fff); background: color-mix(in srgb, var(--lv) 18%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 45%, transparent); }
.goal-cell.m-recovered { --m: #22c55e; }
.goal-cell.m-regularized { --m: #a78bfa; }
.goal-cell.m-calls { --m: #38bdf8; }
.goal-cell.m-visits { --m: #f97316; }
.goal-cell { gap: 5px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--lv) 45%, transparent); border-top: 3px solid var(--lv);
  background: color-mix(in srgb, var(--lv) 7%, var(--bg-card)); }
.goal-cell.is-empty { opacity: 1; border-color: var(--border-md); border-top-color: color-mix(in srgb, var(--m) 50%, transparent); background: var(--bg-card); }
.goal-cell-label { color: var(--text); gap: 6px; }
.goal-cell-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--m); background: color-mix(in srgb, var(--m) 20%, transparent); }
.goal-cell-icon svg { width: 13px; height: 13px; }
.goal-cell-value b { font-size: 1.08rem; color: #fff; font-variant-numeric: tabular-nums; }
.goal-cell-bar { height: 7px; background: rgba(148, 163, 184, .16); }
.goal-cell .goal-cell-bar span, .goal-cell.is-hit .goal-cell-bar span, .goal-cell.is-pace .goal-cell-bar span, .goal-cell.is-behind .goal-cell-bar span { background: var(--lv); border-radius: inherit; min-width: 3px; }
.goal-cell.is-empty .goal-cell-bar span { min-width: 0; }
.goal-cell-foot { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.goal-pill { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: .7rem; color: color-mix(in srgb, var(--lv) 45%, #fff); background: color-mix(in srgb, var(--lv) 20%, transparent); }
.goal-cell.is-empty .goal-pill { color: var(--text-dim); background: rgba(148, 163, 184, .12); }
.goal-need { font-size: .72rem; color: var(--text-dim); }
.goal-cell.is-hit .goal-cell-foot, .goal-cell.is-behind .goal-cell-foot { color: inherit; }
@media (max-width: 900px) {
  .goal-row { grid-template-columns: 1fr; }
  .goal-row-name { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
  .goal-score { margin-top: 0; }
  .goal-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tabelas da cobranca: cabecalho fixo, listras, hover e etiquetas coloridas */
.card:has(.data-table) { overflow: hidden; }
.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-elevated); color: var(--text-dim); font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: .7rem .8rem; border-bottom: 1px solid var(--border-md) !important; }
.data-table tbody td { padding: .7rem .8rem; border-color: var(--border); }
.data-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .018); }
.data-table tbody tr:hover td { background: rgba(124, 92, 255, .07); }
.data-table .dt-client { min-width: 210px; }
.data-table .dt-name { color: #fff; font-weight: 600; text-decoration: none; }
.data-table .dt-name:hover { color: #c4b5fd; text-decoration: underline; }
.data-table .dt-sub { font-size: .74rem; color: var(--text-dim); margin-top: 2px; }
.data-table .dt-sub a { color: #93c5fd; text-decoration: none; }
.data-table .dt-when { white-space: nowrap; }
.data-table .dt-time { display: block; font-variant-numeric: tabular-nums; font-weight: 600; }
.data-table .dt-time.is-late { color: #fca5a5; }
.data-table .dt-prio { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.prio-urgente { color: #fecaca; background: rgba(239, 68, 68, .22); }
.prio-alta { color: #fde68a; background: rgba(245, 158, 11, .2); }
.prio-baixa { color: var(--text-dim); background: rgba(148, 163, 184, .14); }
.data-table tr.pr-urgente td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.data-table tr.pr-alta td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.data-table .dt-money { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.late-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.late-pill.is-risk { color: #fecaca; background: rgba(239, 68, 68, .24); }
.late-pill.is-late { color: #fca5a5; background: rgba(239, 68, 68, .13); }
.late-pill.is-warn { color: #fde68a; background: rgba(245, 158, 11, .16); }
.late-pill.is-zero { color: var(--text-dim); background: rgba(148, 163, 184, .1); }
.dt-agent { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dt-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; font-weight: 800; color: #fff; background: var(--accent-grad); flex-shrink: 0; }
.dt-type { white-space: nowrap; }
.st-pill { --st: #94a3b8; display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap;
  color: color-mix(in srgb, var(--st) 40%, #fff); background: color-mix(in srgb, var(--st) 20%, transparent); border: 1px solid color-mix(in srgb, var(--st) 40%, transparent); }
.st-notificada { --st: #38bdf8; } .st-visualizada { --st: #818cf8; } .st-em_rota, .st-em_visita { --st: #f59e0b; }
.st-concluida { --st: #22c55e; } .st-nao_encontrado { --st: #ef4444; } .st-reagendada { --st: #a78bfa; } .st-cancelada { --st: #64748b; }
.data-table .dt-action .btn { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/* No celular a tabela de visitas vira cartoes (sem rolagem lateral) */
@media (max-width: 767.98px) {
  .table-responsive > .data-table.stack-mobile { min-width: 0; }
  .data-table.stack-mobile thead { display: none; }
  .data-table.stack-mobile, .data-table.stack-mobile tbody { display: block; }
  .data-table.stack-mobile tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 12px 12px 42px; position: relative; border-bottom: 1px solid var(--border); }
  .data-table.stack-mobile tbody tr.is-empty-row { display: block; padding: 12px; }
  .data-table.stack-mobile tbody td { display: block; padding: 0; border: 0; background: none !important; text-align: left !important; font-size: .84rem; min-width: 0; }
  .data-table.stack-mobile tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
  .data-table.stack-mobile td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 1px; }
  .data-table.stack-mobile .dt-check { position: absolute; left: 14px; top: 14px; }
  .data-table.stack-mobile .dt-client { grid-column: 1 / -1; order: -2; min-width: 0; }
  .data-table.stack-mobile .dt-name { font-size: .98rem; }
  .data-table.stack-mobile .dt-when { order: -1; white-space: normal; }
  .data-table.stack-mobile .dt-time { font-size: .8rem; }
  .data-table.stack-mobile td.is-blank { display: none; }
  .data-table.stack-mobile .dt-client { padding-right: 76px; }
  .data-table.stack-mobile .dt-action { position: absolute; top: 10px; right: 10px; }
  .data-table.stack-mobile .dt-action .btn { min-height: 34px; padding: 4px 10px; }
  .data-table.stack-mobile .dt-money { color: #fff; }
  .data-table.stack-mobile tr.pr-urgente td:first-child, .data-table.stack-mobile tr.pr-alta td:first-child { box-shadow: none; }
  .data-table.stack-mobile tr.pr-urgente { box-shadow: inset 4px 0 0 #ef4444; }
  .data-table.stack-mobile tr.pr-alta { box-shadow: inset 4px 0 0 #f59e0b; }
}

/* ── Tarefas dos Agents (painel do admin) ── */
.mt-new > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.mt-new > summary::-webkit-details-marker { display: none; }
.mt-new > summary svg, .mt-toolbar svg, .mt-form .btn svg { width: 15px; height: 15px; }
.mt-form { margin-top: 12px; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-card); border: 2px solid var(--border-md); border-radius: var(--r-md); }
.mt-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.mt-kinds legend { font-size: .8rem; color: var(--text-dim); margin-bottom: 6px; }
.mt-kind input { position: absolute; opacity: 0; pointer-events: none; }
.mt-kind span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 2px solid var(--border-md); border-radius: 999px; font-size: .85rem; cursor: pointer; }
.mt-kind span svg { width: 15px; height: 15px; }
.mt-kind input:checked + span { border-color: var(--violet); background: var(--accent-soft); }
.mt-kind input:focus-visible + span { outline: 2px solid var(--info); }
.mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-grid > label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); min-width: 0; }
.mt-grid > label small { color: var(--text-muted); }
.mt-grid .mt-span, .mt-grid .mt-check { grid-column: 1 / -1; }
.mt-grid .mt-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.mt-form > .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.mt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; }
.mt-today { font-size: .82rem; color: var(--info); }
.mt-totals { margin-left: auto; font-size: .85rem; color: var(--text-dim); }
.mt-totals .is-late { color: var(--risk); }
.mt-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.mt-agent { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-card); border: 2px solid var(--border-md); border-radius: var(--r-md); min-width: 0; }
.mt-agent.is-empty { opacity: .65; }
.mt-agent-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mt-agent-head span { font-size: .78rem; color: var(--text-dim); }
.mt-empty { margin: 0; font-size: .85rem; color: var(--text-muted); }
.mt-list { display: flex; flex-direction: column; gap: 8px; }
.mt-task { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 2px solid var(--border-md); border-left-width: 5px; border-radius: var(--r-sm); background: var(--bg-elevated); min-width: 0; }
.mt-task.is-alta { border-left-color: var(--warn); }
.mt-task.is-late { border-left-color: var(--risk); }
.mt-task.is-feita { border-left-color: var(--ok); opacity: .85; }
.mt-task.is-cancelada { opacity: .5; text-decoration: line-through; }
.mt-task-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; color: var(--text-dim); }
.mt-chip svg { width: 14px; height: 14px; }
.mt-state { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.mt-task.is-late .mt-state { color: var(--risk); }
.mt-task.is-alta.is-pendente .mt-state { color: var(--warn); }
.mt-task.is-feita .mt-state { color: var(--ok); }
.mt-client { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.mt-task-text { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.mt-result { margin: 0; font-size: .82rem; color: var(--ok); overflow-wrap: anywhere; }
.mt-result svg { width: 13px; height: 13px; }
.mt-cancel { align-self: flex-start; padding: 0; border: 0; background: none; font-size: .78rem; color: var(--text-muted); text-decoration: underline; }
.mt-assign { display: flex; gap: 8px; margin-top: 4px; }
@media (max-width: 600px) {
  .mt-grid { grid-template-columns: 1fr; }
  .mt-totals { margin-left: 0; width: 100%; }
  .mt-board { grid-template-columns: 1fr; }
}

/* ── Hoje do agent: bloco Prioridade (tarefas do admin e leads) no roteiro ── */
.prio-dot { color: var(--warn); border-color: var(--warn) !important; }
.prio-dot.is-lead { color: var(--info); border-color: var(--info) !important; }
.prio-dot.is-late { color: var(--risk); border-color: var(--risk) !important; }
.prio-dot.is-done { color: inherit; }
.prio-item > summary { list-style: none; cursor: pointer; }
.prio-item > summary::-webkit-details-marker { display: none; }
.prio-item .tl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.prio-tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--warn-soft); color: var(--warn); }
.prio-tag.is-lead { background: var(--info-soft); color: var(--info); }
.prio-tag.is-late { background: var(--risk-soft); color: var(--risk); }
.prio-address { margin: 8px 0 0; font-size: .82rem; color: var(--text-dim); overflow-wrap: anywhere; }
.prio-address svg { width: 13px; height: 13px; }
.prio-item .tl-actions { margin-top: 10px; }
.prio-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.prio-form .btn { align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; }
.prio-form .btn svg { width: 14px; height: 14px; }
.now-card.is-prio { border-color: var(--warn); }
.prio-item .tl-actions .text-danger { flex-basis: 100%; }

/* ── Tarefas: Kanban (A fazer / Fazendo / Impedimento / Feito) ── */
.mt-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mt-summary span { padding: 6px 12px; border: 2px solid var(--border-md); border-radius: 999px; font-size: .84rem; color: var(--text-dim); }
.mt-summary b { color: var(--text); }
.mt-summary .is-late { border-color: var(--risk); }
.mt-summary .is-late b { color: var(--risk); }
.mt-summary .is-blocked { border-color: var(--warn); }
.mt-summary .is-blocked b { color: var(--warn); }
.mt-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mt-filters .form-select { width: auto; min-width: 180px; }
.kb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kb-col { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-card); border: 2px solid var(--border-md); border-top-width: 5px; border-radius: var(--r-md); min-width: 0; }
.kb-pendente { border-top-color: var(--info); }
.kb-fazendo { border-top-color: var(--violet); }
.kb-impedimento { border-top-color: var(--warn); }
.kb-feita { border-top-color: var(--ok); }
.kb-head { display: flex; justify-content: space-between; align-items: center; }
.kb-head h2 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.kb-head svg { width: 17px; height: 17px; }
.kb-count { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--bg-elevated); text-align: center; font-weight: 700; }
.kb-hint { margin: -4px 0 4px; font-size: .76rem; color: var(--text-muted); }
.kb-empty { margin: 0; font-size: .85rem; color: var(--text-muted); }
.kb-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; background: var(--bg-elevated); border: 2px solid var(--border-md); border-left-width: 5px; border-radius: var(--r-sm); min-width: 0; }
.kb-card.is-alta { border-left-color: var(--warn); }
.kb-card.is-late { border-left-color: var(--risk); }
.kb-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.kb-due { font-size: .72rem; font-weight: 700; color: var(--text-dim); }
.kb-due.is-late { color: var(--risk); }
.kb-block { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: .82rem; overflow-wrap: anywhere; }
.kb-block svg, .prio-block svg { width: 13px; height: 13px; }
.kb-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.kb-agent { font-size: .78rem; color: var(--text-dim); }
.kb-agent svg { width: 13px; height: 13px; }
.kb-actions > summary { font-size: .78rem; color: var(--info); cursor: pointer; }
.kb-actions[open] { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) { .kb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kb { grid-template-columns: 1fr; } .mt-filters .form-select { flex: 1; min-width: 0; } }

/* Hoje: passos da tarefa e etiqueta Fazendo */
.prio-tag.is-doing { background: var(--accent-soft); color: var(--violet); }
.prio-block { margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: .82rem; overflow-wrap: anywhere; }
.prio-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: flex-start; }
.prio-steps .btn { display: inline-flex; align-items: center; gap: 5px; }
.prio-steps svg { width: 14px; height: 14px; }
.prio-blockform > summary { list-style: none; }
.prio-blockform > summary::-webkit-details-marker { display: none; }
.prio-blockform[open] { flex-basis: 100%; }
.prio-blockform form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.prio-blockform form .btn { align-self: flex-end; }
.agent-task-alert { color: var(--warn) !important; }

/* WhatsApp: modo de atendimento e busca */
.wa-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; color: var(--text-dim); }
.wa-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--border-md); border-radius: 999px; background: transparent; color: var(--text); font-size: .84rem; }
.wa-mode-btn svg { width: 15px; height: 15px; }
.wa-mode-btn.is-active { border-color: var(--ok); background: var(--ok-soft); opacity: 1; }
.wa-mode-btn:not(.is-active):hover { border-color: var(--violet); }
.wa-search { display: flex; gap: 8px; margin-bottom: 10px; }
.wa-search .btn svg { width: 16px; height: 16px; }
.wa-more { margin: 8px 2px 0; font-size: .8rem; color: var(--text-muted); }

/* ── Score do cliente e oferta de margem ── */
.score-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.score-big { display: flex; flex-direction: column; padding: 14px 16px; background: var(--bg-card); border: 2px solid var(--border-md); border-radius: var(--r-md); }
.score-big b { font-size: 1.8rem; line-height: 1.1; }
.score-big span { font-size: .82rem; color: var(--text-dim); }
.score-list { display: flex; flex-direction: column; gap: 8px; }
.score-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border: 2px solid var(--border-md); border-left-width: 5px; border-radius: var(--r-md); min-width: 0; }
.score-row.tone-ok { border-left-color: var(--ok); }
.score-row.tone-info { border-left-color: var(--info); }
.score-row.tone-warn { border-left-color: var(--warn); }
.score-row.tone-danger { border-left-color: var(--risk); }
.score-num { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 14px; background: var(--bg-elevated); color: var(--text); text-decoration: none; }
.score-num b { font-size: 1.35rem; line-height: 1; }
.score-num small { font-size: .62rem; color: var(--text-dim); margin-top: 2px; }
.tone-ok .score-num b { color: var(--ok); }
.tone-info .score-num b { color: var(--info); }
.tone-warn .score-num b { color: var(--warn); }
.tone-danger .score-num b { color: var(--risk); }
.score-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.score-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.score-main small { font-size: .76rem; color: var(--text-dim); }
.score-parts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .74rem; color: var(--text-dim); }
.score-suggest { font-size: .82rem; color: var(--ok); overflow-wrap: anywhere; }
.score-suggest svg, .score-sent svg, .score-act svg, .score-offer svg { width: 14px; height: 14px; }
.score-why { font-size: .76rem; color: var(--text-muted); }
.score-act { flex: none; }
.score-act .btn { display: inline-flex; align-items: center; gap: 5px; }
.score-sent { font-size: .78rem; color: var(--ok); }
.score-pill { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--bg-elevated); }
.score-pill.tone-ok { background: var(--ok-soft); color: var(--ok); }
.score-pill.tone-info { background: var(--info-soft); color: var(--info); }
.score-pill.tone-warn { background: var(--warn-soft); color: var(--warn); }
.score-pill.tone-danger { background: var(--risk-soft); color: var(--risk); }
.score-part { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 8px; margin-top: 6px; }
.score-part b { text-align: right; }
.score-bar { height: 6px; border-radius: 99px; background: var(--bg-elevated); overflow: hidden; }
.score-bar span { display: block; height: 100%; background: var(--violet); }
.score-hint { font-size: .74rem; color: var(--text-muted); }
.score-offer { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
@media (max-width: 600px) {
  .score-row { flex-wrap: wrap; }
  .score-act { flex-basis: 100%; }
  .score-act .btn { width: 100%; justify-content: center; }
}

/* Kanban: periodo e cartoes da rotina (ligacoes e visitas), que abrem o cliente/visita */
.mt-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.mt-range { font-size: .82rem; color: var(--text-dim); }
a.kb-routine { color: inherit; text-decoration: none; border-left-color: var(--info); }
a.kb-routine:hover { border-color: var(--violet); }
a.kb-routine.is-late { border-left-color: var(--risk); }
.kb-more { margin: 4px 0 0; font-size: .78rem; color: var(--text-muted); }
.kb-jump { display: none; }
@media (max-width: 600px) {
  .mt-filters .form-select { flex: 1 1 calc(50% - 8px); }
  .kb-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; position: sticky; top: 0; z-index: 5; padding: 6px 0; background: var(--bg); }
  .kb-jump a { padding: 6px 10px; border: 2px solid var(--border-md); border-radius: 999px; font-size: .8rem; color: var(--text); text-decoration: none; text-align: center; }
  .kb-col { scroll-margin-top: 90px; }
}

/* ── Plano da semana (Operacao): agent x dia ── */
.wk-scroll { overflow-x: auto; border: 2px solid var(--border-md); border-radius: var(--r-md); background: var(--bg-card); }
.wk { width: 100%; border-collapse: collapse; font-size: .8rem; }
.wk th, .wk td { padding: 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wk thead th { font-size: .74rem; color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.wk thead th.is-today, .wk td.is-today { background: var(--accent-soft); }
.wk tbody th { white-space: nowrap; }
.wk tbody th a { color: var(--text); text-decoration: none; font-weight: 700; }
.wk-cell { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 8px; color: inherit; text-decoration: none; min-width: 74px; }
.wk-cell:hover { background: rgba(148, 163, 184, .1); }
.wk-cell.is-empty { opacity: .45; }
.wk-cell b { display: inline-block; width: 12px; }
.wk-l b { color: var(--info); }
.wk-v b { color: var(--violet); }
.wk-t b { color: var(--warn); }
.work-num.is-tarefas { background: var(--warn-soft); color: var(--warn); }
.lane-tab.lane-tarefas.active { border-color: var(--warn); }
.wk-day { display: none; }
@media (max-width: 600px) {
  .wk-scroll { overflow: visible; border: 0; background: transparent; }
  .wk, .wk tbody, .wk tr, .wk th, .wk td { display: block; }
  .wk thead { display: none; }
  .wk tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; padding: 10px; background: var(--bg-card); border: 2px solid var(--border-md); border-radius: var(--r-md); }
  .wk tbody th { grid-column: 1 / -1; padding: 0 0 4px; border: 0; }
  .wk td { padding: 0; border: 0; }
  .wk td.is-today .wk-cell { border-color: var(--violet); }
  .wk-cell { min-width: 0; border: 2px solid var(--border-md); }
  .wk-day { display: block; font-size: .7rem; font-weight: 700; color: var(--text-dim); }
}

/* Kanban: nome do agent em destaque e origem (automatica / gestao) */
.kb-head-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.kb-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.kb-who b { font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.kb-avatar { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: .78rem; font-weight: 800; }
.kb-auto { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-size: .68rem; font-weight: 700; }
.kb-auto.is-team { background: var(--accent-soft); color: var(--violet); }
.kb-auto svg { width: 12px; height: 12px; }
.kb-agent:empty { display: none; }
.kb-agent { color: var(--warn); font-weight: 700; }
.agent-week { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; padding: 6px 10px; border: 2px solid var(--border-md); border-radius: 10px; color: var(--text); text-decoration: none; font-size: .8rem; }
.agent-week > span:first-child { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--violet); }
.agent-week svg { width: 13px; height: 13px; color: var(--text-dim); }
.agent-week:hover { border-color: var(--violet); }

/* ── Proposta de emprestimo ── */
.offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.offer-block { display: flex; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border: 2px solid var(--risk); border-radius: var(--r-md); background: var(--risk-soft); }
.offer-block ul { margin: 4px 0 0; padding-left: 18px; }
.offer-block svg { flex: none; width: 18px; height: 18px; color: var(--risk); }
.offer-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--bg-card); border: 2px solid var(--border-md); border-radius: var(--r-md); }
.offer-step { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 1rem; }
.offer-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: .8rem; }
.offer-step small { font-weight: 400; color: var(--text-dim); font-size: .8rem; }
.offer-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.offer-check { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid var(--border-md); border-radius: var(--r-sm); cursor: pointer; min-width: 0; }
.offer-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.offer-tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border-md); color: transparent; }
.offer-tick svg { width: 16px; height: 16px; }
.offer-check input:checked + .offer-tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.offer-check input:checked ~ .offer-check-text b { color: var(--ok); }
.offer-check input:focus-visible + .offer-tick { outline: 2px solid var(--info); }
.offer-check:has(input:checked) { border-color: var(--ok); }
.offer-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer-check-text small { font-size: .76rem; color: var(--text-dim); overflow-wrap: anywhere; }
.offer-check-text small svg { width: 12px; height: 12px; }
.offer-check.is-ok .offer-check-text small svg { color: var(--ok); }
.offer-check.is-warn .offer-check-text small { color: var(--warn); }
.offer-kinds { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.offer-note { margin: 0; font-size: .8rem; color: var(--text-dim); }
.offer-note svg { width: 13px; height: 13px; }
.offer-cash { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: .86rem; }
.offer-cash.is-ok { background: var(--ok-soft); color: var(--ok); }
.offer-cash.is-bad { background: var(--risk-soft); color: var(--risk); }
.offer-grid { display: grid; grid-template-columns: 160px 1fr; gap: 10px; }
.offer-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-dim); }
.offer-form > .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.offer-form .btn svg, .offer-actions svg { width: 15px; height: 15px; }
.offer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.offer-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-card); border: 2px solid var(--border-md); border-left-width: 5px; border-radius: var(--r-md); }
.offer-row.tone-ok { border-left-color: var(--ok); }
.offer-row.tone-info { border-left-color: var(--info); }
.offer-row.tone-danger { border-left-color: var(--risk); }
.offer-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.offer-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer-value { font-size: .9rem; }
.offer-row small { color: var(--text-dim); font-size: .78rem; }
.offer-resp { font-style: italic; }
.offer-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.offer-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.offer-resp-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 240px; }
@media (max-width: 600px) {
  .offer-checks, .offer-grid { grid-template-columns: 1fr; }
  .offer-row { flex-direction: column; }
  .offer-actions { align-items: stretch; }
  .offer-resp-form { min-width: 0; }
}

/* Conversa manual na ficha do cliente */
.client-chat { max-height: 420px; overflow-y: auto; border-radius: 12px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.chat-form .btn { display: inline-flex; align-items: center; gap: 5px; flex: none; }

/* Minha semana (agent) */
.my-week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.my-week .wk-cell { border: 2px solid var(--border-md); min-width: 0; }
.my-week .wk-cell.is-today { border-color: var(--violet); background: var(--accent-soft); }
.my-week .wk-day { display: block; }
.kb-actions-link { font-size: .78rem; color: var(--info); text-decoration: none; }
@media (max-width: 600px) { .my-week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Baixas: dar baixa pelo comprovante */
.baixa-form { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.baixa-form .form-select, .baixa-form .form-control { width: auto; min-width: 140px; }

/* Notificacoes: cliente em destaque e aviso no topo quando chega uma nova */
.notif-client { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 2px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-weight: 800; text-decoration: none; font-size: .9rem; }
.notif-client svg { width: 14px; height: 14px; }
.notif-toasts { position: fixed; top: 64px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.notif-toast { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--violet); background: var(--bg-elevated); color: var(--text); text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: notif-in .25s var(--ease); }
.notif-toast-client { font-size: 1rem; }
.notif-toast-title { font-size: .86rem; color: var(--text-dim); }
.notif-toast small { font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }
@keyframes notif-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Notificacoes por cor: urgente · prioridade · para aprovar · pagamento · info */
.notif-card .list-group-item { background: transparent; color: var(--text); border-color: var(--border); }
.notif-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.notif-pill { padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 2px solid currentColor; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-left: 5px solid transparent !important; }
.notif-item.is-read { opacity: .62; }
.notif-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.notif-icon svg { width: 18px; height: 18px; }
.notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.notif-situation { padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.notif-title { font-weight: 700; overflow-wrap: anywhere; }
.notif-item.is-read .notif-title { font-weight: 500; }
.notif-body { font-size: .84rem; color: var(--text-dim); overflow-wrap: anywhere; }
.notif-time { font-size: .74rem; color: var(--text-muted); }
[data-notif-sound-toggle].is-muted { opacity: .6; }
.g-urgente { --g: var(--risk); --g-soft: var(--risk-soft); }
.g-prioridade { --g: var(--warn); --g-soft: var(--warn-soft); }
.g-aprovar { --g: var(--violet); --g-soft: var(--accent-soft); }
.g-dinheiro { --g: var(--ok); --g-soft: var(--ok-soft); }
.g-info { --g: var(--info); --g-soft: var(--info-soft); }
.notif-pill.g-urgente, .notif-pill.g-prioridade, .notif-pill.g-aprovar, .notif-pill.g-dinheiro, .notif-pill.g-info { color: var(--g); background: var(--g-soft); }
.notif-item[class*="g-"] { border-left-color: var(--g) !important; }
.notif-item[class*="g-"] .notif-icon { background: var(--g-soft); color: var(--g); }
.notif-item[class*="g-"] .notif-situation { background: var(--g-soft); color: var(--g); }
.notif-toast[class*="g-"] { border-color: var(--g); border-left-width: 6px; }
.notif-toast-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.notif-toast-group, .notif-toast-situation { padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: var(--g-soft, var(--info-soft)); color: var(--g, var(--info)); }
.notif-toast-situation { background: transparent; border: 1.5px solid var(--g, var(--info)); }
@media (max-width: 600px) {
  .notif-item { flex-wrap: wrap; }
  .notif-item form { flex-basis: 100%; }
  .notif-item form .btn { width: 100%; }
}

/* Lembrete diario: horarios de hoje na regra */
.wa-rule-detail { margin: 2px 0; font-size: .8rem; color: var(--info); }
.wa-rule-detail svg { width: 13px; height: 13px; }

/* "Estou fazendo" (Hoje do agent): caixinha grande, facil de tocar; marcada = cartao em Fazendo no Kanban */
.doing-box { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; padding: 8px 12px; border: 1.5px dashed var(--border-md); border-radius: 12px; color: var(--text-dim); font-size: .9rem; font-weight: 600; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.doing-box input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.doing-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border-md); color: transparent; transition: all .2s ease; }
.doing-check svg { width: 16px; height: 16px; }
.doing-box.is-on { border-style: solid; border-color: var(--violet); background: var(--accent-soft); color: #c4b5fd; }
.doing-box.is-on .doing-check { background: var(--violet); border-color: var(--violet); color: #fff; }
.doing-box input:focus-visible + .doing-check { box-shadow: 0 0 0 3px var(--violet-glow); }
.doing-box:has(input:disabled) { cursor: default; opacity: .85; }
.now-card .doing-box { margin: 6px 0 10px; }
.tl-row.is-doing .tl-card { border-color: var(--violet); }
.doing-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 2000; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: #1e2344; color: #fff; font-size: .9rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: all .25s ease; }
.doing-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.doing-toast[data-tone="error"] { background: var(--risk); }

/* Convite para instalar o app (Android/iPhone) */
.install-card { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 1990; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; background: #161a33; border: 1px solid rgba(124, 92, 255, .45); color: #e6e9f7; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.install-card img { flex: none; border-radius: 10px; }
.install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; line-height: 1.35; }
.install-text span { color: #9aa4c2; }
.install-actions { display: flex; align-items: center; gap: 4px; }
.install-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #9aa4c2; font-size: 1.4rem; line-height: 1; }
.field-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* iPhone: campo com letra menor que 16px faz o Safari dar zoom ao tocar; no celular todos ficam com 16px */
@media (max-width: 767.98px) {
  input.form-control, select.form-select, textarea.form-control, .form-control-sm, .form-select-sm { font-size: 16px; }
}
/* App instalado: sem o destaque cinza ao tocar */
@media (display-mode: standalone) {
  a, button, label { -webkit-tap-highlight-color: transparent; }
}