/* ============================================================
   inCadencia — Design System
   Tokens, componentes e utilitários. Mobile-first.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Cor de marca */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe;
  --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;

  /* Neutros */
  --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155;
  --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1;
  --ink-200:#e2e8f0; --ink-100:#f1f5f9; --ink-50:#f8fafc;
  --surface:#ffffff; --bg:#f6f7fb;

  /* Semânticas */
  --ok-500:#10b981; --ok-50:#ecfdf5;
  --warn-500:#f59e0b; --warn-50:#fffbeb; --warn-700:#b45309;
  --danger-500:#ef4444; --danger-50:#fef2f2;
  --info-500:#0ea5e9; --info-50:#f0f9ff;

  /* Tipografia */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;

  /* Espaçamentos */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* Raio e sombra */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 16px rgba(15,23,42,.07);
  --shadow-lg:0 12px 40px rgba(15,23,42,.10);

  --ring:0 0 0 3px var(--brand-100);
  --transition:.18s cubic-bezier(.4,0,.2,1);
  --sidebar-w:248px;
}

/* ---------- 1b. Modo escuro (data-theme="dark" no <html>) ---------- */
html[data-theme="dark"]{
  color-scheme:dark;

  --brand-50:#26264d; --brand-100:#312e81; --brand-200:#3d3a96;
  --brand-400:#a5b4fc; --brand-500:#818cf8; --brand-600:#6d78f6; --brand-700:#a5b4fc;

  --ink-900:#f1f5f9; --ink-800:#e2e8f0; --ink-700:#cbd5e1;
  --ink-600:#aab6c8; --ink-500:#94a3b8; --ink-400:#7c8ba1; --ink-300:#475569;
  --ink-200:#2e3c52; --ink-100:#243147; --ink-50:#1b2740;
  --surface:#141f36; --bg:#0b1120;

  --ok-50:#0a2b1e; --warn-50:#2b2008; --warn-700:#fbbf24; --danger-50:#2d1214; --info-50:#0a2537;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 16px rgba(0,0,0,.40);
  --shadow-lg:0 12px 40px rgba(0,0,0,.50);
  --ring:0 0 0 3px #312e81;
}
html[data-theme="dark"] ::selection{background:#3730a3}
html[data-theme="dark"] img{opacity:.94}
/* alterna o ícone do botão de tema */
html:not([data-theme="dark"]) .theme-when-dark{display:none}
html[data-theme="dark"] .theme-when-light{display:none}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);font-size:var(--fs-base);color:var(--ink-800);
  background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:var(--fs-base)}
/* Ícones acompanham o texto na mesma linha (nunca empilhados em cima). */
svg{display:inline-block;vertical-align:-0.18em;flex-shrink:0}
::selection{background:var(--brand-200)}

/* ---------- 3. Layout shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--ink-200);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;
  transform:translateX(-100%);transition:transform var(--transition);
}
.sidebar.open{transform:translateX(0)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;width:100%}
.content{padding:var(--sp-5);max-width:1240px;margin:0 auto;width:100%}
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:39;opacity:0;
  pointer-events:none;transition:opacity var(--transition)}
.scrim.show{opacity:1;pointer-events:auto}

@media(min-width:1024px){
  .sidebar{transform:translateX(0)}
  .main{margin-left:var(--sidebar-w)}
  .scrim{display:none}
  .content{padding:var(--sp-8) var(--sp-10)}
}

/* ---------- 4. Brand & nav ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;box-shadow:var(--shadow-sm)}
.brand-name{font-weight:700;font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--ink-900)}
.brand-sub{font-size:var(--fs-xs);color:var(--ink-400);margin-top:-2px}

.nav{padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-400);font-weight:600;padding:var(--sp-4) var(--sp-3) var(--sp-1)}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px var(--sp-3);border-radius:var(--r-md);
  color:var(--ink-600,#475569);font-weight:500;font-size:var(--fs-base);transition:var(--transition)}
.nav-item:hover{background:var(--ink-100);color:var(--ink-900)}
.nav-item.active{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.nav-item.active svg{color:var(--brand-600)}
.nav-item svg{color:var(--ink-400)}

/* Scrollbar discreto: some quando parado, aparece suave ao interagir. */
.nav{scrollbar-width:thin;scrollbar-color:transparent transparent}
.nav:hover{scrollbar-color:var(--ink-200) transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:padding-box;transition:background .2s}
.nav:hover::-webkit-scrollbar-thumb{background:var(--ink-200);background-clip:padding-box}
.nav::-webkit-scrollbar-thumb:hover{background:var(--ink-300)}

/* Grupo expansível (ex.: Painéis) */
.nav-group{display:flex;flex-direction:column}
.nav-group-toggle{cursor:pointer;border:0;background:none;width:100%;font-family:inherit;font-size:var(--fs-base)}
.nav-caret{margin-left:auto;display:inline-flex;transition:transform .18s ease}
.nav-group.open>.nav-group-toggle .nav-caret{transform:rotate(180deg)}
.nav-group-toggle.has-active{color:var(--brand-700);font-weight:600}
.nav-group-toggle.has-active>svg:first-child{color:var(--brand-600)}
.nav-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 4px 16px;padding-left:8px;border-left:1px solid var(--ink-200)}
.nav-group.open>.nav-sub{display:flex}
.nav-sub .nav-item{padding:8px var(--sp-3);font-size:.86rem}

/* Personalização do menu (reordenar + ocultar) */
.nav-sec{display:flex;flex-direction:column;gap:2px}
.nav-hidden{display:none}
.nav-custom-bar{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:2px}
.nav-custom-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px var(--sp-3);border:0;background:none;
  color:var(--ink-400);font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;border-radius:var(--r-md);transition:var(--transition)}
.nav-custom-btn:hover{background:var(--ink-100);color:var(--ink-700)}
.nav-custom-reset{font-size:.74rem;color:var(--brand-600);text-align:center;text-decoration:none;padding:3px}
.nav-custom-reset:hover{text-decoration:underline}
.nav-eye{display:none}
.nav-editing .nav-eye{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  color:var(--ink-400);width:26px;height:26px;border-radius:7px;flex:none}
.nav-editing .nav-eye:hover{background:var(--ink-200);color:var(--ink-800)}
.nav-editing .nav-sec{outline:1px dashed var(--ink-200);outline-offset:3px;border-radius:var(--r-md)}
.nav-editing .nav-item[draggable]{cursor:grab}
.nav-editing .nav-item.active{background:none;color:var(--ink-600);font-weight:500}
.nav-editing .nav-item.active svg{color:var(--ink-400)}
.nav-editing .nav-hidden{display:flex;opacity:.5}
.nav-editing .nav-group.nav-hidden{display:flex}
.nav-editing .nav-hidden .nav-eye{color:var(--danger-500)}
.nav-dragging{opacity:.45;background:var(--brand-50)}

/* ---------- Date picker próprio ---------- */
.dp-input{cursor:text}
/* O calendário é o do sistema: esconde o ícone/seletor nativo, mas mantém a digitação. */
.dp-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
.dp-input::-webkit-inner-spin-button,.dp-input::-webkit-clear-button{display:none}
/* acima de qualquer janela/modal (2500) e abaixo dos avisos (3000) — antes abria ATRÁS do "Lançar" */
.dp-pop{position:fixed;z-index:2600;display:none;width:270px;background:var(--surface);
  border:1px solid var(--ink-200);border-radius:14px;box-shadow:var(--shadow-lg);padding:12px;
  opacity:0;transform:translateY(-4px);transition:opacity .14s,transform .14s}
.dp-pop.show{display:block;opacity:1;transform:translateY(0)}
.dp-pop:not(.show){pointer-events:none}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dp-title{font-weight:700;color:var(--ink-900);font-size:.9rem}
.dp-nav{width:30px;height:30px;border-radius:9px;border:1px solid var(--ink-200);background:var(--surface);
  cursor:pointer;color:var(--ink-600);flex:none;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit}
.dp-nav:hover{background:var(--ink-100);color:var(--ink-900)}
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-week span{text-align:center;font-size:.7rem;font-weight:700;color:var(--ink-400);padding:4px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{aspect-ratio:1;border:0;background:none;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:.82rem;color:var(--ink-700);display:flex;align-items:center;justify-content:center;transition:background .1s}
.dp-day.is-blank{visibility:hidden;cursor:default}
.dp-day:hover:not(.is-dis):not(.is-blank){background:var(--brand-50);color:var(--brand-700)}
.dp-day.is-today{font-weight:800;color:var(--brand-600)}
.dp-day.is-sel{background:var(--brand-600);color:#fff;font-weight:700}
.dp-day.is-sel:hover{background:var(--brand-600);color:#fff}
.dp-day.is-dis{color:var(--ink-300);cursor:not-allowed;opacity:.55}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--ink-100)}
.dp-link{border:0;background:none;color:var(--brand-600);font-weight:600;font-size:.8rem;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:7px}
.dp-link:hover{background:var(--brand-50)}

/* ---------- Central de Ajuda & Suporte ---------- */
.help-list{display:flex;flex-direction:column;gap:6px}
.help-item{border:1px solid var(--ink-200);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.help-item>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;font-weight:600;color:var(--ink-800);list-style:none}
.help-item>summary::-webkit-details-marker{display:none}
.help-item>summary>svg{color:var(--ink-400);flex:none;transition:transform .18s}
.help-item[open]>summary{border-bottom:1px solid var(--ink-100)}
.help-item[open]>summary>svg{transform:rotate(180deg)}
.help-item .help-body{padding:12px 14px;color:var(--ink-600);font-size:.9rem;line-height:1.6}
.help-item .help-body p{margin:0 0 10px}
.help-item .help-body ul,.help-item .help-body ol{margin:0 0 10px;padding-left:22px}
.help-item .help-body li{margin:3px 0}
.help-item .help-body strong{color:var(--ink-800)}
.help-item .help-body .help-h{margin:14px 0 6px;font-size:.92rem;font-weight:700;color:var(--ink-900)}
.help-item .help-body .help-h:first-child{margin-top:0}
.help-item .help-body>:last-child{margin-bottom:0}
.help-callout{padding:9px 12px;border-radius:var(--r-md);border-left:3px solid var(--brand-500);background:var(--brand-50)}
.help-callout.is-warn{border-left-color:var(--warn-500);background:var(--warn-50)}
.help-topics{display:flex;flex-direction:column;gap:8px}
.help-topic{border:1px solid var(--ink-200);border-radius:var(--r-md);background:var(--ink-50,transparent)}
.help-topic>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;cursor:pointer;font-weight:700;color:var(--ink-900);list-style:none}
.help-topic>summary::-webkit-details-marker{display:none}
.help-topic>summary>svg{color:var(--ink-400);transition:transform .18s}
.help-topic[open]>summary>svg{transform:rotate(180deg)}
.help-topic>.help-list{padding:0 10px 10px}
.help-center>summary{list-style:none;cursor:pointer}
.help-center>summary::-webkit-details-marker{display:none}
.help-center-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.help-center-caret{transition:transform .18s;color:var(--ink-400)}
.help-center[open]>summary .help-center-caret{transform:rotate(180deg)}
.help-center-body{margin-top:22px}
.help-searchbox{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--ink-200);border-radius:var(--r-md);color:var(--ink-400);margin-bottom:14px}
.help-searchbox input{border:0;outline:0;flex:1;background:none;color:var(--ink-900);font-size:.92rem;font-family:inherit}
.help-eyebrow{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-400);margin:4px 0 8px}
.help-eyebrow svg{color:var(--brand-500)}

.thread{display:flex;flex-direction:column;gap:12px}
.msg{border-radius:var(--r-md);padding:10px 14px;max-width:88%;border:1px solid var(--ink-200)}
.msg-user{background:var(--ink-50);align-self:flex-start;border-top-left-radius:4px}
.msg-agent{background:var(--brand-50);border-color:var(--brand-100);align-self:flex-end;border-top-right-radius:4px}
.msg-internal{background:var(--warn-50);border-color:var(--warn-500);align-self:stretch;max-width:100%}
.msg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.msg-who{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;color:var(--ink-800)}
.msg-who svg{color:var(--ink-400);flex:none}
.msg-time{font-size:.72rem;color:var(--ink-400);white-space:nowrap;flex:none}
.msg-body{color:var(--ink-700);font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}

.desk-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:900px){.desk-grid{grid-template-columns:1fr 300px}}
.desk-side{display:flex;flex-direction:column;gap:12px}

/* Banner de modo suporte (acesso cross-tenant) */
.support-strip{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#b91c1c,#dc2626);color:#fff;
  padding:11px 16px;border-radius:12px;margin-bottom:18px;box-shadow:0 6px 18px rgba(185,28,28,.28);font-size:.9rem}
.support-strip .support-ico{display:flex;flex:none}
.support-strip strong{font-weight:800}
.support-exit{background:#fff;color:#b91c1c;font-weight:700;white-space:nowrap;border:0}
.support-exit:hover{background:#fee2e2}

.nav-foot{padding:var(--sp-3);border-top:1px solid var(--ink-200)}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-md)}
.user-chip:hover{background:var(--ink-100)}
.avatar{width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);font-weight:600;font-size:var(--fs-sm);flex-shrink:0}
.avatar.lg{width:48px;height:48px;font-size:var(--fs-md)}
.user-meta{min-width:0}
.user-name{font-weight:600;font-size:var(--fs-sm);color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:var(--fs-xs);color:var(--ink-400)}

/* ---------- 5. Topbar ---------- */
.topbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border-bottom:1px solid var(--ink-200);position:sticky;top:0;z-index:30}
.topbar h1{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:var(--ink-900)}
.icon-btn{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--ink-500);transition:var(--transition)}
.icon-btn:hover{background:var(--ink-100);color:var(--ink-900)}
.menu-toggle{display:grid}
@media(min-width:1024px){.menu-toggle{display:none}}
.topbar-spacer{flex:1}

/* ---------- 6. Tipografia utilitária ---------- */
.h-hero{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;color:var(--ink-900)}
.h-section{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:var(--ink-900)}
.eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--ink-400)}
.muted{color:var(--ink-500)}
.text-sm{font-size:var(--fs-sm)} .text-xs{font-size:var(--fs-xs)}

/* ---------- 7. Cards ---------- */
.card{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.card-pad{padding:var(--sp-5)}
.card-hover{transition:var(--transition)}
.card-hover:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300);transform:translateY(-1px)}

.grid{display:grid;gap:var(--sp-4)}
.grid-kpi{grid-template-columns:repeat(2,1fr)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:680px){.grid-kpi{grid-template-columns:repeat(4,1fr)}.grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- 8. KPI ---------- */
.kpi{padding:var(--sp-5);display:flex;flex-direction:column;gap:6px}
.kpi-ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:6px}
.kpi-val{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;color:var(--ink-900);line-height:1}
.kpi-label{font-size:var(--fs-sm);color:var(--ink-500)}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:600}
.t-up{color:var(--ok-500)} .t-down{color:var(--danger-500)}

/* ---------- 9. Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-md);font-weight:600;font-size:var(--fs-base);
  transition:var(--transition);white-space:nowrap;line-height:1}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-700)}
.btn-ghost{background:var(--ink-100);color:var(--ink-700)}
.btn-ghost:hover{background:var(--ink-200)}
.btn-ok{background:var(--ok-500);color:#fff}
.btn-ok:hover{filter:brightness(.95)}
.btn-danger{background:var(--danger-50);color:var(--danger-500)}
.btn-danger:hover{background:#fee2e2}
.btn-lg{padding:14px 24px;font-size:var(--fs-md);border-radius:var(--r-lg)}
.btn-block{width:100%}
.btn-icon{padding:10px}
.btn-sm{padding:7px 12px;font-size:var(--fs-sm);border-radius:var(--r-md);gap:6px}
#refreshBtn.spin svg{animation:cadspin .8s linear infinite}
@keyframes cadspin{to{transform:rotate(360deg)}}

/* ---------- 10. Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;line-height:1.5}
.badge-ok{background:var(--ok-50);color:#047857}
.badge-warn{background:var(--warn-50);color:#b45309}
.badge-danger{background:var(--danger-50);color:#b91c1c}
.badge-info{background:var(--info-50);color:#0369a1}
.badge-neutral{background:var(--ink-100);color:var(--ink-600,#475569)}
.dot{width:8px;height:8px;border-radius:var(--r-full);flex-shrink:0}
.dot-ok{background:var(--ok-500)} .dot-warn{background:var(--warn-500)}
.dot-danger{background:var(--danger-500)} .dot-neutral{background:var(--ink-400)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);
  background:var(--ink-100);color:var(--ink-600,#475569);font-size:var(--fs-sm);font-weight:500}
.chip-active{background:var(--brand-600);color:#fff}

/* ---------- 11. Progress ---------- */
.progress{height:8px;border-radius:var(--r-full);background:var(--ink-200);overflow:hidden}
.progress>span{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand-500),var(--brand-600));transition:width .6s ease}
.progress.ok>span{background:linear-gradient(90deg,var(--ok-500),#059669)}

/* ---------- 12. Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-700)}
.hint{font-size:var(--fs-xs);color:var(--ink-400)}
/* Descrição do campo sob demanda (info-button ao lado do rótulo) */
.hint-info{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-left:6px;
  vertical-align:-0.18em;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--brand-50);color:var(--brand-600);transition:var(--transition)}
.hint-info:hover{background:var(--brand-100)}
.hint-info.open{background:var(--brand-600);color:#fff}
.hint-collapsible{margin-top:2px;padding:8px 11px;background:var(--ink-50);border:1px solid var(--ink-100);
  border-radius:var(--r-md);line-height:1.5}
.hint-collapsible[hidden]{display:none!important}
.input,.select,.textarea{width:100%;padding:11px 14px;border:1px solid var(--ink-300);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink-900);transition:var(--transition)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)}
.textarea{resize:vertical;min-height:90px}
/* #34 Erro de campo: borda vermelha + mensagem logo abaixo (inCadencia.fieldError). */
.is-invalid,.is-invalid:focus{border-color:var(--danger-500)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-500) 18%,transparent)!important;background:color-mix(in srgb,var(--danger-500) 5%,var(--surface))!important}
.is-invalid-label,.is-invalid-label span{color:var(--danger-500)!important}
.field-error-msg{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;font-weight:600;color:var(--danger-500);animation:feIn .16s ease}
.field-error-msg::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--danger-500);color:var(--surface);font-size:.7rem;font-weight:900;flex:none}
@keyframes feIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.input-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.input-row>*{flex:1;min-width:140px}

/* ---- Multi-select estilizado (setores / empresas) ---- */
.select[multiple]{padding:6px;background-image:none;overflow-y:auto}
.select[multiple] option{
  padding:9px 12px;margin:2px 0;border-radius:var(--r-sm,8px);
  color:var(--ink-800);cursor:pointer;transition:var(--transition)}
.select[multiple] option:hover{background:var(--brand-50)}
.select[multiple] option:checked{
  /* truque do box-shadow inset força a cor da opção marcada no Chrome */
  box-shadow:0 0 0 100px var(--brand-600) inset;
  color:#fff;font-weight:600}
.select[multiple] option:checked::before{content:"✓ "}

/* ---- Barra de filtro com controles de mesma altura ---- */
.control-h{height:42px}
.filter-bar .input,.filter-bar .btn{height:42px;display:flex;align-items:center}
.filter-bar .input{padding-top:0;padding-bottom:0}

/* ---- Aviso de empresa desativada (banner global) ---- */
.warn-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--danger-50);border:1px solid #fecaca;border-left:4px solid var(--danger-500);
  color:#7f1d1d;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:.9rem}
.warn-strip .warn-ico{color:var(--danger-500);display:flex}
.warn-strip strong{color:#991b1b}

/* ---- Busca + paginação de listagens ---- */
.list-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.list-toolbar .list-search{flex:1;min-width:200px}
.list-toolbar .list-meta{white-space:nowrap}
.list-toolbar .list-size{display:flex;align-items:center;gap:6px}
.list-toolbar .list-size select{width:auto;padding:7px 10px}
.list-pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:16px 0 6px;padding-bottom:2px}
.list-page{min-width:36px;height:36px;border:1px solid var(--ink-200);background:var(--surface);color:var(--ink-700);
  border-radius:var(--r-md);cursor:pointer;font-weight:600;font-size:.85rem;padding:0 8px}
.list-page:hover:not(:disabled){border-color:var(--brand-400);color:var(--brand-600)}
.list-page.cur{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.list-page:disabled{opacity:.4;cursor:not-allowed}
.list-ellipsis{display:grid;place-items:center;min-width:24px;color:var(--ink-400)}

/* ---- Multiseleção em popup (chips + busca) ---- */
.ms-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.ms-box{position:relative;border:1px solid var(--ink-300);border-radius:var(--r-md);padding:8px;background:var(--surface)}
.ms-box .ms-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:24px}
.ms-add{margin-top:8px;border:1px dashed var(--brand-300);background:var(--brand-50);color:var(--brand-700);
  border-radius:999px;padding:5px 14px;font-size:.82rem;font-weight:600;cursor:pointer}
.ms-add:hover{background:var(--brand-100)}
.ms-pop{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:40;background:var(--surface);
  border:1px solid var(--ink-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px}
.ms-pop .ms-search{margin-bottom:6px}
.ms-list{max-height:220px;overflow:auto}
.ms-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.9rem}
.ms-opt:hover{background:var(--brand-50)}
.ms-opt.sel{color:var(--brand-700);font-weight:600}
.ms-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ink-300);display:grid;place-items:center;font-size:.7rem;color:#fff;flex-shrink:0}
.ms-opt.sel .ms-check{background:var(--brand-600);border-color:var(--brand-600)}

/* ---- Campo de upload estilizado (clique ou arraste) ---- */
.filefield{display:inline-flex;align-items:center;gap:12px;cursor:pointer;max-width:100%;
  border:1.5px dashed var(--ink-300);border-radius:var(--r-md);padding:11px 16px;background:var(--surface);transition:var(--transition)}
.filefield:hover{border-color:var(--brand-400);background:var(--brand-50)}
.filefield.drag{border-color:var(--brand-500);background:var(--brand-50);box-shadow:var(--ring)}
.filefield.has{border-style:solid;border-color:var(--brand-300);background:var(--brand-50)}
.filefield-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.filefield-ico{color:var(--brand-600);display:flex;flex-shrink:0}
.filefield-text strong{color:var(--ink-800);font-weight:600;font-size:.9rem;line-height:1.2}
.filefield-name{color:var(--ink-400);font-size:.78rem;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;vertical-align:bottom}
.filefield.has .filefield-name{color:var(--ok-500);font-weight:600}

/* ---- Seletor de pessoas (typeahead + chips) ---- */
.people-picker{position:relative}
.people-picker .pp-results{position:absolute;left:0;right:0;top:46px;z-index:30;background:var(--surface);
  border:1px solid var(--ink-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:240px;overflow:auto}
.people-picker .pp-opt{padding:9px 12px;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--ink-100)}
.people-picker .pp-opt:last-child{border-bottom:none}
.people-picker .pp-opt:hover{background:var(--brand-50)}
.people-picker .pp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-50);color:var(--brand-700);
  border:1px solid var(--brand-100);border-radius:999px;padding:5px 6px 5px 12px;font-size:.85rem;font-weight:600}
.pp-chip .pp-x{border:none;background:rgba(99,102,241,.15);color:var(--brand-700);width:20px;height:20px;
  border-radius:50%;cursor:pointer;line-height:1;font-size:1rem}
.pp-chip .pp-x:hover{background:var(--danger-50);color:var(--danger-500)}

/* ---- Etiqueta "Inativa" destacada no card de empresa ---- */
.card.is-off{opacity:.92;border-color:#fecaca;background:repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(239,68,68,.03) 10px,rgba(239,68,68,.03) 20px)}
.badge-off{background:var(--danger-50);color:var(--danger-500);border:1px solid #fecaca;font-weight:700}

/* Toggle */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:12px 14px;border:1px solid var(--ink-200);border-radius:var(--r-md);cursor:pointer;transition:var(--transition)}
.toggle:hover{border-color:var(--ink-300)}
.toggle input{display:none}
.switch{width:42px;height:24px;border-radius:var(--r-full);background:var(--ink-300);
  position:relative;transition:var(--transition);flex-shrink:0}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:var(--r-full);background:#fff;box-shadow:var(--shadow-sm);transition:var(--transition)}
.toggle input:checked+.switch{background:var(--brand-600)}
.toggle input:checked+.switch::after{transform:translateX(18px)}

/* Segmented (chips selecionáveis) */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{padding:8px 14px;border:1px solid var(--ink-300);border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-600,#475569);cursor:pointer;transition:var(--transition)}
.seg input{display:none}
.seg input:checked+span,.seg label:has(input:checked){border-color:var(--brand-600);
  background:var(--brand-50);color:var(--brand-700)}

/* ---------- 13. Activity row (linha operacional) ---------- */
.timeline{display:flex;flex-direction:column;gap:var(--sp-3)}
.time-rail{display:flex;gap:var(--sp-4)}
.time-mark{width:54px;flex-shrink:0;text-align:right;padding-top:18px}
.time-mark .hh{font-weight:700;color:var(--ink-900);font-size:var(--fs-base)}
.act{flex:1;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);transition:var(--transition);position:relative;overflow:hidden}
.act::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ink-200)}
.act:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.act.is-done::before{background:var(--ok-500)}
.act.is-progress::before{background:var(--warn-500)}
.act.is-late::before{background:var(--danger-500)}
.act.is-notdone::before{background:var(--danger-500)}
.act.is-done{opacity:.72}
.act-ico{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0}
.act-body{flex:1;min-width:0}
.act-title{font-weight:600;color:var(--ink-900);font-size:var(--fs-md);letter-spacing:-.01em}
.act.is-done .act-title{text-decoration:line-through;color:var(--ink-500)}
.act-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:var(--fs-xs);color:var(--ink-400)}
.act-meta span{display:inline-flex;align-items:center;gap:4px}
.act-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.act-check{width:42px;height:42px;border-radius:var(--r-full);border:2px solid var(--ink-300);
  display:grid;place-items:center;color:transparent;transition:var(--transition)}
.act-check:hover{border-color:var(--ok-500);color:var(--ink-300)}
.act.is-done .act-check{background:var(--ok-500);border-color:var(--ok-500);color:#fff}
.act-check.is-x{background:var(--danger-500);border-color:var(--danger-500);color:#fff}

/* ---------- 14. Attention banner ---------- */
.attention{background:linear-gradient(135deg,var(--surface),var(--warn-50));border:1px solid var(--warn-500);
  border-radius:var(--r-lg);padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start}
html[data-theme="dark"] .attention{border-color:var(--warn-500)}
.attention .a-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--surface);
  display:grid;place-items:center;color:var(--warn-500);box-shadow:var(--shadow-sm);flex-shrink:0}

/* ---------- 15. Greeting / hero ---------- */
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.hero-stats{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.hero-stat{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700)}
.ring{position:relative;width:128px;height:128px}
.ring svg{transform:rotate(-90deg)}
.ring-label{position:absolute;inset:0;display:grid;place-items:center;flex-direction:column;text-align:center}
.ring-pct{font-size:var(--fs-2xl);font-weight:800;color:var(--ink-900);line-height:1}

/* ---------- 16. Ranking / lists ---------- */
.rank{display:flex;align-items:center;gap:var(--sp-3);padding:12px 0;border-bottom:1px solid var(--ink-100)}
.rank:last-child{border-bottom:none}
.rank-pos{width:26px;height:26px;border-radius:var(--r-full);background:var(--ink-100);
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink-500)}
.rank-pos.top{background:var(--brand-600);color:#fff}
.rank-name{flex:1;font-weight:600;color:var(--ink-800);font-size:var(--fs-sm)}

/* ---------- 17. Heatmap ---------- */
.heat{display:grid;gap:4px;overflow-x:auto}
.heat-row{display:grid;grid-template-columns:96px repeat(7,1fr);gap:4px;align-items:center}
.heat-cell{aspect-ratio:1;border-radius:6px;min-width:24px;display:grid;place-items:center;
  font-size:10px;font-weight:600;color:#fff}
.heat-name{font-size:var(--fs-xs);font-weight:600;color:var(--ink-600,#475569);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.heat-head{font-size:10px;color:var(--ink-400);text-align:center;font-weight:600}

/* ---------- 18. Insights ---------- */
.insight{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);margin-bottom:8px}
.insight.positive{background:var(--ok-50)} .insight.positive .i-ico{color:var(--ok-500)}
.insight.alert{background:var(--danger-50)} .insight.alert .i-ico{color:var(--danger-500)}
.insight.warn{background:var(--warn-50)} .insight.warn .i-ico{color:var(--warn-500)}
.insight.neutral{background:var(--ink-100)} .insight.neutral .i-ico{color:var(--ink-500)}
.insight p{font-size:var(--fs-sm);color:var(--ink-700);font-weight:500}

/* ---------- 19. Table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--ink-200)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--surface)}
.tbl th{text-align:left;padding:12px 16px;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-400);font-weight:700;border-bottom:1px solid var(--ink-200);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--ink-100);color:var(--ink-700)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--ink-50)}
/* No celular, tabelas largas (ex.: Central de Operações) rolam por dentro do
   próprio bloco em vez de empurrar a página inteira (scroll lateral). */
@media(max-width:680px){
  .tbl{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  /* Trava qualquer sobra de largura na área de conteúdo (evita scroll lateral no
     celular). 'clip' não cria contêiner de rolagem — não afeta a rolagem vertical
     nem elementos sticky/fixed. */
  .main{overflow-x:clip}
}
/* #50 PWA/mobile: em telas estreitas o app NUNCA deve rolar/arrastar na horizontal.
   Trava a largura da página inteira; blocos largos (tabelas, mapa de calor) rolam
   por dentro de si (têm overflow-x próprio). Vale até tablet (sidebar off-canvas). */
@media(max-width:1023px){
  html,body{max-width:100%;overflow-x:clip}
  .app,.main,.content{max-width:100%;overflow-x:clip}
  /* Respeita as bordas do sistema no PWA instalado (recorte/gestos do Android e
     notch/home indicator do iOS): sem isso o conteúdo passa por baixo e some. */
  .topbar{padding-left:max(var(--sp-5),env(safe-area-inset-left));
          padding-right:max(var(--sp-5),env(safe-area-inset-right));
          padding-top:max(var(--sp-4),env(safe-area-inset-top))}
  .content{padding-left:max(var(--sp-5),env(safe-area-inset-left));
           padding-right:max(var(--sp-5),env(safe-area-inset-right));
           padding-bottom:max(var(--sp-5),env(safe-area-inset-bottom))}
  .sidebar{padding-bottom:env(safe-area-inset-bottom)}
}

/* ---------- 20. Modal & sheet ---------- */
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60;display:flex;
  align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:var(--transition);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-back.show{opacity:1;pointer-events:auto}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:92vh;overflow-y:auto;transform:translateY(20px);transition:transform var(--transition)}
.modal-back.show .sheet{transform:translateY(0)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);
  border-bottom:1px solid var(--ink-200);position:sticky;top:0;background:var(--surface);z-index:2}
.sheet-body{padding:var(--sp-5)}
.sheet-foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--ink-200);display:flex;gap:10px;
  position:sticky;bottom:0;background:var(--surface)}
@media(min-width:680px){
  .modal-back{align-items:center}
  .sheet{border-radius:var(--r-xl)}
}

/* Cadastro em TELA CHEIA (não popup): preenche a viewport toda e é responsivo.
   Vale só para os cadastros marcados com .form-modal — os demais modais seguem centrados. */
.modal-back.form-modal{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;align-items:stretch;justify-content:stretch}
.modal-back.form-modal .sheet{width:100%!important;max-width:none!important;height:100%;max-height:100%;border-radius:0;transform:none;box-shadow:none}
.modal-back.form-modal .sheet-head,.modal-back.form-modal .sheet-foot{max-width:760px;width:100%;margin-left:auto;margin-right:auto}
.modal-back.form-modal .sheet-body{max-width:760px;width:100%;margin:0 auto}

/* ---------- 21. Toast ---------- */
/* #34: os toasts precisam ficar ACIMA de qualquer painel/drawer/modal (construtor
   de indicador z-index 95/96, histórico do Kanban 1001, etc.) — senão a mensagem
   de erro some por baixo da tela aberta na lateral. z-index bem alto resolve global. */
.toasts{position:fixed;top:var(--sp-5);right:var(--sp-5);z-index:3000;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);
  background:var(--ink-900);color:#fff;box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:500;
  animation:toastIn .3s ease;max-width:360px}
.toast.ok{background:#065f46} .toast.err{background:#991b1b}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ---------- 22. Auth ---------- */
/* Duas faixas: o card centralizado no espaço livre e a assinatura no rodapé.
   Com um filho só (ex.: tela de MFA) a segunda faixa fica sem altura e o card
   continua centralizado como antes. */
.auth-wrap{min-height:100vh;display:grid;grid-template-rows:1fr auto;justify-items:center;
  align-items:center;gap:var(--sp-5);padding:var(--sp-5);
  background:radial-gradient(1200px 600px at 70% -10%,var(--brand-100),transparent),var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--ink-200);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:var(--sp-8)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:var(--sp-6)}
.auth-legal{margin:0;text-align:center;color:var(--ink-400);font-size:.72rem;line-height:1.7;
  max-width:520px;text-wrap:balance}

/* ---------- 23. Signature pad ---------- */
.sigpad{border:2px dashed var(--ink-300);border-radius:var(--r-md);background:var(--ink-50);width:100%;touch-action:none}

/* ---------- 24. Utils ---------- */
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-5{margin-top:20px} .mt-6{margin-top:24px} .mt-8{margin-top:32px} .mt-10{margin-top:40px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-5{margin-bottom:20px} .mb-6{margin-bottom:24px} .mb-8{margin-bottom:32px} .mb-10{margin-bottom:40px}
.flex-wrap{flex-wrap:wrap} .flex-1{flex:1} .w-full{width:100%}
.hidden{display:none!important}
.fade-in{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.empty{text-align:center;padding:var(--sp-12) var(--sp-5);color:var(--ink-400)}
.empty svg{margin:0 auto var(--sp-3);color:var(--ink-300)}

/* ---------- 25. Live (tempo real) ---------- */
@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
.kpi-val span{transition:color .3s}
.flash-up{animation:flashUp .8s ease}
@keyframes flashUp{0%{color:var(--ok-500)}100%{color:inherit}}

/* ---------- 26. Seletor visual de ícones ---------- */
.ipick{position:relative;display:inline-block}
.ipick-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;
  border:1px solid var(--ink-300);border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-width:62px;color:var(--ink-700)}
.ipick-btn:hover{border-color:var(--brand-500)}
.ipick-pop{position:absolute;z-index:50;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--ink-200);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:236px}
.ipick-pop.hidden{display:none}
.ipick-opt{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--ink-500);
  cursor:pointer;border:1px solid transparent;transition:var(--transition)}
.ipick-opt:hover{background:var(--ink-100);color:var(--ink-800)}
.ipick-opt.sel{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-200)}

/* ---------- 27. Select com busca (searchable) ---------- */
/* O widget acompanha a LARGURA do campo (bloco 100%): funciona igual em campo de
   formulário e em célula estreita de modal/flex. Nunca força min-width fixo, senão
   estoura containers apertados (ex.: modal .qk 480px, célula "Duração" 108px) e
   quebra o layout quando o select nasce dentro de um modal oculto (display:none). */
.ssel{position:relative;display:block;width:100%;max-width:100%}
.ssel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:100%;max-width:100%;cursor:pointer;text-align:left}
/* O menu nasce ancorado à ESQUERDA e ocupa toda a largura do campo (ergonomia +
   mobile-first). min-width garante usabilidade quando o botão é estreito. */
/* z-index alto: o popup é movido para o <body> ao abrir (escapa de ancestral com
   transform), então precisa ficar ACIMA de qualquer scrim/modal (o mais alto é o
   .qk da Agenda em 121), senão o menu aparece atrás do blur. */
.ssel-pop{position:absolute;z-index:1000;top:calc(100% + 6px);left:0;width:100%;min-width:min(240px,90vw);background:var(--surface);
  border:1px solid var(--ink-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px}
.ssel-pop.hidden{display:none}
.ssel-search{margin-bottom:8px}
.ssel-list{max-height:260px;overflow-y:auto}

/* ---------- 27b. Scrollbar estilizada em áreas roláveis internas ----------
   Regra do design system: nenhuma área rolável interna com scrollbar nativa crua.
   Usa tokens (coerente no modo escuro via --ink-*). */
.ssel-list,.combo-menu,.pp-results,.msel-list,.table-wrap,.modal-body,.oc-panel-body,
.mdx-drawer-body,.ipick-grid,.drawer-body{scrollbar-width:thin;scrollbar-color:var(--ink-200) transparent}
.ssel-list::-webkit-scrollbar,.combo-menu::-webkit-scrollbar,.pp-results::-webkit-scrollbar,
.msel-list::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.modal-body::-webkit-scrollbar,
.oc-panel-body::-webkit-scrollbar,.mdx-drawer-body::-webkit-scrollbar,
.ipick-grid::-webkit-scrollbar,.drawer-body::-webkit-scrollbar{width:8px;height:8px}
.ssel-list::-webkit-scrollbar-track,.combo-menu::-webkit-scrollbar-track,.pp-results::-webkit-scrollbar-track,
.msel-list::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track,
.oc-panel-body::-webkit-scrollbar-track,.mdx-drawer-body::-webkit-scrollbar-track,
.ipick-grid::-webkit-scrollbar-track,.drawer-body::-webkit-scrollbar-track{background:transparent}
.ssel-list::-webkit-scrollbar-thumb,.combo-menu::-webkit-scrollbar-thumb,.pp-results::-webkit-scrollbar-thumb,
.msel-list::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,
.oc-panel-body::-webkit-scrollbar-thumb,.mdx-drawer-body::-webkit-scrollbar-thumb,
.ipick-grid::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{
  background:var(--ink-200);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.ssel-list::-webkit-scrollbar-thumb:hover,.combo-menu::-webkit-scrollbar-thumb:hover,
.pp-results::-webkit-scrollbar-thumb:hover,.msel-list::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover,
.oc-panel-body::-webkit-scrollbar-thumb:hover,.mdx-drawer-body::-webkit-scrollbar-thumb:hover,
.ipick-grid::-webkit-scrollbar-thumb:hover,.drawer-body::-webkit-scrollbar-thumb:hover{background:var(--ink-300);background-clip:padding-box}
.ssel-opt{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--ink-700);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssel-opt:hover{background:var(--ink-100)}
.ssel-opt.sel{background:var(--brand-50);color:var(--brand-600);font-weight:600}

/* ---------- 27c. Navegação suave entre páginas ----------
   View Transitions (cross-document): o navegador anima a troca de página e o
   sidebar/topbar — visualmente idênticos em todas as telas — ficam ESTÁTICOS
   (têm snapshot próprio, sem animação). Navegadores sem suporte (ex.: Firefox)
   simplesmente navegam normal. Complementa o nav.js (troca parcial real). */
@view-transition{navigation:auto}
.sidebar{view-transition-name:mc-sidebar}
.topbar{view-transition-name:mc-topbar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}
::view-transition-old(mc-sidebar),::view-transition-new(mc-sidebar),
::view-transition-old(mc-topbar),::view-transition-new(mc-topbar){animation:none}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* Barra fina de progresso do nav.js */
.nav-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brand-500);z-index:2000;
  transition:width .25s ease;border-radius:0 3px 3px 0;pointer-events:none}
.nav-progress.run{width:70%}
.nav-progress.done{transition:width .12s ease,opacity .3s ease .12s;width:100%;opacity:0}

/* ---------- 27d. Botão flutuante de salvar (guarda de alterações) ---------- */
.save-fab{position:fixed;right:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border:0;border-radius:14px;background:var(--brand-600);color:#fff;font:inherit;font-weight:700;
  font-size:.92rem;cursor:pointer;box-shadow:0 12px 30px rgba(79,70,229,.4);
  /* CTA único: em repouso o form já tem o botão "Salvar alterações" no fim.
     O flutuante só aparece quando existe alteração pendente (evita 2 botões). */
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.save-fab svg{flex:none}
.save-fab.dirty{opacity:1;pointer-events:auto;transform:translateY(0)}
.save-fab.dirty:hover{filter:brightness(1.06)}
.save-fab.dirty::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--warn-500,#f59e0b);border:2px solid var(--surface)}
@media(max-width:680px){.save-fab{right:14px;bottom:14px;padding:12px 17px}}
/* Pop-up de sair sem salvar: 3 opções na mesma linha, mesmo tamanho e fonte,
   com destaque decrescente (Continuar editando > Salvar e sair > Sair sem salvar). */
.guard-actions{display:flex;gap:8px;margin-top:6px}
.guard-btn{flex:1;min-width:0;padding:11px 8px;border:1px solid transparent;border-radius:11px;
  font-family:inherit;font-size:.82rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer;
  transition:filter .15s,background .15s}
.guard-btn:hover{filter:brightness(.96)}
.guard-keep{background:var(--brand-600);color:#fff}                                   /* mais destaque */
.guard-save{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200)} /* médio */
.guard-leave{background:transparent;color:var(--ink-500);border-color:var(--ink-200)}        /* menos destaque */
@media(max-width:420px){.guard-btn{font-size:.78rem;padding:10px 6px}}

/* ---------- 27d. Responsividade fina (telas estreitas) ----------
   Garante que o sistema "encaixe" em qualquer aparelho: timeline empilha o
   horário sobre o card, grids de 2 colunas viram 1, e espaçamentos encolhem. */
@media(max-width:860px){
  /* Grids declarados inline nas views (ex.: formulário + lista) empilham. */
  .grid:not(.grid-kpi):not(.grid-2):not(.grid-3){grid-template-columns:1fr!important}
  .desk-grid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  /* mantém o respeito às bordas do sistema (safe-area) mesmo apertando o padding */
  .content{padding:var(--sp-4) max(var(--sp-3),env(safe-area-inset-right)) max(var(--sp-4),env(safe-area-inset-bottom)) max(var(--sp-3),env(safe-area-inset-left))}
  .card-pad{padding:var(--sp-4)}
  /* Timeline da Minha Central: horário vira rótulo acima do card. */
  .time-rail{flex-direction:column;gap:6px}
  .time-mark{width:auto;text-align:left;padding-top:0}
  .time-mark .hh{font-size:var(--fs-xs);color:var(--ink-500)}
  .act{padding:12px;gap:10px}
  .act-ico{width:36px;height:36px}
  .act-title{font-size:var(--fs-base)}
  .act-actions .act-check{width:38px;height:38px}
  /* Hero: saudação e anel de progresso empilhados e centrados. */
  .h-hero{font-size:1.45rem}
  .ring{margin:0 auto}
  /* Cadastro rápido compacto (input + botão cabem na linha). */
  .quick-add{padding:8px 10px;gap:8px}
  .quick-add-input{min-width:0}
  .quick-add .btn{padding:8px 10px;font-size:.78rem;white-space:nowrap}
  /* Toasts ocupam a largura da tela, sem vazar. */
  .toasts{left:var(--sp-3);right:var(--sp-3)}
  .toast{max-width:none;width:100%}
  /* Date picker nunca ultrapassa a borda. */
  .dp-pop{max-width:calc(100vw - 16px)}
  /* Botões em linha quebram em vez de estourar. */
  .hero .btn,.card .flex>.btn{white-space:normal}
  /* Formulários de upload (Importação em Massa etc.): campo e botão empilham. */
  .card form.flex{flex-wrap:wrap}
  .filefield{width:100%}
  .card form.flex>.btn{width:100%;justify-content:center}
}

/* ---------- Filtros retráteis (recolhidos por padrão) ---------- */
.filter-collapsible .filter-toggle{cursor:pointer;user-select:none}
.filter-caret{display:inline-flex;align-items:center;transition:transform .18s ease;color:var(--ink-400)}
.filter-collapsible:not(.collapsed) .filter-caret{transform:rotate(180deg)}
.filter-collapsible.collapsed>*:not(.filter-toggle){display:none!important}
.filter-collapsible.collapsed{padding-top:12px;padding-bottom:12px}
.filter-toggle:hover{color:var(--brand-600)}
/* #31 Os selects dos filtros viram seletor com busca (.ssel, que nasce com 100% de largura)
   e empilhavam um embaixo do outro. Dentro do bloco de filtros eles ficam lado a lado e
   quebram linha conforme o espaço; no celular voltam a ocupar a largura toda. */
/* v1.9.6: grade de colunas iguais — todos os campos com a mesma largura e alinhados
   em colunas (antes cada um tinha a largura do texto e sobravam vãos irregulares). */
.filter-collapsible:not(.collapsed){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;align-items:center}
.filter-collapsible>.filter-toggle{grid-column:1/-1}
.filter-collapsible>.ssel{width:100%;max-width:none;min-width:0}
.filter-collapsible>.ssel>.ssel-btn{width:100%}
.filter-collapsible>:not(.ssel):not(.filter-toggle):not(input):not(select){justify-self:start}
.filter-collapsible>input.input{width:100%}
.filter-collapsible>label.chip{grid-column:span 2;white-space:nowrap}
@media(max-width:600px){ .filter-collapsible>label.chip{grid-column:auto;white-space:normal} }

/* Cabeçalhos ordenáveis (list-tools: th[data-sortcol]) */
th[data-sortcol]{cursor:pointer;user-select:none;white-space:nowrap}
th[data-sortcol]::after{content:'↕';margin-left:6px;color:var(--ink-300);font-size:.8em}
th[data-sortcol].is-sorted.asc::after{content:'↑';color:var(--brand-600)}
th[data-sortcol].is-sorted.desc::after{content:'↓';color:var(--brand-600)}
th[data-sortcol]:hover{color:var(--brand-600)}

/* ---------- 27e. Impressão / exportar em PDF ----------
   Esconde a "moldura" do app (sidebar, topo, botões flutuantes) e imprime só o
   conteúdo. O usuário escolhe "Salvar como PDF" no diálogo de impressão. */
@media print{
  .sidebar,.topbar,.scrim,.save-fab,.toasts,.support-strip,.menu-toggle{display:none!important}
  .app,.main{display:block!important}
  .main{margin:0!important}
  .content{padding:0!important}
  body{background:#fff!important}
  a[href]::after{content:none!important}
  .card{box-shadow:none!important;border-color:#e2e8f0!important;break-inside:avoid}
}

/* ---------- Tooltip flutuante reutilizável (qualquer elemento com data-tip) ---------- */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);background:#1e293b;color:#f1f5f9;font-size:.72rem;font-weight:600;line-height:1.3;
  padding:6px 10px;border-radius:8px;white-space:nowrap;max-width:240px;white-space:normal;width:max-content;
  box-shadow:0 6px 20px rgba(2,6,23,.35);z-index:60;pointer-events:none}
[data-tip]:hover::before,[data-tip]:focus-visible::before{content:'';position:absolute;left:50%;bottom:calc(100% + 3px);
  transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b;z-index:60;pointer-events:none}
.pill-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--brand-50);color:var(--brand-600);cursor:help;flex:none}
.ssel-empty{padding:10px;color:var(--ink-400);font-size:.85rem;text-align:center}

/* Campos canônicos de lançamento de atividade (partial activity-fields.php) */
.af-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.af-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.af-field > .label{font-weight:600;font-size:.85rem;color:var(--ink-700)}
.af-opt{font-weight:400;color:var(--ink-400);font-size:.82em}

/* ---------- Novidades ("O que há de novo") ---------- */
.rel-head{display:flex;align-items:flex-start;gap:12px}
.rel-ico{width:44px;height:44px;border-radius:12px;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;flex:none}
.rel-ver{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.02em;color:var(--brand-600);background:var(--brand-50);border-radius:999px;padding:3px 10px}
.rel-date{font-size:.78rem;color:var(--ink-400);margin-left:8px}
.rel-title{font-size:1.1rem;font-weight:800;color:var(--ink-900);margin-top:6px;line-height:1.3}
.rel-items{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.rel-items li{position:relative;padding-left:22px;color:var(--ink-700);font-size:.92rem;line-height:1.5}
.rel-items li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brand-500)}
.rel-items strong{color:var(--ink-900)}
.rel-note{margin-top:16px;padding-top:12px;border-top:1px dashed var(--ink-200);font-size:.78rem;color:var(--ink-500);line-height:1.5}
.rel-note a{color:var(--brand-600);font-weight:700}
.rel-back{position:fixed;inset:0;z-index:2500;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:12px;animation:relFade .15s ease}
/* A rolagem fica num miolo (.rel-scroll); a caixa externa só recorta. Antes a barra de rolagem
   (texto longo) era desenhada por cima do canto e o deixava quadrado (#56). */
.rel-modal{width:min(560px,100%);max-height:85vh;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border-radius:20px;box-shadow:0 24px 64px rgba(2,6,23,.35);animation:relUp .18s ease}
.rel-scroll{overflow:auto;padding:22px 22px 18px;min-height:0}
.rel-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
@keyframes relFade{from{opacity:0}to{opacity:1}}
@keyframes relUp{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){ .rel-back{align-items:flex-end;padding:10px} .rel-modal{max-height:86vh} .rel-scroll{padding:18px 16px 14px} .rel-modal-foot .btn{flex:1;justify-content:center} }
.notif-item.is-release{background:color-mix(in srgb,var(--brand-500) 7%,var(--surface))}

/* Hora corrigida automaticamente (25:70 → 23:59): borda pisca em vermelho, sem texto. */
.time-fixed{animation:timeFixed 1.5s ease}
@keyframes timeFixed{0%,35%{border-color:var(--danger-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-500) 22%,transparent)}100%{}}

/* ---------- Menu por intenção: seções recolhíveis e Ajuda no rodapé ---------- */
.nav-label-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;user-select:none;border-radius:8px}
.nav-label-toggle:hover{color:var(--ink-600)}
.nav-label-toggle:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px}
.nav-sec-caret{display:inline-flex;color:var(--ink-400);transition:transform .15s}
.nav-label-toggle.is-collapsed .nav-sec-caret{transform:rotate(-90deg)}
.nav-sec.is-collapsed{display:none}
.nav.nav-editing .nav-sec.is-collapsed{display:block}
.nav-foot .nav-foot-help{margin:0 0 8px;font-size:.86rem;padding:8px 12px}

/* Liberação de categoria: botão na linha da categoria */
.cat-rel-btn{position:relative}
.cat-rel-btn.is-restricted{color:var(--brand-600)}
.cat-rel-n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--brand-600);color:#fff;font-size:.62rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

.insight-cta{font-weight:700;color:var(--brand-600);white-space:nowrap;text-decoration:none}
.insight-cta:hover{text-decoration:underline}

/* Boas-vindas: instalar app + lembretes + biometria */
.ob-modal{z-index:2550}
.ob-modal .sheet{max-width:480px}
.ob-modal .sheet-head strong{font-size:1.02rem;color:var(--ink-900)}
.ob-step{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ink-100)}
.ob-step:first-of-type{border-top:0}
.ob-num{width:30px;height:30px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;font-weight:800;flex:none}
.ob-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ob-txt strong{color:var(--ink-900);font-size:.92rem}
.ob-txt span{color:var(--ink-500);font-size:.8rem}
.ob-done{width:30px;height:30px;border-radius:50%;background:var(--ok-500);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}

.daily-box{border-top:1px solid var(--ink-100);padding-top:14px}
.daily-box .chk-text{white-space:normal;line-height:1.45}

/* #37 autoria */
.edit-trail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--ink-400);font-size:.8rem;margin:4px 0 14px}

/* ===== Editor rico (chat de suporte) e mensagens formatadas ===== */
.rte{position:relative;border:1.5px solid var(--ink-200);border-radius:14px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.rte:focus-within{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-100)}
.rte.is-drag{border-style:dashed;border-color:var(--brand-500);background:var(--brand-50)}
.rte.is-invalid{border-color:var(--danger-500)}
.rte-tb{display:flex;gap:2px;flex-wrap:wrap;align-items:center;padding:6px;border-bottom:1px solid var(--ink-100)}
.rte-tb button{min-width:34px;height:32px;padding:0 7px;border:0;background:transparent;border-radius:8px;color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.85rem}
.rte-tb button:hover{background:var(--ink-100)}
.rte-tb button.on{background:var(--brand-50);color:var(--brand-600)}
.rte-tb .rte-imgbtn span{font-size:.8rem}
.rte-sep{width:1px;align-self:stretch;background:var(--ink-200);margin:4px 3px}
.rte-hint{margin-left:auto;font-size:.72rem;color:var(--ink-400);padding-right:6px}
.rte-area{min-height:110px;max-height:420px;overflow:auto;padding:12px 14px;outline:0}
.rte.is-empty .rte-area::before{content:attr(data-ph);color:var(--ink-400);pointer-events:none;position:absolute}
.rte-area img{cursor:pointer}
.rte-area img.is-sel{outline:3px solid var(--brand-400);outline-offset:2px}
.rte-area img.rte-up{opacity:.7;cursor:progress}
.rte-size{position:absolute;z-index:5;display:flex;gap:3px;align-items:center;background:var(--ink-900);color:#fff;border-radius:10px;padding:4px 6px;font-size:.75rem;box-shadow:0 8px 20px rgba(2,6,23,.25)}
.rte-size[hidden]{display:none}
.rte-size span{padding:0 4px;opacity:.75}
.rte-size button{border:0;background:transparent;color:#fff;border-radius:6px;padding:4px 8px;font-weight:700;font-size:.75rem}
.rte-size button:hover,.rte-size button.on{background:rgba(255,255,255,.18)}
.rte-size .rte-rm{color:#fca5a5}
.rte-src,.rte-store{display:none!important}
.rich p,.msg-body p{margin:0 0 .6em}.rich p:last-child,.msg-body p:last-child{margin-bottom:0}
.rich ul,.rich ol,.msg-body ul,.msg-body ol{margin:.3em 0 .6em;padding-left:1.4em}
.rich ul,.msg-body ul{list-style:disc}.rich ol,.msg-body ol{list-style:decimal}
.rich a,.msg-body a{color:var(--brand-600);text-decoration:underline}
.rich blockquote,.msg-body blockquote{margin:.4em 0;padding:.3em .9em;border-left:3px solid var(--brand-200);color:var(--ink-700);background:var(--brand-50);border-radius:0 8px 8px 0}
.rich code,.msg-body code{background:var(--ink-100);border-radius:5px;padding:1px 5px;font-size:.88em}
.rich img,.msg-body img{display:block;max-width:100%;height:auto;max-height:420px;border-radius:10px;border:1px solid var(--ink-200);margin:8px 0;background:#fff}
.msg-body img{cursor:zoom-in}
.rich img[data-size="s"],.msg-body img[data-size="s"]{width:25%;min-width:120px}
.rich img[data-size="m"],.msg-body img[data-size="m"]{width:50%;min-width:160px}
.rich img[data-size="l"],.msg-body img[data-size="l"]{width:75%}
.rte-lb{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}
.rte-lb img{max-width:96vw;max-height:92vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45);background:#fff}
@media (max-width:640px){.rte-hint{display:none}.rte-tb button{min-width:38px;height:36px}}
.msg-body.is-html{white-space:normal}
.msg:has(.msg-body img){width:88%}

/* ---------- Chat interno (gaveta à direita) ---------- */
.chat-btn{position:relative}
.chat-scrim{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:1200}
.chat-scrim[hidden],.chat-drawer[hidden]{display:none}
.chat-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--surface);z-index:1201;display:flex;flex-direction:column;
  box-shadow:-18px 0 48px rgba(2,6,23,.18);transform:translateX(24px);opacity:0;transition:transform .2s ease,opacity .2s ease}
.chat-drawer.show{transform:none;opacity:1}
.chat-head{display:flex;align-items:center;gap:8px;padding:14px 14px 12px;border-bottom:1px solid var(--ink-100)}
.chat-titles{flex:1;min-width:0}
.chat-title{font-weight:800;color:var(--ink-900);font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:.76rem;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub:empty{display:none}
.chat-ico{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--ink-600);font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;text-decoration:none;flex:none}
.chat-ico:hover{background:var(--ink-100);color:var(--ink-900)}
.chat-ico[hidden],.chat-new[hidden]{display:none}
.chat-new{border:0;background:var(--brand-600);color:#fff;font-weight:700;font-size:.82rem;padding:7px 12px;border-radius:10px;cursor:pointer;flex:none}
.chat-new:hover{background:var(--brand-700)}
.chat-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px;gap:8px}
.chat-search{flex:none}
.chat-list{flex:1;overflow:auto;margin:0 -4px;padding:0 4px}
.chat-empty{color:var(--ink-400);text-align:center;padding:30px 10px;font-size:.9rem}
.chat-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:9px 8px;border-radius:12px;cursor:pointer;color:inherit;font:inherit}
.chat-item:hover{background:var(--ink-50)}
.chat-item.unread .chat-name{font-weight:800}
.chat-av{width:38px;height:38px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.chat-av.grp{background:var(--ink-100);font-size:1rem}
/* Foto presa ao círculo: absoluta, então foto em pé ou deitada (sem recorte) não estica o avatar. */
.chat-av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.chat-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-row1,.chat-row2{display:flex;align-items:center;gap:8px}
.chat-name{flex:1;min-width:0;font-weight:600;color:var(--ink-900);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-time{font-size:.7rem;color:var(--ink-400);flex:none}
.chat-prev{flex:1;min-width:0;font-size:.8rem;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-unread{background:var(--brand-600);color:#fff;border-radius:9px;min-width:18px;height:18px;padding:0 5px;font-size:.68rem;font-weight:800;display:grid;place-items:center;flex:none}
.chat-person input{accent-color:var(--brand-600);flex:none}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px}
.chat-chips:empty{display:none}
.chat-chip{cursor:pointer;background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200)}
.chat-gname[hidden]{display:none}
.chat-go{flex:none;justify-content:center}
.chat-stream{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.chat-more{align-self:center;border:1px solid var(--ink-200);background:var(--surface);border-radius:999px;font-size:.75rem;padding:4px 10px;color:var(--ink-600);cursor:pointer}
.chat-more[hidden]{display:none}
.chat-msg{display:flex}
.chat-msg.mine{justify-content:flex-end}
.chat-bub{max-width:82%;background:var(--ink-100);color:var(--ink-900);border-radius:14px 14px 14px 4px;padding:7px 10px;font-size:.88rem;line-height:1.4}
.chat-msg.mine .chat-bub{background:var(--brand-600);color:#fff;border-radius:14px 14px 4px 14px}
.chat-msg.deleted .chat-bub{background:transparent;border:1px dashed var(--ink-200);color:var(--ink-400);font-style:italic}
.chat-author{font-size:.72rem;font-weight:800;color:var(--brand-700);margin-bottom:2px}
.chat-text{white-space:pre-wrap;word-break:break-word}
.chat-meta{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:.66rem;opacity:.7;margin-top:3px}
.chat-del{border:0;background:transparent;color:inherit;font-size:.66rem;text-decoration:underline;cursor:pointer;padding:0;opacity:0;transition:opacity .15s}
.chat-msg:hover .chat-del,.chat-del:focus{opacity:1}
@media (hover:none){.chat-del{opacity:.85}}
.chat-img img{display:block;max-width:240px;max-height:240px;border-radius:10px;margin-bottom:4px}
.chat-file{display:inline-block;color:inherit;font-weight:600;margin-bottom:2px;word-break:break-all}
.chat-filetag{font-size:.78rem;color:var(--brand-700);background:var(--brand-50);border-radius:8px;padding:5px 8px;cursor:pointer}
.chat-filetag[hidden]{display:none}
.chat-compose{display:flex;align-items:flex-end;gap:6px;border-top:1px solid var(--ink-100);padding-top:8px}
.chat-input{flex:1;resize:none;border:1px solid var(--ink-200);border-radius:12px;padding:9px 11px;font:inherit;font-size:.9rem;background:var(--surface);color:var(--ink-900);max-height:140px;outline:0}
.chat-input:focus{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}
.chat-send{flex:none}
.chat-menu{position:absolute;top:56px;right:12px;z-index:5;min-width:210px;background:var(--surface);border:1px solid var(--ink-100);border-radius:12px;box-shadow:0 12px 32px rgba(2,6,23,.16);padding:6px}
.chat-menu[hidden]{display:none}
.chat-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:8px;font:inherit;font-size:.88rem;color:var(--ink-800);cursor:pointer}
.chat-menu-item:hover{background:var(--ink-50)}
.chat-menu-item.danger{color:var(--danger-600,#dc2626)}
.chat-rename{display:flex;gap:6px;align-items:center}
.chat-rename .input{flex:1;min-width:0}
.chat-sys{align-self:center;text-align:center;font-size:.72rem;color:var(--ink-500);background:var(--ink-50);border-radius:999px;padding:3px 10px;margin:2px 0;max-width:90%}
.chat-bc{font-size:.68rem;font-weight:800;letter-spacing:.02em;opacity:.85;margin-bottom:2px}
.chat-tabs{display:flex;gap:4px;background:var(--ink-50);border-radius:10px;padding:3px;flex:none}
.chat-tab{flex:1;border:0;background:transparent;border-radius:8px;padding:7px 8px;font:inherit;font-size:.84rem;font-weight:600;color:var(--ink-600);cursor:pointer}
.chat-tab.active{background:var(--surface);color:var(--ink-900);box-shadow:0 1px 3px rgba(2,6,23,.1)}
.chat-bcform{display:flex;flex-direction:column;gap:8px;overflow:auto}
.chat-bcform select[hidden]{display:none}
.chat-bcpick{display:flex;flex-direction:column;gap:6px}
.chat-bcpick[hidden]{display:none}
.chat-bcall{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-600);padding:0 4px;cursor:pointer}
.chat-bclist{max-height:220px;overflow:auto;border:1px solid var(--ink-200);border-radius:11px;padding:4px;background:var(--surface)}
.chat-bcitem{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;font-size:.88rem;color:var(--ink-700)}
.chat-bcitem[hidden]{display:none}
.chat-bcitem:hover{background:var(--ink-50)}
.chat-bcitem:has(input:checked){background:var(--brand-50);color:var(--brand-700);font-weight:600}
.chat-bcitem input,.chat-bcall input{accent-color:var(--brand-600)}
.chat-bctext{resize:vertical;min-height:120px}
/* Estrutura: lista lateral (só em tela cheia) + área principal */
.chat-main{flex:1;min-height:0;display:flex}
.chat-main > .chat-body{flex:1;min-width:0}
.chat-side{display:none}
.chat-full-btn .i-col{display:none}
.chat-drawer.full .chat-full-btn .i-exp{display:none}
.chat-drawer.full .chat-full-btn .i-col{display:inline}
@media (max-width: 899px){ .chat-full-btn{display:none!important} }
.chat-item.active{background:var(--brand-50)}
.chat-item.active .chat-name{color:var(--brand-700)}
.chat-day{align-self:center;margin:8px 0 2px}
.chat-day span{display:inline-block;font-size:.7rem;font-weight:700;color:var(--ink-500);background:var(--surface);border:1px solid var(--ink-100);border-radius:8px;padding:3px 10px;box-shadow:0 1px 2px rgba(2,6,23,.05)}
/* Tela cheia (estilo WhatsApp) */
.chat-drawer.full{left:0;right:0;width:auto;transform:none}
.chat-drawer.full .chat-side{display:flex;flex-direction:column;gap:8px;width:min(380px,34vw);flex:none;border-right:1px solid var(--ink-100);padding:10px 12px;min-height:0}
.chat-drawer.full .chat-main > .chat-body{padding:0;gap:0;background-color:var(--ink-50);background-image:radial-gradient(var(--ink-200) 1px,transparent 1px);background-size:22px 22px}
.chat-drawer.full .chat-stream{padding:14px 6%}
.chat-drawer.full .chat-bub{max-width:62%}
.chat-drawer.full .chat-msg:not(.mine):not(.deleted) .chat-bub{background:var(--surface);box-shadow:0 1px 2px rgba(2,6,23,.08)}
.chat-drawer.full .chat-compose{background:var(--surface);padding:10px 14px;border-top:1px solid var(--ink-100)}
.chat-drawer.full .chat-filetag{margin:0 14px 6px}
.chat-drawer.full .chat-more{margin-top:10px}
.chat-drawer.full .chat-tabs,.chat-drawer.full .chat-bcform,.chat-drawer.full .chat-main > .chat-body > .chat-search,
.chat-drawer.full .chat-chips,.chat-drawer.full .chat-gname,.chat-drawer.full .chat-main > .chat-body > .chat-list,.chat-drawer.full .chat-go,.chat-drawer.full .chat-rename{margin-left:14px;margin-right:14px}
.chat-drawer.full .chat-tabs{margin-top:12px}
.chat-drawer.full .chat-main > .chat-body > .chat-list{background:var(--surface);border-radius:12px;padding:4px}
.chat-drawer.full .chat-go{margin-bottom:12px}
.chat-lb{position:fixed;inset:0;z-index:1400;background:rgba(15,23,42,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 24px;opacity:0;transition:opacity .15s ease}
.chat-lb.show{opacity:1}
.chat-lb-img{max-width:min(1100px,100%);max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 24px 64px rgba(2,6,23,.45);background:#fff}
.chat-lb-bar{position:absolute;top:14px;left:16px;right:16px;display:flex;align-items:center;gap:8px;color:#fff}
.chat-lb-name{flex:1;min-width:0;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-lb-btn{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;padding:8px 12px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:none}
.chat-lb-btn:hover{background:rgba(255,255,255,.28)}
.chat-placeholder{margin:auto;text-align:center;color:var(--ink-500);padding:30px}
.chat-ph-ico{font-size:2.6rem;margin-bottom:8px}
.chat-ph-title{font-weight:800;color:var(--ink-900);font-size:1.15rem}
.chat-ph-sub{font-size:.88rem;margin-top:4px}
.chat-lgpd{font-size:.68rem;color:var(--ink-400);text-align:center;padding:6px 12px 10px;border-top:1px solid var(--ink-100)}
@media (max-width:600px){ .chat-drawer{width:100vw} .chat-img img{max-width:200px} }
/* Chat: status do envio (relógio → ✓ → ✓✓) */
.chat-tick{display:inline-flex;align-items:center;line-height:0;opacity:.9}
.chat-tick.is-wait{opacity:.75}
.chat-tick.is-read{color:#7dd3fc;opacity:1}
.chat-tick.is-fail{color:#fecaca;opacity:1;cursor:pointer}
.chat-msg.mine .chat-meta{opacity:.85}
/* Chat: responder (citação) */
.chat-quote{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;cursor:pointer;font:inherit;
  background:rgba(2,6,23,.06);border-left:3px solid var(--brand-500);border-radius:8px;padding:5px 8px;margin:2px 0 5px;color:inherit}
.chat-msg.mine .chat-quote{background:rgba(255,255,255,.16);border-left-color:#fff}
.chat-quote-who{font-size:.7rem;font-weight:800;opacity:.9}
.chat-quote-txt{font-size:.78rem;opacity:.85;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap}
.chat-replybar{display:flex;align-items:center;gap:8px;border-left:3px solid var(--brand-500);background:var(--brand-50);border-radius:8px;padding:6px 8px;margin-bottom:6px}
.chat-replybar[hidden]{display:none}
.chat-replybar-txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.8rem;color:var(--ink-700)}
.chat-replybar-txt b{font-size:.72rem;color:var(--brand-700)}
.chat-replybar-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-replybar-x{border:0;background:transparent;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink-500);padding:2px 6px}
.chat-msg.chat-flash .chat-bub{animation:chatFlash 1.4s ease}
@keyframes chatFlash{0%,40%{box-shadow:0 0 0 3px var(--brand-300)}100%{box-shadow:0 0 0 0 transparent}}
/* Chat: arrastar para responder (celular) */
.chat-msg{position:relative}
.chat-bub{touch-action:pan-y}
.chat-swipe-ico{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-100);color:var(--ink-600);font-size:.95rem;opacity:0;transition:background .12s,color .12s}
.chat-swipe-ico.go{background:var(--brand-600);color:#fff}
/* Chat: setinha de opções e menu da mensagem (como no WhatsApp) */
.chat-bub{position:relative}
.chat-chev{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:6px;display:grid;place-items:center;cursor:pointer;
  background:inherit;color:inherit;opacity:0;transition:opacity .12s;box-shadow:-6px 0 8px -2px var(--ink-100)}
.chat-msg.mine .chat-chev{box-shadow:-6px 0 8px -2px var(--brand-600)}
.chat-msg:hover .chat-chev,.chat-chev:focus-visible,.chat-msg.menu-on .chat-chev{opacity:.9}
@media (hover:none){.chat-chev{display:none}.chat-bub{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
.chat-msgmenu{position:fixed;top:auto;right:auto;z-index:1300;min-width:160px}
.chat-msg.menu-on .chat-bub{filter:brightness(.96)}
/* Chat: seletor de emoji */
.chat-emoji-btn{font-size:1.15rem;line-height:1}
.chat-emoji-pop{position:fixed;z-index:1300;width:min(340px,calc(100vw - 16px));height:min(360px,60vh);display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border:1px solid var(--ink-100);border-radius:14px;box-shadow:0 14px 36px rgba(2,6,23,.2);padding:8px}
.chat-emoji-q{width:100%;border:1px solid var(--ink-200);border-radius:9px;padding:7px 10px;font:inherit;font-size:.85rem;background:var(--surface);color:var(--ink-900)}
.chat-emoji-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ink-100);padding-bottom:4px}
.chat-emoji-tab{border:0;background:transparent;font-size:1.15rem;padding:4px 6px;border-radius:8px;cursor:pointer;flex:1}
.chat-emoji-tab:hover{background:var(--ink-50)}
.chat-emoji-grid{flex:1;overflow:auto}
.chat-emoji-sec{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-400);padding:6px 4px 2px}
.chat-emoji-cells{display:grid;grid-template-columns:repeat(8,1fr)}
.chat-emoji-cell{border:0;background:transparent;font-size:1.35rem;line-height:1;padding:6px 0;border-radius:8px;cursor:pointer}
.chat-emoji-cell:hover,.chat-emoji-cell:focus-visible{background:var(--ink-100)}
.chat-emoji-none{padding:16px;color:var(--ink-400);font-size:.85rem;text-align:center}
/* Chat: reações */
.chat-quickreacts{display:flex;gap:2px;padding:2px 2px 6px;border-bottom:1px solid var(--ink-100);margin-bottom:4px}
.chat-qr{border:0;background:transparent;font-size:1.25rem;line-height:1;padding:5px;border-radius:50%;cursor:pointer;transition:transform .1s}
.chat-qr:hover{transform:scale(1.2);background:var(--ink-50)}
.chat-qr.on{background:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand-300)}
.chat-msg{flex-wrap:wrap}
.chat-reacts{display:flex;gap:4px;flex-wrap:wrap;width:100%;margin-top:-4px;padding:0 6px;position:relative;z-index:1}
.chat-msg.mine .chat-reacts{justify-content:flex-end}
.chat-react{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--ink-200);background:var(--surface);border-radius:999px;padding:1px 7px;font-size:.85rem;cursor:pointer;box-shadow:0 1px 2px rgba(2,6,23,.08)}
.chat-react b{font-size:.7rem;color:var(--ink-600)}
.chat-react.me{border-color:var(--brand-400);background:var(--brand-50)}
/* Chat: bolinha de não lidas no Voltar */
.chat-back{position:relative}
.chat-back-badge{position:absolute;top:1px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger-500,#ef4444);color:#fff;font-size:.62rem;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.chat-back-badge[hidden]{display:none}
/* Chat: edição */
.chat-edited{font-style:italic;opacity:.85}
.chat-replybar.is-edit{border-left-color:var(--warn-500,#f59e0b);background:var(--warn-50,#fffbeb)}
.chat-replybar.is-edit .chat-replybar-txt b{color:var(--warn-700,#b45309)}
/* Chat: anexo colado/arrastado */
.chat-filetag{display:flex;align-items:center;gap:8px}
.chat-filetag-img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--ink-200);flex:none}
.chat-filetag-x{margin-left:auto;font-weight:700;opacity:.8}
.chat-drop .chat-stream{outline:2px dashed var(--brand-400);outline-offset:-6px;background:var(--brand-50)}
/* Chat: presença */
.chat-av{position:relative}
.chat-online{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ok-500,#10b981);box-shadow:0 0 0 2px var(--surface)}
.chat-sub-on{color:var(--ok-600,#059669);font-weight:700}
.chat-sub-on::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:4px;vertical-align:1px}
/* Chat: status (online/ausente/ocupado) */
.chat-online.st-away{background:#f59e0b}
.chat-online.st-busy{background:#ef4444}
.chat-sub-on.st-away{color:#b45309}
.chat-sub-on.st-busy{color:#dc2626}
.chat-mystatus{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--ink-100);background:var(--surface);border-radius:10px;padding:7px 10px;margin-bottom:8px;cursor:pointer;font:inherit;font-size:.82rem;color:var(--ink-700);text-align:left}
.chat-mystatus .chat-online{position:static;box-shadow:none;flex:none}
.chat-mystatus-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.chat-mystatus-c{font-size:.72rem;color:var(--brand-600);font-weight:700}
.chat-stmenu{min-width:240px}
.chat-stmenu .chat-menu-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-stmenu .chat-menu-item .chat-online{position:static;box-shadow:none}
.chat-stmenu .chat-menu-item small{flex-basis:100%;padding-left:19px;color:var(--ink-400);font-size:.7rem}
.chat-stmenu .chat-menu-item.on{background:var(--brand-50)}
.chat-st-txt{width:100%;margin-top:4px;border:1px solid var(--ink-200);border-radius:8px;padding:7px 9px;font:inherit;font-size:.82rem;background:var(--surface);color:var(--ink-900)}

/* #68 App só do chat: sem menu/topo do sistema; a gaveta ocupa a tela inteira e não fecha. */
body.chat-app-mode .sidebar, body.chat-app-mode .topbar, body.chat-app-mode .scrim{display:none}
body.chat-app-mode .chat-drawer{left:0;right:0;width:auto;transform:none;opacity:1}
body.chat-app-mode .chat-scrim, body.chat-app-mode .chat-close{display:none!important}

/* ===== #71 Ocupação da tela: conteúdo mais largo e formulários sem largura estreita ===== */
.content{max-width:1680px}
@media(min-width:1024px){ .content{padding:var(--sp-6) var(--sp-8)} }
.content > form[style*="max-width"],
.content > .card[style*="max-width"],
.content > .thread[style*="max-width"],
.content > p.muted[style*="max-width"],
.content > .flex[style*="max-width"]{max-width:none!important}

/* ===== #73 Sem títulos/resumos internos: o nome da tela fica só na barra do topo.
   Fica o que traz contexto (marcado .hero-keep: assunto do chamado, data da agenda,
   de quem é a agenda etc.), as ações e os indicadores do cabeçalho. ===== */
.hero .eyebrow:not(.hero-keep),
.hero .h-hero:not(.hero-keep),
.content .h-hero:not(.hero-keep),
.hero > div > p.muted:not(.hero-keep),
.hero > div > p.text-sm.muted:not(.hero-keep){display:none!important}
.hero{margin-bottom:var(--sp-4)}
.hero .hero-keep.mt-2:first-child, .hero .hero-keep + .hero-stats{margin-top:0}
.hero:not(:has(.hero-keep, .btn, .hero-stats, .hero-stat, form, select, input, .badge, .learn-prog, .acc-flow, .lib-searchbox, .flex, button)){display:none}
/* #79 links no chat: legíveis no balão (claro/escuro) */
.chat-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.chat-link:hover{opacity:.85}
/* #77 Barra de prioridade antes do número do chamado (sutil, sem pintar a linha) */
.tk-pri{display:inline-block;width:4px;height:1.05em;border-radius:var(--r-full);margin-right:8px;vertical-align:-0.15em;background:var(--ink-300)}
.tk-pri-normal{background:var(--info-500)}
.tk-pri-high{background:var(--warn-500)}
.tk-pri-urgent{background:var(--danger-500)}
/* #76 aviso do combo "buscar ou criar" quando o texto bate com uma opção de outra grafia */
.combo-hint{margin-top:6px;font-size:var(--fs-xs);color:var(--warn-500);font-weight:600}
.combo-hint[hidden]{display:none}

/* ---------- Módulos: selo "não contratado" (só o Master vê) ---------- */
.nav-off,.mod-off-badge{display:inline-flex;align-items:center;font-size:.64rem;font-weight:700;flex-shrink:0;
  color:var(--warn-700);background:var(--warn-50);border:1px solid var(--warn-500);border-radius:20px;padding:1px 7px;white-space:nowrap;line-height:1.5}
.nav-off{margin-left:auto;padding:0 4px;font-size:.56rem;letter-spacing:-.01em}
.mod-off-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-700);background:var(--warn-50);
  border:1px solid var(--warn-500);border-radius:var(--r-md,10px);padding:10px 12px;margin-bottom:12px}

/* #81 Filtros salvos (saved-filters.js): linha própria no rodapé da área de filtros,
   separada por um fio, para não encostar em nenhum campo (form em bloco ou em linha). */
.sf-bar{flex:1 1 100%;width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--ink-100)}
.sf-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);margin-right:2px}
.sf-bar .ssel{width:240px;flex:none}
.sf-bar .sf-del{color:var(--danger-600,#dc2626)}
.filter-collapsible.collapsed .sf-bar{display:none}
.filter-collapsible>.sf-bar{grid-column:1/-1;justify-self:stretch;margin-top:4px}
/* Barras sem cartão (Comercial): sem fio e mais perto dos campos. */
.com-bar>.sf-bar,.com-filters>.sf-bar{border-top:0;padding-top:0;margin-top:0}
@media (max-width:640px){.sf-bar .ssel{flex:1 1 100%;width:100%}.sf-label{flex-basis:100%}}

/* inKanban · seletor de quadros e projetos compartilhados */
.kbs{position:relative}
.kbs-btn{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--ink-200);border-radius:12px;padding:8px 12px 8px 14px;min-width:260px;max-width:100%;color:var(--ink-900);cursor:pointer;font:inherit;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.kbs-btn:hover,.kbs-btn[aria-expanded="true"]{border-color:var(--brand-400,#818cf8)}
.kbs-btn svg{margin-left:auto;color:var(--ink-500);flex:none}
.kbs-dot{width:10px;height:10px;border-radius:50%;flex:none}
.kbs-txt{display:flex;flex-direction:column;min-width:0}
.kbs-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);line-height:1.2}
.kbs-name{font-size:.98rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.kbs-pop{position:absolute;top:calc(100% + 8px);left:0;width:min(440px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--ink-200);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.18);padding:10px;z-index:60;max-height:min(70vh,560px);overflow:auto}
.kbs-search{margin-bottom:4px}
.kbs-grp{font-size:.7rem;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em;padding:10px 8px 4px}
.kbs-it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;background:none;border-radius:10px;cursor:pointer;color:var(--ink-900);font:inherit;text-align:left}
.kbs-it:hover,.kbs-it:focus-visible{background:var(--ink-50)}
.kbs-it.on{background:var(--brand-50)}
.kbs-it-name{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbs-it-name small{color:var(--ink-500);font-weight:500}
.kbs-it-meta{font-size:.78rem;color:var(--ink-500);white-space:nowrap}
.kbs-empty{padding:14px 8px;color:var(--ink-500);font-size:.88rem}
.kbs-foot{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--ink-100);margin-top:8px;padding-top:10px}
.kbs-back{margin-bottom:4px}
.kbs-avs{display:flex;align-items:center;margin-right:4px}
.kbs-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.68rem;font-weight:800;border:2px solid var(--surface);margin-left:-8px}
.kbs-av:first-child{margin-left:0}
.kbs-av.kbs-more{background:var(--ink-200);color:var(--ink-700)}
.kbs-menu-wrap{position:relative}
.kbs-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--surface);border:1px solid var(--ink-200);border-radius:12px;box-shadow:0 14px 34px rgba(15,23,42,.16);padding:6px;z-index:60}
.kbs-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--ink-800);font:inherit;font-weight:600;text-align:left}
.kbs-menu button:hover{background:var(--ink-50)}
.kbs-menu button.danger{color:var(--danger-600,#dc2626)}
.kbs-info{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem;color:var(--ink-700);margin:-6px 0 14px}
.kbs-archived{display:flex;align-items:center;gap:8px;background:var(--warn-50,#fffbeb);color:var(--warn-700,#92400e);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:.88rem;font-weight:600}
.kb-readonly .kb-add,.kb-readonly .kb-col-plus,.kb-readonly .kb-del,.kb-readonly .kb-arch{display:none!important}
.kb-readonly .kb-card{cursor:pointer}
.kbd.kbd-ro .kbd-title{pointer-events:none}
.kbs-modal.wide{width:min(600px,100%)}
.kbs-m-title{margin:0 0 6px;font-size:1.1rem;color:var(--ink-900)}
.kbs-m-sub{margin:0 0 14px;color:var(--ink-500);font-size:.88rem;line-height:1.45}
.kbs-m-body{max-height:min(62vh,520px);overflow:auto}
.kbs-m-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.kbs-field{display:block;margin-bottom:12px}
.kbs-field-lbl{display:block;font-size:.8rem;font-weight:700;color:var(--ink-700);margin-bottom:5px}
.kbs-colors{display:flex;gap:8px;flex-wrap:wrap}
.kbs-sw{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kbs-sw.on{border-color:var(--ink-900)}
.kbs-share-add{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:8px;align-items:center;margin-bottom:6px}
.kbs-share-add .ssel{width:100%}
.kbs-mem{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ink-100)}
.kbs-mem:last-child{border-bottom:0}
.kbs-mem-name{font-weight:600;color:var(--ink-900);min-width:0;overflow:hidden;text-overflow:ellipsis}
.kbs-mem-name small{display:block;color:var(--ink-500);font-weight:500;font-size:.78rem}
.kbs-mem .ssel{width:100%}
.kbs-role{font-size:.82rem;font-weight:700;color:var(--brand-700)}
.kbs-danger{color:var(--danger-600,#dc2626)}
@media (max-width:640px){.kbs-btn{min-width:0;width:100%}.kbs-name{max-width:62vw}.kbs-share-add,.kbs-mem{grid-template-columns:1fr}.kbs-info{margin-top:0}}
/* Cartão sem data: o selo de previsão some (o display:flex da visão detalhada vencia o [hidden]). */
.kb-card .kb-due[hidden]{display:none!important}

/* Agenda: arrastar atividade pessoal / cartão do inKanban (agenda-drag.js) */
[data-drag]{cursor:grab;touch-action:pan-y}
[data-drag]:active{cursor:grabbing}
.wk-ev[data-drag]{padding-bottom:6px}
.wk-rs{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize;border-radius:0 0 6px 6px}
.wk-rs::after{content:'';position:absolute;left:50%;bottom:2px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .15s}
.wk-ev:hover .wk-rs::after{opacity:.45}
.wk-dragging{opacity:.35}
.wk-saving{opacity:.6;pointer-events:none}
.wk-ghost{position:absolute;left:3px;right:3px;z-index:30;border-radius:6px;border:2px dashed var(--brand-500);background:color-mix(in srgb,var(--brand-500) 14%,var(--surface));color:var(--brand-700);padding:2px 6px;font-size:.72rem;line-height:1.25;pointer-events:none;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,.16)}
.wk-ghost.bad{border-color:var(--danger-500,#ef4444);background:color-mix(in srgb,var(--danger-500,#ef4444) 10%,var(--surface));color:var(--danger-600,#dc2626)}
.wk-ghost-t{display:block;font-weight:800}
.wk-ghost-n{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-undo{display:flex;align-items:center;gap:12px}
.wk-undo-btn{border:0;background:rgba(255,255,255,.22);color:inherit;font:inherit;font-weight:800;border-radius:8px;padding:4px 10px;cursor:pointer}
/* Listas suspensas e calendário abertos DENTRO de pop-ups (cad-modal 2700): ficam por cima do pop-up, abaixo dos avisos (3000). */
.ssel-pop{z-index:2750}
.dp-pop{z-index:2750}
/* inKanban: cor personalizada do projeto (seletor do sistema dentro do botão) */
.kbs-sw-pick{position:relative;overflow:hidden;background:conic-gradient(#ef4444,#f59e0b,#10b981,#0ea5e9,#6366f1,#ec4899,#ef4444)}
.kbs-sw-pick.has{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kbs-sw-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
/* inKanban: aviso de novidades no projeto (quando a pessoa está no meio de algo) */
.kbs-live{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2600;display:flex;align-items:center;gap:12px;background:var(--ink-900);color:#fff;border-radius:14px;padding:10px 12px 10px 16px;box-shadow:0 14px 34px rgba(2,6,23,.3);font-size:.9rem;font-weight:600;max-width:calc(100vw - 24px)}
@media (max-width:640px){.kbs-live{flex-direction:column;align-items:stretch;text-align:center}}
/* inKanban › Configurar */
.kbs-tog{margin-bottom:10px}
.kbs-tog>span:first-child{display:flex;flex-direction:column;gap:2px}
.kbs-tog-hint{font-size:.8rem;color:var(--ink-500);font-weight:500}