/* ── TEMA ESCURO ── */
:root{
  --brand:#0D2B5E;--brand-mid:#1A4080;--brand-lit:#2A5BA8;
  --accent:#1E6FD9;--accent2:#4A9FFF;
  --yellow:#F5C400;--orange:#E87B00;
  --bg:#080E1A;--surface:#0E1C30;--surface2:#0A1525;--card:#112238;--border:#1A3050;
  --text:#E8F0FB;--muted:#4A6A90;--muted2:#6A8AAB;
  --danger:#FF4455;--warn:#FFC233;--success:#22C97A;--green:#25D366;
  --shadow:rgba(0,0,0,.4);
  --radius:12px;
  /* Seta customizada em <select> — evita faixa branca da UI nativa (Windows/Chrome) */
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394b8ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* ── TEMA CLARO ── */
body.tema-claro{
  --bg:#EEF2FA;--surface:#FFFFFF;--surface2:#F4F7FC;--card:#FFFFFF;--border:#C8D8EE;
  --text:#0D2B5E;--muted:#4A6A90;--muted2:#33455C;--shadow:rgba(13,43,94,.10);
  --brand-lit:#1A4080;--accent2:#1A6FD4;--yellow:#D4A017;--orange:#C96800;
  --success:#18A863;--danger:#D63045;
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E6FD9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body.tema-claro{
  color-scheme:light;
  background:#E8EFF9;
  min-height:100vh;
  min-height:100dvh;
}
/* ── TEMA GRAPHITE (black) — neutro, sem tinte azul cobalt ── */
body.tema-graphite{
  --bg:#0E1116;--surface:#151A22;--surface2:#1B212B;--card:#161B23;--card-hover:#1A2029;
  --border:rgba(255,255,255,.08);--text:#E6E9EF;--muted:#8A94A6;--muted2:#8A94A6;
  --accent:#FF9933;--accent2:#3B82F6;
  --primary:#3B82F6;--primary-soft:rgba(59,130,246,.14);--primary-strong:#2563EB;--primary-glow:rgba(59,130,246,.25);
  --success:#3DCB8A;--warn:#F2B544;--danger:#F25C72;
  --shadow:rgba(0,0,0,.4);
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
  background:#0E1116;
  min-height:100vh;
  min-height:100dvh;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{ overflow-x:hidden; color-scheme:dark light; }

/* ── CHECKBOX GLOBAL ── */
input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid #2d3f5e;
  background: #0a1120;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
  vertical-align: middle;
}
input[type=checkbox]:hover {
  border-color: #6366f1;
}
input[type=checkbox]:checked {
  background: #6366f1;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}
input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(99,102,241,.6);
  outline-offset: 2px;
}
/* Mantém accent-color como fallback para checkboxes com display:none (lógica interna) */
input[type=checkbox].native-check {
  appearance: auto;
  -webkit-appearance: auto;
}
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior:none;   /* bloqueia pull-to-refresh e bounce em todos os eixos */
  touch-action:pan-y;         /* permite só scroll vertical (mobile) */
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  max-width:100vw;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  color-scheme:dark; /* scrollbar / controles nativos combinam com o tema escuro (ex.: Chrome/Win) */
}
.panel-inner{ min-width:0; }
.page-desc{ word-break:break-word; overflow-wrap:break-word; }
.app-main{ overflow-x:hidden; min-width:0; }

/* ── BASE RESPONSIVA GLOBAL ─────────────────────────────────── */
:root{
  --page-pad: clamp(10px, 2.2vw, 18px);
  --panel-pad: clamp(14px, 2.6vw, 24px);
  --content-max: 1180px;
  /* Altura útil da topbar (sem safe-area); overlay WhatsApp usa a mesma base */
  --topbar-h-base:56px;
  /* Faixa “Cabeçalho” quando o topo está recolhido no WhatsApp (+ safe-area no padding) */
  --topbar-wpp-peek-strip:26px;
}

/* Config: grid de cores dos temas (mobile 1 coluna) */
@media(max-width:700px){
  .cfg-ui-cores-grid{ grid-template-columns:1fr !important; }
}

/* Mídia nunca deve estourar a tela */
img, video, canvas, svg{ max-width:100%; height:auto; }
iframe{ max-width:100%; }
pre, code{
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Tipografia fluida (evita fonte gigante/pequena demais por dispositivo) */
.panel-title{ font-size:clamp(16px, 1.5vw, 18px); }
.page-desc{ font-size:clamp(12px, 1.2vw, 13px); }

/* Alvos de toque melhores no mobile */
button, .btn, .nav-item, .wpp-hub-sidebar-btn{ touch-action:manipulation; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:var(--surface); }
::-webkit-scrollbar-thumb{ background:var(--muted); border-radius:3px; }
body.tema-claro ::-webkit-scrollbar-track{ background:#EEF2FA; }
body.tema-claro ::-webkit-scrollbar-thumb{ background:#B0C8E4; }

/* ── LOGIN ── */
#login-screen{
  display:flex; min-height:100vh; overflow:hidden;
}
/* Painel esquerdo — marca */
.login-brand{
  flex:1; background:#0A1E40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 40px; position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.login-brand::before{
  content:''; position:absolute; inset:0;
  background:rgba(var(--primary-rgb),.06);
}
/* Overlay escuro quando há imagem de fundo */
.login-brand.has-bg-img::before {
  background:rgba(8,14,26,.80);
}
/* Botões de ação do fundo do login */
.login-bg-actions {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; opacity:0; transition:opacity .2s; z-index:10;
  white-space:nowrap;
}
.login-brand:hover .login-bg-actions { opacity:1; }
.login-bg-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:5px 12px; border-radius:7px;
  cursor:pointer; backdrop-filter:blur(6px);
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
  color:#e2e8f0; transition:background .15s, border-color .15s;
}
.login-bg-btn:hover { background:rgba(99,102,241,.55); border-color:#6366f1; }
.login-bg-btn--remove:hover { background:rgba(239,68,68,.45); border-color:#ef4444; }
.login-brand-deco{
  position:absolute; border-radius:50%; opacity:.06;
  background:var(--orange);
}
.login-brand-deco.d1{ width:340px; height:340px; top:-80px; right:-100px; }
.login-brand-deco.d2{ width:200px; height:200px; bottom:-40px; left:-60px; background:#4A9FFF; }
.login-brand-deco.d3{ width:120px; height:120px; bottom:120px; right:30px; opacity:.10; }
.login-brand-content{ position:relative; z-index:1; text-align:center; max-width:360px; }
.login-brand-logo{ margin-bottom:36px; }
.login-brand-logo img{ max-width:220px; max-height:90px; object-fit:contain; filter:drop-shadow(0 4px 20px rgba(0,0,0,.4)); }
.login-brand-tag{
  display:inline-block; background:rgba(232,123,0,.2); color:var(--orange);
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  padding:5px 14px; border-radius:20px; border:1px solid rgba(232,123,0,.3);
  margin-bottom:16px;
}
.login-brand-title{
  font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:800;
  color:#fff; line-height:1.1; margin-bottom:12px; letter-spacing:.5px;
}
.login-brand-title span{ color:var(--orange); }
.login-brand-desc{ font-size:14px; color:rgba(232,240,251,.55); line-height:1.7; margin-bottom:40px; }
.login-brand-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.login-pill{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:6px 14px; font-size:12px; font-weight:500; color:rgba(232,240,251,.7);
}
/* Painel direito — formulário */
.login-form-side{
  width:440px; min-width:340px; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 44px; position:relative;
}
body.tema-claro .login-form-side{ background:#fff; }
.login-form-header{ width:100%; margin-bottom:32px; }
.login-form-eyebrow{ font-size:11px; font-weight:700; color:var(--orange); letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.login-form-title{ font-size:26px; font-weight:700; color:var(--text); margin-bottom:6px; }
.login-form-sub{ font-size:14px; color:var(--muted); }
.login-card{ width:100%; }
.login-logo{ display:none; } /* logo fica no painel esquerdo */
.login-title{ display:none; }
.login-sub{ display:none; }
.login-field{ margin-bottom:18px; }
.login-field label{
  display:block; font-size:12px; font-weight:600; color:var(--muted);
  margin-bottom:7px;
}
.login-input-wrap{ position:relative; }
.login-input-icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--muted); pointer-events:none;
}
.login-field input{
  width:100%; padding:13px 14px 13px 40px; border-radius:10px;
  background:var(--bg); border:1.5px solid var(--border); color:var(--text);
  font-size:15px; font-family:'DM Sans',sans-serif; outline:none; transition:all .2s;
}
body.tema-claro .login-field input{ background:#F5F8FF; }
.login-field input:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,123,0,.15);
}
.btn-login{
  width:100%; padding:14px; border:none; border-radius:10px; cursor:pointer;
  background:#E87B00; color:#fff;
  font-size:15px; font-weight:700; font-family:'DM Sans',sans-serif;
  letter-spacing:.5px; transition:all .2s; margin-top:4px;
  box-shadow:0 4px 18px rgba(232,123,0,.35);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-login:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(232,123,0,.45); }
.btn-login:active{ transform:scale(.98); }
.login-error{
  color:var(--danger); font-size:13px; text-align:center; margin-top:10px;
  display:none; background:rgba(255,68,85,.1); border:1px solid rgba(255,68,85,.25);
  border-radius:8px; padding:10px 14px;
}
/* eye button */
.login-eye-btn{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:2px; color:var(--muted);
  display:flex; align-items:center; line-height:1; transition:color .2s;
}
.login-eye-btn:hover{ color:var(--orange); }

/* lembrar-me */
.login-remember{ margin-bottom:18px; }
.login-remember-label{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:13px; color:var(--muted); user-select:none;
}
.login-remember-label input[type=checkbox]{ display:none; }
.login-remember-check{
  width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border);
  background:var(--bg); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.login-remember-label input[type=checkbox]:checked + .login-remember-check{
  background:var(--orange); border-color:var(--orange);
}
.login-remember-label input[type=checkbox]:checked + .login-remember-check::after{
  content:''; display:block; width:4px; height:8px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:rotate(45deg) translate(-1px,-1px);
}

.login-links{ text-align:center; margin-top:20px; font-size:13px; color:var(--muted); }
.login-links a{ color:var(--orange); text-decoration:none; cursor:pointer; font-weight:500; }
.login-links a:hover{ text-decoration:underline; }
/* ── GESTOR IA ──────────────────────────────────────────────── */
/* Garante que o painel fique oculto quando não está ativo (ID supera .panel em especificidade) */
#panel-gestor-ia:not(.active){ display:none !important; }
.gia-panel-full.active,
#panel-gestor-ia.active{ display:flex; flex-direction:column; padding:0 !important; overflow:hidden; }
.gia-panel-inner,
#panel-gestor-ia .panel-inner{
  display:flex; flex-direction:column; flex:1; min-height:0; padding:0 !important; height:100%;
}
.gia-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.gia-header-info{ display:flex; align-items:center; gap:12px; }
.gia-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:transparent;
  display:flex; align-items:center; justify-content:center; color:#fff;
  animation:gia-avatar-pulse 2.8s ease-in-out infinite;
}
.gia-avatar img, .gia-welcome-icon img{
  animation:gia-avatar-breathe 3.4s ease-in-out infinite;
}
@keyframes gia-avatar-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb,30,111,217),.4); }
  50%{ box-shadow:0 0 0 6px rgba(var(--accent-rgb,30,111,217),0); }
}
@keyframes gia-avatar-breathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}
/* Flutuação leve — só no avatar do cabeçalho dentro da própria página do Gestor IA */
#panel-gestor-ia #gia-avatar-header{ animation:gia-avatar-flutuar 3.6s ease-in-out infinite; }
#panel-gestor-ia #gia-avatar-header img{ animation:none; }
@keyframes gia-avatar-flutuar{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-4px) rotate(-2deg); }
}
@media (prefers-reduced-motion:reduce){
  .gia-avatar, .gia-welcome-icon, .gia-avatar img, .gia-welcome-icon img,
  #panel-gestor-ia #gia-avatar-header{ animation:none; }
}
.gia-header-title{ font-size:15px; font-weight:700; color:var(--text); }
.gia-header-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.gia-clear-btn{
  display:flex; align-items:center; gap:6px; padding:7px 12px;
  border:1px solid var(--border); border-radius:8px; background:transparent;
  color:var(--muted); font-size:12px; cursor:pointer; transition:all .2s;
}
.gia-clear-btn:hover{ border-color:var(--danger); color:var(--danger); }
.gia-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border); background:transparent !important;
  color:var(--muted); cursor:pointer; transition:all .18s; flex-shrink:0;
  -webkit-appearance:none; appearance:none; outline:none;
}
.gia-icon-btn:hover{ border-color:var(--accent); color:var(--accent); background:rgba(74,159,255,.08) !important; }
.gia-icon-btn--danger:hover{ border-color:var(--danger); color:var(--danger); background:rgba(220,53,69,.08) !important; }

/* ── Sidebar histórico ─────────────────────────────────────── */
.gia-sidebar{
  position:absolute; top:0; left:0; bottom:0; width:260px;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:50;
  transform:translateX(-100%); transition:transform .22s ease;
  box-shadow:4px 0 16px rgba(0,0,0,.12);
}
.gia-sidebar.aberto{ transform:translateX(0); }
.gia-sidebar-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:49;
}
.gia-sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.gia-sidebar-nova{
  display:flex; align-items:center; gap:7px; margin:10px 10px 6px;
  padding:8px 12px; border-radius:8px; border:1px dashed var(--border);
  background:transparent; color:var(--muted); font-size:12px; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.gia-sidebar-nova:hover{ border-color:var(--accent); color:var(--accent); }
.gia-sidebar-lista{ flex:1; overflow-y:auto; padding:4px 0; }
.gia-sidebar-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; cursor:pointer; border-radius:8px; margin:2px 6px;
  transition:background .12s;
}
.gia-sidebar-item:hover{ background:rgba(74,159,255,.07); }
.gia-sidebar-item.ativo{ background:rgba(74,159,255,.13); }
.gia-sidebar-titulo{
  font-size:12px; color:var(--text); flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.gia-sidebar-del{
  flex-shrink:0; padding:3px 5px; border-radius:5px; border:none;
  background:transparent; color:var(--muted); cursor:pointer; opacity:0;
  transition:opacity .15s, color .15s;
}
.gia-sidebar-item:hover .gia-sidebar-del{ opacity:1; }
.gia-sidebar-del:hover{ color:var(--danger); }

.gia-messages{
  flex:1; overflow-y:auto; padding:24px 20px; display:flex; flex-direction:column; gap:16px;
}
.gia-welcome{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 20px; gap:12px; margin:auto;
}
.gia-welcome-icon{
  width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:transparent;
  display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:4px;
  animation:gia-avatar-pulse 2.8s ease-in-out infinite;
}
.gia-welcome-title{ font-size:20px; font-weight:700; color:var(--text); }
.gia-welcome-sub{ font-size:13px; color:var(--muted); max-width:480px; line-height:1.55; }
.gia-suggestions{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; max-width:600px;
}
.gia-sug{
  padding:8px 14px; border:1px solid var(--border); border-radius:20px;
  background:var(--surface); color:var(--text); font-size:12px; cursor:pointer; transition:all .2s;
}
.gia-sug:hover{ border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb,30,111,217),.07); }

/* Bolhas */
.gia-msg{ display:flex; gap:10px; max-width:780px; width:100%; }
.gia-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.gia-msg-bubble{
  padding:12px 16px; border-radius:14px; font-size:13.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
}
.gia-msg.user .gia-msg-bubble{
  background:var(--accent); color:#fff; border-bottom-right-radius:4px;
}
.gia-msg.assistant .gia-msg-bubble{
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); border-bottom-left-radius:4px;
}
.gia-chat-image{
  max-width:100%; border-radius:10px; margin-top:8px; display:block;
  border:1px solid var(--border);
}
.gia-msg-icon{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  font-size:13px; font-weight:700; align-self:flex-end;
}
.gia-msg.user .gia-msg-icon{ background:var(--surface2,var(--surface)); color:var(--muted); border:1px solid var(--border); }
.gia-msg-icon.gia-msg-icon-img{ background:transparent; border-radius:50%; }
.gia-dept-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600;
  padding:2px 8px; border-radius:10px; margin-bottom:6px;
  background:rgba(var(--accent-rgb,30,111,217),.12); color:var(--accent);
}
.gia-calib{
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:500;
  margin-top:6px; padding:3px 8px; border-radius:var(--radius,8px);
  border:1px solid var(--border); color:var(--muted);
}
.gia-calib--alta{ border-color:var(--success,var(--accent)); color:var(--success,var(--accent)); }
.gia-calib--media{ border-color:var(--accent); color:var(--accent); }
.gia-calib--baixa{ border-color:var(--danger); color:var(--danger); }
.gia-download-link{
  display:inline-flex; align-items:center; gap:4px;
  margin:6px 0; padding:6px 12px; border-radius:var(--radius,8px);
  background:var(--accent); color:#fff; font-size:12px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.gia-download-link:hover{ filter:brightness(1.08); }
.gia-link-externo{ color:var(--accent); text-decoration:underline; word-break:break-word; }
.gia-link-externo:hover{ filter:brightness(1.15); }
.gia-table-wrap{ overflow-x:auto; margin:8px 0; }
.gia-table{ border-collapse:collapse; width:100%; font-size:12.5px; }
.gia-table th, .gia-table td{ padding:6px 10px; border:1px solid var(--border); text-align:left; }
.gia-table th{ background:var(--surface2,var(--surface)); font-weight:700; color:var(--text); }
.gia-table td{ color:var(--text); }
.gia-table tbody tr:nth-child(even){ background:rgba(var(--accent-rgb,30,111,217),.04); }
.gia-chart{ margin:8px 0; }
.gia-chart-bar-bg{ fill:rgba(var(--accent-rgb,30,111,217),.12); }
.gia-chart-bar{ fill:var(--accent); }
.gia-chart-label, .gia-chart-value{ fill:var(--text); font-size:10px; }
#gia-mic-btn.gia-mic-ativo, #gia-fab-mic-btn.gia-mic-ativo{
  background:var(--danger,#ef4444) !important; color:#fff !important; border-color:var(--danger,#ef4444) !important;
  animation: gia-mic-pulso 1.1s ease-in-out infinite;
}
@keyframes gia-mic-pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.gia-doc-laudo{
  margin-top:var(--space-sm,10px);
  padding:var(--space-sm,10px) var(--space-md,14px);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-elevated,var(--bg-elevated));
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-sm,10px);
}
.gia-doc-laudo__corpo{ display:flex; align-items:flex-start; gap:var(--space-sm,10px); flex:1; min-width:200px; }
.gia-doc-laudo__icone{ color:var(--accent); flex-shrink:0; margin-top:2px; }
.gia-doc-laudo__texto{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--text-muted); }
.gia-doc-laudo__texto strong{ font-size:13px; color:var(--text); }
.gia-doc-laudo__btn{ flex-shrink:0; }
.gia-chat-image{ max-width:100%; border-radius:var(--radius,8px); margin:6px 0; }
.gia-acoes{ display:flex; align-items:center; gap:2px; margin-top:6px; }
.gia-confirm-bar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius,8px); background:var(--surface2,var(--surface)); font-size:12px; }
.gia-qual-stats{ display:flex; flex-wrap:wrap; gap:8px; }
.gia-qual-stat{ flex:1; min-width:100px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius,8px); background:var(--surface2,var(--surface)); text-align:center; }
.gia-qual-stat-val{ display:block; font-size:16px; font-weight:700; color:var(--text); }
.gia-qual-stat-lbl{ display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.gia-acao-btn{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; border:none;
  background:transparent; color:var(--muted); cursor:pointer; transition:all .15s;
}
.gia-acao-btn:hover{ background:rgba(var(--accent-rgb,30,111,217),.1); color:var(--accent); }
.gia-acao-btn:disabled{ opacity:.4; cursor:default; }
.gia-acao-btn:disabled:hover{ background:transparent; color:var(--muted); }
.gia-acao-votado{ color:var(--accent) !important; }
.gia-acao-falando{ color:var(--accent) !important; background:rgba(var(--accent-rgb,30,111,217),.1) !important; }
/* ── Bloco thinking estilo Claude ─────────────────────────── */
.gia-think-wrap{
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden; font-size:13px; max-width:520px;
  background:rgba(255,255,255,.02);
}
.gia-think-header{
  display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px;
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:12.5px; font-family:inherit; text-align:left; transition:background .15s;
}
.gia-think-header:hover{ background:rgba(255,255,255,.04); }
.gia-think-label{ flex:1; }
.gia-think-chevron{
  width:14px; height:14px; flex-shrink:0; transition:transform .2s; color:var(--muted);
}
.gia-think-header[aria-expanded="false"] .gia-think-chevron{ transform:rotate(-90deg); }
.gia-think-body{
  border-top:1px solid var(--border); padding:8px 14px 10px;
  animation:gia-think-open .2s ease;
}
@keyframes gia-think-open{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.gia-think-steps p{
  margin:0 0 5px; color:var(--muted); font-size:12px; line-height:1.5;
  opacity:0; animation:gia-think-step .3s ease forwards;
}
.gia-think-steps p:last-child{ color:var(--text); margin-bottom:0; }
@keyframes gia-think-step{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.gia-think-spin{
  width:11px; height:11px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--muted); border-top-color:var(--accent);
  animation:gia-spin .8s linear infinite;
}
@keyframes gia-spin{ to{ transform:rotate(360deg); } }
/* Compatibilidade — oculta estilo antigo */
.gia-thinking{ display:none; }
.gia-thinking-dots span{ display:none; }
@keyframes gia-bounce{ 0%,80%,100%{ transform:scale(0); } 40%{ transform:scale(1); } }
.gia-streaming::after{
  content:'▌'; display:inline-block; color:var(--accent);
  animation:gia-cursor .6s step-end infinite;
}
@keyframes gia-cursor{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* Input */
.gia-input-area{
  padding:12px 20px 16px; border-top:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.gia-input-wrap{ position:relative; display:flex; align-items:flex-end; gap:8px; }
.gia-input{
  flex:1; padding:12px 16px; border:1.5px solid var(--border); border-radius:12px;
  background:var(--bg); color:var(--text); font-size:14px; font-family:'DM Sans',sans-serif;
  resize:none; outline:none; transition:border-color .2s; max-height:160px; overflow-y:auto;
  line-height:1.5;
}
.gia-input:focus{ border-color:var(--accent); }
.gia-send-btn{
  width:44px; height:44px; border-radius:12px; border:none; cursor:pointer; flex-shrink:0;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.gia-send-btn:hover{ opacity:.88; transform:translateY(-1px); }
.gia-send-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.gia-input-hint{ font-size:11px; color:var(--muted); text-align:center; margin-top:8px; }

/* Seletor de modelo IA no chat */
.gia-modelo-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  margin-bottom:4px; min-height:0;
}
.gia-modelo-bar{ position:relative; }
.gia-modelo-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:var(--radius-sm, 6px);
  border:1px solid transparent; background:transparent;
  color:var(--muted); font-size:11px; font-family:inherit; cursor:default;
  max-width:100%; line-height:1.3;
  transition:color .15s, border-color .15s, background .15s;
}
.gia-modelo-chip[aria-disabled="false"]{ cursor:pointer; }
.gia-modelo-chip[aria-disabled="false"]:hover{
  color:var(--text); border-color:var(--border);
  background:var(--surface2, var(--bg));
}
.gia-modelo-chip__ico{
  flex-shrink:0; width:11px; height:11px; color:var(--muted); opacity:.65;
}
.gia-modelo-chip__text{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:min(200px, 58vw);
}
.gia-modelo-chip__chevron{
  flex-shrink:0; width:10px; height:10px; color:var(--muted);
  opacity:.55; display:none;
}
.gia-modelo-chip[aria-disabled="false"] .gia-modelo-chip__chevron{ display:block; }
.gia-modelo-chip[aria-disabled="false"]:hover .gia-modelo-chip__ico,
.gia-modelo-chip[aria-disabled="false"]:hover .gia-modelo-chip__chevron{ opacity:1; }
.gia-fab-panel .gia-modelo-chip__text{ max-width:min(168px, 72vw); }
.gia-modelo-menu{
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:120;
  min-width:220px; max-width:min(320px, 90vw); max-height:240px; overflow-y:auto;
  padding:6px; border-radius:var(--radius-md, 10px);
  border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.15));
}
.gia-modelo-menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:8px 10px; border:none; border-radius:var(--radius-sm, 8px);
  background:transparent; color:var(--text); font-size:12px; font-family:inherit;
  text-align:left; cursor:pointer; transition:background .12s;
}
.gia-modelo-menu-item:hover{ background:var(--surface2, var(--bg)); }
.gia-modelo-menu-item.ativo{ background:var(--accent-soft, rgba(59,130,246,.12)); color:var(--accent); font-weight:600; }
.gia-modelo-menu-item__check{ flex-shrink:0; color:var(--accent); }
.gia-modelo-usado{
  font-size:11px; color:var(--muted); line-height:1.4;
}

.gia-cfg-wpp-instancias-lista{
  max-height:200px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm, 8px);
  padding:8px 10px; display:flex; flex-direction:column; gap:4px;
}
.gia-cfg-wpp-inst-item{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--text); cursor:pointer; padding:4px 2px;
}
.gia-cfg-wpp-inst-item input{ width:auto; margin-top:2px; flex-shrink:0; }

/* ── Widget flutuante (chat rápido em qualquer painel do SPA) ─────── */
.gia-fab-btn{
  position:fixed; right:24px; bottom:24px; z-index:9500;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .18s, box-shadow .18s;
}
.gia-fab-btn:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 8px 24px rgba(0,0,0,.3); }

.gia-fab-panel{
  position:fixed; right:24px; bottom:92px; z-index:9500;
  width:380px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 140px);
  background:var(--bg); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.3); overflow:hidden;
  flex-direction:column;
}
.gia-fab-panel .gia-header{ border-radius:16px 16px 0 0; padding:12px 16px; }
.gia-fab-panel .gia-avatar{ width:34px; height:34px; border-radius:10px; }
.gia-fab-panel .gia-header-title{ font-size:14px; }
.gia-fab-panel .gia-header-sub{ font-size:11px; }
.gia-fab-panel .gia-messages{ padding:16px; gap:12px; }
.gia-fab-panel .gia-input-area{ padding:10px 14px 14px; }

@media (max-width:520px){
  .gia-fab-panel{
    right:12px; left:12px; bottom:88px; width:auto; max-width:none;
    height:calc(100vh - 120px); max-height:none;
  }
  .gia-fab-btn{ right:16px; bottom:16px; }
}

/* ── Gestor IA — Modal de configuração ───────────────────── */
.gia-cfg-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:100; backdrop-filter:blur(2px);
}
.gia-cfg-modal{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(420px,92%); max-height:88vh; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; z-index:101; box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden;
}
/* Card de sugestão automática de memória */
.gia-mem-sugestao{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:6px 0 6px 44px; padding:9px 12px;
  background:rgba(var(--accent-rgb,30,111,217),.07);
  border:1px solid rgba(var(--accent-rgb,30,111,217),.2);
  border-radius:10px; font-size:12px; animation:gia-think-open .25s ease;
}
.gia-mem-sug-icone{ flex-shrink:0; font-size:14px; }
.gia-mem-sug-texto{ flex:1; color:var(--text); line-height:1.4; min-width:120px; }
.gia-mem-sug-btns{ display:flex; gap:6px; flex-shrink:0; }
.gia-mem-sug-salvar{
  padding:4px 12px; border-radius:7px; border:none; cursor:pointer;
  background:var(--accent); color:#fff; font-size:11px; font-weight:600;
  font-family:inherit; transition:opacity .15s;
}
.gia-mem-sug-salvar:hover{ opacity:.85; }
.gia-mem-sug-salvar:disabled{ opacity:.5; cursor:default; }
.gia-mem-sug-ignorar{
  padding:4px 10px; border-radius:7px; border:1px solid var(--border);
  background:none; cursor:pointer; color:var(--muted); font-size:11px;
  font-family:inherit; transition:all .15s;
}
.gia-mem-sug-ignorar:hover{ border-color:var(--danger); color:var(--danger); }
/* Itens de memória/ensinamentos */
.gia-mem-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.gia-mem-item:last-child{ border-bottom:none; }
.gia-mem-num{
  flex-shrink:0; font-size:10px; font-weight:700; color:var(--muted);
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:2px 6px; margin-top:1px;
}
.gia-mem-texto{ flex:1; min-width:0; font-size:13px; color:var(--text); line-height:1.5; }
.gia-conh-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gia-mem-del{
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:var(--muted); padding:3px; border-radius:6px; transition:color .15s, background .15s;
  display:flex; align-items:center;
}
.gia-mem-del:hover{ color:var(--danger); background:rgba(239,68,68,.1); }
/* Modal capacidades — mais largo e scrollável */
.gia-cap-modal{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(680px,95%); max-height:80%; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; z-index:101;
  box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden;
}
.gia-cap-body{ overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:20px; }
.gia-cap-grupo{ display:flex; flex-direction:column; gap:6px; }
.gia-cap-grupo-titulo{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent); padding-bottom:4px; border-bottom:1px solid var(--border);
}
.gia-cap-ferramenta{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 10px; border-radius:8px; background:var(--bg);
}
.gia-cap-ferramenta-nome{ font-size:12px; font-weight:600; color:var(--text); font-family:monospace; }
.gia-cap-ferramenta-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.gia-cap-schema{
  font-size:11px; color:var(--muted); font-family:monospace; white-space:pre-wrap;
  background:var(--bg); border-radius:8px; padding:12px; line-height:1.6;
  max-height:200px; overflow-y:auto;
}
.gia-cap-tag-sql{
  display:inline-block; font-size:10px; padding:1px 6px; border-radius:4px;
  background:rgba(74,159,255,.15); color:var(--accent); font-weight:700; margin-left:6px;
}
.gia-cfg-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.gia-cfg-close{
  width:30px; height:30px; border-radius:8px; border:none; background:var(--bg);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.gia-cfg-close:hover{ background:var(--danger); color:#fff; }
.gia-cfg-modal-body{ padding:20px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; flex:1 1 auto; min-height:0; }
.gia-cfg-modal-footer{
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px; flex-shrink:0;
}
.gia-cfg-avatar-preview-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.gia-cfg-avatar-preview{
  width:72px; height:72px; border-radius:18px; overflow:hidden;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff;
  border:2px solid var(--border); flex-shrink:0;
}
.gia-cfg-avatar-preview img{ width:100%; height:100%; object-fit:cover; }
.gia-cfg-field{ display:flex; flex-direction:column; gap:6px; }
.gia-cfg-label{ font-size:12px; font-weight:600; color:var(--muted); }
.gia-cfg-input{
  width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:9px;
  background:var(--bg); color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif;
  outline:none; transition:border-color .2s; box-sizing:border-box;
}
.gia-cfg-input:focus{ border-color:var(--accent); }
.gia-cfg-upload-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border:1.5px dashed var(--border); border-radius:9px; background:transparent;
  color:var(--muted); font-size:12px; cursor:pointer; transition:all .2s;
}
.gia-cfg-upload-btn:hover{ border-color:var(--accent); color:var(--accent); }
.gia-cfg-save-btn{
  padding:9px 20px; border:none; border-radius:9px; cursor:pointer;
  background:var(--accent); color:#fff; font-size:13px; font-weight:600;
  font-family:'DM Sans',sans-serif; transition:all .2s;
}
.gia-cfg-save-btn:hover{ opacity:.88; }

/* ── Gestor IA — Responsividade Mobile ───────────────────── */
@media(max-width:600px){
  .gia-header{
    padding:10px 14px;
  }
  .gia-header-info{ gap:8px; }
  .gia-avatar{ width:34px; height:34px; border-radius:10px; }
  .gia-header-title{ font-size:14px; }
  .gia-header-sub{ display:none; }

  .gia-messages{
    padding:14px 12px;
    gap:12px;
  }

  .gia-welcome{
    padding:24px 12px;
    gap:10px;
  }
  .gia-welcome-icon{ width:52px; height:52px; border-radius:50%; }
  .gia-welcome-title{ font-size:17px; }
  .gia-welcome-sub{ font-size:12px; max-width:100%; }
  .gia-suggestions{
    gap:6px;
    justify-content:flex-start;
  }
  .gia-sug{
    padding:7px 12px;
    font-size:11.5px;
    border-radius:16px;
    text-align:left;
  }

  .gia-msg{ max-width:100%; gap:7px; }
  .gia-msg-bubble{
    padding:10px 13px;
    font-size:13px;
    border-radius:12px;
  }
  .gia-msg-icon{
    width:28px; height:28px; border-radius:8px; font-size:12px;
  }

  .gia-input-area{
    padding:10px 12px 12px;
  }
  .gia-input{
    padding:10px 14px;
    font-size:15px; /* 15px evita zoom automático no iOS */
    border-radius:10px;
  }
  .gia-send-btn{
    width:42px; height:42px; border-radius:10px;
  }
  .gia-input-hint{ font-size:10px; }

  .gia-cfg-modal{
    top:auto; bottom:0; left:0; right:0;
    transform:none;
    width:100%;
    border-radius:20px 20px 0 0;
    max-height:90vh;
    overflow-y:auto;
  }
}
@media(max-width:400px){
  .gia-msg.user .gia-msg-bubble,
  .gia-msg.assistant .gia-msg-bubble{ font-size:12.5px; }
  .gia-welcome-title{ font-size:15px; }
  .gia-sug{ font-size:11px; padding:6px 10px; }
}

.login-pwa-row{
  display:none; justify-content:center; margin-top:16px;
}
.btn-pwa-install{
  width:100%; max-width:280px; padding:10px 16px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:background .2s,border-color .2s;
}
.btn-pwa-install:hover{ background:var(--card); border-color:var(--orange); color:var(--orange); }
.login-pwa-hint{
  display:none; margin-top:14px; padding:12px 14px; border-radius:10px; font-size:12px; line-height:1.45;
  color:var(--muted); background:rgba(13,43,94,.06); border:1px solid var(--border); text-align:center;
}
.login-divider{
  display:flex; align-items:center; gap:10px; margin:20px 0;
  color:var(--muted); font-size:12px;
}
.login-divider::before,.login-divider::after{
  content:''; flex:1; height:1px; background:var(--border);
}
.login-ver{ position:absolute; bottom:20px; font-size:11px; color:var(--muted); }
/* Responsivo: esconde painel esquerdo em telas pequenas */
@media(max-width:700px){
  .login-brand{ display:none; }
  .login-form-side{ width:100%; padding:32px 24px; }
  .login-mobile-logo{ display:flex !important; }
}
.login-mobile-logo{
  display:none; justify-content:center; margin-bottom:24px;
}
.login-mobile-logo img{ max-width:160px; max-height:60px; object-fit:contain; }

/* ── PDI / REUNIÕES / CALENDÁRIO ── */
.pdi-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px; margin-bottom:14px; cursor:pointer; transition:all .2s;
  border-left:4px solid var(--accent);
}
.pdi-card:hover{ border-color:var(--orange); transform:translateY(-1px); box-shadow:0 4px 16px var(--shadow); }
.pdi-card.status-concluido{ border-left-color:var(--success); opacity:.85; }
.pdi-card.status-cancelado{ border-left-color:var(--danger); opacity:.7; }
.pdi-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pdi-title{ font-size:15px; font-weight:700; color:var(--text); }
.pdi-meta{ font-size:12px; color:var(--muted); margin-top:3px; }
.pdi-badge{
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.pdi-badge.em_andamento{ background:rgba(74,159,255,.15); color:var(--accent2); }
.pdi-badge.concluido{ background:rgba(34,201,122,.15); color:var(--success); }
.pdi-badge.rascunho{ background:rgba(245,196,0,.15); color:var(--yellow); }
.pdi-badge.cancelado{ background:rgba(255,68,85,.15); color:var(--danger); }
.pdi-progress{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.pdi-progress-bar{ flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.pdi-progress-fill{ height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }
.pdi-progress-pct{ font-size:12px; font-weight:700; color:var(--muted2); min-width:32px; text-align:right; }
.obj-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.obj-item{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; display:flex; align-items:center; gap:10px;
}
.obj-check{ font-size:18px; cursor:pointer; flex-shrink:0; }
.obj-desc{ flex:1; font-size:13px; color:var(--text); }
.obj-tipo{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; padding:2px 8px; border-radius:10px; }
.obj-tipo.competencia{ background:rgba(74,159,255,.12); color:var(--accent2); }
.obj-tipo.resultado{ background:rgba(34,201,122,.12); color:var(--success); }
.obj-tipo.comportamento{ background:rgba(245,196,0,.12); color:var(--yellow); }
.reuniao-item{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; margin-bottom:10px; display:flex; gap:14px; align-items:flex-start;
  cursor:pointer; transition:all .15s;
}
.reuniao-item:hover{ border-color:var(--accent); box-shadow:0 2px 12px var(--shadow); }
.reuniao-date-col{ text-align:center; min-width:46px; }
.reuniao-day{ font-size:24px; font-weight:800; color:var(--orange); line-height:1; font-family:'Barlow Condensed',sans-serif; }
.reuniao-mon{ font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; }
.reuniao-body{ flex:1; }
.reuniao-titulo{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.reuniao-info{ font-size:12px; color:var(--muted); }
.reuniao-status{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; margin-left:auto; }
.reuniao-status.agendada{ background:rgba(74,159,255,.15); color:var(--accent2); }
.reuniao-status.realizada{ background:rgba(34,201,122,.15); color:var(--success); }
.reuniao-status.cancelada{ background:rgba(255,68,85,.15); color:var(--danger); }
/* Reunião 1:1 — Tabs */
/* ── DASHBOARD ───────────────────────────────────────────────── */
.dash-layer-tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.dash-layer-btn  { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 18px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; transition:all .15s; text-align:left; }
.dash-layer-btn.ativo { background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 2px 8px rgba(232,123,0,.3); }
.dash-tab-title  { font-size:13px; font-weight:700; line-height:1.2; }
.dash-tab-sub    { font-size:10px; font-weight:500; opacity:.75; line-height:1.2; }
.dash-layer-desc { font-size:12px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:16px; line-height:1.5; }
.dash-desc-body { display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; }
.dash-desc-info { flex:1; min-width:200px; }
.dash-desc-title { display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; color:var(--text); margin-bottom:8px; }
.dash-desc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.dash-desc-list li { display:flex; align-items:flex-start; gap:7px; font-size:12px; color:var(--muted); line-height:1.45; }
.dash-desc-list li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:5px; }
.dash-desc-action { min-width:180px; max-width:260px; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.dash-desc-action-lbl { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); }
.dash-desc-action-txt { font-size:12px; color:var(--muted); line-height:1.45; }
.dash-guia-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:7px; margin-bottom:12px; }
.dash-guia-step { display:flex; align-items:flex-start; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.dash-guia-step-num { width:19px; height:19px; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.dash-guia-step-txt { font-size:11.5px; color:var(--muted); line-height:1.4; }
.dash-guia-step-txt strong { color:var(--text); display:block; font-size:12px; margin-bottom:1px; }
.dash-guia-legend { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dash-guia-badge { display:inline-flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:3px 9px; font-size:11.5px; color:var(--muted); }
.dash-guia-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dash-card-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.dash-card { background:var(--card); border:1.5px solid var(--border); border-left:4px solid var(--border); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.dash-card.verde   { border-left-color:var(--success); }
.dash-card.amarelo { border-left-color:var(--warn); }
.dash-card.vermelho{ border-left-color:var(--danger); }
.dash-card.neutro  { border-left-color:var(--border); }
.dash-card-val  { font-size:30px; font-weight:800; color:var(--text); line-height:1.1; }
.dash-card-val.verde    { color:var(--success); }
.dash-card-val.amarelo  { color:var(--warn); }
.dash-card-val.vermelho { color:var(--danger); }
.dash-card-label { font-size:11px; font-weight:600; color:var(--muted); }
.dash-card-sub   { font-size:11px; color:var(--muted); margin-top:2px; }
.dash-section-title { font-size:11px; font-weight:600; color:var(--muted); margin:20px 0 10px; display:flex; align-items:center; gap:8px; }
.dash-section-title::after { content:''; flex:1; height:1px; background:var(--border); }
.dash-progress-wrap { background:var(--bg); border-radius:8px; height:7px; overflow:hidden; flex:1; min-width:60px; }
.dash-progress-bar  { height:100%; border-radius:8px; transition:width .5s ease; }
.dash-alert-list  { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.dash-alert-item  { display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:10px; font-size:13px; }
.dash-alert-item.danger { background:rgba(255,68,85,.07); border:1px solid rgba(255,68,85,.2); }
.dash-alert-item.warn   { background:rgba(245,196,0,.07); border:1px solid rgba(245,196,0,.2); }
.dash-alert-item.ok     { background:rgba(34,201,122,.07); border:1px solid rgba(34,201,122,.2); color:var(--success); }
.dash-collab-row  { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.dash-collab-row:last-child { border-bottom:none; }
.dash-collab-nome { min-width:120px; max-width:150px; font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-collab-pct  { min-width:44px; text-align:right; font-size:12px; font-weight:700; }
.dash-collab-cnt  { min-width:54px; text-align:right; font-size:11px; color:var(--muted); }
.dash-actions-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.dash-action-btn  { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; font-size:12px; font-weight:600; background:var(--surface); border:1.5px solid var(--border); color:var(--text); cursor:pointer; transition:all .15s; }
.dash-action-btn:hover { border-color:var(--orange); color:var(--orange); }
.dash-meta-card   { background:var(--card); border:1.5px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
@media(max-width:600px){ .dash-card-grid{ grid-template-columns:1fr 1fr; } .dash-collab-nome{ min-width:80px; max-width:100px; } }

.reuniao-tabs{
  display:flex; flex-wrap:wrap; gap:4px;
  margin-bottom:18px; border-bottom:2px solid var(--border); padding-bottom:0;
  overflow-x:hidden; max-width:100%;
}
.reuniao-tab{
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  padding:8px 16px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer;
  border-radius:0; transition:color .15s,border-color .15s; white-space:nowrap; text-align:left;
  display:inline-flex; align-items:center; gap:6px; font-family:inherit;
}
.reuniao-tab:hover{ color:var(--text); background:none; }
.reuniao-tab.active{ color:var(--orange); border-bottom-color:var(--orange); background:none; }
/* Disponibilidade grid */
/* Barra de filtros reutilizável */
.filtro-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; padding:12px 14px; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; }
.filtro-field{ display:flex; flex-direction:column; gap:4px; min-width:130px; }
.filtro-field label{ font-size:11px; font-weight:600; color:var(--muted); }
.filtro-sel{
  padding:7px 32px 7px 10px; border-radius:8px;
  background-color:var(--bg); border:1.5px solid var(--border); color:var(--text);
  font-size:12px; width:100%;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:var(--select-chevron);
  background-repeat:no-repeat; background-position:right 9px center; background-size:16px;
}
.filtro-sel:focus{ outline:none; border-color:var(--accent2); }
/* `.filtro-sel` foi pensado para <select> (chevron + cursor pointer + appearance:none).
   Quando aplicado a <input> de texto, a seta de seleção ficava desenhada em cima do
   campo de digitação. Este override neutraliza o visual de select para inputs/textarea
   livres sem mexer em cada tela que reaproveita o estilo. */
input.filtro-sel,
textarea.filtro-sel{
  background-image:none;
  cursor:text;
  padding-right:10px;
}
body.tema-claro .filtro-sel{
  background-color:#fff;
  border-color:#C0D4EC;
  color:#0D2B5E;
}
.filtro-actions{ display:flex; gap:6px; align-items:flex-end; margin-left:auto; flex-shrink:0; }
.disp-bloco{ background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:14px; }
.disp-bloco-titulo{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:14px; }
/* Cabeçalho colapsável — Disponibilidade (agradecimento / lembrete 30 min) */
.disp-bloco-collapse-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  cursor:pointer;
  user-select:none;
}
.disp-bloco-collapse-head:hover{ background:rgba(255,255,255,.03); }
body.tema-claro .disp-bloco-collapse-head:hover{ background:rgba(0,0,0,.04); }
.disp-bloco-collapse-head-main{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.disp-bloco-collapse-title{
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.disp-bloco-collapse-ativo{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  margin:0;
  flex-shrink:0;
}
.disp-bloco-collapse-chevron{
  color:var(--muted);
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease;
}
.disp-bloco-collapse-body{
  border-top:1px solid var(--border);
  padding:18px;
}
.disp-bloco--expanded .disp-bloco-collapse-chevron{ transform:rotate(180deg); }
.disp-dia-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.disp-dia-row:last-child{ border-bottom:none; }
.disp-dia-label{ font-size:13px; font-weight:600; color:var(--text); width:80px; flex-shrink:0; }
.disp-time{ padding:7px 10px; border-radius:8px; background:var(--bg); border:1.5px solid var(--border); color:var(--text); font-size:13px; width:90px; }
.disp-time:disabled{ opacity:.35; cursor:not-allowed; }
.disp-sep{ color:var(--muted); font-size:12px; }
.disp-dur-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.dur-btn{ transition:all .15s; }
/* Link de agendamento */
.disp-link-box{ display:flex; align-items:center; gap:10px; background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; margin:10px 0 14px; }
.disp-link-url{ font-size:12px; color:var(--accent2); word-break:break-all; flex:1; font-family:monospace; }
/* Calendário */
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{ background:var(--card); border:1px solid var(--border); border-radius:8px; padding:6px 14px; color:var(--text); cursor:pointer; font-size:14px; font-weight:600; transition:all .15s; }
.cal-nav button:hover{ border-color:var(--orange); color:var(--orange); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; padding:6px 0; letter-spacing:.6px; }
.cal-cell{
  min-height:80px; background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:6px; position:relative; cursor:pointer; transition:border-color .15s;
}
.cal-cell:hover{ border-color:var(--accent); }
.cal-cell.today{ border-color:var(--orange); background:rgba(232,123,0,.06); }
.cal-cell.other-month{ opacity:.35; }
.cal-cell-num{ font-size:12px; font-weight:700; color:var(--muted2); margin-bottom:4px; }
.cal-cell.today .cal-cell-num{ color:var(--orange); }
.cal-event{ font-size:10px; padding:2px 5px; border-radius:4px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.cal-event.reuniao{ background:rgba(74,159,255,.2); color:var(--accent2); }
.cal-event.pdi{ background:rgba(245,196,0,.2); color:var(--yellow); }
.cal-event.pdi-atrasado{ background:rgba(255,68,85,.2); color:var(--danger); }

/* ── APP LAYOUT ── */
#app-screen{
  display:none;
  flex-direction:column;
  width:100%;
  min-height:0;
}
.app-layout{
  display:flex;
  min-height:100vh;
  min-height:100dvh;
  flex:1;
  width:100%;
  min-width:0;
}

/* ── SIDEBAR ── */
.sidebar{
  width:240px; min-width:240px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; height:100vh; height:100dvh;
  position:fixed; left:0; top:0; z-index:200;
  overflow-x:hidden;
  overflow-y:hidden;
  min-height:0;
  scrollbar-width:thin;
  color-scheme:dark;
  /* Firefox — trilho e “thumb” discretos, alinhados ao fundo escuro da sidebar */
  scrollbar-color:rgba(74,159,255,.38) rgba(8,14,26,.92);
}
body.tema-claro .sidebar{
  background:#fff; border-right-color:#D8E8F4;
  color-scheme:light;
  scrollbar-color:rgba(106,154,206,.95) rgba(238,242,250,.96);
}

/* Sidebar — WebKit/Chromium/Electron (scrollbar mais escura que a padrão do SO) */
.sidebar::-webkit-scrollbar{ width:7px; }
.sidebar::-webkit-scrollbar-track{
  background:rgba(8,14,26,.92);
}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(74,106,144,.82);
  border-radius:999px;
  border:2px solid rgba(8,14,26,.92);
}
.sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(74,159,255,.45);
}
body.tema-claro .sidebar::-webkit-scrollbar-track{ background:rgba(238,242,250,.96); }
body.tema-claro .sidebar::-webkit-scrollbar-thumb{
  background:rgba(130,164,206,.92);
  border-color:rgba(238,242,250,.96);
}
body.tema-claro .sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(26,111,217,.42); }

.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:18px 16px 16px;
  border-bottom:1px solid var(--border);
}
body.tema-claro .sidebar-brand{ border-bottom-color:#E4EEF8; }
.sidebar-brand-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; overflow:hidden; padding:0;
  box-shadow:0 2px 8px rgba(13,43,94,.35);
}
.sidebar-brand-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.sidebar-brand-name{ font-size:15px; font-weight:700; color:var(--text); line-height:1.25; }
.sidebar-brand-sub{ font-size:10px; color:var(--orange); font-weight:700; letter-spacing:1.5px; margin-top:3px; text-transform:uppercase; }

.sidebar-user{
  margin:12px 12px 4px; padding:10px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; gap:10px; cursor:pointer;
  transition:border-color .2s;
}
.sidebar-user:hover{ border-color:var(--accent); }
body.tema-claro .sidebar-user{ background:#F0F6FF; border-color:#D0E4F4; }
.sidebar-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff; overflow:hidden;
}
.sidebar-avatar img{ width:100%; height:100%; object-fit:cover; }
.sidebar-user-name{ font-size:13px; font-weight:700; color:var(--text); }
.sidebar-user-role{ font-size:11px; color:var(--muted); margin-top:1px; }

.sidebar-nav{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0;
}
.sidebar-nav-tools{
  flex-shrink:0;
  padding:10px 10px 6px;
}
.sidebar.collapsed .sidebar-nav-tools{ display:none; }

.sidebar-nav-search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  transition:border-color .15s, box-shadow .15s;
}
body.tema-claro .sidebar-nav-search-wrap{
  background:#f0f6ff;
  border-color:#cfe0f4;
}
.sidebar-nav-search-wrap:focus-within{
  border-color:rgba(74,159,255,.55);
  box-shadow:0 0 0 2px rgba(74,159,255,.12);
}
.sidebar-nav-search-ico{
  flex-shrink:0;
  opacity:.55;
  color:var(--muted2);
}
.sidebar-nav-search{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-family:inherit;
  outline:none;
  padding:2px 0;
}
.sidebar-nav-search::placeholder{ color:var(--muted); opacity:.85; }

.sidebar-nav-scroll{
  flex:1;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:0;
  padding:4px 8px 10px;
  /* Sidebar expandida: barra de rolagem fina, com cores discretas (Firefox) */
  scrollbar-width:thin;
  scrollbar-color:rgba(74,106,144,.82) rgba(8,14,26,.92);
}
body.tema-claro .sidebar-nav-scroll{
  scrollbar-color:rgba(130,164,206,.92) rgba(238,242,250,.96);
}
/* WebKit/Chromium/Electron — mesmo visual da scrollbar global da sidebar */
.sidebar-nav-scroll::-webkit-scrollbar{ width:7px; }
.sidebar-nav-scroll::-webkit-scrollbar-track{
  background:rgba(8,14,26,.92);
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb{
  background:rgba(74,106,144,.82);
  border-radius:999px;
  border:2px solid rgba(8,14,26,.92);
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(74,159,255,.45);
}
body.tema-claro .sidebar-nav-scroll::-webkit-scrollbar-track{ background:rgba(238,242,250,.96); }
body.tema-claro .sidebar-nav-scroll::-webkit-scrollbar-thumb{
  background:rgba(130,164,206,.92);
  border-color:rgba(238,242,250,.96);
}
body.tema-claro .sidebar-nav-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(26,111,217,.42); }
/* Sidebar colapsada: a navegação é feita pelas setas ↑ ↓, então escondemos
   a barra de rolagem para não competir com os ícones na largura reduzida. */
.sidebar.collapsed .sidebar-nav-scroll{ scrollbar-width:none; }
.sidebar.collapsed .sidebar-nav-scroll::-webkit-scrollbar{ display:none; }

/* ── Setas de scroll do menu lateral ── */
.sidebar-scroll-arrow{
  flex-shrink:0;
  display:none; /* visível apenas quando sidebar.collapsed */
  align-items:center;
  justify-content:center;
  width:100%;
  height:22px;
  min-height:22px;
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--muted2);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, background .15s;
  position:relative;
  z-index:2;
}
.sidebar-scroll-arrow:hover{
  background:rgba(74,159,255,.08);
  color:var(--accent);
}
.sidebar-scroll-arrow.visible{
  opacity:1;
  pointer-events:auto;
}
.sidebar.collapsed .sidebar-scroll-arrow{
  display:flex;
}
/* Gradiente de fade sob as setas para indicar conteúdo oculto */
.sidebar.collapsed .sidebar-scroll-arrow--up::after,
.sidebar.collapsed .sidebar-scroll-arrow--down::after{
  content:'';
  position:absolute;
  left:0; right:0;
  height:18px;
  pointer-events:none;
}
.sidebar.collapsed .sidebar-scroll-arrow--up::after{
  top:100%;
  background:linear-gradient(to bottom, var(--surface), transparent);
}
.sidebar.collapsed .sidebar-scroll-arrow--down::after{
  bottom:100%;
  background:linear-gradient(to top, var(--surface), transparent);
}
body.tema-claro .sidebar.collapsed .sidebar-scroll-arrow--up::after{
  background:linear-gradient(to bottom, #fff, transparent);
}
body.tema-claro .sidebar.collapsed .sidebar-scroll-arrow--down::after{
  background:linear-gradient(to top, #fff, transparent);
}

.nav-group{
  margin-bottom:6px;
  padding-bottom:8px;
}
.nav-group:not(:last-child){
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.tema-claro .nav-group:not(:last-child){
  border-bottom-color:#e8eef6;
}
.nav-group-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(74,159,255,.92);
  padding:12px 10px 6px;
  display:block;
}
body.tema-claro .nav-group-label{
  color:#2563ab;
  opacity:.92;
}
.nav-group-sep{
  border-top:1px solid var(--border);
  margin:6px 8px 2px;
}

/* ── Setores: accordion no menu lateral ── */
.nav-sector{ margin-bottom:2px; }
.nav-sector-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  background:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  color:var(--muted2);
  font-size:13px;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  transition:background .15s, color .15s;
  border-left:3px solid transparent;
}
.nav-sector-btn:hover{ background:rgba(232,123,0,.08); color:var(--text); }
.nav-sector.open .nav-sector-btn{
  color:var(--text);
  border-left-color:rgba(74,159,255,.45);
}
body.tema-claro .nav-sector.open .nav-sector-btn{ border-left-color:rgba(37,99,171,.45); }
.nav-sector-icon{
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; opacity:.85;
}
.nav-sector-label{ flex:1; text-align:left; line-height:1.25; }
.nav-sector-chev{
  flex-shrink:0; opacity:.55;
  transition:transform .2s ease;
  display:flex; align-items:center;
}
.nav-sector.open .nav-sector-chev{ transform:rotate(90deg); opacity:.85; }
.nav-sub{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .22s ease;
}
.nav-sub-inner{ overflow:hidden; min-height:0; }
.nav-sector.open .nav-sub{ grid-template-rows:1fr; }
.nav-sub-item{
  display:block;
  width:100%;
  text-align:left;
  padding:7px 12px 7px 42px;
  margin:1px 0;
  border:none;
  border-radius:8px;
  background:none;
  color:var(--muted2);
  font-size:12.5px;
  font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  position:relative;
  transition:background .15s, color .15s;
  border-left:3px solid transparent;
}
.nav-sub-item::before{
  content:'';
  position:absolute;
  left:24px; top:4px; bottom:4px;
  width:1px;
  background:rgba(255,255,255,.08);
}
body.tema-claro .nav-sub-item::before{ background:#dce4ee; }
.nav-sub-item:hover{ background:rgba(232,123,0,.08); color:var(--text); }
.nav-sub-item.active{
  background:rgba(232,123,0,.13);
  color:var(--orange);
  border-left-color:var(--orange);
  font-weight:600;
}
body.tema-claro .nav-sub-item.active{ background:rgba(232,123,0,.10); color:#C96800; border-left-color:#C96800; }
.nav-sub-item.nav-item--hidden{ display:none !important; }
.sidebar.collapsed .nav-sub{ display:none; }
.sidebar.collapsed .nav-sector-chev{ display:none; }

.nav-item.nav-item--hidden{
  display:none !important;
}

.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:8px; cursor:pointer; margin-bottom:2px;
  color:var(--muted2); font-size:13px; font-weight:500;
  transition:all .15s; border-left:3px solid transparent; position:relative;
}
.nav-item:hover{ background:rgba(232,123,0,.08); color:var(--text); }
.nav-item.active{
  background:rgba(232,123,0,.13); color:var(--orange);
  border-left-color:var(--orange); font-weight:600;
}
body.tema-claro .nav-item.active{ background:rgba(232,123,0,.10); color:#C96800; border-left-color:#C96800; }
body.tema-claro .nav-item:hover{ background:rgba(232,123,0,.06); color:#0D2B5E; }
.nav-item-icon{ width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; opacity:.85; }
.nav-item-icon svg{ width:16px; height:16px; display:block; }
.nav-item.active .nav-item-icon{ opacity:1; }
.nav-badge{
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px;
}

.sidebar-footer{
  flex-shrink:0;
  padding:12px;
  border-top:1px solid var(--border);
}
body.tema-claro .sidebar-footer{ border-top-color:#E4EEF4; }
.btn-logout{
  width:100%;
  padding:8px 12px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:rgba(255,68,85,.12);
  color:#FF7080;
  font-size:12px;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  transition:background .2s;
  min-height:34px;
  box-sizing:border-box;
}
.btn-logout svg{ flex-shrink:0; width:15px; height:15px; display:block; }
.btn-logout span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-logout:hover{ background:rgba(255,68,85,.22); }
body.tema-claro .btn-logout{ background:rgba(214,48,69,.10); color:#C03040; }

/* ── APP MAIN ── */
.app-main{
  margin-left:240px;
  width:calc(100% - 240px);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
/* Desktop: trava a altura do shell para o .content-area (overflow-y:auto no
   design-system.css) virar de fato a área que rola — sem isso nenhum
   ancestral tem altura definida e o scroll do mouse fica instável/preso.
   Mobile mantém o próprio esquema (rolagem no documento, ver @media 900px). */
@media(min-width:901px){
  .app-layout{ height:100vh; height:100dvh; }
  .app-main{ height:100vh; height:100dvh; }
  /* body.go-app-shell{overflow-y:hidden} (mais abaixo) trava só o body —
     em algumas páginas com conteúdo bem alto o documento (html) ainda
     ficava 1-2px mais alto que a viewport (arredondamento de vh/borda),
     abrindo uma segunda barra de rolagem nativa atrás da barra real do
     .content-area. Trava o html também, só no desktop (mobile depende de
     rolagem no documento, ver @media 900px acima). */
  html{ overflow-y:hidden; }
}

/* ── TOPBAR ── */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--border);
  box-sizing:border-box;
  padding:0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h-base);
  min-height:var(--topbar-h-base);
  flex-shrink:0;
  position:sticky; top:0; z-index:100;
}
body.tema-claro .topbar{ background:#fff; border-bottom-color:#D8E8F4; }

/* ── WhatsApp: cabeçalho global pode recolher (faixa “Cabeçalho” expande) ── */
.topbar-wpp-peek{
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  flex-shrink:0;
  margin:0;
  padding:3px 12px;
  border:none;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--muted2);
  background:var(--surface);
  transition:background .15s, color .15s;
}
.topbar-wpp-peek:hover{ background:var(--surface2); color:var(--text); }
.topbar-wpp-peek-ico{ flex-shrink:0; opacity:.85; }
body.tema-claro .topbar-wpp-peek{
  background:#fff;
  border-bottom-color:#D8E8F4;
}
body.tema-claro .topbar-wpp-peek:hover{ background:#f0f6ff; color:#4a6a90; }
.btn-wpp-topbar-hide{
  display:none;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  margin:0 0 0 4px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--muted2);
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .15s, color .15s, background .15s;
}
.btn-wpp-topbar-hide:hover{ border-color:var(--accent); color:var(--accent); }
body.tema-claro .btn-wpp-topbar-hide{ background:#f0f6ff; border-color:#d0e4f4; }
body.wpp-screen:not(.wpp-topbar-collapsed) .btn-wpp-topbar-hide{ display:inline-flex; }
body.wpp-screen.wpp-topbar-collapsed .topbar-wpp-peek{ display:flex; }
/* Desktop: recolhe a topbar no fluxo (libera altura) */
@media(min-width:901px){
  body.wpp-screen .topbar{
    transition:opacity .18s ease, max-height .22s ease, padding .22s ease, min-height .22s ease, border-color .22s ease;
  }
  body.wpp-screen.wpp-topbar-collapsed .topbar{
    overflow:hidden;
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    border:none!important;
  }
}

.topbar-back-btn{
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  border:1px solid var(--border); background:var(--surface2); color:var(--muted2);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.topbar-back-btn svg{ display:block; flex-shrink:0; }
.topbar-back-btn:hover{ color:var(--accent); border-color:var(--accent); }
body.tema-claro .topbar-back-btn{ background:#F0F6FF; border-color:#D0E4F4; }

.topbar-title{ font-size:17px; font-weight:700; color:var(--text); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.topbar-clock{
  font-size:13px; font-weight:600; color:var(--muted2);
  background:var(--card); border:1px solid var(--border);
  padding:5px 12px; border-radius:8px; font-variant-numeric:tabular-nums;
}
body.tema-claro .topbar-clock{ background:#F0F6FF; border-color:#D0E4F4; color:#4A6A90; }
/* ── BELL / NOTIFICAÇÕES ── */
.notif-wrap{ position:relative; }
/* Sino, perfil e tema: mesma caixa — evita o avatar “estourar” a altura da topbar */
.topbar-bell,
.btn-tema,
.btn-page-editor,
.btn-dev-mode,
.btn-topbar-user{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  box-sizing:border-box;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.topbar-bell{
  background:var(--card); border:1px solid var(--border);
  font-size:15px; cursor:pointer; color:var(--muted2);
  transition:border-color .2s; position:relative;
}
.topbar-bell svg{ display:block; flex-shrink:0; }
.topbar-bell:hover{ border-color:var(--accent); color:var(--accent); }
/* Pontinho de notificacao no sino (igual ao template novo: dot, nao numero) */
.notif-badge{
  position:absolute; top:-1px; right:-1px; width:8px; height:8px;
  background:var(--orange); border-radius:50%;
  display:none; font-size:0; line-height:0; min-width:0; padding:0;
  border:2px solid var(--surface);
}
.notif-badge.visible{ display:block; }
/* Dropdown do sininho */
.notif-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; width:360px; max-width:90vw;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 8px 32px var(--shadow); z-index:500; display:none;
  animation:fadeIn .15s ease;
}
.notif-dropdown.open{ display:block; }
body.tema-claro .notif-dropdown{ background:#fff; border-color:#D0E0F0; }
.notif-dropdown-header{
  display:flex; align-items:center; padding:12px 16px 10px;
  border-bottom:1px solid var(--border); gap:10px;
}
.notif-dropdown-title{ font-size:14px; font-weight:700; flex:1; color:var(--text); }
.notif-list{ max-height:380px; overflow-y:auto; }
.notif-item{
  display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .15s; align-items:flex-start;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:rgba(var(--primary-rgb),.06); }
.notif-item.nao-lida{ background:rgba(var(--primary-rgb),.05); }
.notif-item.nao-lida .notif-item-titulo{ font-weight:700; }
.notif-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px;
}
.notif-dot.info   { background:var(--accent); }
.notif-dot.warn   { background:var(--warn); }
.notif-dot.danger { background:var(--danger); }
.notif-dot.success{ background:var(--success); }
.notif-item-corpo{ flex:1; min-width:0; }
.notif-item-titulo{ font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-item-desc  { font-size:11px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-item-tempo { font-size:10px; color:var(--muted2); margin-top:3px; }
.notif-dropdown-footer{
  padding:10px 16px; border-top:1px solid var(--border);
  display:flex; gap:8px; justify-content:space-between;
}
/* Notif panel (página completa) */
.notif-filtro-tab{
  padding:6px 14px; border-radius:6px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:12px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.notif-filtro-tab.ativo{ background:var(--accent); border-color:var(--accent); color:#fff; }
.notif-row{
  display:flex; gap:10px; padding:12px 14px; border:1px solid var(--border);
  border-radius:10px; background:var(--card); align-items:flex-start;
  transition:border-color .2s; cursor:pointer;
}
.notif-row:hover{ border-color:var(--accent); }
.notif-row.nao-lida{ border-left:3px solid var(--accent); }
.notif-row.tipo-warn   { border-left:3px solid var(--warn); }
.notif-row.tipo-danger { border-left:3px solid var(--danger); }
.notif-row.tipo-success{ border-left:3px solid var(--success); }
.notif-row.tipo-info   { border-left:3px solid var(--accent); }
body.tema-claro .notif-row{ background:#fff; }
.notif-row-clicavel:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.modal-notif-detalhe-inner{ width:min(620px, 96vw); max-height:85dvh; display:flex; flex-direction:column; }
.modal-notif-detalhe-inner #notif-detalhe-body{ flex:1; min-height:0; overflow-y:auto; }
.notif-detalhe-footer{ flex-shrink:0; flex-wrap:wrap; gap:8px !important; }

/* Barra de preferências (Notificações) */
.notif-prefbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:14px;
}
.notif-prefbar-left,
.notif-prefbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.notif-prefbar-right{ margin-left:auto; }
.notif-pref-title{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.notif-pref-sep{
  width:1px;
  height:18px;
  background:var(--border);
}
.notif-pref-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
  margin:0;
  user-select:none;
}
.notif-pref-item input{ transform:translateY(1px); }
.notif-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition:all .15s;
}
.notif-pill:hover{
  border-color:rgba(74,159,255,.45);
  color:var(--text);
}
.notif-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;height:1px;
}
.notif-pill .notif-pill-ico{ opacity:.9; }
.notif-pill:has(input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.notif-pill:has(input:checked){
  background:rgba(74,159,255,.14);
  border-color:rgba(74,159,255,.35);
  color:var(--accent2);
}
.notif-pill:has(input:checked) .notif-pill-ico{ opacity:1; }
.notif-prefbar-hint{
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
}

/* Notificações: sub-abas (Inbox / Configurações) */
.notif-subtabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.notif-subtab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:6px;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.notif-subtab:hover{ border-color:var(--accent); color:var(--text); }
.notif-subtab.ativo{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
@media(max-width:700px){
  .notif-prefbar-right{ margin-left:0; width:100%; }
  .notif-prefbar-hint{ margin-left:0; width:100%; white-space:normal; }
  .notif-pref-sep{ display:none; }
}

/* Notificações (painel): subsecções alinhadas (Tipos de alerta + Regras Pipefy) */
.notif-subsection{
  margin-top:28px;
  padding-top:24px;
  border-top:2px solid var(--border);
}
.notif-subsection-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.notif-subsection-title{
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--text);
}
.notif-subsection-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  margin:0 0 14px;
  max-width:820px;
}
.notif-subsection-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.notif-pipefy-regras-list{
  min-height:22px;
  margin:0 0 10px;
  font-size:12px;
  line-height:1.4;
  color:var(--text);
}
.notif-pipefy-form{ margin:0; }
.notif-pipefy-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:flex-end;
}
.notif-pipefy-field{
  flex:1 1 130px;
  min-width:0;
}
.notif-pipefy-field--grow{ flex:1 1 160px; }
.notif-pipefy-field label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:3px;
}
.notif-pipefy-field .form-input{
  width:100%;
  margin-top:0;
  padding:6px 8px;
  font-size:13px;
  min-height:36px;
}
.notif-pipefy-field#crm-regra-filtro-campo-row,
.notif-pipefy-field#erp-regra-filtro-campo-row{
  flex:2 1 440px;
}
.notif-pipefy-opt{
  font-weight:500;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.8;
}
.notif-pipefy-submit{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.notif-pipefy-submit-lbl{
  font-size:11px;
  line-height:1.2;
  margin-bottom:3px;
  user-select:none;
  visibility:hidden;
}
.notif-pipefy-submit .btn{ white-space:nowrap; }
@media(max-width:640px){
  .notif-pipefy-submit{
    margin-left:0;
    width:100%;
  }
  .notif-pipefy-submit .btn{ width:100%; }
}

.notif-detalhe-aviso{
  font-size:12px; line-height:1.45; color:var(--muted); background:rgba(var(--primary-rgb),.08);
  border:1px solid rgba(var(--primary-rgb),.2); border-radius:10px; padding:12px 14px; margin-bottom:14px;
}
body.tema-claro .notif-detalhe-aviso{ background:#F0F6FF; border-color:#D0E4F4; }
.notif-detalhe-vazio{ text-align:center; color:var(--muted); padding:20px; font-size:13px; }
.notif-detalhe-generico{ font-size:13px; line-height:1.5; color:var(--text); }
.notif-detalhe-card{
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:12px;
  background:var(--surface);
}
body.tema-claro .notif-detalhe-card{ background:#fafcff; }
.notif-detalhe-card-h{ margin-bottom:8px; }
.notif-detalhe-meta{ font-size:11px; color:var(--muted2); margin-top:4px; }
.notif-detalhe-perg{ font-size:11px; color:var(--muted); margin:8px 0 10px; }
.notif-detalhe-perg div{ font-size:12px; color:var(--text); margin-top:4px; white-space:pre-wrap; word-break:break-word; }
.notif-detalhe-timeline{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
}
.notif-detalhe-timeline li{
  display:flex; gap:10px; align-items:flex-start; font-size:12px; padding:8px 10px;
  border-radius:8px; background:rgba(0,0,0,.04);
}
body.tema-escuro .notif-detalhe-timeline li{ background:rgba(255,255,255,.04); }
.notif-detalhe-timeline li.ev-ok{ border-left:3px solid var(--success); }
.notif-detalhe-timeline li.ev-pend{ border-left:3px solid var(--warn); }
.notif-detalhe-timeline .ev-ico{ flex-shrink:0; width:18px; text-align:center; font-weight:800; opacity:.85; }
.notif-detalhe-timeline .ev-sub{ margin-top:2px; font-size:11px; color:var(--muted); }
.notif-detalhe-timeline .ev-quando{ display:block; margin-top:4px; color:var(--muted2); }
/* Ícone tipo */
.notif-ico{
  width:34px; height:34px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.notif-ico.info   { background:rgba(var(--primary-rgb),.12); }
.notif-ico.warn   { background:rgba(255,194,51,.12); }
.notif-ico.danger { background:rgba(255,68,85,.12); }
.notif-ico.success{ background:rgba(34,201,122,.12); }
/* Config de notificações */
.notif-cfg-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.notif-cfg-item:last-child{ border-bottom:none; }
.notif-cfg-icon{ font-size:20px; width:32px; text-align:center; flex-shrink:0; }
.notif-cfg-info{ flex:1; min-width:0; }
.notif-cfg-label{ font-size:13px; font-weight:600; color:var(--text); }
.notif-cfg-desc { font-size:11px; color:var(--muted); margin-top:2px; }
/* Toggle switch */
.toggle-switch{
  /* `display:inline-block` é essencial: <label> é inline por padrão e ignora
     width/height fora de contexto flex — em <td> da tabela isso fazia o slider
     `position:absolute; inset:0` colapsar para 0×0, mostrando só o thumb. */
  position:relative; display:inline-block; vertical-align:middle;
  width:42px; height:24px; flex-shrink:0; cursor:pointer;
}
.toggle-switch input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.toggle-slider{
  position:absolute; inset:0; background:var(--border); border-radius:12px;
  transition:background-color .2s, box-shadow .2s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.toggle-slider::before{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.toggle-switch input:checked + .toggle-slider{ background:var(--accent); }
.toggle-switch input:checked + .toggle-slider::before{ transform:translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider{ outline:2px solid var(--accent); outline-offset:2px; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.btn-tema{
  background:var(--card); border:1px solid var(--border);
  color:var(--text); font-size:14px;
  cursor:pointer; transition:all .2s;
}
.btn-tema svg{ display:block; flex-shrink:0; }
.btn-tema:hover{ border-color:var(--accent); }
body.tema-claro .btn-tema, body.tema-claro .topbar-bell{ background:#F0F6FF; border-color:#D0E4F4; }

/* ── EDITOR DE PÁGINA (topbar) ── */
.btn-page-editor{
  background:var(--card); border:1px solid var(--border);
  color:var(--muted2); font-size:14px;
  cursor:pointer; transition:all .2s;
}
.btn-page-editor svg{ display:block; flex-shrink:0; }
.btn-page-editor:hover{ border-color:#3b82f6; color:#3b82f6; }
.btn-page-editor.ativo,
body.editor-pagina-ativo .btn-page-editor{
  background:#3b82f6; border-color:#3b82f6; color:#fff;
}
/* Modo editar: cursor de seleção nos elementos do painel */
body.editor-pagina-editando .panel.active,
body.editor-pagina-editando .panel.active * {
  cursor: default;
}
body.editor-pagina-editando .panel.active .__eip-hover {
  cursor: pointer !important;
}

/* ── MODO DESENVOLVEDOR ── */
.btn-dev-mode{
  background:var(--card); border:1px solid var(--border);
  color:var(--muted2); font-size:14px;
  cursor:pointer; transition:all .2s;
}
.btn-dev-mode svg{ display:block; flex-shrink:0; }
.btn-dev-mode:hover{ border-color:#f97316; color:#f97316; }
body.dev-mode .btn-dev-mode{ background:#f97316; border-color:#f97316; color:#fff; }

#dev-mode-bar{
  position:sticky; top:0; z-index:9999;
  background:#f97316;
  color:#fff; font-size:12px; font-weight:600;
  padding:6px 16px;
  display:flex; align-items:center; gap:8px;
  letter-spacing:.03em;
  box-shadow:0 2px 8px rgba(249,115,22,.4);
}

/* Tooltip de origem no modo dev — via JS (CSS destaca o elemento) */
body.dev-mode [data-dev-info]{ cursor:help; outline:1px dashed rgba(249,115,22,.4); }
body.dev-mode [data-dev-info]:hover{ outline:1px solid #f97316; }

#dev-tooltip{
  position:fixed; z-index:99999; pointer-events:none;
  background:#1e293b; color:#f1f5f9;
  border:1px solid #f97316;
  font-size:11px; font-weight:400; line-height:1.6;
  padding:8px 12px; border-radius:7px;
  white-space:pre-wrap; max-width:420px; overflow-wrap:break-word;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  display:none;
}

/* ── Botão "Perfil" na topbar ── */
.btn-topbar-user{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--muted2);
  cursor:pointer;
  transition:all .2s;
}
.btn-topbar-user:hover{ border-color:var(--accent); color:var(--accent); }
body.tema-claro .btn-topbar-user{ background:#F0F6FF; border-color:#D0E4F4; }

.topbar-user-ava{
  width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);border:1px solid var(--accent);
}
.topbar-user-ava img{ width:100%;height:100%;object-fit:cover;display:block; }
.topbar-user-ava span{ font-size:11px;font-weight:800;color:#fff; }

.modal.modal-perfil-rich{
  width:min(560px, 96vw);
  padding:26px;
}
.modal-perfil-rich .modal-title{ margin-bottom:14px; }
.modal-perfil-rich input[type="date"]{
  /* iOS/Safari: date input costuma ficar mais baixo por UI nativa */
  min-height:44px;
  height:44px;
  line-height:22px;
  padding-top:10px;
  padding-bottom:10px;
  -webkit-appearance:none;
  appearance:none;
}
.perfil-hero{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:14px 16px;
  margin:0 -4px 2px;
  border-radius:14px;
  background:rgba(var(--primary-rgb),.10);
  border:1px solid rgba(var(--primary-rgb),.18);
}
body.tema-claro .perfil-hero{
  background:#F0F6FF;
  border-color:#D0E4F4;
}
.perfil-hero-avatar-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.perfil-hero-avatar{
  width:88px;height:88px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--primary-rgb),.14);
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 6px 20px rgba(var(--primary-rgb),.15);
}
body.tema-claro .perfil-hero-avatar{ border-color:#fff; box-shadow:0 6px 18px rgba(var(--primary-rgb),.12); }
.perfil-hero-avatar img{ width:100%;height:100%;object-fit:cover;display:block; }
.perfil-hero-avatar span{ font-size:32px;font-weight:800;color:var(--accent2,#7eb8ff); }
.perfil-hero-meta{ min-width:0;flex:1;padding-top:3px; }
.perfil-hero-nome{
  margin:0 0 4px;font-size:21px;line-height:1.2;font-weight:800;color:var(--text);
  letter-spacing:-.02em;
}
.perfil-hero-cargo{ margin:0 0 4px;font-size:14px;color:var(--muted);font-weight:600; }
.perfil-hero-setor{ margin:0 0 2px;font-size:12px;color:var(--muted2);font-weight:500; }
.perfil-hero-org{ margin:6px 0 0;font-size:11px;color:var(--muted2);opacity:.88;letter-spacing:.02em;text-transform:uppercase; }
.perfil-hero-foto-btn{ white-space:nowrap; }
@media (max-width:480px){
  .perfil-hero{ flex-direction:column;align-items:center;text-align:center; }
  .perfil-hero-meta{ padding-top:0; }
}
.perfil-modal-divider{
  height:1px;background:var(--border);margin:14px 0 18px;border-radius:1px;
}

.perfil-estilo-atlh{ margin:0 0 16px; }
.perfil-estilo-atlh-btn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface2);color:var(--text);cursor:pointer;
  font:inherit;transition:background .15s,border-color .15s;
}
.perfil-estilo-atlh-btn:hover{
  background:var(--surface);border-color:var(--accent2);
}
.perfil-estilo-atlh-ico{ font-size:22px;line-height:1;flex-shrink:0; }
.perfil-estilo-atlh-text{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; }
.perfil-estilo-atlh-title{ font-size:14px;font-weight:700; }
.perfil-estilo-atlh-sub{ font-size:12px;color:var(--muted);line-height:1.35; }
.perfil-estilo-badge{
  flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;text-transform:uppercase;
}
.perfil-estilo-badge--on{
  background:rgba(34,197,94,.15);color:#16a34a;border:1px solid rgba(34,197,94,.35);
}
.perfil-estilo-badge--off{
  background:var(--surface);color:var(--muted2);border:1px solid var(--border);
}
.perfil-estilo-badge--na{
  background:var(--surface);color:var(--muted);border:1px dashed var(--border);
}

/* Perfil: estado 2FA (ícone ao lado do texto Ativo/Inativo) */
.perfil-2fa-status-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:0;
}
.perfil-2fa-status-icon svg{
  display:block;
}
.perfil-2fa-status-icon--ativo{
  color:var(--success);
}
.perfil-2fa-status-icon--inativo{
  color:var(--muted2);
}
body.tema-claro .perfil-2fa-status-icon--inativo{
  color:var(--muted);
}

/* Sessões ativas: ícone SVG no cartão */
.sess-card-ico svg{
  display:block;
}

/* ── Usuários (toolbar + busca) ──────────────────────────────── */
.users-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 16px;
}
/* Painel Usuários: evita selects/busca em linha única largura total (.filtro-sel é width:100% global) */
.users-toolbar-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  max-width:100%;
  flex:0 1 auto;
}
#panel-usuarios .users-toolbar-filters .filtro-sel{
  width:auto;
  max-width:220px;
  min-width:142px;
  height:34px;
  flex:0 1 auto;
  box-sizing:border-box;
}
#panel-usuarios .users-toolbar-filters .users-toolbar-busca{
  flex:0 1 auto;
  width:220px;
  max-width:min(260px, 100%);
  min-width:160px;
  height:34px;
  box-sizing:border-box;
}

/* Painel Bot · Automações — busca + selects compactos (filtro-sel é width:100% por padrão) */
#panel-bot .bot-cmd-toolbar-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}
#panel-bot .bot-cmd-filtro-col{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
}
#panel-bot .bot-cmd-filtro-label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin:0;
}
#panel-bot .bot-cmd-busca{
  width:220px;
  max-width:min(260px, 100%);
  min-width:160px;
  height:34px;
  box-sizing:border-box;
}
#panel-bot .bot-cmd-filtro-sel-wrap{
  max-width:168px;
}
#panel-bot .bot-cmd-filtro-sel-wrap .filtro-sel{
  width:100%;
  max-width:168px;
  min-width:130px;
  height:34px;
  box-sizing:border-box;
}

.modal.modal-bot-cmd{
  max-width:min(1120px,98vw);
  width:min(1120px,98vw);
  padding:0;
  display:flex;
  flex-direction:column;
  max-height:min(92vh,900px);
  overflow:hidden;
  border-radius:18px;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
body.tema-claro .modal.modal-bot-cmd{
  box-shadow:0 24px 70px rgba(15,45,95,.18);
  border-color:#C8D8EE;
}

/* Cabeçalho */
.bot-cmd-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(var(--primary-rgb),.07);
}
.bot-cmd-modal-header .modal-close-btn{
  align-self:flex-start;
  margin-top:2px;
}
.bot-cmd-modal-header-text{ min-width:0; flex:1; }
.bot-cmd-modal-kicker{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.bot-cmd-modal-title-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-bottom:8px;
}
.bot-cmd-modal-h2{
  margin:0;
  font-size:1.35rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.02em;
}
.bot-cmd-chip{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--accent);
}
body.tema-claro .bot-cmd-chip{ background:#f3f7fd; }
.bot-cmd-modal-lead{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
  max-width:52ch;
}

/* Abas — faixa segmentada */
.bot-cmd-tabs-rail{
  padding:0 26px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.12);
}
body.tema-claro .bot-cmd-tabs-rail{ background:rgba(var(--primary-rgb),.04); }

.bot-cmd-modal-tabs{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  padding:12px 0 10px;
}
.bot-cmd-tab{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  border-radius:10px;
  padding:9px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.bot-cmd-tab:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.bot-cmd-tab.ativo{
  color:var(--text);
  background:rgba(var(--primary-rgb),.2);
  border-color:rgba(var(--primary-rgb),.35);
}

.bot-cmd-modal-body-scroll{
  padding:18px 26px 22px;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  min-height:0;
  overscroll-behavior:contain;
  max-width:100%;
  box-sizing:border-box;
}

.bot-cmd-modal-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(280px, .88fr);
  gap:22px;
  align-items:start;
}
@media (max-width: 980px){
  .bot-cmd-modal-grid{ grid-template-columns:1fr; }
}
.bot-cmd-left{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.bot-cmd-right{
  min-width:0;
  position:sticky;
  top:0;
  align-self:start;
}
@media (max-width: 980px){
  .bot-cmd-right{ position:static; }
}

/* Cartões internos (aba Geral) */
.bot-cmd-panel-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px 16px;
  background:rgba(255,255,255,.02);
}
body.tema-claro .bot-cmd-panel-card{ background:#fafbfd; }
.bot-cmd-panel-head{ margin-bottom:12px; }
.bot-cmd-panel-eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted2);
}
.bot-cmd-panel-title{
  margin:2px 0 0;
  font-size:14px;
  font-weight:800;
  color:var(--text);
}
.bot-cmd-label-main{
  font-size:12px;
  font-weight:650;
  color:var(--text);
}
.bot-cmd-input-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }

.bot-cmd-hint-details{
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
}
.bot-cmd-hint-details summary{
  cursor:pointer;
  user-select:none;
  color:var(--muted2);
  font-weight:600;
  list-style:none;
}
.bot-cmd-hint-details summary::-webkit-details-marker{ display:none; }
.bot-cmd-hint-details summary::before{
  content:'ⓘ ';
  opacity:.85;
}
.bot-cmd-hint-details[open] summary{
  margin-bottom:6px;
  color:var(--muted);
}
.bot-cmd-hint-details .bot-cmd-micro{ margin-top:0; }

.modal-footer.bot-cmd-modal-footer{
  margin-top:0;
  padding:14px 26px 18px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.15);
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  row-gap:10px;
  box-sizing:border-box;
  max-width:100%;
}
.modal-footer.bot-cmd-modal-footer .btn{
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
}
body.tema-claro .modal-footer.bot-cmd-modal-footer{
  background:#f6f8fc;
}

#modal-bot-cmd .bot-cmd-left,
#modal-bot-cmd .bot-cmd-right,
#modal-bot-cmd .bot-cmd-two,
#modal-bot-cmd .form-field{
  min-width:0;
}
#modal-bot-cmd .bot-cmd-two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

/* Pipefy · linha título + botão (evita ultrapassar margem em telas estreitas) */
.bot-pipefy-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.bot-pipefy-toolbar-title{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  min-width:0;
  flex:1 1 140px;
}
.bot-pipefy-toolbar-btn{
  flex:0 1 auto;
  max-width:100%;
  white-space:normal;
  text-align:center;
}

.bot-cmd-two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 640px){
  .bot-cmd-two{ grid-template-columns:1fr; }
}

/* Modal comando: evita "corte" de labels/inputs em telas médias */
@media (max-width: 880px){
  .bot-cmd-two{ grid-template-columns:1fr; }
}

.bot-cmd-left .input,
.bot-cmd-left textarea,
.bot-cmd-left select{
  width:100%;
  box-sizing:border-box;
}

.bot-cmd-micro{
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.45;
}

.bot-cmd-bottom{
  margin-top:4px;
  padding:14px 16px;
  border-top:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
body.tema-claro .bot-cmd-bottom{ background:#fafbfd; }
.bot-cmd-active-row{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
}
.bot-cmd-active-row input{
  width:16px;
  height:16px;
  cursor:pointer;
}

/* Prévia WhatsApp — cartão “device” */
.bot-cmd-preview-shell{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:rgba(18,140,126,.1);
}
body.tema-claro .bot-cmd-preview-shell{
  background:#e8f7f4;
}
.bot-cmd-preview-chrome{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  row-gap:8px;
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25);
}
body.tema-claro .bot-cmd-preview-chrome{
  background:#e8eef8;
  border-bottom-color:#C8D8EE;
}
.bot-cmd-preview-chrome-dots{
  display:flex;
  gap:5px;
}
.bot-cmd-preview-chrome-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
}
body.tema-claro .bot-cmd-preview-chrome-dots span{
  background:#c5d4ea;
}
.bot-cmd-preview-chrome-title{
  flex:1;
  min-width:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.bot-cmd-preview-refresh{ flex-shrink:0; }
.bot-cmd-preview-note{
  margin:0;
  padding:12px 14px 0;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.bot-cmd-preview-bubble-wrap{
  padding:12px 14px 16px;
}

.btn-xs{
  padding:6px 9px;
  font-size:11px;
  border-radius:8px;
}
#panel-bot .bot-acao-cell{
  display:inline-flex;
  align-items:center;
  gap:8px;
  vertical-align:middle;
}
#panel-bot .bot-acao-ico{
  display:inline-flex;
  flex-shrink:0;
  color:var(--muted);
}
#panel-bot .bot-acao-ico svg{
  display:block;
}

/* Bot · Automações — tabela: evita quebra de linha em Ação/Ativo */
#panel-bot table thead th:nth-child(2),
#panel-bot table tbody td:nth-child(2){
  white-space:nowrap;
  min-width:120px; /* evita "Respost\na" */
}
#panel-bot table thead th:nth-child(8),
#panel-bot table tbody td:nth-child(8){
  white-space:nowrap;
  width:72px;
  min-width:72px; /* evita coluna Ativo estreita demais */
  text-align:center;
}
#panel-bot table tbody td:nth-child(8) input[type="checkbox"]{
  margin:0 auto;
  display:inline-block;
}

/* Coluna Ações: permite quebra para botões não ultrapassarem a margem da tabela */
#panel-bot .table-wrap thead th:last-child{
  white-space:nowrap;
}
#panel-bot .table-wrap tbody td:last-child{
  white-space:normal;
  text-align:center;
  vertical-align:middle;
  padding:8px 10px;
  box-sizing:border-box;
}
#panel-bot .table-wrap tbody td:last-child .btn{
  margin:3px;
  vertical-align:middle;
}

/* Bot · Automações — visual de falhas por comando */
#panel-bot tr.bot-cmd-row-err{
  border-left:3px solid var(--danger);
}
#panel-bot tr.bot-cmd-row-err td{
  background:rgba(255,68,85,.035);
}
body.tema-claro #panel-bot tr.bot-cmd-row-err td{
  background:rgba(214,48,69,.04);
}

/* Bot · Automações — cards + logs de execuções */
#panel-bot .bot-health-card{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin: 10px 0 14px;
  background: var(--card);
}
#panel-bot .bot-health-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background: var(--hover);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
#panel-bot .bot-health-title{ font-size:14px; font-weight:800; color:var(--text); }
#panel-bot .bot-health-sub{ font-size:12px; color:var(--muted); margin-top:2px; max-width:700px; }
#panel-bot .bot-health-filtros{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
#panel-bot .bot-health-date, #panel-bot .bot-health-busca{ display:flex; flex-direction:column; gap:4px; }
#panel-bot .bot-health-date label, #panel-bot .bot-health-busca label{ font-size:11px; color:var(--muted2); }
#panel-bot .bot-health-date input, #panel-bot .bot-health-busca input{
  height:34px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 0 10px;
  outline:none;
  min-width: 140px;
}
#panel-bot .bot-health-busca input{ min-width: 190px; }
#panel-bot .bot-health-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  padding: 12px 14px;
}
#panel-bot .bot-health-kpi{
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--card);
  text-align:left;
  padding:12px 12px;
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
#panel-bot .bot-health-kpi:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
#panel-bot .bot-health-kpi.active{ box-shadow: 0 0 0 2px rgba(91,145,255,.18) inset; border-color: rgba(91,145,255,.35); }
#panel-bot .bot-health-kpi.ok.active{ box-shadow: 0 0 0 2px rgba(46,213,115,.16) inset; border-color: rgba(46,213,115,.35); }
#panel-bot .bot-health-kpi.err.active{ box-shadow: 0 0 0 2px rgba(255,68,85,.16) inset; border-color: rgba(255,68,85,.35); }
#panel-bot .bot-health-kpi-top{ font-size:11px; color:var(--muted2); }
#panel-bot .bot-health-kpi-val{ font-size:22px; font-weight:900; color:var(--text); margin-top:2px; }
#panel-bot .bot-health-kpi-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
#panel-bot .bot-health-kpi.ok .bot-health-kpi-top{ color: rgba(46,213,115,.95); }
#panel-bot .bot-health-kpi.err .bot-health-kpi-top{ color: rgba(255,68,85,.95); }
#panel-bot .bot-health-table{ margin: 0 14px 12px; }
#panel-bot .bot-health-table table thead th{ font-size:12px; }
#panel-bot .bot-health-table table tbody td{ font-size:12px; }
#panel-bot .bot-log-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--border);
  background: var(--hover);
  white-space:nowrap;
}
#panel-bot .bot-log-badge.ok{ border-color: rgba(46,213,115,.35); color: rgba(46,213,115,.95); background: rgba(46,213,115,.06); }
#panel-bot .bot-log-badge.err{ border-color: rgba(255,68,85,.35); color: rgba(255,68,85,.95); background: rgba(255,68,85,.06); }
#panel-bot .bot-health-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 14px 12px;
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.01);
}
#panel-bot .bot-health-foot-left{
  font-size:11px;
  color: var(--muted);
}
@media (max-width: 860px){
  #panel-bot .bot-health-cards{ grid-template-columns: 1fr; }
  #panel-bot .bot-health-busca input{ min-width: 140px; width: 100%; }
}

/* Bot · Automações — CRM (modal): sem tabela/scroll; layout compacto */
#bot-cmd-crm-fields-mount .table-wrap{ overflow:visible !important; }
.bot-crm-map-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding:10px 0;
  border-top:1px solid var(--border);
}
.bot-crm-map-row:first-child{ border-top:none; padding-top:0; }
.bot-crm-map-left{ min-width:0; flex:1; }
.bot-crm-map-ci{ font-size:12px; font-weight:800; color:var(--text); }
.bot-crm-map-label{ font-size:11px; color:var(--muted); margin-top:4px; line-height:1.35; }
.bot-crm-map-right{ width:min(420px, 52%); min-width:240px; }
.bot-crm-map-small{ display:block; font-size:11px; font-weight:700; color:var(--muted); margin:0 0 6px; }
.bot-crm-map-sel{ width:100%; box-sizing:border-box; }
@media (max-width: 760px){
  .bot-crm-map-row{ flex-direction:column; }
  .bot-crm-map-right{ width:100%; min-width:0; }
}

/* ── Bot · Automações — Replicação avançada ─────────────────── */
#panel-bot .bot-repl-card{
  margin-bottom:16px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
#panel-bot .bot-repl-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
#panel-bot .bot-repl-title{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.2px;
}
#panel-bot .bot-repl-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.45;
  max-width:820px;
}
#panel-bot .bot-repl-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
#panel-bot .bot-repl-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:860px){
  #panel-bot .bot-repl-grid{ grid-template-columns:1fr; }
}
#panel-bot .bot-repl-box{
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  padding:12px 12px;
  min-width:0;
}
#panel-bot .bot-repl-box-title{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  margin-bottom:8px;
}
#panel-bot .bot-repl-toggle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  user-select:none;
  margin:0;
}
#panel-bot .bot-repl-toggle input{
  margin-top:3px;
  width:18px;
  height:18px;
  flex-shrink:0;
}
#panel-bot .bot-repl-muted{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}
#panel-bot .bot-repl-hint{
  font-size:11px;
  color:var(--muted);
  margin:10px 0 0 28px;
  line-height:1.45;
}
#panel-bot .bot-repl-opts{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}
#panel-bot .bot-repl-opts-title{
  font-size:11px;
  font-weight:800;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:0;
}
#panel-bot .bot-repl-opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  margin:0;
  font-size:12px;
  color:var(--text);
  line-height:1.4;
}
#panel-bot .bot-repl-opt-row .bot-repl-opt{ margin:0; }
#panel-bot .bot-repl-opt-row > .bot-repl-opt > span > .bot-repl-muted{
  color:rgba(186,205,235,.88);
  font-weight:500;
}
#panel-bot .bot-repl-opt input{
  width:16px;
  height:16px;
  margin-top:2px;
  flex-shrink:0;
}
#panel-bot .bot-repl-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
#panel-bot .bot-repl-status{
  font-size:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--muted);
}
#panel-bot .bot-repl-status.ok{
  border-color:rgba(34,201,122,.35);
  color:var(--success);
  background:rgba(34,201,122,.06);
}
#panel-bot .bot-repl-status.err{
  border-color:rgba(255,68,85,.35);
  color:var(--danger);
  background:rgba(255,68,85,.06);
}
#panel-bot .bot-repl-mini{
  font-size:11px;
  color:var(--muted);
}
#panel-bot .bot-repl-panel-hidden{
  display:none !important;
}

/* Bot · abas principais (mesmo ritmo que .com-tabs / Comercial) */
#panel-bot .bot-painel-tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--border);
  padding:0;
  margin:4px 0 18px;
  overflow-x:auto;
  scrollbar-width:none;
}
#panel-bot .bot-painel-tabs::-webkit-scrollbar{ display:none; }
#panel-bot .bot-painel-tab{
  padding:8px 18px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .15s, border-color .15s;
  -webkit-font-smoothing:antialiased;
}
#panel-bot .bot-painel-tab:hover{ color:var(--text); }
#panel-bot .bot-painel-tab.active{
  color:var(--text);
  border-bottom-color:var(--accent);
}
@media(max-width:640px){
  #panel-bot .bot-painel-tab{ padding:8px 14px; font-size:13px; }
}

#panel-bot .bot-repl-launch{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
#panel-bot .bot-repl-launch-hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  max-width:min(640px,100%);
}

/* Bot · Automações — replicação (cabeçalho + ações por parâmetro) */
#panel-bot .bot-repl-head-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: min(620px, 100%);
  flex: 1;
}
#panel-bot .bot-repl-body{ padding-top: 2px; }
#panel-bot .bot-repl-opt-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  min-height:40px;
}
#panel-bot .bot-repl-mini-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink:0;
  margin:2px 0;
}
#panel-bot .bot-repl-mini-btn:hover{ color: var(--text); border-color: rgba(255,255,255,.16); }
@media (max-width: 860px){
  #panel-bot .bot-repl-head-info{ min-width: 0; }
  #panel-bot .bot-repl-opt-row{ align-items:flex-start; }
  #panel-bot .bot-repl-mini-btn{ margin-top: 2px; }
}
.bot-pipefy-section{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin-top:12px;
  background:rgba(255,255,255,.02);
}
.bot-pipefy-head-grid{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  align-items:end;
}
@media (max-width:520px){
  .bot-pipefy-head-grid{
    grid-template-columns:1fr;
  }
}
.bot-pipefy-micro-hint{
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
  margin:6px 0 0;
}
.bot-pipefy-fields-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px 14px;
}
.bot-pipefy-template-area{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.45;
}
details.bot-pipefy-details summary{
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  color:var(--accent2);
}

.users-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  min-width:180px;
  max-width:260px;
  min-height:30px;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
body.tema-claro .users-search{
  background:#f0f6ff;
  border-color:#cfe0f4;
}
.users-search:focus-within{
  border-color:rgba(74,159,255,.55);
  box-shadow:0 0 0 2px rgba(74,159,255,.12);
}
.users-search-ico{
  flex-shrink:0;
  opacity:.55;
  color:var(--muted2);
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.users-search-ico svg{ width:14px; height:14px; }
.users-search input{
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-family:inherit;
  width:100%;
  padding:2px 0;
}
.users-search input::placeholder{ color:var(--muted); opacity:.85; }
.user-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.user-miniava{
  width:34px;height:34px;border-radius:12px;
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.18);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.user-miniava img{ width:100%;height:100%;object-fit:cover;display:block; }
.user-miniava span{ font-size:14px;color:var(--accent2);font-weight:900; }
.user-main{ min-width:0; }
.user-name{ font-weight:700;font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-sub{ font-size:11px;color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Modal: edição de usuário (estilo CRM) ───────────────────── */
.modal-user-edit{ padding:18px 18px 14px; }
/* Sobrescreve .modal { width: min(520px,…) } — evita barra de rolagem horizontal desnecessária no editor */
.modal.modal-user-edit{
  width:min(840px, 96vw);
  max-width:min(840px, 96vw);
}
.modal.modal-equipe{
  width:min(1080px, 96vw);
  max-width:min(1080px, 96vw);
}
.user-edit-tabs{
  display:flex;
  gap:18px;
  padding:0 6px 10px;
  margin:6px 0 10px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.user-edit-tab{
  background:none;
  border:none;
  cursor:pointer;
  padding:8px 4px;
  font-size:13px;
  color:var(--muted);
  border-bottom:2px solid transparent;
  margin-bottom:-11px;
  transition:.15s;
}
.user-edit-tab.ativo{ color:var(--accent2); border-bottom-color:var(--accent); font-weight:700; }
.user-edit-pane{ display:none; }
.user-edit-pane.ativo{ display:block; }
.user-edit-wrap{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:14px;
  align-items:start;
  min-height:0;
}
.user-edit-right{
  padding-left:16px;
  border-left:1px solid var(--border);
}
.user-edit-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
}
.user-edit-ava{
  width:88px;height:88px;border-radius:44px;
  margin:0 auto;
  background:rgba(var(--primary-rgb),.12);
  border:2px solid rgba(var(--primary-rgb),.2);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.user-edit-ava img{ width:100%;height:100%;object-fit:cover;display:block; }
.user-edit-ava span{ display:flex;align-items:center;justify-content:center;color:rgba(74,159,255,.55); }
.user-edit-ava span svg{ opacity:.88; }
.user-edit-nome{ margin-top:10px; font-weight:800; font-size:14px; }
.user-edit-mail{ margin-top:6px; font-size:12px; color:var(--muted); word-break:break-word; }
.user-edit-pill{
  display:inline-block;
  margin-top:10px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(74,159,255,.14);
  border:1px solid rgba(74,159,255,.25);
  color:var(--accent2);
  font-size:12px;
  font-weight:700;
}
@media(max-width:900px){
  .user-edit-wrap{ grid-template-columns:1fr; }
  .user-edit-right{ border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:14px; }
}

/* ── Aba Permissões (usuário) ────────────────────────────────── */
.user-perm-wrap{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:18px;
  padding:12px 6px 0;
}
.user-perm-left{
  border-right:1px solid var(--border);
  padding-right:18px;
}
.user-perm-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  max-width:360px;
}
.user-perm-list{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.user-perm-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.user-perm-item:last-child{ border-bottom:none; }
.user-perm-name{ font-weight:700; font-size:13px; }
.user-perm-desc{ font-size:11px; color:var(--muted); margin-top:2px; }
.user-perm-item .toggle-switch{ opacity:.8; pointer-events:none; }
@media(max-width:900px){
  .user-perm-wrap{ grid-template-columns:1fr; }
  .user-perm-left{ border-right:none; padding-right:0; border-bottom:1px solid var(--border); padding-bottom:14px; }
}
/* ── Restrições por Usuário ─────────────────────────────────── */
.restric-wrap{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.restric-section{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
  overflow:hidden;
}
.restric-section--warn{
  border-color:rgba(255,165,0,.35);
  background:rgba(255,140,0,.04);
}
.restric-section--warn .restric-section-title{
  color:var(--warning,#d97706);
  background:rgba(255,140,0,.07);
  border-bottom-color:rgba(255,165,0,.25);
}
.restric-name--warn{ color:var(--warning,#d97706) !important; }
.restric-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.restric-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.restric-row:last-child{ border-bottom:none; }
.restric-row-label{ min-width:0; flex:1; }
.restric-name{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:2px;
}
.restric-desc{
  display:block;
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
.restric-sub-row{
  padding:8px 14px 12px;
  border-bottom:1px solid var(--border);
}
.restric-sub-label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.restric-input{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
}
.restric-date-input{
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
  flex-shrink:0;
}
.restric-horario-row{
  display:flex;
  gap:14px;
  padding:12px 14px 0;
}
.restric-time-field{
  flex:1;
  min-width:0;
}
.restric-time-field input[type="time"]{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
}
.restric-dias-wrap{
  padding:12px 14px 14px;
}
.restric-dias-grid{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.restric-dia-btn{
  position:relative;
  cursor:pointer;
}
.restric-dia-btn input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.restric-dia-btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:32px;
  padding:0 8px;
  border:1.5px solid var(--border);
  border-radius:7px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:var(--bg);
  transition:all .15s;
  cursor:pointer;
  user-select:none;
}
.restric-dia-btn input:checked + span{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.restric-dia-btn:hover span{
  border-color:var(--primary);
  color:var(--primary);
}
.restric-dia-btn input:checked + span:hover{
  color:#fff;
}
/* ── Config (Preferências estilo app) ───────────────────────── */
.cfg-pref-wrap{ margin-top:26px; }
.cfg-pref-title{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  margin:6px 0 12px;
}
.cfg-pref-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.cfg-pref-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px;
  border-bottom:1px solid var(--border);
}
.cfg-pref-item:last-child{ border-bottom:none; }
.cfg-pref-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1;
}
.cfg-pref-ico{
  width:26px;
  text-align:center;
  font-size:16px;
  flex-shrink:0;
  opacity:.9;
}
.cfg-pref-txt{
  font-size:13px;
  color:var(--text);
  line-height:1.35;
  min-width:0;
}
.cfg-pref-hint{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
}

/* ── Equipes: modal de edição (layout 2 colunas) ─────────────── */
.modal-equipe{ padding:22px 22px 16px; }
.equipe-edit-wrap{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap:24px;
  margin-top:12px;
  height:min(420px, 58vh);
}
.equipe-edit-left{ padding-right:14px; overflow-y:auto; min-height:0; }
.equipe-edit-right{
  border-left:1px solid var(--border);
  padding-left:20px;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}
.equipe-part-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.equipe-part-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--surface);
  min-width:180px;
  flex-shrink:0;
}
.equipe-part-search input{
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:12px;
  width:100%;
}
.equipe-part-headrow{
  display:grid;
  grid-template-columns: 40px 1fr 100px 100px;
  gap:14px;
  font-size:11px;
  color:var(--muted);
  padding:6px 4px 10px;
  border-bottom:1px solid var(--border);
}
.equipe-part-list{
  overflow-x:hidden;
  overflow-y:auto;
  flex:1;
  min-height:0;
  padding-top:4px;
}
.equipe-part-row{
  display:grid;
  grid-template-columns: 40px 1fr 100px 100px;
  gap:14px;
  align-items:center;
  padding:12px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.tema-claro .equipe-part-row{ border-bottom-color:rgba(13,43,94,.08); }
.equipe-uava{
  width:34px;height:34px;border-radius:12px;
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.18);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.equipe-uava img{ width:100%;height:100%;object-fit:cover;display:block; }
.equipe-uava span{ font-size:14px;color:var(--accent2);font-weight:900; }
.equipe-uname{ font-weight:700; font-size:12px; min-width:0; }
.equipe-uemail{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.equipe-star{
  background:none;
  border:none;
  cursor:pointer;
  line-height:1;
  color:rgba(255,255,255,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px;
}
.equipe-star svg{ fill:none; }
body.tema-claro .equipe-star{ color:rgba(13,43,94,.35); }
.equipe-star.ativo{ color: #F5C400; }
.equipe-star.ativo svg{ fill:#F5C400; }
.equipe-part-toggle{ display:flex; justify-content:center; }
@media(max-width:900px){
  .equipe-edit-wrap{ grid-template-columns:1fr; height:auto; max-height:none; }
  .equipe-edit-left{ overflow-y:visible; }
  .equipe-edit-right{ border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:14px; min-height:260px; max-height:50vh; }
  .equipe-part-search{ min-width:0; flex:1; }
}

/* ── PANELS ── */
.content-area{ flex:1; background:var(--bg); padding:var(--panel-pad); display:flex; flex-direction:column; min-height:0; }
body.tema-claro .content-area{ background:#EEF2FA; }
.panel{ display:none; }
.panel.active{ display:block; flex:1; min-height:0; }

/* Desktop: só a área de conteúdo rola (rolagem única, interna); o body
   nunca rola, então não sobra fundo vazio quando o conteúdo é curto. */
body.go-app-shell{ overflow-y:hidden; }

/* Gestor IA — ocupa 100% da content-area sem padding */
#panel-gestor-ia.active{
  display:flex; flex-direction:column;
  position:fixed;
  top:var(--topbar-h-base); left:240px;
  width:calc(100% - 240px);
  height:calc(100dvh - var(--topbar-h-base));
  z-index:10;
  overflow:hidden;
}
.app-main.sidebar-collapsed #panel-gestor-ia.active{
  left:64px; width:calc(100% - 64px);
}
#panel-gestor-ia .panel-inner{
  display:flex; flex-direction:column; flex:1; min-height:0;
  padding:0 !important; border-radius:0; border:none; background:var(--bg);
}
.panel-inner{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px;
}
body.tema-claro .panel-inner{ background:#fff; border-color:#D0E0F0; }

/* ── Painel Início: botão Personalizar (por cima do hero se houver overlap) ── */
#panel-inicio .inicio-widgets-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:4px;
  margin-bottom:12px;
  position:relative;
  z-index:3;
}
#panel-inicio .inicio-btn-widgets{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 12px;
  font-size:11px;
  color:var(--muted);
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
  pointer-events:auto;
}
#panel-inicio .inicio-btn-widgets:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(var(--primary-rgb),.06);
}
body.tema-claro #panel-inicio .inicio-btn-widgets:hover{
  background:rgba(26,111,212,.08);
}

/* ── HERO BANNER (painel início) ── */
.hero-banner{
  background:#0A1628;
  border-radius:var(--radius); padding:28px 32px; margin-bottom:24px;
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  max-width:100%; box-sizing:border-box;
  z-index:0;
  background-size:cover;
  background-position:center;
}
/* Tema claro: gradiente mais suave e harmonioso */
body.tema-claro .hero-banner {
  background:#1A3A6E;
  border:1px solid rgba(30,79,140,.25);
  box-shadow:0 4px 24px rgba(13,43,94,.15);
}
body.tema-claro .hero-banner::after {
  background:rgba(232,123,0,.30);
}
body.tema-claro .hero-banner .hero-eyebrow { color:#F5C400; }
body.tema-claro .hero-banner .hero-title   { color:#ffffff; }
body.tema-claro .hero-banner .hero-sub     { color:rgba(255,255,255,.75); }
body.tema-claro .hero-banner .hero-pill    {
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
/* Overlay escuro quando há imagem — garante legibilidade do texto */
.hero-banner.has-img::before {
  content:'';
  position:absolute; inset:0;
  background:rgba(8,14,26,.82);
  z-index:0;
  border-radius:inherit;
}
.hero-banner > * { position:relative; z-index:1; }
.hero-banner::after{
  content:''; position:absolute; right:-40px; top:-40px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(232,123,0,.25);
  z-index:0;
}
/* Botões de ação do banner */
.hero-banner-actions {
  position:absolute;
  bottom:12px; right:14px;
  display:flex; gap:6px;
  opacity:0;
  transition:opacity .2s;
  z-index:2;
}
.hero-banner:hover .hero-banner-actions { opacity:1; }
.hero-banner-btn {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:6px; cursor:pointer;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15);
  color:#e2e8f0; backdrop-filter:blur(4px);
  transition:background .15s, border-color .15s;
}
.hero-banner-btn:hover { background:rgba(99,102,241,.5); border-color:#6366f1; }
.hero-banner-btn--remove:hover { background:rgba(239,68,68,.4); border-color:#ef4444; }
.hero-eyebrow{ font-size:11px; font-weight:700; color:var(--orange); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.hero-title{ font-size:26px; font-weight:800; color:#fff; margin-bottom:6px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.3px; overflow-wrap:anywhere; word-break:break-word; }
.hero-sub{ font-size:13px; color:rgba(255,255,255,.55); margin-bottom:18px; overflow-wrap:anywhere; }
.hero-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.hero-pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:20px; font-size:12px; font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75);
}
.hero-pill .dot{ width:7px; height:7px; border-radius:50%; }
.dot-green{ background:#22C97A; }
.dot-blue{ background:#4A9FFF; }
.dot-warn{ background:#FFC233; }

/* ── TÍTULOS ── */
.panel-title{ font-size:17px; font-weight:700; color:var(--text); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.panel-title .pt-icon{ width:32px; height:32px; border-radius:8px; background:rgba(var(--primary-rgb),.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.panel-title .pt-icon svg{ width:17px; height:17px; color:var(--accent); stroke:var(--accent); }
body.tema-claro .panel-title .pt-icon{ background:rgba(26,111,212,.10); }

/* O nome do módulo já está em #topbar-title — não repetir logo abaixo */
#panels-container .panel-inner > .panel-title:first-child,
#panel-ranking .panel-inner > div:first-child,
#panel-ia .panel-inner > div:first-child .panel-title{
  display:none !important;
}

/* ── CARDS STAT ── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap:14px; margin-bottom:24px;
  width:100%; max-width:100%; box-sizing:border-box;
}
.stat{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; position:relative; overflow:hidden;
  border-top:3px solid var(--stat-color, var(--accent));
  transition:transform .2s, box-shadow .2s;
  min-width:0;
  box-sizing:border-box;
}
.stat:hover{ transform:translateY(-2px); box-shadow:0 8px 24px var(--shadow); }
.stat.stat-click{ cursor:pointer; }
.stat.stat-click:active{ transform:translateY(0px); }
.stat-icon{
  width:36px; height:36px; border-radius:9px; margin-bottom:14px;
  background:var(--stat-bg, rgba(var(--primary-rgb),.15));
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.stat-val{ font-size:30px; font-weight:800; line-height:1; color:var(--text); }
.stat-label{ font-size:12px; color:var(--muted); margin-top:5px; font-weight:600; overflow-wrap:anywhere; hyphens:auto; }
.stat-trend{
  display:inline-flex; align-items:center; gap:4px; margin-top:8px;
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;
}
.stat-trend.up{ background:rgba(34,201,122,.15); color:#22C97A; }
.stat-trend.down{ background:rgba(255,68,85,.15); color:#FF4455; }
.stat-trend.warn{ background:rgba(255,194,51,.15); color:#FFC233; }
body.tema-claro .stat{ background:#fff; box-shadow:0 2px 8px rgba(13,43,94,.07); }

/* ── BOTÃO XS ── */
.btn-xs{ padding:4px 8px; font-size:11px; }

/* ── Tabelas: coluna de ações (editar/excluir) ───────────────── */
.tbl-acoes{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
  /* nunca quebrar linha: não pode aumentar altura da row para caber botões */
  flex-wrap:nowrap;
  max-width:100%;
}
.tbl-acoes .btn{ min-width:32px; }
.tbl-acoes .btn.icon-only{
  /* botões compactos e consistentes */
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tbl-acoes .btn.icon-only svg{ width:14px; height:14px; }

/* Tarefas: ícones mais legíveis na ação "Editar" (sem mudar outras tabelas) */
.tarefa-table .tbl-acoes .btn.icon-only{
  width:28px;
  min-width:28px;
  height:28px;
}
.tarefa-table .tbl-acoes .btn.icon-only svg{
  width:14px;
  height:14px;
}

/* ── Tabela de Tarefas (modo lista) — responsividade por coluna ─ */
.tarefa-table th:nth-child(4),
.tarefa-table td:nth-child(4){
  width:110px;
  text-align:center;
}
.tarefa-table th:nth-child(5),
.tarefa-table td:nth-child(5){
  width:92px; /* Status menor para sobrar espaço às ações */
}
.tarefa-table th:last-child,
.tarefa-table td:last-child{
  width:230px; /* uma linha de ícones; ver nowrap abaixo */
}

/* Tarefas (lista): ações numa única linha (sem quebra para 2.ª linha) */
.tarefa-table .tbl-acoes{
  gap:4px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
}
.tarefa-table td.tbl-acoes{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  vertical-align:middle;
}
.tarefa-table td.tbl-acoes::-webkit-scrollbar{
  height:4px;
}
.tarefa-table td.tbl-acoes::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:4px;
}

/* ── HAMBURGER ── */
.btn-hamburger{
  display:none; background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:7px 9px; cursor:pointer; color:var(--text);
  flex-direction:column; gap:4px; align-items:center; justify-content:center;
  transition:border-color .2s;
}
.btn-hamburger:hover{ border-color:var(--accent); }
.btn-hamburger span{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:all .25s; }
body.tema-claro .btn-hamburger{ background:#F0F6FF; border-color:#D0E4F4; }

/* ── OVERLAY SIDEBAR (mobile) ── */
#sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:199; backdrop-filter:blur(2px);
}
#sidebar-overlay.visible{ display:block; }

/* ── SIDEBAR COLAPSÁVEL (desktop) ── */
.sidebar{ transition:width .25s ease, transform .3s; }
.sidebar.collapsed{
  width:64px; min-width:64px; max-width:64px;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Itens de texto ocultos quando colapsado */
.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-brand-sub,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-role,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-sector-label,
.sidebar.collapsed .nav-sub-item-label,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .btn-logout span,
.sidebar.collapsed .sidebar-foot-meta,
.sidebar.collapsed .sidebar-foot-toggle,
.sidebar.collapsed .sidebar-foot-menu-wrap,
.sidebar.collapsed .sidebar-user-extra{ display:none !important; }

/* Remove o bloco de texto do flow para não interferir no layout da brand */
.sidebar.collapsed .sidebar-brand-text{ display:none; }

/* Brand area colapsada: ícone + botão expandir empilhados (sem sobrepor o logo) */
.sidebar.collapsed .sidebar-brand{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 4px 8px;
  position:relative;
}
.sidebar.collapsed .sidebar-brand-icon{ margin:0; width:40px; height:40px; padding:4px; flex-shrink:0; }

/* Botão de colapso: abaixo do logo, centralizado */
.sidebar.collapsed .btn-collapse-sidebar{
  position:static;
  margin:0;
  transform:scaleX(-1);
  width:22px;
  height:22px;
  padding:2px;
  border-radius:6px;
  background:var(--card);
  border:1px solid var(--border);
  flex-shrink:0;
}

.sidebar.collapsed .sidebar-nav{ overflow-x:hidden; }
.sidebar.collapsed .sidebar-nav-scroll{
  padding:8px 4px 10px;
  box-sizing:border-box;
  overflow-x:hidden;
  width:100%;
}
.sidebar.collapsed .nav-group,
.sidebar.collapsed .nav-sector{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.sidebar.collapsed .sidebar-user{ justify-content:center; padding:8px 4px; }
.sidebar.collapsed .nav-item{
  justify-content:center;
  padding:10px 4px;
  box-sizing:border-box;
  width:100%;
  gap:0;
}
.sidebar.collapsed .nav-item svg{ margin:0; flex-shrink:0; }
.sidebar.collapsed .nav-sector-btn{
  justify-content:center;
  align-items:center;
  padding:10px 4px;
  box-sizing:border-box;
  width:100%;
  gap:0;
}
.sidebar.collapsed .nav-sector-icon{ margin:0; flex-shrink:0; }
.sidebar.collapsed .btn-logout{
  justify-content:center;
  padding:8px 6px;
  min-height:34px;
}
.sidebar.collapsed .btn-logout svg{ width:16px; height:16px; }
.sidebar.collapsed .sidebar-foot{ justify-content:center; padding:10px 4px; }
.sidebar.collapsed .sidebar-footer{ padding:0; }
.sidebar.collapsed .nav-group-label{ display:none; }

/* Área principal acompanha a largura da sidebar */
.app-main{ transition:margin-left .25s ease, width .25s ease; }
.app-main.sidebar-collapsed{ margin-left:64px; width:calc(100% - 64px); }

/* Botão colapsar sidebar (estado expandido) */
.btn-collapse-sidebar{
  background:none; border:none; cursor:pointer; color:var(--muted2);
  padding:6px 8px; border-radius:6px; transition:background .2s, color .2s;
  margin-left:auto; display:flex; align-items:center; flex-shrink:0;
}
.btn-collapse-sidebar:hover{ color:var(--accent); background:rgba(var(--primary-rgb),.1); }

/* Rótulos de grupo vazios ficam ocultos */
.nav-group-label:empty{ display:none !important; padding:0; }

/* ── RESPONSIVO SIDEBAR ── */
@media(max-width:900px){
  :root{
    /* Mobile: gutter mais perceptível nas laterais (+ safe-area) */
    --page-pad: max(16px, 4vw);
    /* Mobile: strip "Cabeçalho" — alvo de toque confortável mas compacto */
    --topbar-wpp-peek-strip:30px;
  }
  /* ── Shell tipo app (só quando logado: body.go-app-shell)
     viewport = tela do aparelho; rolagem só na vertical, até o fim do conteúdo. ── */
  html, body{
    overflow-x:hidden;
    overscroll-behavior:none;  /* bloqueia pull-to-refresh e bounce em todos os eixos */
    touch-action:pan-y;
  }
  /* iOS/Safari: "clip" reduz a chance de arrastar lateral quando algum filho estoura */
  body{ max-width:100vw; overflow-x:clip; }

  /* 100svh: altura “pequena” com barra do Safari visível — evita o cabeçalho ficar fora da
     área útil no primeiro paint (100dvh + flex costumava cortar até haver toque/resize). */
  body.go-app-shell{
    min-height:100svh;
    min-height:100dvh;
    height:auto;
    max-height:none;
    display:flex;
    flex-direction:column;
    /* Mobile: rolagem no documento (iOS quebra scroll em filho flex + overflow:hidden) */
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:none;
    touch-action:pan-y;
    width:100%;
    max-width:100vw;
  }
  body.go-app-shell #app-screen{
    flex:1 0 auto;
    flex-direction:column;
    min-height:0;
    overflow:visible;
    width:100%;
    max-width:100vw;
  }
  body.go-app-shell .app-layout{
    flex:1 0 auto;
    min-height:0;
    overflow:visible;
    align-items:stretch;
  }
  body.go-app-shell .app-main{
    flex:1 0 auto;
    flex-direction:column;
    min-height:0!important;
    max-height:none;
    overflow:visible;
    width:100%;
    padding-top:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px));
    box-sizing:border-box;
  }
  body.go-app-shell #inplace-edit-bar{
    flex-shrink:0;
  }
  body.go-app-shell .topbar{
    flex-shrink:0;
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    z-index:150;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:max(14px, env(safe-area-inset-left, 0px));
    padding-right:max(14px, env(safe-area-inset-right, 0px));
    height:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px));
    min-height:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px));
    transition:transform .22s ease, opacity .2s ease, visibility .2s ease;
  }
  /* Cabeçalho: título pode encolher (evita empurrar ícones para fora da tela) */
  body.go-app-shell .topbar > div:first-child{
    min-width:0;
    flex:1;
  }
  body.go-app-shell .topbar-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.go-app-shell .topbar-right{ flex-shrink:0; }
  /* WhatsApp + cabeçalho recolhido: menos padding; topbar desliza para fora (mantém dimensões p/ transição) */
  body.go-app-shell.wpp-screen.wpp-topbar-collapsed .app-main{
    padding-top:calc(var(--topbar-wpp-peek-strip) + env(safe-area-inset-top, 0px));
  }
  body.go-app-shell.wpp-screen.wpp-topbar-collapsed .topbar{
    transform:translateY(calc(-100% - 6px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  body.go-app-shell.wpp-screen:not(.wpp-topbar-collapsed) .topbar{
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  body.go-app-shell.wpp-screen.wpp-topbar-collapsed .topbar-wpp-peek{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:230; /* acima do painel WhatsApp mobile (z-index:220) */
    padding-top:calc(5px + env(safe-area-inset-top, 0px));
    padding-bottom:5px;
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px));
    min-height:calc(var(--topbar-wpp-peek-strip) + env(safe-area-inset-top, 0px));
    box-sizing:border-box;
    border-bottom:1px solid var(--border);
    font-size:12px;
    font-weight:600;
    gap:6px;
    touch-action:manipulation;
  }
  /* Mobile: painel WhatsApp deve começar abaixo do strip de "Cabeçalho" quando recolhido */
  body.go-app-shell.wpp-screen.wpp-topbar-collapsed #panel-whatsapp.panel.active{
    top:calc(var(--topbar-wpp-peek-strip) + env(safe-area-inset-top, 0px));
  }
  body.go-app-shell .content-area{
    flex:1 0 auto;
    min-height:auto;
    min-width:0;
    overflow:visible;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:none;
    touch-action:pan-y;
    padding-bottom:calc(var(--page-pad) + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
    display:block;
  }

  /* iOS/Safari: padding inferior no conteúdo */
  @supports (-webkit-touch-callout: none) {
    body.go-app-shell .content-area{
      padding-bottom:calc(var(--page-pad) + env(safe-area-inset-bottom, 0px));
    }
    body.go-app-shell #panels-container{
      padding-bottom:calc(var(--page-pad) + env(safe-area-inset-bottom, 0px) + 24px);
    }
  }

  /* Conteúdo cresce com a página — scroll no body */
  body.go-app-shell #panels-container{
    display:block;
    flex:none;
    min-height:auto;
    box-sizing:border-box;
    overflow:visible;
  }

  body.go-app-shell .panel.active:has(> .go-ds){
    display:block;
    flex:none;
    min-height:auto;
    overflow:visible;
  }
  body.go-app-shell .panel.active > .go-ds{
    display:block;
    flex:none;
    min-height:auto;
    overflow:visible;
  }
  body.go-app-shell .panel.active > .go-ds > .content,
  body.go-app-shell .panel.active > .go-ds > .panel-inner{
    flex:none;
    min-height:auto;
    overflow:visible;
  }

  /* Fallback: painéis normais não prendem altura (independe de :has) */
  body.go-app-shell .panel.active{
    flex:none;
    min-height:auto;
    overflow:visible;
  }

  /* Painéis full-height (WhatsApp, Gestor IA): mantêm flex fill */
  body.go-app-shell .panel.active:not(:has(> .go-ds)),
  body.go-app-shell #panel-gestor-ia.panel.active{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
  }
  body.go-app-shell .panel.active:not(:has(> .go-ds)) .panel-inner,
  body.go-app-shell #panel-gestor-ia .panel-inner{
    flex:1;
    min-height:0;
  }

  body:not(.go-app-shell){
    overscroll-behavior-y:auto;
  }
  .app-layout,
  .app-main,
  .content-area,
  #panels-container,
  .panel.active > .go-ds,
  .panel.active > .go-ds > .content,
  .panel.active > .go-ds > .panel-inner{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:visible;
  }
  .panel,
  .panel-inner{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  .sidebar{
    transform:translateX(-100%); transition:transform .3s;
    position:fixed; top:0; left:0;
    /* iOS/Safari: 100vh/100dvh pode “cortar” quando barras mudam; 100svh é mais estável */
    height:100svh;
    height:100dvh;
    max-height:100svh;
    z-index:200;
    width:min(280px, 88vw) !important;
    min-width:0 !important;
    max-width:min(280px, 88vw) !important;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    /* Coluna fixa: marca + nav (rolagem interna) + rodapé. Evita overflow do nav “pintar” por cima do Sair. */
    overflow:hidden;
    overflow-x:hidden;
    -webkit-overflow-scrolling:auto;
  }
  /* Acima do #panel-whatsapp no mobile (z-index 220), senão o menu fica “por trás” do chat */
  #sidebar-overlay.visible{ z-index:235; }
  /* Colapsado (desktop) não deve rolar a sidebar inteira nem mostrar setas no mobile */
  .sidebar.collapsed{
    overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
  }
  .sidebar-scroll-arrow{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:none !important;
  }
  .sidebar.collapsed .sidebar-nav-tools{
    display:block !important;
  }
  .sidebar-nav{
    flex:1 1 0;
    min-height:0;
    overflow:hidden;
  }
  /* Rolagem só na lista de itens; rodapé permanece visível abaixo (sem sobreposição). */
  .sidebar-nav-scroll{
    flex:1 1 0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding-top:2px;
    padding-bottom:12px;
  }
  .sidebar-footer{
    position:relative;
    z-index:2;
    flex-shrink:0;
    background:var(--surface);
    padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
  }
  body.tema-claro .sidebar-footer{ background:#fff; }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:4px 0 20px rgba(0,0,0,.4);
    z-index:236;
  }
  /* Restaurar labels no mobile (collapsed não se aplica) */
  .sidebar.collapsed .sidebar-brand-name,
  .sidebar.collapsed .sidebar-brand-sub,
  .sidebar.collapsed .sidebar-user-name,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-sector-label,
  .sidebar.collapsed .nav-sub-item-label,
  .sidebar.collapsed .nav-group-label,
  .sidebar.collapsed .sidebar-foot-meta,
  .sidebar.collapsed .sidebar-foot-menu-wrap { display:revert !important; }
  .sidebar.collapsed .sidebar-brand-text { display:revert !important; }
  .sidebar.collapsed .sidebar-brand { justify-content:flex-start; padding:18px 16px 16px; position:static; flex-direction:row; }
  .sidebar.collapsed .sidebar-user  { justify-content:flex-start; padding:10px 12px; }
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .nav-sector-btn { justify-content:flex-start; padding:10px 12px; gap:10px; }
  .sidebar.collapsed .btn-collapse-sidebar {
    position:static; transform:none; margin-left:auto;
    width:auto; height:auto; padding:6px 8px;
    background:none; border:none;
  }
  .app-main{ margin-left:0 !important; width:100% !important; }
  /* Colapsado no desktop não deve encolher sidebar no mobile */
  .sidebar.collapsed{
    width:min(280px, 88vw) !important;
    min-width:0 !important;
    max-width:min(280px, 88vw) !important;
  }
  .app-main.sidebar-collapsed{ margin-left:0 !important; width:100% !important; }
  .topbar{
    padding:0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
  }
  .btn-hamburger{ display:flex; }
  .btn-collapse-sidebar{ display:none; }
  .content-area{
    padding-top:var(--page-pad);
    padding-bottom:var(--page-pad);
    padding-left:max(var(--page-pad), env(safe-area-inset-left, 0px));
    padding-right:max(var(--page-pad), env(safe-area-inset-right, 0px));
    overflow-x:hidden;
    overflow-y:visible;
    box-sizing:border-box;
  }
  .hero-title{ font-size:20px; }
  /* 2 colunas que encolhem de verdade (min 0 — evita cortar à direita) */
  .stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(8px, 2.8vw, 14px);
  }
  /* Bloco inferior do Início — mesmo problema de min-width:auto */
  #painel-atividade-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:clamp(10px, 3vw, 16px) !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .form-grid{ grid-template-columns:1fr; }
  /* Ranking: botões empilhados */
  #panel-ranking .btn-row{ flex-direction:column; align-items:stretch; }
  #panel-ranking .btn-row .form-field{ min-width:0; }
  #panel-ranking .btn-row button{ width:100%; max-width:420px; margin-inline:auto; }
  /* Filtros */
  .filtro-field{ min-width:0; }
  .filtro-actions{ flex-shrink:1; }
  /* Modal overlay com menos padding */
  .modal-overlay{ padding:16px; }
  /* Cards e actions */
  .card-actions, .admin-card-actions{ flex-wrap:wrap; }
  .reuniao-tabs{ overflow-x:hidden; }
  /* Meta drawer form */
  .meta-lan-form{ grid-template-columns:1fr; }
}
/* ── RESPONSIVIDADE TABLETS (600-900px) ─────────────────────── */
@media(max-width:768px){
  /* Regras/notif cards: grid de 1 coluna */
  #cards-notif-regras{ grid-template-columns:1fr !important; }
  /* Tabelas com scroll horizontal para não cortar conteúdo */
  .admin-table{ min-width:480px; }
  .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .admin-table th,
  .admin-table td{ padding:6px 7px; font-size:10.5px; }
  .table-wrap thead th,
  .table-wrap td,
  .table-wrap tbody th{
    padding:6px 7px;
    font-size:10.5px;
  }
  .rank-table th,
  .rank-table td{ padding:5px 6px; font-size:10px; }
  .padrao-tab{ padding:5px 7px; font-size:10px; }
  .email-tpl-tab{ padding:6px 8px; font-size:10px; }
  .email-sub-tab{ padding:5px 8px; font-size:10px; }
  .wpp-tab-btn{ padding:8px 9px; font-size:11px; }
  /* Modal */
  .modal{ padding:20px; }
  /* Filtros: campo livre de min-width */
  .filtro-field{ min-width:0; }
  .filtro-actions{ margin-left:0; }
  /* Cards actions wrap */
  .card-actions, .admin-card-actions{ flex-wrap:wrap; }
  /* Calendário cells menores */
  .cal-cell{ min-height:60px; }
  /* Disponibilidade linha */
  .disp-dia-row{ flex-wrap:wrap; gap:6px; }
  /* Reuniões — abas quebram linha */
  .reuniao-tabs{ overflow-x:hidden; }
  .reuniao-tab{ padding:6px 9px; font-size:11px; }
  .stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(8px, 2.8vw, 12px);
  }
}
@media(max-width:500px){
  :root{
    --topbar-h-base:50px;
  }
  /* Alvo de toque maior nos ícones da topbar (app mobile) — mín. 44px recomendado */
  .btn-hamburger,
  .topbar-busca-btn,
  .topbar-bell,
  .btn-topbar-user,
  .go-app-shell .topbar-more-btn{
    width:44px; height:44px; min-width:44px; min-height:44px;
  }
  .stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(7px, 2.5vw, 12px);
  }
  .hero-banner{ padding:20px 16px; }
  .hero-title{ font-size:18px; }
  .content-area{
    padding-top:var(--page-pad);
    padding-bottom:var(--page-pad);
    padding-left:max(var(--page-pad), env(safe-area-inset-left, 0px));
    padding-right:max(var(--page-pad), env(safe-area-inset-right, 0px));
  }
  .panel-inner{ padding:14px; border-radius:10px; }
  .topbar-clock,
  .topbar-more-clock{ display:none; }
  /* No mobile, manter o sino (notificações) visível no app */
  body.go-app-shell .topbar-bell{ display:flex; }
  body.go-app-shell .notif-wrap{ display:block; }
  .table-wrap{ overflow-x:hidden; max-width:100%; }
  /* Cards */
  .cards-grid{ grid-template-columns:1fr 1fr !important; gap:10px; }
  .admin-card{ min-width:0; }
  /* Disparo em massa: botões menores */
  .disparo-tipo-btn{ padding:6px 10px; font-size:12px; }
  .disparo-dest-btn { padding:5px 8px;  font-size:11px; }
  /* Ranking */
  #ranking-btn-row{
    flex-direction:column;
    align-items:stretch !important; /* override inline align-items:flex-end */
  }
  #ranking-btn-row .form-field{ width:100%; }
  #ranking-btn-row input[type=date]{ width:100%; }
  #ranking-btn-row > button{
    width:100%;
    max-width:420px;
    margin-inline:auto;
    justify-content:center;
  }

  /* Dashboard (Operacional/Tático/Estratégico/...) — grid alinhado no mobile */
  .dash-layer-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .dash-layer-btn{
    width:100%;
    min-width:0;
    min-height:64px; /* iguala “altura” visual */
    padding:10px 14px;
  }
  .dash-layer-btn .dash-tab-title{ font-size:14px; }
  .dash-layer-btn .dash-tab-sub{ font-size:11px; }
  /* Aba ativa (laranja) ocupa a largura inteira, como na referência */
  .dash-layer-btn.ativo{ grid-column:1 / -1; }
  /* Form grid 1 coluna */
  .form-grid{ grid-template-columns:1fr !important; }
  /* Topbar compacta — altura em --topbar-h-base; não fixar height (evita corte com safe-area) */
  .topbar-title{ font-size:15px; }
  /* Hero */
  .hero-pills{ gap:5px; }
  .hero-pill{ font-size:11px; padding:4px 8px; }
  /* Modal */
  .modal-overlay{ padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); align-items:flex-end; }
  .modal{ margin:0; width:100% !important; max-width:none !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)); border-radius:14px 14px 0 0; padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .go-ds-wizard.modal{ border-radius:14px; max-height:min(92dvh, calc(100dvh - 24px)); }
  .modal-title{ font-size:16px; margin-bottom:16px; }
  .modal-footer{ flex-direction:column-reverse; gap:8px; }
  .modal-footer .btn{ width:100%; max-width:420px; margin-inline:auto; justify-content:center; }
  /* Config tabs */
  .config-tab{ padding:6px 9px; font-size:11.5px; }
  /* Meta/tarefa notif cards */
  .notif-fmt-btn{ padding:4px 8px; font-size:11px; }
  /* Tarefas/metas card action buttons */
  .admin-card .btn-sm{ font-size:11px; padding:5px 9px; }
  /* Card actions wrap */
  .card-actions, .admin-card-actions{ flex-wrap:wrap; }
  .wpp-tabs{
    overflow-x:hidden;
    flex-wrap:wrap;
  }
  .wpp-tab{ padding:6px 9px; font-size:11px; }
  /* Regra cards */
  .regra-card{ min-width:0; }
  /* Filtros: coluna única */
  .filtro-bar{ flex-direction:column; align-items:stretch; gap:8px; padding:10px; }
  .filtro-field{ min-width:0; width:100%; }
  .filtro-actions{ margin-left:0; width:100%; }
  .filtro-actions .btn{
    flex:0 1 auto;
    width:auto;
    min-width:120px;
    max-width:100%;
    justify-content:center;
  }
  /* Botões em fileira: wrap garantido */
  .btn-row{ flex-wrap:wrap; gap:8px; }
  /* No mobile: botões NÃO devem esticar ocupando a largura inteira */
  .btn-row > .btn{
    flex:0 1 auto;
    min-width:110px;
    justify-content:center;
  }
  /* Quando um botão precisar ser largura total, use estas áreas já definidas */
  /* Preservar view-toggle dentro de btn-row */
  .btn-row .view-btns{ margin-left:0; flex:0 0 auto; }
  /* Disponibilidade */
  .disp-link-box{ flex-direction:column; align-items:flex-start; gap:8px; }
  .disp-dia-row{ flex-wrap:wrap; gap:6px; }
  .disp-time{ width:calc(50% - 6px); }
  /* Permissões */
  .perm-grid{ grid-template-columns:1fr 1fr; }
  /* Meta drawer */
  .meta-lan-form{ grid-template-columns:1fr; }
  /* Calendário */
  .cal-cell{ min-height:40px; }
  .cal-dow{ font-size:9px; letter-spacing:0; padding:4px 0; }
  .cal-grid{ gap:2px; }
  .cal-nav button{ padding:4px 10px; font-size:13px; }
  /* Reuniões tabs */
  .reuniao-tab{ padding:6px 8px; font-size:10.5px; }
  /* Pausa row */
  .pausa-row{ flex-wrap:wrap; gap:6px; }
  /* Stat box padding */
  .stat{ padding:12px 14px; }
  /* Notif dropdown */
  .notif-dropdown{ width:min(340px,calc(100vw - 20px)); right:-10px; max-height:min(70dvh, 480px); overflow-y:auto; }
}

/* ── TABELA (responsiva, nunca corta colunas) ── */
.table-wrap{
  /* Importante: nunca cortar a última coluna (Ações) em telas menores.
     Se não couber, rola horizontalmente dentro do wrap (sem estourar a tela). */
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  border-radius:var(--radius);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable both-edges;
}
.table-wrap table{
  /* Auto layout evita encolher a última coluna até “sumir” */
  table-layout:auto;
  /* Dá um “piso” de largura para não esmagar colunas importantes.
     Quando a viewport for menor, o .table-wrap oferece scroll. */
  min-width:860px;
  width:100%;
}
.table-wrap th,
.table-wrap td{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Coluna final (Ações): manter sempre visível e não quebrar botões */
.table-wrap thead th:last-child,
.table-wrap tbody td:last-child{
  position:sticky;
  right:0;
  z-index:3;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  box-shadow:none; /* remove efeito de sombra na coluna sticky */
  /* Não desenhar “linha” vertical na coluna Ações — igual às outras colunas */
  border-left:none;
}
.table-wrap tbody td:last-child{
  /* Evita diferença de fundo que vira “risco”/emenda visual */
  background:inherit;
}
.table-wrap thead th:last-child{
  z-index:4;
}
table tbody tr:hover td:last-child{ background:rgba(var(--primary-rgb),.06); }
body.tema-claro table tbody tr:hover td:last-child{ background:rgba(var(--primary-rgb),.05); }

/* Metas (modo lista): Status compacto; Ações com botões tocáveis e quebra em telas estreitas */
#cards-metas .table-wrap thead th:last-child,
#cards-metas .table-wrap tbody td:last-child{
  position:static;
}
#cards-metas .table-wrap tbody td:last-child{
  /* Permite 2 linhas de botões quando necessário (override do nowrap global da coluna Ações) */
  white-space:normal;
  overflow-wrap:anywhere;
}
#cards-metas .admin-table th:nth-child(6),
#cards-metas .admin-table td:nth-child(6){
  width:92px;
  max-width:104px;
  white-space:nowrap;
  text-align:center;
  box-sizing:border-box;
}
#cards-metas .admin-table th:last-child,
#cards-metas .admin-table td:last-child{
  width:auto;
  min-width:min(100%,320px);
  max-width:100%;
  box-sizing:border-box;
}
#cards-metas .admin-table .act-cell{
  text-align:right;
  vertical-align:middle;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  row-gap:6px;
}
#cards-metas .admin-table .act-cell .btn.btn-xs{
  padding:7px 9px;
  min-width:36px;
  min-height:34px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#cards-metas .admin-table .act-cell .btn.btn-xs svg{
  width:16px;
  height:16px;
}
/* Tabela com feel de app (prints) */
.table-wrap table thead th{
  position:sticky;
  top:0;
  z-index:2;
}
table tbody tr:hover{ background:rgba(var(--primary-rgb),.06); }
body.tema-claro table tbody tr:hover{ background:rgba(var(--primary-rgb),.05); }
table{ width:100%; border-collapse:collapse; font-size:12px; }
th{
  background:var(--brand); color:#fff; padding:7px 9px;
  text-align:left; font-size:11px; font-weight:600; white-space:nowrap;
}
td{ padding:7px 9px; border-bottom:1px solid var(--border); color:var(--text); }
tr:hover td{ background:rgba(255,255,255,.03); }
body.tema-claro th{ background:#1A4080; }
body.tema-claro td{ border-bottom-color:#E8EFF9; }

/* ── FORMULÁRIO ── */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px, 100%),1fr)); gap:14px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:12px; font-weight:600; color:var(--muted); }

/* ── CONTROLES (padrão global de UI) ───────────────────────────
   Aplica o design padrão (bordas suaves/arredondadas) mesmo em
   inputs/selects/textarea que não usam .form-field/.form-input.
   input:not([type]) = comportamento igual a type=text quando o atributo é omitido. */
:where(.panel, .modal, #modal-generico-body, body) :where(
  select,
  textarea,
  input:not([type]),
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  input[type="url"]
){
  padding:10px 12px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:14px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

:where(.panel, .modal, #modal-generico-body, body) select{
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:40px;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:18px 18px;
}

/* Chrome/Windows: cantos só respeitam radius se tirarmos o “chrome” nativo (não em <select>) */
:where(.panel, .modal, #modal-generico-body, body) :where(
  textarea,
  input:not([type]),
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"]
){
  -webkit-appearance:none;
  appearance:none;
}

:where(.panel, .modal, #modal-generico-body, body) :where(select, textarea){
  width:100%;
}

:where(.panel, .modal, #modal-generico-body, body) :where(textarea){
  resize:vertical;
}

:where(.panel, .modal, #modal-generico-body, body) :where(
  select:focus,
  textarea:focus,
  input:not([type]):focus,
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus
){
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);
}

body.tema-claro :where(.panel, .modal, #modal-generico-body, body) :where(
  textarea,
  input:not([type]),
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  input[type="url"]
){
  background:#fff;
  border-color:#C0D4EC;
  color:#0D2B5E;
}
body.tema-claro :where(.panel, .modal, #modal-generico-body, body) select{
  background-color:#fff;
  border-color:#C0D4EC;
  color:#0D2B5E;
}

/* Classe utilitária já usada em várias telas */
.form-input{ width:100%; }
input.form-input[readonly]{
  opacity:.9;
  cursor:default;
  background:var(--surface2);
}

.form-field input, .form-field textarea{
  padding:10px 12px; border-radius:var(--radius);
  background:var(--surface); border:1.5px solid var(--border); color:var(--text);
  font-size:14px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .2s;
}
.form-field select{
  padding:10px 12px;
  padding-right:40px;
  border-radius:var(--radius);
  background-color:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:14px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);
}
body.tema-claro .form-field input,
body.tema-claro .form-field textarea{ background:#fff; border-color:#C0D4EC; color:#0D2B5E; }
body.tema-claro .form-field select{
  background-color:#fff;
  border-color:#C0D4EC;
  color:#0D2B5E;
}

/* ── BOTÕES ── */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:none; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; transition:all .2s;
  -webkit-appearance:none;
  appearance:none;
  background-image:none;
}
.btn-primary{ background-color:var(--brand); background-image:none; color:#fff; }
.btn-primary:hover{ opacity:.88; transform:translateY(-1px); }
.btn-success{ background:#15914f; color:#fff; }
.btn-success:hover{ opacity:.88; }
.btn-danger{ background:#cc2b3c; color:#fff; }
.btn-danger:hover{ opacity:.88; }
.btn-warning{ background:#c96807; color:#fff; }
.btn-warning:hover{ opacity:.88; }
.btn-secondary{ background:var(--surface); border:1.5px solid var(--border); color:var(--text); }
.btn-secondary:hover{ border-color:var(--accent); }
.btn-ghost{ background:transparent; border:1.5px solid var(--border); color:var(--muted2); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent2); background:rgba(var(--primary-rgb),.07); }
.btn-sm{ padding:6px 12px; font-size:12px; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* Ações compactas (quando há muitos botões no card) */
.com-actions-compact .btn,
.com-actions-compact .btn-sm{
  padding:4px 9px;
  font-size:11px;
  border-radius:7px;
  gap:5px;
  min-height:28px;
}

/* Tarefas · Automação CRM ao pé da etapa Envio */
.nt-crm-gatilho-wrap{
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.nt-crm-auto-intro{
  margin-top:6px;
  padding-left:28px;
  font-size:12px;
  color:var(--muted);
  line-height:1.38;
}
.nt-crm-gatilho-wrap .nt-auto-warn{
  padding:8px 10px;
  font-size:12px;
}
.nt-crm-gatilho-wrap .nt-crm-flow{
  margin-top:10px;
}
.nt-crm-gatilho-wrap .nt-crm-step{
  padding:10px 10px;
}
.com-actions-compact .btn svg{
  width:12px;
  height:12px;
}
.com-actions-compact .btn:not(.btn-success) span{
  line-height:1;
}

/* CRM Config · linha “Intervalo sync / Compat.” — altura do botão alinhada aos inputs */
#panel-comercial .com-cfg-modo-salvar .btn.btn-primary{
  padding:10px 18px;
  font-size:13px;
  min-height:43px;
  box-sizing:border-box;
}

/* Comercial · Configuração: barra (filtro + ações) e botões dos cards de mapeamento */
.com-cfg-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.com-cfg-toolbar .form-input,
.com-cfg-toolbar select.form-input{
  max-width:200px;
  min-width:140px;
  flex:0 1 auto;
}
.com-cfg-toolbar .btn.btn-sm{
  white-space:nowrap;
  min-height:32px;
  box-sizing:border-box;
  flex:0 0 auto;
}
.com-cfg-card-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  width:100%;
  max-width:11rem;
  flex-shrink:0;
}
.com-cfg-card-actions .btn.com-cfg-card-btn{
  width:100%;
  min-height:34px;
  justify-content:center;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
  box-sizing:border-box;
}
.com-cfg-card-actions .btn.com-cfg-card-btn svg{
  width:13px;
  height:13px;
  flex-shrink:0;
}

/* Botão “seta” discreto nos widgets do dashboard */
.widget-hd .btn.btn-ghost.btn-xs{
  padding:3px 6px;
  border-radius:10px;
  border-width:1px;
  color:var(--muted);
}
.widget-hd .btn.btn-ghost.btn-xs svg{
  width:12px;
  height:12px;
  stroke-width:2.2;
}

/* ── MODAL ── */
.modal-overlay{ position:fixed; inset:0; background:rgba(5,12,28,.18); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); z-index:1000; display:none; align-items:center; justify-content:center; padding:calc(16px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
.modal-overlay.open{ display:flex; }

/* Modais Comercial — mesmo glass do restante do sistema */
.modal-overlay.modal-com-overlay{
  z-index:10150;
  align-items:center;
  background:rgba(5,12,28,.18) !important;
  backdrop-filter:blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(140%) !important;
}
body.tema-graphite .modal-overlay.modal-com-overlay{background:rgba(0,0,0,.24) !important;}
body.tema-claro .modal-overlay.modal-com-overlay{background:rgba(15,30,60,.12) !important;}
.modal-com-modalbox,
.modal-overlay.modal-com-overlay > .modal-box{
  box-sizing:border-box;
  color:var(--text);
  border-radius:18px;
  padding:22px 24px 20px;
  box-shadow:var(--modal-glass-shadow, 0 24px 72px rgba(0,0,0,.62));
  max-height:min(92vh, 92dvh);
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--modal-panel-bg, var(--modal-glass-bg, var(--card, #112238))) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--modal-glass-border, rgba(255,255,255,.12)) !important;
}
body.tema-claro .modal-com-modalbox,
body.tema-claro .modal-overlay.modal-com-overlay > .modal-box{
  border-color:rgba(200,216,238,.75) !important;
}
.modal-com-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.modal-com-body{
  max-height:min(70vh, 70dvh);
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:10px;
}
.modal-com-body::-webkit-scrollbar{ width:8px; }
.modal-com-body::-webkit-scrollbar-track{
  margin-block:10px;
  background:transparent;
}
.modal-com-body::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}
.modal-com-disparo-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:4px;
}
.modal-com-disparo-form > .form-field{ margin:0; }
.modal-com-disparo-form label{
  color:var(--text);
  font-size:12px;
  font-weight:600;
}
.com-disp-vars-hint{
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
  margin:4px 0 8px;
}
.com-disp-vars-hint code{
  font-size:10px;
  padding:2px 5px;
  border-radius:4px;
  background:var(--surface2);
  border:1px solid var(--border);
  white-space:nowrap;
}
body.tema-claro .com-disp-vars-hint code{ background:#F0F4FC; border-color:#D0E0F0; }
.com-disp-mensagem-area{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:148px;
  line-height:1.42;
}

/* ── Modal: Funis e etapas (Nectar) — UX / hierarquia ───────── */
#modal-com-nectar-funil .com-nc-funil-root{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.com-nc-funil-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:28px 12px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.com-nc-funil-loading svg,
.com-nc-funil-loading .ico{
  opacity:.85;
  animation:comNcFunilSpin 0.95s linear infinite;
}
@keyframes comNcFunilSpin{ to { transform:rotate(360deg); } }
@keyframes wpp-spin{ to { transform:rotate(360deg); } }

.com-nc-funil-err{
  border:1px solid rgba(220,80,80,.35);
  background:rgba(220,80,80,.09);
  border-radius:12px;
  padding:14px 16px;
  font-size:13px;
  color:var(--danger);
  line-height:1.45;
}
body.tema-claro .com-nc-funil-err{
  border-color:rgba(200,70,70,.4);
  background:rgba(230,76,76,.08);
}

.com-nc-funil-hero{
  border-radius:14px;
  padding:14px 16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:4px solid var(--brand);
  box-sizing:border-box;
}
.com-nc-funil-hero__lead{
  display:block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--brand);
  margin-bottom:6px;
}
.com-nc-funil-hero p{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}
.com-nc-funil-hero p strong{ color:var(--text); }

.com-nc-funil-legend{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
  margin-top:12px;
}
.com-nc-funil-legend-card{
  border-radius:10px;
  padding:10px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.com-nc-funil-legend-card__lab{
  display:block;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text);
  margin-bottom:4px;
}
.com-nc-funil-legend-card code{
  font-size:10px;
  padding:1px 5px;
  border-radius:4px;
  background:var(--surface2);
  border:1px solid var(--border);
  white-space:nowrap;
}
body.tema-claro .com-nc-funil-legend-card code{ background:#F6F9FF; border-color:#D8E4F6; }

.com-nc-funil-more{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
}
.com-nc-funil-more > summary{
  cursor:pointer;
  font-weight:700;
  color:var(--text);
  user-select:none;
}
.com-nc-funil-more[open] > summary{ margin-bottom:6px; }
.com-nc-funil-more p{ margin:0; }

.com-nc-funil-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.com-nc-funil-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  flex-shrink:0;
}
.com-nc-funil-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  white-space:nowrap;
}
.com-nc-funil-pill--muted{
  color:var(--muted);
  font-weight:600;
}
.com-nc-funil-search-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:min(240px,100%);
}
.com-nc-funil-search-row .form-input{
  flex:1;
  margin:0;
  min-width:0;
}
.com-nc-funil-clear{
  flex-shrink:0;
  padding:8px 12px;
  font-size:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.com-nc-funil-clear:hover{ filter:brightness(1.06); border-color:var(--brand); }
.com-nc-funil-vis-msg{
  font-size:12px;
  color:var(--muted);
  min-height:1.35em;
}
.com-nc-funil-vis-msg strong{ color:var(--text); }

.com-nc-funil-filter-hit{
  display:none;
  font-size:12px;
  color:var(--muted);
  padding:8px 12px;
  border-radius:10px;
  background:var(--surface2);
  border:1px dashed var(--border);
}

.com-nc-funil-card{
  margin-bottom:0;
  border:1px solid var(--border);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  background:var(--surface);
  box-sizing:border-box;
  scroll-margin-top:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.com-nc-funil-card:hover{
  border-color:rgba(74,139,229,.42);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
body.tema-claro .com-nc-funil-card:hover{
  border-color:rgba(56,126,217,.42);
  box-shadow:0 8px 24px rgba(26,70,148,.07);
}

.com-nc-funil-card__hdr{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
}
body.tema-claro .com-nc-funil-card__hdr{
  background:#F4F8FF;
}

.com-nc-funil-card__nome{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  color:var(--text);
  word-break:break-word;
}

.com-nc-funil-card__pipeline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.com-nc-funil-chip{
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:6px;
  background:rgba(74,139,229,.14);
  color:var(--brand);
  border:1px solid rgba(74,139,229,.25);
}
body.tema-claro .com-nc-funil-chip{
  background:rgba(26,73,154,.09);
  color:#1a499a;
  border-color:rgba(26,73,154,.22);
}

.com-nc-funil-idpill{
  font-family:ui-monospace,monospace;
  font-size:13px;
  font-weight:800;
  padding:5px 10px;
  border-radius:8px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  letter-spacing:-0.02em;
}

.com-nc-funil-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  white-space:nowrap;
}

.com-nc-funil-card__body{
  padding:14px 16px 16px;
}
.com-nc-funil-etapas-h{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.com-nc-funil-etapas-h__tit{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.com-nc-funil-etapas-h small{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}

.com-nc-funil-table .table-wrap{
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
}
.com-nc-funil-tip{
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(74,139,229,.06);
  border-left:4px solid var(--brand);
}
body.tema-claro .com-nc-funil-tip{
  background:rgba(26,73,154,.055);
}

.com-nc-funil-empty{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  background:var(--surface2);
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}
.com-nc-funil-empty strong.title{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--text);
  margin-bottom:8px;
}
.com-nc-funil-empty ol{
  margin:0;
  padding-left:20px;
}
.com-nc-funil-empty li{ margin-bottom:6px; }
.com-nc-funil-empty li:last-child{ margin-bottom:0; }

.com-nc-funil-adv{
  margin-top:2px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  background:var(--surface2);
}
.com-nc-funil-adv > summary{
  cursor:pointer;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  user-select:none;
  list-style:none;
}
.com-nc-funil-adv > summary::-webkit-details-marker{ display:none; }
.com-nc-funil-adv[open] > summary{ margin-bottom:10px; }

/* ── Modal funis: cabeçalho + refinamentos UX ───────────────── */
.com-nc-funil-modal-headtxt{ flex:1; min-width:0; }
.com-nc-funil-modal-title{
  font-size:17px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.com-nc-funil-modal-sub{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  font-weight:500;
}
.com-nc-funil-title-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  padding:2px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(74,139,229,.18);
  color:var(--brand);
  border:1px solid rgba(74,139,229,.35);
}
body.tema-claro .com-nc-funil-title-badge{
  background:rgba(26,73,154,.1);
  color:#1a499a;
  border-color:rgba(26,73,154,.28);
}
.com-nc-funil-modal-body .com-nc-funil-body-inner{
  font-size:13px;
  color:var(--text);
  padding-right:2px;
}

.com-nc-funil-loading__tit{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--text);
}
.com-nc-funil-loading__sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  max-width:280px;
}

.com-nc-funil-err-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.com-nc-funil-hero__title{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
}
.com-nc-funil-hero__intro{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.com-nc-funil-hero__intro strong{ color:var(--text); }

.com-nc-funil-steps{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:grid;
  gap:10px;
}
@media (min-width:720px){
  .com-nc-funil-steps{
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
}
.com-nc-funil-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border);
  box-sizing:border-box;
}
.com-nc-funil-step__num{
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  color:#fff;
  background:var(--brand);
  box-shadow:0 2px 8px rgba(37,99,184,.25);
}
.com-nc-funil-step__body{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.com-nc-funil-step__body strong{ color:var(--text); font-weight:700; }

.com-nc-funil-pill--accent{
  border-color:rgba(74,139,229,.38);
  background:rgba(74,139,229,.1);
  color:var(--brand);
}

.com-nc-funil-panel{
  border-radius:14px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
body.tema-claro .com-nc-funil-panel{
  box-shadow:0 2px 14px rgba(26,70,148,.06);
}
.com-nc-funil-panel--compact{
  padding:12px 14px;
}

.com-nc-funil-search-label{ margin:0; width:100%; }
.com-nc-funil-search-row{
  position:relative;
}
.com-nc-funil-search-ico{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  opacity:.45;
  pointer-events:none;
  display:flex;
}
.com-nc-funil-search-input{
  padding-left:38px !important;
}
.com-nc-funil-search-hint{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  font-weight:500;
}

.com-nc-funil-vis-msg--pad{
  margin-top:10px;
}
.com-nc-funil-vis-ico{
  display:inline-flex;
  vertical-align:-3px;
  margin-right:4px;
  opacity:.85;
}

.com-nc-funil-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.com-nc-funil-card__hdr-main{
  flex:1;
  min-width:0;
}
.com-nc-funil-copypipe{
  font-weight:700 !important;
}

.com-nc-funil-etapas-h{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.com-nc-funil-etapas-h__hint{
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  line-height:1.45;
  max-width:640px;
}

.com-nc-funil-cell-id{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.com-nc-funil-etp-code{
  font-family:ui-monospace,monospace;
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:8px;
  background:var(--surface2);
  border:1px solid var(--border);
}
.com-nc-funil-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--muted);
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.com-nc-funil-icon-btn:hover{
  color:var(--brand);
  border-color:rgba(74,139,229,.45);
  background:rgba(74,139,229,.08);
}
.com-nc-funil-col-pos{
  text-align:center;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.com-nc-funil-muted{
  color:var(--muted);
  font-size:12px;
  font-style:italic;
}

.com-nc-funil-table-inner thead th{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--muted);
  background:var(--surface2);
}
.com-nc-funil-table-inner tbody tr:nth-child(even){
  background:rgba(0,0,0,.02);
}
body.tema-claro .com-nc-funil-table-inner tbody tr:nth-child(even){
  background:rgba(26,73,154,.035);
}

.com-nc-funil-warn-cell{
  padding:14px !important;
  color:var(--muted);
  line-height:1.5;
  font-size:12px;
}

.com-nc-funil-empty__ico{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
  opacity:.35;
}
.com-nc-funil-empty__lead{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.com-nc-funil-empty__list{
  margin:0 0 16px;
  padding-left:20px;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}
.com-nc-funil-empty__list strong{ color:var(--text); }
.com-nc-funil-empty__list code{
  font-size:10px;
  padding:1px 5px;
  border-radius:4px;
  background:var(--surface);
  border:1px solid var(--border);
}
.com-nc-funil-empty__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.com-nc-funil-tip{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.com-nc-funil-tip__lab{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--brand);
}
.com-nc-funil-tip__txt{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}
.com-nc-funil-tip__txt strong{ color:var(--text); }

.com-nc-funil-adv__hint{
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
  font-size:11px;
}
.com-nc-funil-json-ta{
  width:100%;
  min-height:140px;
  font-family:ui-monospace,monospace;
  font-size:11px;
  resize:vertical;
  margin-top:8px;
}
.com-nc-funil-adv__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.com-disp-check-label{
  display:flex !important;
  align-items:flex-start !important;
  gap:11px !important;
  cursor:pointer;
  flex-direction:row !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  margin:0;
}
.com-disp-check-label input[type=checkbox]{
  width:18px;
  height:18px;
  margin-top:1px;
  accent-color:var(--accent);
  flex-shrink:0;
}
.com-disp-cron-outer .form-field{ margin-bottom:0; }
.com-disp-cron-intro{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 12px;
}
.com-disp-cron-hint{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
}
.com-disp-cron-resumo{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(var(--primary-rgb),.22);
  background:rgba(var(--primary-rgb),.08);
}
.com-disp-cron-resumo-inner{
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}
.com-disp-cron-resumo-warn{
  color:var(--danger);
  font-weight:600;
}
.com-disp-cron-advanced{
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
}
.com-disp-cron-advanced summary{
  cursor:pointer;
  font-weight:600;
  color:var(--accent2);
  list-style-position:outside;
}
.com-disp-cron-advanced[open] summary{
  margin-bottom:8px;
}
.com-disp-cron-tip{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
.modal-com-actions{
  margin-top:18px !important;
  padding-top:14px;
  border-top:1px solid var(--border);
}
#modal-com-disparo.modal-com-overlay .form-input,
#modal-com-cliente.modal-com-overlay .form-input{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.modal{
  background:var(--card, #112238); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  width:min(520px, 96vw);
  max-width:96vw;
  max-height:92vh;
  max-height:92dvh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.55); padding:28px;
}
body.tema-claro .modal{ background:var(--card, #fff); border-color:rgba(200,216,238,.7); }
body.tema-graphite .modal{ background:var(--card, #161B23); border-color:rgba(255,255,255,.10); }

/* WebKit: a trilha da rolagem costumava “vazar” além do border-radius do modal */
.modal::-webkit-scrollbar{ width:8px; }
.modal::-webkit-scrollbar-track{
  margin-block:12px;
  background:transparent;
}
.modal::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}
.modal-com-modalbox::-webkit-scrollbar,
.modal-overlay.modal-com-overlay > .modal-box::-webkit-scrollbar{ width:8px; }
.modal-com-modalbox::-webkit-scrollbar-track,
.modal-overlay.modal-com-overlay > .modal-box::-webkit-scrollbar-track{
  margin-block:14px;
  background:transparent;
}
.modal-com-modalbox::-webkit-scrollbar-thumb,
.modal-overlay.modal-com-overlay > .modal-box::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}
.modal-title{
  font-size:18px; font-weight:700; color:var(--text); margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative;
}
/* ── Botão X fechar modal — padrão unificado ──
   Tema escuro = ausência de body.tema-claro; o base usa variáveis do :root. */
.modal-close-btn{
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:8px; cursor:pointer; padding:0;
  color:var(--accent2); font-size:17px; line-height:1;
  transition:all .15s;
}
body.tema-claro .modal-close-btn{
  background:#fff;
  border-color:#C8D8EE;
  color:#1E6FD9;
}
.modal-close-btn:hover{
  border-color:var(--accent);
  background:rgba(var(--primary-rgb),.18);
  color:var(--accent);
}
body.tema-claro .modal-close-btn:hover{
  border-color:#1E6FD9;
  background:rgba(var(--primary-rgb),.08);
  color:#1254b5;
}
.modal-close-btn:active{ transform:scale(.9); }
/* dentro de .modal-title — ocupa o slot flex, não usa posição absoluta */
.modal-title .modal-close-btn{ position:static; transform:none; }
.modal-title .modal-close-btn:active{ transform:scale(.9); }
.modal-footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* Pré-visualização da resposta do bot (modal comando) — bolha estilo conversa */
.bot-cmd-preview-pre{
  white-space:pre-wrap;
  word-break:break-word;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:13px;
  line-height:1.5;
  margin:0;
  padding:12px 14px 12px 16px;
  border-radius:4px 14px 14px 14px;
  border:1px solid rgba(18,140,126,.25);
  background:rgba(5, 40, 32, .45);
  color:rgba(255,255,255,.95);
  max-height:min(480px, 48vh);
  overflow-y:auto;
  box-sizing:border-box;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
body.tema-claro .bot-cmd-preview-pre{
  background:#dcf8c6;
  border-color:rgba(18,140,126,.35);
  color:#0d1f14;
  box-shadow:0 1px 4px rgba(15,45,95,.08);
}

.bot-cmd-erp-panel{
  border-color:rgba(var(--primary-rgb),.45);
  background:rgba(var(--primary-rgb),.06);
}
body.tema-claro .bot-cmd-erp-panel{
  background:rgba(var(--primary-rgb),.04);
}
/* Formato ERP: Excel oculto por padrão; visível em comandos Produção */
.bot-erp-fmt-xls{
  display:none !important;
}
#bot-cmd-erp-wrap.bot-cmd-erp-panel--producao .bot-erp-fmt-xls{
  display:flex !important;
}
#bot-cmd-erp-wrap.bot-cmd-erp-panel--producao .bot-erp-fmt-texto{
  display:none !important;
}
.bot-cmd-erp-formato-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:4px;
}
.bot-cmd-erp-formato-row--tres{
  grid-template-columns:repeat(3, 1fr);
}
.bot-cmd-erp-formato-row--dois{
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width: 720px){
  .bot-cmd-erp-formato-row--tres{
    grid-template-columns:1fr 1fr;
  }
}
.bot-cmd-erp-formato-opt{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  cursor:pointer;
  font-size:13px;
}
.bot-cmd-erp-formato-opt:has(input:checked){
  border-color:var(--accent);
  background:rgba(var(--primary-rgb),.08);
}
.bot-cmd-erp-formato-opt small{
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}
/* Prévia Canvas BI — relatório ERP no modal do bot */
.bot-erp-dash-preview{
  border-radius:14px;
  overflow:hidden;
  max-height:min(640px, 58vh);
  overflow-y:auto;
  background:#0c1829;
  color:#f0f6fc;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.2),
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.bi-dash-frame{ padding:12px 12px 10px; }
.bi-dash-frame-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.bi-dash-badge{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(59,130,246,0.2);
  color:#93c5fd;
  border:1px solid rgba(59,130,246,0.35);
}
.bi-dash-badge--live{
  background:rgba(52,211,153,0.12);
  color:#6ee7b7;
  border-color:rgba(52,211,153,0.35);
}
.bi-dash-img-shell{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#060d18;
  border:1px solid rgba(30,58,95,0.65);
  min-height:280px;
}
.bi-dash-img{
  display:none;
  width:100%;
  height:auto;
  vertical-align:top;
}
.bi-dash-skeleton{
  padding:16px 14px 20px;
  animation:bi-dash-pulse 1.4s ease-in-out infinite;
}
.bi-dash-skeleton p{
  text-align:center;
  color:#7b9cc4;
  font-size:12px;
  margin:14px 0 0;
}
.bi-dash-skel-hero{
  height:72px;
  border-radius:12px;
  background:linear-gradient(90deg, rgba(30,58,95,0.5) 0%, rgba(59,130,246,0.25) 50%, rgba(30,58,95,0.5) 100%);
  background-size:200% 100%;
  animation:bi-dash-shimmer 1.6s linear infinite;
  margin-bottom:12px;
}
.bi-dash-skel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.bi-dash-skel-grid span{
  height:48px;
  border-radius:10px;
  background:rgba(19,42,69,0.9);
}
.bi-dash-skel-bars span{
  display:block;
  height:36px;
  border-radius:8px;
  background:rgba(19,42,69,0.75);
  margin-bottom:8px;
}
.bi-dash-foot{
  margin:10px 2px 0;
  font-size:10px;
  color:#7b9cc4;
  line-height:1.45;
  text-align:center;
}
@keyframes bi-dash-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.72; }
}
@keyframes bi-dash-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
.bot-cmd-preview-bubble-wrap:has(.bot-erp-dash-preview[style*="block"]){
  padding:0;
  background:transparent;
}
.bot-cmd-preview-bubble-wrap:has(.bot-erp-dash-preview[style*="block"]) .bot-cmd-preview-pre{
  display:none !important;
}

/* Modal Tipos de ação — sem barra horizontal; texto quebra nas colunas */
.bot-tipos-acao-wrap{
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}
.bot-tipos-acao-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:13px;
}
.bot-tipos-acao-table thead th{
  text-align:left;
  padding:8px 10px;
  background:rgba(var(--primary-rgb),.12);
  color:var(--text);
  font-weight:700;
  font-size:12px;
}
.bot-tipos-acao-table tbody td{
  padding:10px;
  vertical-align:top;
  border-bottom:1px solid var(--border);
}
.bot-tipos-acao-col-tipo{
  width:22%;
}
.bot-tipos-acao-col-desc{
  width:52%;
  word-break:break-word;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.bot-tipos-acao-col-ex{
  width:18%;
  word-break:break-word;
}
.bot-tipos-acao-slug{
  display:inline-block;
  margin-top:4px;
  font-size:11px;
  opacity:.92;
  background:var(--hover);
  padding:1px 6px;
  border-radius:4px;
}
body.tema-claro .bot-tipos-acao-table thead th{
  background:rgba(var(--primary-rgb),.08);
}

/* ── Modal “Sugestões de variação — IA” ─────────────────────────
   Lista era flex+column com max-height: sem flex-shrink:0 nos filhos, o navegador
   comprime os itens para caber na altura — texto virava uma faixa ilegível. */
.modal.modal-variacoes-ia{
  width: min(580px, 96vw);
  max-width: 96vw;
  max-height: min(620px, 90vh);
  max-height: min(620px, 90dvh);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal.modal-variacoes-ia .modal-title{
  flex-shrink: 0;
  margin-bottom: 0;
  padding: 18px 20px 10px;
}
.modal-variacoes-ia-notice{
  flex-shrink: 0;
  padding: 0 20px 10px;
}
.modal-variacoes-ia-notice-box{
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}
body.tema-claro .modal-variacoes-ia-notice-box{
  color: #78350f;
}
.modal-variacoes-ia-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 12px 20px;
  -webkit-overflow-scrolling: touch;
}
.variacoes-ia-lista{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.variacoes-ia-lista > *{
  flex-shrink: 0;
}
.variacoes-ia-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.variacoes-ia-toolbar-count{
  font-size: 12px;
  color: var(--muted);
}
.variacoes-ia-toolbar-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.variacoes-ia-card{
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.variacoes-ia-card-head{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border);
  background: rgba(74, 159, 255, .07);
}
body.tema-claro .variacoes-ia-card-head{
  background: rgba(30, 111, 217, .06);
}
.variacoes-ia-card-cb{
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.variacoes-ia-card-num{
  font-size: 11px;
  font-weight: 700;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
}
.variacoes-ia-card-hint{
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 420px){
  .variacoes-ia-card-hint{
    width: 100%;
    margin-left: 0;
    padding-left: 22px;
    white-space: normal;
  }
}
.variacoes-ia-textarea{
  width: 100%;
  box-sizing: border-box;
  min-height: 5rem;
  max-height: 18rem;
  margin: 0;
  resize: vertical;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: var(--surface2) !important;
}
body.tema-claro .variacoes-ia-textarea{
  background: #f4f7fb !important;
}
.modal-variacoes-ia .variacoes-ia-textarea:focus{
  border-color: var(--border) !important;
  box-shadow: inset 0 0 0 2px rgba(30, 111, 217, .18) !important;
}
body.tema-claro .modal-variacoes-ia .variacoes-ia-textarea:focus{
  box-shadow: inset 0 0 0 2px rgba(30, 111, 217, .22) !important;
}
.modal-variacoes-ia-footer{
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border);
}
.modal-variacoes-ia-footer-hint{
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  flex: 1 1 200px;
  min-width: 0;
}
.modal-variacoes-ia-footer-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
@media (max-width: 520px){
  .modal.modal-variacoes-ia .modal-title{ padding: 14px 16px 8px; }
  .modal-variacoes-ia-notice{ padding: 0 16px 8px; }
  .modal-variacoes-ia-scroll{ padding: 4px 8px 10px 16px; }
  .modal-variacoes-ia-footer{
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 12px 16px 16px;
  }
  .modal-variacoes-ia-footer-actions{
    justify-content: stretch;
  }
  .modal-variacoes-ia-footer-actions .btn{
    flex: 1;
    justify-content: center;
  }
}

/* Modal genérico (#modal-generico-body): reforço — id ganha sobre regras com :where e garante tema + cantos em Win/Chrome */
#modal-generico-body textarea,
#modal-generico-body input:not([type]),
#modal-generico-body input[type="text"],
#modal-generico-body input[type="password"],
#modal-generico-body input[type="email"],
#modal-generico-body input[type="search"],
#modal-generico-body input[type="tel"],
#modal-generico-body input[type="url"]{
  -webkit-appearance:none;
  appearance:none;
  border-radius:var(--radius);
  padding:10px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:14px;
  font-family:'DM Sans',sans-serif;
  outline:none;
}
#modal-generico-body textarea{ resize:vertical; width:100%; }
#modal-generico-body input.form-input:not([type=checkbox]):not([type=radio]){ width:100%; }
body.tema-claro #modal-generico-body textarea,
body.tema-claro #modal-generico-body input:not([type]),
body.tema-claro #modal-generico-body input[type="text"],
body.tema-claro #modal-generico-body input[type="password"],
body.tema-claro #modal-generico-body input[type="email"],
body.tema-claro #modal-generico-body input[type="search"],
body.tema-claro #modal-generico-body input[type="tel"],
body.tema-claro #modal-generico-body input[type="url"]{
  background:#fff;
  border-color:#C0D4EC;
  color:#0D2B5E;
}

#modal-generico-body textarea:focus,
#modal-generico-body input:not([type]):focus,
#modal-generico-body input[type="text"]:focus,
#modal-generico-body input[type="password"]:focus,
#modal-generico-body input[type="email"]:focus,
#modal-generico-body input[type="search"]:focus,
#modal-generico-body input[type="tel"]:focus,
#modal-generico-body input[type="url"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);
}

/* ── FLASH ── */
.flash{ padding:12px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:16px; display:none; }
.flash.ok{ background:rgba(34,201,122,.15); border:1px solid rgba(34,201,122,.4); color:var(--success); }
.flash.err,.flash.erro{ background:rgba(255,68,85,.15); border:1px solid rgba(255,68,85,.4); color:var(--danger); }
.flash.info{ background:rgba(var(--primary-rgb),.12); border:1px solid rgba(var(--primary-rgb),.35); color:var(--accent2); }

/* ── BADGE ── */
.badge{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-ok{ background:rgba(34,201,122,.18); color:#22C97A; }
.badge-err{ background:rgba(255,68,85,.18); color:#FF4455; }
.badge-warn{ background:rgba(255,194,51,.18); color:#FFC233; }
.badge-info{ background:rgba(74,159,255,.18); color:#4A9FFF; }

.chip-mini{
  display:inline-block;
  padding:2px 8px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
  margin:1px 0;
}

/* ── Multi-seleção de cargos (chips + lista de checkboxes) ──────── */
.chip-multiselect-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:28px;
  margin-bottom:6px;
}
.chip-multiselect-chips:empty{ display:none; }
.chip-multiselect-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 6px 4px 10px;
  border-radius:20px;
  background:rgba(74,159,255,.14);
  border:1px solid rgba(74,159,255,.3);
  color:var(--accent2);
  font-size:12px;
  font-weight:700;
}
.chip-multiselect-chip button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  color:inherit;
  opacity:.75;
  padding:2px;
}
.chip-multiselect-chip button:hover{ opacity:1; }
.chip-multiselect-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:160px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  padding:6px;
}
.chip-multiselect-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:7px;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.chip-multiselect-item:hover{ background:var(--surface2); }
.chip-multiselect-item input{ accent-color:var(--primary); cursor:pointer; }

/* ── CARDS ADMIN ── */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
/* Painel Tarefas — 3 cartões por linha no desktop (metas / demais listas mantêm auto-fill) */
#cards-tarefas.cards-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media(max-width:1120px){
  #cards-tarefas.cards-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.admin-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; transition:all .2s; cursor:default;
  display:flex; flex-direction:column;
  min-width:0; overflow:hidden; /* ← impede overflow fora do grid */
}
.admin-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px var(--shadow); }
.admin-card .card-title{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; word-break:break-word; min-width:0; }
.admin-card .card-sub{ font-size:12px; color:var(--muted); line-height:1.5; }
.card-actions{ display:flex; gap:8px; margin-top:auto; padding-top:12px; }
.admin-card-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
.admin-card-body{ font-size:12px; color:var(--muted); line-height:1.6; display:flex; flex-direction:column; flex:1; }
.admin-card-actions{ display:flex; gap:5px; flex-shrink:0; flex-wrap:wrap; max-width:100%; }

/* Metas (cartões): grelha 3×2 — no máximo 2 linhas de botões */
#cards-metas .admin-card .admin-card-header{
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:8px;
}
#cards-metas .admin-card .admin-card-header > div:first-child{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}

#cards-metas .admin-card .meta-card-actions{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:2px 0 0;
}
/* Uma grelha: linha 1 = Editar | Repetir | Gráficos; linha 2 = Pausas | [Lote] | Excluir */
#cards-metas .admin-card .meta-card-actions-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  align-items:stretch;
}
#cards-metas .admin-card .meta-card-btn{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:34px;
  padding:5px 6px;
  border-radius:10px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
  text-align:center;
  line-height:1.2;
}
#cards-metas .admin-card .meta-card-btn span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
  font-size:11px;
  letter-spacing:-0.02em;
}
#cards-metas .admin-card .meta-card-btn svg{
  width:13px !important;
  height:13px !important;
  flex-shrink:0;
}

/* Cartão Tarefas — cabeçalho (título + peso + pill status + log) */
#cards-tarefas .admin-card.tarefa-admin-card{
  overflow:visible;
  position:relative;
  z-index:0;
}
#cards-tarefas .admin-card.tarefa-admin-card:has(.tarefa-card-status-dd[open]){
  z-index:8;
}
.tarefa-card-head{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:8px;
  min-width:0;
}
.tarefa-card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
}
.tarefa-card-meta-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  flex-shrink:0;
}
.admin-card.tarefa-admin-card .tarefa-card-title.card-title{
  margin-bottom:0;
  min-width:0;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:normal !important;
  overflow-wrap:normal;
}
.tarefa-card-head-badge.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  min-height:24px;
  max-height:24px;
  padding:0 8px;
  box-sizing:border-box;
  line-height:1;
  font-size:10px;
}

/* Pill discreta Ativa/Inativa + menu */
.tarefa-card-status-dd{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
}
.tarefa-card-status-dd > summary{
  list-style:none;
  margin:0;
}
.tarefa-card-status-dd > summary::-webkit-details-marker{ display:none; }
.tarefa-card-status-dd-sum{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0 9px 0 10px;
  height:24px;
  min-height:24px;
  max-height:24px;
  box-sizing:border-box;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition:background .15s, color .15s, border-color .15s;
}
.tarefa-card-status-dd-sum:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.tarefa-card-status-dd.is-on .tarefa-card-status-dd-sum{
  background:rgba(34,201,122,.14);
  color:#168a52;
  border-color:rgba(34,201,122,.22);
}
body.tema-claro .tarefa-card-status-dd.is-on .tarefa-card-status-dd-sum{
  background:#e8f5ee;
  color:#1b7a4a;
  border-color:rgba(34,201,122,.2);
}
.tarefa-card-status-dd.is-off .tarefa-card-status-dd-sum{
  background:rgba(120,128,140,.1);
  color:var(--muted);
  border-color:rgba(120,128,140,.16);
}
.tarefa-card-status-dd-caret{
  font-size:9px;
  line-height:1;
  opacity:.88;
  margin-top:0;
}
.tarefa-card-status-dd-panel{
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  min-width:128px;
  padding:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 28px var(--shadow);
  z-index:20;
}
.tarefa-card-status-opt{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 12px;
  border:none;
  background:transparent;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  color:var(--text);
  font-weight:500;
  transition:background .12s;
}
.tarefa-card-status-opt:hover{
  background:rgba(var(--primary-rgb),.08);
}
.tarefa-card-status-opt.is-current{
  font-weight:700;
  color:var(--accent2);
}
/* Ícones do cabeçalho — alinhados com badge na linha de meta */
.tarefa-card-head-ico{
  width:24px !important;
  min-width:24px !important;
  height:24px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  flex-shrink:0;
  border:1px solid var(--border) !important;
  background:rgba(var(--primary-rgb),.04) !important;
  color:var(--muted) !important;
}
.tarefa-card-head-ico:hover{
  border-color:var(--accent) !important;
  color:var(--accent2) !important;
  background:rgba(var(--primary-rgb),.1) !important;
}
.tarefa-card-head-ico svg{
  width:13px !important;
  height:13px !important;
}

/* Rodapé: grade 3×2 com todos os botões rotulados */
#cards-tarefas .admin-card .tarefa-card-footer{
  margin-top:auto;
  padding-top:10px;
}
.tarefa-card-footer{
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.tarefa-card-botoes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px 5px;
  align-items:stretch;
  justify-items:stretch;
  width:100%;
  box-sizing:border-box;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
}
body.tema-claro .tarefa-card-botoes{
  background:transparent;
}
.tarefa-card-bot{
  width:100%;
  min-width:0;
  min-height:34px;
  padding:6px 6px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:8px;
  box-sizing:border-box;
  font-size:13px !important;
}
.tarefa-card-bot span{
  font-weight:600;
  font-size:13px;
  letter-spacing:-0.01em;
  white-space:nowrap;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tarefa-card-bot svg{
  width:14px !important;
  height:14px !important;
  flex-shrink:0;
}
.tarefa-card-bot--danger{
  border-color:rgba(220,53,69,.4);
}
.tarefa-card-bot--danger:hover{
  border-color:var(--danger);
}
.tarefa-card-bot--accent{
  border-color:rgba(34,201,122,.45) !important;
  background:rgba(34,201,122,.10) !important;
  color:#168a52 !important;
}
.tarefa-card-bot--accent:hover{
  border-color:var(--success) !important;
  background:rgba(34,201,122,.18) !important;
  color:#126d42 !important;
}
body.tema-claro .tarefa-card-bot--accent{
  background:#e8f5ee !important;
}

/* ── VIEW TOGGLE (cards / lista) ── */
.view-btns{ display:flex; gap:3px; }
.view-btn{
  padding:5px 10px; border:1.5px solid var(--border); border-radius:7px;
  background:var(--surface); cursor:pointer; color:var(--muted);
  font-size:12px; transition:.15s; line-height:1;
}
.view-btn:hover{ border-color:var(--accent); color:var(--accent2); }
.view-btn.ativo{ border-color:var(--accent); color:var(--accent2); background:rgba(var(--primary-rgb),.10); }

/* ── TABELA ADMIN (lista de tarefas / metas em modo lista) ── */
.admin-table{
  width:100%; border-collapse:collapse; font-size:12px;
  table-layout:fixed;
}
.admin-table th,
.admin-table td{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.admin-table th{
  padding:7px 9px; text-align:left;
  background:#1A4080; color:#fff;
  font-weight:600; font-size:11px;
  border-bottom:none;
  white-space:normal;
}
body.tema-claro .admin-table th{
  background:#1A4080; color:#fff;
}
body.tema-escuro .admin-table th{
  background:#0f2855; color:#d8e8ff;
}
.admin-table th:first-child{ border-radius:8px 0 0 0; }
.admin-table th:last-child { border-radius:0 8px 0 0; }
.admin-table td{
  padding:7px 9px; border-bottom:1px solid var(--border);
  vertical-align:middle;
  white-space:normal;
}
.admin-table tbody tr:hover td{ background:rgba(var(--primary-rgb),.04); }
.admin-table .act-cell{ white-space:normal; text-align:right; }
.admin-table .peso-bar{
  display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle;
}

/* ── META NOTIF REGRAS ── */
.regra-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; transition:.2s;
  display:flex; flex-direction:column; /* alinha botões no rodapé */
  min-width:0;
  box-sizing:border-box;
}
.regra-card:hover{ border-color:var(--accent); }
.regra-card-header{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.regra-card-title{ font-weight:700; font-size:14px; line-height:1.35; word-break:break-word; }
.regra-card-pills{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gatilho-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.gatilho-horario{ background:rgba(74,159,255,.12); color:var(--accent2); border:1px solid rgba(74,159,255,.3); }
.gatilho-pct{ background:rgba(34,201,122,.10); color:var(--success); border:1px solid rgba(34,201,122,.25); }
.gatilho-dias{ background:rgba(255,171,0,.10); color:var(--warn); border:1px solid rgba(255,171,0,.25); }
.gatilho-sem-lanc{ background:rgba(255,77,77,.10); color:var(--danger); border:1px solid rgba(255,77,77,.25); }
/* status filter buttons no modal de detalhe */
.mrd-status-btn{ border-radius:20px!important; }
.mrd-status-btn.ativo{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }
/* Botões de dia da semana */
.regra-dia-btn{
  padding:5px 11px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface); color:var(--muted);
  transition:all .15s; user-select:none;
}
body.tema-claro .regra-dia-btn{ background:#f4f6fa; color:#8a9ab5; border-color:#C8D8EE; }
.regra-dia-btn.ativo{ border-color:var(--accent); background:rgba(var(--primary-rgb),.12); color:var(--accent2); }
body.tema-claro .regra-dia-btn.ativo{ border-color:#1E6FD9; background:rgba(var(--primary-rgb),.10); color:#1E6FD9; }
/* hover mais visível nos cards de regra */
.regra-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,.12); transform:translateY(-1px); }

/* Rodapé do card de regra (Metas → Notificações): uma linha — Editar | Fila | Disparar | Excluir
   Editar/Fila partilham espaço; Disparar só largura do conteúdo (não estica como 1.35fr) */
.regra-card > .card-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content 34px;
  gap:6px 8px;
  align-items:stretch;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:auto;
  padding-top:12px;
  box-sizing:border-box;
  overflow:visible;
}
.regra-card > .card-actions .regra-btn:not(.icon-only){
  justify-content:center;
  padding:6px 12px;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  box-sizing:border-box;
  min-width:0;
  width:100%;
}
/* Disparar: não ocupar coluna larga — centrar na célula max-content */
.regra-card > .card-actions .regra-btn:not(.icon-only):nth-child(3){
  width:auto;
  min-width:min(100%,7.5rem);
  justify-self:center;
  padding-left:14px;
  padding-right:14px;
}
.regra-card > .card-actions .regra-btn .btn-lbl{
  overflow:visible;
  text-overflow:unset;
  white-space:nowrap;
  flex-shrink:0;
}
.regra-card > .card-actions .regra-btn.icon-only{
  width:34px;
  min-width:34px;
  max-width:34px;
  padding:5px 0;
  justify-content:center;
  grid-column:4;
}

/* ── BOTÕES SVG DAS REGRAS ── */
.regra-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; font-size:12px; font-weight:600;
}
.regra-btn svg{ flex-shrink:0; }
.regra-btn.icon-only{ padding:5px 8px; }
.btn-lbl{ white-space:nowrap; }
/* Em telas ≤ 480px: esconde o texto, mantém só o ícone */
@media(max-width:480px){
  .regra-btn .btn-lbl{ display:none; }
  .regra-btn{ padding:5px 8px; }
}
.proximidade-bar{ height:5px; border-radius:3px; background:var(--border); overflow:hidden; }
.proximidade-bar-fill{ height:100%; border-radius:3px; transition:width .5s ease; }
.meta-progress-wrap{ margin-top:auto; padding-top:12px; }
.meta-progress-bar-bg{ height:5px; border-radius:3px; background:var(--border); overflow:hidden; }
.meta-progress-bar-fill{ height:100%; border-radius:3px; transition:width .4s; }

/* ── PERMISSÕES (Cargo — layout tipo CRM / Nectar-like) ──────── */
.modal-cargo-permissoes.modal{
  max-width:620px;
  width:94vw;
}
.nc-permissoes-shell{
  margin-top:12px;
}
.perm-sheet-intro{
  font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px;
}
.perm-sheet-scroll{
  max-height:min(58vh,480px);
  overflow-y:auto;
  padding-right:4px;
  margin-right:-2px;
}
.perm-sheet-group{
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  background:var(--surface2);
}
.perm-sheet-group--warn{
  border-color:rgba(232,123,0,.4);
  box-shadow:inset 0 0 0 1px rgba(232,123,0,.08);
}
.perm-sheet-group--embed{ background:var(--card); }
body.tema-claro .perm-sheet-group{ background:#fafbfd; }
body.tema-claro .perm-sheet-group--embed{ background:#fff; }
.perm-sheet-group-hd{
  padding:10px 12px 9px;
  background:rgba(var(--primary-rgb),.07);
  border-bottom:1px solid var(--border);
}
body.tema-claro .perm-sheet-group-hd{ background:rgba(var(--primary-rgb),.06); }
.perm-sheet-group-title{
  font-size:12px; font-weight:800; color:var(--text);
  text-transform:uppercase; letter-spacing:.04em;
}
.perm-sheet-group-sub{
  display:block;
  margin-top:3px;
  font-size:11px; font-weight:500;
  color:var(--muted);
  line-height:1.35;
  text-transform:none;
  letter-spacing:0;
}
.perm-sheet-rows{ padding:0; }
.perm-sheet-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .12s;
}
.perm-sheet-row:last-child{ border-bottom:none; }
.perm-sheet-row:hover{ background:rgba(255,255,255,.04); }
body.tema-claro .perm-sheet-row:hover{ background:rgba(13,43,94,.04); }
.perm-sheet-row--readonly{
  cursor:default;
  pointer-events:none;
}
.perm-sheet-row--readonly:hover{ background:transparent; }
body.tema-claro .perm-sheet-row--readonly:hover{ background:transparent; }
.perm-sheet-row-txt{ min-width:0; flex:1; }
.perm-sheet-row-name{
  font-size:13px; font-weight:700; color:var(--text);
  display:block; line-height:1.25;
}
.perm-sheet-row-name--warn{ color:var(--warn); }
.perm-sheet-row-desc{
  font-size:11px; color:var(--muted);
  margin-top:3px; line-height:1.4; display:block;
}
.perm-sheet-check{
  width:18px; height:18px;
  accent-color:var(--accent);
  cursor:pointer;
  flex-shrink:0;
  margin:0;
}
.user-perm-list--perm-sheet{
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
}

/* ── Árvore de permissão por página (piloto Logística) ── */
.perm-sheet-subrows{
  padding-left:34px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}
body.tema-claro .perm-sheet-subrows{ background:rgba(13,43,94,.02); }
.perm-sheet-subrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 12px;
  border-top:1px solid var(--border);
  cursor:pointer;
  transition:background .12s;
}
.perm-sheet-subrow:first-child{ border-top:none; }
.perm-sheet-subrow:hover{ background:rgba(255,255,255,.04); }
body.tema-claro .perm-sheet-subrow:hover{ background:rgba(13,43,94,.04); }
.perm-sheet-subrow--readonly{ cursor:default; pointer-events:none; }
.perm-sheet-subrow .perm-sheet-row-name{ font-size:12px; font-weight:600; }

/* ── PERMISSÕES (grid legado — ainda usado em outros pontos se houver) ── */
.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:12px; }
.perm-item{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:8px; cursor:pointer;
  transition:border-color .15s;
}
.perm-item:hover{ border-color:var(--accent); }
.perm-item input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
.perm-item label{ font-size:13px; color:var(--text); cursor:pointer; }

/* ── STATUS WPP ── */
.wpp-status{ display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; }
.wpp-dot{ width:10px; height:10px; border-radius:50%; }
.wpp-dot.ok{ background:var(--success); }
.wpp-dot.err{ background:var(--danger); }
.wpp-dot.warn{ background:var(--warn); }

/* ── Central de Integrações / Nectar CRM ── */
.nectar-hub-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}

.nectar-usage-strip{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.nectar-usage-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.nectar-usage-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.nectar-usage-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}
.nectar-usage-chip b{ color:var(--text); font-weight:900; }
.nectar-usage-chip.err{ border-color:rgba(220,53,69,.35); background:rgba(220,53,69,.08); }
/* Chip de erros clicável — Central de integrações */
button.nectar-usage-chip.nectar-usage-chip--btn{
  cursor:pointer;
  font:inherit;
  font-family:inherit;
  margin:0;
  outline:none;
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
button.nectar-usage-chip.nectar-usage-chip--btn:hover{
  border-color:rgba(220,53,69,.55);
  box-shadow:0 1px 0 rgba(220,53,69,.12);
}
button.nectar-usage-chip.nectar-usage-chip--btn:focus-visible{
  box-shadow:0 0 0 2px rgba(59,130,246,.45);
}
button.nectar-usage-chip.nectar-usage-chip--btn:active{
  transform:translateY(1px);
}
.nectar-hub-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 18px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(var(--primary-rgb),.09);
}
.nectar-hub-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.nectar-hub-logo{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  background:#1E6FD9;
  color:#fff;
  box-shadow:0 4px 14px rgba(var(--primary-rgb),.35);
}
.nectar-hub-logo--pipefy{
  background:#7c3aed;
  box-shadow:0 4px 14px rgba(124,58,237,.35);
}
.nectar-hub-head--spread{
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.nectar-hub-head--spread .nectar-hub-brand{
  flex:1;
  min-width:0;
}

/* ── Central de Integrações — hub layout ── */
.panel-inner--integracoes .integ-hub-hero{
  margin:0 0 14px;
  padding:18px 18px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(var(--primary-rgb),.12);
}
.integ-hub-kicker{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;
}
.integ-hub-title{
  font-size:22px;font-weight:900;letter-spacing:-.35px;color:var(--text);margin:0 0 10px;line-height:1.15;
}
.integ-hub-lead{
  font-size:13px;color:var(--muted);line-height:1.55;margin:0;max-width:820px;font-weight:500;
}
.integ-hub-tip{
  margin-bottom:14px !important;
}
.integ-whitelabel{
  margin:0 0 14px;
  border-radius:12px;
  border:1px solid rgba(var(--primary-rgb),.28);
  background:var(--surface2);
  overflow:hidden;
}
.integ-whitelabel-sum{
  cursor:pointer;
  list-style:none;
  font-size:12px;font-weight:800;color:var(--accent2);
  padding:12px 14px;margin:0;
}
.integ-whitelabel-sum::-webkit-details-marker{ display:none; }
.integ-whitelabel-body{
  padding:0 14px 14px;
}
.integ-whitelabel-grid{
  display:flex;flex-direction:column;gap:10px;margin:12px 0;
}
.integ-whitelabel-row{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text);cursor:pointer;line-height:1.35;
}
.integ-whitelabel-row input[type="checkbox"]{
  margin-top:3px;accent-color:var(--accent);flex-shrink:0;
}
.integ-whitelabel-row > span{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.integ-whitelabel-row .integ-whitelabel-title{
  font-size:13px;font-weight:700;color:var(--text);line-height:1.3;
}
.integ-whitelabel-row .integ-whitelabel-title strong{ font-weight:700;color:var(--accent2); }
.integ-whitelabel-row .integ-whitelabel-desc{
  font-size:11px;color:var(--muted);line-height:1.45;
}
.integ-whitelabel-actions{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px;
}
.integ-section-toolbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 12px;
}
.integ-section-copy{ flex:1;min-width:min(100%,280px); }
.integ-section-title{
  font-size:14px;font-weight:900;color:var(--text);margin:0 0 4px;letter-spacing:-.2px;
}
.integ-section-sub,.integ-section-intro .integ-section-sub{
  font-size:12px;color:var(--muted);line-height:1.45;margin:0;max-width:640px;
}
.integ-section-intro{ margin-bottom:10px; }
.integ-section--hub-api{ margin-top:8px; }
.integ-custom-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
  margin-bottom:8px;
}
.integ-native-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:16px;
  align-items:start;
}
.integ-native-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.integ-native-card{
  margin-top:0 !important;
}
.integ-nectar-resultado{
  margin-top:0;
  font-size:13px;
}
.integ-hub-logo-slot img{
  border-radius:8px;
}
.integ-details-adv{
  padding:0;border:none;background:transparent;
}
.integ-details-adv .integ-details-sum{
  cursor:pointer;
  list-style:none;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.55px;
  color:var(--muted);margin:0;padding:10px 12px;border-radius:10px;
  border:1px dashed var(--border);background:var(--surface);
}
.integ-details-adv .integ-details-sum::-webkit-details-marker{ display:none; }
.integ-details-adv[open] .integ-details-sum{
  border-style:solid;border-color:rgba(var(--primary-rgb),.35);
}
.integ-custom-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.integ-custom-card:hover{
  border-color:rgba(var(--primary-rgb),.28);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.integ-custom-card-head{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;
}
.integ-custom-card-ico{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;font-size:18px;
}
.integ-custom-card-main{ flex:1;min-width:0; }
.integ-custom-card-title{
  font-size:14px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.integ-custom-card-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(220px,55vw);
}
.integ-custom-card-id{ font-size:11px;color:var(--muted);margin-top:2px; }
.integ-custom-card-actions{
  display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;justify-content:flex-end;
}
.integ-custom-card-desc{
  font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.45;
}
.integ-custom-card-console{
  font-size:12px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
@media (max-width:720px){
  .integ-section-toolbar .btn-primary{ width:100%;justify-content:center; }
  .integ-native-grid{ grid-template-columns:1fr; }
}
.nectar-hub-titles{ min-width:0; }
.nectar-hub-name{ font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--text); }
.nectar-hub-sub{ font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35; }
.nectar-status-strip{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  margin:0 0 4px;
}
.nectar-status-strip .nectar-status-core{ flex:1;min-width:0;display:flex;gap:10px;align-items:flex-start; }
.nectar-status-strip .nectar-status-textwrap{ flex:1;min-width:0; }
.hub-integ-status-line{
  font-weight:700;font-size:13px;line-height:1.35;color:var(--text);
}
.nectar-status-strip #nectar-status-txt.hub-integ-status-line{
  font-weight:700;font-size:13px;line-height:1.35;color:var(--text);
}
.integ-hub-stats-caption{
  display:block;margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--muted);
  font-weight:500;
}
.integ-hub-stats-caption strong{
  font-weight:700;color:var(--text);
}
.nectar-stats-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;
}
.nectar-chip.nectar-chip--click{
  cursor:pointer;font:inherit;font-family:inherit;
  appearance:none;-webkit-appearance:none;
  transition:opacity .12s ease,filter .12s ease,transform .06s ease;
}
.nectar-chip.nectar-chip--click:hover{
  filter:brightness(1.06);
}
.nectar-chip.nectar-chip--click:active{
  transform:translateY(1px);
}
.nectar-chip.nectar-chip--click:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.nectar-status-strip--placeholder{
  opacity:.92;
}
.nectar-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:600;
  background:var(--bg);border:1px solid var(--border);color:var(--muted2);
}
.nectar-chip b{ font-weight:800;color:var(--text);font-size:12px; }
.nectar-chip.ok b{ color:var(--success); }
.nectar-chip.warn b{ color:var(--warn); }
.nectar-chip.err b{ color:var(--danger); }
.nectar-hub-body{ padding:4px 18px 16px; }
.nectar-sec{
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.nectar-sec:last-of-type{ border-bottom:none;padding-bottom:4px; }
.nectar-sec-title{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.55px;
  color:var(--muted);margin:0 0 10px;
}
.nectar-sec-hint{ font-size:11px;color:var(--muted);line-height:1.45;margin-top:8px; }
.nectar-toggle-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;margin-top:4px;
}
.nectar-toggle-row input{ margin-top:2px; accent-color:var(--accent); width:17px;height:17px;flex-shrink:0; }
.nectar-toggle-row .nectar-toggle-lbl{ font-size:13px;font-weight:700;color:var(--text); }
.nectar-toggle-row .nectar-toggle-sub{ font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;font-weight:500; }
.nectar-actions{ display:flex;flex-direction:column;gap:10px; }
.nectar-actions-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.nectar-actions-row.nectar-actions-primary .btn-primary{ min-height:38px;padding-left:16px;padding-right:16px; }
.nectar-actions-note{ font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px; }
/* Token CRM — referência visual tipo console Nectar (mascarado + ações) */
.nectar-token-chip-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(13,43,94,.04);
}
.nectar-token-pill-ok{
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--success);
  background:rgba(34,201,122,.12);
  border:1px solid rgba(34,201,122,.35);
  padding:4px 10px;
  border-radius:999px;
  flex-shrink:0;
}
.nectar-token-code{
  flex:1;
  min-width:0;
  font-size:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nectar-token-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.nectar-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.nectar-ic:hover{
  background:var(--surface);
  border-color:var(--accent);
  color:var(--accent);
}
.nectar-token-input-area .nectar-token-field-wrap{
  display:flex;
  gap:10px;
  align-items:stretch;
  flex-wrap:wrap;
}
.nectar-token-input-area .nectar-token-field-wrap .form-input{
  flex:1;
  min-width:200px;
}
.nectar-token-input-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.nectar-link-action{
  background:none;
  border:none;
  padding:0;
  font-size:12px;
  font-weight:700;
  color:var(--accent2);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.nectar-link-action:hover{ color:var(--accent); }
.nectar-team-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.nectar-team-bar .btn-primary{ min-width:0; }
.nectar-sec-muted{
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:6px;
}
.nectar-sec-muted .nectar-sec-title{
  color:var(--text);
  font-weight:800;
}
.nectar-sec-muted .nectar-actions-note{
  color:var(--muted2);
}

.nectar-sec-danger{
  margin-top:4px;padding-top:12px;
  border-top:1px dashed rgba(255,68,85,.25);
}
.nectar-sec-danger .nectar-sec-title{ color:var(--danger); }

/* ── Pipefy · aba Conexão e webhooks ── */
.pipefy-cfg-hero{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;margin-bottom:20px;
  background:rgba(var(--primary-rgb),.09);
  border:1px solid rgba(var(--primary-rgb),.2);
}
.pipefy-cfg-hero-ico{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--primary-rgb),.14);color:var(--accent2);font-size:22px;
}
.pipefy-cfg-hero-title{ font-size:16px;font-weight:800;margin:0 0 6px;color:var(--text);letter-spacing:-.02em; }
.pipefy-cfg-hero-lead{ font-size:13px;line-height:1.55;color:var(--muted2);margin:0 0 10px; }
.pipefy-cfg-hero-steps{
  margin:0;padding-left:18px;font-size:12px;line-height:1.6;color:var(--muted);font-weight:600;
}
.pipefy-cfg-hero-steps li{ margin-bottom:4px; }

.pipefy-cfg-section{ margin-bottom:24px; }
.pipefy-cfg-section-cap{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;
}
.pipefy-cfg-section-num{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-weight:800;font-size:14px;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.25);
}
.pipefy-cfg-section-num.pipefy-cfg-section-num--muted{
  background:var(--surface2);color:var(--text);border:1px solid var(--border);box-shadow:none;
}
.pipefy-cfg-section-titles h3{
  font-size:15px;font-weight:800;margin:0;color:var(--text);letter-spacing:-.02em;
}
.pipefy-cfg-section-titles p{
  font-size:12px;color:var(--muted);line-height:1.5;margin:4px 0 0;max-width:52ch;
}

.pipefy-cfg-process-list{ display:flex;flex-direction:column;gap:12px; }
.pipefy-cfg-process-card{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface);box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.pipefy-cfg-process-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;background:var(--surface2);border-bottom:1px solid var(--border);
}
.pipefy-cfg-process-name{ font-weight:800;font-size:14px;color:var(--text); }
.pipefy-cfg-process-id{
  font-size:11px;font-weight:600;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;
  padding:4px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border);
}
.pipefy-cfg-process-body{ padding:12px 14px;display:flex;flex-direction:column;gap:10px; }
.pipefy-cfg-process-body .nectar-toggle-row{ margin-top:0; }
.pipefy-cfg-note{
  font-size:11px;color:var(--muted);line-height:1.45;margin:2px 0 0 27px;
  padding:8px 10px;border-radius:8px;background:var(--bg);border:1px dashed var(--border);
}

.pipefy-cfg-webhook-card{
  border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:var(--surface);
}
.pipefy-webhook-layout{
  display:flex;flex-direction:column;gap:14px;
}
.pipefy-webhook-field{ min-width:0; display:flex; flex-direction:column; gap:0;
}
.pipefy-webhook-field--full .form-input{
  width:100%; box-sizing:border-box;
}
.pipefy-webhook-lbl{
  font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px;display:block;
}
.pipefy-webhook-lbl-opt{ font-weight:600;opacity:.85; }
.pipefy-webhook-hint{
  font-size:11px;color:var(--muted);margin:6px 0 0;line-height:1.45;max-width:56rem;
}
.pipefy-webhook-hint code{
  font-size:10px;padding:1px 5px;border-radius:4px;background:var(--bg);border:1px solid var(--border);
}
.pipefy-webhook-toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;
}
.pipefy-webhook-field--grow{
  flex:1 1 min(100%,280px);min-width:0;
}
.pipefy-webhook-field--grow .form-input{
  width:100%; box-sizing:border-box; min-height:40px;
}
.pipefy-webhook-actions-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  flex:0 0 auto;margin-left:auto;
}
.pipefy-webhook-actions-row .btn{ white-space:nowrap; }
@media(max-width:640px){
  .pipefy-webhook-actions-row{
    margin-left:0;width:100%;
    justify-content:stretch;
  }
  .pipefy-webhook-actions-row .btn{
    flex:1 1 calc(50% - 4px);justify-content:center;
  }
}
.pipefy-cfg-webhook-actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:12px;
}
.pipefy-cfg-webhook-actions .btn-primary{ min-height:40px; }
.pipefy-cfg-details{
  margin-top:12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);
  font-size:12px;
}
.pipefy-cfg-details > summary{
  cursor:pointer;padding:10px 14px;font-weight:700;color:var(--text);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.pipefy-cfg-details > summary::-webkit-details-marker{ display:none; }
.pipefy-cfg-details[open] > summary{ border-bottom:1px solid var(--border); }
.pipefy-cfg-details-body{ padding:12px 14px 14px;color:var(--muted);line-height:1.55;font-weight:500; }
.pipefy-cfg-details-body code{
  font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg);border:1px solid var(--border);
}

/* ── Pipefy · Cards recebidos (lista + cartões) ── */
.pipefy-cards-lead{
  font-size:13px;line-height:1.55;color:var(--muted2);margin:0 0 14px;max-width:820px;
}
.pipefy-cards-toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px;
  margin-bottom:14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.pipefy-cards-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;flex:1;min-width:min(100%,280px);
}
.pipefy-cards-filtro-field{ display:flex;flex-direction:column;gap:4px;min-width:140px; }
.pipefy-cards-filtro-field--narrow{ min-width:128px; }
.pipefy-cards-filtro-field label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
}
.pipefy-cards-filtro-field .filtro-sel{
  min-height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg);font-size:13px;
}
.pipefy-cards-view-toggle{
  display:inline-flex;border-radius:12px;border:1px solid var(--border);overflow:hidden;background:var(--bg);
}
.pipefy-view-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;
  border:none;background:transparent;color:var(--muted2);cursor:pointer;transition:background .15s,color .15s;
}
.pipefy-view-btn:hover{ color:var(--text);background:rgba(255,255,255,.04); }
.pipefy-view-btn.ativo{
  background:rgba(var(--primary-rgb),.14);color:var(--accent2);box-shadow:inset 0 -2px 0 var(--accent);
}
.pipefy-cards-table-shell{ margin-bottom:0; }
.pipefy-cards-table-inner.table-wrap{ border-radius:14px;border:1px solid var(--border);overflow:auto;background:var(--surface); }
.pipefy-cards-table thead th{
  /* Mesmo padrão visual das demais tabelas do sistema (azul escuro + texto branco) */
  position:sticky;top:0;z-index:2;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:10px 12px;
  background:var(--brand);color:#fff;border-bottom:none;
}
body.tema-claro .pipefy-cards-table thead th{
  background:#1A4080;color:#fff;
}
.pipefy-cards-table tbody td{ padding:10px 12px;font-size:13px;vertical-align:top;border-bottom:1px solid var(--border); }
.pipefy-cards-tr:last-child td{ border-bottom:none; }
.pipefy-cards-td-card{ min-width:140px; }
.pipefy-card-id-row{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.pipefy-card-id{
  font-family:ui-monospace,'Cascadia Code',monospace;font-size:12px;font-weight:600;color:var(--text);word-break:break-all;
}
.pipefy-card-open{
  display:inline-flex;color:var(--accent2);opacity:.85;flex-shrink:0;
}
.pipefy-card-open:hover{ opacity:1; }
.pipefy-card-title-hint{
  font-size:11px;color:var(--muted2);line-height:1.35;margin-top:4px;max-width:280px;
}
.pipefy-badge{
  display:inline-block;font-size:12px;font-weight:600;padding:3px 8px;border-radius:8px;line-height:1.2;
}
.pipefy-badge--muted{
  background:rgba(100,116,139,.1);border:1px solid rgba(100,116,139,.2);color:var(--text);
}
.pipefy-badge--event{
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.22);color:#818cf8;
}
.pipefy-proc-pill{
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);
  color:var(--p, var(--warn));
}
.pipefy-cards-td-time{
  white-space:nowrap;font-size:11px;color:var(--muted);
}
.pipefy-cards-td-time time{ display:inline-block;margin-right:6px; }
.pipefy-btn-sync{ margin-left:2px;padding:4px 8px!important;min-height:0!important; }
.pipefy-cards-loading,.pipefy-cards-empty,.pipefy-cards-err,.pipefy-cards-placeholder{
  padding:20px;text-align:center;color:var(--muted);font-size:13px;
}
.pipefy-cards-err{ color:var(--danger); }
.pipefy-cards-grid-shell{ margin-top:4px; }
.pipefy-cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.pipefy-card-tile{
  border:1px solid var(--border);border-radius:16px;padding:14px 16px;background:var(--surface);
  display:flex;flex-direction:column;gap:10px;min-height:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:border-color .15s,box-shadow .15s;
}
.pipefy-card-tile:hover{
  border-color:rgba(var(--primary-rgb),.35);box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.pipefy-card-tile-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.pipefy-card-tile-title{
  font-size:15px;font-weight:800;margin:0;line-height:1.25;color:var(--text);letter-spacing:-.02em;
}
.pipefy-card-tile-id{
  font-size:11px;font-family:ui-monospace,monospace;color:var(--muted);margin-top:4px;word-break:break-all;
}
.pipefy-card-tile-open{ color:var(--accent2);flex-shrink:0;opacity:.9; }
.pipefy-card-tile-open:hover{ opacity:1; }
.pipefy-card-tile-dl{
  margin:0;display:grid;gap:8px;font-size:13px;
}
.pipefy-card-tile-dl div{ display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:start; }
.pipefy-card-tile-dl dt{
  margin:0;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
}
.pipefy-card-tile-dl dd{ margin:0;font-weight:600;color:var(--text); }
.pipefy-card-tile-foot{
  margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;
  border-top:1px solid var(--border);
}
.pipefy-card-tile-date{ font-size:11px;color:var(--muted);flex:1;min-width:120px; }
.pipefy-cards-empty--grid{ grid-column:1/-1;margin:0;padding:32px; }

/* ── Pipefy · Dashboard avançado ── */
.pipefy-insights-hero{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 18px;
  padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  margin:0 0 14px;
}
.pipefy-insights-hero-title{ font-size:16px;font-weight:900;letter-spacing:-.02em;color:var(--text); }
.pipefy-insights-hero-sub{ font-size:12px;color:var(--muted2);margin-top:2px;max-width:820px;line-height:1.45; }
.pipefy-insights-hero-actions{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.pipefy-insights-range{
  display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg);
}
.pipefy-insights-range-btn{
  padding:7px 12px;border:none;background:transparent;color:var(--muted2);font-weight:700;font-size:12px;cursor:pointer;
}
.pipefy-insights-range-btn:hover{ background:rgba(255,255,255,.04);color:var(--text); }
.pipefy-insights-range-btn.ativo{ background:rgba(var(--primary-rgb),.14);color:var(--accent2);box-shadow:inset 0 -2px 0 var(--accent); }
.pipefy-insights-custom-wrap{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);
}
.pipefy-insights-custom-wrap.ativo{ border-color:rgba(var(--primary-rgb),.45);box-shadow:0 0 0 1px rgba(var(--primary-rgb),.12); }
.pipefy-insights-custom-lbl{ font-size:11px;font-weight:700;color:var(--muted); }
.pipefy-insights-date-input{
  min-height:34px;padding:4px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;
}
.pipefy-insights-toolbar{
  margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface2);
}
.pipefy-insights-toolbar-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
}
.pipefy-insights-toolbar-lbl{
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
}
.pipefy-insights-pipe-select{
  min-width:min(100%,300px);max-width:420px;min-height:38px;border-radius:10px;
}
.pipefy-insights-toolbar-hint{
  margin:8px 0 0;font-size:11.5px;color:var(--muted2);line-height:1.45;max-width:52rem;
}
.pipefy-insights-banner{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.08);color:var(--warn);font-size:12.5px;font-weight:650;margin-bottom:12px;
}
.pipefy-insights-details-intro{
  padding:10px 12px 0;font-size:12px;line-height:1.5;color:var(--muted2);border-bottom:1px solid var(--border);
}
.pipefy-insights-details-intro p{ margin:0 0 10px; }
.pipefy-insights-details-tip{
  font-size:11.5px;color:var(--muted);margin-top:-4px!important;
}
.pipefy-insights-wrap{ display:flex;flex-direction:column;gap:14px; }
.pipefy-insights-loading,.pipefy-insights-err,.pipefy-insights-empty{
  padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  color:var(--muted2);font-size:13px;text-align:center;
}
/* Ícone loader (Lucide) — rotação contínua em qualquer tela que use ico('loader') */
svg.ico-loader{
  display:inline-block;vertical-align:-0.2em;flex-shrink:0;
  animation:go-ico-loader-spin .85s linear infinite;
  transform-origin:50% 50%;
}
@keyframes go-ico-loader-spin{ to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce){
  svg.ico-loader{ animation:none; }
}
.pipefy-insights-err{ color:var(--danger); }
.pipefy-insights-pipe{
  border:1px solid var(--border);border-radius:18px;background:var(--surface);
  padding:14px 16px;display:flex;flex-direction:column;gap:12px;
}
.pipefy-insights-pipe-head{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px; }
.pipefy-insights-pipe-title{ font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.02em; }
.pipefy-insights-pipe-meta{ font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em; }
.pipefy-insights-warn{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.08);color:var(--warn);font-size:12px;font-weight:650;
}
.pipefy-insights-zero-hint{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(59,130,246,.28);
  background:rgba(59,130,246,.08);color:var(--text);font-size:12px;font-weight:650;line-height:1.45;margin-bottom:2px;
}
body.tema-claro .pipefy-insights-zero-hint{
  background:rgba(59,130,246,.07);
}
.pipefy-insights-kpis{
  align-items:stretch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
}
.pipefy-insights-kpis-inner{
  display:contents;
}
.pipefy-insights-kpi-add{
  grid-column:1/-1;
  justify-self:start;
  align-self:start;
  margin-top:2px;
}
.pipefy-insights-kpis--admin .pipefy-insights-kpi{
  padding-top:10px;
}
.pipefy-insights-kpi{
  border:1px solid var(--border);border-radius:14px;padding:12px 12px;background:var(--bg);
  position:relative;
}
.pipefy-insights-kpi--drill{
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.pipefy-insights-kpi--drill:hover{
  border-color:rgba(59,130,246,.35);
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
.pipefy-insights-kpi--drill:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:2px;
}
.pipefy-insights-kpi--admin.pipefy-insights-kpi--dragging{
  opacity:.72;
  outline:2px dashed rgba(59,130,246,.45);
}
.pipefy-insights-kpi-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.pipefy-insights-kpi-top .pipefy-insights-kpi-title{
  flex:1;min-width:0;line-height:1.25;
}
.pipefy-insights-kpi-actions:empty{
  display:none;
}
.pipefy-insights-hero-actions .pipefy-insights-personalizar-btn.ativo,
#com-visao-hero-actions .pipefy-insights-personalizar-btn.ativo{
  border-color:rgba(59,130,246,.5);
  background:rgba(59,130,246,.12);
  color:var(--accent2);
}
body.tema-claro .pipefy-insights-hero-actions .pipefy-insights-personalizar-btn.ativo,
body.tema-claro #com-visao-hero-actions .pipefy-insights-personalizar-btn.ativo{
  background:rgba(37,99,235,.1);
}
.pipefy-insights-kpi-actions{
  display:flex;align-items:flex-start;gap:2px;flex-shrink:0;
  margin-top:-3px;
}
.pipefy-insights-kpi-tools{
  display:flex;align-items:center;gap:0;
  margin-right:2px;
}
.pipefy-insights-kpi-grip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 4px;margin:-2px 0 0 -4px;border-radius:6px;
  cursor:grab;color:var(--muted);opacity:.85;
}
.pipefy-insights-kpi-grip:active{ cursor:grabbing; }
.pipefy-insights-kpi-tool-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px;border:none;background:transparent;border-radius:8px;
  color:var(--muted);cursor:pointer;line-height:0;
}
.pipefy-insights-kpi-tool-btn:hover{
  background:rgba(148,163,184,.14);color:var(--text);
}
.pipefy-insights-kpi-gear{ flex-shrink:0;margin-top:-2px; }
.pipefy-insights-kpi-title{ font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); }
.pipefy-insights-kpi-val{ font-size:20px;font-weight:900;margin-top:6px;color:var(--text);letter-spacing:-.02em; }
.pipefy-insights-kpi-hint{ font-size:11px;color:var(--muted2);margin-top:4px;line-height:1.35; }

/* Drilldown Pipefy · painel “Colunas” (popover ao lado do botão) */
.pipefy-kpi-drill-colunas-pop{
  position:absolute;right:0;top:calc(100% + 8px);
  width:min(440px,calc(100vw - 28px));
  max-height:min(580px,calc(100vh - 120px));
  z-index:40;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  overflow:hidden;
}
.pipefy-kpi-drill-colunas-pop-head{
  flex-shrink:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.05);
}
body.tema-claro .pipefy-kpi-drill-colunas-pop-head{
  background:rgba(0,0,0,.04);
}
.pipefy-kpi-drill-colunas-pop-kicker{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);
  margin:0 0 2px;
}
.pipefy-kpi-drill-colunas-pop-title{
  font-size:14px;font-weight:900;letter-spacing:-.02em;color:var(--text);line-height:1.2;
}
.pipefy-kpi-drill-colunas-pop-scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  padding:12px 14px 14px;
  -webkit-overflow-scrolling:touch;
}
.pipefy-kpi-drill-colunas-sec-title{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 0 6px;
}
.pipefy-kpi-drill-colunas-sec-title--tight{ margin-top:0; }
.pipefy-kpi-drill-colunas-sec-micro{
  font-size:11px;color:var(--muted2);line-height:1.45;margin:-2px 0 10px;
}
.pipefy-kpi-drill-col-fixed-list{
  display:flex;flex-direction:column;gap:2px;
  padding:4px;border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(0,0,0,.06);
}
body.tema-claro .pipefy-kpi-drill-col-fixed-list{
  background:rgba(0,0,0,.03);
}
.pipefy-kpi-drill-col-check-row,
.pipefy-kpi-drill-col-campo-row{
  display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
  padding:8px 10px;margin:0;border-radius:10px;cursor:pointer;
  border:1px solid transparent;min-height:0;
}
.pipefy-kpi-drill-col-check-row:hover,
.pipefy-kpi-drill-col-campo-row:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.12);
}
body.tema-claro .pipefy-kpi-drill-col-check-row:hover,
body.tema-claro .pipefy-kpi-drill-col-campo-row:hover{
  background:rgba(0,0,0,.04);
}
.pipefy-kpi-drill-col-check-row input,
.pipefy-kpi-drill-col-campo-row input{
  width:16px;height:16px;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent);cursor:pointer;
}
.pipefy-kpi-drill-col-check-lbl,
.pipefy-kpi-drill-col-campo-lbl{
  font-size:12.5px;line-height:1.4;color:var(--text);word-break:break-word;min-width:0;
}
.pipefy-kpi-drill-colunas-sec{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
}
.pipefy-kpi-drill-colunas-busca-wrap{
  position:sticky;top:0;z-index:2;margin-bottom:10px;padding-bottom:2px;
  background:var(--card);
}
.pipefy-kpi-drill-colunas-busca{
  width:100%;font-size:13px!important;
}
.pipefy-kpi-drill-col-grupo{
  margin-top:12px;
}
.pipefy-kpi-drill-col-grupo:first-of-type{ margin-top:4px; }
.pipefy-kpi-drill-col-grupo-head{
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent2);padding:6px 10px 8px;margin:0 0 4px;
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  background:rgba(56,189,248,.12);
  line-height:1.35;word-break:break-word;
}
body.tema-claro .pipefy-kpi-drill-col-grupo-head{
  background:rgba(var(--primary-rgb),.1);
}
.pipefy-kpi-drill-col-grupo-rows{
  display:flex;flex-direction:column;gap:2px;
}
.pipefy-kpi-drill-colunas-foot-hint{
  font-size:11px;color:var(--muted2);line-height:1.45;margin:14px 0 0;padding-top:10px;
  border-top:1px dashed rgba(148,163,184,.2);
}
.pipefy-kpi-drill-colunas-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;flex-shrink:0;
  border:1px solid rgba(56,189,248,.42);border-radius:11px;
  background:var(--card);color:var(--accent);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .12s ease,color .15s ease;
}
.pipefy-kpi-drill-colunas-trigger:hover{
  border-color:var(--accent);
  background:rgba(56,189,248,.1);
  box-shadow:0 0 0 3px rgba(56,189,248,.14);
}
.pipefy-kpi-drill-colunas-trigger:active{ transform:scale(0.96); }
.pipefy-kpi-drill-colunas-trigger:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(56,189,248,.38);
}
body.tema-claro .pipefy-kpi-drill-colunas-trigger:hover{
  background:rgba(var(--primary-rgb),.08);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
}

/* Drilldown de indicadores Pipefy: modal maior + cabeçalhos arrastáveis */
.modal.modal-pipefy-kpi-drill{
  width:min(1380px,98vw);
  max-width:98vw;
  max-height:92vh;
  min-height:0;
}
.pipefy-drill-th{
  cursor:grab;
  user-select:none;
}
.pipefy-drill-th:active{ cursor:grabbing; }
.pipefy-drill-th--drag{
  opacity:.72;
  background:rgba(56,189,248,.12);
}
body.tema-claro .pipefy-drill-th--drag{
  background:rgba(var(--primary-rgb),.1);
}

.com-erp-log-table thead tr{
  background:rgba(var(--primary-rgb),.42);
}
.com-erp-log-th{
  padding:8px 10px;
  font-weight:700;
  font-size:11px;
  color:#e8f0fe;
  border-bottom:2px solid rgba(96,165,250,.55);
  white-space:nowrap;
  user-select:none;
}
body.tema-claro .com-erp-log-th{
  color:#1e3a8a;
  background:rgba(219,234,254,.98);
  border-bottom-color:rgba(var(--primary-rgb),.35);
}
.com-erp-log-wrap--personalizar .com-erp-log-th{
  cursor:grab;
}
.com-erp-log-wrap--personalizar .com-erp-log-th:active{
  cursor:grabbing;
}
.com-erp-log-th--drag{
  opacity:.78;
  background:rgba(56,189,248,.28)!important;
}
#com-erp-log-btn-personalizar.active{
  border-color:var(--accent);
  background:rgba(var(--primary-rgb),.14);
  color:var(--accent);
}
.com-erp-log-kpi-highlight{
  border:1px solid rgba(14,165,233,.45);
  background:rgba(14,165,233,.12);
  box-shadow:0 0 0 1px rgba(14,165,233,.15);
}
.com-erp-log-kpi-card[role="button"]{
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.com-erp-log-kpi-card[role="button"]:hover{
  border-color:rgba(var(--primary-rgb),.45);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.com-erp-log-kpi-card[role="button"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.pipefy-chart-phase-row{
  display:flex;gap:10px;align-items:flex-start;padding:5px 0;cursor:pointer;font-size:13px;line-height:1.35;color:var(--text);
}
.pipefy-chart-phase-row input{ margin-top:3px;flex-shrink:0;accent-color:var(--accent); }

.pipefy-insights-charts-wrap{ display:flex;flex-direction:column;gap:0;margin-top:4px; }
.pipefy-insights-charts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
}
.pipefy-insights-chart{
  border:1px solid var(--border);border-radius:16px;padding:10px 12px 8px;background:var(--bg);
  display:flex;flex-direction:column;min-height:0;
}
.pipefy-insights-chart-title{ font-size:12px;font-weight:850;color:var(--text);margin-bottom:6px; }
.pipefy-insights-chart-canvas-wrap{
  position:relative;width:100%;height:140px;max-height:160px;flex:0 0 auto;
}
.pipefy-insights-chart-canvas-wrap canvas{
  display:block;width:100%!important;height:100%!important;
}
.pipefy-insights-details{
  border:1px solid var(--border);border-radius:16px;background:var(--bg);
  overflow:hidden;
}
.pipefy-insights-details > summary{
  cursor:pointer;padding:10px 12px;font-weight:850;color:var(--text);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.pipefy-insights-details > summary::-webkit-details-marker{ display:none; }
.pipefy-insights-details[open] > summary{ border-bottom:1px solid var(--border); }
.pipefy-insights-details-body{ padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px; }
.pipefy-insights-phase{ padding:10px 10px;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(255,255,255,.02); }
.pipefy-insights-phase-name{ font-weight:900;color:var(--text);font-size:12px;margin-bottom:8px; }
.pipefy-insights-phase-fields{ display:flex;flex-wrap:wrap;gap:6px; }

/* ── Pipefy: Campos / indicadores ───────────────────────────── */
.pipefy-map-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pipefy-map-title{ font-size:14px; font-weight:800; color:var(--text); }
.pipefy-map-sub{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45; max-width:760px; }
.pipefy-map-actions{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.pipefy-map-lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pipefy-map-pipe{ min-width:260px; }
.pipefy-map-wrap{ margin-top:12px; }
.pipefy-map-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pipefy-map-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); font-size:12px; }
.pipefy-map-grid{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.pipefy-map-row{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.pipefy-map-row-info{ flex:1; min-width:220px; }
.pipefy-map-row-title{ font-size:13px; font-weight:800; color:var(--text); }
.pipefy-map-row-hint{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; }
.pipefy-map-row-control{ width:min(520px, 100%); }
.pipefy-map-sel{ width:100%; }

/* Pipefy · Campos/Indicadores — cards estilo “Comercial” */
.pipefy-map-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:10px 12px;
  width:100%;
  min-width:0;
}
.pipefy-map-cards + .pipefy-map-cards{
  margin-top:12px;
}
.pipefy-map-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  padding:12px 12px 10px;
  box-sizing:border-box;
  min-width:0;
}
.pipefy-map-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.pipefy-map-card-title{
  font-size:13px;
  font-weight:900;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pipefy-map-card-sub{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  margin-top:4px;
}
.pipefy-map-gear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  flex-shrink:0;
}
.pipefy-map-gear:hover{ border-color:var(--accent); color:var(--accent2); }
.pipefy-map-card-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}
.pipefy-map-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  min-width:0;
}
.pipefy-map-card-body{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.pipefy-map-mini-lbl{
  display:block;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0 0 6px;
}
.pipefy-kpi-config-block{
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,.06);
}
.pipefy-kpi-config-block + .pipefy-kpi-config-block{
  margin-top:14px;
}
.pipefy-map-mini-hint{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}

/* Pipefy · Campos — painel de referência (diferente dos cards de indicador) */
.pipefy-map-reference-wrap{
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed rgba(148,163,184,.45);
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  min-width:0;
}
.pipefy-map-reference-heading{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pipefy-map-reference-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.pipefy-map-reference-note{
  font-size:12px;
  color:var(--muted2);
  line-height:1.45;
  max-width:720px;
}
.pipefy-map-ref{
  border-radius:16px;
  border:1px solid rgba(59,130,246,.22);
  background:rgba(59,130,246,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
body.tema-claro .pipefy-map-ref{
  border-color:rgba(59,130,246,.28);
  background:rgba(59,130,246,.08);
  box-shadow:none;
}
.pipefy-map-ref-details{
  margin:0;
}
.pipefy-map-ref-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  margin:0;
  outline:none;
}
.pipefy-map-ref-summary::-webkit-details-marker{ display:none; }
.pipefy-map-ref-summary:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(59,130,246,.45);
  border-radius:12px;
}
.pipefy-map-ref-summary-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pipefy-map-ref-kicker{
  display:inline-flex;
  align-self:flex-start;
  padding:3px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent2);
  background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.28);
}
.pipefy-map-ref-title{
  font-size:15px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pipefy-map-ref-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  margin-top:2px;
}
.pipefy-map-ref-chevron{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-top:2px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(148,163,184,.25);
  color:var(--muted);
  transition:transform .2s ease,color .15s ease,border-color .15s ease;
}
.pipefy-map-ref-details[open] .pipefy-map-ref-chevron{
  transform:rotate(90deg);
  color:var(--accent2);
  border-color:rgba(59,130,246,.35);
}
.pipefy-map-ref-summary:hover .pipefy-map-ref-chevron{
  border-color:rgba(59,130,246,.4);
  color:var(--accent2);
}
.pipefy-map-ref-inner{
  padding:0 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pipefy-map-ref-phase{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.2);
}
body.tema-claro .pipefy-map-ref-phase{
  background:rgba(255,255,255,.65);
  border-color:rgba(148,163,184,.35);
}
.pipefy-map-ref-phase--start{
  border-left:3px solid rgba(59,130,246,.55);
}
.pipefy-map-ref-phase-name{
  font-weight:900;
  font-size:12px;
  color:var(--text);
  margin-bottom:8px;
}
.pipefy-map-ref-phase-fields{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pipefy-map-ref-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:10px;
  font-size:11px;
  font-weight:650;
  color:var(--text);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.2);
  max-width:100%;
}
body.tema-claro .pipefy-map-ref-chip{
  background:rgba(255,255,255,.85);
}
.pipefy-map-ref-chip--more{
  color:var(--muted);
  border-style:dashed;
  font-weight:800;
}
.pipefy-map-ref-empty{
  margin:0;
  font-size:12px;
  color:var(--muted);
  padding:8px 4px 4px;
}
.pipefy-insights-field{
  font-size:11px;font-weight:650;color:var(--muted2);
  padding:3px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.2);background:rgba(148,163,184,.06);
}
.pipefy-insights-field--more{ color:var(--muted);border-style:dashed; }

.qr-wrap{ text-align:center; margin:16px 0; }
.qr-wrap img{ border-radius:12px; border:3px solid var(--border); max-width:220px; }

/* ── DISPARO EM MASSA ── */
.disparo-section{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.disparo-section-title{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.disparo-tipo-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.disparo-tipo-btn{
  display:flex; align-items:center; gap:6px; padding:8px 16px;
  border-radius:8px; border:1.5px solid var(--border); background:var(--surface);
  color:var(--muted2); font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.disparo-tipo-btn:hover{ border-color:var(--accent); color:var(--accent); }
.disparo-tipo-btn.ativo{ border-color:var(--primary,var(--accent)); background:var(--primary-soft,rgba(var(--primary-rgb),.12)); color:var(--primary,var(--accent2)); }
.disparo-dest-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.disparo-dest-btn{
  padding:6px 14px; border-radius:20px; border:1.5px solid var(--border);
  background:transparent; color:var(--muted2); font-size:12px; font-weight:600; cursor:pointer; transition:.15s;
}
.disparo-dest-btn:hover{ border-color:var(--accent2); color:var(--accent2); }
.disparo-dest-btn.ativo{ border-color:var(--primary,var(--accent)); background:var(--primary-soft,rgba(var(--primary-rgb),.12)); color:var(--primary,var(--accent2)); }
.disparo-preview{
  display:flex; flex-wrap:wrap; gap:6px; min-height:36px;
  padding:10px 12px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; margin-bottom:12px;
}
.dest-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(var(--primary-rgb),.12); border:1px solid rgba(var(--primary-rgb),.2);
  border-radius:20px; padding:3px 10px; font-size:12px; font-weight:500; color:var(--accent2);
}
.dest-chip .rm{ cursor:pointer; color:var(--muted2); font-size:11px; line-height:1; }
.dest-chip .rm:hover{ color:var(--danger); }
.disparo-upload-area{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px; border:2px dashed var(--border); border-radius:10px;
  background:var(--bg); cursor:pointer; text-align:center; transition:.15s;
}
.disparo-upload-area:hover{ border-color:var(--accent); }
.disparo-upload-area.com-arquivo{ border-color:var(--success); background:rgba(34,201,122,.06); }
.disparo-resultado{
  margin-top:16px; padding:14px 16px; border-radius:10px;
  background:var(--bg); border:1px solid var(--border); display:none;
}
.disparo-resultado.visivel{ display:block; }

/* ── WPP HERO HEADER ── */
.wpp-hero{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
  background:var(--surface); border-radius:16px 16px 0 0;
}
.wpp-hero-left{ display:flex; align-items:center; gap:14px; }
.wpp-hero-icon{ font-size:36px; line-height:1; }
.wpp-hero-title{ font-size:18px; font-weight:800; letter-spacing:-.3px; }
.wpp-hero-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.wpp-hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.wpp-conn-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px; background:var(--bg);
  border:1.5px solid var(--border); font-size:12px; font-weight:700; cursor:pointer;
}
.wpp-conn-pill:hover{ border-color:var(--accent); }
.wpp-kpis{ display:flex; align-items:center; gap:2px; }
.wpp-kpi-item{ text-align:center; padding:3px 8px; }
.wpp-kpi-val{ display:block; font-size:17px; font-weight:800; color:var(--text); line-height:1.1; }
.wpp-kpi-lbl{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.wpp-kpi-sep{ width:1px; height:24px; background:var(--border); flex-shrink:0; }
.wpp-kpi-err .wpp-kpi-val{ color:var(--danger); }

/* ── WPP TABS BAR ── */
.wpp-tabs-wrap{
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 clamp(6px, 1.8vw, 14px);
  overflow-x:hidden;
  max-width:100%;
}
.wpp-tabs{
  display:flex; flex-wrap:wrap; gap:0;
  overflow-x:hidden;
  max-width:100%;
}
.wpp-tab-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:9px 11px; font-size:11.5px; font-weight:600;
  color:var(--muted); background:none; border:none;
  border-bottom:2.5px solid transparent; cursor:pointer;
  white-space:normal; transition:color .15s, border-color .15s;
}
.wpp-tab-btn:hover{ color:var(--text); }
.wpp-tab-btn.ativo{ color:var(--accent); border-bottom-color:var(--accent); }
.wpp-tab-badge{
  background:var(--danger); color:#fff; border-radius:10px;
  padding:1px 6px; font-size:10px; font-weight:700; margin-left:2px;
}

/* ── WPP TAB PANES ── */
.wpp-tab-pane{ display:none; padding:18px 0 0; }
.wpp-tab-pane.ativo{ display:block; }

/* ── WPP CARD ── */
.wpp-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px 20px; margin-bottom:14px;
}
.wpp-card-title{
  font-size:13px; font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* ── STEP BAR (disparo em massa) ── */
.wpp-step-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  justify-content:center;
  margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
}
.wpp-step-item{
  display:flex; align-items:center; gap:6px;
  flex:1 1 120px;
  justify-content:center;
  opacity:.38; transition:opacity .2s;
}
.wpp-step-item.ativo,.wpp-step-item.ok{ opacity:1; }
.wpp-step-n{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--border); color:var(--muted);
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.wpp-step-item.ativo .wpp-step-n{ background:var(--accent); color:#fff; }
.wpp-step-item.ok .wpp-step-n{ background:var(--success); color:#fff; }
.wpp-step-lbl{ font-size:11px; font-weight:600; color:var(--muted); }
.wpp-step-item.ativo .wpp-step-lbl, .wpp-step-item.ok .wpp-step-lbl{ color:var(--text); }
.wpp-step-line{ width:1px; height:20px; background:var(--border); flex-shrink:0; margin:0 8px; }

/* ── WPP — BARRA DE STATUS ──────────────────────────────────── */
.wpp-status-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-radius:12px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border);
}
.wpp-status-bar .wpp-conn{
  display:flex; align-items:center; gap:8px; flex:1; min-width:160px;
}
.wpp-status-bar .wpp-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.wpp-dot.ok  { background:var(--success); box-shadow:0 0 6px var(--success); }
.wpp-dot.err { background:var(--danger);  box-shadow:0 0 6px var(--danger); }
.wpp-dot.warn{ background:var(--warn);    box-shadow:0 0 6px var(--warn); }
.wpp-status-bar .wpp-kpis{
  display:flex; gap:10px; flex-wrap:wrap;
}
.wpp-kpi{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:70px; padding:5px 12px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
}
.wpp-kpi-val{ font-size:18px; font-weight:800; line-height:1.1; }
.wpp-kpi-lbl{ font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.3px; margin-top:1px; }

/* ── WPP — ABAS (quebram linha, sem scroll lateral) ────────── */
.wpp-tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:2px solid var(--border); margin-bottom:20px;
  overflow-x:hidden; max-width:100%;
}
.wpp-tab{
  flex:0 1 auto;
  padding:7px 11px; border:none; background:none;
  font-size:11.5px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-2px;
  cursor:pointer; transition:.15s;
  white-space:normal; text-align:center;
}
.wpp-tab:hover{ color:var(--text); }
.wpp-tab.ativo{ color:var(--text); border-bottom-color:var(--accent); }
.wpp-tab-content{ display:none; }
.wpp-tab-content.ativo{ display:block; }

/* ── EDITOR IN-PLACE ─────────────────────────────────────────── */
#inplace-edit-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 9000;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  height: var(--topbar-h-base);
  min-height: var(--topbar-h-base);
  max-height: var(--topbar-h-base);
  padding: 0 16px;
  box-sizing: border-box;
  background: #1e293b;
  color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  border-bottom: 2px solid #3b82f6;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  overflow: hidden;
  flex-shrink: 0;
}
#inplace-edit-bar[style*="flex"] {
  display: flex !important;
}
.inplace-edit-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #60a5fa;
  flex-shrink: 0;
  white-space: nowrap;
}
.inplace-edit-label svg { flex-shrink: 0; display: block; }
#inplace-edit-nome { color: #f1f5f9; font-weight: 600; }
.inplace-edit-modes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inplace-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #475569;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;
}
.inplace-mode-btn svg { flex-shrink: 0; display: block; }
.inplace-mode-btn.is-active {
  background: rgba(59,130,246,.85);
  border-color: transparent;
  color: #fff;
}
.inplace-edit-hint {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inplace-edit-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inplace-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;
  color: #fff;
}
.inplace-action-btn svg { flex-shrink: 0; display: block; }
.inplace-action-btn--ghost {
  background: #334155;
  border: 1px solid #475569;
  color: #f1f5f9;
  padding: 0 10px;
  min-width: 32px;
}
.inplace-action-btn--ghost:not(:disabled):hover {
  border-color: #60a5fa;
  color: #fff;
}
.inplace-action-btn--ghost:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.inplace-action-btn--save { background: #22c55e; font-weight: 700; }
.inplace-action-btn--cancel { background: #ef4444; font-weight: 700; }
@media (max-width: 1100px) {
  .inplace-edit-hint { display: none; }
}
@media (max-width: 720px) {
  #inplace-edit-bar { padding: 0 10px; gap: 6px; }
  .inplace-edit-prefix { display: none; }
  .inplace-btn-txt { display: none; }
  .inplace-mode-btn { padding: 0; width: 32px; }
  .inplace-action-btn--save,
  .inplace-action-btn--cancel { padding: 0; width: 32px; }
}

/* ── PAINEL IA ───────────────────────────────────────────────── */
.ia-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media(max-width:720px){ .ia-stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .ia-stats-grid{ grid-template-columns:1fr; } }
.ia-stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  transition:border-color .2s;
}
.ia-stat-card:hover{ border-color:var(--accent); }
.ia-stat-card--destaque{ border-color:var(--accent); background:rgba(74,159,255,.06); }
.ia-stat-icon{ color:var(--accent); display:flex; }
.ia-stat-val{ font-size:20px; font-weight:800; color:var(--text); line-height:1; }
.ia-stat-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ia-stat-sub{ font-size:10px; color:var(--muted); }
.ia-periodo-btn{ padding:3px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:.15s; }
.ia-periodo-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── WPP — NOTIF QUICK-ACCESS ───────────────────────────────── */
.wpp-notif-bloco{ padding:14px 0 16px; }
.wpp-notif-hint{ font-size:12px; color:var(--muted); margin:0 0 10px; }
.wpp-notif-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.wpp-notif-status{ font-size:12px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); }
.wpp-notif-bar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px 12px; border-top:1px solid var(--border); }
#wpp-view-notif-tarefas .wpp-notif-bar{ flex-shrink:0; }

/* ── WPP — Intro/Explicação por aba ─────────────────────────── */
.wpp-intro{
  margin:12px 12px 10px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(var(--primary-rgb),.06);
  border:1px solid rgba(var(--primary-rgb),.18);
  color:var(--text);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.wpp-intro-ico{
  width:34px;height:34px;border-radius:10px;
  background:rgba(var(--primary-rgb),.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent2);
  flex-shrink:0;
}
.wpp-intro-title{ font-size:13px; font-weight:800; margin-bottom:2px; }
.wpp-intro-desc{ font-size:12px; color:var(--muted); line-height:1.45; }
body.tema-claro .wpp-intro{
  background:rgba(var(--primary-rgb),.05);
  border-color:rgba(var(--primary-rgb),.16);
}

/* Botão de pausas (metas/tarefas) — mais "action" e consistente */
#notif-meta-pausas-btn,
#notif-tarefa-pausas-btn{
  white-space:nowrap;
}

/* Filtro de tipo de notificação (same shape as disparo-tipo-btn, compact) */
.notif-select{
  width:100%;
  height:34px;
  padding:0 34px 0 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background-color:var(--surface);
  color:var(--text);
  font-size:12px;
  font-weight:600;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:17px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.notif-select:hover{ border-color:rgba(var(--primary-rgb),.45); }
.notif-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12); }

/* Campo de busca (Metas / Tarefas no hub WhatsApp) — ícone SVG à esquerda */
.notif-busca-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}
.notif-busca-ico{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  color:var(--muted);
  pointer-events:none;
}
.notif-busca-input{
  width:100%;
  height:34px;
  padding:0 12px 0 36px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-size:12px;
  font-weight:600;
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
.notif-busca-input::placeholder{ color:var(--muted); font-weight:500; }
.notif-busca-input:hover{ border-color:rgba(var(--primary-rgb),.45); }
.notif-busca-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
}

.notif-filter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.notif-check-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  color:var(--muted2);
}
.notif-check,
.notif-check-all{
  width:17px;
  height:17px;
  border:1.5px solid var(--border);
  border-radius:5px;
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
  appearance:none;
  display:inline-grid;
  place-content:center;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.notif-check:hover,
.notif-check-all:hover{ border-color:var(--accent); }
.notif-check:checked,
.notif-check-all:checked{
  border-color:var(--accent);
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}
.notif-check:focus-visible,
.notif-check-all:focus-visible{ box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18); outline:none; }

.notif-tipo-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:8px; font-size:12px; font-weight:600;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--muted2); cursor:pointer; transition:.15s;
}
.notif-tipo-btn:hover{ border-color:var(--accent); color:var(--accent); }
.notif-tipo-btn.ativo{ border-color:var(--primary,var(--accent)); background:var(--primary-soft,rgba(var(--primary-rgb),.12)); color:var(--primary,var(--accent2)); }

/* Lista de destinatários */
.notif-dest-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; transition:background .12s;
  border-bottom:1px solid var(--border);
  position:relative;
}
.notif-dest-item:last-child{ border-bottom:none; }
.notif-dest-item:hover{ background:var(--surface); }
.notif-dest-item.selecionado{ background:rgba(var(--primary-rgb),.07); }
.notif-dest-item.selecionado .notif-dest-avatar{ background:var(--accent); }
.notif-dest-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--muted2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; transition:background .12s;
}
.notif-dest-nome{ font-size:13px; font-weight:600; color:var(--text); line-height:1.2; }
.notif-dest-info{ font-size:11px; color:var(--muted); display:block; margin-top:1px; }

/* Painel de destinatários — estados */
.notif-vazio{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px 12px; color:var(--muted); font-size:12px; text-align:center;
}
.notif-vazio svg{ opacity:.4; }
.notif-erro{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:20px 12px; color:var(--danger); font-size:12px; text-align:center;
}
.notif-erro svg{ opacity:.7; }

/* Barra de controle de envio */
.notif-send-bar{
  display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--border);
  background:var(--surface); align-items:center;
}
.notif-send-bar .btn-primary{ flex:1; font-size:12px; }
.notif-send-bar .btn-secondary:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* WhatsApp hub · Tarefas — textos padrão abaixo do botão Enviar */
.notif-tarefa-post-enviar{
  flex-shrink:0;
  padding:12px 12px 14px;
  border-top:1px solid var(--border);
  background:rgba(var(--primary-rgb),.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.notif-tarefa-post-enviar-hd{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.notif-tarefa-post-enviar-kicker{
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.notif-tarefa-post-enviar-title{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
}
.notif-tarefa-post-enviar-desc{
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
  max-width:52ch;
}
.notif-tarefa-details{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
}
.notif-tarefa-details--reforco{
  border-color:rgba(34,201,122,.32);
  background:rgba(34,201,122,.07);
}
.notif-tarefa-details--falha{
  border-color:rgba(var(--primary-rgb),.28);
  background:rgba(var(--primary-rgb),.06);
}
body.tema-claro .notif-tarefa-details--reforco{ background:#eef9f3; border-color:rgba(34,201,122,.25); }
body.tema-claro .notif-tarefa-details--falha{ background:#f3f7fd; border-color:rgba(var(--primary-rgb),.22); }
.notif-tarefa-details-sum{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  font-weight:700;
  font-size:13px;
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:7px;
}
.notif-tarefa-details > summary::-webkit-details-marker{ display:none; }
.notif-tarefa-details-sum:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.notif-tarefa-details-body{
  padding:0 12px 12px;
  border-top:1px solid var(--border);
}

@media(max-width:720px){
  .notif-filter-grid{ grid-template-columns:1fr; }
}

/* ── WhatsApp hub · view Tarefas — layout e hierarquia ─────────── */
.wpp-hub-tool-hd-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
}
.wpp-hub-tool-hd-text .wpp-hub-tool-hd-title{
  flex:unset;
  width:100%;
}
.notif-tarefa-hd-sub{
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  line-height:1.35;
  max-width:min(52ch, 100%);
}
.wpp-hub-tool-body--notif-tarefa{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow-y:auto;
  min-height:0;
  overflow-x:hidden;
}
.notif-tarefa-intro{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px 14px;
  margin:0;
  border-bottom:1px solid var(--border);
  background:rgba(var(--primary-rgb),.09);
  flex-shrink:0;
}
.notif-tarefa-intro-ico{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(var(--primary-rgb),.14);
  color:var(--accent2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.notif-tarefa-intro-ico svg{
  width:20px;
  height:20px;
}
.notif-tarefa-intro-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.notif-tarefa-intro-copy strong{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.01em;
}
.notif-tarefa-intro-copy span{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  max-width:62ch;
}
.notif-tarefa-section{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.notif-tarefa-section--card{
  background:var(--surface);
}
.notif-tarefa-section--dest{
  padding-bottom:12px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:0;
}
.notif-tarefa-section-head{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
  flex-shrink:0;
}
.notif-tarefa-section-head--row{
  flex-direction:row;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.notif-tarefa-section-head--row > div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.notif-tarefa-section-title{
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}
.notif-tarefa-section-hint{
  font-size:11px;
  color:var(--muted2);
  font-weight:500;
  line-height:1.35;
}
.notif-tarefa-field-label{
  display:block;
  font-size:10px;
  font-weight:700;
  color:var(--muted2);
  margin:10px 0 6px;
}
.notif-tarefa-field-label:first-of-type{
  margin-top:0;
}
.notif-tarefa-field{
  min-width:0;
}
.notif-filter-grid--tarefa{
  padding:0;
  border:none;
  background:transparent;
  gap:10px;
}
.notif-select--lg{
  height:38px;
  font-size:13px;
}
.notif-tipo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:8px;
}
#wpp-view-notif-tarefas .notif-tipo-btn{
  min-height:40px;
  padding:8px 12px;
  justify-content:flex-start;
  gap:8px;
  border-radius:10px;
}
#wpp-view-notif-tarefas .notif-tipo-btn svg{
  flex-shrink:0;
  opacity:.92;
}
#wpp-view-notif-tarefas .notif-tipo-btn span{
  font-weight:600;
}
.notif-tarefa-count-pill{
  flex-shrink:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(var(--primary-rgb),.14);
  color:var(--accent2);
  border:1px solid rgba(var(--primary-rgb),.28);
}
body.tema-claro .notif-tarefa-count-pill{
  background:rgba(var(--primary-rgb),.1);
  color:var(--accent);
}
.notif-tarefa-list-toolbar{
  flex-shrink:0;
  padding:8px 10px;
  margin-bottom:8px;
  border-radius:10px;
  background:rgba(0,0,0,.14);
  border:1px solid var(--border);
}
body.tema-claro .notif-tarefa-list-toolbar{
  background:rgba(0,0,0,.04);
}
.notif-tarefa-lista-scroll{
  flex:none;
  width:100%;
  box-sizing:border-box;
  min-height:140px;
  max-height:min(42vh, 340px);
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  scrollbar-gutter:stable;
}
body.tema-claro .notif-tarefa-lista-scroll{
  background:#fafafa;
}
#wpp-view-notif-tarefas .notif-send-bar{
  flex-shrink:0;
  padding:12px 14px;
  gap:10px;
  border-top:1px solid var(--border);
}
#wpp-view-notif-tarefas .notif-send-bar .btn-primary{
  min-height:44px;
  font-size:13px;
  font-weight:700;
  border-radius:10px;
}
#wpp-view-notif-tarefas #notif-tarefa-progress-wrap,
#wpp-view-notif-tarefas #notif-tarefa-status{
  flex-shrink:0;
}
#wpp-view-notif-tarefas #wpp-envios-tarefa{
  flex-shrink:0;
}
@media(max-width:520px){
  .notif-tipo-grid{
    grid-template-columns:1fr 1fr;
  }
}

.btn-pausado{
  background:rgba(255,150,0,.15) !important;
  border-color:rgba(255,150,0,.5) !important;
  color:#f59e0b !important;
}

/* ── WPP — LAYOUT 2 COLUNAS (Disparo) ───────────────────────── */
.wpp-disparo-grid{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:20px;
  align-items:start;
}
@media(max-width:820px){
  .wpp-disparo-grid{ grid-template-columns:1fr; }
  .wpp-phone-sticky{ position:static !important; }
}
.wpp-phone-sticky{ position:sticky; top:16px; }
.wpp-phone{
  border-radius:28px; border:6px solid var(--border);
  background:#111; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
body.tema-claro .wpp-phone{ background:#1a1a2e; border-color:#C8D8EE; }
.wpp-phone-bar{
  display:flex; align-items:center; gap:8px;
  background:#075e54; padding:10px 14px;
}
.wpp-phone-avatar{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff; flex-shrink:0;
}
.wpp-phone-name{ font-size:13px; font-weight:700; color:#fff; }
.wpp-phone-sub{ font-size:10px; color:rgba(255,255,255,.7); }
.wpp-phone-chat{
  background:#e5ddd5; min-height:220px; padding:12px 10px;
  display:flex; flex-direction:column; gap:6px;
}
body.tema-claro .wpp-phone-chat{ background:#d9d9d9; }
.wpp-bubble{
  max-width:85%; background:#fff; border-radius:8px 8px 8px 0;
  padding:8px 10px; font-size:12px; line-height:1.5; color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.15); align-self:flex-start;
  word-break:break-word;
}
.wpp-bubble-time{ font-size:10px; color:#888; text-align:right; margin-top:3px; }
.wpp-phone-footer{
  background:#f0f0f0; padding:8px 10px;
  display:flex; align-items:center; gap:8px;
}
.wpp-phone-input-fake{
  flex:1; background:#fff; border-radius:20px;
  padding:6px 12px; font-size:11px; color:#aaa;
}

/* ── WPP SECTIONS (mantido para compatibilidade interna) ─────── */
.wpp-sec-icon{ width:30px; height:30px; border-radius:8px; background:rgba(var(--primary-rgb),.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wpp-step-label{
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
  margin:16px 0 8px; display:flex; align-items:center; gap:6px;
}
.wpp-step-label::before{
  content:''; display:inline-block;
  width:3px; height:14px; border-radius:2px;
  background:var(--accent); flex-shrink:0;
}

/* Agendamento — caixa de destaque */
.wpp-agendamento-box{
  margin-top:14px; padding:14px 16px;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:12px; transition:border-color .2s;
}
.wpp-agendamento-box.ativo{ border-color:var(--primary,var(--accent)); background:var(--primary-soft,rgba(var(--primary-rgb),.04)); }
.wpp-agendamento-toggle{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; cursor:pointer; user-select:none;
}
.wpp-agendamento-toggle input[type=checkbox]{
  width:16px; height:16px; accent-color:var(--accent); cursor:pointer;
}
.wpp-agendamento-campos{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.wpp-agendamento-dica{
  font-size:11px; color:var(--muted); line-height:1.5;
  padding:8px 10px; background:var(--surface); border-radius:8px;
  border-left:3px solid var(--accent);
}
.wpp-adv-toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--muted2);
  cursor:pointer; margin-top:12px; padding:5px 12px;
  border:1px solid var(--border); border-radius:20px; transition:.15s;
}
.wpp-adv-toggle:hover{ border-color:var(--accent); color:var(--accent); }

/* ── WIZARD ── */
.wiz-steps{ display:flex; align-items:stretch; margin-bottom:20px; border-radius:10px; background:var(--bg); border:1px solid var(--border); overflow:hidden; }
.wiz-step{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:9px 4px; font-size:10px; font-weight:600;
  color:var(--muted); transition:.2s; border-right:1px solid var(--border); cursor:default; gap:4px;
}
.wiz-step:last-child{ border-right:none; }
.wiz-step.ativo{ color:var(--accent2); background:rgba(var(--primary-rgb),.08); }
.wiz-step.feito{ color:var(--success); background:rgba(34,201,122,.06); cursor:pointer; }
.wiz-step.feito:hover{ background:rgba(34,201,122,.12); }
.wiz-step-num{
  width:20px; height:20px; border-radius:50%; background:var(--border);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; transition:.2s;
}
.wiz-step.ativo .wiz-step-num{ background:var(--accent); color:#fff; }
.wiz-step.feito .wiz-step-num{ background:var(--success); color:#fff; }
.wiz-pane{ display:none; }
.wiz-pane.ativo{ display:block; }

/* Wizard metas — chips de frequência (meta / coleta): espaço entre linhas ao quebrar wrap */
.meta-freq-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 8px;
  row-gap:12px;
  column-gap:8px;
}

/* Modal tarefa — automação CRM compacta (gatilho + critérios) */
.nt-auto-section-title{
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.55px;
  margin-bottom:12px;display:block;
}
.nt-auto-chain{ display:flex; flex-direction:column; gap:14px; }
.nt-auto-row{ display:flex; gap:12px; align-items:flex-start; }
.nt-auto-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.nt-auto-body{ flex:1; min-width:0; }
.nt-auto-lbl{
  font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
  display:block; margin-bottom:6px;
}
.nt-auto-select{
  width:100%; padding:9px 11px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; box-sizing:border-box;
}
.nt-auto-hint{ font-size:11px; color:var(--muted); margin:8px 0 0; line-height:1.45; }
.nt-auto-criteria{ padding-left:6px; border-left:3px solid rgba(var(--primary-rgb),.35); margin-left:10px; }
.nt-auto-checks{ display:flex; flex-direction:column; gap:8px; font-size:13px; margin-top:4px; }
.nt-auto-check{
  display:flex; align-items:flex-start; gap:8px; cursor:pointer; flex-wrap:wrap;
  line-height:1.35;
}
.nt-auto-check input[type="checkbox"]{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }
.nt-auto-numinp{
  width:52px; padding:4px 6px; border-radius:6px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:12px; margin:0 2px;
}
.nt-auto-muted{ color:var(--muted); font-size:12px; }
.nt-auto-combine{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.nt-auto-combine label{ font-size:11px; font-weight:600; color:var(--muted); }
.nt-auto-combine select{
  max-width:340px; padding:8px 10px; border-radius:8px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px;
}
.nt-auto-warn{
  font-size:11px; color:var(--warn); margin-top:12px; padding:10px 12px; border-radius:8px;
  background:rgba(255,180,0,.08); border:1px solid rgba(255,180,0,.22); line-height:1.4;
}

/* Modal tarefa — automação CRM por campo (opt-in): título como os outros <label> da etapa Envio */
.nt-crm-auto-heading{
  display:flex;
  gap:10px;
  cursor:pointer;
  margin:0;
  align-items:flex-start;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  line-height:1.45;
}
.nt-crm-auto-heading input[type="checkbox"]{
  margin-top:2px;
  accent-color:var(--accent);
  flex-shrink:0;
  width:12px;
  height:12px;
  min-width:12px;
  min-height:12px;
  box-sizing:border-box;
}
.nt-crm-auto-heading > span{
  flex:1;
  min-width:0;
}
.nt-crm-gatilho-wrap{
  overflow:visible;
  position:relative;
  z-index:0;
}
.nt-crm-legacy-banner{
  font-size:12px; color:var(--warn); background:rgba(255,180,0,.1);
  border:1px solid rgba(255,180,0,.28); border-radius:10px; padding:10px 14px; margin-bottom:14px; line-height:1.45;
}
.nt-crm-auto-panel{ margin-top:4px; padding-left:4px; border-left:3px solid rgba(var(--primary-rgb),.35); margin-left:8px; }
.nt-crm-flow{ display:flex; flex-direction:column; gap:18px; }
.nt-crm-step{ display:flex; gap:12px; align-items:flex-start; }
.nt-crm-step-num{
  flex-shrink:0; width:28px; height:28px; border-radius:10px;
  background:var(--accent); color:#fff;
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(var(--primary-rgb),.28); margin-top:2px;
}
.nt-crm-step-body{ flex:1; min-width:0; }
.nt-crm-step-label{
  display:block; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.45px; margin-bottom:7px;
}
.nt-crm-select{
  width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--surface); font-size:13px; color:var(--text); box-sizing:border-box;
}
.nt-crm-campo-meta{ margin-top:8px; line-height:1.45; }
.nt-crm-valor-hint{ font-size:11px; color:var(--muted); margin:6px 0 10px; line-height:1.4; }
.nt-crm-valor-skip{
  font-size:12px; color:var(--success); padding:10px 12px; border-radius:10px;
  background:rgba(34,201,122,.09); border:1px solid rgba(34,201,122,.22); margin-bottom:4px;
}
.nt-crm-valor-inputs .nt-crm-valor-text,
.nt-crm-valor-inputs .nt-crm-valor-num,
.nt-crm-valor-inputs .nt-crm-valor-date{
  width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:13px; box-sizing:border-box;
}

/* Pipefy gatilho — painel de tempo (visual distinto dos grids de campo) */
.nt-pipefy-time-panel{
  padding:12px 14px 14px;
  border-radius:14px;
  border:1px solid rgba(59,130,246,.22);
  background:rgba(59,130,246,.07);
  box-sizing:border-box;
}
body.tema-claro .nt-pipefy-time-panel{
  background:rgba(59,130,246,.09);
  border-color:rgba(59,130,246,.25);
}
.nt-pipefy-time-panel-title{
  font-size:13px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.nt-pipefy-time-panel-lede{
  margin:0;
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
}
.nt-pipefy-presets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.nt-pipefy-presets-lbl{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-right:4px;
}
.nt-pipefy-preset-btn{
  padding:5px 11px !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* WhatsApp bubble preview */
.wpp-preview-wrap{ background:#0B1420; border-radius:12px; padding:14px 16px; margin-top:14px; min-height:60px; }
body.tema-claro .wpp-preview-wrap{ background:#E5DDD5; }
.wpp-preview-label{ font-size:11px; font-weight:600; color:rgba(255,255,255,.35); margin-bottom:10px; }
body.tema-claro .wpp-preview-label{ color:rgba(0,0,0,.4); }
.wpp-bubble{
  background:#1F2E3E; color:#E8F0FB; border-radius:0 10px 10px 10px;
  padding:10px 14px; font-size:13px; line-height:1.6; max-width:90%;
  display:inline-block; word-break:break-word;
  box-shadow:0 1px 3px rgba(0,0,0,.3); position:relative;
}
body.tema-claro .wpp-bubble{ background:#FFFFFF; color:#111B21; }
.wpp-bubble::before{
  content:''; position:absolute; top:0; left:-7px; width:0; height:0;
  border-top:7px solid #1F2E3E; border-left:7px solid transparent;
}
body.tema-claro .wpp-bubble::before{ border-top-color:#FFFFFF; }
.wpp-bubble-time{ font-size:10px; color:rgba(255,255,255,.4); text-align:right; margin-top:6px; }
body.tema-claro .wpp-bubble-time{ color:rgba(0,0,0,.4); }
.wpp-bubble-divider{ border:none; border-top:1px solid rgba(255,255,255,.12); margin:8px 0 6px; }
body.tema-claro .wpp-bubble-divider{ border-top-color:rgba(0,0,0,.1); }
.wpp-bubble-opt-text{ font-size:12px; color:rgba(255,255,255,.65); margin:3px 0; }
body.tema-claro .wpp-bubble-opt-text{ color:#667781; }
.wpp-bubble-opt-btn{
  background:#1A3A5E; border:none; color:#4A9FFF;
  border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600;
  cursor:default; text-align:center; width:100%; margin-top:6px; display:block;
}
body.tema-claro .wpp-bubble-opt-btn{ background:#F0F6FF; color:#1A6FD4; }
/* Review */
.wiz-rev-grid{ display:flex; flex-direction:column; gap:10px; }
.wiz-rev-sec{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.wiz-rev-title{ font-size:12px; font-weight:700; color:var(--accent2); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.wiz-rev-title > svg{ flex-shrink:0; display:block; }
.wiz-rev-row{ display:flex; gap:8px; font-size:13px; padding:2px 0; color:var(--text); }
.wiz-rev-row span:first-child{ min-width:90px; color:var(--muted); flex-shrink:0; font-size:12px; }

.meta-coleta-integ-hint{
  margin-top:8px;padding:10px 12px;border-radius:10px;
  font-size:12px;line-height:1.45;color:var(--text);
  background:rgba(var(--primary-rgb),.09);border:1px solid rgba(var(--primary-rgb),.22);
}
body.tema-claro .meta-coleta-integ-hint{
  background:rgba(var(--primary-rgb),.06);border-color:rgba(var(--primary-rgb),.18);
}

/* ── WMC — shared WhatsApp message-card component ── */
.wmc-vars{
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
  font-size:11px; color:var(--muted); margin-bottom:8px;
}
.wmc-var-chip{
  background:rgba(74,159,255,.12); color:var(--accent2); border-radius:4px;
  padding:1px 7px; font-family:monospace; font-size:11px; cursor:pointer;
  border:1px solid rgba(74,159,255,.2); transition:.1s; user-select:none;
}
.wmc-var-chip:hover{ background:rgba(74,159,255,.25); border-color:var(--accent); }
.wmc-toggle-btn{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:4px 11px; border-radius:20px; border:1px solid var(--border);
  cursor:pointer; color:var(--muted); background:transparent; transition:.15s;
}
.wmc-toggle-btn:hover{ border-color:var(--accent); color:var(--accent); }
.wmc-toggle-btn.on,
.wmc-toggle-btn.ativo{ border-color:var(--accent); color:var(--accent2); background:rgba(var(--primary-rgb),.08); }

/* Nova Tarefa — ícones SVG alinhados a texto em botões */
#modal-nova-tarefa .wmc-toggle-btn,
#modal-nova-tarefa .midia-tipo-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#modal-nova-tarefa .wmc-toggle-btn svg,
#modal-nova-tarefa .midia-tipo-btn svg{
  flex-shrink:0;
}
#modal-nova-tarefa .btn-sm.btn-primary,
#modal-nova-tarefa .btn-sm.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#modal-nova-tarefa .btn-sm.btn-primary svg,
#modal-nova-tarefa .btn-sm.btn-secondary svg{
  flex-shrink:0;
}
.wmc-attach-zone{
  display:block;
  border:1.5px dashed var(--border); border-radius:10px;
  padding:12px 14px; background:var(--bg); transition:.15s; cursor:pointer;
}
.wmc-attach-zone:hover{ border-color:var(--accent); }
.wmc-attach-zone.has-file{ border-color:var(--success); border-style:solid; background:rgba(34,201,122,.04); cursor:default; }
.wmc-attach-row{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; font-size:13px;
}
.wmc-attach-thumb{ width:44px; height:44px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.wmc-attach-icon{
  width:44px; height:44px; border-radius:6px; flex-shrink:0;
  background:rgba(var(--primary-rgb),.1); display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.wiz-sec-div{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 10px; font-size:11px; font-weight:700;
  color:var(--muted);
}
.wiz-sec-div::before,.wiz-sec-div::after{ content:''; flex:1; height:1px; background:var(--border); }
.filtro-ativo-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  color:var(--accent2); background:rgba(var(--primary-rgb),.1); border:1px solid rgba(var(--primary-rgb),.25);
  border-radius:20px; padding:3px 11px; cursor:pointer; transition:.15s;
}
.filtro-ativo-badge:hover{ background:rgba(var(--primary-rgb),.2); }

/* ── RANKING – TABS ── */
.rank-tab{
  padding:8px 16px;border:none;border-bottom:3px solid transparent;
  background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;
  font-family:inherit;transition:.15s;margin-bottom:-2px;display:inline-flex;align-items:center;gap:5px;
  border-radius:6px 6px 0 0;
}
.rank-tab:hover{ color:var(--text);background:rgba(255,255,255,.04); }
.rank-tab.ativo{ color:var(--accent2);border-bottom-color:var(--accent);background:rgba(var(--primary-rgb),.06); }
body.tema-claro .rank-tab:hover{ background:rgba(0,0,0,.04); }
body.tema-claro .rank-tab.ativo{ background:rgba(var(--primary-rgb),.07); }

/* ── RANKING – PODIUM TOP 3 ── */
.rank-podium{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:0; margin-bottom:8px; align-items:end;
}
.rank-podium-slot{ display:flex;flex-direction:column;align-items:stretch; }
.rank-podium-card{
  background:var(--card);border:1px solid var(--border);
  border-bottom:none; border-radius:14px 14px 0 0;
  padding:20px 14px 16px;text-align:center;position:relative;transition:.2s;
}
.rank-podium-card.lider{
  border-color:rgba(245,196,0,.6);
  background:rgba(245,196,0,.09);
}
.rank-podium-card.prata{ border-color:rgba(180,190,200,.4); }
.rank-podium-card.bronze{ border-color:rgba(180,110,60,.35); }
.rank-podium-card.eu-card{ box-shadow:0 0 0 3px rgba(232,123,0,.2);border-color:var(--orange) !important; }
/* Plataformas / degraus */
.rank-podium-platform{
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 8px 8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; letter-spacing:1px;
}
.rank-podium-platform.lider{
  height:60px; font-size:13px; color:rgba(245,196,0,.6);
  background:rgba(245,196,0,.10);
  border-color:rgba(245,196,0,.5);
}
.rank-podium-platform.prata{
  height:36px; font-size:11px; color:rgba(180,190,200,.5);
  background:rgba(180,190,200,.07);
  border-color:rgba(180,190,200,.35);
}
.rank-podium-platform.bronze{
  height:18px; font-size:10px; color:rgba(180,110,60,.45);
  background:rgba(180,110,60,.07);
  border-color:rgba(180,110,60,.3);
}
.rank-podium-lider-tag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--yellow);color:#000;font-size:9px;font-weight:800;
  padding:2px 10px;border-radius:10px;letter-spacing:1.2px;white-space:nowrap;
}
.rank-eu-badge{
  font-size:9px;background:var(--orange);color:#fff;
  padding:1px 6px;border-radius:8px;font-weight:700;vertical-align:middle;
  margin-left:4px;letter-spacing:.3px;
}

/* ── RANKING – TABELA ── */
.rank-table-wrap{
  border-radius:10px; overflow-x:hidden;
  border:1px solid var(--border); max-width:100%;
}
.rank-table{
  width:100%; border-collapse:collapse;
  table-layout:fixed;
}
.rank-table th,
.rank-table td{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.rank-table th{
  background:var(--bg); padding:6px 8px; font-size:10.5px; color:var(--muted);
  font-weight:600; text-align:left;
  border-bottom:1px solid var(--border);
}
.rank-table td{
  padding:7px 8px; font-size:11.5px;
  border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle;
}
body.tema-claro .rank-table td{ border-bottom-color:rgba(0,0,0,.05); }
.rank-table tr:last-child td{ border-bottom:none; }
.rank-table tr.rank-eu-row{ background:rgba(232,123,0,.06); }
.rank-table tr:hover td{ background:rgba(255,255,255,.02); }
body.tema-claro .rank-table tr:hover td{ background:rgba(0,0,0,.025); }
.rank-pos-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:var(--bg);
  font-size:11px; font-weight:800; color:var(--muted2);
}
.rank-score-pill{
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:20px;
  font-size:10.5px; font-weight:800;
}
.rank-score-verde{ background:rgba(34,201,122,.15);color:var(--success); }
.rank-score-amarelo{ background:rgba(255,194,51,.15);color:var(--warn); }
.rank-score-vermelho{ background:rgba(255,68,85,.15);color:var(--danger); }
.rank-evo-up{ color:var(--success);font-weight:800;font-size:12px; }
.rank-evo-down{ color:var(--danger);font-weight:800;font-size:12px; }
.rank-evo-eq{ color:var(--muted);font-size:12px; }
/* ── HISTÓRICO DE EVOLUÇÃO ─────────────────────────────── */
.hist-destaque-card{ background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:5px; }
.hist-destaque-emoji{ font-size:20px;line-height:1; }
.hist-destaque-label{ font-size:11px;color:var(--muted);font-weight:600; }
.hist-destaque-nome{ font-size:14px;font-weight:700;margin-top:2px; }
.hist-destaque-val{ font-size:12px;color:var(--muted); }
.hist-desemp-btn{ padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;transition:.15s;font-family:inherit; }
.hist-desemp-btn.ativo{ background:var(--accent);color:#fff;border-color:var(--accent); }
.hist-desemp-btn:hover:not(.ativo){ border-color:var(--accent);color:var(--text); }
/* ── DESEMPENHO / ADESÃO ───────────────────────────────────── */
.ades-progress{ background:var(--border);border-radius:4px;height:6px;overflow:hidden;margin-top:3px; }
.ades-progress-bar{ height:100%;border-radius:4px;transition:width .6s; }
.th-sortable{ cursor:pointer;user-select:none;transition:.1s; }
.th-sortable:hover{ color:var(--text);background:rgba(255,255,255,.03); }
/* ── PADRÕES DE FALHA ──────────────────────────────────────── */
.padrao-card{ background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s; }
.padrao-card:hover{ border-color:rgba(255,255,255,.12); }
.padrao-header{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border); }
.padrao-body{ padding:12px 16px; }
.padrao-footer{ display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--border);flex-wrap:wrap; }
.nivel-badge{ display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; }
.nivel-critico{ background:rgba(255,68,85,.15);color:var(--danger);border:1px solid rgba(255,68,85,.3); }
.nivel-atencao{ background:rgba(255,194,51,.15);color:var(--warn);border:1px solid rgba(255,194,51,.3); }
.nivel-normal{ background:rgba(34,201,122,.15);color:var(--success);border:1px solid rgba(34,201,122,.3); }
.padrao-stat{ display:flex;align-items:center;gap:6px;padding:5px 0;font-size:12px;border-bottom:1px solid var(--border);margin-bottom:2px; }
.padrao-stat:last-child{ border-bottom:none;margin-bottom:0; }
.padrao-stat-icon{ font-size:14px;width:20px;text-align:center; }
.padrao-tab{
  flex:0 1 auto;
  padding:6px 9px; border:none; border-bottom:3px solid transparent;
  background:transparent; color:var(--muted); cursor:pointer;
  font-size:11px; font-weight:600; font-family:inherit; transition:.15s;
  white-space:normal; text-align:center;
}
.padrao-tab.ativo{ color:var(--accent2);border-bottom-color:var(--accent); }
.dash-padrao-tabbar{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:2px solid var(--border); margin-bottom:16px;
  overflow-x:hidden; max-width:100%;
}
.padrao-user-guia{ background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px; }
body.tema-claro .padrao-card{ background:#fff; }
body.tema-claro .padrao-card:hover{ border-color:rgba(0,0,0,.15); }
@media(max-width:600px){
  .rank-podium{ grid-template-columns:1fr; }
  .rank-podium-slot{ margin-bottom:12px; }
  .rank-podium-card{ border-radius:14px; border-bottom:1px solid var(--border); }
  .rank-podium-platform{ display:none; }
  .rank-table th:nth-child(3),.rank-table td:nth-child(3){ display:none; }
}

/* ── MSG EDITOR ── */
.msg-editor{ border:1.5px solid var(--border); border-radius:10px; overflow:visible; background:var(--surface); transition:border-color .15s; }
.msg-editor:focus-within{ border-color:var(--accent); }
.msg-editor-toolbar{
  display:flex; align-items:center; gap:2px; padding:6px 8px;
  border-bottom:1px solid var(--border); background:var(--bg);
  border-radius:10px 10px 0 0; flex-wrap:wrap;
}
.msg-fmt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 6px;
  border:none; border-radius:6px; cursor:pointer;
  background:transparent; color:var(--text); font-size:13px; font-weight:700;
  transition:background .15s, color .15s; white-space:nowrap; gap:4px;
}
.msg-fmt-btn:hover{ background:rgba(var(--primary-rgb),.12); color:var(--accent); }
.msg-fmt-btn.ativo{ background:rgba(var(--primary-rgb),.18); color:var(--accent2); }
.msg-fmt-sep{ width:1px; height:20px; background:var(--border); margin:0 4px; flex-shrink:0; }
.msg-editor textarea{
  border:none; background:transparent; color:var(--text); font-size:13px;
  resize:vertical; width:100%; padding:10px 12px; outline:none;
  font-family:'DM Sans',sans-serif; min-height:100px; border-radius:0 0 10px 10px;
}

/* Disparo em massa — lista de variações (anti-ban) */
.disparo-var-rows{
  max-height:min(52vh,420px);
  overflow-y:auto;
  padding-right:4px;
}
.disparo-var-row .disparo-var-input{
  min-height:72px;
}

/* ══════════════════════════════════════════════════════════════
   EMOJI PICKER — estilo WhatsApp Web
   ══════════════════════════════════════════════════════════════ */
.emoji-picker-wrap{ position:relative; }

/* Painel principal */
.wpp-emoji-panel{
  position:fixed; z-index:9500;
  width:350px; height:450px;
  background:#111b21; border-radius:12px;
  box-shadow:0 6px 40px rgba(0,0,0,.5);
  display:none; flex-direction:column; overflow:hidden;
  border:none;
}
body.tema-claro .wpp-emoji-panel{ background:#f0f2f5; box-shadow:0 6px 40px rgba(0,0,0,.18); }
.wpp-emoji-panel.aberto{ display:flex; }

/* Barra de busca */
.wpp-emoji-search{
  display:flex; align-items:center; gap:8px;
  margin:10px 10px 6px; padding:6px 12px;
  background:#202c33; border-radius:8px; flex-shrink:0;
}
body.tema-claro .wpp-emoji-search{ background:#e9edef; }
.wpp-emoji-search-ico{ color:#8696a0; flex-shrink:0; }
.wpp-emoji-search input{
  border:none; background:transparent; outline:none; width:100%;
  font-size:13.5px; color:#e9edef; font-family:inherit;
}
body.tema-claro .wpp-emoji-search input{ color:#111b21; }
.wpp-emoji-search input::placeholder{ color:#8696a0; }

/* Grid de emojis (scroll interno) */
.wpp-emoji-grid{
  flex:1; overflow-y:auto; padding:4px 6px 2px;
  display:grid; grid-template-columns:repeat(8,1fr);
  align-content:start; gap:0;
  scrollbar-width:thin; scrollbar-color:#374045 transparent;
}
.wpp-emoji-grid::-webkit-scrollbar{ width:4px; }
.wpp-emoji-grid::-webkit-scrollbar-track{ background:transparent; }
.wpp-emoji-grid::-webkit-scrollbar-thumb{ background:#374045; border-radius:4px; }

/* Cabeçalho de seção (span toda a largura do grid) */
.wpp-emoji-section-hd{
  grid-column:1/-1; font-size:11px; font-weight:600; letter-spacing:.5px;
  color:#8696a0; padding:8px 4px 4px; text-transform:uppercase;
}

/* Botão de emoji individual */
.wpp-emoji-btn{
  border:none; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; padding:4px;
  border-radius:8px; transition:background .1s; text-align:center;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
}
.wpp-emoji-btn:hover{ background:rgba(134,150,160,.15); }


/* ── PAINEL UNIFICADO: estrutura de abas ───────────────────── */
.wpp-tab-content{
  display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;
}

/* Barra de abas principais (Emoji | GIF | Figurinhas) */
.wpp-main-tabs{
  display:flex; align-items:center; justify-content:space-around;
  padding:0 6px; height:46px; flex-shrink:0;
  border-top:1px solid #202c33;
}
body.tema-claro .wpp-main-tabs{ border-top-color:#e9edef; }
.wpp-main-tab-btn{
  border:none; background:transparent; cursor:pointer;
  color:#8696a0; padding:8px 20px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.wpp-main-tab-btn:hover{ color:#e9edef; background:rgba(255,255,255,.06); }
.wpp-main-tab-btn.ativo{ color:#00a884; }
.wpp-main-tab-btn.ativo svg{ stroke:#00a884; fill:none; }
body.tema-claro .wpp-main-tab-btn{ color:#8696a0; }
body.tema-claro .wpp-main-tab-btn:hover{ color:#111b21; background:rgba(0,0,0,.04); }
body.tema-claro .wpp-main-tab-btn.ativo{ color:#00a884; }
.wpp-gif-label{ font-size:13px; font-weight:800; letter-spacing:.5px; }

/* Cabeçalho da aba de figurinhas */
.wpp-fig-tab-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text); flex-shrink:0;
}

/* Grid de GIFs */
.wpp-gif-grid{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:6px;
  display:grid; grid-template-columns:1fr 1fr;
  grid-auto-rows:110px;
  gap:4px; align-content:start;
  scrollbar-width:thin; scrollbar-color:#374045 transparent;
}
.wpp-gif-empty{
  grid-column:1/-1; text-align:center;
  padding:40px 20px; color:var(--muted); font-size:13px;
  height:auto; /* anula grid-auto-rows para o placeholder */
}
.wpp-gif-item{
  border-radius:6px; overflow:hidden; cursor:pointer;
  background:rgba(255,255,255,.05);
  transition:opacity .15s;
  height:110px; /* garante altura uniforme em todas as células */
}
.wpp-gif-item:hover{ opacity:.8; }
.wpp-gif-item img{ width:100%; height:100%; display:block; object-fit:cover; }

/* A grade de figurinhas já usa .chat-fig-grid — só garante flex:1 */
#wpp-tab-fig .chat-fig-grid{ flex:1; overflow-y:auto; }

/* Barra de categorias emoji (fica acima das abas principais) */
.wpp-emoji-cats{
  display:flex; align-items:center; justify-content:space-around;
  padding:0 6px; height:46px; flex-shrink:0;
  border-top:1px solid #202c33;
}
body.tema-claro .wpp-emoji-cats{ border-top-color:#e9edef; }

/* Botão de categoria */
.wpp-emoji-cat-btn{
  border:none; background:transparent; cursor:pointer;
  font-size:18px; padding:8px 6px; opacity:.45;
  transition:opacity .15s; border-top:2px solid transparent;
  margin-top:-1px; border-radius:0; flex:1; text-align:center;
}
.wpp-emoji-cat-btn:hover{ opacity:.75; }
.wpp-emoji-cat-btn.ativo{
  opacity:1; border-top-color:#00a884;
}

/* ── Manter classes antigas para o picker de disparo (retrocompat) ── */
.emoji-panel{
  position:absolute; bottom:calc(100% + 8px); left:0; z-index:300;
  width:350px; height:450px; background:#111b21; border-radius:12px;
  box-shadow:0 6px 40px rgba(0,0,0,.5);
  display:none; flex-direction:column; overflow:hidden;
}
body.tema-claro .emoji-panel{ background:#f0f2f5; }
.emoji-panel.aberto{ display:flex; }
.emoji-cats{
  display:flex; align-items:center; justify-content:space-around;
  padding:0 6px; height:46px; flex-shrink:0;
  border-top:1px solid #202c33; order:2;
}
body.tema-claro .emoji-cats{ border-top-color:#e9edef; }
.emoji-cat-btn{
  border:none; background:transparent; cursor:pointer; font-size:18px;
  padding:8px 6px; opacity:.45; transition:opacity .15s;
  border-top:2px solid transparent; margin-top:-1px; flex:1; text-align:center;
}
.emoji-cat-btn.ativo{ opacity:1; border-top-color:#00a884; }
.emoji-cat-btn:hover{ opacity:.75; }
.emoji-grid{
  flex:1; display:grid; grid-template-columns:repeat(8,1fr);
  padding:4px 6px; overflow-y:auto; align-content:start; gap:0;
  scrollbar-width:thin; scrollbar-color:#374045 transparent; order:1;
}
.emoji-grid::-webkit-scrollbar{ width:4px; }
.emoji-grid::-webkit-scrollbar-thumb{ background:#374045; border-radius:4px; }
.emoji-btn{
  border:none; background:transparent; cursor:pointer; font-size:22px;
  padding:5px; border-radius:8px; transition:background .1s; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.emoji-btn:hover{ background:rgba(134,150,160,.15); }

/* ── TEMPLATES PANEL ── */
.tpl-panel{
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-top:8px; display:none;
}
.tpl-panel.aberto{ display:block; }
.tpl-card{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid var(--border); border-radius:8px; margin-bottom:6px;
  cursor:pointer; transition:border-color .15s, background .15s; background:var(--surface);
}
.tpl-card:hover{ border-color:var(--accent); background:rgba(var(--primary-rgb),.05); }
.tpl-card-body{ flex:1; min-width:0; }
.tpl-card-nome{ font-size:13px; font-weight:600; margin-bottom:2px; }
.tpl-card-prev{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── HISTÓRICO AGENDAMENTOS ── */
.ag-hist-row{
  display:flex; align-items:flex-start; gap:12px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px; margin-bottom:6px;
  background:var(--surface); transition:border-color .15s;
}
.ag-hist-row:hover{ border-color:var(--accent); }
.ag-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; flex-shrink:0;
}
.ag-badge.pendente { background:rgba(255,194,51,.15);  color:var(--warn); }
.ag-badge.executado{ background:rgba(34,201,122,.15);  color:var(--success); }
.ag-badge.erro      { background:rgba(255,68,85,.15);   color:var(--danger); }
.ag-badge.cancelado { background:rgba(74,106,144,.15);  color:var(--muted); }

/* ── NOTIF CARDS ── */
.notif-card{
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.notif-card.desativado{ opacity:.5; }
.notif-toggle{ display:flex; align-items:center; gap:10px; }
.notif-fmt-btn{
  padding:3px 9px; border-radius:6px; border:1.5px solid var(--border);
  background:transparent; color:var(--muted); font-size:11px; cursor:pointer;
  transition:all .15s;
}
.notif-fmt-btn:hover{ border-color:var(--accent); color:var(--accent); }
.notif-fmt-btn.ativo{ border-color:var(--accent); background:rgba(var(--primary-rgb),.12); color:var(--accent2); }

/* ── EMAIL TEMPLATE TABS ── */
.email-tpl-tabbar{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--border); background:var(--surface);
  overflow-x:hidden; max-width:100%;
}
.email-tpl-pane{ background:var(--card); }
.email-sub-pane{ background:var(--card); }
.email-tpl-tab{
  flex:1 1 auto;
  padding:7px 9px; border:none; border-bottom:3px solid transparent;
  background:transparent; color:var(--muted); font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s;
  white-space:normal; text-align:center; min-width:0;
}
.email-tpl-tab:hover{ color:var(--text); }
.email-tpl-tab.ativo{ color:var(--accent2); border-bottom-color:var(--accent); background:rgba(var(--primary-rgb),.07); }

/* Sub-abas Envio / Conteúdo */
.email-sub-tabbar{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--border);
  overflow-x:hidden; max-width:100%;
}
.email-sub-tab{
  flex:0 1 auto;
  padding:6px 10px; border:none; border-bottom:2px solid transparent;
  background:transparent; color:var(--muted); font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s;
  white-space:normal; text-align:center;
}
.email-sub-tab:hover{ color:var(--text); }
.email-sub-tab.ativo{ color:var(--accent); border-bottom-color:var(--accent); background:rgba(var(--primary-rgb),.05); }

/* Info box contextual */
.info-box{
  background:rgba(var(--primary-rgb),.07); border:1px solid rgba(var(--primary-rgb),.2);
  border-radius:8px; padding:10px 14px; font-size:12px; color:var(--muted2); line-height:1.5;
}
/* Linha de campos lado a lado */
.form-row{ display:flex; gap:14px; flex-wrap:wrap; }
.form-row .form-field{ flex:1; min-width:min(140px, 100%); }
/* Blocos de conteúdo */
.email-blocos-grid{
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.email-bloco-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  cursor:pointer; transition:background .12s; border-bottom:1px solid var(--border);
}
.email-bloco-item:last-child{ border-bottom:none; }
.email-bloco-item:hover{ background:rgba(var(--primary-rgb),.05); }
.email-bloco-item input[type="checkbox"]{ flex-shrink:0; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.email-bloco-info{ display:flex; flex-direction:column; gap:2px; }
.email-bloco-nome{ font-size:13px; font-weight:600; color:var(--text); }
.email-bloco-desc{ font-size:11px; color:var(--muted); }
/* Hints de variáveis */
.email-vars-hint{ font-size:11px; color:var(--muted); margin-bottom:6px; }
.email-vars-hint code{ background:var(--surface); padding:1px 5px; border-radius:4px; font-size:10px; }
/* label-optional */
.label-optional{ font-size:11px; color:var(--muted); font-weight:400; }
/* Status label cor */
.etpl-status-on{ color:var(--success) !important; }
.etpl-status-off{ color:var(--muted) !important; }

/* ── SELETOR DE TIPO DE MÍDIA (Anexo WPP) ── */
.midia-tipo-btn-group{ display:flex; gap:5px; flex-wrap:wrap; }
.midia-tipo-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:6px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--muted2);
  font-size:10px; font-weight:600; cursor:pointer; transition:all .14s;
  white-space:normal; text-align:center; line-height:1.25;
}
.midia-tipo-btn:hover{ border-color:var(--accent); color:var(--accent2); }
.midia-tipo-btn.ativo{ border-color:var(--accent); background:rgba(var(--primary-rgb),.13); color:var(--accent2); }
.midia-tipo-btn.ativo-foto  { border-color:#18A863; background:rgba(24,168,99,.12);  color:#18A863; }
.midia-tipo-btn.ativo-audio { border-color:#E87B00; background:rgba(232,123,0,.12);  color:#E87B00; }
.midia-tipo-btn.ativo-video { border-color:#9C52E0; background:rgba(156,82,224,.12); color:#9C52E0; }
.midia-tipo-btn.ativo-documento { border-color:var(--accent); background:rgba(var(--primary-rgb),.13); color:var(--accent2); }
/* Aviso de formato */
.midia-formato-aviso{
  font-size:10px; color:var(--muted); padding:4px 8px;
  background:var(--surface2); border-radius:5px; border:1px solid var(--border);
  line-height:1.4; margin-top:2px;
}

/* ── CONFIG TABS ── */
.config-tab{
  padding:9px 14px; border:none; border-bottom:3px solid transparent;
  background:transparent; color:var(--muted); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:all .15s; margin-bottom:-2px;
  border-radius:8px 8px 0 0;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.config-tab:hover{ color:var(--text); background:rgba(74,159,255,.06); }
.config-tab.ativo{ color:var(--accent2); border-bottom-color:var(--accent); background:rgba(var(--primary-rgb),.08); }
.config-tab-content{ animation:fadeIn .2s ease; }
#cfg-sec-identidade-visual{ scroll-margin-top:max(72px,calc(var(--topbar-h-base) + 12px)); }

/* ── CONFIG CARDS (seção card reutilizável em todas as abas) ── */
.cfg-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; margin-bottom:14px;
}
.cfg-card-hd{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--border);
  background:var(--surface);
}
.cfg-card-icon{
  width:34px; height:34px; border-radius:9px;
  background:rgba(var(--primary-rgb),.12); color:var(--accent2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cfg-card-hd-info{ flex:1; min-width:0; }
.cfg-card-hd-title{ font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:2px; }
.cfg-card-hd-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.cfg-card-body{ padding:18px; }

/* ── CONFIG INFO BANNER ── */
.cfg-info-banner{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px;
  background:rgba(var(--primary-rgb),.07); border:1px solid rgba(var(--primary-rgb),.18);
  border-radius:10px; margin-bottom:16px;
  font-size:13px; color:var(--muted2); line-height:1.5;
}

/* ── CONFIG SAVE BAR ── */
.cfg-save-bar{
  display:flex; gap:10px; align-items:center;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--border);
}
.cfg-save-bar .cfg-status{ font-size:13px; color:var(--success); }

/* ── CONFIG STATS GRID ── */
.cfg-stats-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; margin-bottom:16px;
}
.cfg-stat-card{
  padding:16px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; text-align:center;
}
.cfg-stat-val{ font-size:22px; font-weight:800; color:var(--accent); line-height:1.2; }
.cfg-stat-lbl{ font-size:10.5px; font-weight:600; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }

/* ── CONFIG SUBSECTION LABEL ── */
.cfg-subsec{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:18px 0 12px;
  display:flex; align-items:center; gap:8px;
}
.cfg-subsec::after{ content:''; flex:1; height:1px; background:var(--border); }
.cfg-subsec:first-child{ margin-top:0; }

/* ── CONFIG MANUTENÇÃO CARDS ── */
.cfg-maint-card{
  padding:0; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; margin-bottom:12px;
}
.cfg-maint-card-hd{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--border);
  background:var(--surface);
}
.cfg-maint-card-icon{
  width:32px; height:32px; border-radius:8px;
  background:rgba(var(--primary-rgb),.10); color:var(--accent2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.cfg-maint-card-text{ flex:1; min-width:0; }
.cfg-maint-card-title{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:1px; }
.cfg-maint-card-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.cfg-maint-card-body{ padding:14px 16px; }

/* ── CONFIG RETENTION TOGGLES (manutenção) ── */
.cfg-ret-block{
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.cfg-ret-block-hd{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.cfg-ret-block-title{ font-size:13px; font-weight:600; color:var(--text); }
.cfg-ret-toggle-wrap{ display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12px; }
.cfg-ret-toggle-lbl{ color:var(--muted); }

/* ── Empresa / cores dos temas: cards com prévia real (tonalidades por modo, não herdadas do tema ativo) ── */
.cfg-ui-cores-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:10px;
}
@media (max-width:720px){
  .cfg-ui-cores-grid{ grid-template-columns:1fr; }
}
.cfg-ui-tema-card{
  border-radius:10px;
  padding:12px;
  border:1px solid var(--pv-border, #1A3050);
  background:var(--pv-card-bg, #0A1525);
  color:var(--pv-text, #E8F0FB);
  /* marca / derivados — definidos por JS */
  --pv-brand:#0D2B5E;
  --pv-brand-mid:#1A4080;
  --pv-brand-lit:#2A5BA8;
  --pv-accent:#1E6FD9;
}
.cfg-ui-tema-card--escuro{
  --pv-border:#1A3050;
  --pv-card-bg:#0A1525;
  --pv-text:#E8F0FB;
  --pv-muted:#6A8AAB;
  --pv-shell-bg:#080E1A;
  --pv-surface:#0E1C30;
  --pv-surface-inner:#071018;
}
.cfg-ui-tema-card--claro{
  --pv-border:#C8D8EE;
  --pv-card-bg:#F4F7FC;
  --pv-text:#0D2B5E;
  --pv-muted:#5A7399;
  --pv-shell-bg:#EEF2FA;
  --pv-surface:#FFFFFF;
  --pv-surface-inner:#F4F7FC;
}
.cfg-ui-tema-card-hd{
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--pv-text);
}
.cfg-ui-tema-campos{ margin-bottom:10px; }
.cfg-ui-tema-linha{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.cfg-ui-tema-linha:last-child{ margin-bottom:0; }
.cfg-ui-tema-lbl{
  font-size:11px;
  color:var(--pv-muted);
  min-width:72px;
}
.cfg-ui-tema-colorpick{
  width:44px;
  height:32px;
  border-radius:6px;
  border:1.5px solid var(--pv-border);
  cursor:pointer;
  padding:2px;
  flex-shrink:0;
  background:var(--pv-surface);
}
.cfg-ui-tema-hex{
  max-width:110px;
  font-family:ui-monospace,monospace;
  font-size:12px;
  padding:6px 8px;
  border-color:var(--pv-border);
  color:var(--pv-text);
  background:var(--pv-surface);
}
.cfg-ui-tema-preview{
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--pv-border);
}
.cfg-ui-tema-prev-caption{
  font-size:10px;
  color:var(--pv-muted);
  line-height:1.35;
  margin:8px 0 0;
}
.cfg-ui-tema-mini{
  display:flex;
  height:76px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--pv-border);
  background:var(--pv-shell-bg);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.cfg-ui-tema-card--escuro .cfg-ui-tema-mini{ box-shadow:0 2px 8px rgba(0,0,0,.35); }
.cfg-ui-tema-mini-side{
  width:26%;
  min-width:56px;
  /* Sidebar com a cor primária — igual ao padrão do sistema */
  background:var(--pv-brand);
  border-right:1px solid rgba(0,0,0,.18);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:10px;
}
.cfg-ui-tema-mini-logo{
  width:28px;
  height:28px;
  border-radius:8px;
  /* Logo como quadrado claro sobre o fundo da cor primária */
  background:rgba(255,255,255,.28);
  box-shadow:0 1px 4px rgba(0,0,0,.40);
}
.cfg-ui-tema-mini-body{
  flex:1;
  min-width:0;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:5px;
  justify-content:center;
  background:var(--pv-surface-inner);
}
.cfg-ui-tema-mini-line{
  display:block;
  height:5px;
  border-radius:3px;
  background:var(--pv-border);
  opacity:.55;
}
.cfg-ui-tema-mini-line.short{ width:58%; opacity:.38; }
.cfg-ui-tema-mini-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
.cfg-ui-tema-mini-btn-prim{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  /* brand-lit → brand: gradiente legível mesmo com primária muito escura */
  background:linear-gradient(135deg,var(--pv-brand-lit),var(--pv-brand));
  box-shadow:0 1px 2px rgba(0,0,0,.22);
}
.cfg-ui-tema-mini-chip-ac{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:700;
  text-transform:lowercase;
  color:#fff;
  background:var(--pv-accent);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}

.btn-danger{
  background:var(--danger); color:#fff; border:none;
}
.btn-danger:hover{ background:#cc3344; }
.notif-toggle input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.notif-toggle-label{ font-size:13px; font-weight:700; flex:1; }

/* ── ENVIOS FEED ── */
.envio-item{
  display:grid;
  grid-template-columns:10px 1fr 118px;
  gap:10px;
  align-items:start;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
}
.envio-item:last-child{ border-bottom:none; }
.envio-status-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.envio-status-dot.respondeu    { background:var(--success); }
.envio-status-dot.nao-respondeu{ background:var(--danger); }
.envio-status-dot.parcial      { background:#F59E0B; }
.envio-status-dot.sem-resposta { background:var(--muted2,#8a9ab5); }
.envio-quando{
  text-align:right;
  align-self:start;
  justify-self:end;
  width:118px;
}

/* ════════════════════════════════════════════════════════════
   ── WHATSAPP HUB (split-pane chat interface) ───────────────
   ════════════════════════════════════════════════════════════ */

/* ── WHATSAPP HUB: layout tela-cheia ─────────────────────────
   Cancela o padding do content-area e usa 100% da viewport.      */

/* WhatsApp: painel fora da content-area (#app-screen) — overlay fixo na coluna principal */
#panel-whatsapp.panel.active{
  display:block;
  position:fixed;
  z-index:160;
  top:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px));
  right:0;
  bottom:0;
  left:240px;
  margin:0;
  width:auto;
  max-width:none;
}
body.wpp-screen.wpp-topbar-collapsed #panel-whatsapp.panel.active{
  top:calc(var(--topbar-wpp-peek-strip) + env(safe-area-inset-top, 0px));
}
body:has(.app-main.sidebar-collapsed) #panel-whatsapp.panel.active{
  left:64px;
}

/* Panel-inner: preenche o retângulo fixo */
#panel-whatsapp .panel-inner{
  padding:0; display:flex; flex-direction:column; overflow:hidden;
  height:100%;
  min-height:0;
  border:none; border-radius:0;
}

/* Flex encadeado: sem min-height:0 a view da conversa pode não ocupar a altura útil e sobra
   faixa clara (#panel-inner) entre o composer e a borda inferior (comum no iOS/Safari). */
#panel-whatsapp .wpp-hub-grid,
#panel-whatsapp .wpp-hub-main{
  min-height:0;
}
#panel-whatsapp .wpp-hub-view.ativo{
  flex:1 1 0%;
  min-height:0;
}

/* Composer: scroll só em .chat-messages — sticky aqui costuma falhar no WebKit e “levanta” o bloco */
#panel-whatsapp .chat-footer{
  position:relative;
  bottom:auto;
}

/* Barra de status: oculta (status movido para sidebar) */
.wpp-hub-bar{ display:none !important; }

/* Grid: flex (sidebar retrátil via width transition) */
.wpp-hub-grid{
  flex:1; display:flex; overflow:hidden; min-height:0;
}

/* ── SIDEBAR ESQUERDA ───────────────────────────────────────── */
.wpp-hub-sidebar{
  display:flex; flex-direction:column; overflow:hidden;
  border-right:1px solid rgba(134,150,160,.15); background:#111b21;
  width:min(332px, 100%); flex-shrink:0;
  transition:width .22s ease;
}
body.tema-claro .wpp-hub-sidebar{ background:#fff; border-right:1px solid var(--border); }

/* Sidebar colapsada */
.wpp-hub-grid.sidebar-fechada .wpp-hub-sidebar{
  width:0; border-right:none; overflow:hidden;
}

/* Cabeçalho da sidebar */
.wpp-hub-sidebar-hd{
  display:flex; align-items:center; gap:1px;
  padding:6px 6px 5px; flex-shrink:0;
  border-bottom:1px solid rgba(134,150,160,.1);
  min-width:0;
}
.wpp-hub-sidebar-hd-title{
  font-size:12px; font-weight:700; color:var(--text);
  flex:0 1 auto; min-width:0; max-width:4.75rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Sidebar WhatsApp: manter só o indicador (ponto) — sem texto "Conversas" */
.wpp-hub-sidebar-hd{
  gap:6px;
}
.wpp-hub-sidebar-hd-title{
  display:none;
}
/* Ferramentas — alinhar ao início: com flex-end + overflow:hidden o ZIP da esquerda sumia (ex.: Disparo). */
.wpp-hub-sidebar-actions{
  display:flex;
  gap:1px;
  flex:1 1 auto;
  justify-content:flex-start;
  align-items:center;
  min-width:0;
  max-width:none;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  overscroll-behavior-x:contain;
}

/* Status na sidebar */
.wpp-hub-sidebar-status{
  display:flex; align-items:center; gap:4px; flex-shrink:1;
  min-width:0;
  padding:0 2px;
}
.wpp-hub-sidebar-status .wpp-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* Botões da sidebar (ferramentas + toggle) */
.wpp-hub-sidebar-btn,
.wpp-sidebar-toggle{
  width:30px; height:30px; border-radius:6px; border:none;
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.12s; flex-shrink:0;
}
.wpp-hub-sidebar-btn svg,
.wpp-sidebar-toggle svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}
.wpp-hub-sidebar-btn:hover,
.wpp-sidebar-toggle:hover{ background:var(--surface2); color:var(--primary,var(--accent)); }
.wpp-hub-sidebar-btn.ativo{ background:var(--primary-soft,rgba(var(--primary-rgb),.12)); color:var(--primary,var(--accent)); }

/* Botão flutuante para reabrir sidebar */
.wpp-sidebar-reabrir{
  position:absolute; top:10px; left:10px; z-index:10;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--muted); cursor:pointer;
  display:none; align-items:center; justify-content:center;
  transition:.12s; box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.wpp-hub-grid.sidebar-fechada .wpp-sidebar-reabrir{ display:flex; }
.wpp-sidebar-reabrir:hover{ color:var(--accent); border-color:var(--accent); }

/* Busca — estilo discreto tipo WhatsApp (sidebar escura/clara) */
.wpp-hub-sidebar-search{
  padding:5px 8px 2px; flex-shrink:0;
  display:flex; align-items:center; gap:4px;
}
.wpp-hub-sidebar-search input{
  flex:1; min-width:0; padding:5px 12px; border-radius:999px; font-size:12px;
  background:#202c33; border:none; color:#e9edef;
  outline:none; transition:background .15s, opacity .15s; font-family:'DM Sans',sans-serif;
  box-sizing:border-box;
}
.wpp-hub-sidebar-search .wpp-sbtn-nova-conversa,
.wpp-hub-sidebar-search .wpp-hub-sidebar-btn{
  flex-shrink:0; width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:50%; cursor:pointer;
  color:#aebac1; transition:color .15s, background .15s;
}
.wpp-hub-sidebar-search .wpp-sbtn-nova-conversa:hover,
.wpp-hub-sidebar-search .wpp-hub-sidebar-btn:hover{ color:#e9edef; background:rgba(134,150,160,.15); }
.wpp-hub-sidebar-search input::placeholder{ color:rgba(241,249,246,.52); }
.wpp-hub-sidebar-search input:focus{
  outline:2px solid rgba(134,163,177,.28); outline-offset:0;
  background:#2a3942;
}

/* Filtros da lista — grid 2 col (cargo/setor), chips em linha; sem cortar “Todos” */
.chat-lista-filtros{
  flex-shrink:0; padding:5px 8px 7px;
  border-bottom:1px solid rgba(134,150,160,.09);
  display:flex; flex-direction:column; gap:5px;
  min-width:0;
}
.chat-filtros-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  min-width:0;
}
.chat-filtros-checks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-width:0;
  justify-content:space-between;
}
.chat-filtros-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  flex:1 1 auto;
  min-width:0;
}
.chat-filtros-acoes-linha{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  flex-shrink:0;
}
.chat-filtro-field{
  display:flex; flex-direction:column; gap:0; min-width:0;
  position:relative;
}
/* Label continua ligado ao controle por acessibilidade; só não ocupa espaço visual */
.chat-filtro-lbl{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.chat-filtro-select{
  width:100%;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
  /* Mesma “altura” dos chips “Não lidas” (.chat-filtro-chk) */
  padding:4px 18px 4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  line-height:1.25;
  min-height:0;
  background-color:#202c33;
  border:none;
  color:rgba(241,249,246,.9);
  font-family:'DM Sans',sans-serif;
  outline:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 6px center;
  background-size:9px 9px;
  /* Não use shorthand `background` em :hover — resetaria repeat e multicava o ícone */
  transition:background-color .15s, color .15s;
}
.chat-filtro-select option{ background:#111b21; color:#e9edef; }
.chat-filtro-select:hover{ background-color:#2a3942; }
.chat-filtro-select:focus-visible{
  outline:2px solid rgba(134,163,177,.32); outline-offset:1px;
}
.wpp-hub-sidebar .chat-filtro-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.chat-filtro-chk{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  font-size:10px; font-weight:600;
  color:rgba(209,209,209,.58);
  cursor:pointer; user-select:none;
  padding:4px 8px; border-radius:999px;
  line-height:1.25;
  background:#202c33;
  flex:0 1 auto;
  min-width:0;
  text-align:center;
  transition:background .15s, color .15s;
}
.chat-filtro-chk:hover{ background-color:#2a3942; color:rgba(231,239,239,.82); }
.chat-filtro-chk:focus-within{ outline:2px solid rgba(134,163,177,.28); outline-offset:1px; }
.chat-filtro-chk input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.chat-filtro-chk:has(input:checked){
  background:#3f4f5b;
  color:#f7f9fa;
  font-weight:600;
}
.chat-filtro-limpar{
  align-self:center;
  width:auto;
  margin:0;
  padding:4px 8px; border-radius:999px; font-size:10px; font-weight:600;
  line-height:1.25;
  border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  background:rgba(255,255,255,.05);
  color:rgba(233,237,239,.62);
  transition:background .15s, color .15s;
}
.chat-filtro-limpar:hover{
  background:rgba(255,255,255,.08);
  color:#e9edef;
}

.chat-filtro-marcar-lidas{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  background:rgba(255,255,255,.05);
  color:rgba(233,237,239,.72);
  transition:background .15s, color .15s;
}
.chat-filtro-marcar-lidas:hover{
  background:rgba(255,255,255,.1);
  color:#e9edef;
}
.chat-filtro-marcar-lidas svg{
  width:15px;
  height:15px;
  flex-shrink:0;
}

body.tema-claro .wpp-hub-sidebar-search input{
  background:#f0f3f6; border:none; color:#111b21;
}
body.tema-claro .wpp-hub-sidebar-search input::placeholder{ color:#667781; }
body.tema-claro .wpp-hub-sidebar-search input:focus{
  outline:2px solid rgba(94,146,206,.38);
  background:#e9edef;
}
body.tema-claro .wpp-hub-sidebar-search .wpp-sbtn-nova-conversa{ color:#54656f; }
body.tema-claro .wpp-hub-sidebar-search .wpp-sbtn-nova-conversa:hover{ color:#111b21; background:rgba(17,31,43,.08); }
body.tema-claro .chat-lista-filtros{
  border-bottom-color:rgba(17,31,43,.07);
}
body.tema-claro .chat-filtro-select{
  background-color:#f0f2f5;
  color:#54656f;
}
body.tema-claro .chat-filtro-select:hover{ background-color:#e9ecef; }
body.tema-claro .chat-filtro-select option{ background:#fff; color:#111b21; }
body.tema-claro .chat-filtro-select:focus-visible{
  outline:2px solid rgba(94,146,206,.35);
}
body.tema-claro .wpp-hub-sidebar .chat-filtro-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body.tema-claro .chat-filtro-chk{
  background:#f0f2f5;
  color:#667781;
}
body.tema-claro .chat-filtro-chk:hover{
  background-color:#e9edf0;
  color:#54656f;
}
body.tema-claro .chat-filtro-chk:has(input:checked){
  background:#d9dee3;
  color:#111b21;
}
body.tema-claro .chat-filtro-limpar{
  background:rgba(17,43,73,.06);
  color:#54656f;
}
body.tema-claro .chat-filtro-limpar:hover{
  background:rgba(17,43,73,.09);
  color:#111b21;
}
body.tema-claro .chat-filtro-marcar-lidas{
  background:rgba(17,43,73,.06);
  color:#54656f;
}
body.tema-claro .chat-filtro-marcar-lidas:hover{
  background:rgba(17,43,73,.1);
  color:#111b21;
}
.chat-lista-vazia{
  color:var(--muted); padding:16px 14px; text-align:center; font-size:13px; line-height:1.45;
}

/* ── ÁREA PRINCIPAL DIREITA ─────────────────────────────────── */
.wpp-hub-main{
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; background:var(--bg); position:relative;
  min-width:0; min-height:0;
}

/* Views */
.wpp-hub-view{
  display:none; flex-direction:column; flex:1; overflow:hidden; height:100%;
  min-height:0;
}
.wpp-hub-view.ativo{ display:flex; }

/* VIEW: Boas-vindas */
.wpp-hub-welcome{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px; padding:40px 24px; text-align:center;
}
.wpp-hub-welcome-icon{
  width:76px; height:76px; border-radius:50%;
  background:var(--primary-soft,rgba(var(--primary-rgb),.08));
  display:flex; align-items:center; justify-content:center;
  color:var(--primary,var(--accent));
}
.wpp-hub-welcome h3{ font-size:20px; font-weight:700; color:var(--text); }
.wpp-hub-welcome p{ font-size:13px; color:var(--muted); max-width:300px; line-height:1.5; }
.wpp-hub-welcome-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.wpp-hub-welcome-btn{
  display:flex; align-items:center; gap:7px; padding:9px 16px;
  border-radius:10px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer;
  font-size:13px; font-weight:600; transition:.15s; font-family:'DM Sans',sans-serif;
}
.wpp-hub-welcome-btn:hover{ border-color:var(--primary,var(--accent)); color:var(--primary,var(--accent)); background:var(--primary-soft,rgba(var(--primary-rgb),.05)); }

/* VIEW: Conversa — cabeçalho */
.wpp-hub-conv-hd{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:#202c33;
  border-bottom:none; flex-shrink:0;
}
/* Back (mobile) */
.wpp-hub-conv-back{
  display:none;
  width:34px; height:34px;
  border-radius:10px;
  border:none;
  background:rgba(255,255,255,.08);
  color:#e9edef;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
body.tema-claro .wpp-hub-conv-back{ background:rgba(0,0,0,.05); color:var(--text); }
.wpp-hub-conv-back:hover{ background:rgba(255,255,255,.12); }
body.tema-claro .wpp-hub-conv-back:hover{ background:rgba(0,0,0,.08); }
body.tema-claro .wpp-hub-conv-hd{ background:#f0f2f5; border-bottom:1px solid var(--border); }
.wpp-hub-conv-hd-avatar{
  width:40px; height:40px; border-radius:50%;
  background:#6b7c8a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; flex-shrink:0; overflow:hidden;
}
body.tema-claro .wpp-hub-conv-hd-avatar{ background:#b0bec5; }
.wpp-hub-conv-hd-info{ flex:1; min-width:0; }
.wpp-hub-conv-hd-info strong{ font-size:15px; font-weight:600; display:block; color:#e9edef; }
.wpp-hub-conv-hd-info small{ font-size:12px; color:rgba(241,241,242,.6); display:block; margin-top:0; }
body.tema-claro .wpp-hub-conv-hd-info strong{ color:var(--text); }
body.tema-claro .wpp-hub-conv-hd-info small{ color:var(--muted); }

.wpp-hub-conv-hd-tail{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  overflow:visible;
}

/* Botões de ação na conv: ocultos (ferramentas acessíveis via sidebar) */
.wpp-hub-conv-hd-btns{ display:none; }

/* Contato ativo na sidebar */
.chat-contato.ativo{
  background:var(--primary-soft,rgba(var(--primary-rgb),.08));
  border-right:3px solid var(--primary,var(--accent));
}

/* VIEW: Ferramentas — cabeçalho e corpo */
.wpp-hub-tool-hd{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.wpp-hub-tool-hd-title{
  font-size:14px; font-weight:700; flex:1; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.wpp-hub-tool-hd-back{
  width:34px; height:34px; border-radius:8px; border:none;
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.12s; flex-shrink:0;
}
.wpp-hub-tool-hd-back:hover{ background:var(--surface2); color:var(--text); }
.wpp-hub-tool-hd-back svg,
.wpp-hub-tool-hd-title svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}
/* Status no cabeçalho das views de ferramenta (ex.: Conexão — bolinha + número quando conectado) */
.wpp-hub-tool-hd-status{
  margin-left:auto;
  flex-shrink:1;
  min-width:0;
  max-width:min(240px, 42vw);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:28px;
}
.wpp-hub-tool-hd-status .wpp-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.wpp-hub-tool-hd-numero{
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--success);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.wpp-hub-tool-body{
  flex:1; overflow-y:auto; padding:20px; padding-bottom:40px;
}
.wpp-hub-tool-body--estilo{
  width:100%;
  box-sizing:border-box;
  max-width:min(1060px,100%);
  margin-left:auto;
  margin-right:auto;
}

/* Responsivo: mobile */
@media(max-width:900px){
  /* Mobile: fixa o painel no viewport para o footer do chat não “sumir”
     por causa do scroll da página / barras do navegador (iOS/Android). */
  /* overlay já definido em #panel-whatsapp.panel.active; full-bleed no mobile */
  #panel-whatsapp.panel.active{
    top:calc(var(--topbar-h-base) + env(safe-area-inset-top, 0px));
    left:0 !important;
    right:0;
    bottom:0;
    z-index:220;
    /* JS (visualViewport) sobrescreve top/bottom em tempo real — evita barra preta */
    will-change:top,bottom;
  }
  #panel-whatsapp .panel-inner{ height:100%; overflow:hidden; }

  /* Fundo do body igual ao painel: esconde qualquer flash durante transição do teclado */
  body:not(.tema-claro){ background:var(--bg,#111b21); }
  body.tema-claro{ background:#f0f2f5; }

  /* Mobile: não deixar “vazio” grande no fim da conversa.
     O composer é `position:sticky` e já ocupa espaço no layout; padding extra aqui
     cria um buraco visível (especialmente em conversas curtas). */
  #panel-whatsapp .chat-messages-stack{
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }

  /* Mobile: gutter menor (ainda cabe as ações sem cortar) */
  #panel-whatsapp .chat-messages-stack{
    padding-left:max(36px, env(safe-area-inset-left, 0px));
    padding-right:max(36px, env(safe-area-inset-right, 0px));
  }
  .wpp-hub-grid{ flex-direction:column; }
  .wpp-hub-sidebar{
    width:100% !important; max-height:none;
    border-right:none; border-bottom:1px solid var(--border);
    flex-shrink:0;
    overflow-x:hidden;
  }

  /* Mobile: garantir que o WhatsApp encaixe (sem corte/overflow lateral) */
  #panel-whatsapp,
  #panel-whatsapp .panel-inner,
  #panel-whatsapp .wpp-hub-grid,
  #panel-whatsapp .wpp-hub-sidebar,
  #panel-whatsapp .wpp-hub-main{
    max-width:100%;
    overflow-x:hidden;
    box-sizing:border-box;
  }

  /* Safe-area lateral (iPhone): evita ícones “comidos” na borda */
  #panel-whatsapp .wpp-hub-sidebar-hd,
  #panel-whatsapp .wpp-hub-sidebar-search,
  #panel-whatsapp .chat-lista-filtros,
  #panel-whatsapp .chat-lista-wrap{
    padding-left:max(10px, env(safe-area-inset-left, 0px));
    padding-right:max(10px, env(safe-area-inset-right, 0px));
    box-sizing:border-box;
  }

  /* Cabeçalho: permite encolher título sem cortar botões */
  #panel-whatsapp .wpp-hub-sidebar-hd{ min-width:0; }
  #panel-whatsapp .wpp-hub-sidebar-hd-title{ min-width:0; text-overflow:ellipsis; }
  /* Ações da sidebar — mesmos ícones compactos (sem cortar com max-width artificial) */
  #panel-whatsapp .wpp-hub-sidebar-actions{
    max-width:none;
    flex:1 1 auto;
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
  }

  #panel-whatsapp .wpp-hub-sidebar-btn,
  #panel-whatsapp .wpp-sidebar-toggle{ width:30px; height:30px; border-radius:5px; }
  #panel-whatsapp .wpp-hub-sidebar-btn svg,
  #panel-whatsapp .wpp-sidebar-toggle svg{ width:16px; height:16px; }

  /* Mobile (telas estreitas): filtros em 1 coluna pra não “comer” texto */
  #panel-whatsapp .chat-filtros-grid{ grid-template-columns:1fr; }
  #panel-whatsapp .chat-filtro-select{
    font-size:10px;
    padding:4px 16px 4px 8px;
    background-position:right 5px center;
    background-size:9px 9px;
  }
  #panel-whatsapp .chat-filtro-chk{ font-size:9.5px; padding:4px 8px; }
  /* “Limpar filtros” não deve virar um botão gigante de ponta a ponta */
  #panel-whatsapp .chat-filtro-limpar{
    width:auto;
    align-self:center;
    padding:5px 10px;
    font-size:10px;
  }
  #panel-whatsapp .wpp-hub-sidebar-hd{ padding:7px 8px 6px; }
  /* Mobile: modo lista (sidebar ocupa a tela) */
  .wpp-hub-grid:not(.mobile-main-aberta) .wpp-hub-main{ display:none; }
  .wpp-hub-grid:not(.mobile-main-aberta) .wpp-hub-sidebar{ flex:1; }

  /* Mobile: modo conversa/ferramentas (main ocupa a tela) */
  .wpp-hub-grid.mobile-main-aberta .wpp-hub-sidebar{ max-height:0; height:0; border-bottom:none; }
  .wpp-hub-grid.mobile-main-aberta .wpp-hub-main{ display:flex; flex:1; }

  .wpp-hub-conv-back{ display:flex; }

  /* Botão flutuante de abrir conversas (só quando main aberto) */
  .wpp-sidebar-reabrir{ left:auto; right:10px; top:10px; }
  .wpp-hub-grid.mobile-main-aberta .wpp-sidebar-reabrir{ display:flex; }
  .wpp-hub-grid:not(.mobile-main-aberta) .wpp-sidebar-reabrir{ display:none; }

  /* Ferramentas: padding menor e botões mais fáceis no toque */
  .wpp-hub-tool-body{ padding:14px; padding-bottom:28px; }
  .wpp-hub-tool-hd{ padding:10px 12px; }

  /* Conversa: compactar barras para caber mais chat no mobile */
  #panel-whatsapp .wpp-hub-conv-hd{ padding:8px 12px; gap:10px; }
  #panel-whatsapp .wpp-hub-conv-hd-avatar{ width:34px; height:34px; font-size:13px; }
  #panel-whatsapp .wpp-hub-conv-hd-info strong{ font-size:14px; }
  #panel-whatsapp .wpp-hub-conv-hd-info small{ font-size:11px; }

  #panel-whatsapp .chat-context-bar{ padding:4px 10px; gap:6px; }
  #panel-whatsapp .chat-ctx-item{ font-size:10.5px; }

  /* Sugestões: mesma faixa horizontal compacta */
  #panel-whatsapp .chat-sugestoes-wrap{ padding:3px 6px 4px; }
  #panel-whatsapp .chat-sug-btn{
    flex:1 1 auto;
    max-width:100%;
    min-height:0;
    font-size:10px;
    padding:4px 7px;
  }

  #panel-whatsapp .chat-ia-tools{
    padding:4px 8px 3px;
    flex-wrap:wrap;
    overflow-x:hidden;
  }
  #panel-whatsapp .chat-ia-tools > span{ display:none; }
  #panel-whatsapp .chat-ia-btn{ padding:3px 7px; font-size:9.5px; }

  /* Footer (composer): reduzir altura no mobile */
  #panel-whatsapp .chat-footer{
    padding:6px 10px 8px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  #panel-whatsapp .chat-input{ padding:10px 12px; font-size:14px; min-height:40px; }
  #panel-whatsapp .chat-btn-enviar{ width:40px; height:40px; }
  #panel-whatsapp .chat-btn-emoji,
  #panel-whatsapp .chat-btn-anexo{ width:32px; height:32px; margin-bottom:2px; }
}

/* ════════════════════════════════════════════════════════════
   ── CHAT DIRETO (WhatsApp-style) ──────────────────────────
   ════════════════════════════════════════════════════════════ */

/* Overlay full-screen — mantido apenas para referência/mobile fallback */
.chat-overlay{
  display:none; position:fixed; inset:0; z-index:900;
  background:var(--bg); flex-direction:column;
}
.chat-overlay.aberto{ display:flex; }

/* Tela 1: lista de colaboradores */
.chat-tela-lista{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
}
.chat-tela-conv{
  display:none; flex-direction:column; height:100%; overflow:hidden;
}
.chat-overlay.chat-conv-aberta .chat-tela-lista{ display:none; }
.chat-overlay.chat-conv-aberta .chat-tela-conv{ display:flex; }

/* ── HEADER ────────────────────────────────────────────────── */
.chat-header{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:12px 14px; background:var(--brand-mid);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.chat-header-back{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1);
  border:none; color:#fff; font-size:18px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:.15s;
}
.chat-header-back:hover{ background:rgba(255,255,255,.2); }
.chat-header-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:14px; color:#fff; flex-shrink:0; overflow:hidden;
}
.chat-header-info{ flex:1; min-width:0; }
.chat-header-info strong{ font-size:15px; color:#fff; display:block; line-height:1.2; }
.chat-header-info small{ font-size:11px; color:rgba(255,255,255,.7); display:block; margin-top:1px; }
.chat-header-title{
  font-size:16px; font-weight:700; color:#fff; flex:1;
  padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── BUSCA (lista) ──────────────────────────────────────────── */
.chat-busca{
  padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.chat-busca input{
  width:100%; padding:9px 14px; border-radius:22px; font-size:14px;
  background:var(--surface2); border:1.5px solid var(--border); color:var(--text);
  outline:none;
}
.chat-busca input:focus{ border-color:var(--accent); }

/* ── LISTA CONTATOS ─────────────────────────────────────────── */
.chat-lista-wrap{ flex:1; overflow-y:auto; }
.chat-contato{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  cursor:pointer; transition:background .1s;
  border-bottom:1px solid rgba(134,150,160,.15);
}
.chat-contato:hover{ background:rgba(255,255,255,.05); }
body.tema-claro .chat-contato:hover{ background:rgba(0,0,0,.04); }
.chat-contato:active{ background:rgba(255,255,255,.09); }
/* Conversa selecionada — cinza suave, como WhatsApp Web */
.chat-contato.chat-contato-ativo{ background:rgba(255,255,255,.08); }
body.tema-claro .chat-contato.chat-contato-ativo{ background:rgba(0,0,0,.06); }
.chat-contato-avatar{ position:relative; flex-shrink:0; }
.chat-avatar{
  width:49px; height:49px; border-radius:50%;
  background:#6b7c8a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px; overflow:hidden;
}
.chat-avatar-ext{ background:#374045; display:flex; align-items:center; justify-content:center; }
body.tema-claro .chat-avatar{ background:#b0bec5; }
body.tema-claro .chat-avatar-ext{ background:#8696a0; }
.chat-status-dot{
  position:absolute; bottom:2px; right:0;
  width:11px; height:11px; border-radius:50%;
  border:2px solid var(--bg);
}
.chat-status-dot.verde  { background:var(--success); }
.chat-status-dot.amarelo{ background:var(--warn); }
.chat-status-dot.vermelho{ background:var(--danger); }
.chat-contato-info{ flex:1; min-width:0; }
.chat-contato-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:4px;
}
.chat-contato-nome{ font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contato-hora{ font-size:11.5px; color:var(--muted); flex-shrink:0; }
.chat-contato-sub{
  display:flex; align-items:center; justify-content:space-between; gap:4px; margin-top:2px;
}
.chat-contato-preview{ font-size:12.5px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; }

/* ── TAGS DE CARGO / SETOR ───────────────────────────────────── */
.chat-contato-tags{
  display:flex; flex-wrap:wrap; gap:3px; margin:2px 0 2px;
}
.chat-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600; line-height:1;
  padding:2px 7px; border-radius:20px;
  white-space:nowrap; max-width:120px;
  overflow:hidden; text-overflow:ellipsis;
}
.chat-tag-cargo{
  background:var(--primary-soft,rgba(var(--primary-rgb),.18)); color:var(--primary,var(--accent2));
  border:1px solid color-mix(in srgb,var(--primary,#1E6FD9) 28%,transparent);
}
body.tema-claro .chat-tag-cargo{
  background:rgba(var(--primary-rgb),.10); color:#1454aa; border-color:rgba(var(--primary-rgb),.3);
}
.chat-tag-setor{
  background:rgba(34,201,122,.14); color:var(--success);
  border:1px solid rgba(34,201,122,.22);
}
body.tema-claro .chat-tag-setor{
  background:rgba(34,201,122,.10); color:#14875a; border-color:rgba(34,201,122,.3);
}
.chat-tag-pendente{
  background:rgba(255,194,51,.14); color:var(--warn);
  border:1px solid rgba(255,194,51,.25);
}
body.tema-claro .chat-tag-pendente{
  background:rgba(255,194,51,.10); color:#9a6f00; border-color:rgba(255,194,51,.35);
}
/* Tag "Contato externo" — mesmo formato de pilula que cargo/setor, cor neutra */
.chat-tag-ext{
  background:rgba(232,240,251,.07);
  color:var(--muted2,#6a8aab);
  border:1px solid rgba(232,240,251,.14);
}
body.tema-claro .chat-tag-ext{
  background:rgba(13,43,94,.06);
  color:#5c7494;
  border-color:rgba(13,43,94,.14);
}
/* duplicate removed — see .chat-avatar-ext above */

/* ── GRUPOS ─────────────────────────────────────────────────── */
.chat-avatar-grupo{
  background:#1e7e55;
  display:flex; align-items:center; justify-content:center;
}
body.tema-claro .chat-avatar-grupo{ background:#25a66a; }

.chat-tag-grupo{
  background:rgba(18,140,94,.13);
  color:#25d366;
  border:1px solid rgba(18,140,94,.22);
}
body.tema-claro .chat-tag-grupo{
  background:rgba(18,140,94,.1);
  color:#198754;
  border-color:rgba(18,140,94,.2);
}

.chat-grupo-remetente{
  font-size:11.5px; font-weight:700;
  color:#25d366; margin-bottom:3px;
  line-height:1.2;
}
body.tema-claro .chat-grupo-remetente{ color:#198754; }

.chat-badge{
  min-width:20px; height:20px; padding:0 5px; border-radius:20px;
  background:var(--success); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── TOP-RIGHT DA CONVERSA (hora + ícones fixado/silenciado) ─── */
.chat-contato-top-right{
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}
.chat-ico-fixado,.chat-ico-silenc{
  display:inline-flex; align-items:center; color:var(--muted); opacity:.7;
}
.chat-contato-fixado .chat-ico-fixado{ color:var(--accent); opacity:1; }
.chat-badge-silenc{ background:var(--muted) !important; }

/* ── CONTATO BLOQUEADO ─────────────────────────────────────────  */
.chat-contato-bloqueado .chat-contato-nome::after{
  content:'Bloqueado'; font-size:9px; font-weight:700; text-transform:uppercase;
  background:var(--danger); color:#fff; border-radius:4px; padding:1px 5px;
  margin-left:5px; vertical-align:middle; opacity:.8;
}

/* ── ETIQUETAS DE CONVERSA ─────────────────────────────────────── */
.chat-etiqueta-tag{
  font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px;
  border:1px solid; display:inline-flex; align-items:center;
}

/* ── BOTÃO ARQUIVADAS ──────────────────────────────────────────── */
.chat-btn-arquivadas{
  display:flex; align-items:center; gap:7px; width:100%; padding:9px 14px;
  background:none; border:none; border-bottom:1px solid var(--border);
  color:var(--muted); font-size:13px; cursor:pointer; text-align:left;
  transition:background .1s, color .1s;
}
.chat-btn-arquivadas:hover{ background:rgba(255,255,255,.05); color:var(--text); }
body.tema-claro .chat-btn-arquivadas:hover{ background:rgba(0,0,0,.04); }
.chat-btn-arquivadas.ativo{ color:var(--accent); font-weight:600; background:rgba(var(--primary-rgb),.07); }
.chat-btn-arq-badge{
  margin-left:auto; background:var(--accent,#25d366); color:#fff;
  font-size:11px; font-weight:700; line-height:1;
  padding:2px 7px; border-radius:999px; min-width:18px; text-align:center;
}
.chat-btn-arquivadas.ativo .chat-btn-arq-badge{ display:none; }

/* ── MODAL DE ETIQUETAS ────────────────────────────────────────── */
.chat-modal-etiquetas{
  position:fixed; inset:0; z-index:10000;
  background:rgba(5,12,28,.18);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  display:flex; align-items:center; justify-content:center;
}
.chat-modal-etiq-box{
  background:var(--card, #112238);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; min-width:300px; max-width:380px; width:90%;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
body.tema-claro .chat-modal-etiquetas{background:rgba(15,30,60,.12);}
body.tema-claro .chat-modal-etiq-box{background:var(--card, #fff);border-color:rgba(200,216,238,.75);}
body.tema-graphite .chat-modal-etiquetas{background:rgba(0,0,0,.24);}
body.tema-graphite .chat-modal-etiq-box{background:var(--card, #161B23);border-color:rgba(255,255,255,.10);}
.chat-modal-etiq-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  font-size:14px; font-weight:600;
}
.chat-modal-etiq-fechar{
  background:none; border:none; cursor:pointer; color:var(--muted); font-size:16px; padding:0 4px;
}
.chat-etiq-item{
  display:flex; align-items:center; gap:9px; padding:10px 16px;
  cursor:pointer; font-size:13.5px; transition:background .1s;
}
.chat-etiq-item:hover{ background:rgba(255,255,255,.06); }
body.tema-claro .chat-etiq-item:hover{ background:rgba(0,0,0,.04); }
.chat-etiq-cor-ball{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.chat-etiq-item input[type=checkbox]{ flex-shrink:0; cursor:pointer; }
.chat-etiq-del{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:12px; padding:2px 5px; border-radius:4px; margin-left:auto; flex-shrink:0;
}
.chat-etiq-del:hover{ background:rgba(255,0,0,.12); color:var(--danger); }
.chat-modal-etiq-nova{
  display:flex; gap:6px; padding:10px 16px; border-top:1px solid var(--border);
}
.chat-modal-etiq-nova input[type=text]{
  flex:1; padding:6px 10px; border-radius:7px;
  background:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:13px;
}
.chat-modal-etiq-nova input[type=color]{
  width:32px; height:32px; border:1.5px solid var(--border); border-radius:6px;
  cursor:pointer; padding:2px; background:var(--surface);
}
.chat-modal-etiq-nova button{
  padding:6px 12px; border-radius:7px; border:none;
  background:var(--accent); color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}
.chat-modal-etiq-nova button:hover{ opacity:.88; }

/* ── DROPDOWN SILENCIAR (sub-opções) ──────────────────────────── */
.chat-dropdown-header{
  padding:8px 16px 6px; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); pointer-events:none;
}

/* ── CHEVRON E MENU DE CONTEXTO DA CONVERSA ─────────────────── */
.chat-contato-chevron{
  display:none; flex-shrink:0;
  width:28px; height:28px;
  border:none; background:transparent; border-radius:50%;
  cursor:pointer; color:var(--muted);
  align-items:center; justify-content:center;
  transition:background .15s, color .15s;
  margin-left:2px; padding:0;
}
.chat-contato:hover .chat-contato-chevron{ display:flex; }
.chat-contato-chevron:hover{ background:rgba(255,255,255,.13); color:var(--text); }
body.tema-claro .chat-contato-chevron:hover{ background:rgba(0,0,0,.09); }

.chat-contato-dropdown{
  position:fixed; z-index:9999;
  min-width:224px;
  background:var(--surface2,#1e2730);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.38);
  padding:5px 0;
  animation:chat-dd-in .11s ease;
}
body.tema-claro .chat-contato-dropdown{
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}
@keyframes chat-dd-in{
  from{ opacity:0; transform:scale(.95) translateY(-4px); }
  to  { opacity:1; transform:scale(1)   translateY(0); }
}
.chat-dropdown-item{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:9px 16px;
  background:none; border:none;
  color:var(--text); cursor:pointer;
  text-align:left; font-size:13.5px;
  transition:background .1s; white-space:nowrap;
}
.chat-dropdown-item:hover{ background:rgba(255,255,255,.07); }
body.tema-claro .chat-dropdown-item:hover{ background:rgba(0,0,0,.05); }
.chat-dropdown-item.danger{ color:var(--danger); }
.chat-dropdown-icon{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; opacity:.75;
}
.chat-dropdown-item.danger .chat-dropdown-icon{ opacity:1; }
.chat-dropdown-arrow{ margin-left:auto; color:var(--muted); display:flex; align-items:center; }
.chat-dropdown-sep{ height:1px; background:var(--border); margin:4px 0; }

/* ── BARRA DE CONTEXTO ──────────────────────────────────────── */
.chat-context-bar{
  display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center;
  padding:5px 10px; background:var(--surface-2);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.chat-ctx-item{ font-size:10px; color:var(--muted2); line-height:1.3; }

/* ── ÁREA DE MENSAGENS ────────────────────────────────────────
   Camada externa = só scroll (evita flex + ::before que inflava scrollHeight no topo).
   .chat-messages-stack = coluna com min-height:100% + justify-end (mensagens coladas no rodapé quando poucas). */
.chat-messages{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden; /* congele lateral: sem "arrastar" horizontal */
  display:block;
  min-height:0;
  padding:0;
  scroll-behavior:auto; /* sem animação ao mudar scrollTop programático */
  overflow-anchor:none; /* evita o navegador “segurar” posição quando o irmão (sugestões) muda de altura */
  /* Fundo padrão WhatsApp dark */
  background-color:#0b141a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='366' height='366' opacity='.04'%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill:none;stroke:%23aaa;stroke-width:1.2%7D%3C/style%3E%3C/defs%3E%3Ccircle cx='40' cy='40' r='18' class='c'/%3E%3Cpath d='M80 60 l15-20 l15 20z' class='c'/%3E%3Crect x='120' y='28' width='28' height='28' rx='4' class='c'/%3E%3Cpath d='M180 50 q10-25 20 0 q10 25 20 0' class='c'/%3E%3Ccircle cx='240' cy='40' r='12' class='c'/%3E%3Cpath d='M265 35 l20 0 m-10-10 l0 20' class='c'/%3E%3Cpath d='M300 50 l10-20 l10 10 l10-15 l10 25' class='c'/%3E%3C/svg%3E");
}
.chat-messages-stack{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:1px;
  box-sizing:border-box;
  padding-top:10px;
  padding-bottom:16px;
  padding-left:max(48px, env(safe-area-inset-left, 0px));
  padding-right:max(48px, env(safe-area-inset-right, 0px));
}
/* Sentinela para alinhar o fundo do scroll ao abrir conversa (reforço ao scrollTop). */
.chat-scroll-end{
  flex-shrink:0;
  width:100%;
  height:1px;
  pointer-events:none;
  overflow:hidden;
}
body.tema-claro .chat-messages{
  background-color:#efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' opacity='.04'%3E%3Cpath d='M150 50 Q175 25 200 50 T250 50' stroke='%23555' fill='none'/%3E%3C/svg%3E");
}
/* Override quando o ID é chat-messages (para compatibilidade) */
#chat-messages{ background-color:#0b141a; scroll-behavior:auto; }
body.tema-claro #chat-messages{ background-color:#efeae2; }

/* Ao abrir conversa: oculta até o snap ao fundo — evita ver o histórico “descendo” ao longo dos timeouts */
#chat-messages.chat-messages-opening{
  visibility:hidden;
}

.chat-loading,.chat-empty{
  text-align:center; color:rgba(255,255,255,.45); font-size:13px;
  margin:auto; padding:32px 20px; line-height:1.6;
  background:rgba(0,0,0,.2); border-radius:12px;
  max-width:260px; align-self:center;
}
.chat-lista-wrap .chat-loading .spinner{
  border-color:rgba(255,255,255,.2); border-top-color:rgba(255,255,255,.65);
  width:22px; height:22px;
}
body.tema-claro .chat-lista-wrap .chat-loading .spinner{
  border-color:rgba(0,0,0,.12); border-top-color:rgba(0,0,0,.45);
}
body.tema-claro .chat-loading,
body.tema-claro .chat-empty{ color:rgba(0,0,0,.4); background:rgba(0,0,0,.06); }

.chat-data-sep{
  display:flex; align-items:center; justify-content:center; margin:6px 0 4px;
}
.chat-data-sep span{
  background:rgba(11,20,26,.8);
  border-radius:8px; padding:3px 12px; font-size:11.5px;
  color:rgba(241,241,242,.9); box-shadow:0 1px 2px rgba(0,0,0,.25);
}
body.tema-claro .chat-data-sep span{
  background:rgba(255,255,255,.9); color:rgba(0,0,0,.55);
}

/* ── BOLHAS — idêntico ao WhatsApp Web ───────────────────────── */
.chat-msg{ display:flex; margin-bottom:0; padding:0 6px; }
.chat-msg + .chat-msg{ margin-top:0; }
.chat-msg-gestor{ justify-content:flex-end; padding-right:8px; }
.chat-msg-colaborador{ justify-content:flex-start; padding-left:8px; }
.chat-msg-externo{ justify-content:flex-start; padding-left:8px; }

.chat-bubble{
  /* WA Web: max ~65%, padding 6 7 8 9, radius 7.5px */
  max-width:62%; border-radius:7.5px;
  /* Levemente mais compacto (menos "alto") */
  padding:4px 7px 5px 8px;
  position:relative; word-break:break-word;
  -webkit-user-select:none; user-select:none;
  box-shadow:0 1px 0.5px rgba(0,0,0,.25);
  /* Permite a bolha respeitar max-width em telas estreitas com conteúdo “largo” (player de áudio) */
  min-width:0;
}

/* ── Ações da mensagem (reagir/encaminhar) — igual WA Web (ao lado) ─────── */
.chat-msg-actions{
  position:absolute;
  top:6px;
  display:flex;
  gap:6px;
  opacity:0;
  transform:translateY(-1px);
  transition:opacity .12s, transform .12s;
  z-index:4;
  pointer-events:none; /* só os botões recebem clique */
}
.chat-bubble:hover .chat-msg-actions{ opacity:1; transform:translateY(0); }

/* gestor (mensagem à direita): ações ficam do lado esquerdo da bolha */
.chat-msg-gestor .chat-msg-actions{ right:calc(100% + 8px); }
/* recebido: ações ficam do lado direito da bolha */
.chat-msg-colaborador .chat-msg-actions,
.chat-msg-externo .chat-msg-actions{ left:calc(100% + 8px); }

.chat-msg-actions button{
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,20,26,.55); /* WA: bolinha escura translúcida */
  color:#e9edef;
  box-shadow:0 1px 1px rgba(0,0,0,.28);
  pointer-events:auto;
  transition:background .12s, transform .12s;
}
.chat-msg-actions button:hover{ background:rgba(11,20,26,.68); transform:scale(1.04); }
body.tema-claro .chat-msg-actions button{
  background:rgba(0,0,0,.12);
  color:#111;
}
body.tema-claro .chat-msg-actions button:hover{ background:rgba(0,0,0,.18); }

.chat-msg-forward svg,
.chat-react-btn svg,
.chat-msg-edit svg{ width:16px; height:16px; }

/* ── Chevron dentro da bolha (igual WA Web) ──────────────────── */
.chat-msg-chevron{
  position:absolute;
  top:3px; right:3px;
  width:22px; height:22px;
  border:none; border-radius:50%;
  background:transparent;
  color:inherit;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0.3; pointer-events:auto;
  z-index:6;
  transition:opacity .12s, background .12s;
  padding:0;
}
.chat-msg-chevron svg{ width:14px; height:14px; }
.chat-bubble:hover .chat-msg-chevron{ opacity:1; }
.chat-msg-chevron:hover{ background:rgba(255,255,255,.18); opacity:1; }
body.tema-claro .chat-msg-chevron{ opacity:0.4; }
body.tema-claro .chat-msg-chevron:hover{ background:rgba(0,0,0,.1); opacity:1; }
body.emoji-panel-aberto .chat-msg-chevron{ opacity:0!important; pointer-events:none!important; }

/* ── Menu dropdown de mensagem ─────────────────────────────── */
.chat-msg-dropdown{
  position:fixed;
  z-index:9999;
  background:var(--surface,#202c33);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  min-width:170px;
  padding:4px 0;
  animation:fadeInDown .1s ease;
}
body.tema-claro .chat-msg-dropdown{
  background:#fff;
  border-color:rgba(0,0,0,.1);
  box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.chat-msg-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  font-size:14px;
  color:var(--text,#e9edef);
  cursor:pointer;
  transition:background .1s;
  border:none;
  background:none;
  width:100%;
  text-align:left;
}
.chat-msg-dropdown-item:hover{ background:rgba(255,255,255,.07); }
body.tema-claro .chat-msg-dropdown-item{ color:#111; }
body.tema-claro .chat-msg-dropdown-item:hover{ background:rgba(0,0,0,.05); }
.chat-msg-dropdown-item.danger{ color:#f44336; }
.chat-msg-dropdown-item svg{ flex-shrink:0; opacity:.85; }
.chat-msg-dropdown-sep{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:3px 0;
}
body.tema-claro .chat-msg-dropdown-sep{ background:rgba(0,0,0,.08); }

/* ── Bottom sheet mobile (long-press em mensagem) ───────────── */
.chat-ctx-mobile-overlay{
  position:fixed;inset:0;z-index:10700;
  background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;
  transition:background .22s;
  -webkit-tap-highlight-color:transparent;
}
.chat-ctx-mobile-overlay.visible{ background:rgba(0,0,0,.55); }
.chat-ctx-mobile-sheet{
  width:100%;
  background:var(--surface2,#1e2d35);
  border-radius:18px 18px 0 0;
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,1,.6,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.chat-ctx-mobile-overlay.visible .chat-ctx-mobile-sheet{
  transform:translateY(0);
}
.chat-ctx-mobile-reactions{
  display:flex;
  justify-content:space-around;
  padding:14px 10px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.chat-ctx-mobile-react{
  background:none;border:none;cursor:pointer;
  font-size:26px;padding:6px 8px;border-radius:50%;
  transition:transform .12s, background .12s;
  line-height:1;
}
.chat-ctx-mobile-react:active{ transform:scale(1.3); background:rgba(255,255,255,.1); }
.chat-ctx-mobile-items{ padding:6px 0; }
.chat-ctx-mobile-item{
  display:flex;align-items:center;gap:16px;
  width:100%;padding:15px 22px;
  background:none;border:none;cursor:pointer;
  color:var(--text);font-size:15px;text-align:left;
  transition:background .12s;
}
.chat-ctx-mobile-item:active{ background:rgba(255,255,255,.07); }
.chat-ctx-mobile-item-icon{ display:flex;align-items:center;opacity:.75; }
.chat-ctx-mobile-item.danger{ color:#f44336; }
.chat-ctx-mobile-item.danger .chat-ctx-mobile-item-icon{ opacity:1; }
.chat-ctx-mobile-sep{
  height:1px;background:rgba(255,255,255,.07);margin:4px 0;
}
.chat-ctx-mobile-cancel{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:16px;margin-top:6px;
  background:rgba(255,255,255,.05);border:none;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--text);font-size:15px;font-weight:600;cursor:pointer;
  transition:background .12s;
}
.chat-ctx-mobile-cancel:active{ background:rgba(255,255,255,.1); }
body.tema-claro .chat-ctx-mobile-sheet{ background:#f0f2f5; }
body.tema-claro .chat-ctx-mobile-item{ color:#111; }
body.tema-claro .chat-ctx-mobile-reactions,
body.tema-claro .chat-ctx-mobile-sep{ border-color:rgba(0,0,0,.08); }
body.tema-claro .chat-ctx-mobile-cancel{ background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08); }
body.tema-claro .chat-ctx-mobile-item:active{ background:rgba(0,0,0,.06); }

/* Esconde chevron em mobile touchscreen */
@media (pointer: coarse) {
  .chat-msg-chevron{ display:none !important; }
}

/* ── Preview de resposta (acima do input) ──────────────────── */
.chat-reply-preview{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--surface2,#1e2d35);
  border-top:2px solid var(--accent,#00a884);
  animation:fadeInDown .12s ease;
}
body.tema-claro .chat-reply-preview{
  background:rgba(0,0,0,.04);
  border-top-color:rgba(0,0,0,.07);
}
.chat-reply-preview-bar{
  width:3px; min-height:36px; border-radius:2px;
  background:var(--accent,#00a884);
  flex-shrink:0;
}
.chat-reply-preview-body{
  flex:1; overflow:hidden;
  display:flex; flex-direction:column; gap:2px;
}
.chat-reply-preview-nome{
  font-size:12px; font-weight:700;
  color:var(--accent,#00a884);
}
.chat-reply-preview-texto{
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-reply-preview-close{
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:18px; line-height:1;
  padding:2px 4px; border-radius:4px; flex-shrink:0;
}
.chat-reply-preview-close:hover{ color:var(--text); }

/* ── Modal Dados da mensagem ───────────────────────────────── */
.chat-dados-overlay{
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.chat-dados-modal{
  background:var(--surface,#202c33);
  border-radius:14px;
  width:min(340px,92vw);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
}
body.tema-claro .chat-dados-modal{ background:#fff; }
.chat-dados-hd{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.tema-claro .chat-dados-hd{ border-bottom-color:rgba(0,0,0,.07); }
.chat-dados-hd button{
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:20px; line-height:1; padding:2px;
}
.chat-dados-hd h3{ flex:1; margin:0; font-size:15px; font-weight:600; }
.chat-dados-bubble{
  margin:14px 16px;
  padding:10px 14px;
  background:var(--surface-2,#2a3942);
  border-radius:10px;
  font-size:13.5px; line-height:1.4;
  color:var(--text);
  max-height:100px; overflow:hidden;
  text-overflow:ellipsis;
}
body.tema-claro .chat-dados-bubble{ background:#f0f2f5; }
.chat-dados-rows{ padding:0 16px 14px; display:flex; flex-direction:column; gap:14px; }
.chat-dados-row{
  display:flex; align-items:center; gap:12px;
}
.chat-dados-row svg{ flex-shrink:0; }
.chat-dados-row-info{ display:flex; flex-direction:column; gap:2px; }
.chat-dados-row-label{ font-size:13px; font-weight:600; color:var(--text); }
.chat-dados-row-val{ font-size:12px; color:var(--muted); }

/* Edição inline de mensagem */
.chat-edit-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.chat-edit-textarea{
  width:100%;
  min-height:40px;
  max-height:200px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--accent,#00a884);
  background:rgba(0,0,0,.18);
  color:inherit;
  font:inherit;
  font-size:13.5px;
  line-height:1.45;
  resize:vertical;
  outline:none;
  box-sizing:border-box;
}
body.tema-claro .chat-edit-textarea{
  background:#fff;
  border-color:var(--accent,#00a884);
  color:#111;
}
.chat-edit-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
}
.chat-edit-actions button{
  padding:4px 12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:opacity .12s;
}
.chat-edit-actions button:hover{ opacity:.82; }
.chat-edit-btn-ok{
  background:var(--accent,#00a884);
  color:#fff;
}
.chat-edit-btn-cancel{
  background:rgba(255,255,255,.12);
  color:inherit;
}
body.tema-claro .chat-edit-btn-cancel{
  background:rgba(0,0,0,.1);
}
.chat-bubble-editada{
  font-size:11px;
  opacity:.65;
  margin-left:4px;
}

.chat-reactions-host{ margin-top:4px; display:flex; justify-content:flex-end; }
.chat-msg-colaborador .chat-reactions-host,
.chat-msg-externo .chat-reactions-host{ justify-content:flex-start; }
.chat-reactions{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  align-items:center;
}
.chat-reac-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  color:#e9edef;
  user-select:none;
}
.chat-reac-pill small{ font-size:11px; opacity:.85; }
.chat-reac-pill.mine{
  background:rgba(74,159,255,.20);
  border-color:rgba(74,159,255,.35);
}
body.tema-claro .chat-reac-pill{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.10);
  color:#111;
}
body.tema-claro .chat-reac-pill.mine{
  background:rgba(var(--primary-rgb),.14);
  border-color:rgba(var(--primary-rgb),.22);
}

#chat-reac-picker{
  position:fixed;
  z-index:10000;
  background:#111b21;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}
body.tema-claro #chat-reac-picker{
  background:#fff;
  border-color:rgba(0,0,0,.12);
}
.chat-reac-row{ display:flex; gap:4px; align-items:center; }
.chat-reac-opt{
  width:34px; height:34px;
  border:none; border-radius:50%;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, transform .12s;
}
.chat-reac-opt:hover{ background:rgba(255,255,255,.08); transform:scale(1.06); }
.chat-reac-opt.ativo{ background:rgba(74,159,255,.22); }
.chat-reac-opt.more{ font-size:16px; opacity:.9; }
body.tema-claro .chat-reac-opt:hover{ background:rgba(0,0,0,.06); }

/* ── Modal encaminhar ─────────────────────────────────────────── */
.chat-forward-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.chat-forward-modal{
  width:min(520px, 96vw);
  max-height:min(680px, 92vh);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.chat-forward-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.chat-forward-title{ font-size:14px; font-weight:800; color:var(--text); }
.chat-forward-close{
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:var(--surface-2);
  color:var(--text);
  font-size:20px;
  line-height:0;
}
.chat-forward-close:hover{ filter:brightness(1.06); }
.chat-forward-sub{ padding:10px 14px 8px; }
.chat-forward-preview{
  font-size:12px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-forward-search{ padding:0 14px 10px; }
.chat-forward-search input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-size:13px;
}
.chat-forward-list{
  padding:6px 10px 10px;
  overflow-x:hidden;
  overflow-y:auto;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.chat-forward-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
}
.chat-forward-item:hover{ background:var(--surface-2); }
.chat-forward-check{ width:16px; height:16px; }
.chat-forward-avatar{
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  flex-shrink:0;
}
.chat-forward-avatar-fb{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  background:var(--brand-mid);
}
.chat-forward-item-info{ min-width:0; flex:1; }
.chat-forward-item-nome{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-forward-item-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.chat-forward-empty{
  padding:16px 10px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.chat-forward-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 14px;
}

/* Tail enviada (direita) */
.chat-bubble-gestor{
  background:#005c4b; color:#e9edef;
  border-top-right-radius:3px;
}
.chat-bubble-gestor::before{
  content:'';
  position:absolute; top:0; right:-8px;
  border-width:0 0 8px 8px;
  border-style:solid;
  border-color:transparent transparent transparent #005c4b;
}
body.tema-claro .chat-bubble-gestor{ background:#d9fdd3; color:#111; }
body.tema-claro .chat-bubble-gestor::before{ border-left-color:#d9fdd3; }

/* Tail recebida (esquerda) */
.chat-bubble-colaborador,
.chat-bubble-externo{
  background:#202c33; color:#e9edef;
  border-top-left-radius:3px;
}
.chat-bubble-colaborador::before,
.chat-bubble-externo::before{
  content:'';
  position:absolute; top:0; left:-8px;
  border-width:0 8px 8px 0;
  border-style:solid;
  border-color:transparent #202c33 transparent transparent;
}
body.tema-claro .chat-bubble-colaborador,
body.tema-claro .chat-bubble-externo{ background:#fff; color:#111; }
body.tema-claro .chat-bubble-colaborador::before,
body.tema-claro .chat-bubble-externo::before{ border-right-color:#fff; }

/* Texto da bolha — WA Web usa 14.2px / line-height 20px */
.chat-bubble-texto{
  font-size:13.2px;
  line-height:17px;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Meta (hora + tick) — flutua no canto inferior direito como WA Web */
.chat-bubble-meta{
  display:inline-flex; align-items:center; justify-content:flex-end;
  gap:3px; font-size:11px; line-height:15px;
  color:rgba(233,237,239,.6);
  float:right; margin-left:6px; margin-top:0;
  /* empurra para baixo do texto no último bloco */
  position:relative; bottom:-2px;
}
body.tema-claro .chat-bubble-gestor .chat-bubble-meta{ color:rgba(0,0,0,.42); }
body.tema-claro .chat-bubble-colaborador .chat-bubble-meta,
body.tema-claro .chat-bubble-externo .chat-bubble-meta{ color:rgba(0,0,0,.42); }
.chat-bubble-colaborador .chat-bubble-meta,
.chat-bubble-externo .chat-bubble-meta{ color:rgba(233,237,239,.5); }

/* Ticks SVG — paths exatos do WhatsApp Web (fill, não stroke) */
.chat-check{
  display:inline-flex; align-items:center; line-height:1;
  margin-left:2px; flex-shrink:0;
  transition: color .22s ease;
}
.chat-check svg{ height:13px; width:auto; display:block; }
/* Cor via CSS color → fill="currentColor" nos SVGs */
.chat-check.pendente{ color:rgba(233,237,239,.42); }
.chat-check.enviado { color:rgba(233,237,239,.72); }
.chat-check.lido    { color:#53bdeb; }
body.tema-claro .chat-check.pendente{ color:rgba(0,0,0,.28); }
body.tema-claro .chat-check.enviado { color:rgba(0,0,0,.48); }
body.tema-claro .chat-check.lido    { color:#009de2; }

/* ── PLAYER DE ÁUDIO (estilo WhatsApp) ───────────────────────── */
.chat-audio-player{
  display:flex; align-items:center; gap:8px;
  /* Nunca pode "vazar" para fora da bolha (mobile / telas estreitas) */
  min-width:0;
  width:min(280px, 100%);
  max-width:100%;
  padding:2px 0;
}
.chat-audio-play{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:rgba(255,255,255,.18);
  transition:.15s;
}
.chat-audio-play:hover{ background:rgba(255,255,255,.28); }
body.tema-claro .chat-bubble-gestor .chat-audio-play{ background:rgba(0,0,0,.1); }
body.tema-claro .chat-bubble-colaborador .chat-audio-play{ background:rgba(0,0,0,.08); }
.chat-audio-play svg{ width:16px; height:16px; fill:currentColor; }
.chat-audio-waves{
  flex:1; display:flex; align-items:center; gap:1.5px; height:30px;
}
.chat-audio-waves span{
  display:inline-block; width:2.5px; border-radius:2px;
  background:rgba(255,255,255,.45); flex-shrink:0;
}
body.tema-claro .chat-bubble-gestor .chat-audio-waves span{ background:rgba(0,0,0,.25); }
body.tema-claro .chat-bubble-colaborador .chat-audio-waves span{ background:rgba(0,0,0,.2); }
.chat-audio-dur{ font-size:11.5px; opacity:.75; white-space:nowrap; }
.chat-audio-dl{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  opacity:.65; transition:.15s; color:inherit; text-decoration:none;
}
.chat-audio-dl:hover{ opacity:1; background:rgba(255,255,255,.2); }

/* ── BOTÃO DE TRANSCRIÇÃO ────────────────────────────────────── */
.chat-audio-transcr{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  border:none; cursor:pointer; background:transparent;
  opacity:.65; transition:.15s; color:inherit;
}
.chat-audio-transcr:hover{ opacity:1; background:rgba(255,255,255,.2); }
.chat-audio-transcr:disabled{ opacity:.35; cursor:default; }

/* Botão de IA (estrela) */
.chat-audio-ia{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  border:none; cursor:pointer; background:transparent;
  opacity:.65; transition:.15s; color:inherit;
}
.chat-audio-ia:hover{ opacity:1; background:rgba(255,255,255,.2); color:var(--yellow); }
.chat-audio-ia:disabled{ opacity:.35; cursor:default; }

/* Texto transcrito abaixo do player */
.chat-audio-transcr-texto{
  font-size:12.5px; line-height:1.5;
  margin-top:4px; padding:6px 10px;
  background:rgba(0,0,0,.15); border-radius:8px;
  color:inherit; opacity:.88;
  max-width:280px; word-break:break-word;
}
body.tema-claro .chat-audio-transcr-texto{ background:rgba(0,0,0,.06); }

/* Box de insights */
.chat-audio-insights-box{
  margin-top:6px; border-radius:10px; overflow:hidden;
  max-width:320px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);
}
body.tema-claro .chat-audio-insights-box{
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1);
}
.chat-insights-loading{
  padding:10px 12px; font-size:12.5px; opacity:.7;
  animation:pulse-mic .9s ease-in-out infinite;
}
.chat-insights-erro{ padding:10px 12px; font-size:12.5px; color:var(--danger); }
.chat-insights-content{
  padding:10px 12px; font-size:12.5px; line-height:1.6;
}
.chat-insights-content p{ margin:0 0 6px; }
.chat-insights-content p:last-child{ margin-bottom:0; }
.chat-insights-content strong{ opacity:1; font-weight:600; }
.chat-insights-content ul{ margin:2px 0 6px; padding-left:14px; }
.chat-insights-content li{ margin-bottom:2px; }

/* ── NOVO PLAYER DE ÁUDIO (.ca-*) ───────────────────────────── */
.ca-player{
  display:flex; align-items:center; gap:6px;
  /* Nunca ultrapassa a bolha (mobile / 62% max-width) */
  box-sizing:border-box;
  min-width:0;
  width:100%;
  max-width:min(280px, 100%);
  padding:2px 0;
}
.ca-play{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:rgba(255,255,255,.18); color:inherit; transition:.15s;
}
.ca-play:hover{ background:rgba(255,255,255,.28); }
body.tema-claro .chat-bubble-gestor .ca-play{ background:rgba(0,0,0,.1); }
body.tema-claro .chat-bubble-colaborador .ca-play{ background:rgba(0,0,0,.08); }
.ca-play svg{ width:16px; height:16px; fill:currentColor; }
.ca-waves{
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  display:flex; align-items:center; gap:1.5px; height:30px;
}
.ca-waves span{
  display:inline-block; width:2.5px; border-radius:2px;
  background:rgba(255,255,255,.45); flex-shrink:0;
}
body.tema-claro .chat-bubble-gestor .ca-waves span{ background:rgba(0,0,0,.25); }
body.tema-claro .chat-bubble-colaborador .ca-waves span{ background:rgba(0,0,0,.2); }
.ca-dur{ font-size:11.5px; opacity:.75; white-space:nowrap; flex-shrink:0; }
.ca-dl{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  opacity:.65; transition:.15s; color:inherit; text-decoration:none;
}
.ca-dl:hover{ opacity:1; background:rgba(255,255,255,.2); }

/* Pill buttons row */
.ca-actions{
  display:flex; align-items:center; gap:6px;
  margin-top:7px; flex-wrap:wrap;
}
.ca-btn-transcr,
.ca-btn-resumo,
.ca-btn-insights{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:20px; font-size:12px;
  font-weight:600; cursor:pointer; border:1.5px solid;
  transition:.15s; white-space:nowrap; user-select:none;
}
/* Transcrever — neutro */
.ca-btn-transcr{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.82);
}
.ca-btn-transcr:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); }
.ca-btn-transcr.ativo{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5);
  color:#fff;
}
body.tema-claro .ca-btn-transcr{
  background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.18); color:rgba(0,0,0,.7);
}
body.tema-claro .ca-btn-transcr:hover{ background:rgba(0,0,0,.1); }
body.tema-claro .ca-btn-transcr.ativo{ background:rgba(0,0,0,.14); color:#000; }

/* Resumo — verde/teal */
.ca-btn-resumo{
  background:rgba(0,168,132,.1);
  border-color:rgba(0,168,132,.35);
  color:rgba(0,200,160,.92);
}
.ca-btn-resumo:hover{ background:rgba(0,168,132,.18); border-color:rgba(0,168,132,.6); }
.ca-btn-resumo.ativo{
  background:rgba(0,168,132,.22); border-color:rgba(0,168,132,.8);
  color:#00c8a0;
}
body.tema-claro .ca-btn-resumo{
  background:rgba(0,130,100,.07); border-color:rgba(0,130,100,.28); color:rgba(0,100,80,.9);
}
body.tema-claro .ca-btn-resumo:hover{ background:rgba(0,130,100,.13); }
body.tema-claro .ca-btn-resumo.ativo{ color:#006450; }

/* Insights IA — dourado */
.ca-btn-insights{
  background:rgba(245,196,0,.1);
  border-color:rgba(245,196,0,.35);
  color:rgba(245,196,0,.92);
}
.ca-btn-insights:hover{ background:rgba(245,196,0,.18); border-color:rgba(245,196,0,.6); }
.ca-btn-insights.ativo{
  background:rgba(245,196,0,.22); border-color:rgba(245,196,0,.8);
  color:#F5C400;
}
body.tema-claro .ca-btn-insights{
  background:rgba(180,140,0,.08); border-color:rgba(180,140,0,.3); color:rgba(140,100,0,.9);
}
body.tema-claro .ca-btn-insights:hover{ background:rgba(180,140,0,.14); }
body.tema-claro .ca-btn-insights.ativo{ color:#8c6400; }

.ca-btn-transcr:disabled,
.ca-btn-resumo:disabled,
.ca-btn-insights:disabled{ opacity:.4; cursor:default; }

/* Result cards */
.ca-transcr-card,
.ca-resumo-card,
.ca-insights-card{
  margin-top:8px; border-radius:10px; overflow:hidden;
  max-width:300px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.18);
  font-size:12.5px;
}
body.tema-claro .ca-transcr-card,
body.tema-claro .ca-resumo-card,
body.tema-claro .ca-insights-card{
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1);
}
.ca-resumo-card{
  border-color:rgba(0,168,132,.2);
  background:rgba(0,168,132,.05);
}
body.tema-claro .ca-resumo-card{
  border-color:rgba(0,130,100,.2); background:rgba(0,168,132,.04);
}
.ca-insights-card{
  border-color:rgba(245,196,0,.2);
  background:rgba(245,196,0,.05);
}
body.tema-claro .ca-insights-card{
  border-color:rgba(180,140,0,.2); background:rgba(245,196,0,.04);
}

/* Card header */
.ca-card-header{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11px; font-weight:700; letter-spacing:.03em;
  opacity:.7; text-transform:uppercase;
}
.ca-card-header-resumo{
  color:rgba(0,200,160,.9);
  border-bottom-color:rgba(0,168,132,.2);
}
body.tema-claro .ca-card-header-resumo{ color:rgba(0,120,90,.9); border-bottom-color:rgba(0,130,100,.2); }
.ca-card-header-ia{
  color:rgba(245,196,0,.85);
  border-bottom-color:rgba(245,196,0,.15);
}
body.tema-claro .ca-card-header{ border-bottom-color:rgba(0,0,0,.08); }
body.tema-claro .ca-card-header-ia{ border-bottom-color:rgba(180,140,0,.15); }

/* Card body */
.ca-card-body{ padding:8px 10px 10px; line-height:1.55; }
.ca-card-md p{ margin:0 0 5px; }
.ca-card-md p:last-child{ margin-bottom:0; }
.ca-card-md strong{ font-weight:600; }
.ca-card-md ul{ margin:2px 0 5px; padding-left:14px; }
.ca-card-md li{ margin-bottom:2px; }

/* Loading dots */
.ca-card-loading{
  padding:10px 12px; opacity:.65;
  animation:pulse-mic .9s ease-in-out infinite;
}
/* Error state */
.ca-card-erro{
  padding:10px 12px; color:var(--danger);
}

/* ── MÍDIA NAS BOLHAS ────────────────────────────────────────── */
.chat-midia-placeholder{
  display:flex; align-items:center; gap:8px; font-size:13px;
  padding:4px 2px; font-weight:500;
}
.chat-midia-imagem{ color:#4A9FFF; }
.chat-midia-video { color:#A855F7; }
.chat-midia-audio { color:#22C97A; }
.chat-midia-doc   { color:#FFC233; }

/* ── CARD DE DOCUMENTO — estilo WhatsApp Web ─────────────────── */
.chat-doc-wrap{ display:flex; flex-direction:column; gap:6px; max-width:100%; }
.chat-doc-card{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  /* Não ultrapassar largura da bolha */
  min-width:0;
  width:min(360px, 100%);
  max-width:100%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
body.tema-claro .chat-doc-card{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.08);
}
.chat-doc-card:hover{ filter:brightness(1.03); }
.chat-doc-icone{ flex-shrink:0; line-height:0; }
.chat-doc-dados{ flex:1; min-width:0; }
.chat-doc-nome{
  font-size:13px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-doc-desc{ font-size:11px; opacity:.75; margin-top:2px; }
.chat-doc-dl{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  background:rgba(255,255,255,.10);
  color:inherit;
  /* Garantia extra: não empurra/estoura layout em telas estreitas */
  max-width:34px;
}
body.tema-claro .chat-doc-dl{ background:rgba(0,0,0,.08); }
.chat-doc-dl:hover{ background:rgba(255,255,255,.16); }
body.tema-claro .chat-doc-dl:hover{ background:rgba(0,0,0,.12); }

.chat-doc-actions{
  display:flex; gap:10px;
  padding-left:6px;
}
.chat-doc-act{
  border:none; background:transparent;
  font-size:13px; font-weight:600;
  color:#00a884; /* verde WA */
  cursor:pointer;
  padding:2px 4px;
}
.chat-doc-act:hover{ text-decoration:underline; }
body.tema-claro .chat-doc-act{ color:#007f6a; }

.chat-doc-indisponivel{
  cursor:default;
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.18);
}
body.tema-claro .chat-doc-indisponivel{
  background:rgba(239,68,68,.06);
  border-color:rgba(239,68,68,.16);
}

/* ── PDF preview (1ª página) ─────────────────────────────────── */
.chat-doc-pdf-thumb{
  /* Thumb menor para não dominar o chat */
  width:min(260px, 46vw);
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  position:relative;
}
body.tema-claro .chat-doc-pdf-thumb{
  border-color:rgba(0,0,0,.10);
  background:rgba(0,0,0,.04);
}
.chat-doc-pdf-thumb img{
  display:block;
  width:100%;
  height:auto;
}
.chat-doc-pdf-skel{
  height:120px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:chatPdfSkel 1.2s ease-in-out infinite;
}
body.tema-claro .chat-doc-pdf-skel{
  background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
}
@keyframes chatPdfSkel { 0%{background-position:0 0} 100%{background-position:200% 0} }

/* ── CARD DE LIGAÇÃO — estilo WhatsApp Web ───────────────────── */
.chat-bubble-ligacao{
  padding: 10px 12px 8px 12px;
  min-width: 220px;
}
.chat-ligacao-card{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
}
.chat-ligacao-ico{
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
body.tema-claro .chat-ligacao-ico{ background: rgba(0,0,0,.07); }
.chat-ligacao-info{ flex: 1; min-width: 0; }
.chat-ligacao-titulo{
  font-size: 14px; font-weight: 600;
  color: var(--text); line-height: 1.3;
}
.chat-ligacao-sub{
  display: flex; align-items: center;
  font-size: 12px; color: var(--muted2);
  margin-top: 2px; line-height: 1.3;
}
.chat-bubble-legenda{ font-size:12px; font-weight:400; margin-top:6px; opacity:.9; line-height:1.4; display:block; }

/* bolha sem padding interno quando o conteúdo é imagem/vídeo */
.chat-bubble.chat-bubble-midia{ padding:3px 3px 4px 3px; }
.chat-bubble.chat-bubble-midia .chat-bubble-meta{ padding:0 6px 3px; margin-top:0; bottom:0; }

/* ── IMAGEM E VÍDEO NO CHAT ──────────────────────────────────── */
/* min-height reserva espaço ANTES da imagem carregar — evita scrollHeight
   crescer (e o scroll subir/descer visivelmente) conforme cada mídia baixa.
   Removido por JS via classe .chat-midia-loaded após img.onload, para não
   manter espaço vazio quando a foto real é mais baixa que o placeholder. */
.chat-midia-imagem-wrap{
  position:relative; max-width:330px; border-radius:8px; overflow:hidden;
  line-height:0;
  min-height:220px;
  background:rgba(0,0,0,.10);
}
body.tema-claro .chat-midia-imagem-wrap{ background:rgba(0,0,0,.05); }
.chat-midia-imagem-wrap.chat-midia-loaded{ min-height:0; background:transparent; }
.chat-midia-img{
  display:block; width:100%; max-width:330px; max-height:330px;
  object-fit:cover; border-radius:8px;
  transition:filter .15s;
}
.chat-midia-imagem-wrap:hover .chat-midia-img{ filter:brightness(.9); }

/* GIF: mantém proporção; anima no <img> */
.chat-midia-img.chat-midia-gif{
  object-fit:contain; max-height:280px; background:rgba(0,0,0,.12);
}

/* Figurinha: tamanho tipo WhatsApp (webp), sem “moldura” de foto */
.chat-midia-sticker-wrap{
  position:relative; display:inline-block; line-height:0; max-width:200px; max-height:200px;
}
.chat-midia-sticker-wrap:hover .chat-midia-sticker{ filter:brightness(1.06); }
.chat-midia-img.chat-midia-sticker{
  width:auto; height:auto; max-width:180px; max-height:180px; min-width:96px; min-height:96px;
  object-fit:contain; border-radius:0; background:transparent;
}
.chat-midia-placeholder.chat-midia-sticker-ph{
  min-width:96px; min-height:96px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.08); border-radius:8px;
}
.chat-midia-sticker-emoji{ font-size:36px; opacity:.5; }

/* ícone de zoom discreto ao hover */
.chat-midia-imagem-wrap::after{
  content:'';
  position:absolute; inset:0; border-radius:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center/28px no-repeat;
  opacity:0; transition:opacity .15s;
  pointer-events:none;
}
.chat-midia-imagem-wrap:hover::after{ opacity:.7; }

.chat-midia-video-wrap{
  max-width:330px;
  min-height:200px;
  border-radius:8px;
  background:rgba(0,0,0,.12);
}
.chat-midia-video-wrap.chat-midia-loaded{ min-height:0; background:transparent; }
.chat-midia-video{
  display:block; width:100%; max-width:330px; max-height:260px;
  border-radius:8px; background:#000;
}

.chat-origem-tag{
  font-size:10px; color:var(--muted2); margin-bottom:2px; padding-left:2px;
}

/* ── SUGESTÕES (quebra linha, sem scroll lateral) ───────────── */
.chat-sugestoes-wrap{
  padding:3px 6px 4px; background:var(--surface);
  flex-shrink:0;
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  overflow-x:hidden;
  max-width:100%;
}
.chat-sugestoes-wrap:empty{ display:none; }
.chat-sug-btn{
  display:inline-flex; align-items:center; gap:3px;
  flex:1 1 auto;
  padding:4px 7px; border-radius:var(--radius-sm,8px); font-size:11px; line-height:1.25; cursor:pointer;
  background:var(--primary-soft,rgba(var(--primary-rgb),.1)); border:1px solid color-mix(in srgb,var(--primary,#1E6FD9) 28%,transparent);
  color:var(--primary,var(--accent2)); font-weight:600;
  transition:.12s; text-align:left; vertical-align:top;
  min-height:0;
  max-width:min(168px, 100%);
  min-width:0;
  overflow:hidden;
  position:relative;
  font-family:inherit;
}
.chat-sug-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  white-space:normal;
  word-break:break-word;
}

/* ── Select com ícone SVG (usado em filtros) ─────────────────── */
.select-ico{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.select-ico-i{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted2);
  flex-shrink:0;
}
.select-ico-i svg{ width:16px; height:16px; display:block; }
.chat-sug-btn:hover{ background:var(--primary-soft,rgba(var(--primary-rgb),.2)); border-color:var(--primary,var(--accent)); color:var(--primary,var(--accent2)); }
.chat-sug-icon{
  flex-shrink:0; display:inline-flex; align-items:center; align-self:center;
  margin-top:0;
}
.chat-sug-icon svg{ width:11px; height:11px; }

/* Preview maior no hover (para ler sem clicar) */
.chat-sug-btn:hover::after{
  content: attr(data-full);
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  width:min(420px, 78vw);
  background:rgba(9,20,26,.95);
  border:1px solid rgba(255,255,255,.14);
  color:#e9edef;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  z-index:20;
}
body.tema-claro .chat-sug-btn:hover::after{
  background:rgba(255,255,255,.98);
  border-color:rgba(0,0,0,.12);
  color:#111;
}

/* ── RESULTADO IA ───────────────────────────────────────────── */
.chat-ia-result-wrap{
  margin:0 10px 6px; background:rgba(var(--primary-rgb),.07);
  border:1.5px solid rgba(var(--primary-rgb),.2); border-radius:10px; padding:10px 12px;
  display:none;
}
.chat-ia-result-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.chat-ia-result-header span{ font-size:11px; font-weight:700; color:var(--accent2); }
.chat-ia-result-actions{ display:flex; gap:6px; }
#chat-ia-texto{
  font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap;
}

/* ── FERRAMENTAS IA ─────────────────────────────────────────── */
.chat-ia-tools{
  display:flex; gap:3px 4px;
  padding:4px 7px 3px;
  background:var(--surface); border-top:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.chat-ia-btn{
  padding:4px 8px; border-radius:var(--radius-sm,8px);
  font-size:10px; font-weight:600; cursor:pointer;
  background:var(--surface-2,var(--surface)); border:1px solid var(--border);
  color:var(--text-muted,var(--accent2)); transition:.12s;
  white-space:normal; text-align:center; line-height:1.25;
  font-family:inherit;
}
.chat-ia-btn:hover:not(:disabled){ background:var(--primary-soft,rgba(var(--primary-rgb),.18)); border-color:var(--primary,var(--accent)); color:var(--primary,var(--accent2)); }
.chat-ia-btn:disabled{ opacity:.4; cursor:default; }

/* ── PAINEL DE CONFIGURAÇÃO DA IA ───────────────────────────── */
.ia-cfg-tabs{
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:20px;
  background:var(--surface2); padding:4px; border-radius:12px;
  border:1px solid var(--border);
  overflow-x:hidden; max-width:100%;
}
.ia-cfg-tab{
  flex:1 1 auto;
  padding:6px 9px; border-radius:8px; border:none; cursor:pointer;
  font-size:11.5px; font-weight:600; background:transparent; color:var(--muted);
  transition:.15s;
  white-space:normal; text-align:center;
}
.ia-cfg-tab:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.ia-cfg-tab.ativo{ background:var(--surface); color:var(--text); box-shadow:0 1px 4px var(--shadow); }
body.tema-claro .ia-cfg-tab.ativo{ background:#fff; }

.ia-cfg-pane{ display:none; flex-direction:column; gap:20px; }
.ia-cfg-pane.ativo{ display:flex; }
/* IA & Estilo — ritmo mais denso entre blocos profissionais */
.ia-cfg-pane--pro{ gap:14px; }

.ia-cfg-section{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.ia-cfg-section--pro{
  border-radius:14px;
  padding:14px 16px;
  gap:8px;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(0,35,95,.06);
}
body.tema-claro .ia-cfg-section--pro{
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 1px 3px rgba(15,52,96,.06), 0 12px 28px rgba(15,52,96,.045);
}
.ia-cfg-section--flush{ padding-bottom:12px; }
.ia-cfg-section-desc--tight{
  font-size:12px !important;
  line-height:1.45 !important;
  margin:0 0 8px !important;
  max-width:48rem;
}
.ia-cfg-textarea--dense{
  padding:8px 10px !important;
  font-size:12.75px !important;
  line-height:1.48 !important;
  min-height:72px;
}
.ia-cfg-input{
  width:100%; box-sizing:border-box;
  padding:9px 12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg);
  color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif;
  transition:border-color .12s;
}
.ia-cfg-input:focus{ border-color:var(--accent); outline:none; }
body.tema-claro .ia-cfg-input{ background:#f8faff; }

/* Intro compacta + dobra “saiba mais” */
.ia-pro-intro{
  display:flex; flex-direction:column; gap:8px;
}
.ia-pro-intro-card{
  display:flex; align-items:flex-start; gap:12px 14px;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--border);
  background:rgba(var(--primary-rgb),.07);
  flex-wrap:wrap;
}
.ia-pro-intro-card--accent{
  background:rgba(0,168,132,.08);
  border-color:rgba(0,168,132,.22);
}
body.tema-claro .ia-pro-intro-card{
  background:#f3f8ff;
}
body.tema-claro .ia-pro-intro-card--accent{
  background:#f0faf7;
}
.ia-pro-intro-icon{
  font-size:1.35rem; line-height:1; flex-shrink:0;
  width:2.25rem; height:2.25rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 1px 2px var(--shadow);
}
.ia-pro-intro-text{ flex:1; min-width:min(100%, 220px); }
.ia-pro-intro-title{
  margin:0 0 4px; font-size:1rem; font-weight:800;
  letter-spacing:-.02em; color:var(--text);
}
.ia-pro-intro-sub{
  margin:0; font-size:12px; line-height:1.45; color:var(--muted); max-width:40rem;
}
.ia-pro-intro-sub strong{ color:var(--text); font-weight:650; }
.ia-pro-intro-tags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.ia-pro-tag{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:999px;
  background:rgba(var(--primary-rgb),.1); color:var(--accent2);
  border:1px solid rgba(var(--primary-rgb),.18);
}
.ia-pro-fold{
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface2); overflow:hidden;
}
.ia-pro-fold summary{
  list-style:none; cursor:pointer; padding:10px 12px;
  font-size:12px; font-weight:700; color:var(--muted2);
  display:flex; align-items:center; gap:8px;
  user-select:none;
}
.ia-pro-fold summary::-webkit-details-marker{ display:none; }
.ia-pro-fold summary:hover{ color:var(--text); background:rgba(var(--primary-rgb),.04); }
.ia-pro-fold-body{
  padding:0 12px 12px 12px; font-size:12px; line-height:1.55; color:var(--muted);
  border-top:1px solid var(--border);
}
.ia-pro-fold-body > p{ margin:10px 0 0; }
.ia-pro-fold-body > p:first-child{ margin-top:8px; }
.ia-pro-fold-body .ia-guia-steps{ margin-top:8px; }
.ia-pro-fold-summary svg{ flex-shrink:0; opacity:.85; }

.ia-guia-steps--compact{ gap:6px; }
.ia-guia-steps--compact .ia-guia-step{ font-size:11.5px; }

.ia-sec-head{ margin-bottom:2px; }
.ia-sec-head-copy{ min-width:0; }
.ia-sec-head-title{
  margin:0; font-size:13.5px; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  letter-spacing:-.015em;
}
.ia-sec-head-ico{
  display:inline-flex; color:var(--accent); opacity:.95;
}
.ia-sec-head-desc{
  margin:4px 0 0; font-size:11.5px; color:var(--muted); line-height:1.45; max-width:42rem;
}

.ia-pro-hint-fold{
  border:1px dashed rgba(var(--primary-rgb),.28); border-radius:10px;
  background:rgba(var(--primary-rgb),.04); margin:4px 0 2px;
  font-size:12px;
}
body.tema-claro .ia-pro-hint-fold{ background:rgba(var(--primary-rgb),.03); }
.ia-pro-hint-fold summary{
  padding:7px 11px; cursor:pointer; font-weight:700; color:var(--muted2);
  list-style:none; user-select:none;
}
.ia-pro-hint-fold summary::-webkit-details-marker{ display:none; }
.ia-pro-hint-fold[open] summary{ color:var(--accent2); }
.ia-pro-hint-p{
  margin:0; padding:0 11px 9px; color:var(--muted); line-height:1.45; font-size:11.5px;
}

.ia-treino-fields--pro{ gap:10px; align-items:stretch; }
.ia-treino-fields--pro .form-field{ flex:1 1 220px; min-width:0; }
.ia-treino-field-lbl{
  display:flex; flex-direction:column; gap:1px; margin-bottom:5px;
}
.ia-treino-field-lbl-main{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted2);
}
.ia-treino-field-lbl-sub{ font-size:11px; color:var(--muted); font-weight:500; }
.ia-treino-form-actions{
  display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:4px;
}

.ia-treino-upload-area--pro{
  padding:18px 16px; border-radius:14px;
  border-width:1.5px; border-style:dashed;
  background:rgba(var(--primary-rgb),.03);
}
body.tema-claro .ia-treino-upload-area--pro{ background:#f6f9ff; }
.ia-treino-upload-title{ font-size:13px; font-weight:700; color:var(--text); }
.ia-treino-upload-meta{ font-size:11px; color:var(--muted); margin-top:2px; }
.ia-treino-upload-status{
  margin-top:6px; font-size:12px; color:var(--muted);
}

.estilo-ia-fonte-wrap{
  margin:8px 0 12px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface2);
  font-size:12px; line-height:1.45;
}
.estilo-ia-fonte-body{ margin-top:4px; color:var(--text); }

.estilo-vazio--card{
  text-align:left; padding:14px 12px; font-size:12px; line-height:1.5;
  border-radius:10px; border:1px dashed var(--border);
  background:rgba(0,0,0,.02);
}
body.tema-claro .estilo-vazio--card{ background:rgba(var(--primary-rgb),.03); }
.estilo-vazio--list{ font-size:12px; padding:14px; text-align:center; }

.ia-cfg-actions--bar{
  padding:12px 14px; margin:4px 0 0;
  border-radius:12px; border:1px solid var(--border);
  background:var(--surface2); gap:10px;
}

.ia-import-primary{ border-color:rgba(var(--primary-rgb),.22); }
.estilo-import-form--pro{ gap:10px; }
.estilo-import-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; align-items:end;
}
@media(max-width:720px){ .estilo-import-grid{ grid-template-columns:1fr; } }
.form-field--import-file .estilo-file-label{ width:100%; box-sizing:border-box; justify-content:center; }
.ia-import-lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted2); }
.estilo-file-label--pro{
  padding:11px 14px; border-radius:12px; font-weight:600; color:var(--text);
  border-width:1.5px; min-height:44px;
}
.estilo-file-nome-hint:empty{ display:none; }
.estilo-file-nome-hint:not(:empty){
  display:block; margin-top:6px; font-size:11.5px; color:var(--muted); line-height:1.4;
}
.ia-import-actions{ margin-top:4px; }

/* Abas IA — alvo de toque e foco mais claros */
.ia-cfg-tabs{
  box-shadow:0 1px 3px rgba(0,35,95,.05);
}
.ia-cfg-tab{
  padding:8px 12px;
  font-size:12px;
  border-radius:9px;
}
.ia-cfg-tab:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.ia-cfg-section-title{
  font-size:14px; font-weight:700; color:var(--text);
}
.ia-cfg-section-desc{
  font-size:12.5px; color:var(--muted); line-height:1.55;
}
.ia-cfg-section-desc code{
  background:rgba(255,255,255,.08); border-radius:4px;
  padding:1px 5px; font-family:monospace; font-size:12px;
}
body.tema-claro .ia-cfg-section-desc code{ background:rgba(0,0,0,.06); }

.ia-cfg-textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg);
  color:var(--text); font-size:13px; line-height:1.55;
  resize:vertical; font-family:'DM Sans',sans-serif;
  transition:.12s;
}
.ia-cfg-textarea:focus{ border-color:var(--accent); outline:none; }
body.tema-claro .ia-cfg-textarea{ background:#f8faff; }

.ia-cfg-select{
  padding:9px 36px 9px 12px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background-color:var(--bg);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  max-width:420px;
  transition:.12s;
  -webkit-appearance:none;
  appearance:none;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:17px;
}
.ia-cfg-select:focus{ border-color:var(--accent); outline:none; }
body.tema-claro .ia-cfg-select{
  background-color:#f8faff;
}

/* Toggle switch */
.ia-cfg-toggle-wrap{
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.ia-cfg-toggle-wrap input{ display:none; }
.ia-cfg-toggle{
  width:40px; height:22px; border-radius:11px;
  background:var(--border); position:relative; flex-shrink:0;
  transition:.2s;
}
.ia-cfg-toggle::after{
  content:''; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; transition:.2s;
}
.ia-cfg-toggle-wrap input:checked ~ .ia-cfg-toggle{ background:var(--success); }
.ia-cfg-toggle-wrap input:checked ~ .ia-cfg-toggle::after{ transform:translateX(18px); }
.ia-cfg-toggle-label{ font-size:13px; font-weight:500; }

.ia-cfg-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:4px;
}

/* Formulário de treino */
.ia-treino-form{
  display:flex; flex-direction:column; gap:12px;
}
.ia-treino-fields{
  display:flex; gap:12px; flex-wrap:wrap;
}
.ia-treino-fields .form-field{ min-width:200px; }

.ia-treino-lista{
  display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto;
}
.ia-treino-vazio{
  font-size:13px; color:var(--muted); text-align:center; padding:20px;
}
.ia-treino-vazio--pro{
  padding:16px 14px; font-size:12px; line-height:1.45;
  border-radius:10px; border:1px dashed var(--border);
  background:rgba(0,0,0,.02);
}
body.tema-claro .ia-treino-vazio--pro{ background:rgba(var(--primary-rgb),.03); }
.ia-treino-item{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px;
}
.ia-treino-item-body{ flex:1; display:flex; flex-direction:column; gap:6px; }
.ia-treino-item-row{ display:flex; gap:8px; font-size:12.5px; line-height:1.45; }
.ia-treino-lbl{
  flex-shrink:0; font-weight:700; color:var(--muted2);
  font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  min-width:62px; padding-top:1px;
}
.ia-treino-txt{ color:var(--text); word-break:break-word; }
.ia-treino-del{
  flex-shrink:0; border:none; background:transparent; color:var(--muted);
  cursor:pointer; font-size:16px; padding:2px 4px; border-radius:6px;
  transition:.12s; line-height:1;
}
.ia-treino-del:hover{ color:var(--danger); background:rgba(255,68,85,.1); }

/* ── UPLOAD DE DOCUMENTOS IA ─────────────────────────────────── */
.ia-treino-upload-area{
  border:2px dashed var(--border); border-radius:12px;
  padding:28px 20px; text-align:center; cursor:pointer;
  transition:border-color .18s, background .18s;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text);
}
.ia-treino-upload-area:hover,
.ia-treino-upload-area.drag{
  border-color:var(--accent); background:rgba(var(--primary-rgb),.06);
}
.ia-treino-upload-area .ia-treino-upload-ico{ color:var(--muted); opacity:.6; }

/* Item tipo documento (diferente do Q&A) */
.ia-treino-item.ia-treino-doc{
  border-left:3px solid var(--accent); background:rgba(var(--primary-rgb),.04);
}
body.tema-claro .ia-treino-item.ia-treino-doc{ background:rgba(var(--primary-rgb),.05); }
.ia-treino-doc-nome{
  font-weight:700; font-size:13px; color:var(--accent2);
  display:flex; align-items:center; gap:6px;
}
.ia-treino-doc-preview{
  font-size:12px; color:var(--muted); margin-top:4px;
  max-height:56px; overflow:hidden; line-height:1.5;
  position:relative;
}
.ia-treino-doc-chars{
  font-size:11px; color:var(--muted2); margin-top:4px;
}

/* ── IA GUIA BANNERS ─────────────────────────────────────────── */
.ia-guia-banner{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(var(--primary-rgb),.10);
  border:1px solid rgba(var(--primary-rgb),.22); border-radius:12px;
  padding:14px 16px;
}
body.tema-claro .ia-guia-banner{
  background:rgba(var(--primary-rgb),.07);
}
.ia-guia-banner-ico{ font-size:22px; flex-shrink:0; line-height:1; margin-top:2px; }
.ia-guia-banner-titulo{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.ia-guia-banner-desc{ font-size:12px; color:var(--muted); line-height:1.6; }
.ia-guia-banner-desc strong{ color:var(--text); }

/* Passos numerados inline */
.ia-guia-steps{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.ia-guia-step{ display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--muted); line-height:1.5; }
.ia-guia-step-num{
  min-width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.ia-guia-step strong{ color:var(--text); }

/* Caixa de variáveis disponíveis */
.ia-variaveis-box{
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:11px 14px;
  display:flex; flex-direction:column; gap:7px;
}
.ia-variaveis-titulo{ font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ia-variavel-row{ display:flex; align-items:center; gap:10px; font-size:12px; }
.ia-variavel-code{
  background:rgba(var(--primary-rgb),.15); color:var(--accent2);
  border-radius:5px; padding:2px 8px; font-family:monospace; font-size:11.5px; white-space:nowrap; flex-shrink:0;
}
body.tema-claro .ia-variavel-code{ background:rgba(var(--primary-rgb),.1); }
.ia-variavel-desc{ color:var(--muted); line-height:1.4; }

/* Dica / exemplo inline */
.ia-dica-exemplo{
  background:var(--surface2); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:10px 14px;
  font-size:12px; color:var(--muted); line-height:1.6;
}
.ia-dica-exemplo strong{ color:var(--muted2); display:block; margin-bottom:3px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
.ia-dica-exemplo em{ color:var(--text); font-style:normal; }

/* ── IA & Estilo — aba Assistente (layout refinado) ─────────── */
#estilo-pane-assistente .ia-estilo-hero{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:14px 18px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--border);
  background:rgba(var(--primary-rgb),.08);
}
body.tema-claro #estilo-pane-assistente .ia-estilo-hero{
  background:rgba(var(--primary-rgb),.07);
}
#estilo-pane-assistente .ia-estilo-hero-title{
  margin:0 0 6px 0; font-size:1.05rem; font-weight:800; color:var(--text); letter-spacing:-.02em;
}
#estilo-pane-assistente .ia-estilo-hero-sub{
  margin:0; font-size:12.5px; color:var(--muted); line-height:1.45; max-width:36rem;
}
#estilo-pane-assistente .ia-estilo-hero-scope{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
#estilo-pane-assistente .ia-estilo-scope-label{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted2); width:100%;
}
@media (min-width:720px){
  #estilo-pane-assistente .ia-estilo-scope-label{ width:auto; margin-right:4px; }
}
#estilo-pane-assistente .ia-estilo-pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  font-size:11.5px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:0 1px 2px var(--shadow);
}
#estilo-pane-assistente .ia-provedor-chip{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px;
  padding:10px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:12px;
}
#estilo-pane-assistente .ia-provedor-chip-lbl{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted2);
}
#estilo-pane-assistente .ia-provedor-chip .estilo-provedor-badge{
  font-size:11px; padding:4px 11px; border-radius:999px; font-weight:800;
}
#estilo-pane-assistente .ia-provedor-chip-btn{ margin-left:auto; }
#estilo-pane-assistente .ia-assist-split{
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:900px){
  #estilo-pane-assistente .ia-assist-split{ grid-template-columns:1fr 1fr; align-items:stretch; }
}
#estilo-pane-assistente .ia-assist-card .ia-cfg-section-title{ margin-bottom:4px; }
#estilo-pane-assistente .ia-microcopy{
  margin:0 0 10px 0; font-size:12px; color:var(--muted); line-height:1.5;
}
#estilo-pane-assistente .ia-microcopy strong{ color:var(--text); font-weight:650; }
#estilo-pane-assistente .ia-help-fold{
  margin:0 0 10px 0; padding:6px 10px; border-radius:8px;
  border:1px dashed var(--border); font-size:12px; color:var(--muted); cursor:pointer; background:var(--surface2);
}
#estilo-pane-assistente .ia-help-fold summary{
  font-weight:700; color:var(--muted2); list-style-position:outside; cursor:pointer;
}
#estilo-pane-assistente .ia-help-fold-body{ display:block; margin-top:6px; line-height:1.45; }
#estilo-pane-assistente .ia-assist-chat-prompt{
  margin-top:10px; padding-top:14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px;
}
#estilo-pane-assistente .ia-field-label{
  font-size:10.5px; font-weight:800; color:var(--muted2); text-transform:uppercase; letter-spacing:.05em;
  margin-top:6px;
}
#estilo-pane-assistente .ia-field-label:first-of-type{ margin-top:0; }
#estilo-pane-assistente .ia-section-two-col{ margin-bottom:4px; }
#estilo-pane-assistente .ia-assist-modelo-row{
  display:flex; flex-direction:column; gap:12px;
}
@media (min-width:760px){
  #estilo-pane-assistente .ia-assist-modelo-row{
    flex-direction:row; align-items:flex-end; justify-content:space-between; gap:20px;
  }
  #estilo-pane-assistente .ia-assist-modelo-copy{ flex:1; min-width:0; margin-bottom:2px; }
}
#estilo-pane-assistente .ia-cfg-select--stretch{ max-width:none; width:100%; min-width:0; flex:1; }
button.ia-text-btn{
  padding:0; margin:0; border:none; background:none; cursor:pointer;
  font:inherit; font-weight:700; color:var(--accent2); text-decoration:underline;
  text-underline-offset:2px;
}
button.ia-text-btn:hover{ color:var(--accent); }

/* ── PAINEL DE ESTILO DE ESCRITA ────────────────────────────── */

/* Alerta de drift */
.estilo-drift-alerta{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:12px; margin-bottom:16px;
  background:rgba(255,196,0,.1); border:1.5px solid rgba(255,196,0,.4);
}
.estilo-drift-icon{ font-size:20px; flex-shrink:0; margin-top:1px; }
.estilo-drift-texto{ flex:1; font-size:13px; line-height:1.5; }
.estilo-drift-texto strong{ color:var(--warn); display:block; margin-bottom:2px; }

/* Score de similaridade */
.estilo-score-bar{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; margin-bottom:16px;
}
.estilo-score-label{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; margin-bottom:8px;
}
.estilo-score-label strong{ font-size:16px; font-weight:700; }
.estilo-score-track{
  height:8px; border-radius:4px; background:var(--border); overflow:hidden;
}
.estilo-score-fill{
  height:100%; border-radius:4px; transition:width .4s, background .3s;
  background:var(--success);
}

/* Grade de perfis lado a lado (original + atual + perfil só deste login quando existir) */
.estilo-perfis-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.estilo-perfil-card-meu{
  border-color:rgba(74,159,255,.35);
}
@media(max-width:600px){ .estilo-perfis-grid{ grid-template-columns:1fr; } }

.estilo-perfil-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,35,95,.04);
  transition:border-color .15s, box-shadow .15s;
}
.estilo-perfil-card:hover{
  border-color:rgba(74,159,255,.35);
  box-shadow:0 4px 14px rgba(15,52,96,.06);
}
.estilo-perfil-card-atual{
  border-color:rgba(0,168,132,.3);
}
.estilo-perfil-hd{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600;
}
.estilo-perfil-hd small{ font-size:10.5px; color:var(--muted); font-weight:400; }
.estilo-perfil-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.estilo-vazio{ color:var(--muted); font-size:13px; text-align:center; padding:16px; }
.estilo-data{ font-size:10.5px; color:var(--muted); margin-top:4px; }

.estilo-campo{
  display:flex; flex-direction:column; gap:3px; font-size:12.5px;
}
.estilo-lbl{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted2);
}
.estilo-val{ color:var(--text); font-weight:500; }
.estilo-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.estilo-tag{
  padding:2px 7px; border-radius:10px; font-size:11px;
  background:rgba(var(--primary-rgb),.1); color:var(--accent2);
  border:1px solid rgba(var(--primary-rgb),.2);
}

/* Versões */
.estilo-versoes-lista{
  display:flex; flex-direction:column; gap:6px;
  max-height:220px; overflow-y:auto;
}

/* Formulário de importação */
.estilo-import-form{
  display:flex; flex-direction:column; gap:12px;
}
.estilo-file-label{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px; cursor:pointer;
  border:1.5px dashed var(--border); font-size:13px;
  color:var(--muted); transition:.15s;
}
.estilo-file-label:hover{ border-color:var(--accent); color:var(--accent2); }

/* Provedor de IA */
.estilo-provedor-atual{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.estilo-provedor-badge{
  padding:4px 12px; border-radius:20px;
  background:rgba(0,168,132,.15); border:1px solid rgba(0,168,132,.3);
  color:#00c8a0; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.estilo-provedor-status-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px;
}
.estilo-provedor-item{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  background:var(--bg); border:1px solid var(--border);
  font-size:13px; font-weight:500;
}
.estilo-provedor-item.falta{ opacity:.55; }
.estilo-provedor-item-chave{ font-size:11px; color:var(--muted); margin-left:auto; }

/* ── RODAPÉ INPUT ───────────────────────────────────────────── */
.chat-footer{
  display:flex; align-items:flex-end; gap:8px; padding:8px 12px 10px;
  background:#202c33; border-top:none; flex-shrink:0;
  /* Evita ficar escondido atrás da barra inferior (iOS notch/home indicator) */
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  /* Mantém o composer visível quando a lista rola/teclado abre */
  position:sticky;
  bottom:0;
  z-index:5;
}
body.tema-claro .chat-footer{ background:#f0f2f5; border-top:1px solid var(--border); }
.chat-input{
  flex:1; padding:11px 14px; border-radius:10px; font-size:15px;
  background:#2a3942; border:none; color:#e9edef;
  outline:none; resize:none;
  min-height:44px; max-height:120px; overflow-y:auto;
  font-family:'DM Sans',sans-serif; line-height:1.45;
}
body.tema-claro .chat-input{
  background:#fff; border:1px solid var(--border); color:var(--text);
}
.chat-input:focus{ outline:none; }
.chat-input::placeholder{ color:rgba(241,241,242,.4); }
body.tema-claro .chat-input::placeholder{ color:var(--muted); }
.chat-btn-enviar{
  width:44px; height:44px; border-radius:50%; background:#00a884;
  border:none; color:#fff; font-size:18px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.chat-btn-enviar:hover:not(:disabled){ background:#017a62; transform:scale(1.05); }
.chat-btn-enviar:disabled{ opacity:.5; transform:none; }

/* ── BOTÃO EMOJI DO CHAT ─────────────────────────────────────── */
.chat-emoji-wrap{ position:relative; flex-shrink:0; margin-bottom:4px; }
.chat-btn-emoji{
  width:36px; height:36px; border-radius:8px; background:transparent;
  border:none; cursor:pointer; color:rgba(241,241,242,.55);
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, opacity .15s; padding:0;
}
.chat-btn-emoji:hover{ color:#e9edef; }
.chat-btn-emoji.ativo{ color:#00a884; }
body.tema-claro .chat-btn-emoji{ color:var(--muted2); }
body.tema-claro .chat-btn-emoji:hover{ color:var(--accent); }
body.tema-claro .chat-btn-emoji.ativo{ color:#00a884; }
/* Posição definida via JS (position:fixed) */
.chat-emoji-wrap .wpp-emoji-panel{ /* coords via chatToggleEmoji */ }

/* ── BOTÃO ANEXO + MENU DROPDOWN (estilo WhatsApp) ───────────── */
.chat-anexo-menu-wrap{ position:relative; flex-shrink:0; }

.chat-btn-anexo{
  width:40px; height:40px; border-radius:50%; background:transparent;
  border:none; color:rgba(241,241,242,.6); font-size:17px;
  cursor:pointer; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; transition:.15s;
}
.chat-btn-anexo:hover{ background:rgba(255,255,255,.08); color:#e9edef; }
.chat-btn-anexo.ativo{ color:#00a884; }
body.tema-claro .chat-btn-anexo{ color:var(--muted2); }
body.tema-claro .chat-btn-anexo:hover{ color:var(--accent); background:rgba(0,0,0,.05); }

.chat-anexo-menu{
  position:absolute; bottom:52px; left:0;
  background:#1e2730; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:10px 8px; min-width:200px;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:2px;
  z-index:300;
  animation:slideUpFade .15s ease;
}
body.tema-claro .chat-anexo-menu{
  background:#fff; border:1px solid var(--border);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
@keyframes slideUpFade{
  from{ opacity:0; transform:translateY(8px); }
  to{   opacity:1; transform:translateY(0);   }
}
.chat-anexo-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:10px; border:none; background:none;
  cursor:pointer; color:#e9edef; font-size:13.5px; text-align:left;
  transition:background .12s; font-family:'DM Sans',sans-serif;
}
body.tema-claro .chat-anexo-item{ color:var(--text); }
.chat-anexo-item:hover{ background:rgba(255,255,255,.07); }
body.tema-claro .chat-anexo-item:hover{ background:rgba(0,0,0,.05); }
.chat-anexo-item-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}

/* ── BOTÃO RESPOSTAS RÁPIDAS — removido da barra, acesso via menu + ── */
.chat-btn-rr{ display:none; }

/* ── POPUP DE RESPOSTAS RÁPIDAS ──────────────────────────────── */
.chat-rr-popup{
  position:absolute; bottom:calc(100% + 4px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.35);
  z-index:20; overflow:hidden; max-height:260px; overflow-y:auto;
}
body.tema-claro .chat-rr-popup{ background:#fff; border-color:#d8e8f4; box-shadow:0 4px 20px rgba(0,0,0,.15); }
.chat-rr-item{
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  cursor:pointer; transition:.12s; border-bottom:1px solid var(--border);
}
.chat-rr-item:last-child{ border-bottom:none; }
.chat-rr-item:hover, .chat-rr-item.focado{ background:rgba(var(--primary-rgb),.12); }
body.tema-claro .chat-rr-item:hover, body.tema-claro .chat-rr-item.focado{ background:#eef5ff; }
.chat-rr-atalho{
  font-size:12px; font-weight:700; color:var(--accent); flex-shrink:0;
  background:rgba(var(--primary-rgb),.12); border-radius:4px; padding:1px 6px;
  font-family:'DM Mono',monospace;
}
.chat-rr-titulo{ font-size:13px; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-rr-badge-file{
  font-size:10px; color:var(--muted); background:var(--surface2);
  border-radius:4px; padding:2px 5px; display:flex; align-items:center; gap:3px; flex-shrink:0;
}

/* ── LISTA DE RESPOSTAS RÁPIDAS (modal) ──────────────────────── */
.rr-item-lista{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:7px; background:var(--surface2); transition:.12s;
}
.rr-item-lista:hover{ background:var(--card); }
.rr-item-info{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.rr-item-atalho{
  font-size:11px; font-weight:700; color:var(--accent); flex-shrink:0;
  background:rgba(var(--primary-rgb),.12); border-radius:4px; padding:1px 5px;
  font-family:'DM Mono',monospace;
}
.rr-item-titulo{ font-size:12px; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-item-badge{
  font-size:10px; color:var(--muted); background:var(--surface);
  border-radius:4px; padding:1px 5px; display:flex; align-items:center; gap:2px; flex-shrink:0;
}
.rr-item-acoes{ display:flex; gap:4px; flex-shrink:0; }
.btn-icon-sm{
  width:26px; height:26px; border-radius:5px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.12s;
}
.btn-icon-sm:hover{ color:var(--text); border-color:var(--accent); }
.btn-icon-danger:hover{ color:var(--danger); border-color:var(--danger); }

/* Ações do formulário no modal RR (Cancelar/Salvar) */
.rr-form-actions{
  margin-top:10px;
  margin-left:auto;
  width:min(320px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.rr-form-actions .btn{
  width:100%;
  justify-content:center;
}

/* ── ANÁLISE DE SENTIMENTO ───────────────────────────────────── */
.chat-sentimento-bar{
  display:flex; align-items:center; gap:6px;
  padding:4px 12px 2px;
  font-size:11px; color:var(--muted);
  flex-shrink:0;
}
.chat-sentimento-badge{
  display:inline-flex; align-items:center; gap:4px;
  border-radius:20px; padding:2px 8px; font-size:11px; font-weight:600;
  transition:.3s;
}
.chat-sentimento-badge.positivo{ background:rgba(34,201,122,.12); color:#22c97a; }
.chat-sentimento-badge.negativo{ background:rgba(255,68,85,.12);  color:var(--danger); }
.chat-sentimento-badge.neutro  { background:rgba(74,106,144,.12); color:var(--muted2); }
.chat-sentimento-badge.carregando{ background:var(--surface2); color:var(--muted); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }

/* ── BOTÃO MIC ───────────────────────────────────────────────── */
.chat-btn-mic{
  width:44px; height:44px; border-radius:50%; background:#00a884;
  border:none; color:#fff; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.chat-btn-mic:hover{ background:#017a62; transform:scale(1.05); }
.chat-btn-mic.gravando{ background:#e53935; animation:pulse-mic .8s ease-in-out infinite; }
@keyframes pulse-mic{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ── BARRA DE GRAVAÇÃO ───────────────────────────────────────── */
.chat-rec-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:#202c33; flex-shrink:0;
}
body.tema-claro .chat-rec-bar{ background:#f0f2f5; border-top:1px solid var(--border); }
.chat-rec-dot{
  width:10px; height:10px; border-radius:50%; background:#e53935; flex-shrink:0;
  animation:pulse-mic .8s ease-in-out infinite;
}
.chat-rec-timer{ font-size:14px; font-weight:600; color:#e9edef; flex-shrink:0; min-width:36px; }
body.tema-claro .chat-rec-timer{ color:var(--text); }
.chat-rec-waves{
  flex:1; display:flex; align-items:center; gap:2px; height:32px;
}
.chat-rec-waves span{
  display:inline-block; width:3px; border-radius:3px; background:#00a884;
  height:4px; transition:height .08s;
}
.chat-rec-cancel{
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#e9edef; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0;
}
.chat-rec-cancel:hover{ background:rgba(229,57,53,.2); color:#e53935; }
body.tema-claro .chat-rec-cancel{ background:rgba(0,0,0,.08); color:var(--text); }
.chat-rec-send{
  width:42px; height:42px; border-radius:50%; border:none;
  background:#00a884; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0;
}
.chat-rec-send:hover{ background:#017a62; }
.chat-rec-send:disabled{ opacity:.5; }

/* ── BOTÃO CARREGAR HISTÓRICO WHATSAPP ──────────────────────── */
.chat-btn-historico-wpp{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--surface2); color:var(--muted); font-size:12px;
  cursor:pointer; transition:all .18s;
}
.chat-btn-historico-wpp:hover:not(:disabled){
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.chat-btn-historico-wpp:disabled{
  opacity:.6; cursor:wait;
}

/* ── PREVIEW ANEXO ───────────────────────────────────────────── */
.chat-anexo-preview{
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  background:var(--surface2); border-top:1px solid var(--border);
  font-size:12px; color:var(--text);
}
.chat-anexo-preview-icone{ font-size:18px; flex-shrink:0; }
.chat-anexo-preview-info{ flex:1; min-width:0; }
.chat-anexo-preview-nome{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-anexo-preview-size{ color:var(--muted); font-size:11px; }
.chat-anexo-preview-cancelar{
  background:none; border:none; color:var(--danger); font-size:18px;
  cursor:pointer; padding:2px 6px; border-radius:50%; line-height:1;
}
.chat-anexo-preview-cancelar:hover{ background:rgba(255,68,85,.12); }

/* ── BOTÃO CHAT NO NAV ──────────────────────────────────────── */
.chat-fab{
  position:fixed; bottom:20px; right:20px; z-index:500;
  width:54px; height:54px; border-radius:50%;
  background:var(--success); color:#fff; font-size:22px;
  border:none; cursor:pointer; box-shadow:0 4px 16px rgba(34,201,122,.4);
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.chat-fab:hover{ transform:scale(1.08); }
/* Em desktop o menu lateral já tem o item Mensagens — oculta o FAB */
@media(min-width:768px){ .chat-fab{ display:none !important; } }
.chat-fab-badge{
  position:absolute; top:-2px; right:-2px;
  min-width:18px; height:18px; padding:0 4px; border-radius:20px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg);
}

/* Responsivo desktop — chat em painel lateral */
@media(min-width:768px){
  .chat-overlay{
    position:fixed; inset:auto; right:0; top:0; bottom:0;
    width:min(420px, 100vw); border-left:1px solid var(--border);
    box-shadow:-4px 0 32px rgba(0,0,0,.35);
  }
}

/* ── DESCRIÇÃO DE PÁGINA ── */
.page-desc{
  background:rgba(var(--primary-rgb),.07); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:11px 16px;
  font-size:13px; color:var(--muted); line-height:1.6;
  margin-bottom:20px; min-width:0;
  word-break:break-word; overflow-wrap:anywhere;
}
.page-desc-icon{ font-size:14px; margin-right:7px; vertical-align:text-top; }
body.tema-claro .page-desc{ background:rgba(26,111,212,.07); border-left-color:#1A6FD4; }

/* ── INFO TOOLTIP ── */
.info-tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:var(--muted); color:var(--bg);
  font-size:9px; font-weight:800; font-style:normal;
  cursor:help; position:relative; vertical-align:middle; margin-left:5px;
  flex-shrink:0;
}
/* Abre para baixo e ancora pela direita do (i): evita corte no topo e na borda direita do modal */
.info-tip::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 8px);
  bottom:auto;
  left:auto;
  right:0;
  transform:none;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; font-size:11px; font-weight:400; color:var(--text);
  white-space:normal;
  width:min(320px, calc(100vw - 32px));
  max-height:min(280px, 45vh);
  overflow-y:auto;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  z-index:10060;
  display:none;
  line-height:1.45;
  box-shadow:0 8px 28px rgba(0,0,0,.38);
  pointer-events:none;
  -webkit-overflow-scrolling:touch;
}
.info-tip:hover::after{ display:block; }

/* Tooltip fixo no viewport — evita corte por overflow (ex.: modal com rolagem) */
.go-info-tip-js .info-tip::after{
  display:none !important;
  content:none !important;
}
.go-info-tip-float{
  position:fixed;
  z-index:10060;
  margin:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-size:11px;
  font-weight:400;
  font-style:normal;
  color:var(--text);
  line-height:1.45;
  white-space:normal;
  max-height:min(280px, 45vh);
  overflow-y:auto;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  box-shadow:0 8px 28px rgba(0,0,0,.38);
  pointer-events:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
body.tema-claro .go-info-tip-float{
  box-shadow:0 8px 28px rgba(15,23,42,.18);
}
/* ── SPINNER ── */
.spinner{ display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── RESPONSIVO ── */
@media(max-width:600px){
  .banner-title{ display:none; }
  .banner-nome{ display:none; }
  .login-form-side{ padding:28px 20px; }
  .stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(7px, 2.5vw, 12px); }
  .form-grid{ grid-template-columns:1fr; }
}

/* ── GRAPESJS DARK THEME ── */
.gjs-one-bg{ background:var(--surface)!important; }
.gjs-two-bg{ background:var(--card)!important; }
.gjs-three-bg{ background:var(--bg)!important; }
.gjs-four-color{ color:var(--text)!important; }
.gjs-four-color-h:hover{ color:var(--accent2)!important; }
.gjs-pn-btn.gjs-pn-active,.gjs-pn-btn:hover{ background:rgba(74,159,255,.15)!important; color:var(--accent2)!important; }
.gjs-block{ border-color:var(--border)!important; background:var(--card)!important; color:var(--text)!important; border-radius:8px!important; }
.gjs-block:hover{ border-color:var(--accent)!important; }
.gjs-block-label{ color:var(--muted)!important; font-size:10px!important; }
.gjs-field,.gjs-input,.gjs-select{ background:var(--bg)!important; border-color:var(--border)!important; color:var(--text)!important; border-radius:6px!important; }
.gjs-trt-trait{ border-bottom:1px solid var(--border)!important; }
.gjs-trt-trait__label{ color:var(--muted)!important; font-size:11px!important; text-transform:uppercase!important; letter-spacing:.6px!important; }
.gjs-cv-canvas{ background:var(--bg)!important; }
.gjs-toolbar{ background:var(--brand-lit)!important; }
.gjs-resizer-h{ border-color:var(--accent2)!important; }
.gjs-selected{ outline:2px solid var(--accent2)!important; }
.gjs-sm-sector-title{ background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; }
.gjs-sm-property{ border-color:var(--border)!important; }
.gjs-layer-title{ background:var(--surface)!important; color:var(--text)!important; }
.gjs-layer:hover .gjs-layer-title{ background:rgba(74,159,255,.08)!important; }
/* Hide GrapesJS default panel wrappers (we use our own sidebar) */
.gjs-pn-panels{ display:none!important; }
.gjs-blocks-c{ padding:6px!important; }
.gjs-block-categories{ padding:0!important; }
.gjs-block-category .gjs-title{ padding:8px 10px!important; font-size:10px!important; font-weight:700!important; }
/* Page builder overlay */
#editor-overlay{
  position:fixed; inset:0; z-index:1500;
  background:var(--bg); display:flex; flex-direction:column;
}
#editor-topbar{
  min-height:48px;
  height:auto;
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:4px 5px; padding:6px 8px; flex-shrink:0;
  flex-wrap:wrap;
  overflow-x:hidden;
  max-width:100%;
}
#editor-topbar .btn-sm{
  padding:5px 7px !important;
  font-size:10px !important;
  line-height:1.2;
}
#editor-topbar .ed-title{
  font-size:12px; font-weight:700; color:var(--text); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#editor-topbar .ed-sep{
  width:1px; height:18px; background:var(--border); flex-shrink:0; margin:0 1px;
}
/* Editor body = sidebar + canvas */
#editor-body{ flex:1; display:flex; min-height:0; overflow:hidden; }
/* Sidebar */
#editor-sidebar{
  width:260px; flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
#editor-sidebar-tabs{
  display:flex; padding:8px; gap:4px; flex-shrink:0;
  border-bottom:1px solid var(--border); background:var(--surface);
}
.ed-tab-btn{
  flex:1; padding:4px 1px; font-size:9px; font-weight:700;
  border:1.5px solid var(--border); background:transparent;
  color:var(--muted); border-radius:6px; cursor:pointer; transition:all .14s;
  white-space:nowrap; line-height:1.3;
}
.ed-tab-btn.ativo{
  background:rgba(var(--primary-rgb),.1); border-color:var(--accent); color:var(--accent2);
}
.ed-tab-btn:hover:not(.ativo){ border-color:var(--muted2); color:var(--text); }
.ed-panel-pane{ flex:1; overflow-y:auto; min-height:0; }
/* Canvas */
#gjs-container{ flex:1; min-height:0; }
/* Blocos sistema (placeholders no editor) */
.sys-block-wrap{
  background:rgba(var(--primary-rgb),.12);
  border:2px dashed var(--accent); border-radius:10px; padding:16px 14px;
  font-family:'DM Sans',sans-serif; user-select:none; pointer-events:none;
}
.sys-block-wrap .sb-icon{ font-size:28px; margin-bottom:6px; }
.sys-block-wrap .sb-titulo{ font-size:13px; font-weight:700; color:var(--accent2); margin-bottom:4px; }
.sys-block-wrap .sb-desc{ font-size:11px; color:var(--muted2); }
/* Page manager cards */
.page-card{
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:18px 16px; display:flex; flex-direction:column; gap:8px;
  transition:.2s; cursor:default;
}
.page-card:hover{ border-color:var(--accent); }
.page-card-nome{ font-size:14px; font-weight:700; color:var(--text); }
.page-card-desc{ font-size:12px; color:var(--muted); min-height:16px; }
.page-card-meta{ font-size:11px; color:var(--muted2); }
.page-card-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.page-card-actions .btn{
  height:34px;
  line-height:1;
  align-items:center;
}
.page-card-actions .btn.btn-sm{
  padding:0 12px; /* altura fixa acima controla o tamanho */
}
.page-card-actions .btn svg{
  width:14px;
  height:14px;
  display:block;
  flex-shrink:0;
}
/* ── META DETAIL DRAWER ── */
.meta-drawer-overlay{
  position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.meta-drawer-overlay.aberto{ opacity:1;pointer-events:all; }
.meta-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);
  background:var(--surface);border-left:1px solid var(--border);
  z-index:901;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.meta-drawer.aberto{ transform:translateX(0); }
.meta-drawer-head{
  padding:20px 22px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;gap:10px;flex-shrink:0;
}
.meta-drawer-head-info{ flex:1;min-width:0; }
.meta-drawer-titulo{ font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px; }
.meta-drawer-close{
  width:32px;height:32px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted2);font-size:20px;border-radius:6px;flex-shrink:0;
  transition:.15s;
}
.meta-drawer-close:hover{ color:var(--text);background:rgba(255,255,255,.08); }
body.tema-claro .meta-drawer-close:hover{ background:rgba(0,0,0,.07); }
.meta-drawer-body{ flex:1;overflow-y:auto;padding:20px 22px; }
.meta-drawer-section{ margin-bottom:22px; }
.meta-drawer-section-title{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.meta-drawer-section-title::after{ content:'';flex:1;height:1px;background:var(--border); }
.meta-drawer-info-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;
}
.meta-drawer-info-item{
  background:var(--bg);border-radius:8px;padding:10px 12px;
}
.meta-drawer-info-label{ font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em; }
.meta-drawer-info-val{ font-size:13px;font-weight:700;margin-top:3px; }
.meta-drawer-progress-wrap{ margin-bottom:16px; }
.meta-drawer-progress-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;margin-bottom:6px;
}
.meta-drawer-progress-bg{
  height:10px;background:var(--bg);border-radius:6px;overflow:hidden;
}
.meta-drawer-progress-fill{
  height:100%;border-radius:6px;transition:width .6s ease;
}
.meta-drawer-chart-wrap{
  position:relative;height:160px;
}
.meta-lan-form{
  background:var(--bg);border-radius:10px;padding:14px 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.meta-lan-form .form-field{ margin:0; }
.meta-lan-form .form-field label{ font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; }
.meta-lan-form input, .meta-lan-form textarea{
  width:100%;padding:8px 10px;border-radius:7px;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--text);font-size:13px;
}
.meta-lan-form select{
  width:100%;
  padding:8px 32px 8px 10px;
  border-radius:7px;
  background-color:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text);
  font-size:13px;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:16px;
}
body.tema-claro .meta-lan-form select{
  background-color:#fff;
  border-color:#C0D4EC;
  color:#0D2B5E;
}
.meta-lan-form textarea{ resize:none; }
.meta-lan-rec-list{ display:flex;flex-direction:column;gap:6px; }
.meta-lan-rec-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;background:var(--bg);border-radius:8px;font-size:12px;
}
.meta-lan-rec-val{ font-weight:700;color:var(--accent); }
.meta-lan-rec-meta{ color:var(--muted);font-size:11px; }
/* ── Meta drawer — Detalhes strip redesign ─────────────── */
.mdr-info-strip{
  background:var(--bg);border-radius:10px;overflow:hidden;
  border:1px solid var(--border);
}
.mdr-info-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--border);
}
.mdr-info-row:last-child{ border-bottom:none; }
.mdr-info-icon{
  flex-shrink:0;width:22px;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
}
.mdr-info-icon svg{ display:block; }
.mdr-info-lbl{ color:var(--muted);font-size:12px;flex:1; }
.mdr-info-val{ font-weight:600;font-size:13px;text-align:right; }
/* ── Coleta lock notice ─────────────────────────────────── */
.mdr-lan-lock{
  grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px;border-radius:8px;font-size:12px;line-height:1.5;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);
  color:#b45309;
}
body.tema-claro .mdr-lan-lock{ color:#92400e; }
.mdr-lan-lock-icon{
  flex-shrink:0;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
}
.mdr-lan-lock-icon svg{ display:block; }
/* ── Single-user chip (colaborador implícito) ───────────── */
.mdr-user-chip{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:7px;
  background:rgba(var(--primary-rgb),.08);border:1.5px solid rgba(var(--primary-rgb),.2);
  font-size:13px;font-weight:600;color:var(--accent2);
}/* ── Pausas por colaborador ─────────────────────────────── */
.pausa-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  transition:.15s;
}
.pausa-row:hover{ border-color:var(--accent); }
.pausa-row[data-pausado="1"]{
  background:rgba(255,68,85,.05);border-color:rgba(255,68,85,.25);
  opacity:.85;
}
.pausa-nome{ flex:1;font-size:13px;font-weight:500; }
.pausa-badge-ativo{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:rgba(34,197,94,.12);color:var(--success);border:1px solid rgba(34,197,94,.25);
  white-space:nowrap;
}
.pausa-badge-pausado{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:rgba(255,68,85,.12);color:var(--danger);border:1px solid rgba(255,68,85,.25);
  white-space:nowrap;
}
.pausa-toggle-btn{
  padding:4px 12px;border-radius:7px;font-size:11px;font-weight:700;
  cursor:pointer;border:1.5px solid var(--border);background:var(--surface);
  color:var(--muted);transition:.15s;white-space:nowrap;
}
.pausa-toggle-btn:hover{ border-color:var(--accent);color:var(--accent2); }
.pausa-toggle-btn.pausar:hover{ border-color:var(--danger);color:var(--danger); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE EXTRA — breakpoints finos
   ══════════════════════════════════════════════════════════════ */

/* ── WhatsApp: linhas de lista/botão de resposta interativa ── */
.wpp-lista-item-row{
  display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px;
}
.wpp-lista-item-row .wli-id   { width:90px; flex-shrink:0; }
.wpp-lista-item-row .wli-title{ flex:2; min-width:100px; }
.wpp-lista-item-row .wli-desc { flex:2; min-width:100px; }
.wpp-lista-item-row .wli-del  { width:28px; flex-shrink:0; }
.wpp-botao-item-row{
  display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px;
}
.wpp-botao-item-row .wbi-id   { width:90px; flex-shrink:0; }
.wpp-botao-item-row .wbi-title{ flex:1; min-width:100px; }
.wpp-botao-item-row .wbi-del  { width:28px; flex-shrink:0; }

/* ── Ultra-mobile < 400px (iPhone SE 1ª gen, Galaxy S5) ───── */
@media(max-width:400px){
  /* Cards 1 coluna forçado */
  .cards-grid{ grid-template-columns:1fr !important; }
  .stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; }
  .stat{ padding:10px 10px; }
  .stat-val{ font-size:clamp(20px, 6.5vw, 30px); }
  /* Tabela fontes menores */
  .admin-table th, .admin-table td{ padding:5px 6px; font-size:10px; }
  .table-wrap thead th,
  .table-wrap td,
  .table-wrap tbody th{ padding:5px 6px; font-size:10px; }
  .rank-table th,
  .rank-table td{ padding:4px 5px; font-size:9.5px; }
  /* Calendário células bem pequenas */
  .cal-cell{ min-height:30px; }
  .cal-event{ display:none; }      /* Esconde eventos em telas muito pequenas */
  .cal-cell-num{ font-size:9px; margin-bottom:0; }
  /* Topbar */
  .topbar-title{ font-size:13px; }
  .hero-title{ font-size:16px; }
  /* WPP lista/botão rows: ID ocupa linha inteira */
  .wpp-lista-item-row .wli-id,
  .wpp-botao-item-row .wbi-id  { width:100%; flex-basis:100%; }
  .wpp-lista-item-row .wli-desc{ flex-basis:100%; min-width:0; }
  /* Botões de ação */
  .card-actions{ flex-direction:column; }
  .card-actions .btn{ width:100%; max-width:420px; margin-inline:auto; justify-content:center; }
  /* Metas → Notificações: cartões de regra mantêm 1 linha */
  .regra-card > .card-actions{
    flex-direction:row !important;
    align-items:stretch;
  }
  .regra-card > .card-actions .regra-btn{
    width:auto !important;
    max-width:none !important;
    margin-inline:0 !important;
  }
  /* Permissões 1 coluna */
  .perm-grid{ grid-template-columns:1fr; }
  /* Modal menor padding */
  .modal{ margin:8px; width:calc(100% - 16px) !important; padding:14px; }
  /* Filtro bar */
  .filtro-bar{ padding:8px; }
}

/* ── Início: grid de atividade recente ───────────────────── */
@media(max-width:600px){
  /* Atividade recente no início: 2 colunas → 1 coluna */
  #painel-atividade-grid{ grid-template-columns:minmax(0, 1fr) !important; }
  /* Adesão: destaques */
  #ades-destaques{ grid-template-columns:1fr !important; }
  /* Histórico: destaques */
  #hist-destaques{ grid-template-columns:1fr !important; }
  /* Calendário cells */
  .cal-cell{ min-height:50px; }
  /* Modal footer */
  .modal-footer{ flex-direction:column-reverse; gap:8px; }
  .modal-footer .btn{ width:100%; max-width:420px; margin-inline:auto; justify-content:center; }
  /* Meta drawer lançamento: 1 col */
  .meta-lan-form{ grid-template-columns:1fr; }
  /* Envio feed */
  .envio-item{ grid-template-columns:auto 1fr; }
  /* Filtros: coluna única */
  .filtro-bar{ flex-direction:column; align-items:stretch; }
  .filtro-field{ min-width:0; width:100%; }
  .filtro-actions{ margin-left:0; width:100%; }
}

/* ── BUSCA GLOBAL ────────────────────────────────────────────── */
.topbar-busca-btn{
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.12s; flex-shrink:0;
}
.topbar-busca-btn:hover{ color:var(--accent); border-color:var(--accent); }
body.tema-claro .topbar-busca-btn{ background:#f0f6ff; border-color:#d0e4f4; }

.busca-global-box{
  width:100%; max-width:520px;
  max-height:min(520px, 86vh);
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  overflow:hidden; display:flex; flex-direction:column;
}
body.tema-claro .busca-global-box{ background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.2); }

.busca-global-header{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.busca-global-filtros{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:6px 10px 8px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.06);
}
body.tema-claro .busca-global-filtros{ background:rgba(0,0,0,.028); }
.busca-filtros-lbl{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  flex-shrink:0;
}
.busca-filtros-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
  flex:1;
  align-items:center;
}
.busca-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--muted2);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
  transition:background .12s, border-color .12s, color .12s;
}
.busca-chip svg{ flex-shrink:0; opacity:.88; vertical-align:middle; }
.busca-chip:hover{
  border-color:rgba(var(--primary-rgb),.38);
  color:var(--text);
}
.busca-chip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.busca-chip.ativo{
  border-color:rgba(var(--primary-rgb),.5);
  background:rgba(var(--primary-rgb),.2);
  color:var(--accent2);
}
body.tema-claro .busca-chip.ativo{
  background:rgba(var(--primary-rgb),.11);
  border-color:rgba(var(--primary-rgb),.35);
  color:var(--accent);
}
.busca-global-inp{
  flex:1; background:transparent; border:none; outline:none;
  font-size:15px; color:var(--text); font-family:'DM Sans',sans-serif;
}
.busca-global-inp::placeholder{ color:var(--muted); }
.busca-esc-hint{
  font-size:10px; color:var(--muted); border:1px solid var(--border);
  border-radius:4px; padding:2px 5px; font-family:monospace; flex-shrink:0;
}

.busca-global-results{
  flex:1;
  min-height:0;
  max-height:min(240px, 36vh);
  overflow-y:auto;
}
.busca-item{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  cursor:pointer; transition:.1s; border-bottom:1px solid rgba(255,255,255,.04);
}
.busca-item:last-child{ border-bottom:none; }
.busca-item:hover, .busca-item.ativo{ background:rgba(var(--primary-rgb),.1); }
body.tema-claro .busca-item:hover, body.tema-claro .busca-item.ativo{ background:#eef5ff; }
.busca-item-icon{ font-size:18px; flex-shrink:0; width:28px; text-align:center; }
.busca-item-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.busca-item-titulo{ font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.busca-item-sub{ font-size:11px; color:var(--muted); }
.busca-loading, .busca-vazio{ padding:20px 16px; text-align:center; font-size:13px; color:var(--muted); }

.busca-global-footer{
  display:flex; align-items:center; gap:14px;
  padding:8px 16px; border-top:1px solid var(--border);
  font-size:10px; color:var(--muted);
}

/* ── 2FA ────────────────────────────────────────────────────── */
/* (modal uses existing .modal-overlay and .form-input styles — no extra CSS needed) */

/* ── DEPENDÊNCIA ENTRE TAREFAS ───────────────────────────────── */
.tarefa-dep-badge{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; color:var(--accent); background:rgba(var(--primary-rgb),.1);
  border-radius:4px; padding:2px 7px; margin-left:6px; font-weight:600;
}
body.tema-claro .tarefa-dep-badge{ color:var(--accent); background:#e8f0fc; }

/* ── WIDGETS PERSONALIZÁVEIS ─────────────────────────────────── */
.widget-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px; background:var(--surface2);
  cursor:pointer; transition:.12s; gap:10px;
}
.widget-toggle-row:hover{ background:var(--card); }
.widget-toggle-info{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.widget-toggle-icon{ font-size:20px; flex-shrink:0; }
.widget-toggle-nome{ font-size:13px; font-weight:600; color:var(--text); }
.widget-toggle-sub{ font-size:11px; color:var(--muted); }
.widget-chk{
  width:36px; height:20px; cursor:pointer; flex-shrink:0;
  accent-color:var(--accent);
}

/* ── CHANGELOG ───────────────────────────────────────────────── */
.changelog-version{ display:flex; flex-direction:column; gap:8px; }
.changelog-ver-label{
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:2px;
}
.changelog-items{ display:flex; flex-direction:column; gap:6px; }
.changelog-item{
  font-size:13px; color:var(--text); line-height:1.5;
  padding:6px 10px; border-radius:6px; background:var(--surface2);
}
.changelog-item.new{ border-left:3px solid var(--accent); }
.changelog-item.fix{ border-left:3px solid var(--muted); }
.changelog-tag{
  display:inline-block; font-size:10px; font-weight:700;
  background:var(--accent); color:#fff; border-radius:4px;
  padding:1px 6px; margin-right:5px; vertical-align:middle;
}
.changelog-tag.tag-fix{ background:var(--surface); color:var(--muted); border:1px solid var(--border); }
.changelog-item code{ background:var(--surface); padding:1px 5px; border-radius:3px; font-size:12px; }
.changelog-item kbd{
  background:var(--surface); border:1px solid var(--border);
  border-radius:4px; padding:1px 5px; font-size:11px; font-family:monospace;
}

/* ── NOTIFICAÇÕES — melhorias ────────────────────────────────── */
/* Badge SSE status */
.notif-sse-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--success); margin-right:4px; vertical-align:middle;
  animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}

/* Ver mais button */
#notif-ver-mais-btn .btn{ min-width:160px; }

/* Snooze button hover */
.notif-row .btn[title*="Soneca"]:hover{
  background:var(--yellow); color:#000; border-color:var(--yellow);
}

/* ══════════════════════════════════════════════════════════════
   MÓDULO COMERCIAL
   ══════════════════════════════════════════════════════════════ */

/* ── Cabeçalho do painel ──────────────────────────────────────── */
#com-sync-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--muted); padding:4px 10px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:20px; white-space:nowrap;
}
#com-sync-badge svg{ width:13px; height:13px; }

/* ── Abas internas ────────────────────────────────────────────── */
/* Mesmo ritmo visual das sub-abas Tarefas / Metas (13px, semibold, sem “apagar” com opacity). */
.com-tabs{
  display:flex; gap:0; border-bottom:2px solid var(--border);
  padding:0; margin:16px 0 18px; overflow-x:auto;
  scrollbar-width:none;
}
.com-tabs::-webkit-scrollbar{ display:none; }
.com-tab{
  padding:8px 18px; font-size:13px; font-weight:600;
  color:var(--muted);
  background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-2px;
  cursor:pointer; white-space:nowrap;
  transition:color .15s, border-color .15s;
  -webkit-font-smoothing:antialiased;
}
.com-tab:hover{ color:var(--text); }
.com-tab.active{
  color:var(--text);
  border-bottom-color:var(--accent);
}
/* ERP tem muitas abas — padding menor para todas caberem */
#com-tabs-erp .com-tab{ padding:8px 12px; font-size:12px; }

@media(max-width:640px){
  .com-tab{ padding:8px 14px; font-size:13px; }
  .com-tabs{ gap:0; }
}

@media(max-width:640px){
  /* Evita “embolado”: deixa abas sempre em uma linha e roláveis */
  #panel-comercial .com-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-top:10px;
  }
  #panel-comercial .com-tab{
    flex:0 0 auto;
  }

  /* Toggle CRM/ERP ocupa a linha inteira quando necessário */
  #panel-comercial #com-mode-topbar{
    gap:8px;
  }
  #panel-comercial #com-mode-toggle{
    width:100%;
    justify-content:space-between;
  }
  #panel-comercial .com-mode-btn{
    flex:1 1 0;
    justify-content:center;
  }
}

/* ── Carteira: filtros (select usa seta SVG global — padding-right não pode ser “apagado” por shorthand) ── */
.com-carteira-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-bottom:14px;
  align-items:flex-end;
}
.com-carteira-filtros .com-fil-label{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  display:block;
  margin-bottom:4px;
}
.com-carteira-filtros .com-fil-field{
  display:flex;
  flex-direction:column;
  flex:0 1 auto;
  min-width:min(100%, 8.5rem);
}
.com-carteira-filtros .com-fil-field--grow{
  flex:1 1 160px;
  min-width:min(100%, 160px);
}
/* Textos longos nas opções (ex.: Inadimplente, Em risco) */
.com-carteira-filtros .com-fil-field--sit,
.com-carteira-filtros .com-fil-field--fin,
.com-carteira-filtros .com-fil-field--mun{
  min-width:min(100%, 11rem);
}
.com-carteira-filtros .com-fil-field--dias{
  min-width:min(100%, 220px);
}
.com-carteira-filtros select.form-input{
  font-size:12px;
  line-height:1.25;
  min-height:34px;
  box-sizing:border-box;
  /* Não usar padding: 6px 10px — sobrescreve padding-right da seta e embola texto + ícone */
  padding-top:6px;
  padding-bottom:6px;
  padding-left:10px;
  padding-right:2.5rem;
}
.com-carteira-filtros input.form-input[type="text"],
.com-carteira-filtros input.form-input[type="number"]{
  font-size:12px;
  min-height:34px;
  box-sizing:border-box;
  padding:6px 10px;
}
.com-carteira-filtros .com-fil-dias-row{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.com-carteira-filtros .com-fil-dias-row input.form-input{
  width:92px;
  flex:0 0 auto;
}
.com-carteira-filtros .com-fil-dias-sep{
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
}
.com-carteira-filtros .com-fil-clear{
  flex:0 0 auto;
  align-self:flex-end;
  margin-bottom:1px;
}

/* ── Visão geral: conversão funil (abas) vs previsibilidade ─── */
.com-conv-funil-head{
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 12px 14px;
  background:var(--surface2);
}
.com-conv-funil-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.com-conv-funil-tab{
  flex:0 1 auto;
  padding:5px 11px;
  font-size:11px;
  font-weight:600;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
  transition:color .12s, border-color .12s, background .12s;
}
.com-conv-funil-tab:hover{
  color:var(--text);
  border-color:rgba(var(--primary-rgb),.35);
}
.com-conv-funil-tab.active{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(var(--primary-rgb),.08);
  font-weight:800;
}
.com-conv-funil-panel{
  min-height:4rem;
}
.com-conv-prev-wrap{
  margin-top:16px;
  padding-top:16px;
  border-top:2px solid var(--border);
}
.com-conv-prev-title{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

/* O topo do app já mostra "Comercial" — evita repetição (todas as telas) */
#panel-comercial .panel-title{
  display:none;
}

/* ── Seções ────────────────────────────────────────────────────── */
.com-section{ display:none; }
.com-section.active{ display:block; }
.cob-section{ display:none; }
.cob-section.active{ display:block; }
.log-section{ display:none; }
.log-section.active{ display:block; }
/* ── Disparo Cobrança v2 ─────────────────────────────────────────── */
.cob-disp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:960px){ .cob-disp-grid{ grid-template-columns:1fr; } }

.cob-disp-card{
  border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; background:var(--card);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.cob-disp-card-title{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:7px;
  margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.cob-disp-card-title svg{ opacity:.7; }

/* Status badge */
.cob-disp-status{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:20px; font-size:12px; font-weight:700;
}
.cob-disp-status--rodando{
  background:rgba(34,197,94,.15); color:#4ade80;
  box-shadow:0 0 0 1px rgba(34,197,94,.3);
}
.cob-disp-status--rodando::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:#4ade80; flex-shrink:0;
  animation:cob-pulse 1.4s ease-in-out infinite;
}
.cob-disp-status--pausado{
  background:rgba(245,158,11,.15); color:#fbbf24;
  box-shadow:0 0 0 1px rgba(245,158,11,.3);
}
.cob-disp-status--pausado::before{
  content:'⏸'; font-size:10px;
}
.cob-disp-status--parado{
  background:rgba(148,163,184,.1); color:var(--muted);
  box-shadow:0 0 0 1px rgba(148,163,184,.2);
}
.cob-disp-status--parado::before{ content:'○'; }
@keyframes cob-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); }
  50%{ box-shadow:0 0 0 5px rgba(74,222,128,0); }
}

/* Config field groups */
.cob-disp-field-group{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
.cob-disp-field{
  display:flex; flex-direction:column; gap:4px;
}
.cob-disp-field label{
  font-size:10px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:5px;
}
.cob-disp-field label svg{ opacity:.6; }
.cob-disp-field input{
  height:34px; font-size:13px;
}
.cob-disp-field-full{ grid-column:1/-1; }

.cob-disp-janela-row{
  display:flex; align-items:center; gap:8px;
}
.cob-disp-janela-row input{ flex:1; height:34px; }
.cob-disp-janela-sep{ font-size:12px; color:var(--muted); flex-shrink:0; }

/* Variáveis chips */
.cob-disp-vars{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:10px 12px; background:rgba(0,0,0,.15);
  border-radius:8px; margin-bottom:14px;
}
.cob-disp-var-chip{
  font-size:10px; font-family:monospace; font-weight:600;
  padding:2px 7px; border-radius:5px;
  background:rgba(99,102,241,.2); color:#a5b4fc;
  border:1px solid rgba(99,102,241,.25);
}

/* Faixas */
.cob-disp-faixa{
  border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-bottom:8px;
  border-left-width:3px;
  transition:background .15s;
}
.cob-disp-faixa:hover{ background:rgba(255,255,255,.03); }
.cob-disp-faixa[data-faixa="1-30"]   { border-left-color:#4ade80; }
.cob-disp-faixa[data-faixa="31-60"]  { border-left-color:#a3e635; }
.cob-disp-faixa[data-faixa="61-90"]  { border-left-color:#facc15; }
.cob-disp-faixa[data-faixa="91-120"] { border-left-color:#fb923c; }
.cob-disp-faixa[data-faixa="121-150"]{ border-left-color:#f87171; }
.cob-disp-faixa[data-faixa="151-180"]{ border-left-color:#ef4444; }
.cob-disp-faixa[data-faixa="181+"]   { border-left-color:#dc2626; }
.cob-disp-faixa-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
}
.cob-disp-faixa-label{
  font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;
}
.cob-disp-faixa-badge{
  font-size:9px; padding:1px 6px; border-radius:4px;
  font-weight:700; letter-spacing:.04em;
}
.cob-disp-faixa-ativo-label{
  font-size:10px; color:var(--muted); display:flex; align-items:center; gap:5px; cursor:pointer;
}
.cob-disp-faixa textarea{
  font-size:12px; resize:vertical; min-height:52px; width:100%; box-sizing:border-box;
}
.cob-disp-faixa-msg{ margin-bottom:6px; }

/* Preview WhatsApp bubble */
.cob-disp-preview-wrap{
  background:rgba(0,0,0,.2); border-radius:12px;
  padding:16px; min-height:90px;
  background-image:url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' opacity='.03'%3E%3Ccircle fill='%23fff' cx='26' cy='13' r='13'/%3E%3C/g%3E%3C/svg%3E");
}
.cob-disp-bubble{
  display:inline-block; max-width:90%;
  background:#075e54; border-radius:12px 12px 12px 2px;
  padding:10px 14px; font-size:13px; line-height:1.55;
  color:#e8f5e9; white-space:pre-wrap; box-shadow:0 1px 3px rgba(0,0,0,.35);
  position:relative;
}
.cob-disp-bubble::after{
  content:''; position:absolute; left:-7px; bottom:0;
  border-style:solid; border-width:0 8px 8px 0;
  border-color:transparent #075e54 transparent transparent;
}
.cob-disp-bubble-time{
  font-size:10px; color:rgba(232,245,233,.55); text-align:right; margin-top:4px;
}
.cob-disp-preview-empty{
  color:var(--muted); font-size:12px; text-align:center;
  padding:20px 0; font-style:italic;
}

/* Stats chips */
.cob-disp-stats{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;
}
.cob-disp-stat{
  display:flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px; font-size:11px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
}
.cob-disp-stat-val{ font-weight:700; }
.cob-disp-stat--accent .cob-disp-stat-val{ color:var(--accent); }
.cob-disp-stat--ok .cob-disp-stat-val{ color:#4ade80; }
.cob-disp-stat--warn .cob-disp-stat-val{ color:#fbbf24; }

/* Destinatários table */
.cob-disp-dest-wrap{
  max-height:300px; overflow:auto;
  border:1px solid var(--border); border-radius:10px;
}
.cob-disp-dest-table{ width:100%; border-collapse:collapse; font-size:12px; }
.cob-disp-dest-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--card); padding:8px 10px;
  font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  border-bottom:1px solid var(--border); text-align:left;
}
.cob-disp-dest-table td{
  padding:8px 10px; border-bottom:1px solid var(--border); text-align:left;
}
.cob-disp-dest-table tbody tr:hover td{ background:rgba(255,255,255,.04); }
.cob-disp-dest-table tbody tr:last-child td{ border-bottom:none; }

.cob-disp-faixa-chip{
  display:inline-block; font-size:10px; padding:2px 7px; border-radius:5px;
  font-weight:700; line-height:1.4;
}
.cob-disp-faixa-chip--1-30   { background:rgba(74,222,128,.15);  color:#4ade80; }
.cob-disp-faixa-chip--31-60  { background:rgba(163,230,53,.15);  color:#a3e635; }
.cob-disp-faixa-chip--61-90  { background:rgba(250,204,21,.15);  color:#facc15; }
.cob-disp-faixa-chip--91-120 { background:rgba(251,146,60,.15);  color:#fb923c; }
.cob-disp-faixa-chip--121-150{ background:rgba(248,113,113,.15); color:#f87171; }
.cob-disp-faixa-chip--151-180{ background:rgba(239,68,68,.15);   color:#ef4444; }
.cob-disp-faixa-chip--181\+  { background:rgba(220,38,38,.15);   color:#dc2626; }

/* Action toolbar */
.cob-disp-toolbar{
  display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center;
  padding:12px 14px; background:rgba(0,0,0,.15); border-radius:10px;
  border:1px solid var(--border);
}
.cob-disp-toolbar-hint{
  font-size:11px; color:var(--muted); margin-left:4px;
  display:flex; align-items:center; gap:5px;
}
.btn-cob-iniciar{
  background:#16a34a;
  color:#fff; border:none; padding:7px 16px; border-radius:8px;
  font-size:13px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 2px 8px rgba(22,163,74,.35);
  transition:opacity .15s;
}
.btn-cob-iniciar:hover{ opacity:.88; }
.btn-cob-pausar{
  background:rgba(245,158,11,.12); color:#fbbf24;
  border:1px solid rgba(245,158,11,.3); padding:6px 14px;
  border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:background .15s;
}
.btn-cob-pausar:hover{ background:rgba(245,158,11,.2); }
.btn-cob-parar{
  background:rgba(239,68,68,.1); color:#f87171;
  border:1px solid rgba(239,68,68,.25); padding:6px 14px;
  border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:background .15s;
}
.btn-cob-parar:hover{ background:rgba(239,68,68,.2); }

/* Log entries */
.cob-disp-log-wrap{
  max-height:160px; overflow:auto;
  font-size:11px; display:flex; flex-direction:column; gap:2px;
}
.cob-disp-log-entry{
  display:grid; grid-template-columns:auto 1fr; gap:8px;
  align-items:baseline; padding:5px 8px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
}
.cob-disp-log-time{ color:var(--muted); white-space:nowrap; font-size:10px; }
.cob-disp-log-msg{ color:var(--text); }

/* ── Disparo de cobrança v3 — UI wizard ──────────────────────────── */
.cob-disp-alerta{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; font-size:12px; margin-bottom:12px; }
.cob-disp-alerta--info{ background:rgba(var(--primary-rgb),.1); border:1px solid rgba(var(--primary-rgb),.25); color:var(--accent); }
.cob-disp-alerta--warn{ background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#fbbf24; }

.cob-disp-header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.cob-disp-header-icon{ width:42px; height:42px; border-radius:12px; background:rgba(37,211,102,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Steps */
.cob-disp-steps{ display:flex; align-items:center; gap:0; margin-bottom:20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 16px; }
.cob-disp-step{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 8px; border-radius:8px; transition:background .15s; flex-shrink:0; }
.cob-disp-step:hover{ background:rgba(255,255,255,.05); }
.cob-disp-step-num{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--border); color:var(--muted); flex-shrink:0; transition:background .2s,color .2s; }
.cob-disp-step.is-current .cob-disp-step-num{ background:var(--accent); color:#fff; }
.cob-disp-step.is-done .cob-disp-step-num{ background:#4ade80; color:#0a1a0a; }
.cob-disp-step-lbl{ font-size:12px; font-weight:600; color:var(--muted); transition:color .2s; }
.cob-disp-step.is-current .cob-disp-step-lbl{ color:var(--text); }
.cob-disp-step.is-done .cob-disp-step-lbl{ color:#4ade80; }
.cob-disp-step-sep{ flex:1; height:1px; background:var(--border); margin:0 8px; min-width:16px; }
@media(max-width:600px){ .cob-disp-step-lbl{ display:none; } .cob-disp-step-sep{ min-width:8px; } }

/* Panes */
.cob-disp-pane{ display:none; }
.cob-disp-pane.is-visible{ display:block; }

/* Section title */
.cob-disp-section-title{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:5px; }
.cob-disp-section-title svg{ opacity:.7; }

/* Dias */
.cob-disp-dias-wrap{ display:flex; gap:6px; flex-wrap:wrap; }
.cob-disp-dia-btn{ height:36px; min-width:48px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.cob-disp-dia-btn.is-on{ background:rgba(var(--primary-rgb),.15); border-color:var(--accent); color:var(--accent); }

/* Velocidade */
.cob-disp-vel-wrap{ display:flex; gap:10px; flex-wrap:wrap; }
.cob-disp-vel-card{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 18px; border-radius:10px; border:2px solid var(--border); background:var(--surface); cursor:pointer; transition:all .15s; min-width:100px; flex:1; }
.cob-disp-vel-card input[type=radio]{ display:none; }
.cob-disp-vel-card.is-on{ border-color:var(--accent); background:rgba(var(--primary-rgb),.08); }
.cob-disp-vel-ico{ font-size:22px; }
.cob-disp-vel-lbl{ font-size:13px; font-weight:700; color:var(--text); }
.cob-disp-vel-sub{ font-size:11px; color:var(--muted); }

/* Reforço */
.cob-disp-reforco-wrap{ display:flex; gap:8px; flex-wrap:wrap; }
.cob-disp-reforco-opt{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); transition:all .15s; }
.cob-disp-reforco-opt input[type=radio]{ display:none; }
.cob-disp-reforco-opt.is-on{ border-color:var(--accent); color:var(--accent); background:rgba(var(--primary-rgb),.08); }

/* Toggle label */
.cob-disp-toggle-label{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text); user-select:none; }
.cob-disp-toggle-label input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }

/* Pane actions */
.cob-disp-pane-actions{ margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }

/* Faixa tabs */
.cob-disp-faixa-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.cob-disp-faixa-tab{ position:relative; padding:7px 14px; border-radius:8px; border:2px solid var(--border); background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px; }
.cob-disp-faixa-tab::before{ content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:0 3px 3px 0; background:var(--faixa-cor,var(--muted)); opacity:0; transition:opacity .15s; }
.cob-disp-faixa-tab.is-active{ border-color:var(--faixa-cor,var(--accent)); color:var(--text); background:var(--card); }
.cob-disp-faixa-tab.is-active::before{ opacity:1; }
.cob-disp-faixa-tab.is-off{ opacity:.45; }
.cob-disp-tab-dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; flex-shrink:0; }
.cob-disp-tab-img{ font-size:12px; }

/* Faixa editor */
.cob-disp-faixa-editor{ border:1.5px solid var(--border); border-radius:12px; padding:16px 18px; }

/* Templates */
.cob-disp-template-row{ display:flex; gap:6px; flex-wrap:wrap; }
.cob-disp-tpl-btn{ padding:6px 14px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.cob-disp-tpl-btn:hover{ border-color:var(--accent); background:rgba(var(--primary-rgb),.08); }
.cob-disp-tpl-btn--clear{ color:var(--muted); }
.cob-disp-tpl-btn--clear:hover{ border-color:#f87171; color:#f87171; background:rgba(248,113,113,.08); }

/* Canvas editor */
.cob-disp-canvas-editor{ border:1.5px solid var(--border); border-radius:10px; padding:14px; background:var(--bg); }
.cob-cv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cob-cv-label{ font-size:11px; font-weight:600; color:var(--muted); display:block; margin-bottom:4px; }

/* Launch bar */
.cob-disp-launch-bar{ margin-top:16px; padding:14px 16px; border-radius:10px; background:rgba(37,211,102,.06); border:1.5px solid rgba(37,211,102,.15); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }

/* ── Disparo para Vendedores ─────────────────────────────────────── */
/* Opções de anexo */
.cob-vend-anexo-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:4px; }
@media(max-width:860px){ .cob-vend-anexo-wrap{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .cob-vend-anexo-wrap{ grid-template-columns:1fr; } }
.cob-vend-anexo-opt{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 10px; border-radius:12px; border:2px solid var(--border); background:var(--surface); cursor:pointer; transition:all .15s; text-align:center; }
.cob-vend-anexo-opt input[type=radio]{ display:none; }
.cob-vend-anexo-opt.is-on{ border-color:var(--accent); background:rgba(var(--primary-rgb),.08); }
.cob-vend-anexo-ico{ color:var(--muted); transition:color .15s; }
.cob-vend-anexo-opt.is-on .cob-vend-anexo-ico{ color:var(--accent); }
.cob-vend-anexo-lbl{ font-size:12px; font-weight:700; color:var(--text); }
.cob-vend-anexo-sub{ font-size:10px; color:var(--muted); line-height:1.35; }

/* Tabela de vendedores */
.cob-vend-table-wrap{ max-height:420px; overflow-y:auto; border-radius:8px; border:1px solid var(--border); }

/* Badges de status */
.cob-vend-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; }
.cob-vend-badge--muted{ background:var(--surface); color:var(--muted); }
.cob-vend-badge--info{ background:rgba(var(--primary-rgb),.15); color:var(--accent); }
.cob-vend-badge--ok{ background:rgba(74,222,128,.15); color:#4ade80; }
.cob-vend-badge--erro{ background:rgba(248,113,113,.15); color:#f87171; }

/* ── Dashboard BI de Cobrança ────────────────────────────────────── */
/* KPI Cards */
.cob-bi-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
@media(max-width:960px){ .cob-bi-kpis{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .cob-bi-kpis{ grid-template-columns:1fr 1fr; } }
.cob-bi-kpi{ padding:14px 16px 12px; border-radius:12px; border:1.5px solid var(--border); display:flex; flex-direction:column; gap:5px; transition:transform .15s,box-shadow .15s; }
.cob-bi-kpi:hover{ transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.2); }
.cob-bi-kpi-icon{ opacity:.9; }
.cob-bi-kpi-val{ font-size:22px; font-weight:800; line-height:1.05; letter-spacing:-.03em; }
.cob-bi-kpi-lbl{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
/* Chart rows */
.cob-bi-row{ display:grid; gap:14px; margin-bottom:14px; }
@media(max-width:780px){ .cob-bi-row{ grid-template-columns:1fr!important; } }
.cob-bi-chart-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:14px; }
.cob-bi-chart-card:last-child{ margin-bottom:0; }
.cob-bi-chart-title{ font-size:12px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; margin-bottom:14px; letter-spacing:-.01em; }
.cob-bi-chart-wrap{ position:relative; width:100%; }
.cob-bi-filter-chip{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:14px; border-radius:10px;
  border:1px solid rgba(56,189,248,.35); background:rgba(56,189,248,.08);
  font-size:12px; color:var(--text);
}
.cob-bi-filter-chip strong{ color:#38bdf8; }

/* ── % Recebido no Mês ───────────────────────────────────────────── */
.cob-rec-card{ border-color:rgba(34,197,94,.18); background:rgba(34,197,94,.05); }
.cob-rec-progress{ height:14px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:0; }
.cob-rec-progress-bar{ height:100%; border-radius:99px; transition:width .5s ease; min-width:4px; }
.cob-rec-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
@media(max-width:560px){ .cob-rec-values{ grid-template-columns:1fr; } }
.cob-rec-val-box{ padding:10px 14px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); }
.cob-rec-val-box.is-green{ border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.05); }
.cob-rec-val-box.is-red{ border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.05); }
.cob-rec-val-label{ font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.4px; margin-bottom:4px; }
.cob-rec-val-num{ font-size:15px; font-weight:800; color:var(--text); line-height:1.1; }
.cob-rec-val-box.is-green .cob-rec-val-num{ color:#4ade80; }
.cob-rec-val-box.is-red   .cob-rec-val-num{ color:#f87171; }
.cob-rec-val-sub{ font-size:10px; color:var(--muted); margin-top:2px; }
/* Frequência de atualização */
.cob-rec-freq-btn{ padding:3px 9px; border-radius:20px; font-size:10px; font-weight:600; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; transition:all .15s; white-space:nowrap; }
.cob-rec-freq-btn:hover{ border-color:var(--accent); color:var(--accent); }
.cob-rec-freq-btn.is-on{ border-color:var(--accent); background:rgba(var(--primary-rgb),.12); color:var(--accent); }
.cob-rec-send-btn{ background:rgba(37,211,102,.12); color:#25D366; border:1px solid rgba(37,211,102,.3); }
.cob-rec-send-btn:hover{ background:rgba(37,211,102,.22); }

/* ── Para o Gestor — grid de canvases ────────────────────────────── */
.cob-gestor-canvas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:860px){ .cob-gestor-canvas-grid{ grid-template-columns:1fr; } }
.cob-gestor-canvas-opt{ padding:14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); display:flex; flex-direction:column; }
.cob-gestor-send-btn{ background:rgba(37,211,102,.12); color:#25D366; border:1px solid rgba(37,211,102,.3); font-size:11px; font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .15s; }
.cob-gestor-send-btn:hover:not(:disabled){ background:rgba(37,211,102,.22); }
.cob-gestor-send-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ── Disparos WhatsApp Logística v2 ──────────────────────────────── */
.log-disp-header{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px 18px; border-bottom:1px solid var(--border); background:rgba(56,189,248,.08); margin-bottom:4px; }
.log-disp-header-ico{ width:44px; height:44px; border-radius:12px; background:rgba(56,189,248,.14); color:#38bdf8; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.log-disp-header-ico svg{ width:22px; height:22px; }
.log-disp-header-copy strong{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--text); display:block; margin-bottom:4px; }
.log-disp-header-copy p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5; max-width:62ch; }
.log-disp-group{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; }
.log-disp-group-line{ flex:1; height:1px; background:var(--border); }
.log-disp-group-badge{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:3px 10px; border-radius:999px; flex-shrink:0; display:inline-flex; align-items:center; gap:5px; }
.log-disp-group-badge--fat{ background:rgba(56,189,248,.13); color:#38bdf8; border:1px solid rgba(56,189,248,.25); }
.log-disp-group-badge--vend{ background:rgba(74,222,128,.13); color:#4ade80; border:1px solid rgba(74,222,128,.25); }
/* Card v2 */
.log-disp-card2{ border:1px solid var(--border); border-radius:14px; background:var(--card); overflow:hidden; transition:opacity .18s, box-shadow .15s; }
.log-disp-card2:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.07); }
.log-disp-card2--inactive{ opacity:.55; }
.log-disp-card2-hd{ padding:13px 15px 12px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.log-disp-card2-hd-left{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.log-disp-badge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:2px 7px; border-radius:4px; margin-bottom:3px; }
.log-disp-badge--fat{ background:rgba(56,189,248,.14); color:#38bdf8; }
.log-disp-badge--vend{ background:rgba(74,222,128,.14); color:#4ade80; }
.log-disp-card2-title{ font-size:14px; font-weight:700; line-height:1.2; color:var(--text); }
.log-disp-card2-desc{ font-size:11px; color:var(--muted); line-height:1.4; max-width:52ch; }
/* Toggle switch */
.log-disp-toggle-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.log-disp-toggle{ position:relative; width:38px; height:21px; cursor:pointer; flex-shrink:0; }
.log-disp-toggle input{ opacity:0; width:0; height:0; position:absolute; }
.log-disp-toggle-slider{ position:absolute; inset:0; border-radius:999px; background:rgba(148,163,184,.22); border:1px solid rgba(255,255,255,.08); transition:background .2s, border-color .2s; }
.log-disp-toggle-slider::after{ content:''; position:absolute; width:15px; height:15px; left:2px; top:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s; }
.log-disp-toggle input:checked ~ .log-disp-toggle-slider{ background:#22c55e; border-color:rgba(34,197,94,.5); }
.log-disp-toggle input:checked ~ .log-disp-toggle-slider::after{ transform:translateX(17px); }
.log-disp-toggle-lbl{ font-size:9px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; line-height:1; white-space:nowrap; }
/* Card body sections */
.log-disp-card2-body{ padding:14px 15px; display:flex; flex-direction:column; gap:12px; }
.log-disp-field-group{ display:flex; flex-direction:column; gap:5px; }
.log-disp-field-lbl{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.log-disp-field-hint{ font-size:11px; color:var(--muted); line-height:1.45; padding:9px 11px; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid rgba(255,255,255,.06); }
.log-disp-schedule-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.log-disp-sub-label{ display:block; font-size:11px; color:var(--muted); }
.log-disp-sub-label + .form-input, .log-disp-sub-label + select.form-input{ margin-top:4px; }
/* Footer */
.log-disp-card2-foot{ padding:11px 15px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; background:rgba(0,0,0,.07); }
/* Preview box */
.log-disp-preview-box2{ padding:10px 15px 12px; border-top:1px solid var(--border); }
.log-disp-preview-box2 .cob-disp-preview{ font-size:12px; }
/* Bottom info cards */
.log-disp-info-card{ border:1px solid var(--border); border-radius:12px; padding:13px 15px; background:var(--card); margin-top:12px; }
.log-disp-info-card-title{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
/* ── Day picker ───────────────────────────────────────────────────── */
.log-disp-day-picker{ display:flex; gap:5px; flex-wrap:wrap; }
.log-disp-day-btn{
  padding:5px 10px; border-radius:7px; font-size:11px; font-weight:700;
  border:1px solid var(--border); background:var(--surface2); color:var(--muted);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
  line-height:1;
}
.log-disp-day-btn--on{
  background:rgba(var(--primary-rgb),.2); color:var(--accent2); border-color:rgba(var(--primary-rgb),.5);
}
/* ── User picker ───────────────────────────────────────────────────── */
.log-disp-user-picker{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.log-disp-user-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:7px; font-size:11px; font-weight:600;
  border:1px solid var(--border); background:var(--surface2); color:var(--muted);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
  line-height:1;
}
.log-disp-user-chip--on{
  background:rgba(56,189,248,.15); color:#38bdf8; border-color:rgba(56,189,248,.4);
}
/* ── Formato toggle (texto/Canva) ──────────────────────────────────── */
.log-disp-formato-toggle{
  display:inline-flex; align-items:center; gap:7px;
  cursor:pointer; user-select:none; margin-left:auto;
  padding:4px 10px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface2); font-size:11px; color:var(--muted); font-weight:600;
  transition:border-color .15s, background .15s;
}
.log-disp-formato-toggle:has(.log-disp-formato-chk:checked){
  background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.4); color:#a78bfa;
}
.log-disp-formato-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.log-disp-formato-slider{
  width:28px; height:16px; border-radius:999px; background:rgba(148,163,184,.22);
  border:1px solid rgba(255,255,255,.1); position:relative; transition:background .2s;
  flex-shrink:0;
}
.log-disp-formato-slider::after{
  content:''; position:absolute; width:11px; height:11px; left:2px; top:1.5px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .2s;
}
.log-disp-formato-chk:checked ~ .log-disp-formato-slider{ background:#a78bfa; }
.log-disp-formato-chk:checked ~ .log-disp-formato-slider::after{ transform:translateX(12px); }
.log-disp-formato-lbl{ display:inline-flex; align-items:center; gap:4px; }
/* ────────────────────────────────────────────────────────────────── */

.cob-rank-card{ border:1px solid var(--border); border-radius:12px; padding:14px 18px; background:var(--card); }
.cob-rank-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px; margin-bottom:12px; }
.cob-rank-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cob-rank-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.cob-rank-list{ max-height:320px; overflow:auto; padding-right:4px; }
#cob-sec-ranking .cob-rank-list{ max-height:calc(100vh - 280px); }
.cob-rank-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; padding:6px 8px; border-radius:8px; cursor:pointer; transition:background .15s; border:1px solid transparent; }
.cob-rank-row:hover{ background:var(--hover); }
.cob-rank-row.is-active{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); }
.cob-rank-pos{ font-size:11px; font-weight:700; color:var(--muted); width:22px; text-align:right; flex-shrink:0; }
.cob-rank-pos--1{ color:#f97316; }
.cob-rank-pos--2{ color:#ef4444; }
.cob-rank-pos--3{ color:#dc2626; }
.cob-rank-body{ flex:1; min-width:0; }
.cob-rank-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.cob-rank-nome{ font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cob-rank-val{ font-size:12px; font-weight:700; color:#ef4444; flex-shrink:0; }
.cob-rank-bar{ background:var(--border); border-radius:4px; height:6px; overflow:hidden; }
.cob-rank-bar-fill{ height:6px; border-radius:4px; background:#f97316; transition:width .35s; }
.cob-rank-extra{ font-size:10px; color:var(--muted); width:88px; text-align:right; flex-shrink:0; line-height:1.35; }

/* ── KPI Grid ─────────────────────────────────────────────────── */
.com-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:14px; margin-bottom:24px;
}
.com-kpi-card{
  position:relative;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px 42px 14px 16px;
  display:flex; align-items:flex-start; gap:12px;
  min-width:0;
  transition:box-shadow .15s, transform .15s;
  cursor:pointer;
}
.com-kpi-cog{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2; color:var(--muted);
  padding:0; flex-shrink:0;
  transition:background .15s, color .15s, border-color .15s, transform .12s;
}
.com-kpi-cog:hover{
  color:var(--accent); border-color:rgba(var(--primary-rgb),.35);
  background:rgba(var(--primary-rgb),.08);
}

/* Modal “Origem dos dados” (engrenagem) — melhora UI/UX */
#modal-com-kpi-fonte .modal{
  border-radius:16px;
}
#com-kpi-fonte-body code{
  background:var(--surface2);
  border:1px solid var(--border);
  padding:1px 6px;
  border-radius:6px;
}
#com-kpi-fonte-body p{
  margin:0 0 10px;
  line-height:1.55;
}
#com-kpi-fonte-body .btn.btn-sm{
  border-radius:10px;
}
.com-kpi-cog:active{ transform:scale(0.96); }
.com-kpi-cog svg{ width:15px; height:15px; stroke:currentColor; }
.com-kpi-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,.15); }
.com-kpi-card:active{ transform:translateY(1px); }
.com-kpi-card:focus-within{ outline:2px solid rgba(var(--primary-rgb),.35); outline-offset:2px; }
/* Comercial · modo personalizar (igual fluxo Pipefy) */
#com-sec-visao.com-visao-wrap--personalizar [data-dash-item]{ position:relative; }
#com-sec-visao.com-visao-wrap--personalizar .com-kpi-card,
#com-sec-visao.com-visao-wrap--personalizar .com-chart-card-clickable{
  cursor:default;
}
.com-dash-personalizar-tools{
  position:absolute;
  top:8px;
  right:42px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:0;
}
.com-dash-custom-card .com-dash-personalizar-tools{
  right:10px;
}
#com-sec-visao.com-visao-wrap--personalizar .com-visao-alertas-bloco{
  position:relative;
}
.com-erp-visao-meta-row{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:14px;
}
#com-erp-sec-visao.com-visao-wrap--personalizar [data-dash-item]{ position:relative; }
#com-erp-sec-visao.com-visao-wrap--personalizar .com-kpi-card,
#com-erp-sec-visao.com-visao-wrap--personalizar .com-chart-card,
#com-erp-sec-visao.com-visao-wrap--personalizar .com-kpi-legend,
#com-erp-sec-visao.com-visao-wrap--personalizar .com-erp-sync-strip{
  cursor:default;
}
.com-dash-pers-dragging{
  opacity:.78;
  outline:2px dashed rgba(59,130,246,.4);
  outline-offset:2px;
}
.com-kpi-icon{
  width:38px; height:38px; border-radius:10px;
  background:rgba(var(--primary-rgb),.12); display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.com-kpi-icon svg{ width:20px; height:20px; stroke:var(--accent); }
.com-kpi-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  align-self:stretch;
}
.com-kpi-val{
  font-size:clamp(16px, 2.8vw, 22px); font-weight:700; color:var(--text);
  line-height:1.22;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}
.com-kpi-label{
  font-size:12px; color:var(--muted); margin-top:4px;
  line-height:1.3;
}
.com-kpi-sub{
  font-size:11px; color:var(--muted2); margin-top:4px;
  line-height:1.3;
}

/* ERP · Visão Geral — mesmos cartões KPI que o CRM, sem engrenagem */
#com-erp-sec-visao .com-kpi-card.com-erp-kpi-card{
  padding:14px 16px;
  cursor:pointer;
}
#com-erp-sec-visao .com-kpi-card.com-erp-kpi-card .com-kpi-icon svg{
  stroke:currentColor;
}
#com-erp-sec-visao .com-erp-sync-strip{
  font-size:11px;
  color:var(--muted);
  padding:12px 14px;
  margin-bottom:20px;
  border-radius:12px;
  border:1px dashed var(--border);
  background:var(--surface2);
  line-height:1.45;
}

#com-erp-sec-visao .com-erp-inadimp-aging-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
}
#com-erp-sec-visao .com-erp-aging-panel-inner{
  display:grid;
  grid-template-columns:minmax(200px, 1fr) minmax(260px, 1.4fr);
  gap:16px;
  align-items:stretch;
  margin-bottom:14px;
}
@media (max-width: 900px){
  #com-erp-sec-visao .com-erp-aging-panel-inner{ grid-template-columns:1fr; }
}
#com-erp-sec-visao .com-erp-aging-total-block{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
  border-radius:12px;
  padding:16px 18px;
  cursor:pointer;
  transition:border-color .15s, transform .15s;
}
#com-erp-sec-visao .com-erp-aging-total-block:hover{
  border-color:rgba(239,68,68,.45);
  transform:translateY(-1px);
}
#com-erp-sec-visao .com-erp-aging-total-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
#com-erp-sec-visao .com-erp-aging-total-val{
  font-size:28px;
  font-weight:800;
  color:#ef4444;
  line-height:1.15;
  margin:6px 0 4px;
}
#com-erp-sec-visao .com-erp-aging-total-sub{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
#com-erp-sec-visao .com-erp-aging-chart-wrap{
  min-height:200px;
  position:relative;
}
#com-erp-sec-visao .com-erp-aging-chart-title{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:8px;
}
#com-erp-sec-visao #com-erp-aging-chart{
  width:100% !important;
  height:200px !important;
}
#com-erp-sec-visao .com-erp-aging-faixas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
#com-erp-sec-visao .com-erp-aging-faixa{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  transition:border-color .15s;
}
#com-erp-sec-visao .com-erp-aging-faixa:hover{
  border-color:var(--accent);
}
#com-erp-sec-visao .com-erp-aging-faixa-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px;
  margin-bottom:4px;
}
#com-erp-sec-visao .com-erp-aging-faixa-label{
  font-size:10px;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
}
#com-erp-sec-visao .com-erp-aging-faixa-qtd{
  font-size:9px;
  color:var(--muted);
  white-space:nowrap;
}
#com-erp-sec-visao .com-erp-aging-faixa-val{
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}
#com-erp-sec-visao .com-erp-aging-faixa-bar{
  height:4px;
  background:var(--border);
  border-radius:4px;
  margin-top:8px;
  overflow:hidden;
}
#com-erp-sec-visao .com-erp-aging-faixa-bar-fill{
  height:100%;
  border-radius:4px;
  transition:width .4s ease;
}

/* ══════════════════════════════════════════════════════════════
   ERP · Saúde do Time
   ══════════════════════════════════════════════════════════════ */
.erp-saude-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:20px;
}
.erp-saude-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.erp-saude-header svg{ color:var(--accent2); flex-shrink:0; }
.erp-saude-header-title{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.01em;
  flex-shrink:0;
}
.erp-saude-hint{
  font-size:10px;
  color:var(--muted);
  margin-left:4px;
  font-weight:500;
}
.erp-saude-toggle{
  margin-left:auto;
  background:none;
  border:1px solid var(--border);
  border-radius:6px;
  padding:3px 6px;
  cursor:pointer;
  color:var(--muted);
  display:flex;
  align-items:center;
  transition:background .15s,border-color .15s;
  flex-shrink:0;
}
.erp-saude-toggle:hover{ background:var(--surface3,rgba(255,255,255,.07)); border-color:var(--accent); }
.erp-saude-toggle svg{ display:block; }

/* ── Contadores ── */
.erp-saude-counters{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-bottom:1px solid var(--border);
}
.erp-saude-counter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:16px 8px;
  cursor:pointer;
  border-right:1px solid var(--border);
  transition:background .15s;
  position:relative;
}
.erp-saude-counter:last-child{ border-right:none; }
.erp-saude-counter:hover{ background:var(--surface2); }
.erp-saude-counter::after{
  content:'';
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:0; height:3px;
  border-radius:3px 3px 0 0;
  transition:width .2s;
}
.erp-saude-counter:hover::after{ width:60%; }
.erp-saude-counter--critico::after{ background:#ef4444; }
.erp-saude-counter--atencao::after{ background:#f97316; }
.erp-saude-counter--estavel::after{ background:#eab308; }
.erp-saude-counter--alta::after{ background:#22c55e; }

.erp-saude-dot{
  width:9px; height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.erp-saude-cnt{
  font-size:26px;
  font-weight:900;
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.erp-saude-lbl{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ── Alertas ── */
.erp-saude-alertas-wrap{
  padding:14px 16px 16px;
}
.erp-saude-alertas-titulo{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.erp-saude-alertas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:10px;
}
.erp-saude-alerta{
  border-radius:10px;
  padding:12px 14px;
  border-left:3px solid transparent;
  transition:transform .15s, box-shadow .15s;
  cursor:default;
  min-width:0;
}
.erp-saude-alerta:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.erp-saude-alerta-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.erp-saude-alerta-badge{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:2px 7px;
  border-radius:5px;
  white-space:nowrap;
  flex-shrink:0;
}
.erp-saude-alerta-nome{
  font-size:12.5px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.erp-saude-alerta-msg{
  font-size:11px;
  color:var(--muted2);
  margin-bottom:8px;
  line-height:1.4;
}
.erp-saude-alerta-nums{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.erp-saude-alerta-nums span{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  color:var(--muted2);
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:6px;
  padding:3px 8px;
}
.erp-saude-alerta-nums span svg{ flex-shrink:0; opacity:.7; }
.erp-saude-alerta-nums strong{ color:var(--text); }

/* ── Gap bar ── */
.erp-saude-gap-wrap{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:7px;
}
.erp-saude-gap-track{
  flex:1;
  height:5px;
  background:var(--border);
  border-radius:5px;
  overflow:hidden;
}
.erp-saude-gap-fill{
  height:100%;
  border-radius:5px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.erp-saude-gap-pct{
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  min-width:30px;
  text-align:right;
}

/* light theme */
body.tema-claro .erp-saude-panel{ background:#fff; border-color:rgba(0,0,0,.1); }
body.tema-claro .erp-saude-header{ background:#f8f9fa; border-color:rgba(0,0,0,.08); }
body.tema-claro .erp-saude-counters{ border-color:rgba(0,0,0,.08); }
body.tema-claro .erp-saude-counter{ border-color:rgba(0,0,0,.08); }
body.tema-claro .erp-saude-counter:hover{ background:rgba(0,0,0,.03); }
body.tema-claro .erp-saude-alertas-titulo{ border-color:rgba(0,0,0,.08); }
body.tema-claro .erp-saude-alerta-nums span{ background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.1); }
body.tema-claro .erp-saude-alerta:hover{ box-shadow:0 4px 12px rgba(0,0,0,.09); }

@media (max-width:700px){
  .erp-saude-counters{ grid-template-columns:repeat(2,1fr); }
  .erp-saude-counter{ padding:12px 6px; }
  .erp-saude-cnt{ font-size:20px; }
  .erp-saude-alertas-grid{ grid-template-columns:1fr; }
  .erp-saude-hint{ display:none; }
}

/* ERP · Financeiro — mini KPIs da página (não clicáveis) */
#com-erp-sec-financeiro .com-kpi-card.com-erp-fin-kpi-card{
  padding:14px 16px;
  cursor:default;
}
#com-erp-sec-financeiro .com-kpi-card.com-erp-fin-kpi-card .com-kpi-icon svg{
  stroke:currentColor;
}
/* KPI: origem temporal (evita misturar “período” com instantâneo) */
.com-kpi-meta{
  min-height:20px;
  margin-bottom:2px;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:4px;
}
.com-kpi-scope{
  font-size:9px; font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:5px;
  line-height:1.2;
  border:1px solid transparent;
  white-space:nowrap;
}
.com-kpi-scope--live{
  color:var(--muted);
  border-color:var(--border);
  background:rgba(255,255,255,.045);
}
.com-kpi-scope--period{
  color:var(--success);
  border-color:rgba(34,201,122,.33);
  background:rgba(34,201,122,.1);
}
.com-kpi-scope--crm{
  color:var(--accent2);
  border-color:rgba(74,159,255,.38);
  background:rgba(74,159,255,.1);
}
.com-kpi-legend{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px 20px;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed var(--border);
  background:rgba(255,255,255,.025);
}
.com-kpi-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
  max-width:100%;
}

@media(max-width:640px){
  .com-kpi-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .com-kpi-card{
    align-items:flex-start;
    padding:14px 42px 14px 14px;
  }
}

@media(min-width:641px){
  .com-opor-toolbar{
    margin-left:auto;
    justify-content:flex-end;
    width:auto;
  }
}

/* ── Seção de gráficos (barras ABC / Ciclo) ───────────────────── */
.com-charts-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:24px;
  align-items:start;
}
.com-charts-row > div{ min-width:0; box-sizing:border-box; }
@media(max-width:700px){ .com-charts-row{ grid-template-columns:1fr; } }

/* Visão Geral · mini lista motivos de perda */
.com-visao-mini-perdas-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--border);
  font-size:12px;
  line-height:1.35;
}
.com-visao-mini-perdas-row:last-child{ border-bottom:none; }
.com-visao-mini-perdas-mot{
  flex:1;
  min-width:0;
  color:var(--text);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.com-visao-mini-perdas-meta{
  flex-shrink:0;
  font-size:10px;
  color:var(--muted);
  text-align:right;
  max-width:48%;
}

/* ── Comercial: modo CRM/ERP (B2+) ───────────────────────────── */
.com-mode-toggle{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background:var(--surface);
}
.com-mode-btn{
  border:none;
  background:transparent;
  color:var(--text);
  opacity:0.55;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.01em;
  padding:9px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  -webkit-font-smoothing:antialiased;
}
.com-mode-btn:hover{ background:rgba(var(--primary-rgb),.08); opacity:0.92; color:var(--text); }
.com-mode-btn.active{
  background:rgba(var(--primary-rgb),.16);
  opacity:1;
  font-weight:600;
  color:var(--text);
}

.com-mode-picker{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(var(--primary-rgb),.10);
  padding:16px 16px;
  margin-bottom:14px;
  color:var(--text);
  /* No Windows, antialias/geometricPrecision pode parecer “borrado” */
  text-rendering:auto;
}
.com-mode-picker-title{ font-size:14px; font-weight:800; color:var(--text); margin-bottom:4px; }
.com-mode-picker-sub{ font-size:12px; color:var(--muted2); margin-bottom:12px; }
/* Edição das descrições dos cards: só admin vê; visual tipo link */
.com-mode-picker-custom-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 4px;
  margin:0;
  font-size:11px;
  font-weight:500;
  color:var(--muted2);
  background:transparent;
  border:none;
  border-radius:6px;
  cursor:pointer;
  box-shadow:none;
}
.com-mode-picker-custom-btn:hover{
  color:var(--text);
  background:rgba(13,43,94,.06);
}
.com-mode-picker-custom-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.com-mode-picker-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media(max-width:700px){ .com-mode-picker-grid{ grid-template-columns:1fr; } }
.com-mode-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  padding:14px 14px;
  text-align:left;
  cursor:pointer;
  transition:box-shadow .18s ease, transform .08s ease, border-color .18s ease;
}
.com-mode-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,.14); border-color:rgba(var(--primary-rgb),.28); }
.com-mode-card:active{ transform:translateY(1px); }
.com-mode-card-h{ font-size:13px; font-weight:800; color:var(--text); margin-bottom:6px; }
.com-mode-card-p{ font-size:12px; color:var(--muted2); line-height:1.55; margin-bottom:10px; }
.com-mode-card-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.com-mode-badge{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--text);
  opacity:0.88;
  border:1px solid var(--border);
  background:var(--surface2);
  padding:6px 11px;
  border-radius:999px;
  line-height:1.25;
  -webkit-font-smoothing:antialiased;
  text-rendering:auto;
}
body.tema-claro .com-mode-badge{
  background:rgba(255,255,255,.72);
  color:var(--brand);
  opacity:1;
  border-color:rgba(var(--primary-rgb),.22);
}
body:not(.tema-claro) .com-mode-badge{
  opacity:0.95;
}

.com-chart-detail-body tr[data-drill]:hover,
#com-chart-detail-body tr[data-drill]:hover{
  background:rgba(var(--primary-rgb),.06);
}
#com-chart-detail-body tr[data-drill]:focus{
  outline:2px solid rgba(var(--primary-rgb),.25);
  outline-offset:-2px;
}

.com-chart-card{
  position:relative;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px;
}
.com-chart-card-clickable{
  cursor:pointer;
  transition:box-shadow .18s ease, transform .08s ease, border-color .18s ease;
}
.com-chart-card-clickable:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  border-color:rgba(var(--primary-rgb),.28);
}
.com-chart-card-clickable:active{ transform:translateY(1px); }
.com-chart-card-clickable:focus{
  outline:2px solid rgba(var(--primary-rgb),.35);
  outline-offset:2px;
}
.com-chart-title{
  font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.com-chart-title svg{ width:15px; height:15px; stroke:var(--muted); }
.com-chart-expand-hint{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
}

.com-bar-row{ margin-bottom:10px; }
.com-bar-label{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--muted); margin-bottom:4px;
}
.com-bar-track{
  height:8px; background:var(--surface2);
  border-radius:4px; overflow:hidden;
}
.com-bar-fill{
  height:100%; border-radius:4px;
  transition:width .4s ease;
}

/* ── Visão Geral: bloco de alertas (largura total) ───────────── */
.com-visao-alertas-bloco{
  margin-bottom:24px;
}

/* ── Alertas ─────────────────────────────────────────────────── */
.com-alertas{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:24px;
}
.com-visao-alertas-bloco .com-alertas{
  margin-bottom:0;
}
.com-alertas.com-alertas--grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
@media(max-width:720px){
  .com-alertas.com-alertas--grid{
    grid-template-columns:1fr;
  }
}
.com-alerta{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:12px;
  border:1px solid transparent; font-size:13px;
}
.com-alerta.warn{
  background:rgba(255,194,51,.08); border-color:rgba(255,194,51,.25);
  color:var(--warn);
}
.com-alerta.danger{
  background:rgba(255,68,85,.08); border-color:rgba(255,68,85,.25);
  color:var(--danger);
}
.com-alerta.info{
  background:rgba(var(--primary-rgb),.08); border-color:rgba(var(--primary-rgb),.2);
  color:var(--accent2);
}
.com-alerta svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.com-alerta-txt{ flex:1; }
.com-alerta-titulo{ font-weight:700; margin-bottom:2px; }
.com-alerta-desc{
  font-size:12px; opacity:.85;
  line-height:1.42;
  overflow-wrap:anywhere; word-break:break-word;
}

/* ── Tabelas internas ─────────────────────────────────────────── */
.com-table-wrap{ overflow-x:auto; }
.com-table{
  width:100%; border-collapse:collapse; font-size:13px; color:var(--text);
}
.com-table th{
  text-align:left; padding:8px 10px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  border-bottom:1px solid var(--border); background:var(--surface2);
  white-space:nowrap;
}
.com-table td{
  padding:10px 10px; border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.com-table tr:last-child td{ border-bottom:none; }
.com-table tr:hover td{ background:var(--surface2); }

/* Ranking — barra de progresso inline */
.com-rank-bar-wrap{
  display:flex; align-items:center; gap:8px; min-width:80px;
}
.com-rank-bar-track{
  flex:1; height:6px; background:var(--surface2);
  border-radius:3px; overflow:hidden;
}
.com-rank-bar-fill{
  height:100%; border-radius:3px;
  background:var(--accent); transition:width .3s;
}
.com-rank-bar-pct{ font-size:11px; color:var(--muted); width:32px; text-align:right; }

/* ── Filtros da Carteira ──────────────────────────────────────── */
.com-filter-bar{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; margin-bottom:16px;
}
.com-filter-bar select,
.com-filter-bar input[type=text]{
  height:34px; padding:0 10px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-size:13px; outline:none;
}
.com-filter-bar select:focus,
.com-filter-bar input[type=text]:focus{
  border-color:var(--accent);
}
.com-filter-bar input[type=text]{ min-width:160px; }
.com-filter-spacer{ flex:1; }

/* ── Paginação ────────────────────────────────────────────────── */
.com-paginacao{
  display:flex; align-items:center; gap:8px;
  justify-content:center; margin-top:16px; flex-wrap:wrap;
}
.com-paginacao .btn{ min-width:36px; }
.com-paginacao-info{ font-size:12px; color:var(--muted); }

/* ── Oportunidades — cards por pipeline ──────────────────────── */
.com-opor-group{ margin-bottom:24px; }
.com-opor-group-titulo{
  font-size:13px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
  padding:6px 0 10px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.com-opor-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
}
.com-opor-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:box-shadow .15s, border-color .15s;
}
.com-opor-card:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.18); border-color:var(--accent);
}
.com-opor-card.com-opor-status-2{
  border-color:rgba(34,201,122,.35);
  background:rgba(34,201,122,.10);
  box-shadow:inset 4px 0 0 rgba(34,201,122,.55);
}
.com-opor-card.com-opor-status-3{
  border-color:rgba(255,68,85,.35);
  background:rgba(255,68,85,.10);
  box-shadow:inset 4px 0 0 rgba(255,68,85,.55);
}
.com-opor-card.com-opor-status-2:hover{ border-color:rgba(34,201,122,.55); }
.com-opor-card.com-opor-status-3:hover{ border-color:rgba(255,68,85,.55); }
.com-opor-status-pill{
  font-size:10px;
  font-weight:800;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted2);
  background:var(--surface);
}
.com-opor-status-pill.ganha{ border-color:rgba(34,201,122,.35); color:var(--success); background:rgba(34,201,122,.08); }
.com-opor-status-pill.perdida{ border-color:rgba(255,68,85,.35); color:var(--danger); background:rgba(255,68,85,.08); }

/* Oportunidades (tabela): marcação visual ganha/perdida */
.com-opor-row-won td:first-child{
  border-left:4px solid rgba(34,201,122,.65);
}
.com-opor-row-lost td:first-child{
  border-left:4px solid rgba(255,68,85,.65);
}

.com-opor-motivos{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.com-opor-motivo-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:11px;
  color:var(--muted2);
}
.com-opor-motivo-chip strong{ color:var(--text); font-weight:900; }
.com-opor-nome{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.com-opor-etapa{ font-size:11px; color:var(--muted2); margin-bottom:8px; }
.com-opor-val{
  font-size:15px; font-weight:700; color:var(--accent);
}
.com-opor-meta{ font-size:11px; color:var(--muted); margin-top:4px; }

/* ── Disparos — lista ─────────────────────────────────────────── */
.com-disparos-list{ display:flex; flex-direction:column; gap:10px; }
.com-disparo-row{
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.com-disparo-info{ flex:1; min-width:0; }
.com-disparo-titulo{ font-size:14px; font-weight:700; color:var(--text); }
.com-disparo-meta{ font-size:12px; color:var(--muted); margin-top:3px; }
.com-disparo-acoes{ display:flex; gap:6px; flex-shrink:0; }

/* ── Badge curva ABC ─────────────────────────────────────────── */
.com-badge-abc{
  display:inline-block; padding:2px 7px; border-radius:4px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
}
.com-badge-abc.a{ background:rgba(34,201,122,.18); color:var(--success); }
.com-badge-abc.b{ background:rgba(var(--primary-rgb),.18); color:var(--accent2); }
.com-badge-abc.c{ background:rgba(74,106,144,.18); color:var(--muted2); }

/* ── Badge positivação ───────────────────────────────────────── */
.com-badge-pos{
  display:inline-block; padding:2px 7px; border-radius:4px;
  font-size:11px; font-weight:700;
}
.com-badge-pos.sim{ background:rgba(34,201,122,.18); color:var(--success); }
.com-badge-pos.nao{ background:rgba(255,68,85,.12); color:var(--danger); }

/* ── Comercial · Ligações: filtros não ocupam 100% da linha (.form-input é width:100% global) ─ */
#com-sec-ligacoes .com-lig-filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
#com-sec-ligacoes .com-lig-filtros .form-input{
  width:auto;
  max-width:220px;
  min-width:0;
  flex:0 1 auto;
  height:32px;
  padding:0 10px;
  font-size:12px;
  box-sizing:border-box;
}
#com-sec-ligacoes .com-lig-filtros input[type="date"]{ max-width:148px; }
#com-sec-ligacoes .com-lig-filtros #com-lig-filtro-q{
  flex:1 1 200px;
  max-width:none;
  min-width:160px;
}
#com-sec-ligacoes .com-lig-filtros-busca{ flex:0 0 auto; }

@media(max-width:640px){
  /* Rotas: coluna da tabela drill-down tinha flex-basis fixo de 390px
     (inline style) — maior que a tela toda, estourava a página mesmo
     com flex-wrap no container pai. */
  .com-rotas-tabela-col{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  /* Painel HTML tem muitos estilos inline; aqui apenas “corrige mobile” onde dá sem refatorar tudo */
  #panel-comercial select.form-input,
  #panel-comercial input.form-input,
  #panel-comercial textarea.form-input{
    width:100%; max-width:none; box-sizing:border-box;
    min-height:42px;
  }

  /* Performance cards (Visão Geral) vira 1 coluna no mobile */
  #com-crm-performance{
    grid-template-columns:1fr !important;
  }

  /* Oportunidades: botões Kanban/Tabela ocupam linha inteira no mobile */
  .com-opor-toolbar{
    width:100%;
    justify-content:flex-start;
  }

  /* Modais grandes do Comercial ficam navegáveis em telas pequenas */
  #modal-com-cliente .modal-box,
  #modal-com-disparo .modal-box{
    max-width:none !important;
    width:100% !important;
    margin:10px auto;
    max-height:calc(100dvh - 20px);
    display:flex;
    flex-direction:column;
  }

  /* Disparos: evita cortar quando wrap quebra só no desktop */
  .com-disparo-acoes .btn.btn-sm{
    flex:1 1 auto;
    justify-content:center;
  }

  .com-cron-grid{
    grid-template-columns:1fr !important;
  }
}

/* ── Modal detalhe cliente ───────────────────────────────────── */
.com-cliente-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
  margin-top:12px;
}
@media(max-width:480px){ .com-cliente-grid{ grid-template-columns:1fr; } }
.com-cliente-field{ display:flex; flex-direction:column; gap:3px; }
.com-cliente-field-label{
  font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.com-cliente-field-val{
  font-size:14px; color:var(--text); font-weight:500;
}

/* ── Modal disparo — tipo selector ───────────────────────────── */
.com-tipo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:8px; margin-bottom:12px;
}
.com-tipo-btn{
  padding:10px 8px; border-radius:8px; text-align:center;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text); font-size:12px; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.com-tipo-btn:hover{ border-color:var(--accent); }
.com-tipo-btn.selected{
  border-color:var(--accent); background:rgba(var(--primary-rgb),.12);
  color:var(--accent);
}

/* ── Variáveis de template ────────────────────────────────────── */
.com-vars{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;
}
.com-var-chip{
  display:inline-block; padding:3px 9px; border-radius:12px;
  background:var(--surface2); border:1px solid var(--border);
  font-size:12px; color:var(--muted2); cursor:pointer;
  transition:color .15s, border-color .15s;
  font-family:monospace;
}
.com-var-chip:hover{ color:var(--accent); border-color:var(--accent); }

/* ── Estado vazio ─────────────────────────────────────────────── */
.com-empty{
  text-align:center; padding:48px 20px;
  color:var(--muted); font-size:14px;
}
.com-empty svg{ width:40px; height:40px; margin-bottom:12px; opacity:.4; }

/* ── Loading inline ───────────────────────────────────────────── */
.com-loading{
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:32px; color:var(--muted); font-size:13px;
}

/* ── Seção subtítulo ──────────────────────────────────────────── */
.com-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; flex-wrap:wrap; gap:8px;
}
.com-section-title{
  font-size:16px; font-weight:700; color:var(--text);
}
.com-section-sub{ font-size:13px; color:var(--muted); margin-top:2px; }

/* ── Responsivo ───────────────────────────────────────────────── */
@media(max-width:600px){
  .com-kpi-grid{ grid-template-columns:1fr 1fr; }
  .com-filter-bar select{ max-width:120px; }
  .com-disparo-row{ flex-direction:column; align-items:flex-start; }
}


/* ── MODAL NOVA CONVERSA ───────────────────────────────────── */
.chat-modal-nova-conv{
  position:fixed; inset:0; z-index:10500;
  background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center;
}
.chat-modal-nova-conv-box{
  background:var(--surface2,#1e2730); border:1px solid var(--border);
  border-radius:14px; width:420px; max-width:95vw;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
}
.chat-modal-nova-conv-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  font-size:14px; font-weight:600; color:var(--text);
  gap:8px;
}
.chat-modal-nova-conv-hd svg{ color:var(--accent); }
.chat-modal-nova-conv-close{
  background:none; border:none; cursor:pointer; color:var(--muted);
  padding:4px; border-radius:6px; display:flex; align-items:center;
  transition:background .12s;
}
.chat-modal-nova-conv-close:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.chat-modal-nova-conv-search-wrap{ padding:10px 12px; border-bottom:1px solid var(--border); }
.chat-modal-nova-conv-input{
  width:100%; box-sizing:border-box;
  background:var(--surface,#111b21); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; font-size:13px; color:var(--text);
  outline:none; transition:border-color .15s;
}
.chat-modal-nova-conv-input:focus{ border-color:var(--accent); }
.chat-modal-nova-conv-list{
  max-height:320px; overflow-y:auto; padding:6px 0;
}
.chat-nova-conv-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; cursor:pointer; transition:background .1s;
}
.chat-nova-conv-item:hover{ background:rgba(255,255,255,.05); }
body.tema-claro .chat-nova-conv-item:hover{ background:rgba(0,0,0,.04); }
.chat-nova-conv-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#fff; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; text-transform:uppercase;
}
.chat-nova-conv-info{ flex:1; min-width:0; }
.chat-nova-conv-nome{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-nova-conv-sub{ font-size:11px; color:var(--muted); margin-top:1px; }
.chat-nova-conv-empty{ padding:24px 16px; text-align:center; color:var(--muted); font-size:13px; }
.chat-modal-nova-conv-footer{ padding:10px 12px; border-top:1px solid var(--border); }
.chat-modal-nova-conv-btn-num{
  width:100%; padding:9px 14px; background:var(--accent); color:#fff;
  border:none; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:opacity .15s;
}
.chat-modal-nova-conv-btn-num:hover{ opacity:.88; }
.wpp-hub-sidebar-actions .wpp-sbtn-nova-conversa{ color:var(--accent); }

/* ── BUSCA NA CONVERSA ─────────────────────────────────────── */
.chat-hd-btn-busca{
  background:none; border:none; cursor:pointer;
  color:rgba(241,241,242,.75);
  padding:6px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
  width:34px; height:34px; flex-shrink:0;
}
.chat-hd-btn-busca:hover,
.chat-hd-btn-busca.ativo{ background:rgba(255,255,255,.1); color:#e9edef; }
body.tema-claro .chat-hd-btn-busca{ color:var(--muted2); }
body.tema-claro .chat-hd-btn-busca:hover,
body.tema-claro .chat-hd-btn-busca.ativo{ background:rgba(0,0,0,.06); color:var(--text); }

.chat-busca-conv-bar{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; background:var(--surface2,#1e2730);
  border-bottom:1px solid var(--border);
  animation:slideDownFade .15s ease;
}
@keyframes slideDownFade{
  from{ opacity:0; transform:translateY(-6px); }
  to{   opacity:1; transform:translateY(0);    }
}
.chat-busca-conv-close{
  background:none; border:none; cursor:pointer; color:var(--muted);
  padding:4px; border-radius:6px; display:flex; align-items:center;
  flex-shrink:0; transition:background .12s;
}
.chat-busca-conv-close:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.chat-busca-conv-inp{
  flex:1; background:var(--surface,#111b21); border:1px solid var(--border);
  border-radius:8px; padding:6px 11px; font-size:13px; color:var(--text);
  outline:none; transition:border-color .15s; min-width:0;
}
.chat-busca-conv-inp:focus{ border-color:var(--accent); }
.chat-busca-conv-count{
  font-size:12px; color:var(--muted); white-space:nowrap; min-width:60px;
  text-align:center; flex-shrink:0;
}
.chat-busca-conv-navs{
  display:flex; gap:2px; flex-shrink:0;
}
.chat-busca-conv-navs button{
  background:none; border:none; cursor:pointer; color:var(--muted);
  padding:4px 6px; border-radius:6px; display:flex; align-items:center;
  transition:background .12s, color .12s;
}
.chat-busca-conv-navs button:hover{ background:rgba(255,255,255,.08); color:var(--text); }

/* Highlight de resultados */
.chat-busca-hl{
  background:rgba(255,213,0,.35); color:inherit;
  border-radius:2px; padding:0 1px;
}
.chat-busca-hl-ativo{
  background:rgba(255,160,0,.7); color:#111;
  border-radius:2px;
}

/* ── FIGURINHAS ────────────────────────────────────────────── */
/* botão removido da barra — wrap mantido só para posicionar o panel */
.chat-fig-wrap{ position:relative; display:flex; align-items:center; width:0; overflow:visible; flex-shrink:0; }
.chat-btn-fig{
  display:none; /* oculto — acesso via menu + */
  width:36px; height:36px; border-radius:50%; background:transparent; border:none;
  cursor:pointer; color:rgba(241,241,242,.55); flex-shrink:0; margin-bottom:4px;
  align-items:center; justify-content:center;
  transition:color .15s, background .15s; padding:0;
}
.chat-btn-fig:hover,
.chat-btn-fig.ativo{ background:rgba(255,255,255,.08); color:var(--accent); }
body.tema-claro .chat-btn-fig{ color:var(--muted2); }
body.tema-claro .chat-btn-fig:hover,
body.tema-claro .chat-btn-fig.ativo{ background:rgba(0,0,0,.06); color:var(--accent); }

.chat-fig-panel{
  position:fixed; bottom:80px; left:12px;
  width:300px; max-height:340px;
  background:var(--surface2,#1e2730); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 6px 30px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden; z-index:600;
}
.chat-fig-panel-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text);
}
.chat-fig-upload-label{
  cursor:pointer; color:var(--accent); padding:3px 7px;
  border-radius:6px; display:flex; align-items:center; gap:4px;
  font-size:12px; transition:background .12s;
}
.chat-fig-upload-label:hover{ background:rgba(255,255,255,.07); }
.chat-fig-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  padding:8px; overflow-y:auto; flex:1;
}
.chat-fig-item{
  position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden;
  cursor:pointer; background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.chat-fig-item:hover{ background:rgba(255,255,255,.1); }
.chat-fig-item img{ width:100%; height:100%; object-fit:contain; }
.chat-fig-del{
  display:none; position:absolute; top:2px; right:2px;
  background:rgba(0,0,0,.65); color:#fff; border:none; border-radius:50%;
  width:18px; height:18px; font-size:12px; line-height:1;
  cursor:pointer; align-items:center; justify-content:center;
}
.chat-fig-item:hover .chat-fig-del{ display:flex; }
.chat-fig-loading,
.chat-fig-empty{
  grid-column:1/-1; text-align:center;
  color:var(--muted); font-size:12px; padding:20px 8px; line-height:1.6;
}

/* botão hover antigo removido — substituído pelo bottom sheet */

/* ── MENU FIGURINHA (bottom sheet WhatsApp) ────────────────── */
.chat-fig-menu-overlay{
  position:fixed; inset:0; z-index:11000;
  background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center;
}
.chat-fig-menu-sheet{
  width:100%; max-width:480px;
  background:var(--surface2,#1e2730);
  border-radius:18px 18px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.32,1,.32,1);
  position:relative;
}
.chat-fig-menu-sheet.aberto{ transform:translateY(0); }

.chat-fig-menu-close{
  position:absolute; top:12px; right:14px;
  background:rgba(255,255,255,.12); border:none; border-radius:50%;
  width:30px; height:30px; font-size:18px; line-height:1;
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.chat-fig-menu-close:hover{ background:rgba(255,255,255,.2); }

.chat-fig-menu-preview{
  display:flex; justify-content:center; padding:22px 24px 16px;
  border-bottom:1px solid var(--border);
}
.chat-fig-menu-preview img{
  max-width:180px; max-height:180px; border-radius:12px; object-fit:contain;
}

.chat-fig-menu-lista{
  list-style:none; margin:0; padding:8px 0 16px;
}
.chat-fig-menu-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 22px; cursor:pointer; font-size:15px; color:var(--text);
  transition:background .1s;
}
.chat-fig-menu-item:hover{ background:rgba(255,255,255,.06); }
.chat-fig-menu-item svg{ color:var(--muted); flex-shrink:0; }
body.tema-claro .chat-fig-menu-item:hover{ background:rgba(0,0,0,.04); }

/* ══ Reuniões 1:1 — Automação (UI refinada) ═══════════════════ */
/* ══════════════════════════════════════════════════════
   Automação 1:1 — UI redesign
   ══════════════════════════════════════════════════════ */

.reun-autom-pane{ max-width:100%; }

/* Sub-tabs (Regras e disparo / Histórico) */
.reun-autom-subtabs-row{
  display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;
}
.reun-autom-subpill{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.reun-autom-subpill:hover{
  border-color:var(--accent); color:var(--text);
  background:rgba(var(--primary-rgb),.06);
}
.reun-autom-subpill.active{
  background:var(--accent); border-color:var(--accent);
  color:#fff; box-shadow:0 3px 14px rgba(var(--primary-rgb),.35);
}
.reun-autom-subpill.active .reun-autom-subpill-ico{ opacity:1; }
.reun-autom-subpill-ico{ opacity:.7; display:flex; align-items:center; }

/* Status bar — última sincronização */
.reun-autom-status-chip{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); line-height:1.5;
  padding:10px 14px; border-radius:10px;
  background:rgba(34,201,122,.06); border:1px solid rgba(34,201,122,.2);
  margin-bottom:16px;
}
.reun-autom-status-chip::before{
  content:''; flex-shrink:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--success);
  box-shadow:0 0 6px rgba(34,201,122,.6);
}

/* Lista de regras existentes */
.reun-autom-rules-list{ margin-bottom:22px; display:flex; flex-direction:column; gap:10px; }
.reun-autom-rule-card{
  padding:14px 16px 14px 18px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--accent);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start;
  transition:box-shadow .15s;
}
.reun-autom-rule-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,.15); }
.reun-autom-rule-meta{ font-size:12px; color:var(--muted); margin-top:5px; line-height:1.5; }

/* Badges de status da regra */
.reun-autom-badge{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:20px; background:var(--surface2); color:var(--muted);
}
.reun-autom-badge--on{ background:rgba(34,201,122,.14); color:#22c97a; border:1px solid rgba(34,201,122,.25); }
.reun-autom-badge--off{ background:rgba(255,68,85,.1); color:#ff4455; border:1px solid rgba(255,68,85,.2); }
.reun-autom-badge--soon{ background:rgba(249,168,42,.14); color:#e8a54b; border:1px solid rgba(249,168,42,.25); }
.reun-autom-badge--warn{ background:rgba(249,168,42,.14); color:#e8a54b; border:1px solid rgba(249,168,42,.25); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.reun-autom-badge--warn:hover{ background:rgba(249,168,42,.22); color:#f0b53a; }
.reun-autom-badge--erp{ background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.25); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.reun-autom-badge--erp:hover{ background:rgba(239,68,68,.18); color:#fca5a5; }

/* Card do formulário principal */
.reun-autom-form-card{
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 4px 24px rgba(0,0,0,.1);
  overflow:hidden;
}
.reun-autom-form-head{
  padding:22px 24px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(var(--primary-rgb),.06);
}
.reun-autom-form-head .disp-bloco-titulo{
  font-size:16px !important; margin-bottom:4px !important;
}
.reun-autom-form-lead{
  font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 10px; font-weight:400;
}
.reun-autom-lead-more{
  margin-top:4px; font-size:12px; color:var(--muted);
  border-radius:8px; border:1px solid rgba(var(--primary-rgb),.2);
  background:rgba(var(--primary-rgb),.05); padding:0 12px;
  display:inline-block; width:100%;
}
body.tema-claro .reun-autom-lead-more{ background:rgba(13,43,94,.04); }
.reun-autom-lead-more summary{
  cursor:pointer; font-weight:600; color:var(--accent); padding:9px 0;
  list-style:none; display:flex; align-items:center; gap:6px;
}
.reun-autom-lead-more summary::before{
  content:'▶'; font-size:9px; transition:transform .2s; display:inline-block;
}
.reun-autom-lead-more[open] summary::before{ transform:rotate(90deg); }
.reun-autom-lead-more-body{
  margin:0 0 12px; padding-top:2px; line-height:1.55; color:var(--muted); font-size:12.5px;
}

/* Seções com step indicator */
.reun-autom-form-section{
  padding:20px 24px 22px;
  border-bottom:1px solid var(--border);
}
.reun-autom-form-section:last-of-type{ border-bottom:none; }
.reun-autom-step-header{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.reun-autom-step-badge{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--accent);
  color:#fff; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.35);
}
.reun-autom-step-label{ display:flex; flex-direction:column; gap:1px; }
.reun-autom-section-kicker{
  display:block; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); line-height:1.2;
}
.reun-autom-section-title{
  font-size:15px; font-weight:700; color:var(--text); margin:0; letter-spacing:-.01em;
}
.reun-autom-form-grid--main{ align-items:start; }
.reun-autom-field-span-full{ grid-column:1 / -1; }
.reun-autom-modality-fieldset{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px;
  margin:0;
  background:rgba(255,255,255,.04);
}
body.tema-claro .reun-autom-modality-fieldset{
  background:rgba(13,43,94,.05);
  border-color:rgba(13,43,94,.12);
}
.reun-autom-modality-legend{
  padding:0 4px;
  font-weight:800;
  font-size:16px;
  color:var(--text);
  letter-spacing:.01em;
}
.reun-autom-modality-lead{
  margin:6px 0 16px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  max-width:780px;
}
.reun-autom-modality-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:720px){
  .reun-autom-modality-cards{ grid-template-columns:1fr; }
}
.reun-autom-mod-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  position:relative;
  margin:0;
  padding:14px 14px 14px 42px;
  border-radius:12px;
  border:2px solid var(--border);
  background:rgba(0,0,0,.14);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.tema-claro .reun-autom-mod-card{
  background:rgba(255,255,255,.65);
}
.reun-autom-mod-card:hover{
  border-color:rgba(var(--primary-rgb),.4);
}
.reun-autom-mod-card--active{
  border-color:rgba(48,142,255,.85);
  box-shadow:0 0 0 1px rgba(48,142,255,.25), 0 8px 22px rgba(0,0,0,.12);
  background:rgba(var(--primary-rgb),.12);
}
body.tema-claro .reun-autom-mod-card--active{
  background:rgba(var(--primary-rgb),.1);
  box-shadow:0 0 0 1px rgba(var(--primary-rgb),.2), 0 6px 18px rgba(13,43,94,.08);
}
.reun-autom-mod-card input[type="radio"]{
  position:absolute;
  left:14px;
  top:17px;
  width:18px;
  height:18px;
  margin:0;
  accent-color:#308eff;
}
.reun-autom-mod-card-kicker{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted2);
}
.reun-autom-mod-card-title{
  font-size:17px;
  font-weight:800;
  color:var(--text);
  line-height:1.2;
}
.reun-autom-mod-card-desc{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.reun-autom-ritual-opcoes{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px 14px;
  background:rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.tema-claro .reun-autom-ritual-opcoes{
  background:rgba(13,43,94,.04);
}
.reun-autom-ritual-subhead{
  padding-bottom:14px;
  margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
.reun-autom-ritual-subkicker{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6eb0ff;
  margin-bottom:2px;
}
body.tema-claro .reun-autom-ritual-subkicker{
  color:#1769c9;
}
.reun-autom-ritual-subtitle{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
  margin-top:2px;
}
.reun-autom-ritual-sublead{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  max-width:62rem;
}
.reun-autom-ritual-freq-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:2px;
}
.reun-autom-ritual-freq-label{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted2);
}
.reun-autom-ritual-freq-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
}
.reun-autom-ritual-freq-opt{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
.reun-autom-ritual-freq-opt input{
  accent-color:#6eb0ff;
}
body.tema-claro .reun-autom-ritual-freq-opt input{
  accent-color:#1769c9;
}
.reun-autom-ritual-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.reun-autom-ritual-panel--cal{
  margin-top:14px;
}

/* hint colapsável */
.reun-autom-ritual-hint-details{
  font-size:12px; color:var(--muted);
}
.reun-autom-ritual-hint-details summary{
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  color:var(--muted2); font-size:11.5px; font-weight:600;
  user-select:none; list-style:none; padding:2px 0;
}
.reun-autom-ritual-hint-details summary::-webkit-details-marker{ display:none; }
.reun-autom-ritual-hint-details summary::before{
  content:'▸'; font-size:10px; transition:transform .15s;
}
.reun-autom-ritual-hint-details[open] summary::before{ transform:rotate(90deg); }
.reun-autom-ritual-hint-details p{
  margin:6px 0 0; padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  line-height:1.5;
}
body.tema-claro .reun-autom-ritual-hint-details p{
  background:rgba(13,43,94,.04);
}

/* Preview + Grade de chips */
.reun-autom-daynum-wrap{ display:flex; flex-direction:column; gap:10px; }
.reun-autom-daynum-preview{
  font-size:12.5px; color:var(--muted); background:rgba(110,176,255,.08);
  border:1px solid rgba(110,176,255,.2); border-radius:8px;
  padding:7px 12px; line-height:1.4;
}
.reun-autom-daynum-preview strong{ color:var(--text); }
body.tema-claro .reun-autom-daynum-preview{
  background:rgba(23,105,201,.06); border-color:rgba(23,105,201,.18);
}
.reun-autom-daynum-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:5px;
}
.reun-autom-daynum-grid--wd5{
  grid-template-columns:repeat(5,1fr);
  max-width:min(280px,100%);
  gap:6px;
}
.reun-autom-daynum-grid--wd5 .reun-autom-daynum-chip{
  aspect-ratio:unset;
  width:100%;
  height:34px;
  min-height:34px;
  padding:0 4px;
  font-size:11.5px;
  border-radius:6px;
}
@media(max-width:600px){
  .reun-autom-daynum-grid{ grid-template-columns:repeat(7,1fr); }
}
.reun-autom-daynum-chip{
  aspect-ratio:1; border:1.5px solid var(--border);
  border-radius:7px; background:transparent;
  color:var(--muted2); font-size:12.5px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; transition:background .12s, border-color .12s, color .12s;
  font-family:inherit;
}
.reun-autom-daynum-chip:hover{
  background:rgba(110,176,255,.12); border-color:#6eb0ff; color:#6eb0ff;
}
.reun-autom-daynum-chip.ativo{
  background:#6eb0ff; border-color:#6eb0ff;
  color:#0d1b22; font-weight:800;
}
body.tema-claro .reun-autom-daynum-chip{ color:var(--muted); }
body.tema-claro .reun-autom-daynum-chip.ativo{
  background:#1769c9; border-color:#1769c9; color:#fff;
}

/* Cards "Quem recebe" */
.reun-autom-dest-scope-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
}
@media(max-width:520px){
  .reun-autom-dest-scope-grid{ grid-template-columns:1fr 1fr; }
}
.reun-autom-dest-card{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 8px; border:1.5px solid var(--border); border-radius:10px;
  cursor:pointer; font-size:12px; font-weight:600;
  color:var(--muted); text-align:center;
  transition:border-color .12s, color .12s, background .12s;
}
.reun-autom-dest-card input{ display:none; }
.reun-autom-dest-card:hover{
  border-color:rgba(110,176,255,.45); color:var(--text);
  background:rgba(110,176,255,.05);
}
.reun-autom-dest-card.ativo{
  border-color:#6eb0ff; color:var(--text);
  background:rgba(110,176,255,.1);
}
body.tema-claro .reun-autom-dest-card.ativo{
  border-color:#1769c9; background:rgba(23,105,201,.08);
}
.reun-autom-ritual-panel--gat{
  margin-top:4px;
  padding:14px 16px 12px;
  border-radius:10px;
  border:1px solid rgba(90,160,255,.25);
  background:rgba(48,142,255,.07);
}
body.tema-claro .reun-autom-ritual-panel--gat{
  background:rgba(23,105,201,.07);
  border-color:rgba(23,105,201,.22);
}
.reun-autom-ritual-panel-title{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted2);
  margin:0 0 2px;
}
.reun-autom-check-line--ritual-gat{
  padding:6px 0 2px;
}
.reun-autom-crm-opcoes-wrap{
  margin:10px 0 12px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
body.tema-claro .reun-autom-crm-opcoes-wrap{
  background:rgba(13,43,94,.04);
}
.reun-autom-crm-opcoes-kicker{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:2px;
}
.reun-autom-crm-opcoes-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.reun-autom-crm-op-chip.reun-autom-crm-op-chip--on{
  border-color:rgba(48,142,255,.7) !important;
  box-shadow:0 0 0 1px rgba(48,142,255,.22);
  background:rgba(48,142,255,.14) !important;
  color:var(--text) !important;
}
.reun-autom-check-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.reun-autom-check-line input{
  margin-top:3px;
  flex-shrink:0;
  width:17px;
  height:17px;
  accent-color:#308eff;
}
.reun-autom-form-card .form-field > label{
  font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:3px;
}
.reun-autom-field-hint,
.reun-autom-form-card .reun-autom-field-hint{
  font-size:11.5px; line-height:1.45; color:var(--muted); margin-top:5px;
}
.reun-autom-dataset-row{
  display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; width:100%;
}
.reun-autom-dataset-select-wrap{ flex:1; min-width:min(100%, 220px); }
.reun-autom-btn-lista{ flex-shrink:0; align-self:flex-start; white-space:nowrap; }
.reun-autom-input-compact{ max-width:110px; }
.reun-autom-inline-field{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.reun-autom-input-suffix{
  font-size:13px; color:var(--muted); font-weight:600; user-select:none;
}
.reun-autom-field-limite .reun-autom-input-compact,
.reun-autom-field-cooldown .reun-autom-input-compact{ max-width:90px; }

/* Banner de aviso */
.reun-autom-banner{
  padding:11px 14px; border-radius:10px; font-size:13px; line-height:1.5;
  margin-bottom:16px; display:flex; align-items:flex-start; gap:9px;
}
.reun-autom-banner--warn{
  background:rgba(249,168,42,.10); border:1px solid rgba(249,168,42,.3); color:var(--text);
}
.reun-autom-banner--muted{
  background:var(--surface2); border:1px solid var(--border); color:var(--muted);
}

/* Grid de campos */
.reun-autom-form-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 22px;
}
@media (max-width:720px){
  .reun-autom-form-grid{ grid-template-columns:1fr; }
}

/* ── Queda de volume: UI redesenhada ───────────────────────────── */

/* Timeline */
.raev-timeline{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:12px; padding:12px 16px; margin-bottom:14px;
}
body.tema-claro .raev-timeline{ background:rgba(13,43,94,.03); }
.raev-tl-block{ flex:1; min-width:0; }
.raev-tl-block-label{
  font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:4px;
}
.raev-tl-ant .raev-tl-block-label{ color:#f59e0b; }
.raev-tl-rec .raev-tl-block-label{ color:#3b82f6; }
.raev-tl-block-range{
  font-size:11px; font-family:ui-monospace,'Consolas',monospace;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.raev-tl-mid{
  display:flex; align-items:center; gap:2px; flex:2;
  position:relative; height:28px; min-width:80px;
}
.raev-tl-bar{
  height:8px; flex:1; border-radius:2px;
}
.raev-tl-bar--ant{ background:rgba(245,158,11,.35); }
.raev-tl-bar--rec{ background:rgba(59,130,246,.35); }
.raev-tl-pin{
  font-size:10px; color:var(--text); flex-shrink:0;
  background:var(--surface); padding:0 3px; border-radius:50%;
}

/* Cards de parâmetros */
.raev-params{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px;
}
@media(max-width:680px){ .raev-params{ grid-template-columns:1fr; } }
.raev-card{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--border); background:rgba(255,255,255,.03);
  transition:border-color .15s;
}
body.tema-claro .raev-card{ background:rgba(13,43,94,.03); }
.raev-card:focus-within{
  border-color:rgba(59,130,246,.4);
}
.raev-card-icon{
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.raev-card-icon--cal{ background:rgba(59,130,246,.12); color:#60a5fa; }
.raev-card-icon--drop{ background:rgba(239,68,68,.12); color:#f87171; }
.raev-card-icon--ref{ background:rgba(16,185,129,.12); color:#34d399; }
.raev-card-body{ flex:1; min-width:0; }
.raev-card-title{
  font-size:12px; font-weight:700; color:var(--text);
  margin-bottom:7px; line-height:1.3;
}
.raev-card-hint{
  font-size:11px; color:var(--muted2); line-height:1.35; margin-top:5px;
}

/* Stepper (− input +) */
.raev-stepper{
  display:flex; align-items:center; gap:4px;
}
.raev-step-btn{
  width:28px; height:28px; border-radius:6px;
  border:1.5px solid var(--border); background:rgba(255,255,255,.05);
  color:var(--text); font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:1; font-family:inherit; flex-shrink:0;
  transition:background .1s, border-color .1s;
}
.raev-step-btn:hover{
  background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.4); color:#60a5fa;
}
body.tema-claro .raev-step-btn{ background:rgba(0,0,0,.04); }
.raev-step-input{
  width:52px; height:28px; text-align:center; padding:0 4px;
  border-radius:6px; border:1.5px solid var(--border);
  background:var(--surface2); color:var(--text);
  font-size:14px; font-weight:700; font-family:ui-monospace,'Consolas',monospace;
  -moz-appearance:textfield;
}
.raev-step-input::-webkit-outer-spin-button,
.raev-step-input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.raev-step-input:focus{ outline:none; border-color:rgba(59,130,246,.5); }
.raev-step-suffix{
  font-size:12px; font-weight:600; color:var(--muted2); white-space:nowrap;
}

/* Toggle tipo de referência (Consecutivo / Ano anterior) */
.raev-tipo-ref{
  display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;
}
.raev-tipo-ref-btn{
  display:flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:20px; font-size:12px; font-weight:600;
  border:1.5px solid var(--border); background:transparent;
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.raev-tipo-ref-btn:hover{
  border-color:rgba(59,130,246,.4); color:var(--text);
}
.raev-tipo-ref-btn.ativo{
  background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.5); color:#60a5fa;
}
body.tema-claro .raev-tipo-ref-btn.ativo{
  background:rgba(23,105,201,.1); border-color:rgba(23,105,201,.35); color:#1d6cc8;
}

/* Resumo dinâmico */
.raev-summary{
  font-size:12.5px; color:var(--muted); line-height:1.45;
  background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.2);
  border-radius:8px; padding:9px 13px;
}
body.tema-claro .raev-summary{ background:rgba(23,105,201,.06); border-color:rgba(23,105,201,.18); }
.raev-summary strong{ color:var(--text); }
.reun-autom-hint-strong{
  margin-top:6px !important; line-height:1.45 !important;
}

/* Blocos opcionais (gatilho ERP / CRM / etc.) */
/* Blocos de passo opcionais — seções full-width dentro do card */
.reun-autom-opt-block{
  padding:20px 24px 22px;
  border-top:1px solid var(--border);
}
.reun-autom-opt-block--panel{
  background:rgba(var(--primary-rgb),.03);
  border-top-color:rgba(var(--primary-rgb),.14);
}
body.tema-claro .reun-autom-opt-block--panel{
  background:rgba(13,43,94,.025);
  border-top-color:rgba(13,43,94,.1);
}
.reun-autom-opt-block-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:14px;
}
.reun-autom-opt-block-head .reun-autom-opt-block-title{ margin-bottom:0; }
.reun-autom-opt-block-lead{
  font-size:12px; color:var(--muted); line-height:1.5; margin:4px 0 12px; padding-left:40px;
}
.reun-autom-opt-block-title{
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  color:var(--text); margin-bottom:0;
}

/* Toggles de canais */
.reun-autom-toggle-grid{
  display:flex; flex-direction:column; gap:4px; max-width:680px;
}
.reun-autom-nt-inner{
  margin-top:0 !important; cursor:pointer;
  padding:8px 10px; border-radius:9px;
  transition:background .12s;
}
.reun-autom-nt-inner:hover{ background:rgba(255,255,255,.04); }
body.tema-claro .reun-autom-nt-inner:hover{ background:rgba(13,43,94,.04); }

/* Requisitos */
.reun-autom-requisitos{
  font-size:12px; color:var(--muted); line-height:1.5;
  margin:16px 24px 0; padding:10px 13px; border-radius:8px;
  background:rgba(var(--primary-rgb),.05); border:1px dashed rgba(var(--primary-rgb),.22);
}

/* Campo mensagem WhatsApp */
.reun-autom-msg-field{ margin-top:0; padding:20px 24px 0; }

/* Label row com botão de variáveis */
.reun-autom-msg-label-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:7px; gap:8px;
}
.reun-autom-msg-label-row label{ margin:0; }

/* Wrapper do botão + painel (position:relative para ancorar o painel) */
.reun-autom-tag-wrap{ position:relative; }

/* Botão "Variáveis" */
.reun-autom-tag-opener{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:7px;
  border:1.5px solid rgba(var(--primary-rgb),.3); background:rgba(var(--primary-rgb),.07);
  color:var(--accent); font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:background .12s, border-color .12s;
}
.reun-autom-tag-opener:hover{
  background:rgba(var(--primary-rgb),.14); border-color:rgba(var(--primary-rgb),.5);
}
.reun-autom-tag-opener.aberto{
  background:rgba(var(--primary-rgb),.18); border-color:var(--accent);
}

/* Painel flutuante */
.reun-autom-tag-panel{
  display:none;
  position:absolute; right:0; top:calc(100% + 6px);
  width:360px; max-height:360px;
  background:#111b21; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.45);
  z-index:9600; flex-direction:column; overflow:hidden;
}
body.tema-claro .reun-autom-tag-panel{
  background:#f0f2f5; box-shadow:0 8px 32px rgba(0,0,0,.18);
}
.reun-autom-tag-panel.aberto{ display:flex; }

/* Cabeçalho do painel (busca) */
.reun-autom-tag-panel-hd{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.reun-autom-tag-search{
  flex:1; border:none; background:transparent; outline:none;
  font-size:13px; color:var(--text); font-family:inherit;
}
.reun-autom-tag-search::placeholder{ color:var(--muted2); }
.reun-autom-tag-close{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px;
  border:none; background:transparent; color:var(--muted2);
  cursor:pointer; flex-shrink:0;
  transition:background .12s, color .12s;
}
.reun-autom-tag-close:hover{ background:rgba(255,255,255,.08); color:var(--text); }
body.tema-claro .reun-autom-tag-close:hover{ background:rgba(0,0,0,.06); }

/* Filtros de categoria */
.reun-autom-tag-panel-cats{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:8px 12px 6px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.reun-autom-tag-cat-btn{
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:5px;
  border:1px solid var(--border); background:transparent;
  color:var(--muted2); cursor:pointer; font-family:inherit;
  transition:background .1s, color .1s, border-color .1s;
}
.reun-autom-tag-cat-btn:hover{
  background:rgba(var(--primary-rgb),.1); border-color:rgba(var(--primary-rgb),.3); color:var(--accent);
}
.reun-autom-tag-cat-btn.ativo{
  background:rgba(var(--primary-rgb),.15); border-color:var(--accent); color:var(--accent);
}

/* Lista de tags */
.reun-autom-tag-panel-list{
  overflow-y:auto; padding:6px;
  scrollbar-width:thin; scrollbar-color:#374045 transparent;
}
.reun-autom-tag-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:7px 10px; border-radius:8px; cursor:pointer;
  transition:background .1s;
}
.reun-autom-tag-item:hover{ background:rgba(var(--primary-rgb),.1); }
.reun-autom-tag-item-code{
  font-family:ui-monospace,'Consolas',monospace; font-size:11.5px;
  font-weight:700; color:var(--accent); white-space:nowrap; flex-shrink:0;
  background:rgba(var(--primary-rgb),.1); padding:2px 6px; border-radius:5px;
  border:1px solid rgba(var(--primary-rgb),.2);
}
.reun-autom-tag-item-info{ min-width:0; }
.reun-autom-tag-item-desc{ font-size:12px; color:var(--muted); line-height:1.35; }
.reun-autom-tag-item-ex{
  font-size:11px; color:var(--muted2); margin-top:2px;
  font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reun-autom-tag-empty{
  padding:24px 12px; text-align:center; font-size:12px; color:var(--muted2);
}

/* chips antigos (ocultos, mantidos para JS compat) */
.reun-autom-tag-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 10px; }
.reun-autom-tag-chip{
  font-size:11px; font-family:ui-monospace,'Consolas',monospace;
  padding:4px 9px; border-radius:6px;
  border:1px solid rgba(var(--primary-rgb),.25); background:rgba(var(--primary-rgb),.07);
  color:var(--accent); font-weight:600; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.reun-autom-tag-chip:hover{ background:rgba(var(--primary-rgb),.16); border-color:rgba(var(--primary-rgb),.4); }
.reun-autom-vars-details{
  margin-top:10px; font-size:13px; color:var(--text);
}
.reun-autom-vars-details summary{
  cursor:pointer; color:var(--accent); font-weight:600; user-select:none;
  display:inline-flex; align-items:center; gap:5px;
}
.reun-autom-vars-table{
  margin-top:10px; font-size:12px; border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
}
.reun-autom-var-row{
  display:grid; grid-template-columns:minmax(130px, 24%) 1fr;
  gap:10px; padding:9px 12px; border-bottom:1px solid var(--border);
  align-items:start;
}
.reun-autom-var-row:last-child{ border-bottom:none; }
.reun-autom-var-row:nth-child(even){ background:rgba(255,255,255,.025); }
body.tema-claro .reun-autom-var-row:nth-child(even){ background:rgba(13,43,94,.03); }
.reun-autom-var-tag{ font-family:monospace; color:var(--accent); font-weight:700; }
.reun-autom-var-desc{ color:var(--muted); line-height:1.45; }
.reun-autom-var-ex{ font-size:11px; color:var(--muted2); margin-top:3px; font-style:italic; }

/* Ações / botões do formulário */
.reun-autom-actions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:0; padding:18px 24px;
  align-items:center; border-top:1px solid var(--border);
  background:rgba(0,0,0,.04);
}
body.tema-claro .reun-autom-actions{ background:rgba(13,43,94,.03); }
.reun-autom-actions .btn.btn-ghost{
  background:transparent; border:1px dashed var(--border); color:var(--muted);
}
.reun-autom-actions .btn.btn-ghost:hover{ border-style:solid; border-color:var(--border); color:var(--text); }

/* Alinha campos com o badge do step dentro de opt-blocks */
.reun-autom-opt-block .reun-autom-form-grid,
.reun-autom-opt-block .form-field:not(.reun-autom-msg-field) {
  padding-left: 40px;
}
@media (max-width:600px) {
  .reun-autom-opt-block .reun-autom-form-grid,
  .reun-autom-opt-block .form-field:not(.reun-autom-msg-field) {
    padding-left: 0;
  }
  .reun-autom-step-badge{ width:22px; height:22px; font-size:11px; }
  .reun-autom-step-header{ gap:9px; }
}

/* Estado vazio (sem regras) */
.reun-autom-empty{
  text-align:center; padding:30px 20px 24px;
  color:var(--muted); font-size:13px; line-height:1.6;
}
.reun-autom-empty-ico{
  width:48px; height:48px; border-radius:50%;
  background:rgba(var(--primary-rgb),.15);
  border:1px solid rgba(var(--primary-rgb),.2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
  color:var(--accent);
}
.reun-autom-empty strong{ display:block; color:var(--text); font-size:14px; margin-bottom:4px; }

/* ── Filtros Visão Geral + Positivação: 2 colunas em mobile ── */
@media (max-width: 640px) {
  /* Visão Geral: grid 2 colunas */
  #com-erp-visao-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
  }
  #com-erp-visao-hero-actions > div { min-width: 0; }
  #com-erp-visao-hero-actions > div > div {
    display: flex !important;
    width: 100%;
  }
  #com-erp-visao-hero-actions > div input,
  #com-erp-visao-hero-actions > div select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Positivação: grid 2 colunas, vendedor ocupa linha inteira */
  .com-erp-posit-filtros {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
  }
  .com-erp-posit-filtros > div { min-width: 0; }
  .com-erp-posit-filtros__vendedor { grid-column: 1 / -1; }
  .com-erp-posit-filtros > div select,
  .com-erp-posit-filtros > div input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }
}

/* Preview estilo WhatsApp */
.reun-autom-wpp-preview-wrap{
  display:flex; justify-content:center; padding:8px 0 4px;
}
.reun-autom-wpp-phone{
  width:min(320px, 100%);
  border-radius:28px; padding:12px 12px 18px;
  background:#1f2c34;
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.reun-autom-wpp-phone-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 6px 12px; color:#e9edef; font-size:14px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.reun-autom-wpp-phone-bar small{ font-weight:500; opacity:.72; font-size:11px; }
.reun-autom-wpp-phone-bar-ico{ display:flex; align-items:center; color:#25d366; }
.reun-autom-wpp-phone-bar-ico svg{ display:block; }
.reun-autom-wpp-chat{
  padding:14px 4px 6px; min-height:140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='%23ffffff' fill-opacity='.03'%3E%3Cpath d='M0 0h40v40H0zm40 40h40v40H40z'/%3E%3C/svg%3E");
  border-radius:0 0 18px 18px;
}
.reun-autom-wpp-bubble{
  max-width:92%; margin-left:0; margin-right:auto;
  background:#005c4b; color:#e9edef;
  padding:8px 10px 9px 12px; border-radius:4px 12px 12px 12px;
  font-size:13.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word;
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.reun-autom-wpp-time{
  text-align:right; font-size:10px; color:rgba(233,237,240,.55);
  margin-top:4px; padding-right:2px;
}
.reun-autom-wpp-foot{
  text-align:center; font-size:11px; color:var(--muted); margin-top:14px; line-height:1.4;
}
body.tema-claro .reun-autom-wpp-foot{ color:var(--muted); }

/* ── AUTOMAÇÃO USABILITY ─────────────────────────────────── */
/* tooltip ⓘ */
.autom-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:var(--muted2);color:var(--bg);border-radius:50%;font-size:9px;font-weight:700;cursor:help;border:none;vertical-align:middle;margin-left:5px;position:relative;flex-shrink:0;line-height:1;padding:0;font-family:inherit;}
.autom-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--card);color:var(--text);font-size:11.5px;line-height:1.55;padding:9px 13px;border-radius:9px;border:1px solid var(--border);width:270px;text-align:left;white-space:normal;font-weight:400;opacity:0;pointer-events:none;transition:opacity .15s;z-index:400;box-shadow:0 4px 18px var(--shadow);}
.autom-tip::before{content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);border:4px solid transparent;border-top:4px solid var(--border);opacity:0;pointer-events:none;transition:opacity .15s;z-index:401;}
.autom-tip:hover::after,.autom-tip:focus::after,.autom-tip:hover::before,.autom-tip:focus::before{opacity:1;}
/* wizard stepper */
.autom-wiz-nav{display:flex;align-items:center;padding:14px 24px 12px;gap:0;border-bottom:1px solid var(--border);}
.autom-wiz-step-btn{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;padding:4px 6px;color:var(--muted);font-size:12.5px;white-space:nowrap;transition:color .15s;font-family:inherit;}
.autom-wiz-step-btn:hover{color:var(--text);}
.autom-wiz-step-btn.awz-active{color:var(--accent2);font-weight:600;}
.autom-wiz-step-btn.awz-done{color:var(--success);}
.autom-wiz-step-num{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--border);font-size:11px;font-weight:700;flex-shrink:0;transition:background .2s,color .2s;}
.autom-wiz-step-btn.awz-active .autom-wiz-step-num{background:var(--accent);color:#fff;}
.autom-wiz-step-btn.awz-done .autom-wiz-step-num{background:var(--success);color:#fff;}
.autom-wiz-connector{flex:1;height:2px;background:var(--border);min-width:16px;max-width:44px;transition:opacity .2s;}
.autom-wiz-pane{padding-top:4px;}
#autom-wiz-mode-chip{display:flex;align-items:center;gap:7px;padding:7px 16px;margin:0 0 2px;font-size:12px;font-weight:600;border-bottom:1px solid var(--border);color:var(--muted);}
#autom-wiz-mode-chip .awmc-badge{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
#autom-wiz-mode-chip .awmc-badge--ritual{background:rgba(34,201,122,.14);color:#22c97a;border:1px solid rgba(34,201,122,.25);}
#autom-wiz-mode-chip .awmc-badge--desemp{background:rgba(59,130,246,.14);color:#60a5fa;border:1px solid rgba(59,130,246,.3);}
.autom-wiz-foot{display:flex;gap:10px;align-items:center;padding:18px 0 6px;border-top:1px solid var(--border);margin:20px 24px 0;}
.autom-wiz-spacer{margin-left:auto;}
.autom-wiz-ritual-note{display:none;background:rgba(34,201,122,.08);border:1px solid rgba(34,201,122,.25);border-radius:10px;padding:14px 18px;margin:16px 24px;font-size:13px;color:var(--success);line-height:1.55;}
/* summary card */
.autom-summary-card{display:none;background:rgba(48,142,255,.1);border:1px solid rgba(48,142,255,.25);border-radius:10px;padding:14px 18px;margin:0 24px 16px;font-size:13px;line-height:1.6;color:var(--text);}
.autom-summary-card.autom-vis{display:block;}
.autom-summary-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent2);margin-bottom:8px;}
/* presets */
.autom-preset-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 24px;background:var(--surface2);border-bottom:1px solid var(--border);}
.autom-preset-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);flex-shrink:0;}
.autom-preset-btn{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 13px;font-size:12px;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,color .15s;display:inline-flex;align-items:center;gap:5px;font-family:inherit;}
.autom-preset-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
/* collapse details */
.autom-det{margin-top:10px;margin-bottom:2px;}
.autom-det>summary{font-size:12px;font-weight:600;color:var(--muted2);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;padding:4px 0;user-select:none;}
.autom-det>summary::before{content:'▶';font-size:9px;transition:transform .2s;display:inline-block;}
.autom-det[open]>summary::before{transform:rotate(90deg);}
.autom-det>summary::-webkit-details-marker{display:none;}
.autom-det-body{padding:10px 0 2px;}

/* Logística ERP — exportar relatório (botão + menu de formato) */
.erp-log-export{
  position:relative;
  display:inline-flex;
  vertical-align:middle;
}
.erp-log-export-split{
  display:inline-flex;
  align-items:stretch;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.erp-log-export-main{
  border:none !important;
  border-radius:0 !important;
  gap:6px;
  white-space:nowrap;
  padding-left:12px !important;
  padding-right:10px !important;
}
.erp-log-export-main-text{ font-weight:600; }
.erp-log-export-toggle{
  border:none !important;
  border-radius:0 !important;
  border-left:1px solid var(--border) !important;
  padding:0 9px !important;
  min-width:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  background:var(--surface2) !important;
}
.erp-log-export-toggle:hover,
.erp-log-export.open .erp-log-export-toggle{
  color:var(--text);
  background:var(--surface3, rgba(255,255,255,.06)) !important;
}
.erp-log-export.open .erp-log-export-split{
  border-color:var(--accent, #3b82f6);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
}
.erp-log-export.is-loading .erp-log-export-split{ opacity:.7; pointer-events:none; }
.erp-log-export-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:120;
  min-width:168px;
  padding:4px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.erp-log-export-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:none;
  border-radius:7px;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.erp-log-export-menu-item:hover{ background:var(--surface2); }
.erp-log-export-menu-item.is-active{
  background:color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  color:var(--accent, #60a5fa);
}
.erp-log-export-menu-ext{
  font-size:10px;
  font-weight:500;
  color:var(--muted);
}
.erp-log-lt-faixas-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.erp-log-lt-faixas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:8px;
}
.erp-log-lt-faixa{
  display:block;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface2);
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.erp-log-lt-faixa:hover:not(:disabled){
  border-color:color-mix(in srgb, var(--accent, #0ea5e9) 45%, var(--border));
  background:var(--surface);
}
.erp-log-lt-faixa.is-active{
  border-color:var(--accent, #0ea5e9);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent, #0ea5e9) 35%, transparent);
  background:color-mix(in srgb, var(--accent, #0ea5e9) 10%, var(--surface2));
}
.erp-log-lt-faixa.is-empty,
.erp-log-lt-faixa:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.erp-log-lt-faixa-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  margin-bottom:6px;
}
.erp-log-lt-faixa-label{ font-weight:700; color:var(--text); }
.erp-log-lt-faixa-qtd{ color:var(--muted); white-space:nowrap; }
.erp-log-lt-faixa-bar{
  height:6px;
  background:var(--border);
  border-radius:4px;
  overflow:hidden;
}
.erp-log-lt-faixa-bar-fill{
  height:100%;
  background:#0ea5e9;
  border-radius:4px;
}
.erp-log-lt-faixa.is-active .erp-log-lt-faixa-bar-fill{ background:var(--accent, #0ea5e9); }
.erp-log-lt-faixa-chip{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--muted);
  margin:0 0 10px;
  padding:8px 10px;
  border-radius:8px;
  background:color-mix(in srgb, var(--accent, #0ea5e9) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, #0ea5e9) 25%, var(--border));
}
.erp-log-drill-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.erp-log-lt-faixa-clear{
  border:none;
  background:transparent;
  color:var(--accent, #60a5fa);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}

/* ══════════════════════════════════════════════════════════════
   LOGÍSTICA · REDESIGN UI/UX
   ══════════════════════════════════════════════════════════════ */

/* ── Hero Banner ── */
.log-hero{
  position:relative;
  display:flex;
  align-items:stretch;
  background:rgba(234,88,12,.07);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:16px;
}
.log-hero-accent-bar{
  width:4px;
  flex-shrink:0;
  background:#f97316;
  border-radius:14px 0 0 14px;
}
.log-hero-body{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1;
  padding:14px 16px;
  flex-wrap:wrap;
}
.log-hero-icon-wrap{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:11px;
  background:rgba(234,88,12,.14);
  border:1px solid rgba(234,88,12,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f97316;
}
body.tema-claro .log-hero-icon-wrap{
  color:#c2410c;
  background:rgba(234,88,12,.1);
  border-color:rgba(234,88,12,.22);
}
.log-hero-content{
  flex:1;
  min-width:200px;
}
.log-hero-title{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  margin-bottom:5px;
  letter-spacing:-.015em;
}
.log-hero-desc{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.6;
  max-width:680px;
}
.log-hero-desc strong{
  color:var(--text);
  font-weight:700;
}
.log-hero-pills{
  display:flex;
  gap:6px;
  align-items:flex-start;
  flex-wrap:wrap;
  flex-shrink:0;
  padding-top:2px;
}
.log-hero-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 11px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  line-height:1;
}
.log-hero-pill--warn{
  background:rgba(251,146,60,.13);
  border:1px solid rgba(251,146,60,.3);
  color:#fb923c;
}
.log-hero-pill--info{
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.25);
  color:#38bdf8;
}
body.tema-claro .log-hero-pill--warn{
  color:#c2410c;
  background:rgba(234,88,12,.09);
  border-color:rgba(234,88,12,.22);
}
body.tema-claro .log-hero-pill--info{
  color:#0369a1;
  background:rgba(3,105,161,.09);
  border-color:rgba(3,105,161,.22);
}

/* ── Control bar (segment + filtros) ── */
.log-control-bar{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px 16px;
}
.log-control-sit-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.log-control-sit-hint{
  margin:0 0 0 auto;
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
  max-width:min(100%, 280px);
  text-align:right;
}
@media(max-width:720px){
  .log-control-sit-hint{
    margin-left:0;
    text-align:left;
    max-width:100%;
    flex:1 1 100%;
  }
}

/* ── Situação Segment Control ── */
.log-seg-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex-shrink:0;
}
.log-seg-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  display:block;
}
.log-seg{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:3px;
  gap:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.log-seg-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 15px;
  border:1.5px solid transparent;
  border-radius:7px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
  white-space:nowrap;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.log-seg-btn:hover{
  color:var(--text);
  background:var(--surface2);
}
.log-seg-btn--warn.active{
  background:rgba(234,88,12,.14);
  border-color:rgba(234,88,12,.45);
  color:#fb923c;
  box-shadow:0 1px 5px rgba(234,88,12,.18);
}
.log-seg-btn--ok.active{
  background:rgba(34,197,94,.11);
  border-color:rgba(34,197,94,.38);
  color:#4ade80;
  box-shadow:0 1px 5px rgba(34,197,94,.14);
}
body.tema-claro .log-seg-btn--warn.active{
  color:#c2410c;
  background:rgba(234,88,12,.1);
  border-color:rgba(234,88,12,.35);
}
body.tema-claro .log-seg-btn--ok.active{
  color:#16a34a;
  background:rgba(22,163,74,.09);
  border-color:rgba(22,163,74,.3);
}
.log-seg-btn--info.active{
  background:rgba(14,165,233,.12);
  border-color:rgba(14,165,233,.4);
  color:#38bdf8;
  box-shadow:0 1px 5px rgba(14,165,233,.16);
}
body.tema-claro .log-seg-btn--info.active{
  color:#0369a1;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.32);
}

/* ── Filtros em grade (preenche a largura, sem vazio lateral) ── */
.log-filters-row.log-filters-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:10px 12px;
  align-items:end;
  margin-bottom:0;
  width:100%;
}
.log-filters-grid .com-fil-field{
  grid-column:span 3;
  min-width:0;
}
.log-filters-grid .com-fil-field--grow{
  grid-column:span 6;
}
.log-filters-grid .com-fil-field--mun{
  grid-column:span 4;
}
.log-filters-grid #erp-log-de-wrap,
.log-filters-grid #erp-log-ate-wrap{
  grid-column:span 2;
}
@media(max-width:1100px){
  .log-filters-grid .com-fil-field{ grid-column:span 4; }
  .log-filters-grid .com-fil-field--grow{ grid-column:span 8; }
  .log-filters-grid .com-fil-field--mun{ grid-column:span 6; }
}
@media(max-width:720px){
  .log-filters-row.log-filters-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .log-filters-grid .com-fil-field,
  .log-filters-grid .com-fil-field--grow,
  .log-filters-grid .com-fil-field--mun,
  .log-filters-grid #erp-log-de-wrap,
  .log-filters-grid #erp-log-ate-wrap{
    grid-column:span 1;
  }
  .log-filters-grid .com-fil-field--grow{
    grid-column:1 / -1;
  }
}

/* ── Search com ícone interno ── */
.log-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.log-search-ico{
  position:absolute;
  left:9px;
  display:flex;
  align-items:center;
  color:var(--muted);
  pointer-events:none;
  z-index:1;
}
.log-search-input{
  padding-left:30px !important;
}

/* ── Data Toolbar ── */
.log-data-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.log-data-count-wrap{
  display:flex;
  align-items:center;
}
.log-data-count{
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3px 12px;
  letter-spacing:.01em;
}
.log-data-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

/* ── Responsive ── */
@media(max-width:640px){
  .log-hero-pills{ display:none; }
  .log-control-sit-row{ flex-direction:column; align-items:flex-start; }
  .log-seg{ width:100%; }
  .log-seg-btn{ flex:1; justify-content:center; padding:8px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   MÓDULO BI OVERVIEW
   ══════════════════════════════════════════════════════════════ */

/* Card genérico */
/* ═══════════════════════════════════════════════════════════════
   MÓDULO BI OVERVIEW — design profissional
   ═══════════════════════════════════════════════════════════════ */

/* Card base */
.bi-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.bi-card-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── KPI Cards ────────────────────────────────────── */
.bi-kpi-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--bi-accent, #3b82f6);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .18s;
}
.bi-kpi-card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.28);
  transform: translateY(-1px);
}
.bi-kpi-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: .1;
  pointer-events: none;
  color: var(--bi-accent, #3b82f6);
}
.bi-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.bi-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  word-break: break-all;
  margin: 4px 0 2px;
  letter-spacing: -.02em;
}
.bi-kpi-sub {
  font-size: 10px;
  color: var(--muted);
}
.bi-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 5px;
  width: fit-content;
  letter-spacing: .01em;
}
.bi-kpi-delta.up   { background: rgba(16,185,129,.14); color: #34d399; }
.bi-kpi-delta.down { background: rgba(239,68,68,.13);  color: #f87171; }
.bi-kpi-multi-line {
  font-size: 11.5px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.7;
}

/* ── Navegação métrica lateral ────────────────────── */
.bi-chart-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  flex-shrink: 0;
}
.bi-chart-nav-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  padding: 7px 10px 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, color .14s;
  font-family: inherit;
  position: relative;
}
.bi-chart-nav-btn::before {
  content: '';
  position: absolute;
  left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: #3b82f6;
  border-radius: 2px;
  transition: height .14s;
}
.bi-chart-nav-btn:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.65); }
.bi-chart-nav-btn.active { background: rgba(59,130,246,.13); color: #60a5fa; }
.bi-chart-nav-btn.active::before { height: 55%; }

/* ── Ranking vendedores ───────────────────────────── */
.bi-rank-row {
  display: grid;
  grid-template-columns: 20px 1fr 80px 80px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bi-rank-row:last-child { border-bottom: none; }
.bi-rank-num {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.22);
  text-align: center;
}
.bi-rank-label {
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bi-rank-bar-wrap {
  width: 80px;
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.bi-rank-bar {
  height: 100%;
  background: #3b82f6;
  border-radius: 4px;
  transition: width .4s ease;
}
.bi-rank-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

/* ── Lista produtos ───────────────────────────────── */
.bi-prod-row {
  display: grid;
  grid-template-columns: 20px 1fr 70px 82px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bi-prod-row:last-child { border-bottom: none; }
.bi-prod-num {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.22);
  text-align: center;
}
.bi-prod-label {
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bi-prod-bar-wrap {
  width: 70px;
  height: 4px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.bi-prod-bar {
  height: 100%;
  background: #8b5cf6;
  border-radius: 3px;
  transition: width .4s ease;
}
.bi-prod-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* ── Chips de filtro ativo ────────────────────────── */
.bi-chips-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(59,130,246,.07);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 10px;
  margin-bottom: 14px;
}
.bi-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.3);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.bi-chip--clear {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  font-family: inherit;
}
.bi-chip--clear:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.09); }
.bi-chip-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 1px;
  cursor: pointer;
  opacity: .65;
  font-family: inherit;
}
.bi-chip-close:hover { opacity: 1; }

/* ── Hover e seleção em linhas clicáveis ─────────── */
.bi-rank-row {
  cursor: pointer;
  border-radius: 6px;
  transition: background .14s;
}
.bi-rank-row:hover { background: rgba(255,255,255,.04); }
.bi-rank-row--active {
  background: rgba(59,130,246,.1) !important;
  outline: 1px solid rgba(59,130,246,.22);
}
.bi-rank-row--active .bi-rank-num { color: #60a5fa; }

/* ── Skeleton loading ─────────────────────────────── */
@keyframes bi-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.bi-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%);
  background-size: 1200px 100%;
  animation: bi-shimmer 1.5s infinite linear;
  border-radius: 5px;
}

/* ── Responsivo ───────────────────────────────────── */
@media (max-width: 1100px) {
  #bi-row1 { grid-template-columns: 1fr 1fr !important; }
  #bi-row2 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
  #bi-row1, #bi-row2 { grid-template-columns: 1fr !important; }
  .bi-chart-nav { flex-direction: row; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE — Comercial ERP, Logística,
   Financeiro, Cobrança, BI Overview
   ══════════════════════════════════════════════════════════════ */

/* ── Panel inner: padding compacto no mobile ── */
@media(max-width:900px){
  .panel-inner{ padding:16px; }
}
@media(max-width:480px){
  .panel-inner{ padding:12px; }
}

/* ══ COMERCIAL ERP ════════════════════════════════════════════ */

/* Header de ações: empilha em tela pequena */
@media(max-width:600px){
  #panel-comercial .panel-inner > div:first-child{
    flex-direction:column;
    align-items:flex-start !important; /* override inline align-items:center */
    gap:8px !important;
  }
  #panel-comercial .panel-inner > div:first-child > div:last-child{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  /* Botões do header: crescem igualmente */
  #btn-com-relatorio, #btn-com-sync{
    flex:1 1 auto;
    justify-content:center;
    min-width:0;
  }
  /* Abas ERP muito compactas no mobile */
  #com-tabs-erp .com-tab{ padding:7px 9px; font-size:11px; }
  /* Abas CRM */
  #com-tabs-crm .com-tab{ padding:7px 10px; font-size:11.5px; }
  /* Sync badge em linha */
  #com-sync-badge{ flex-wrap:wrap; }
}

/* ══ LOGÍSTICA ════════════════════════════════════════════════ */

/* Hero: conteúdo não força largura mínima em mobile */
@media(max-width:600px){
  .log-hero-content{ min-width:0; }
  /* Ocultar rótulo "Baixar relatório" — fica só o ícone */
  .erp-log-export-main-text{ display:none; }
  /* Botão personalizar: diminuir padding, manter ícone */
  #com-erp-log-btn-personalizar{ padding-left:9px; padding-right:9px; }
}

/* Filtros do Kanban de Logística (linha à parte, sem .log-filters-grid):
   campos com largura fixa em px por inline style não encolhem sozinhos —
   força quebra em 2 colunas (1 em telas bem estreitas) e libera o botão
   "Atualizar"/toggles que ficavam cortados por causa de flex-shrink:0. */
@media(max-width:640px){
  /* Relatórios (Financeiro): 2ª coluna do grid tinha 380px fixos — maior
     que a tela toda. Empilha em 1 coluna em mobile. */
  .fin-rel-grid{
    grid-template-columns:1fr !important;
  }
  /* Caixa Física: KPIs em grid de 4 colunas — mesmo problema do card
     de Saúde (item de grid sem min-width:0 estica além da coluna).
     Em mobile vira 2 colunas, texto grande dos valores não cabia em 4. */
  .fin-kpi-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .fin-kpi-grid > div{ min-width:0; }
  /* Consumo MP: grupos de botões de período/filtro de data não quebravam
     linha sozinhos dentro do .prod-toolbar (só os irmãos quebravam entre
     si) — o grupo inteiro ficava mais largo que a tela. */
  .prod-consumo-periodo-btns{
    flex-wrap:wrap !important;
  }
}
@media(max-width:640px){
  .log-kb-filtros-row > .com-fil-field{
    width:calc(50% - 5px) !important;
    flex:1 1 calc(50% - 5px) !important;
    min-width:0 !important;
  }
  .log-kb-filtros-row > .com-fil-field[style*="170px"]{
    width:100% !important;
    flex:1 1 100% !important;
  }
  .log-kb-filtros-toggles{
    flex-wrap:wrap !important;
    flex-shrink:1 !important;
    height:auto !important;
    width:100%;
    row-gap:8px;
  }
}
@media(max-width:400px){
  .log-kb-filtros-row > .com-fil-field{
    width:100% !important;
    flex:1 1 100% !important;
  }
}

/* Filtros logística: 1 coluna em <480px */
@media(max-width:480px){
  .log-filters-row.log-filters-grid{
    grid-template-columns:1fr !important;
  }
  .log-filters-grid .com-fil-field,
  .log-filters-grid .com-fil-field--grow,
  .log-filters-grid .com-fil-field--mun,
  .log-filters-grid #erp-log-de-wrap,
  .log-filters-grid #erp-log-ate-wrap{
    grid-column:1 / -1 !important;
  }
  /* Toolbar: empilha contador e botões */
  .log-data-toolbar{ flex-direction:column; align-items:flex-start; }
  .log-data-actions{ width:100%; justify-content:flex-start; }
  .erp-log-export-main-text{ display:inline; }
}

/* ══ FINANCEIRO ═══════════════════════════════════════════════ */

/* Filtros Financeiro: empilha campos em mobile */
@media(max-width:600px){
  /* Botões de situação: scroll horizontal (evita quebra de linha) */
  #panel-financeiro .com-fil-field--sit > div{
    overflow-x:auto;
    scrollbar-width:none;
    flex-wrap:nowrap !important; /* override inline flex-wrap:wrap */
    -webkit-overflow-scrolling:touch;
  }
  #panel-financeiro .com-fil-field--sit > div::-webkit-scrollbar{ display:none; }
  #panel-financeiro .com-fil-field--sit .com-tab{ flex-shrink:0; }
  /* Campo buscar: largura total */
  #panel-financeiro .com-fil-field--grow{ width:100%; flex:1 1 100%; }
  #erp-fin-busca{ width:100%; box-sizing:border-box; }
}

/* ══ COBRANÇA ═════════════════════════════════════════════════ */

/* Tabs: rolagem horizontal (5 abas não cabem em mobile) */
.cob-tabs{
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
}
.cob-tabs::-webkit-scrollbar{ display:none; }
.cob-tabs .com-tab{ flex-shrink:0; }

@media(max-width:600px){
  /* Filtros inadimplência: selects ocupam a linha toda */
  #cob-filtro-cidade,
  #cob-filtro-rca{
    min-width:0 !important;
    width:100%;
    box-sizing:border-box;
    flex:1 1 100%;
  }
  /* Barra de filtros: empilha em coluna */
  #cob-sec-inadimp > div:nth-child(2){
    flex-direction:column !important; /* override inline display:flex */
    align-items:stretch !important;   /* override inline align-items:center */
  }
  /* Botões de ordem (A–Z, Valor, Atraso): permanecem em linha, não encolhem */
  #cob-sort-cidade, #cob-sort-valor, #cob-sort-atraso{
    flex-shrink:0;
  }
  /* Botão baixar: largura total */
  #cob-export-wrap{ width:100%; }
  #cob-export-btn{ width:100%; justify-content:center; }
  /* Input busca: largura total */
  #cob-busca{ width:100% !important; min-width:0 !important; flex:1 1 100% !important; }
}

/* ══ BI OVERVIEW ══════════════════════════════════════════════ */

.bi-header-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-bottom:16px;
}
.bi-filtros-bar{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.bi-fil-field{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:0 0 auto;
}
.bi-fil-field label{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
  line-height:1.2;
}
.bi-fil-field .form-input{
  height:32px;
  width:132px;
  padding:0 8px;
  font-size:12px;
}
.bi-fil-field--pos .form-input{
  width:118px;
}
.bi-fil-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.bi-fil-actions .btn{
  height:32px;
}

/* Cabeçalho BI: empilha título e filtros de data */
@media(max-width:720px){
  .bi-header-bar{
    flex-direction:column;
    align-items:flex-start !important;
  }
  .bi-filtros-bar{
    width:100%;
  }
  .bi-fil-field .form-input{
    width:120px;
  }
  .bi-fil-field--pos .form-input{
    width:110px;
  }
}

/* KPI BI: 2 colunas em telas muito pequenas */
@media(max-width:480px){
  #bi-kpis{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .bi-card{ padding:12px; }
  /* Chart nav BI: rolável horizontalmente */
  .bi-chart-nav{
    flex-direction:row !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    gap:4px;
  }
  .bi-chart-nav::-webkit-scrollbar{ display:none; }
  .bi-chart-nav-btn{
    flex-shrink:0;
    white-space:nowrap;
  }
}

/* ══ TABELAS ROLAGEM HORIZONTAL (todas as páginas) ═══════════ */

/* Financeiro e Logística: tabelas com overflow-x em container */
#com-erp-fin-wrap,
#com-erp-log-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Títulos inadimplência: wrap em mobile */
@media(max-width:480px){
  /* Container principal dos grupos cobrança */
  #cob-wrap{ overflow-x:hidden; }
}

/* ══════════════════════════════════════════════════════════════
   MÓDULO METAS ERP
   ══════════════════════════════════════════════════════════════ */

/* ── CALENDÁRIO ERP: layout responsivo ─────────────────────── */
@media(max-width:768px){
  #cal-main-grid{
    grid-template-columns: 1fr !important;
  }
  #cal-main-grid > div[style*="sticky"]{
    position: static !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Produção · Estoque — Mapão Digital
   ═══════════════════════════════════════════════════════════════ */
#panel-producao .kpi-card {
  background: var(--card, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  min-width: 0;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#panel-producao .kpi-card--btn:hover {
  border-color: var(--muted2, var(--border));
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
#panel-producao .kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
#panel-producao .kpi-chip {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
}
#panel-producao .kpi-chip svg { width: 14px; height: 14px; }
#panel-producao .kpi-foot {
  margin-top: 6px; font-size: 10px; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 5px;
  display: flex; align-items: center; gap: 4px;
}
#panel-producao .kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-producao .kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.prod-row td { padding: 6px 10px; font-size: 12px; }
.prod-row--critico { background: rgba(239,68,68,.13); }
.prod-row--atencao { background: rgba(245,158,11,.10); }
.prod-row--ok      { background: rgba(34,197,94,.07); }
.prod-row--top10   { background: rgba(99,102,241,.07); }
.prod-row--top10 td:first-child { border-left: 3px solid var(--accent); }
.prod-badge { font-size: 13px; margin-right: 2px; vertical-align: middle; }
.prod-top10-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
  margin-right: 3px;
}

/* Curva ABC badges */
.prod-curva {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  vertical-align: middle;
  letter-spacing: .04em;
}
.prod-curva--a { background: #4ade80; color: #052e16; }
.prod-curva--b { background: #facc15; color: #1c0a00; }
.prod-curva--c { background: #f87171; color: #fff; }
.prod-secao-header td { border-bottom: 1px solid rgba(99,102,241,.2); }

/* Botões de download com dropdown */
.prod-dl-group { position: relative; display: inline-flex; }
.prod-dl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 12px; font-size: 12px; cursor: pointer;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; white-space: nowrap;
}
.prod-dl-btn:hover { background: var(--bg-hover, rgba(255,255,255,.06)); }
.prod-dl-menu {
  display: none; position: fixed;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; z-index: 9500; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.prod-dl-menu.open { display: block; }
.prod-dl-menu button {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 9px 16px; font-size: 12px; background: var(--card); border: none;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.prod-dl-menu button:hover { background: var(--surface2); }
/* Menu largo com linhas label + botões de formato */
.prod-dl-menu--wide { min-width: 280px; }
.prod-dl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
}
.prod-dl-row:last-child { border-bottom: none; }
.prod-dl-label {
  font-size: 12px; color: var(--muted); font-weight: 600;
  min-width: 80px; white-space: nowrap;
}
.prod-dl-fmts { display: flex; gap: 4px; }
.prod-dl-fmts button {
  display: inline-flex; align-items: center; gap: 4px; width: auto;
  padding: 4px 9px; font-size: 11px; border-radius: 4px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.prod-dl-fmts button:hover { background: var(--bg-hover, rgba(37,99,235,.12)); border-color: #4a7faa; color: var(--text); }

/* Dropdown "Mais ações" do Mapão */
#prod-dl-menu-mais-acoes { padding: 8px; display: none; flex-direction: column; gap: 4px; }
#prod-dl-menu-mais-acoes.open { display: flex; }
.prod-ma-section { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; border-bottom: 1px solid var(--border); }
.prod-ma-section:last-child { border-bottom: none; padding-bottom: 6px; }
.prod-ma-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prod-ma-row { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-ma-section .btn { width: 100%; justify-content: flex-start; }
.prod-ma-row .btn { width: auto; flex: 1 1 auto; justify-content: center; }

/* Dropdown de período do Mapão (substitui os 2 inputs de data soltos na toolbar) */
#prod-dl-menu-periodo { padding: 10px; min-width: 220px; }
.prod-periodo-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px; }
.prod-periodo-field span { font-size: 12px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.prod-periodo-field input { flex: 1; max-width: 150px; padding: 6px 8px; font-size: 12px; }

/* KPI cards clicáveis no Mapão */
.kpi-card--btn {
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
}
.kpi-card--btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: .92;
}
.kpi-card--ativo {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

/* Cabeçalho fixo da tabela Mapão */
#prod-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-table-header, #0f172a);
}

/* Pills de filtro de linha (Branco/Massas/Cores) — importantes, ficam sempre
   visíveis na toolbar principal em vez de escondidos num menu secundário. */
.prod-linha-pills { display: flex; align-items: center; gap: 6px; }
.prod-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 12px; font-size: 12px; font-weight: 600;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.prod-pill:hover { border-color: var(--muted2, var(--border)); color: var(--text); }
.prod-pill svg { width: 12px; height: 12px; }

/* ── Filtros Mapão ─────────────────────────────────────────── */
.prod-filtros-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.prod-filtros-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.prod-filtros-row--selects .form-input,
.prod-filtros-row--selects .prod-sel {
  font-size: 13px;
  padding: 6px 32px 6px 10px;
  min-width: 150px;
  flex: 1 1 150px;
  max-width: 230px;
  width: auto;
}
.prod-input-busca  { min-width: 140px !important; max-width: 180px !important; padding-right: 10px !important; }
.prod-input-curva  { min-width: 120px !important; max-width: 150px !important; flex: 0 0 auto !important; }
.prod-periodo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.prod-periodo-lbl  { font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.prod-input-date   { font-size: 12px; padding: 6px 8px; width: 148px; min-width: 148px; flex-shrink: 0; box-sizing: border-box; }
.prod-btns-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.prod-btns-group .btn { height: 32px; }

/* KPIs 1 linha no desktop */
#prod-kpis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.prod-ise-info-wrap .prod-ise-tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 290px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 400;
  color: #cbd5e1;
  line-height: 1.6;
  z-index: 999;
  pointer-events: none;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.prod-ise-info-wrap:hover .prod-ise-tooltip {
  display: block;
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
  #prod-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .prod-filtros-row--selects .form-input {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 calc(50% - 8px);
  }
  .prod-input-busca  { flex: 1 1 100% !important; max-width: 100% !important; }
  .prod-input-curva  { flex: 1 1 calc(50% - 8px) !important; max-width: 100% !important; }
  .prod-input-date   { width: 130px; min-width: 130px; }
  .prod-periodo-wrap { max-width: 100%; overflow-x: auto; }
  .prod-btns-group   { width: 100%; }
  .prod-btns-group .btn,
  .prod-btns-group .prod-dl-group,
  .prod-btns-group .prod-dl-btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  #panel-producao .tabela-erp td,
  #panel-producao .tabela-erp th { font-size: 11px; padding: 6px 8px; }
  #panel-producao > div { max-height: calc(100vh - 200px); }
}

/* ── Tablet 641–900px ── */
@media (min-width: 641px) and (max-width: 900px) {
  #prod-kpis { grid-template-columns: repeat(4, 1fr) !important; }
  .prod-filtros-row--selects .form-input { flex: 1 1 calc(33% - 8px); }
}

/* ── Estoque de Segurança — custom number inputs ── */
.estseg-num-wrap{display:flex;align-items:center;background:#0f172a;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;}
.estseg-num-btn{width:32px;height:38px;background:rgba(255,255,255,.05);border:none;color:#94a3b8;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.estseg-num-btn:hover{background:rgba(255,255,255,.1);color:#e2e8f0;}
.estseg-num-input{flex:1;min-width:0;background:transparent;border:none;color:#e2e8f0;font-size:13px;font-weight:600;text-align:center;padding:9px 4px;outline:none;-moz-appearance:textfield;}
.estseg-num-input::-webkit-inner-spin-button,.estseg-num-input::-webkit-outer-spin-button{-webkit-appearance:none;}
.estseg-num-unit{font-size:10px;color:#475569;font-weight:600;padding-right:10px;flex-shrink:0;}
.estseg-periodo-btn{background:#0f172a;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#94a3b8;font-size:12px;font-weight:600;padding:8px 4px;cursor:pointer;text-align:center;transition:all .15s;line-height:1.2;}
.estseg-periodo-btn:hover{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.3);color:#e2e8f0;}
.estseg-periodo-btn.ativo{background:rgba(56,189,248,.15);border-color:#38bdf8;color:#38bdf8;}
.estseg-base-btn{background:#0f172a;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#94a3b8;font-size:11px;font-weight:600;padding:7px 8px;cursor:pointer;text-align:center;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px;}
.estseg-base-btn:hover{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.3);color:#e2e8f0;}
.estseg-base-btn.ativo{background:rgba(124,58,237,.15);border-color:#7c3aed;color:#a78bfa;}


/* ── Alertas de Produção / Estoque ── */

/* Inputs / selects do wizard */
.prod-al-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #253047;
  border-radius: 8px;
  padding: 9px 13px;
  color: #e2e8f0;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.prod-al-input:focus { border-color: #6366f1; }
textarea.prod-al-input { resize: vertical; }
.prod-al-field { margin-bottom: 18px; }
.prod-al-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
}

/* Steps circulares */
.prod-wiz-circle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  min-width: 48px;
}
.prod-wiz-circle-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #334155;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.prod-wiz-circle-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  transition: color .2s;
}
.prod-wiz-circle-step.ativo .prod-wiz-circle-num {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.prod-wiz-circle-step.ativo .prod-wiz-circle-label { color: #a5b4fc; }
.prod-wiz-circle-step.concluido .prod-wiz-circle-num {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.prod-wiz-line {
  flex: 1;
  height: 2px;
  background: #253047;
  margin: 0 4px;
  margin-bottom: 17px;
  transition: background .2s;
}
.prod-wiz-line.ativo { background: #6366f1; }

/* Radio cards estilo Tarefas */
.prod-al-radio-card {
  display: flex;
  cursor: pointer;
  user-select: none;
}
.prod-al-radio-card input[type=radio] { display: none; }
.prod-al-radio-body {
  flex: 1;
  background: #0f172a;
  border: 2px solid #253047;
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  transition: all .15s;
}
.prod-al-radio-card:has(input:checked) .prod-al-radio-body {
  background: rgba(99,102,241,.12);
  border-color: #6366f1;
}
.prod-al-radio-card:hover .prod-al-radio-body { border-color: #475569; }
.prod-al-radio-card--sm .prod-al-radio-body { padding: 10px 8px; }
.prod-al-radio-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: #6366f1;
}
.prod-al-radio-card:has(input:checked) .prod-al-radio-ico { color: #a5b4fc; }

/* Cards de tipo de gatilho */
.prod-al-tipo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f172a;
  border: 2px solid #253047;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  transition: all .15s;
  user-select: none;
}
.prod-al-tipo-card:hover { border-color: #475569; color: #e2e8f0; }
.prod-al-tipo-card.selecionado {
  background: rgba(99,102,241,.12);
  border-color: #6366f1;
  color: #a5b4fc;
}

/* Dias da semana */
.prod-al-dia-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #0f172a;
  border: 2px solid #253047;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  transition: all .15s;
  user-select: none;
  min-width: 40px;
}
.prod-al-dia-btn input { display: none; }
.prod-al-dia-btn:has(input:checked) {
  background: rgba(99,102,241,.15);
  border-color: #6366f1;
  color: #a5b4fc;
}

/* Cards da lista de alertas */
.prod-al-card {
  background: var(--surface2, #1e293b);
  border: 1px solid var(--border, #253047);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.prod-al-card:hover { border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99,102,241,.2); }
.prod-al-status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* Chips de destinatário */
.prod-al-dest-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  border: 1px solid #253047;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: #94a3b8;
}

.prod-al-dest-picker {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #253047;
  border-radius: 10px;
  background: #0f172a;
  padding: 4px;
}
.prod-al-dest-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 12px 6px;
}
.prod-al-dest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.prod-al-dest-item:hover { background: #1e293b; }
.prod-al-dest-item.selecionado { background: rgba(99,102,241,.12); }
.prod-al-dest-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
}
.prod-al-dest-item-nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-al-dest-item-info {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-al-dest-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

/* Aba Relatórios — Produção · Estoque */
/* ── Relatórios para WhatsApp — layout ── */
.prod-rel-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(320px, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .prod-rel-layout { grid-template-columns: 1fr; }
}
.prod-rel-col-left {
  background: #0a1120;
  border: 1px solid #1e293b;
  border-radius: 14px;
  overflow: hidden;
}
.prod-rel-col-right {
  background: #0a1120;
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 18px 20px;
}

/* ── Categoria ── */
.prod-rel-cat { margin-bottom: 4px; }
.prod-rel-cat:last-child { margin-bottom: 0; }
.prod-rel-cat-title {
  font-size: 9.5px;
  font-weight: 800;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 16px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.prod-rel-cat-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 11px;
  background: #6366f1;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Lista de itens (coluna única) ── */
.prod-rel-cat-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 12px;
}

/* ── Card de relatório ── */
.prod-rel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #1a2540;
  border-radius: 10px;
  background: #0c1627;
  transition: border-color .15s, background .15s, box-shadow .15s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.prod-rel-row:hover {
  border-color: #2a3a5c;
  background: #0f1e36;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.prod-rel-row.ativo {
  border-color: #6366f1;
  background: rgba(99,102,241,.08);
  box-shadow: 0 0 0 1px rgba(99,102,241,.2), 0 3px 12px rgba(99,102,241,.1);
}

/* Checkbox */
.prod-rel-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.prod-rel-row-main input[type=checkbox] { display: none; }
.prod-rel-check-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid #2d3f5e;
  background: #0a1120;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.prod-rel-check-box svg {
  width: 10px; height: 10px;
  stroke: transparent;
  transition: stroke .12s;
}
.prod-rel-row.ativo .prod-rel-check-box {
  border-color: #6366f1;
  background: #6366f1;
}
.prod-rel-row.ativo .prod-rel-check-box svg { stroke: #fff; }

/* Label */
.prod-rel-row-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s;
  flex: 1;
  min-width: 0;
}
.prod-rel-row.ativo .prod-rel-row-label { color: #c7d2fe; }

/* Ações: chips de formato + botão preview */
.prod-rel-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Chips de formato */
.prod-rel-fmt-chips {
  display: flex;
  gap: 3px;
}
.prod-rel-fmt-chip {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #1e2e48;
  background: #0a1120;
  color: #475569;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: border-color .12s, color .12s, background .12s;
  line-height: 1.6;
  user-select: none;
}
.prod-rel-fmt-chip:hover {
  border-color: #3a4f70;
  color: #94a3b8;
}
.prod-rel-fmt-chip.ativo {
  border-color: #6366f1;
  background: rgba(99,102,241,.18);
  color: #a5b4fc;
}
.prod-rel-row:not(.ativo) .prod-rel-fmt-chip.ativo {
  border-color: #4a5580;
  background: rgba(99,102,241,.1);
  color: #818cf8;
}

/* Botão preview */
.prod-rel-btn-prev {
  padding: 3px 7px !important;
  min-width: 26px;
  opacity: .35;
  transition: opacity .15s;
  flex-shrink: 0;
}
.prod-rel-row:hover .prod-rel-btn-prev { opacity: .85; }
.prod-rel-row.ativo .prod-rel-btn-prev { opacity: .7; }
.prod-rel-row.ativo:hover .prod-rel-btn-prev { opacity: 1; }

/* Período (datas) */
.prod-rel-period {
  padding: 6px 12px 0 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Tabs manual / agendado ── */
.prod-rel-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.prod-rel-tab.ativo {
  background: #6366f1;
  color: #fff;
}
.prod-rel-tab:not(.ativo):hover {
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
}

/* ── Card de agendamento ── */
.prod-rel-ag-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #0c1627;
  border: 1.5px solid #1a2540;
  border-radius: 12px;
  transition: border-color .15s;
}
.prod-rel-ag-card:hover { border-color: #2a3a5c; }
.prod-rel-ag-card.ativo  { border-color: rgba(99,102,241,.4); }
.prod-rel-ag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Coluna direita */
.prod-rel-preview-box {
  border: 1px solid #1e293b;
  border-radius: 10px;
  overflow: hidden;
  background: #050d1a;
  margin-bottom: 16px;
}
.prod-rel-preview-header {
  padding: 8px 14px;
  border-bottom: 1px solid #1e293b;
  background: #0a1120;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#prod-rel-preview {
  min-height: 200px;
  max-height: 380px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050d1a;
}
.prod-rel-preview-empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.prod-rel-preview-iframe {
  width: 100%;
  height: 380px;
  border: none;
  background: #fff;
}
.prod-rel-preview-img {
  max-width: 100%;
  max-height: 400px;
  display: block;
}
.prod-rel-preview-texto {
  padding: 16px;
  width: 100%;
  text-align: left;
}
.prod-rel-preview-texto pre {
  margin: 0;
  font-size: 12px;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

/* ── Filtros pills de Alertas ── */
.prod-al-filter-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.prod-al-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #253047;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  user-select: none;
}
.prod-al-filter-pill:hover {
  border-color: #475569;
  color: #e2e8f0;
}
.prod-al-filter-pill.ativo {
  background: rgba(99,102,241,.15);
  border-color: #6366f1;
  color: #a5b4fc;
}

/* ── Picker de destinatários de alertas ── */
.prod-al-dest-picker {
  background: #0a1120;
  border: 1px solid #253047;
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.4) transparent;
}
.prod-al-dest-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
}
.prod-al-dest-section-title {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: #0a1120;
  position: sticky;
  top: 0;
  z-index: 1;
}
.prod-al-dest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
  color: #94a3b8;
}
.prod-al-dest-item:last-child { border-bottom: none; }
.prod-al-dest-item input[type=checkbox] { display: none; }
.prod-al-dest-item:hover { background: rgba(99,102,241,.08); }
.prod-al-dest-item.selecionado {
  background: rgba(99,102,241,.14);
  color: #a5b4fc;
}
.prod-al-dest-item.selecionado::after {
  content: '✓';
  margin-left: auto;
  font-size: 13px;
  color: #6366f1;
  font-weight: 700;
}
.prod-al-dest-item-nome {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-al-dest-item.selecionado .prod-al-dest-item-nome { color: #a5b4fc; }
.prod-al-dest-item-info {
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE GLOBAL FIXES — @media max-width:900px
   Corrigindo todos os componentes que faltavam responsividade
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* ── INPUTS/TEXTAREAS: mínimo 16px evita zoom automático no iOS ── */
  /* (só aplica se o elemento tiver font-size menor que 16px) */
  input[type=text]:not([data-no-zoom]),
  input[type=email], input[type=password],
  input[type=number], input[type=search], input[type=tel],
  input[type=url], input[type=date], input[type=time],
  input[type=month], textarea, select {
    font-size: max(16px, 1em) !important;
  }

  /* ── TABELAS: scroll horizontal em vez de overflow oculto ── */
  .table-wrap, .admin-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 480px; }

  /* ── MODAIS: full-width em telas pequenas ── */
  .modal { width: 95vw !important; max-width: 95vw !important; margin: 0 auto; }
  .modal-overlay { padding: 8px !important; align-items: flex-end; }

  /* ── NOTIFICAÇÕES: dropdown full width ── */
  .notif-dropdown { width: 92vw !important; right: -8px !important; max-height: 80vh; }

  /* ── GRIDS GENÉRICOS: 1 coluna ── */
  .form-grid, .admin-form-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── FILTROS: empilhar verticalmente ── */
  .filtro-bar, .filtro-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filtro-field { min-width: 0 !important; width: 100% !important; }
  .filtro-sel { width: 100% !important; }

  /* ── CALENDÁRIO DE PRODUÇÃO ── */
  #prod-cal-body {
    grid-template-columns: 1fr !important;
  }
  #prod-cal-sidebar { display: none; }
  /* Calendário 7 colunas: scroll horizontal em vez de comprimir */
  #prod-cal-grid-wrap, #cal-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #prod-cal-grid-wrap .cal-grid, #cal-grid-wrap .cal-grid {
    min-width: 480px;
  }
  .cal-cell { min-height: 48px !important; padding: 4px !important; }

  /* ── TOOLBAR DO CALENDÁRIO ── */
  #prod-cal-panel > div:first-child {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── ALERTAS: wizard full width ── */
  #prod-alerta-modal > div { width: 98vw !important; max-height: 96vh !important; }
  .prod-wiz-circle-label { font-size: 9px; }

  /* ── RELATÓRIOS: layout em coluna ── */
  .prod-rel-layout {
    grid-template-columns: 1fr !important;
  }
  .prod-rel-col-right { border-top: 1px solid var(--border); padding-top: 16px; }

  /* ── ABAS/TABS: scroll horizontal ── */
  .prod-tabs, [class*="-tabs"],
  #prod-subtabs, .wpp-tabs, .com-tabs,
  .reuniao-tabs, .cfg-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .prod-tabs::-webkit-scrollbar,
  [class*="-tabs"]::-webkit-scrollbar,
  #prod-subtabs::-webkit-scrollbar { display: none; }

  /* Botões de aba não encolhem */
  #prod-subtabs button,
  .wpp-tabs button,
  [class*="-tabs"] button { flex-shrink: 0; }

  /* ── FILA DE ALERTAS: modal bottom sheet ── */
  #prod-al-fila-modal.modal-overlay { align-items: flex-end; padding: 0; }
  #prod-al-fila-modal .modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    margin: 0 !important;
  }

  /* ── BOTÕES: não quebrar texto ── */
  .btn { white-space: nowrap; }
  .btn-row { flex-wrap: wrap; gap: 8px; }

  /* ── HERO BANNER ── */
  .hero-banner { padding: 20px 16px !important; }
  .hero-title { font-size: 18px !important; }
  .hero-pills { flex-wrap: wrap; gap: 6px; }

  /* ── PAINEL IA ── */
  #ia-provedor-cards {
    grid-template-columns: 1fr !important;
  }

  /* ── TOPBAR: esconder título em telas muito pequenas ── */
  .topbar-title { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── WIZARD DE ALERTA: passos ── */
  .prod-wiz-steps { gap: 4px !important; padding: 12px 16px 0 !important; }
  .prod-wiz-circle-num { width: 28px !important; height: 28px !important; font-size: 11px !important; }

  /* ── MAPÃO: tabela scroll ── */
  #prod-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  #prod-table-wrap table { min-width: 600px; }

  /* ── CARDS DO INICIO ── */
  #painel-atividade-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── COMERCIAL/ERP: tabelas e filtros ── */
  .com-table-wrap, .erp-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── METAS: grid ── */
  .metas-grid { grid-template-columns: 1fr !important; }

  /* ── TAREFAS: cards em coluna ── */
  .tarefas-board { flex-direction: column !important; }
  .tarefas-col { min-width: 0 !important; width: 100% !important; }

  /* ── GESTÃO IA: tabelas de memória / ensinamentos ── */
  #panel-gestor-ia .table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ── MAPÃO MP: scroll horizontal ── */
  .prod-table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ── PROGRAMAÇÃO: toolbar empilhada ── */
  #panel-producao-programacao .prod-toolbar { flex-direction:column; align-items:stretch; }
  #panel-producao-programacao .prod-toolbar .form-input,
  #panel-producao-programacao .prod-toolbar select { width:100%; }

  /* ── FICHA DE PRODUÇÃO: nav de fichas em scroll ── */
  .prod-history-strip { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; }
  .prod-history-strip::-webkit-scrollbar { display:none; }

  /* ── FORMULADOR: grid em coluna ── */
  .prod-custo-layout { grid-template-columns:1fr !important; }

  /* ── RANKING: layout ── */
  .ranking-layout { grid-template-columns:1fr !important; }
  .ranking-side { border-left:none !important; border-top:1px solid var(--border); }

  /* ── REUNIÕES: calendar + lista ── */
  .reuniao-body-split { grid-template-columns:1fr !important; }

  /* ── PDI: grid em coluna ── */
  .pdi-grid { grid-template-columns:1fr !important; }

  /* ── CALENDÁRIO GERAL: sidebar oculta ── */
  .cal-body-wrap { grid-template-columns:1fr !important; }
  .cal-side-col { display:none; }

  /* ── COBRANÇA: BI kpis 2 col ── */
  .cob-bi-kpis { grid-template-columns:repeat(2,1fr) !important; }

  /* ── ERP/NECTAR: tabela scroll ── */
  #panel-nectar .table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ── INÍCIO: grid de cards ── */
  .dash-card-grid { grid-template-columns:repeat(2,1fr); }

  /* ── COMERCIAL RFV: mapa + stats em coluna; filtros largura total ── */
  #rfv-topo-grid { grid-template-columns:1fr !important; }
  #rfv-meses, #rfv-rca, #rfv-classif {
    min-width:0 !important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  #com-erp-sec-rfv > div:first-of-type {
    flex-direction:column;
    align-items:stretch !important;
  }

  /* ── NOTIFICAÇÕES: condição campo / op / valor ── */
  #crm-regra-filtro-campo-row > div[style*="grid-template-columns"],
  #erp-regra-filtro-campo-row > div[style*="grid-template-columns"] {
    grid-template-columns:1fr !important;
  }
  #crm-regra-filtro-campo-row,
  #erp-regra-filtro-campo-row { flex:1 1 100% !important; }

  /* ── CONFIG: blocos retenção (mídia/texto) ── */
  .go-ds .cfg-ret-block div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }

  /* ── BOT: linhas de formulário em grid ── */
  .go-ds .form-row[style*="grid-template-columns"] {
    grid-template-columns:1fr !important;
  }

  /* ── PAGEBUILDER: cards em coluna ── */
  #pb-secoes-grid, #pb-sistema-grid, #pb-cards-grid {
    grid-template-columns:1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PEQUENO — @media max-width:480px
   ══════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ── MODAL: ocupa toda a tela ── */
  .modal-overlay { padding: 0 !important; align-items: flex-end; }
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto;
  }

  /* ── HERO BANNER ── */
  .hero-banner { padding: 16px 14px !important; }
  .hero-title { font-size: 16px !important; }
  .hero-eyebrow { font-size: 9px !important; }
  .hero-pills { display: none; } /* esconde em phones muito pequenos */

  /* ── STATS: 2 colunas compactas ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stat { padding: 12px 10px !important; }
  .stat-val { font-size: 20px !important; }

  /* ── TOOLBAR CALENDÁRIO: esconder textos ── */
  .prod-cal-stab { padding: 3px 8px !important; font-size: 10px !important; }

  /* ── ALERTAS: chips de status ── */
  .prod-al-filter-pill { font-size: 10px !important; padding: 3px 8px !important; }

  /* ── RELATÓRIOS: chips de formato ── */
  .prod-rel-fmt-chip { font-size: 9px !important; padding: 2px 5px !important; }

  /* ── WIZARD STEPS: só números ── */
  .prod-wiz-circle-label { display: none !important; }

  /* ── TOPBAR: título oculto ── */
  .topbar-title { display: none !important; }

  /* ── LOGIN: já tratado em 700px, aqui só ajusta padding ── */
  .login-form-side { padding: 20px 16px !important; }

  /* ── MAPÃO: colunas críticas ── */
  #prod-table-wrap table th:nth-child(n+5),
  #prod-table-wrap table td:nth-child(n+5) {
    display: none;
  }

  /* ── PAINEL IA: cards ── */
  #ia-provedor-cards { gap: 8px !important; }

  /* ── METAS: simplificar ── */
  .meta-card { padding: 12px !important; }
  .meta-card-actions { flex-wrap: wrap; gap: 4px; }

  /* ── BOTÕES DE AÇÃO em cards ── */
  .prod-al-card > div:last-child { gap: 2px !important; }
  .prod-al-card > div:last-child button { padding: 2px !important; }

  /* ── PAGINAÇÃO ── */
  .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }

  /* ── TOPBAR: botões menos críticos ocultos ── */
  .btn-dev-mode, .btn-page-editor { display:none !important; }

  /* ── SIDEBAR BRAND: compacto ── */
  .sidebar-brand { padding:14px 12px; }

  /* ── DASHBOARD: KPIs em 2 colunas ── */
  .dash-card-grid { grid-template-columns:1fr 1fr !important; }

  /* ── FILTRO BAR: busca full width ── */
  .filtro-bar .filtro-search { width:100% !important; }

  /* ── REUNIÕES: card compacto ── */
  .reuniao-date-col { min-width:36px; }
  .reuniao-status { font-size:10px !important; padding:2px 7px !important; }

  /* ── PDI: header compacto ── */
  .pdi-header { flex-direction:column; gap:6px; }

  /* ── COBRANÇA: kpis 2 colunas ── */
  .cob-bi-kpis { grid-template-columns:1fr 1fr !important; }
  .cob-rec-values { grid-template-columns:1fr !important; }

  /* ── RANKING: tabela scroll ── */
  .ranking-table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MUITO PEQUENO — @media max-width:360px
   Phones antigos, Galaxy A-series, iPhones SE 1ª geração
   ══════════════════════════════════════════════════════════════ */
@media(max-width:360px){

  /* ── TOPBAR: oculta relógio para liberar espaço ── */
  .topbar-clock,
  .topbar-more-clock { display:none !important; }

  /* ── SIDEBAR: ligeiramente mais estreita ── */
  .sidebar { width:220px !important; min-width:220px !important; }

  /* ── DASHBOARD: 1 coluna ── */
  .dash-card-grid { grid-template-columns:1fr !important; }

  /* ── FILTROS: campo sem mínimo ── */
  .filtro-field { min-width:0 !important; width:100% !important; }

  /* ── KPI / STATS: 2 colunas compactas ── */
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; gap:6px !important; }
  .stat { padding:10px 8px !important; }
  .stat-val { font-size:18px !important; }

  /* ── MODAL: ocupa toda a tela ── */
  .modal-overlay { padding:0 !important; align-items:flex-end; }
  .modal {
    width:100vw !important;
    max-width:100vw !important;
    border-radius:16px 16px 0 0 !important;
    max-height:96dvh !important;
    overflow-y:auto;
  }

  /* ── HERO BANNER: minimalista ── */
  .hero-banner { padding:14px 12px !important; }
  .hero-title  { font-size:15px !important; }
  .hero-pills  { display:none; }

  /* ── COMERCIAL: tabelas ── */
  .com-table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ── GRIDS GENÉRICOS ── */
  .form-grid, .admin-form-grid { grid-template-columns:1fr !important; }

  /* ── PAGINAÇÃO ── */
  .pagination { flex-wrap:wrap; justify-content:center; gap:3px; }
  .pagination button { min-width:32px !important; padding:5px 6px !important; font-size:11px !important; }

  /* ── NOTIFICAÇÕES: dropdown full screen ── */
  .notif-dropdown { width:100vw !important; right:0 !important; left:0 !important; border-radius:0 !important; }

  /* ── BOTÕES DE AÇÃO: wrap ── */
  .btn-row, .modal-footer { flex-direction:column-reverse !important; gap:6px !important; }
  .modal-footer .btn { width:100% !important; justify-content:center; }

  /* ── MAPÃO MP: esconde colunas menos críticas ── */
  #panel-producao-mapao-mp .prod-table th:nth-child(n+6),
  #panel-producao-mapao-mp .prod-table td:nth-child(n+6) { display:none; }

  /* ── PAINEL IA: área de entrada ── */
  .gia-input-wrap { flex-direction:row; }

  /* ── RANKING: tabela ── */
  #panel-ranking .table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ── CARDS INICIO ── */
  #painel-atividade-grid { grid-template-columns:1fr !important; }

  /* ── STEPPER GENÉRICO: só números ── */
  .metas-step-lbl, .cob-disp-step-lbl { display:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH: melhor experiência em dispositivos de toque
   ══════════════════════════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  /* Botões maiores para toque */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .btn-xs { min-height: 28px; }

  /* Itens de nav maiores */
  .nav-item { min-height: 44px; }

  /* Checkboxes e radios maiores */
  input[type=checkbox], input[type=radio] {
    min-width: 18px; min-height: 18px;
  }

  /* Remove hover styles que não fazem sentido em touch */
  .prod-rel-btn-prev { opacity: 0.7 !important; }
  .hero-banner-actions { opacity: 0 !important; } /* gerenciado via Personalizar */
}