/* Evolutig Gestão — design system v2 (PHP, sem framework/build step) */
:root{
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-900:#312e81;
  --accent-400:#34d399; --accent-500:#059669; --accent-600:#047857;
  --violet-500:#8b5cf6; --violet-600:#7c3aed;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --rose-500:#e11d48; --rose-50:#fff1f2; --rose-100:#ffe4e6;
  --amber-500:#d97706; --amber-50:#fffbeb;
  --emerald-500:#059669; --emerald-50:#ecfdf5;
  --indigo-500:#4f46e5; --indigo-50:#eef2ff;
  --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 20px 50px -12px rgba(49,46,129,.25);
  --shadow-glow:0 0 0 1px rgba(99,102,241,.08), 0 12px 32px -8px rgba(99,102,241,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
/* v36: fundo neutro (cinza) no lugar do azulado anterior — o tom azul
   claro deixava tudo meio "lavado", competindo com as cores de status/tag
   que os módulos usam por cima. Cinza neutro dá mais contraste pra essas
   cores se destacarem, em qualquer módulo (isto é global, não só Demandas). */
body{font-family:var(--font-sans);color:var(--slate-900);background:linear-gradient(160deg,#f1f2f4 0%,#e6e7ea 45%,#f0f1f3 100%);background-attachment:fixed;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--slate-900)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
::selection{background:var(--brand-100);color:var(--brand-900)}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ===================== Motion ===================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes pulseSoft{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes dashDraw{to{stroke-dashoffset:0}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-1{transition-delay:.05s}.reveal-2{transition-delay:.12s}.reveal-3{transition-delay:.19s}.reveal-4{transition-delay:.26s}.reveal-5{transition-delay:.33s}.reveal-6{transition-delay:.4s}

.float{animation:floatY 6s ease-in-out infinite}
.float-slow{animation:floatSlow 9s ease-in-out infinite}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:11px 20px;font-size:14px;font-weight:600;border:1px solid transparent;transition:.2s var(--ease);position:relative}
.btn-primary{background:linear-gradient(135deg,var(--brand-600),var(--violet-600));color:#fff;box-shadow:0 6px 16px -4px rgba(79,70,229,.5)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -6px rgba(79,70,229,.55)}
.btn-secondary{background:#fff;color:var(--slate-700);border-color:var(--slate-200)}
.btn-secondary:hover{border-color:var(--slate-300);background:var(--slate-50);transform:translateY(-1px)}
.btn-danger{background:var(--rose-50);color:var(--rose-500);border-color:var(--rose-100)}
.btn-danger:hover{background:#ffe4e6}
.btn-ghost{background:transparent;color:var(--slate-600)}
.btn-ghost:hover{background:var(--slate-100)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}

/* Forms */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--slate-700);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 14px;border:1px solid var(--slate-200);border-radius:10px;outline:none;background:#fff;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.field-error{color:var(--rose-500);font-size:12.5px;margin-top:4px}
.field-hint{color:var(--slate-500);font-size:12.5px;margin-top:4px}

/* Alerts / flash */
.alert{padding:12px 16px;border-radius:10px;font-size:13.5px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start;animation:fadeInUp .4s var(--ease);min-width:0}
.alert>*{min-width:0}
.alert{overflow-wrap:break-word;word-break:break-word}
.alert-error{background:var(--rose-50);color:#9f1239;border:1px solid var(--rose-100)}
.alert-success{background:var(--emerald-50);color:#065f46;border:1px solid #a7f3d0}

/* Cards */
.card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card-pad{padding:22px}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge-brand{background:var(--brand-50);color:var(--brand-700)}
.badge-slate{background:var(--slate-100);color:var(--slate-600)}
.badge-emerald{background:var(--emerald-50);color:#065f46}
.badge-amber{background:var(--amber-50);color:#92400e}
.badge-rose{background:var(--rose-50);color:#9f1239}
.status-badge-nao_iniciado{background:var(--slate-100);color:var(--slate-600)}
.status-badge-pendente{background:var(--slate-100);color:var(--slate-600)}
.status-badge-em_andamento{background:var(--brand-50);color:var(--brand-700)}
.status-badge-concluido{background:#ecfdf5;color:var(--accent-600)}
.status-badge-atrasado{background:var(--rose-50);color:#9f1239}
.badge-violet{background:#f3e8ff;color:#6b21a8}

/* Trial banner */
.trial-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,var(--brand-600),var(--violet-600));color:#fff;padding:12px 20px;border-radius:12px;margin-bottom:20px;font-size:13.5px}
.trial-banner strong{font-weight:700}
.trial-banner .btn-secondary{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)}
.trial-banner .btn-secondary:hover{background:rgba(255,255,255,.25)}
.trial-expired-wrap{max-width:520px;margin:80px auto;text-align:center;padding:0 24px}
.trial-expired-wrap .icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--brand-600),var(--violet-600));display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#fff}

/* ===================== LANDING ===================== */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--slate-200);background:rgba(255,255,255,.82);backdrop-filter:blur(10px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:17px}
.brand .dot{width:11px;height:11px;border-radius:5px;background:linear-gradient(135deg,var(--brand-500),var(--accent-500));box-shadow:0 0 0 4px var(--brand-50)}
.brand-mark{width:32px;height:32px;flex-shrink:0;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#059669 100%);box-shadow:0 5px 14px -4px rgba(79,70,229,.5);letter-spacing:-.5px}
.sidebar-brand .brand-mark{box-shadow:0 5px 14px -4px rgba(129,140,248,.5)}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a.navtext{color:var(--slate-600);font-size:13.5px;font-weight:600}
.nav-links a.navtext:hover{color:var(--brand-700)}
.nav-cta{display:flex;gap:10px;align-items:center}

.hero{position:relative;padding:100px 24px 70px;text-align:center;overflow:hidden;background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.14), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(52,211,153,.14), transparent 45%),
    var(--slate-50)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at 50% 20%,black,transparent 70%);pointer-events:none}
.hero-blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;pointer-events:none}
.hero-blob.b1{width:340px;height:340px;background:radial-gradient(circle,var(--brand-400),transparent 70%);top:-80px;left:-60px}
.hero-blob.b2{width:300px;height:300px;background:radial-gradient(circle,var(--accent-400),transparent 70%);top:40px;right:-80px}
.hero-content{position:relative}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--slate-200);padding:6px 14px 6px 8px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--brand-700);box-shadow:var(--shadow-sm);margin-bottom:22px}
.hero-kicker .pip{width:8px;height:8px;border-radius:50%;background:var(--accent-500);animation:pulseSoft 2s ease-in-out infinite}
.hero h1{font-size:48px;font-weight:800;max-width:820px;margin:0 auto 20px;line-height:1.12;letter-spacing:-.01em}
.hero h1 .grad{background:linear-gradient(135deg,var(--brand-600),var(--violet-600) 60%,var(--accent-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:600px;margin:0 auto 32px;color:var(--slate-600);font-size:17.5px}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.hero-trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;color:var(--slate-500);font-size:12.5px;font-weight:600}
.hero-trust span{display:flex;align-items:center;gap:6px}
.hero-trust svg{width:15px;height:15px;color:var(--accent-500)}

.hero-visual{max-width:960px;margin:56px auto 0;position:relative}
.hero-visual .frame{background:#fff;border:1px solid var(--slate-200);border-radius:20px;box-shadow:var(--shadow-lg);padding:14px;animation:fadeInUp .8s var(--ease)}
.hero-visual .frame .bar{display:flex;gap:6px;padding:4px 6px 12px}
.hero-visual .frame .bar span{width:10px;height:10px;border-radius:50%;background:var(--slate-200)}
.mini-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mini-col{background:var(--slate-50);border-radius:12px;padding:10px}
.mini-col .h{font-size:10.5px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.mini-card{background:#fff;border:1px solid var(--slate-200);border-radius:8px;padding:8px 10px;font-size:11.5px;font-weight:600;margin-bottom:7px;box-shadow:var(--shadow-sm)}
.mini-card .bar-fill{height:4px;border-radius:2px;background:var(--slate-100);margin-top:6px;overflow:hidden}
.mini-card .bar-fill i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--brand-500),var(--accent-500))}
.float-chip{position:absolute;background:#fff;border:1px solid var(--slate-200);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow-md);font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}
.float-chip svg{width:16px;height:16px}
.float-chip.c1{top:-18px;right:6%}
.float-chip.c2{bottom:-16px;left:4%}

.section{padding:64px 24px}
.section-title{text-align:center;max-width:640px;margin:0 auto 44px}
.section-title .eyebrow{display:block;color:var(--brand-600);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.section-title h2{font-size:30px;margin-bottom:10px;letter-spacing:-.01em}
.section-title p{color:var(--slate-600)}

.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:1180px;margin:0 auto}
.module-card{padding:26px;border-radius:18px;border:1px solid var(--slate-200);background:#fff;transition:.25s var(--ease);position:relative;overflow:hidden}
.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-100)}
.module-card .icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff}
.module-card .icon svg{width:22px;height:22px}
.module-card h3{font-size:16px;margin-bottom:8px}
.module-card p{color:var(--slate-500);font-size:13.5px}
.module-card .link{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--brand-600);display:inline-flex;align-items:center;gap:5px}

.icon-grad-1{background:linear-gradient(135deg,var(--brand-500),var(--violet-600))}
.icon-grad-2{background:linear-gradient(135deg,#0ea5e9,var(--brand-600))}
.icon-grad-3{background:linear-gradient(135deg,var(--accent-500),#0d9488)}
.icon-grad-4{background:linear-gradient(135deg,var(--amber-500),#ea580c)}
.icon-grad-5{background:linear-gradient(135deg,var(--rose-500),#db2777)}
.icon-grad-6{background:linear-gradient(135deg,var(--violet-600),var(--brand-700))}
.icon-grad-7{background:linear-gradient(135deg,#0891b2,var(--accent-600))}
.icon-grad-8{background:linear-gradient(135deg,var(--slate-700),var(--slate-900))}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:920px;margin:0 auto}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{text-align:center;position:relative}
.step .num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand-600),var(--violet-600));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px;box-shadow:0 6px 16px -4px rgba(79,70,229,.5)}

/* ===================== ILUSTRAÇÃO ANIMADA (fluxo de dados) ===================== */
@keyframes dashMove{to{background-position:-24px 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(79,70,229,.45)}70%{box-shadow:0 0 0 14px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}
.flow-illustration{max-width:1040px;margin:44px auto 0;padding:46px 34px;border-radius:26px;background:linear-gradient(160deg,#f5f3ff 0%,#eef2ff 55%,#ecfdf5 100%);position:relative;overflow:hidden}
.flow-illustration::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(79,70,229,.08) 1px,transparent 1px);background-size:22px 22px;opacity:.6}
.lp-flow-nodes{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:4px}
.lp-flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;flex:0 0 auto;width:112px}
.lp-flow-node .icon-circle{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;animation:floatY 5s ease-in-out infinite,pulseRing 3.2s ease-in-out infinite}
.lp-flow-node .icon-circle svg{width:24px;height:24px}
.lp-flow-node span{font-size:12px;font-weight:700;color:var(--slate-700)}
.lp-flow-node:nth-child(odd) .icon-circle{animation-delay:.4s,.6s}
.lp-flow-line{width:34px;height:2px;margin-top:29px;flex:0 0 auto;background-image:linear-gradient(90deg,var(--brand-400) 50%,transparent 50%);background-size:12px 2px;animation:dashMove 1s linear infinite}
@media (max-width:760px){.lp-flow-nodes{justify-content:flex-start}}
.flow-caption{text-align:center;margin-top:30px;color:var(--slate-500);font-size:13px;position:relative;z-index:1}

/* ===================== VITRINE DE TELAS (screenshots) ===================== */
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1180px;margin:0 auto}
.showcase-frame{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-md);transition:.3s var(--ease)}
.showcase-frame:hover{transform:translateY(-6px) scale(1.015);box-shadow:var(--shadow-lg);border-color:var(--brand-200)}
.showcase-frame .chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--slate-50);border-bottom:1px solid var(--slate-200)}
.showcase-frame .chrome i{width:9px;height:9px;border-radius:50%;display:block;background:var(--slate-300)}
.showcase-frame .chrome i:nth-child(1){background:#f87171}
.showcase-frame .chrome i:nth-child(2){background:#fbbf24}
.showcase-frame .chrome i:nth-child(3){background:#34d399}
.showcase-frame img{display:block;width:100%;height:auto}
.showcase-caption{padding:14px 16px 18px}
.showcase-caption h4{font-size:14px;margin-bottom:4px}
.showcase-caption p{font-size:12.5px;color:var(--slate-500)}

.consult-cta{max-width:920px;margin:0 auto;border-radius:24px;padding:56px 40px;text-align:center;background:linear-gradient(135deg,var(--brand-700),var(--violet-600) 55%,var(--brand-900));color:#fff;position:relative;overflow:hidden}
.consult-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.12),transparent 40%)}
.consult-cta *{position:relative}
.consult-cta h2{color:#fff;font-size:28px;margin-bottom:12px}
.consult-cta p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 28px}
.consult-cta .btn-secondary{background:#fff;color:var(--brand-700);border:none}
.trial-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:700;margin-bottom:20px}

.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.testimonial{padding:24px;border-radius:16px}
.testimonial p{font-size:14px;color:var(--slate-700);margin-bottom:16px;font-style:italic}
.testimonial .who{display:flex;align-items:center;gap:10px}
.testimonial .avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;font-family:var(--font-display)}
.testimonial .name{font-weight:700;font-size:13px}
.testimonial .role{color:var(--slate-500);font-size:12px}

.footer{padding:36px 24px;text-align:center;color:var(--slate-500);font-size:13px;border-top:1px solid var(--slate-200)}

/* ===================== AUTH ===================== */
.auth-wrap{min-height:100vh;display:flex}
.auth-side{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.auth-form-box{width:100%;max-width:400px;animation:fadeInUp .5s var(--ease)}
.auth-illustration{flex:1;background:linear-gradient(160deg,var(--brand-700),var(--violet-600) 55%,var(--accent-600));display:flex;align-items:center;justify-content:center;color:#fff;padding:40px;position:relative;overflow:hidden}
.auth-illustration::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:36px 36px}
@media (max-width:880px){.auth-illustration{display:none}}
.auth-illustration .content{max-width:380px;position:relative}
.auth-illustration h2{color:#fff;font-size:26px;margin-bottom:12px}
.auth-illustration p{color:rgba(255,255,255,.85);font-size:14px}
.auth-illustration .badges{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.auth-illustration .badges span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:7px 14px 7px 10px;border-radius:999px;font-size:12px;font-weight:600}
.auth-illustration .badges svg{width:15px;height:15px;flex-shrink:0}
.auth-illustration .float-shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none}
.auth-illustration .fs1{width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);top:8%;right:10%;animation:floatY 7s ease-in-out infinite}
.auth-illustration .fs2{width:90px;height:90px;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);bottom:14%;left:8%;animation:floatSlow 8s ease-in-out infinite}
.auth-illustration .mini-preview{position:relative;z-index:1;margin-top:30px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:16px;backdrop-filter:blur(4px)}
.auth-illustration .mini-preview .row{display:flex;align-items:center;gap:10px;padding:7px 0}
.auth-illustration .mini-preview .row .bar-fill{flex:1;height:6px;background:rgba(255,255,255,.2);border-radius:4px;overflow:hidden}
.auth-illustration .mini-preview .row .bar-fill i{display:block;height:100%;background:#fff;border-radius:4px}
.auth-illustration .mini-preview .row span{font-size:11.5px;font-weight:600;white-space:nowrap}

/* ===================== DASHBOARD SHELL ===================== */
.app{display:flex;min-height:100vh}
/* Barra lateral em tom azul-marinho escuro: azul transmite confiança,
   estabilidade e profissionalismo (psicologia das cores), separa com clareza
   a navegação (fundo escuro) da área de trabalho (fundo claro) — um padrão
   já familiar em painéis de gestão — e o alto contraste do texto claro
   sobre o fundo escuro facilita a leitura dos itens de menu. */
.sidebar{width:250px;flex-shrink:0;background:linear-gradient(190deg,#1e2749 0%,#161d38 55%,#11162c 100%);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.sidebar-brand{padding:6px 10px 20px}
.sidebar-brand .brand{color:#fff}
.sidebar-brand .brand .dot{box-shadow:0 0 0 4px rgba(129,140,248,.22)}
.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.sidebar-tier-block{border-radius:0 12px 12px 0;margin:6px 0;padding-bottom:4px;border-left:3px solid transparent}
.sidebar-tier-block.tier-estrategico{border-left-color:#818cf8;background:linear-gradient(90deg,rgba(129,140,248,.10),transparent 65%)}
.sidebar-tier-block.tier-tatico{border-left-color:#c4b5fd;background:linear-gradient(90deg,rgba(196,181,253,.09),transparent 65%)}
.sidebar-tier-block.tier-operacional{border-left-color:#6ee7b7;background:linear-gradient(90deg,rgba(110,231,183,.10),transparent 65%)}
.sidebar-tier{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;padding:14px 12px 2px 13px;margin-top:0;cursor:pointer;user-select:none;border-radius:8px}
.sidebar-tier .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.sidebar-tier-sep{height:1px;background:rgba(255,255,255,.1);margin:12px 12px 4px}
.sidebar-section{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(203,213,225,.55);padding:12px 12px 6px 13px;cursor:pointer;user-select:none;border-radius:8px}
.sidebar-section-bullet{width:5px;height:5px;border-radius:50%;flex-shrink:0;opacity:.85}
.sidebar-tier:hover,.sidebar-section:hover{background:rgba(255,255,255,.06)}
.sidebar-tier:focus-visible,.sidebar-section:focus-visible{outline:2px solid rgba(129,140,248,.65);outline-offset:1px}
.sidebar-tier .chevron,.sidebar-section .chevron{width:12px;height:12px;flex-shrink:0;margin-left:auto;opacity:.5;transition:transform .2s ease}
.sidebar-tier-block.collapsed>.sidebar-tier .chevron,.sidebar-group.collapsed>.sidebar-section .chevron{transform:rotate(-90deg)}
.sidebar-collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.sidebar-collapsible>.sidebar-collapsible-inner{overflow:hidden;min-height:0}
.sidebar-tier-block.collapsed>.sidebar-collapsible,.sidebar-group.collapsed>.sidebar-collapsible{grid-template-rows:0fr}
.sidebar a.navlink{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#c6cde4;font-size:13.5px;font-weight:500;transition:.15s}
.sidebar a.navlink svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.sidebar a.navlink:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar a.navlink.active{background:linear-gradient(135deg,var(--brand-500),var(--violet-600));color:#fff;font-weight:700;box-shadow:0 6px 16px -6px rgba(79,70,229,.6)}
.sidebar a.navlink.active svg{opacity:1}
.sidebar-user{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:10px;font-size:13px}
.sidebar-user .name{font-weight:600;color:#fff}
.sidebar-user .email{color:#8b93b3;font-size:12px}
.sidebar-user .btn-secondary{background:rgba(255,255,255,.06);color:#e2e8f0;border-color:rgba(255,255,255,.14)}
.sidebar-user .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}

.main{flex:1;min-width:0;min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--slate-200);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.topbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.topbar h1{font-size:19px}
.content{padding:26px 28px 60px;animation:fadeInUp .45s var(--ease)}

/* Botão "hambúrguer" — só aparece no breakpoint mobile abaixo. Fica fora do
   @media pra já existir no DOM (acessibilidade/foco) mesmo escondido. */
.sidebar-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700);cursor:pointer}
.sidebar-toggle svg{width:19px;height:19px}
.sidebar-toggle:hover{background:var(--slate-50)}

/* Fundo escurecido atrás do menu deslizante — escondido no desktop e quando
   o menu mobile está fechado. */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:998}

@media (max-width:840px){
  .app{flex-direction:column}
  .sidebar-toggle{display:inline-flex}
  /* A barra lateral vira um painel deslizante (off-canvas) — fixo, largura
     limitada, fora da tela por padrão — em vez de tentar caber virando uma
     faixa horizontal com todos os links (o que estourava a tela e exigia
     rolar de lado, como reportado pelo cliente). O empilhamento vertical
     normal de tier > grupo > link (igual ao desktop) continua funcionando,
     inclusive o recolher/expandir por categoria. */
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:290px;
    max-width:85vw;
    height:100vh;
    flex-shrink:0;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:999;
    box-shadow:14px 0 40px -12px rgba(0,0,0,.4);
  }
  .app.sidebar-open .sidebar{transform:translateX(0)}
  .app.sidebar-open .sidebar-backdrop{display:block}
}

/* Trava o scroll da página por trás enquanto o menu mobile está aberto. */
body.sidebar-lock-scroll{overflow:hidden}

/* Painel dividido (lista de conversas + conversa aberta), usado em
   Atendimento via WhatsApp e Chat Interno: no desktop é lado a lado com a
   lista numa largura fixa; abaixo de 700px essa largura fixa não cabe mais
   ao lado do painel de mensagens, então empilha um em cima do outro. */
@media (max-width:700px){
  .split-panel{flex-direction:column!important;height:auto!important;min-height:0!important}
  .split-panel-list{width:100%!important;flex-shrink:1!important;max-height:280px}
  .split-panel-main{min-height:60vh}
}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{padding:20px;position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center}
.stat-card .label{font-size:12.5px;color:var(--slate-500);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat-card .value{font-size:26px;font-weight:700;font-family:var(--font-display);margin-top:6px}
.stat-card .icon-corner{position:static;margin:0 auto 12px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.stat-card .icon-corner svg{width:16px;height:16px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--slate-200);margin-bottom:22px;overflow-x:auto}
.tabs a{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--slate-500);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.active{color:var(--brand-700);border-color:var(--brand-600)}

/* ===================== Formulário em etapas (estilo Typeform) =====================
   Um passo por vez, com barra de progresso e fundo cinza no conteúdo — reduz a
   carga cognitiva de encarar um formulário longo inteiro de uma vez (efeito de
   "chunking" da neuropsicologia) e deixa clara a sequência esperada. */
.wizard-progress{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.wizard-step-dot{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--slate-100);color:var(--slate-400);font-size:12.5px;font-weight:700;flex:1;min-width:110px;justify-content:center;transition:.2s var(--ease);cursor:default}
.wizard-step-dot .num{width:20px;height:20px;border-radius:50%;background:var(--slate-300);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.wizard-step-dot.active{background:linear-gradient(135deg,var(--brand-50),#eef0ff);color:var(--brand-700);box-shadow:var(--shadow-sm)}
.wizard-step-dot.active .num{background:linear-gradient(135deg,var(--brand-600),var(--violet-600))}
.wizard-step-dot.done{background:var(--emerald-50);color:#047857;cursor:pointer}
.wizard-step-dot.done .num{background:#059669}
.wizard-step-dot.done:hover{background:#d1fae5}

.wizard-step-body{background:#f2f4f8;border-radius:16px;padding:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.wizard-step-body .field{flex:1;min-width:150px;margin-bottom:0}
.wizard-step-title{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;flex:0 0 100%;margin-bottom:2px}
.wizard-step-hint{flex:0 0 100%;color:var(--slate-500);font-size:12px;margin:-8px 0 0}
.wizard-step-body>div[style*="width:100%"]{flex-basis:100%}
.wizard-step-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}
.wizard-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
@media (max-width:640px){
  .wizard-step-dot .lbl{display:none}
  .wizard-step-dot{flex:0 0 auto;min-width:0;padding:9px 12px}
}

/* ===================== Pop-up de alerta (prazos vencendo etc.) ===================== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeInUp .2s var(--ease)}
.modal-box{background:#fff;border-radius:18px;max-width:480px;width:100%;max-height:85vh;overflow-y:auto;padding:22px;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal-header h3{font-size:16px;margin-bottom:2px}
.modal-header p{font-size:12.5px;color:var(--slate-500)}
.modal-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#d97706,#e11d48);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-close{margin-left:auto;background:transparent;border:none;color:var(--slate-400);font-size:16px;padding:2px 6px;border-radius:6px;flex-shrink:0}
.modal-close:hover{background:var(--slate-100);color:var(--slate-700)}
.modal-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.modal-list a{display:flex;align-items:center;gap:8px;background:var(--slate-50);border-radius:10px;padding:9px 12px;font-size:12.5px;transition:.15s}
.modal-list a:hover{background:var(--slate-100)}
.modal-list .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.modal-list-title{flex:1;font-weight:600;color:var(--slate-800)}
.modal-list-tag{font-weight:700;font-size:11px;white-space:nowrap}

/* ===================== Clientes ===================== */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.client-card{padding:18px;display:block;transition:.15s var(--ease)}
.client-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.client-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.client-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-600),var(--violet-600));color:#fff;display:flex;align-items:center;justify-content:center}
.client-card-name{font-weight:700;font-size:14px;color:var(--slate-900);margin-bottom:4px}
.client-card-meta{color:var(--slate-500);font-size:12px;margin-bottom:4px}
.client-card-value{font-weight:700;color:var(--slate-700);font-size:13.5px;margin-bottom:8px}
.client-card-tags{display:flex;flex-wrap:wrap;gap:5px}

/* ===================== Onboarding ===================== */
.onboarding-check{width:24px;height:24px;border-radius:7px;border:2px solid var(--slate-300);background:#fff;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.onboarding-check.done{background:#059669;border-color:#059669}
.onboarding-check:hover{border-color:var(--brand-400)}

/* Impressão — some com a navegação e mostra só o conteúdo (kits, relatórios) */
@media print{
  .sidebar,.topbar,.trial-banner,.no-print{display:none !important}
  .main{margin:0}
  .content{padding:0}
  .card{box-shadow:none;border:1px solid #ddd}
}

table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:left;color:var(--slate-500);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:1px solid var(--slate-200)}
table.data td{padding:12px;border-bottom:1px solid var(--slate-100)}
table.data tr:last-child td{border-bottom:none}

/* Kanban */
.hint-drag{color:var(--slate-500);font-size:12.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;align-items:stretch}
.kanban-col{flex:0 0 260px;background:var(--slate-100);border-radius:14px;padding:12px;transition:.2s;display:flex;flex-direction:column}
.kanban-col h3{font-size:13px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;color:var(--slate-700)}
/* v21.2: contador de cards da coluna dentro de um círculo colorido (cor da
   própria etapa), em vez do badge cinza genérico de antes. */
.kanban-count-circle{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;color:#fff;font-size:11.5px;font-weight:800;flex-shrink:0}
/* v21.2: bolinha colorida ao lado do nome da etapa, mesma cor do header */
.kanban-col h3 .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
/* v21.1: flex:1 pra ocupar toda a altura da coluna (mesmo quando ela fica
   mais alta que o conteúdo, esticada pelas colunas vizinhas) — sem isso, só
   dava pra soltar um card exatamente em cima de outro card ou na fresta de
   60px mínima, e não em qualquer espaço vazio da coluna. */
.kanban-dropzone{min-height:60px;border-radius:10px;transition:.15s;flex:1}
.kanban-dropzone.drag-over{background:var(--brand-50);outline:2px dashed var(--brand-300)}
.kanban-card{position:relative;background:#fff;border:1px solid var(--slate-200);border-radius:10px;padding:12px;margin-bottom:10px;font-size:13px;box-shadow:var(--shadow-sm);cursor:grab;transition:.15s}
.kanban-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand-200)}
.kanban-card.dragging{opacity:.4;cursor:grabbing}
.kanban-card .title{font-weight:600;margin-bottom:4px}
.kanban-card .meta{color:var(--slate-500);font-size:12px}
.kanban-card select{margin-top:8px;width:100%;font-size:12px;padding:5px}
.kanban-card[data-stage="perdido"]{opacity:.7;filter:grayscale(.4)}
.kanban-card .stretched-link{position:absolute;inset:0;z-index:1;border-radius:10px}
.kanban-card form,
.kanban-card .tag-link{position:relative;z-index:2}
.kanban-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--slate-100);color:var(--slate-600);font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px}
.tag-chip .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
a.tag-link{background:var(--brand-50);color:var(--brand-700)}
a.tag-link:hover{background:var(--brand-100)}

/* v36.1: redesenho visual do Kanban de Demandas — classes com namespace
   próprio (.demand-*) empilhadas SOBRE .kanban-card/.kanban-col/.tag-chip,
   sem alterar essas regras base, porque elas também são usadas pelo Kanban
   de negócios do CRM (dashboard/comercial.php). Objetivo: colunas mais
   largas, cards com mais respiro, ícone de tipo + canal, avatar circular do
   responsável, pílula de prazo colorida (vermelho/âmbar/verde) e barra de
   progresso do SLA — pedido do usuário com base numa referência visual
   (ekyte.com) e reforçando "algo bem interativo desde movimento".  */
.demand-col{flex-basis:308px;min-width:308px}
.demand-card{padding:15px 16px 14px 18px;border-radius:12px;overflow:hidden;margin-bottom:12px}
.demand-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--demand-accent,var(--slate-300));border-radius:12px 0 0 12px}
.demand-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.demand-card.dragging{transform:rotate(-1.5deg) scale(1.03);box-shadow:var(--shadow-lg);z-index:5}
.demand-card-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.demand-card-head .title{margin-bottom:0;flex:1;line-height:1.3}
.demand-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;flex-shrink:0}
.demand-badge.channel{width:19px;height:19px;border-radius:50%}
.demand-timer-dot{width:9px;height:9px;border-radius:50%;background:#059669;flex-shrink:0;animation:pulseSoft 1.4s ease-in-out infinite;box-shadow:0 0 0 3px rgba(5,150,105,.18)}
.demand-avatar{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:800;flex-shrink:0;letter-spacing:-.2px}
.demand-due-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;margin-top:8px}
.demand-due-pill.is-late{background:#fde8ec;color:#e11d48}
.demand-due-pill.is-soon{background:#fef3e2;color:#b45309}
.demand-due-pill.is-ok{background:#e3f5ec;color:#047857}
.demand-sla{margin-top:8px}
.demand-sla-track{height:5px;border-radius:999px;background:var(--slate-100);overflow:hidden}
.demand-sla-fill{height:100%;border-radius:999px;transition:width .3s var(--ease,ease)}
.demand-sla-label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--slate-500);margin-top:3px;font-weight:600}
/* v36.2: alerta de atraso — some enquanto a etapa está dentro do SLA e
   aparece (com uma pulsação sutil, sem exagerar) assim que o tempo real
   passa do previsto; o texto do contador é atualizado ao vivo pelo JS. */
.demand-overtime{display:flex;align-items:center;gap:5px;margin-top:7px;padding:5px 9px;border-radius:8px;background:var(--rose-50);color:#9f1239;font-size:10.5px;font-weight:700;animation:pulseSoft 2s ease-in-out infinite}

/* v36.2: modal de Demandas maior e dividido em seções bem demarcadas — o
   usuário reportou que os campos "se misturavam" (não dava pra perceber
   onde terminava o título e começava o tipo, por exemplo, sem ler com
   atenção). Cada seção ganha fundo e borda próprios pra separar
   visualmente, e o modal cresce bastante (era 640px) pra caber duas
   colunas: dados da demanda à esquerda, execução/cronômetro/histórico à
   direita — sem precisar rolar tanto. */
.demand-modal-box{max-width:980px;width:96vw;max-height:92vh}
.demand-modal-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.demand-modal-grid{grid-template-columns:1fr}}
.demand-modal-section{background:var(--slate-50);border:1px solid var(--slate-100);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.demand-modal-section:last-child{margin-bottom:0}
.demand-modal-section h4{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.045em;color:var(--slate-500);margin-bottom:12px;font-weight:800}
.demand-modal-section .field:last-child{margin-bottom:0}
#demand-modal-stage-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-top:2px}
.demand-history-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.demand-history-item{position:relative;padding-left:16px;font-size:12px;color:var(--slate-600)}
.demand-history-item::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:50%;background:var(--brand-400)}
.demand-history-item .when{font-size:10.5px;color:var(--slate-400);font-weight:600;margin-top:1px}

/* v36.2: quadro de Demandas usa a altura disponível da tela (calculada via
   JS, ver fitKanbanHeight()) e cada coluna rola seus próprios cards por
   dentro — em vez de a página inteira crescer pra baixo conforme os cards
   se acumulam. O scroll horizontal do quadro (quando as colunas não cabem
   lado a lado) e o vertical de cada coluna ganham uma barra fina e discreta
   no lugar da barra padrão do sistema operacional. Tudo isso é escopado a
   #demand-kanban-board pra não afetar em nada o Kanban do CRM. */
#demand-kanban-board{scrollbar-width:thin;scrollbar-color:var(--slate-300) transparent}
#demand-kanban-board::-webkit-scrollbar{height:8px}
#demand-kanban-board::-webkit-scrollbar-track{background:transparent}
#demand-kanban-board::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:999px}
#demand-kanban-board::-webkit-scrollbar-thumb:hover{background:var(--slate-400)}
#demand-kanban-board .kanban-dropzone{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--slate-200) transparent;padding-right:2px}
#demand-kanban-board .kanban-dropzone::-webkit-scrollbar{width:6px}
#demand-kanban-board .kanban-dropzone::-webkit-scrollbar-track{background:transparent}
#demand-kanban-board .kanban-dropzone::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:999px}
#demand-kanban-board .kanban-dropzone::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}

/* v37: Central de Atendimento (Tickets) — mesmo tratamento visual do
   Kanban de Demandas (v36.1/36.2), namespace próprio (.ticket-*) empilhado
   sobre .kanban-card/.kanban-col/.tag-chip (compartilhadas com CRM e
   Demandas), sem alterar essas regras base. SLA por categoria em vez de
   cronômetro manual — a barra/pílula de prazo reflete devido (due_at) fixo,
   recalculado ao vivo pelo JS, sem estado de start/stop. */
.ticket-col{flex-basis:308px;min-width:308px}
.ticket-card{padding:15px 16px 14px 18px;border-radius:12px;overflow:hidden;margin-bottom:12px}
.ticket-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ticket-accent,var(--slate-300));border-radius:12px 0 0 12px}
.ticket-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ticket-card.dragging{transform:rotate(-1.5deg) scale(1.03);box-shadow:var(--shadow-lg);z-index:5}
.ticket-card-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ticket-card-head .title{margin-bottom:0;flex:1;line-height:1.3}
.ticket-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;flex-shrink:0}
.ticket-avatar{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:800;flex-shrink:0;letter-spacing:-.2px}
.ticket-due-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;margin-top:8px}
.ticket-due-pill.is-late{background:#fde8ec;color:#e11d48}
.ticket-due-pill.is-soon{background:#fef3e2;color:#b45309}
.ticket-due-pill.is-ok{background:#e3f5ec;color:#047857}
.ticket-sla{margin-top:8px}
.ticket-sla-track{height:5px;border-radius:999px;background:var(--slate-100);overflow:hidden}
.ticket-sla-fill{height:100%;border-radius:999px;transition:width .3s var(--ease,ease)}

.ticket-modal-box{max-width:980px;width:96vw;max-height:92vh}
.ticket-modal-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.ticket-modal-grid{grid-template-columns:1fr}}
.ticket-modal-section{background:var(--slate-50);border:1px solid var(--slate-100);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.ticket-modal-section:last-child{margin-bottom:0}
.ticket-modal-section h4{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.045em;color:var(--slate-500);margin-bottom:12px;font-weight:800}
.ticket-modal-section .field:last-child{margin-bottom:0}
#ticket-modal-stage-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-top:2px}
.ticket-history-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.ticket-history-item{position:relative;padding-left:16px;font-size:12px;color:var(--slate-600)}
.ticket-history-item::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:50%;background:var(--brand-400)}
.ticket-history-item .when{font-size:10.5px;color:var(--slate-400);font-weight:600;margin-top:1px}

#ticket-kanban-board{scrollbar-width:thin;scrollbar-color:var(--slate-300) transparent}
#ticket-kanban-board::-webkit-scrollbar{height:8px}
#ticket-kanban-board::-webkit-scrollbar-track{background:transparent}
#ticket-kanban-board::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:999px}
#ticket-kanban-board::-webkit-scrollbar-thumb:hover{background:var(--slate-400)}
#ticket-kanban-board .kanban-dropzone{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--slate-200) transparent;padding-right:2px}
#ticket-kanban-board .kanban-dropzone::-webkit-scrollbar{width:6px}
#ticket-kanban-board .kanban-dropzone::-webkit-scrollbar-track{background:transparent}
#ticket-kanban-board .kanban-dropzone::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:999px}
#ticket-kanban-board .kanban-dropzone::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}

/* DISC bars */
.disc-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--slate-100)}
.disc-bar span{height:100%;transition:width .6s var(--ease)}
.disc-legend{display:flex;gap:14px;font-size:12px;color:var(--slate-600);margin-top:8px;flex-wrap:wrap}
.disc-legend .dot{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}

.profile-card{padding:18px}
.profile-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.geo-stat-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.geo-stat-pulse .geo-stat-icon{animation:geo-pulse 2.2s ease-in-out infinite}
@keyframes geo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.45)}50%{box-shadow:0 0 0 8px rgba(225,29,72,0)}}
.geo-stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.profile-avatar{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-display);margin-bottom:12px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700))}

.swot-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.swot-grid{grid-template-columns:1fr}}
.swot-col{padding:20px;border-radius:16px;border-top:5px solid var(--slate-300);box-shadow:var(--shadow-sm)}
.swot-col h3{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.swot-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}
.swot-col ul{list-style:none;padding:0;margin:0 0 12px}
.swot-col li{background:#fff;border-radius:8px;border-left:3px solid var(--slate-200);padding:8px 10px;margin-bottom:6px;font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start;box-shadow:var(--shadow-sm)}

.swot-forca{background:rgba(5,150,105,.09);border-top-color:#059669}
.swot-forca .swot-icon{background:#059669}
.swot-forca h3{color:#047857}
.swot-forca li{border-left-color:#059669}

.swot-fraqueza{background:rgba(225,29,72,.08);border-top-color:#e11d48}
.swot-fraqueza .swot-icon{background:#e11d48}
.swot-fraqueza h3{color:#be123c}
.swot-fraqueza li{border-left-color:#e11d48}

.swot-oportunidade{background:rgba(79,70,229,.08);border-top-color:#4f46e5}
.swot-oportunidade .swot-icon{background:#4f46e5}
.swot-oportunidade h3{color:#4338ca}
.swot-oportunidade li{border-left-color:#4f46e5}

.swot-ameaca{background:rgba(217,119,6,.1);border-top-color:#d97706}
.swot-ameaca .swot-icon{background:#d97706}
.swot-ameaca h3{color:#b45309}
.swot-ameaca li{border-left-color:#d97706}

.porter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.porter-card{padding:18px;border-radius:16px;border-top:5px solid var(--slate-300);box-shadow:var(--shadow-sm)}
.porter-card .porter-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.porter-card .intensity{display:flex;gap:3px;margin-top:8px}
.porter-card .intensity span{flex:1;height:7px;border-radius:3px;background:var(--slate-200)}
.porter-card .intensity span.filled{background:var(--porter-accent,var(--brand-500))}

.porter-rivalidade{background:rgba(225,29,72,.07);border-top-color:#e11d48;--porter-accent:#e11d48}
.porter-rivalidade .porter-icon{background:#e11d48}
.porter-rivalidade .porter-title{color:#be123c}

.porter-novos_entrantes{background:rgba(217,119,6,.08);border-top-color:#d97706;--porter-accent:#d97706}
.porter-novos_entrantes .porter-icon{background:#d97706}
.porter-novos_entrantes .porter-title{color:#b45309}

.porter-fornecedores{background:rgba(79,70,229,.07);border-top-color:#4f46e5;--porter-accent:#4f46e5}
.porter-fornecedores .porter-icon{background:#4f46e5}
.porter-fornecedores .porter-title{color:#4338ca}

.porter-compradores{background:rgba(124,58,237,.07);border-top-color:#7c3aed;--porter-accent:#7c3aed}
.porter-compradores .porter-icon{background:#7c3aed}
.porter-compradores .porter-title{color:#6d28d9}

.porter-substitutos{background:rgba(5,150,105,.07);border-top-color:#059669;--porter-accent:#059669}
.porter-substitutos .porter-icon{background:#059669}
.porter-substitutos .porter-title{color:#047857}

.ice-list{display:flex;flex-direction:column;gap:10px}
.ice-row{display:flex;align-items:center;gap:14px;padding:12px 16px}
.ice-score{width:46px;height:46px;border-radius:12px;background:var(--brand-50);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);flex-shrink:0}
.ice-row .name{font-weight:600;font-size:13.5px}
.ice-row .meta{font-size:12px;color:var(--slate-500)}

.funnel-bar{height:38px;border-radius:8px;display:flex;align-items:center;color:#fff;padding:0 14px;font-size:13px;font-weight:600;margin-bottom:4px;transition:width .6s var(--ease)}
.funnel-conv{text-align:center;font-size:11.5px;color:var(--slate-500);margin-bottom:8px}

.empty-state{text-align:center;padding:40px 20px;color:var(--slate-500);font-size:13.5px}
.empty-state::before{content:'';display:block;width:44px;height:44px;margin:0 auto 12px;opacity:.4;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l3-4h12l3 4M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7M3 7h18M8 11h2a2 2 0 0 0 4 0h2'/%3E%3C/svg%3E")}

/* Organograma — árvore recuada com linhas de conexão (mais robusta entre
   navegadores/larguras de tela do que um organograma horizontal clássico). */
.dept-tree,.dept-tree ul{list-style:none;margin:0;padding:0}
.dept-tree ul{margin-left:22px;padding-left:20px;border-left:2px solid var(--slate-200);margin-top:12px}
.dept-tree li{margin-bottom:12px;position:relative}
.dept-tree li::before{content:'';position:absolute;left:-20px;top:20px;width:16px;height:0;border-top:2px solid var(--slate-200)}
.dept-tree>li::before{display:none}
.dept-node{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--slate-200);background:#fff;box-shadow:var(--shadow-sm);min-width:180px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dept-node:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:780px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
/* Sem isto, um item de grid não encolhe abaixo do tamanho do seu próprio
   conteúdo (ex.: um <input type="file">, que o navegador nunca deixa ficar
   menor que um tamanho mínimo) — em telas estreitas isso estourava a
   largura da página inteira mesmo com grid-template-columns em 1fr. */
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.inline-form .field{margin-bottom:0;flex:1;min-width:140px}

/* ===================== BSC ===================== */
.bsc-card{padding:20px;border-top:4px solid var(--slate-300)}
.bsc-card.persp-financeira{border-top-color:var(--emerald-500)}
.bsc-card.persp-clientes{border-top-color:var(--brand-500)}
.bsc-card.persp-processos{border-top-color:var(--amber-500)}
.bsc-card.persp-aprendizado{border-top-color:var(--violet-500)}
.bsc-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-500);margin-bottom:14px}
.bsc-objective{padding:12px 0;border-bottom:1px solid var(--slate-100)}
.bsc-objective:last-child{border-bottom:none}
.bsc-objective .goal{font-weight:600;font-size:13.5px;margin-bottom:4px}
.bsc-objective .metrics{display:flex;justify-content:space-between;font-size:12px;color:var(--slate-500)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.status-no_prazo{background:var(--accent-500)}
.status-atencao{background:var(--amber-500)}
.status-atrasado{background:var(--rose-500)}

/* ===================== Ferramentas ===================== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tool-card{padding:20px;transition:.2s var(--ease)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tool-card .icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;font-size:16px;font-weight:700;font-family:var(--font-display)}
.tool-card h3{font-size:14px;margin-bottom:6px}
.tool-card p{color:var(--slate-500);font-size:12.5px;margin-bottom:10px}
.tool-card .count{font-size:11.5px;color:var(--slate-400);font-weight:600}
.tool-instance-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--slate-100)}
.tool-instance-row:last-child{border-bottom:none}

.gut-table,.fivew-table{width:100%;border-collapse:collapse}
.gut-table th,.gut-table td{padding:8px;border-bottom:1px solid var(--slate-100);font-size:13px;text-align:left}
.why-chain{border-left:3px solid var(--brand-200);padding-left:16px;display:flex;flex-direction:column;gap:12px}
.why-chain .why-item{position:relative;font-size:13.5px}
.why-chain .why-item::before{content:"";position:absolute;left:-20.5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--brand-500)}

/* ===================== AIDA / PUV ===================== */
.aida-funnel{display:flex;flex-direction:column;gap:6px}
.aida-row{display:flex;align-items:center;gap:12px}
.aida-row .label{width:100px;font-size:12.5px;font-weight:600;color:var(--slate-600);flex-shrink:0}
.aida-row .bar-wrap{flex:1;background:var(--slate-100);border-radius:8px;overflow:hidden;height:32px}
.aida-row .bar-wrap i{display:flex;align-items:center;height:100%;padding:0 12px;color:#fff;font-size:12px;font-weight:700;border-radius:8px;transition:width .6s var(--ease)}
.puv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.puv-block{padding:16px}
.puv-block .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-600);margin-bottom:6px}
.puv-block .v{font-size:13.5px;color:var(--slate-700)}

/* Cross-links */
.related-box{background:var(--slate-50);border:1px dashed var(--slate-300);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--slate-600);margin-top:10px}
.related-box a{color:var(--brand-600);font-weight:700}

/* ===================== Ferramentas — visualizações ===================== */
.viz-bars{display:flex;flex-direction:column;gap:9px}
.viz-bar-row{display:flex;align-items:center;gap:10px}
.viz-bar-row .lbl{width:150px;font-size:12.5px;color:var(--slate-600);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-bar-row .track{flex:1;background:var(--slate-100);border-radius:8px;height:26px;overflow:hidden;position:relative}
.viz-bar-row .track i{display:flex;align-items:center;justify-content:flex-end;height:100%;padding:0 10px;color:#fff;font-size:11.5px;font-weight:700;border-radius:8px;background:linear-gradient(90deg,var(--brand-500),var(--violet-600));transition:width .5s var(--ease);white-space:nowrap;min-width:34px}
.viz-bar-row .val{width:46px;text-align:right;font-size:12.5px;font-weight:700;color:var(--slate-700);flex-shrink:0}
.viz-empty{text-align:center;padding:24px;color:var(--slate-500);font-size:13px}

.why-chain{display:flex;flex-direction:column}
.why-step{display:flex;gap:14px;position:relative;padding-bottom:22px}
.why-step .dot{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand-600),var(--violet-600));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;z-index:1}
.why-step .line{position:absolute;left:14.5px;top:30px;bottom:0;width:2px;background:var(--slate-200)}
.why-step:last-child .line{display:none}
.why-step .txt{background:var(--slate-50);border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--slate-700);flex:1;margin-top:2px}
.why-step.root .dot{background:linear-gradient(135deg,var(--accent-500),#0d9488)}
.why-step.root .txt{background:var(--accent-500);color:#fff;font-weight:700}

.bcg-quad{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto 10px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:14px}
.bcg-quad::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--slate-300)}
.bcg-quad::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--slate-300)}
.bcg-quad .q-label{position:absolute;font-size:10.5px;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.03em}
.bcg-quad .ql-star{top:10px;right:14px}
.bcg-quad .ql-question{top:10px;left:14px}
.bcg-quad .ql-cow{bottom:10px;right:14px}
.bcg-quad .ql-dog{bottom:10px;left:14px}
.bcg-dot{position:absolute;transform:translate(-50%,50%);background:linear-gradient(135deg,var(--brand-600),var(--violet-600));color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.25);white-space:nowrap}
.bcg-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--slate-500);font-weight:600;max-width:460px;margin:0 auto}

.scatter-plot{position:relative;width:100%;height:300px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:14px;margin-bottom:8px}
.scatter-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--brand-600);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translate(-50%,50%)}
.scatter-dot:hover::after{content:attr(data-label);position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--slate-900);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;white-space:nowrap}

.risk-matrix{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;max-width:420px;margin:0 auto 10px}
.risk-cell{aspect-ratio:1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;position:relative;gap:2px}
.risk-cell span{font-size:9px;font-weight:600;opacity:.9}

.gantt-chart{display:flex;flex-direction:column;gap:9px}
.gantt-row{display:flex;align-items:center;gap:10px}
.gantt-row .lbl{width:150px;font-size:12.5px;color:var(--slate-700);font-weight:600;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-track{flex:1;position:relative;height:24px;background:var(--slate-100);border-radius:6px}
.gantt-bar{position:absolute;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand-500),var(--violet-600));display:flex;align-items:center;padding:0 8px;color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden}

.flow-chain{display:flex;flex-direction:column;align-items:center;gap:2px}
.flow-node{padding:10px 20px;font-size:13px;font-weight:600;text-align:center;min-width:180px;max-width:340px}
.flow-node.inicio,.flow-node.fim{border-radius:999px;background:var(--accent-500);color:#fff}
.flow-node.processo{border-radius:10px;background:#fff;border:1px solid var(--slate-200);color:var(--slate-800)}
.flow-node.decisao{background:var(--amber-50);border:1px solid var(--amber-500);border-radius:8px;color:#92400e}
.flow-arrow{color:var(--slate-300);font-size:16px;line-height:1}

.pareto-chart{display:flex;align-items:flex-end;gap:10px;height:220px;padding-top:16px;position:relative;border-bottom:1px solid var(--slate-200);margin-bottom:8px}
.pareto-chart .threshold{position:absolute;left:0;right:0;height:1px;background:var(--rose-500);border-top:1px dashed var(--rose-500)}
.pareto-bar-wrap{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end;gap:6px;min-width:0}
.pareto-bar-wrap .cum{font-size:10.5px;font-weight:700;color:var(--rose-500)}
.pareto-bar-wrap .bar{width:100%;max-width:46px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--violet-600),var(--brand-600))}
.pareto-bar-wrap .lbl{font-size:10.5px;color:var(--slate-600);font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70px}
.pareto-bar-wrap .val{font-size:10px;color:var(--slate-400)}

/* ===================== Ilustrações — frameworks sem gráfico numérico ===================== */
.fishbone{display:flex;flex-direction:column;gap:0;margin-bottom:6px}
.fishbone-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.fishbone-bone{flex:1;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:10px;padding:10px 12px;min-width:150px;max-width:220px}
.fishbone-bone .cat{font-weight:700;color:var(--brand-600);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.fishbone-bone ul{margin:0;padding-left:16px;color:var(--slate-600);font-size:12px}
.fishbone-bone .empty{color:var(--slate-400);font-size:11.5px;font-style:italic}
.fishbone-spine-row{display:flex;align-items:center;gap:0;margin:6px 0 14px}
.fishbone-line{flex:1;height:3px;background:var(--slate-300);position:relative;border-radius:2px}
.fishbone-line::after{content:"";position:absolute;right:-1px;top:-5px;border-left:12px solid var(--slate-300);border-top:6px solid transparent;border-bottom:6px solid transparent}
.fishbone-head{background:linear-gradient(135deg,var(--rose-500),#db2777);color:#fff;padding:10px 18px;border-radius:10px;font-weight:700;font-size:13px;white-space:nowrap;margin-left:12px;box-shadow:var(--shadow-sm)}

.tree-diagram{display:flex;flex-direction:column;align-items:center;gap:8px}
.tree-tier{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tree-node{background:#fff;border:1px solid var(--slate-200);border-radius:10px;padding:9px 14px;font-size:12.5px;max-width:220px}
.tree-node.effect{background:var(--amber-50);border-color:var(--amber-500);color:#92400e}
.tree-node.cause{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-700)}
.tree-trunk{background:linear-gradient(135deg,var(--slate-800),var(--slate-900));color:#fff;padding:11px 22px;border-radius:10px;font-weight:700;font-size:13.5px;margin:4px 0}
.tree-connector{width:2px;height:14px;background:var(--slate-300)}

.w2h-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.w2h-card{background:#fff;border:1px solid var(--slate-200);border-radius:12px;padding:14px}
.w2h-card .tag{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand-500),var(--violet-600));color:#fff;font-weight:700;font-size:12px;margin-bottom:8px}
.w2h-card .lbl{font-size:10.5px;color:var(--slate-500);font-weight:700;text-transform:uppercase;margin-bottom:4px}
.w2h-card .val{font-size:12.5px;color:var(--slate-700);white-space:pre-line}

.pdca-cycle{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:0 auto}
.pdca-quad{border-radius:14px;padding:16px;color:#fff}
.pdca-quad.plan{background:linear-gradient(135deg,#4338ca,#6366f1)}
.pdca-quad.do{background:linear-gradient(135deg,#059669,#0d9488)}
.pdca-quad.check{background:linear-gradient(135deg,#d97706,#ea580c)}
.pdca-quad.act{background:linear-gradient(135deg,#e11d48,#be123c)}
.pdca-quad .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.85;margin-bottom:6px;font-weight:700}
.pdca-quad .v{font-size:12.5px;line-height:1.5;white-space:pre-line}

.hprocess{display:flex;align-items:stretch;gap:20px;overflow-x:auto;padding-bottom:4px}
.hprocess-step{flex:1;min-width:150px;background:#fff;border:1px solid var(--slate-200);border-top:4px solid var(--brand-500);border-radius:10px;padding:14px;position:relative}
.hprocess-step::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--slate-300);font-size:18px}
.hprocess-step:last-child::after{display:none}
.hprocess-step .k{font-weight:700;font-size:12.5px;color:var(--brand-700);margin-bottom:6px}
.hprocess-step .v{font-size:12px;color:var(--slate-600);white-space:pre-line}

.five-s-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.five-s-panel{border-radius:12px;padding:14px;color:#fff}
.five-s-panel .lbl{font-size:10.5px;text-transform:uppercase;opacity:.9;margin-bottom:4px;font-weight:700}
.five-s-panel .count{font-size:24px;font-weight:800;font-family:var(--font-display)}
.five-s-panel ul{margin:8px 0 0;padding-left:16px;font-size:11px;opacity:.95}

.sipoc-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;overflow-x:auto}
.sipoc-col{background:var(--slate-50);border-radius:10px;padding:10px;border-top:3px solid var(--brand-500);min-width:110px}
.sipoc-col h4{font-size:10.5px;text-transform:uppercase;color:var(--brand-700);margin-bottom:8px}
.sipoc-col .item{background:#fff;border:1px solid var(--slate-200);border-radius:6px;padding:6px 8px;font-size:11px;margin-bottom:6px;word-break:break-word}

.cb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cb-card{border:1px solid var(--slate-200);border-radius:12px;padding:14px}
.cb-card h4{font-size:13px;margin-bottom:8px}
.cb-card .row{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--slate-100)}
.cb-card .row .k{color:var(--slate-500);flex-shrink:0}
.cb-card .row .v{color:var(--slate-700);text-align:right}

.mini-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini-kanban-col{background:var(--slate-50);border-radius:10px;padding:10px}
.mini-kanban-col h4{font-size:10.5px;text-transform:uppercase;color:var(--slate-500);margin-bottom:8px}
.mini-kanban-card{background:#fff;border:1px solid var(--slate-200);border-radius:8px;padding:8px 10px;font-size:12px;margin-bottom:8px;box-shadow:var(--shadow-sm)}

.bench-grid{display:flex;flex-direction:column;gap:12px}
.bench-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bench-col{border-radius:10px;padding:10px 12px;font-size:12px}
.bench-col.us{background:var(--brand-50);border:1px solid var(--brand-100)}
.bench-col.them{background:var(--rose-50);border:1px solid var(--rose-100)}
.bench-col .k{font-size:10px;text-transform:uppercase;font-weight:700;color:var(--slate-500);margin-bottom:4px}
.bench-criteria{font-size:11.5px;font-weight:700;color:var(--slate-700);margin-bottom:4px}

.dg-card{display:flex;flex-direction:column;gap:12px}
.dg-row{display:flex;gap:12px;align-items:flex-start}
.dg-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand-500),var(--violet-600));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.dg-row .k{font-size:10.5px;text-transform:uppercase;font-weight:700;color:var(--slate-500);margin-bottom:2px}
.dg-row .v{font-size:12.5px;color:var(--slate-700);white-space:pre-line}

/* ===================== Mapa geográfico de vendas ===================== */
.geo-map{position:relative;width:100%;aspect-ratio:16/13;background:linear-gradient(160deg,#eef2ff,#f8fafc);border:1px solid var(--slate-200);border-radius:16px;overflow:visible}
.geo-point{position:absolute;transform:translate(-50%,-50%);text-align:center}
.geo-dot{width:11px;height:11px;border-radius:50%;background:var(--regiao-cor,#4f46e5);border:2px solid #fff;box-shadow:0 0 0 2px var(--regiao-cor,#4f46e5),0 2px 6px rgba(0,0,0,.2);margin:0 auto}
.geo-label{font-size:9px;color:var(--slate-500);font-weight:600;white-space:nowrap;margin-top:2px;opacity:0;transition:opacity .15s}
.geo-point:hover .geo-label{opacity:1}
.geo-point:hover .geo-dot{transform:scale(1.4)}
.geo-badge{display:flex;gap:3px;justify-content:center;margin-top:2px;flex-wrap:nowrap}
.geo-badge .n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:999px;font-size:9px;font-weight:800;color:#fff;line-height:1}
.geo-badge .n.possiveis{background:#4f46e5}
.geo-badge .n.negociacao{background:#d97706}
.geo-badge .n.fechadas{background:#059669}

/* ===================== Visão Geral / Dashboard v4 ===================== */
.stat-card .stat-sub{color:var(--slate-500);font-size:12.5px;margin-top:4px;text-align:center}

.section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin:30px 0 14px}
.section-head h2{font-size:15px;color:var(--slate-800)}
.section-head-link{font-size:12.5px;font-weight:700;color:var(--brand-600)}
.section-head-link:hover{text-decoration:underline}

.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.module-card{display:block;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.module-card-icon{width:38px;height:38px;border-radius:11px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.module-card h3{font-size:15px;margin-bottom:6px;color:var(--slate-900)}
.module-card p{color:var(--slate-500);font-size:13px;line-height:1.5}

.trial-banner-urgent{background:linear-gradient(135deg,#e11d48,#be123c)}

.license-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
.license-badge-unlimited{background:var(--indigo-50);color:var(--brand-700)}
.license-badge-ok{background:var(--emerald-50);color:var(--emerald-500)}
.license-badge-warning{background:var(--amber-50);color:var(--amber-500)}
.license-badge-expired{background:var(--rose-50);color:var(--rose-500)}

/* ---- Termômetro de meta (mensal/semestral/anual) ---- */
.thermo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.thermo-row>*{min-width:0}
.thermo-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;display:flex;gap:16px;align-items:center}
.thermo-visual{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.thermo-tube{width:14px;height:90px;border-radius:999px;background:var(--slate-100);border:1px solid var(--slate-200);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative}
.thermo-fill{width:100%;border-radius:999px;transition:height 1s var(--ease);animation:thermoRise 1.1s var(--ease)}
@keyframes thermoRise{from{height:0 !important}}
.thermo-bulb{width:22px;height:22px;border-radius:50%;margin-top:-6px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:1}
.thermo-info{flex:1;min-width:0}
.thermo-label{font-size:12px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.thermo-pct{font-size:24px;font-weight:800;font-family:var(--font-display);line-height:1.1}
.thermo-values{font-size:12px;color:var(--slate-500);margin:4px 0 8px}

.kpi-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.kpi-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px}

/* ---- Metas & KPI (CRM) ---- */
.goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.goal-card{display:flex;flex-direction:column}
.goal-status-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.goal-bar-track{height:8px;border-radius:999px;background:var(--slate-100);overflow:hidden}
.goal-bar-fill{height:100%;border-radius:999px;transition:width 1s var(--ease)}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.prod-card{display:flex;flex-direction:column}
.prod-metric{padding:10px 0;border-top:1px solid var(--slate-100)}
.prod-metric:first-of-type{border-top:none}
.prod-metric-label{font-size:11.5px;font-weight:600;color:var(--slate-500);display:flex;align-items:center;gap:5px;margin-bottom:4px}
.prod-metric-value{font-size:16px;font-weight:700;font-family:var(--font-display);color:var(--slate-800)}

/* ---- Informações relacionadas (cross-módulo) ---- */
.related-item{display:block;font-size:12.5px;color:var(--slate-700);padding:6px 10px;background:var(--slate-50);border-radius:8px;margin-bottom:4px}
.related-item:hover{background:var(--brand-50);color:var(--brand-700)}

/* ---- Mapa de vendas geográfico (Leaflet + OpenStreetMap) ---- */
.geo-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.geo-stat-grid-compact{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.geo-stat-card{background:linear-gradient(160deg,var(--slate-900),#1e2b4d);color:#fff;border-radius:14px;padding:16px;position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center}
.geo-stat-icon{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.geo-stat-value{font-size:22px;font-weight:800;font-family:var(--font-display);line-height:1.1;text-align:center}
.geo-stat-label{font-size:11px;color:rgba(255,255,255,.7);margin-top:4px;text-align:center}
.geo-leaflet{width:100%;height:520px;border-radius:16px;overflow:hidden;border:1px solid var(--slate-200);z-index:0}
.geo-leaflet-compact{height:300px}

/* ---- Área de Atendimento (WhatsApp) — redesign visual v20 ----
   Psicologia das cores aplicada ao status da conversa: vermelho/rosa =
   urgência (em espera), índigo = ação/confiança (em atendimento), verde
   esmeralda = sucesso/resolução (fechada). Barra de estatísticas viva,
   avatares e tag "Prospect" na lista, e pequenas animações de entrada pra
   deixar a tela menos "seca". */
.wa-stat-bar{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.wa-stat-card{flex:1;min-width:160px;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius);background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.wa-stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.wa-stat-card.active{box-shadow:var(--shadow-md)}
.wa-stat-card.wa-stat-all.active{border-color:var(--slate-600)}
.wa-stat-card.wa-stat-waiting.active{border-color:var(--rose-500)}
.wa-stat-card.wa-stat-progress.active{border-color:var(--indigo-500)}
.wa-stat-card.wa-stat-closed.active{border-color:var(--emerald-500)}
.wa-stat-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.wa-stat-icon svg{width:18px;height:18px}
.wa-stat-info{min-width:0}
.wa-stat-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-500)}
.wa-stat-value{display:block;font-size:24px;font-weight:800;font-family:var(--font-display);line-height:1.2}
.wa-stat-value.bump{animation:wa-bump .5s var(--ease)}
@keyframes wa-bump{0%{transform:scale(1)}35%{transform:scale(1.35);color:var(--brand-600)}100%{transform:scale(1)}}
.wa-stat-card.wa-stat-all .wa-stat-icon{background:linear-gradient(135deg,var(--slate-600),var(--slate-800))}
.wa-stat-card.wa-stat-all .wa-stat-value{color:var(--slate-700)}
.wa-stat-card.wa-stat-waiting .wa-stat-icon{background:linear-gradient(135deg,var(--rose-500),#9f1239)}
.wa-stat-card.wa-stat-waiting .wa-stat-value{color:var(--rose-500)}
.wa-stat-card.wa-stat-progress .wa-stat-icon{background:linear-gradient(135deg,var(--indigo-500),var(--brand-700))}
.wa-stat-card.wa-stat-progress .wa-stat-value{color:var(--indigo-500)}
.wa-stat-card.wa-stat-closed .wa-stat-icon{background:linear-gradient(135deg,var(--emerald-500),#047857)}
.wa-stat-card.wa-stat-closed .wa-stat-value{color:var(--emerald-500)}
.wa-stat-pulse{position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 0 rgba(225,29,72,.5);animation:wa-ping 1.6s ease-out infinite}
@keyframes wa-ping{0%{box-shadow:0 0 0 0 rgba(225,29,72,.55)}70%{box-shadow:0 0 0 9px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}

.wa-conv-item{display:block;padding:12px 14px;border-bottom:1px solid var(--slate-100);text-decoration:none;color:inherit;position:relative;transition:background .2s var(--ease);animation:fadeInUp .35s var(--ease) backwards}
.wa-conv-item:hover{background:var(--slate-50)}
.wa-conv-item.active{background:var(--brand-50)}
.wa-conv-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-600)}
.wa-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}
.wa-prospect-chip{display:inline-flex}

.wa-msg-in{animation:fadeInUp .3s var(--ease) backwards}
.wa-agent-header{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand-500),var(--violet-600));padding:5px 12px;border-radius:999px;margin-bottom:8px;animation:popIn .3s var(--ease)}

/* Controles da conversa (status / atribuir / vincular cliente) — pills
   com ícone colorido no lugar do <select> cru do navegador. */
.wa-select-wrap{position:relative;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--slate-200);border-radius:999px;padding:6px 26px 6px 8px;box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.wa-select-wrap:hover{border-color:var(--slate-300);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.wa-select-wrap:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.wa-select-icon{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.wa-select-icon svg{width:9px;height:9px}
.wa-select-wrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;outline:none;font-size:12.5px;font-weight:600;color:var(--slate-700);cursor:pointer;padding:0;margin:0;max-width:180px;text-overflow:ellipsis}
.wa-select-chevron{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:10px;height:10px;color:var(--slate-400);pointer-events:none;transition:transform .15s var(--ease)}
.wa-select-wrap:focus-within .wa-select-chevron{color:var(--brand-500)}

/* Caixa de sessão/conexão do dashboard de atendimento (Conexão, Não lidas, Mídias, No ar) */
.wa-session-bar{margin-top:-4px}
.wa-stat-card.wa-stat-session{cursor:default}
.wa-stat-card.wa-stat-session:hover{transform:none;box-shadow:var(--shadow-sm)}
.wa-stat-card.wa-stat-session .wa-stat-value{font-size:18px;line-height:1.3}
.wa-stat-card.wa-stat-session .wa-stat-sub{display:block;font-size:11px;color:var(--slate-500);font-weight:600;margin-top:1px}

/* =====================================================================
   Chat-bot — editor visual de fluxo (caixinhas + conectores)
   ===================================================================== */
.chatbot-warning-banner{display:flex;align-items:flex-start;gap:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:13px}
.chatbot-warning-banner svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}
.chatbot-warning-banner ul{margin:4px 0 0;padding-left:18px}

.chatbot-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.chatbot-toolbar-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chatbot-back-link{display:inline-flex;align-items:center;gap:5px;color:var(--slate-500);font-size:12.5px;font-weight:600;text-decoration:none}
.chatbot-back-link:hover{color:var(--brand-700)}
.chatbot-name-input{border:1px solid transparent;background:transparent;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--slate-800);padding:4px 8px;border-radius:8px;min-width:160px}
.chatbot-name-input:hover{border-color:var(--slate-200)}
.chatbot-name-input:focus{outline:none;border-color:var(--brand-500);background:#fff;box-shadow:0 0 0 3px var(--brand-100)}
.chatbot-status-chip{display:inline-flex;align-items:center;gap:5px}
.chatbot-status-chip.is-active{background:var(--emerald-50);color:var(--emerald-500)}
.chatbot-status-chip.is-inactive{background:var(--slate-100);color:var(--slate-500)}
.chatbot-status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.chatbot-palette{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;margin-bottom:14px}
.chatbot-palette-label{font-size:12px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em;margin-right:4px}
.chatbot-palette button{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.chatbot-palette button svg{width:14px;height:14px}

#chatbot-canvas-wrap{position:relative;overflow:auto;border:1px solid var(--slate-200);border-radius:var(--radius);background:var(--slate-50);box-shadow:var(--shadow-sm) inset}
#chatbot-canvas{position:relative;background-image:radial-gradient(circle,var(--slate-300) 1px,transparent 1px);background-size:22px 22px;background-color:#fbfcff}
#chatbot-edges-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}

.chatbot-edge-path{fill:none;stroke:var(--brand-500);stroke-width:2.5px;transition:stroke .15s var(--ease)}
.chatbot-edge-path-temp{fill:none;stroke:var(--slate-400);stroke-width:2px;stroke-dasharray:6 5}
.chatbot-edge-del{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid var(--rose-500);color:var(--rose-500);font-size:13px;font-weight:700;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;box-shadow:var(--shadow-sm);transition:background .15s var(--ease),color .15s var(--ease)}
.chatbot-edge-del:hover{background:var(--rose-500);color:#fff}

.chatbot-node{position:absolute;width:230px;background:#fff;border:1px solid var(--slate-200);border-radius:14px;box-shadow:var(--shadow-md);z-index:2;user-select:none}
.chatbot-node-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--slate-100);border-radius:14px 14px 0 0;cursor:grab;color:#fff}
.chatbot-node-header:active{cursor:grabbing}
.chatbot-node-header svg{width:15px;height:15px;flex-shrink:0}
.chatbot-node-type{flex:1;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatbot-node-del{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:none;background:rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;line-height:1;transition:background .15s var(--ease)}
.chatbot-node-del:hover{background:rgba(255,255,255,.45)}
.chatbot-node-body{padding:12px;cursor:pointer;min-height:20px}
.chatbot-node-preview{font-size:12px;color:var(--slate-600);line-height:1.5;word-break:break-word;white-space:pre-line}
.chatbot-node-preview .chatbot-node-empty{color:var(--slate-400);font-style:italic}
.chatbot-node-flag{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--brand-700);background:var(--brand-50);padding:2px 7px;border-radius:999px}

.chatbot-node-inicio .chatbot-node-header{background:linear-gradient(135deg,var(--slate-600),var(--slate-800))}
.chatbot-node-mensagem .chatbot-node-header{background:linear-gradient(135deg,var(--brand-500),var(--brand-700))}
.chatbot-node-menu .chatbot-node-header{background:linear-gradient(135deg,var(--indigo-500),var(--violet-600))}
.chatbot-node-encaminhar .chatbot-node-header{background:linear-gradient(135deg,#d97706,#b45309)}
.chatbot-node-encerrar .chatbot-node-header{background:linear-gradient(135deg,var(--rose-500),#9f1239)}

.chatbot-port{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid var(--slate-400);z-index:3;cursor:crosshair;transition:transform .15s var(--ease),border-color .15s var(--ease)}
.chatbot-port:hover{transform:scale(1.25);border-color:var(--brand-500)}
.chatbot-port-in{left:-8px;top:22px;border-color:var(--slate-500)}
.chatbot-port-out{right:-8px;top:22px;border-color:var(--brand-500)}
.chatbot-port-inline{position:static;display:inline-flex;flex-shrink:0;width:11px;height:11px;margin-left:6px;vertical-align:middle;transform:none}
.chatbot-port-inline:hover{transform:scale(1.25)}

.chatbot-menu-options{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.chatbot-menu-option-row{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--slate-50);border:1px solid var(--slate-100);border-radius:8px;padding:5px 8px;font-size:11.5px;color:var(--slate-700)}
.chatbot-menu-option-row span.opt-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chatbot-option-editor-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.chatbot-option-label{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.chatbot-option-editor-row input{flex:1}
.chatbot-option-remove{flex-shrink:0;width:26px;height:26px;border-radius:8px;border:1px solid var(--rose-100);background:var(--rose-50);color:var(--rose-500);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1}
.chatbot-option-remove:hover{background:var(--rose-100)}

#node-config-body .field{margin-bottom:14px}
#node-config-body .field:last-child{margin-bottom:0}
#node-config-body .field-hint{font-size:11.5px;color:var(--slate-500);margin-top:4px}

/* ===================== Ponto — calendário mensal (v27) ===================== */
.ponto-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ponto-calendar-head{margin-bottom:8px;font-size:11px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em}
.ponto-calendar-head div{text-align:center;padding:4px 0}
.ponto-calendar-cell{min-height:72px;border:1px solid var(--slate-200);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px;cursor:pointer;transition:.15s var(--ease);font-family:inherit}
.ponto-calendar-cell:hover{border-color:var(--brand-400);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.ponto-calendar-cell.is-today{border-color:var(--brand-500);background:var(--brand-50)}
.ponto-calendar-cell-empty{background:transparent;border:none;cursor:default;min-height:72px}
.ponto-day-num{font-size:12.5px;font-weight:700;color:var(--slate-700)}
.ponto-day-badge{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:999px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.ponto-badge-falta{background:var(--rose-50);color:#9f1239}
.ponto-badge-banco{background:var(--emerald-50);color:#065f46}
@media (max-width:640px){
  .ponto-calendar-cell,.ponto-calendar-cell-empty{min-height:52px;padding:4px;border-radius:8px}
  .ponto-day-num{font-size:11px}
  .ponto-day-badge{font-size:8px;padding:1px 4px}
  .ponto-calendar-head{font-size:9px}
}
#node-config-error{color:var(--rose-500);font-size:12.5px;margin-top:8px}

/* ===================== Pontos de Contato — Ampulheta de MKT & Vendas (v28) ===================== */
.tp-hero{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:32px 30px;margin-bottom:24px;background:linear-gradient(120deg,#1e1b4b,#312e81 45%,#4338ca 75%,#4f46e5);background-size:220% 220%;animation:tpGradientMove 14s ease-in-out infinite;color:#fff;box-shadow:var(--shadow-lg)}
@keyframes tpGradientMove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tp-hero::before,.tp-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);animation:floatSlow 9s ease-in-out infinite}
.tp-hero::before{width:220px;height:220px;top:-90px;right:-60px}
.tp-hero::after{width:140px;height:140px;bottom:-60px;left:10%;animation-delay:-3s}
.tp-hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:6px 13px;border-radius:999px;position:relative;z-index:1}
.tp-hero h1{position:relative;z-index:1;font-family:var(--font-display);font-size:26px;margin:14px 0 8px;line-height:1.2}
.tp-hero p{position:relative;z-index:1;font-size:13.5px;color:rgba(255,255,255,.82);max-width:640px;line-height:1.55}

.tp-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px}
.tp-kpi-grid>*{min-width:0}
.tp-kpi-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;transition:.25s var(--ease)}
.tp-kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tp-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tp-kpi-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.tp-kpi-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-500)}
.tp-kpi-value{font-size:25px;font-weight:800;font-family:var(--font-display);color:var(--slate-900);line-height:1.1}
.tp-kpi-delta{font-size:11.5px;font-weight:700;margin-top:5px;display:inline-flex;align-items:center;gap:3px}
.tp-kpi-delta.up{color:#059669}
.tp-kpi-delta.down{color:#e11d48}
.tp-kpi-delta.flat{color:var(--slate-400)}

.tp-journey-pill{display:block;text-align:center;background:var(--slate-900);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:9px;border-radius:999px;max-width:420px;margin:0 auto 10px}
.tp-subtitle-pill{display:block;text-align:center;background:var(--brand-50);color:var(--brand-700);font-size:12px;font-weight:600;padding:7px;border-radius:999px;max-width:520px;margin:0 auto 26px}

.tp-diagram{position:relative;margin-bottom:30px}
.tp-row{display:grid;grid-template-columns:250px minmax(0,1fr) 190px;align-items:center;gap:18px;padding:6px 0}
.tp-row-retention{grid-template-columns:210px minmax(0,220px) minmax(0,1fr) minmax(0,220px) 150px}
.tp-col-left,.tp-col-right,.tp-col-info{min-width:0}
.tp-col-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.tp-tag{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:999px;line-height:1.4}
.tp-tag-purple{background:var(--indigo-50);color:var(--brand-700)}
.tp-tag-orange{background:#fffbeb;color:#b45309;margin-top:4px}
.tp-tag-green{background:var(--emerald-50);color:#065f46}
.tp-tag-yellow{background:#fffbeb;color:#92400e}
.tp-tag-rose{background:var(--rose-50);color:#9f1239}
.tp-desc{font-size:12px;color:var(--slate-500);margin-top:8px;line-height:1.5}
.tp-driver{font-size:11.5px;color:var(--slate-600);margin-top:8px;display:flex;align-items:center;gap:6px}
.tp-tip{grid-column:1/-1;text-align:center;font-size:12px;color:var(--slate-500);padding:6px 12px 14px;font-style:italic}
.tp-tip strong{color:var(--slate-700);font-style:normal}

.tp-band{border:none;cursor:pointer;height:96px;width:100%;display:block;color:#fff;font-family:inherit;text-align:center;padding:0;background:transparent;transition:filter .2s var(--ease),transform .2s var(--ease);position:relative}
.tp-row-retention .tp-band{height:118px}
.tp-band:hover{filter:brightness(1.08);transform:scale(1.015)}
.tp-band:focus-visible{outline:3px solid var(--slate-900);outline-offset:2px}
/* A cor/forma do trapézio fica numa camada separada (clipada); o texto fica
   numa camada por cima, SEM clip-path, pra não ser cortado nas faixas mais
   estreitas (gargalo da ampulheta) — clip-path corta filhos junto com o pai. */
.tp-band-shape{position:absolute;inset:0;z-index:0}
.tp-band-label{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 14px;pointer-events:none}
.tp-band-pct{font-size:12.5px;font-weight:700;max-width:100%;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.tp-band-title{font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.tp-band-edit-hint{position:absolute;bottom:6px;left:0;right:0;font-size:9px;opacity:.8;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.35)}

.tp-shape-tofu{clip-path:polygon(0% 0%,100% 0%,91% 100%,9% 100%);background:linear-gradient(180deg,#60a5fa,#3b82f6)}
.tp-shape-mofu_a{clip-path:polygon(9% 0%,91% 0%,82% 100%,18% 100%);background:linear-gradient(180deg,#3b82f6,#2563eb)}
.tp-shape-mofu_b{clip-path:polygon(18% 0%,82% 0%,73% 100%,27% 100%);background:linear-gradient(180deg,#2563eb,#1d4ed8)}
.tp-shape-bofu_a{clip-path:polygon(27% 0%,73% 0%,63% 100%,37% 100%);background:linear-gradient(180deg,#f59e0b,#d97706)}
.tp-shape-bofu_b{clip-path:polygon(37% 0%,63% 0%,54% 100%,46% 100%);background:linear-gradient(180deg,#10b981,#059669)}
.tp-shape-onboarding{clip-path:polygon(46% 0%,54% 0%,63% 100%,37% 100%);background:linear-gradient(180deg,#fb7185,#e11d48)}
.tp-shape-adocao{clip-path:polygon(37% 0%,63% 0%,75% 100%,25% 100%);background:linear-gradient(180deg,#34d399,#059669)}
.tp-shape-expansao{clip-path:polygon(25% 0%,75% 0%,91% 100%,9% 100%);background:linear-gradient(180deg,#818cf8,#4f46e5)}

.tp-neck-glow{width:70px;height:14px;margin:-7px auto;border-radius:50%;background:radial-gradient(circle,rgba(217,119,6,.55),rgba(217,119,6,0) 70%);animation:pulseSoft 2.4s ease-in-out infinite;position:relative;z-index:2}

.tp-info-block{margin-bottom:10px}
.tp-info-block:last-child{margin-bottom:0}
.tp-info-label{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--brand-600);margin-bottom:3px}
.tp-info-label svg{flex-shrink:0}
.tp-info-block p{font-size:11.5px;color:var(--slate-600);line-height:1.4;margin:0}

.tp-vert-badge{writing-mode:vertical-rl;transform:rotate(180deg);background:var(--brand-50);color:var(--brand-700);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:10px 5px;border-radius:8px;margin-left:auto;white-space:nowrap}

@media (max-width:900px){
  .tp-row{grid-template-columns:1fr;gap:6px;text-align:center}
  .tp-row-retention{grid-template-columns:1fr;gap:6px;text-align:center}
  .tp-row .tp-col-left{order:1}
  .tp-row .tp-band{order:2;margin:10px 0}
  .tp-row .tp-col-right{order:3;align-items:center;flex-direction:row;justify-content:center;flex-wrap:wrap}
  .tp-row-retention .tp-col-left{order:1}
  .tp-row-retention .tp-col-info:nth-of-type(2){order:2}
  .tp-row-retention .tp-band{order:3;margin:10px 0}
  .tp-row-retention .tp-col-info:nth-of-type(4){order:4}
  .tp-row-retention .tp-col-right{order:5;align-items:center}
  .tp-vert-badge{writing-mode:horizontal-tb;transform:none;margin:0 auto}
  .tp-desc,.tp-driver{text-align:center}
  .tp-info-block{text-align:center}
  .tp-info-label{justify-content:center}
}

.tp-snapshot-form .field{min-width:130px}

/* ===== v29 — Expressão da Marca (Canvas de Branding) ===== */
.bc-hero{border-radius:22px;padding:32px;background:linear-gradient(150deg,var(--brand-700),var(--violet-600) 55%,#db2777);color:#fff;margin-bottom:24px;position:relative;overflow:hidden}
.bc-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.18),transparent 60%)}
.bc-hero h1{font-size:24px;margin-bottom:8px;position:relative}
.bc-hero p{opacity:.92;font-size:13.5px;max-width:640px;position:relative}
.bc-hero-stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap;position:relative}
.bc-hero-stat{font-family:var(--font-display)}
.bc-hero-stat .n{font-size:26px;font-weight:800;line-height:1}
.bc-hero-stat .l{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.05em}

.bc-section-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.bc-section-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--slate-200);color:var(--slate-600)}
.bc-section-pill .cnt{background:var(--slate-100);color:var(--slate-500);border-radius:999px;padding:1px 7px;font-size:11px}
.bc-section-pill.active,.bc-section-pill:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50)}

.bc-canvas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:30px}
.bc-canvas-card{padding:20px;transition:.2s var(--ease);display:flex;flex-direction:column}
.bc-canvas-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.bc-canvas-card .ver{font-size:11px;font-weight:700;color:var(--brand-600);letter-spacing:.04em;margin-bottom:6px}
.bc-canvas-card h3{font-size:14.5px;margin-bottom:4px}
.bc-canvas-card p{color:var(--slate-500);font-size:12px;margin-bottom:14px;flex:1}
.bc-progress-bar{height:7px;border-radius:999px;background:var(--slate-100);overflow:hidden;margin-bottom:8px}
.bc-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-500),var(--violet-500))}
.bc-progress-fill.full{background:linear-gradient(90deg,var(--emerald-500),#10b981)}
.bc-canvas-card .meta-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--slate-400);margin-bottom:12px}

.bc-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--slate-500);margin-bottom:16px}
.bc-breadcrumb a{color:var(--brand-600);font-weight:600}
.bc-canvas-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.bc-canvas-header .ver{font-size:11.5px;font-weight:700;color:var(--brand-600);letter-spacing:.04em;display:block;margin-bottom:6px}

.bc-field-block{padding:18px 0;border-bottom:1px solid var(--slate-100)}
.bc-field-block:last-child{border-bottom:none}
.bc-field-block>label{display:block;font-size:13.5px;font-weight:700;color:var(--slate-800);margin-bottom:5px}
.bc-field-hint{color:var(--slate-500);font-size:12px;margin-bottom:10px}
.bc-field-block textarea,.bc-field-block input[type=text]{width:100%;padding:11px 14px;border:1px solid var(--slate-200);border-radius:10px;outline:none;background:#fff;transition:.15s;font-family:inherit}
.bc-field-block textarea:focus,.bc-field-block input[type=text]:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}

.bc-checklist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.bc-check-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--slate-200);font-size:12.5px;cursor:pointer;transition:.15s}
.bc-check-pill:hover{border-color:var(--brand-300,var(--brand-400))}
.bc-check-pill input{margin:0;flex-shrink:0}
.bc-check-pill.checked{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-700);font-weight:600}
.bc-checklist-readonly{display:flex;flex-wrap:wrap;gap:6px}
.bc-check-tag{background:var(--brand-50);color:var(--brand-700);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600}

.bc-colorset-grid{display:flex;flex-direction:column;gap:10px}
.bc-colorset-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bc-colorset-row input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--slate-200);border-radius:8px;cursor:pointer;background:#fff}
.bc-colorset-row input[type=text]{flex:1;min-width:140px;padding:9px 12px;border:1px solid var(--slate-200);border-radius:10px}
.bc-colorset-readonly{display:flex;flex-wrap:wrap;gap:10px}
.bc-swatch-readonly{display:flex;align-items:center;gap:8px;background:var(--slate-50,#f8fafc);border:1px solid var(--slate-200);border-radius:10px;padding:6px 12px;font-size:12.5px}
.bc-swatch-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.08);flex-shrink:0}
.bc-swatch-hex{color:var(--slate-400);font-size:11px}

.bc-empty-val{color:var(--slate-400);font-size:12.5px;font-style:italic}
.bc-readonly-text{font-size:13.5px;color:var(--slate-700);line-height:1.6;white-space:pre-line}

.bc-nav-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.bc-nav-footer a{font-size:12.5px;font-weight:600}

.bc-share-box{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bc-share-box input{flex:1;min-width:220px;padding:10px 14px;border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50,#f8fafc);font-size:12.5px;color:var(--slate-600)}

.bc-moodboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.bc-moodboard-item{border:1px solid var(--slate-200);border-radius:12px;overflow:hidden;background:#fff}
.bc-moodboard-item img{width:100%;height:110px;object-fit:cover;display:block}
.bc-moodboard-item .lbl{padding:8px 10px;font-size:11.5px;color:var(--slate-600);display:flex;justify-content:space-between;align-items:center;gap:6px}

@media print{
  .bc-hero{background:linear-gradient(150deg,var(--brand-700),var(--violet-600) 55%,#db2777) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== v29.1 — hero com ilustração (Pontos de Contato + Expressão da Marca) ===== */
.dh-hero-row{display:flex;align-items:center;gap:28px;position:relative;z-index:1}
.dh-hero-text{flex:1;min-width:0}
.dh-hero-illus{flex-shrink:0;width:280px;height:200px;position:relative;display:none}
@media (min-width:1080px){.dh-hero-illus{display:block}}
.dh-glass-card{position:absolute;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);border-radius:16px;box-shadow:0 12px 30px -8px rgba(0,0,0,.35);padding:14px 16px}
.dh-float-chip{position:absolute;background:rgba(255,255,255,.95);color:var(--slate-800);border-radius:12px;padding:8px 13px;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:7px;box-shadow:0 10px 24px -6px rgba(0,0,0,.35);animation:floatSlow 6s ease-in-out infinite}
.dh-float-chip svg{width:15px;height:15px;flex-shrink:0}

/* Ilustração — funil/ampulheta (Pontos de Contato) */
.dh-funnel-card{top:6px;left:24px;width:190px;height:150px}
.dh-funnel-bars{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:6px}
.dh-funnel-bar{height:13px;border-radius:4px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.6))}
.dh-funnel-label{font-size:9.5px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:2px}
.dh-funnel-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;left:50%;animation:dhFlow 3s linear infinite}
@keyframes dhFlow{0%{top:14%;opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1}85%{opacity:1}100%{top:96%;opacity:0;transform:translateX(-50%) scale(1.1)}}
.dh-chip-target{top:-14px;right:-6px}
.dh-chip-trend{bottom:-10px;left:6px;animation-delay:2s}

/* Ilustração — paleta/identidade (Expressão da Marca) */
.dh-brand-card{top:10px;left:20px;width:210px;height:150px}
.dh-brand-swatches{display:flex;gap:8px;margin-top:10px}
.dh-brand-swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.5);box-shadow:0 4px 10px -2px rgba(0,0,0,.3)}
.dh-brand-type{margin-top:14px;font-family:var(--font-display);font-size:26px;font-weight:800;color:#fff}
.dh-brand-underline{width:70%;height:3px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.2));margin-top:6px}
.dh-chip-canvas{top:-14px;right:-10px}
.dh-chip-link{bottom:-10px;left:0;animation-delay:1.6s}

/* ===== v29.1 — "prancheta" ilustrada dos canvas de Expressão da Marca ===== */
.bc-sheet-tabs{display:flex;gap:0;align-items:center;margin-bottom:14px}
.bc-sheet-tab-outline{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--slate-800);color:var(--slate-800);font-size:12px;font-weight:700;padding:7px 16px;border-radius:999px 0 0 999px;border-right:none}
.bc-sheet-tab-filled{display:inline-flex;align-items:center;background:var(--slate-900);color:#fff;font-size:12px;font-weight:700;padding:7px 18px;border-radius:0 999px 999px 0;text-transform:uppercase;letter-spacing:.02em}
.bc-sheet{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm)}

.bc-box{border:1.5px solid var(--slate-200);border-radius:14px;padding:16px 18px;background:#fff;height:100%}
.bc-box-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.bc-box-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:11.5px}
.bc-box-badge-pill{background:var(--slate-900);color:#fff;border-radius:999px;min-width:30px;height:22px;padding:0 8px}
.bc-box-title{font-weight:700;font-size:13.5px;color:var(--slate-800)}
.bc-box-hint{color:var(--slate-500);font-size:12px;margin-bottom:10px;line-height:1.5}
.bc-box-body textarea,.bc-box-body input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--slate-200);border-radius:10px;outline:none;background:var(--slate-50,#f8fafc);font-family:inherit;transition:.15s}
.bc-box-body textarea:focus,.bc-box-body input[type=text]:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100);background:#fff}

.bc-box-grid{display:grid;grid-template-columns:repeat(var(--bc-cols,3),1fr);gap:16px}
.bc-box-grid-outer{display:flex;flex-direction:column;gap:16px}
.bc-box-grid-outer.bc-box-grid-has-side{display:grid;grid-template-columns:2fr 1fr;align-items:stretch}
.bc-box-side{border:1.5px solid var(--slate-200);border-radius:14px;padding:16px 18px;background:var(--slate-50,#f8fafc)}
.bc-box-side-grouped .bc-box-subsection{margin-top:14px;padding-top:14px;border-top:1px dashed var(--slate-200)}
.bc-box-side-grouped .bc-box-subsection:first-of-type{margin-top:10px;padding-top:0;border-top:none}
.bc-box-subtitle{font-weight:700;font-size:12.5px;color:var(--slate-700);margin-bottom:4px}

.bc-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bc-group-head{display:flex;align-items:center;gap:10px;background:var(--slate-100);border-radius:10px;padding:8px 14px;margin-bottom:14px}
.bc-group-num{background:var(--slate-900);color:#fff;font-family:var(--font-display);font-weight:800;font-size:11px;border-radius:999px;width:26px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.bc-group-title{font-weight:700;font-size:12.5px;color:var(--slate-700);text-transform:uppercase;letter-spacing:.02em}
.bc-group-body{display:flex;flex-direction:column;gap:14px}
.bc-letter-row{display:flex;gap:14px;border:1.5px solid var(--slate-200);border-radius:14px;padding:16px}
.bc-letter-badge{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--slate-100);color:var(--slate-400);font-family:var(--font-display);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.bc-letter-content{flex:1;min-width:0}

.bc-spotlight{display:flex;flex-direction:column;gap:20px;align-items:center}
.bc-spotlight-center{width:100%;max-width:640px;text-align:center;background:linear-gradient(150deg,var(--brand-600),var(--violet-600));color:#fff;border-radius:20px;padding:26px 30px;position:relative;overflow:hidden}
.bc-spotlight-center::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 55%)}
.bc-spotlight-kicker{position:relative;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin-bottom:6px}
.bc-spotlight-badge{position:relative;display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 12px;font-size:10.5px;font-weight:700;margin-bottom:10px}
.bc-spotlight-center h3{position:relative;font-size:18px;margin-bottom:6px}
.bc-spotlight-hint{position:relative;font-size:12.5px;opacity:.85;max-width:460px;margin:0 auto 14px}
.bc-spotlight-answer{position:relative;text-align:left}
.bc-spotlight-answer textarea{width:100%;padding:12px 14px;border:none;border-radius:12px;background:rgba(255,255,255,.94);font-family:inherit;min-height:70px}
.bc-spotlight-answer .bc-readonly-text{color:#fff;background:rgba(255,255,255,.12);border-radius:12px;padding:12px 14px}
.bc-spotlight-answer .bc-empty-val{color:rgba(255,255,255,.7)}
.bc-spotlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;width:100%}

.bc-persona{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.bc-persona-card{border:1.5px solid var(--slate-200);border-radius:16px;overflow:hidden;background:#fff}
.bc-persona-avatar{background:var(--slate-100);color:var(--slate-400);display:flex;align-items:center;justify-content:center;padding:30px 0}
.bc-persona-field{padding:10px 16px;border-top:1px solid var(--slate-100)}
.bc-persona-field label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-500);margin-bottom:4px}
.bc-persona-field input[type=text]{width:100%;border:none;padding:2px 0;font-size:13.5px;font-weight:600;color:var(--slate-800);background:transparent}
.bc-persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

.bc-checkx{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bc-checkx-col{border-radius:16px;padding:20px;position:relative;overflow:hidden}
.bc-checkx-yes{background:var(--emerald-50);border:1.5px solid #a7f3d0}
.bc-checkx-no{background:var(--rose-50);border:1.5px solid #fecdd3}
.bc-checkx-icon{opacity:.18;position:absolute;top:14px;right:14px}
.bc-checkx-yes .bc-checkx-icon{color:var(--emerald-500)}
.bc-checkx-no .bc-checkx-icon{color:var(--rose-500)}
.bc-checkx-col h3{position:relative;font-size:13px;margin-bottom:14px;color:var(--slate-800)}
.bc-checkx-block{position:relative;margin-bottom:16px}
.bc-checkx-block:last-child{margin-bottom:0}

/* Círculo de arquétipos */
.bc-wheel-section{margin-bottom:8px}
.bc-wheel-wrap{position:relative;width:340px;height:340px;margin:30px auto 60px;display:none}
@media (min-width:760px){.bc-wheel-wrap{display:block}}
.bc-wheel{width:100%;height:100%;border-radius:50%;position:relative;box-shadow:0 10px 30px -10px rgba(0,0,0,.25)}
.bc-wheel-center{position:absolute;inset:19%;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px var(--slate-200);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:4px}
.bc-wheel-center-label{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--slate-800);letter-spacing:.02em}
.bc-wheel-center-hint{font-size:10px;color:var(--slate-400);max-width:110px}
.bc-wheel-center-tag{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px}
.bc-wheel-center-tag-1{background:var(--slate-900);color:#fff}
.bc-wheel-center-tag-2{background:var(--slate-100);color:var(--slate-600)}
.bc-wheel-label{position:absolute;top:50%;left:50%;transform:rotate(var(--angle)) translate(196px) rotate(calc(-1 * var(--angle)));display:flex;align-items:center;gap:5px;background:#fff;border:1.5px solid var(--slate-200);border-radius:999px;padding:5px 10px 5px 6px;font-size:10.5px;font-weight:700;color:var(--slate-700);white-space:nowrap;box-shadow:var(--shadow-sm);transition:.2s}
.bc-wheel-label-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bc-wheel-label-count{background:var(--bc-arq-color);color:#fff;border-radius:999px;min-width:16px;height:16px;font-size:9.5px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.bc-wheel-label-match{border-color:var(--bc-arq-color);box-shadow:0 0 0 3px color-mix(in srgb, var(--bc-arq-color) 25%, transparent),var(--shadow-md);transform:rotate(var(--angle)) translate(196px) rotate(calc(-1 * var(--angle))) scale(1.12);z-index:2;color:var(--bc-arq-color)}
.bc-wheel-fallback{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:16px 0}
@media (min-width:760px){.bc-wheel-fallback{display:none}}
.bc-wheel-fallback-item{display:flex;align-items:center;gap:7px;border:1px solid var(--slate-200);border-radius:10px;padding:8px 10px;font-size:12px;font-weight:600;color:var(--slate-700)}

.bc-archetype-checklists{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.bc-archetype-box{border-top:4px solid var(--bc-arq-color)}
.bc-archetype-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.bc-archetype-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:16px}
.bc-archetype-legend-item{border:1.5px solid var(--slate-200);border-top:4px solid var(--bc-arq-color);border-radius:12px;padding:12px 14px;font-size:13px}
.bc-archetype-legend-item.bc-archetype-empty{opacity:.55}

@media (max-width:820px){
  .bc-box-grid-outer.bc-box-grid-has-side{grid-template-columns:1fr}
  .bc-group-grid{grid-template-columns:1fr}
  .bc-persona{grid-template-columns:1fr}
  .bc-checkx{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bc-box-grid{grid-template-columns:1fr !important}
  .bc-sheet{padding:18px}
  .bc-archetype-checklists,.bc-archetype-legend{grid-template-columns:1fr}
}

@media print{
  .bc-sheet{border:none;box-shadow:none;padding:0}
  .bc-wheel-wrap{display:block !important;margin:16px auto 50px}
  .bc-wheel-fallback{display:none !important}
  .bc-box,.bc-box-side,.bc-letter-row,.bc-checkx-col{break-inside:avoid}
}

/* ---------------------------------------------------------------------
   Personalidade da Marca — Brand Platform Canvas (v30): layouts novos que
   o motor de ilustração de Expressão da Marca (.bc-*) não cobria — eixos
   2x2, matriz de cabeçalhos editáveis, funil espelhado, fluxo "mad libs",
   roda aberta de arquétipos/atributos e satélites em torno de um hub.
   Reaproveita .bc-box / .bc-box-grid / .bc-box-side já existentes.
--------------------------------------------------------------------- */
.bp-hero-badge-alt{background:rgba(255,255,255,.18)}

.bp-section-question{color:var(--slate-500);font-size:12.5px;font-style:italic;margin-bottom:14px}

.bp-axis4-wrap{position:relative;padding:34px 46px}
.bp-axis4-label{position:absolute;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-400)}
.bp-axis4-top{top:0;left:50%;transform:translateX(-50%)}
.bp-axis4-bottom{bottom:0;left:50%;transform:translateX(-50%)}
.bp-axis4-left{left:-4px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.bp-axis4-right{right:-4px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center}
.bp-axis4-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bp-quad-box{height:100%}

.bp-combo-wrap{padding:6px}
.bp-combo-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"nw n ne" "w c e" "sw s se";gap:14px}
.bp-combo-cell{display:flex;min-width:0}
.bp-combo-cell>div{width:100%}
.bp-combo-n{grid-area:n}.bp-combo-nw{grid-area:nw}.bp-combo-ne{grid-area:ne}
.bp-combo-w{grid-area:w}.bp-combo-c{grid-area:c}.bp-combo-e{grid-area:e}
.bp-combo-sw{grid-area:sw}.bp-combo-s{grid-area:s}.bp-combo-se{grid-area:se}
.bp-combo-box{background:var(--slate-50,#f8fafc)}
.bp-combo-hub{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(150deg,var(--brand-600),var(--violet-600));color:#fff;border-radius:50%;aspect-ratio:1;font-weight:800;font-size:12px;padding:10px;box-shadow:0 8px 20px -8px rgba(79,70,229,.5)}

.bp-cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:2px}
.bp-col{display:flex;flex-direction:column;gap:14px}

.bp-split-row{margin-bottom:18px}
.bp-split-row:last-child{margin-bottom:0}
.bp-split-row-title{font-weight:700;font-size:12px;color:var(--slate-600);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.bp-split-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bp-split-mini-col{border-radius:14px;padding:12px}
.bp-split-good{background:var(--emerald-50)}
.bp-split-bad{background:var(--rose-50)}
.bp-split-mini-col .bc-box{background:#fff}

.bp-madlibs-center{background:linear-gradient(150deg,var(--brand-600),var(--violet-600));color:#fff;border-radius:18px;padding:22px 26px;text-align:center;margin:18px 0}
.bp-madlibs-center h3{font-size:15px;margin-bottom:14px;color:#fff}
.bp-madlibs-badge{display:inline-block;background:rgba(255,255,255,.18);border-radius:999px;padding:2px 12px;font-size:10.5px;font-weight:800;margin-bottom:8px}
.bp-madlibs-sentence{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:0 auto;text-align:left}
.bp-madlibs-sentence textarea,.bp-madlibs-sentence input[type=text]{background:rgba(255,255,255,.95);border:none;border-radius:10px;padding:10px 12px;font-family:inherit}
.bp-madlibs-sentence .bc-readonly-text{color:#fff;background:rgba(255,255,255,.14);border-radius:10px;padding:10px 12px}
.bp-madlibs-sentence-caption{font-size:10px;font-weight:800;letter-spacing:.05em;opacity:.85}

.bp-hub-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.bp-branch-col{display:flex;flex-direction:column;gap:10px}
.bp-branch-head{background:var(--slate-50,#f8fafc)}
.bp-branch-line{width:2px;height:14px;background:var(--slate-200);margin:0 auto}

.bp-mirror-wrap{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.bp-mirror-side{display:flex;flex-direction:column;gap:12px;flex:1;min-width:170px}
.bp-mirror-arrow{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--brand-400);flex:0 0 auto;padding:0 2px}
.bp-mirror-funnel{flex:1.5;min-width:230px;display:flex;flex-direction:column;gap:10px}
.bp-funnel-head{background:linear-gradient(150deg,var(--brand-50),#fff)}
.bp-funnel-items{display:flex;flex-direction:column;gap:8px}
.bp-funnel-item{background:#fff;border:1px solid var(--slate-200);border-radius:10px;padding:8px 12px}
.bp-funnel-item input[type=text]{border:none;padding:2px 0;width:100%;background:transparent}
.bp-funnel-item .bc-readonly-text{margin:0}

.bp-pos-wrap{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.bp-pos-side{display:flex;flex-direction:column;gap:14px}

.bp-madlibs-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;align-items:start}
.bp-madlibs-col{display:flex;flex-direction:column}
.bp-madlibs-col .bp-madlibs-caption{font-size:10px;font-weight:800;color:var(--brand-600);letter-spacing:.04em;margin-bottom:6px;text-transform:uppercase}
.bp-madlibs-arrow{text-align:center;color:var(--slate-300);font-size:16px;margin:6px 0}
.bp-madlibs-col .bp-madlibs-arrow:last-child{display:none}

.bp-openwheel-wrap{position:relative;max-width:300px;margin:26px auto 34px;aspect-ratio:1}
.bp-openwheel-ring{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 0deg,var(--brand-100),var(--violet-100),var(--brand-50),var(--brand-100));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 10px #fff,0 10px 26px -10px rgba(0,0,0,.22)}
.bp-openwheel-hub{background:linear-gradient(150deg,var(--brand-600),var(--violet-600));color:#fff;border-radius:50%;width:58%;height:58%;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:11.5px;letter-spacing:.03em;line-height:1.3}
.bp-openwheel-axis{position:absolute;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate-500);z-index:3;white-space:nowrap;background:#fff;padding:4px 10px;border-radius:999px;box-shadow:var(--shadow-sm);border:1px solid var(--slate-200)}
.bp-oa-top{top:-14px;left:50%;transform:translateX(-50%)}
.bp-oa-bottom{bottom:-14px;left:50%;transform:translateX(-50%)}
.bp-oa-left{left:-14px;top:50%;transform:translateY(-50%)}
.bp-oa-right{right:-14px;top:50%;transform:translateY(-50%)}

.bp-hubbook-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bp-hubbook-end{flex:0 0 190px}
.bp-hubbook-ring{position:relative;flex:1;min-width:340px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px}
.bp-hubbook-hub{grid-column:2;grid-row:2;background:linear-gradient(150deg,var(--brand-600),var(--violet-600));color:#fff;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;gap:6px}
.bp-hubbook-hub .bc-box-title{color:#fff}
.bp-hubbook-hub textarea,.bp-hubbook-hub input[type=text]{background:rgba(255,255,255,.95);border:none}
.bp-hubbook-hub .bc-readonly-text{color:#fff;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 10px}

.bp-matrix-scroll{overflow-x:auto;padding-bottom:6px}
.bp-matrix-table{border-collapse:separate;border-spacing:8px;width:100%;min-width:760px}
.bp-matrix-table th,.bp-matrix-table td{vertical-align:top;padding:0;text-align:left}
.bp-matrix-table thead th{min-width:130px}
.bp-matrix-corner{color:var(--slate-400);font-size:10.5px;font-weight:600;padding:6px !important}
.bp-matrix-table th input[type=text]{background:var(--slate-900);color:#fff;border:none;border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px;text-align:center;width:100%}
.bp-matrix-table tbody th input[type=text]{background:var(--brand-600);text-align:left}
.bp-matrix-table td textarea{min-height:70px;width:100%;border:1px solid var(--slate-200);border-radius:10px;padding:8px 10px;font-size:12.5px;font-family:inherit}

/* Cabeçalhos FIXOS (não-editáveis) de uma tabela-grade — jc-gridtable
   (Jornada do Cliente) reaproveita .bp-matrix-table mas com colunas/linhas
   estruturais fixas (as 4 etapas da jornada, os rótulos de dimensão), ao
   invés dos cabeçalhos editáveis do layout "matrix" do Brand Platform. */
.bp-matrix-static-th{display:block;background:var(--slate-900);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px;text-align:center;width:100%}
.bp-matrix-static-rowth{display:block;background:var(--brand-600);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px;text-align:left;white-space:nowrap}
.jc-gridtable thead th{min-width:150px}
.jc-gridtable tbody th{min-width:180px}

@media (max-width:900px){
  .bp-combo-grid{grid-template-columns:1fr 1fr;grid-template-areas:"n n" "nw ne" "w e" "sw se" "s s" "c c"}
  .bp-pos-wrap{grid-template-columns:1fr}
  .bp-hubbook-wrap{flex-direction:column}
  .bp-hubbook-ring{min-width:0;width:100%}
}
@media (max-width:820px){
  .bp-cols3{grid-template-columns:1fr}
  .bp-mirror-wrap{flex-direction:column}
  .bp-mirror-arrow{transform:rotate(90deg);padding:6px 0}
  .bp-split-mini{grid-template-columns:1fr}
  .bp-axis4-grid{grid-template-columns:1fr}
}
@media print{
  .bp-openwheel-wrap{break-inside:avoid}
  .bp-hub-branches,.bp-hubbook-ring,.bp-combo-grid,.bp-madlibs-flow{break-inside:avoid}
}