:root{
  --paper:#eef2f7; --surface:#fff; --surface-2:#f3f6fa; --navy:#1F2B4A; --ink:#1F2B4A;
  --muted:#69748b; --line:#e1e7f0; --accent:#0F9FBC; --accent-d:#0B7E96;
  --cyan:#00B3CC; --blue:#0B82E6; --blue-soft:#e2eefd;
  --ok:#1f9d63; --ok-soft:#dcf3e7; --err:#c0392b; --err-soft:#fbe4e0;
  --amber:#9a6b14; --amber-soft:#f6ecd2; --radius:14px;
  --shadow:0 1px 2px rgba(31,43,74,.05),0 10px 28px -14px rgba(31,43,74,.22);
}
*{box-sizing:border-box}
/* Barra de rolagem slim e discreta (evita a barra grossa com setas do tema do SO) */
*{scrollbar-width:thin;scrollbar-color:#c7d0dc transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c7d0dc;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#aab6c6;background-clip:padding-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Roboto",system-ui,-apple-system,sans-serif;
  background-image:radial-gradient(1100px 520px at 88% -10%,#e3eef5 0%,transparent 60%);}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;color:var(--navy);margin:.2rem 0}
a{color:var(--accent-d);text-decoration:none}
.muted{color:var(--muted)}
.brand{font-weight:700;color:var(--navy);font-size:1.18rem}
.brand span{color:var(--cyan)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--surface);padding:2.4rem 2.2rem;border-radius:18px;width:380px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.login-card h1{font-size:1.35rem;margin:.4rem 0 .2rem}
.login-card input{display:block;width:100%;margin:.55rem 0;padding:.72rem .8rem;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);font-size:.95rem}
.erro{color:var(--err);font-size:.85rem;min-height:1.1rem;margin:.3rem 0}
.contas{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.9rem;font-size:.8rem}
.contas b{color:var(--navy)} .contas .row{cursor:pointer;padding:.35rem .5rem;border-radius:8px;color:var(--muted)}
.contas .row:hover{background:var(--surface-2);color:var(--navy)}

/* ---------- shell: topbar horizontal + container central ---------- */
header.top{display:flex;align-items:center;gap:1.1rem;padding:.6rem 1.6rem;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.top .sp{flex:1}
.topnav{display:flex;align-items:center;gap:.2rem;margin-left:.6rem}
.topnav-item{padding:.5rem .85rem;border-radius:9px;cursor:pointer;color:var(--navy);font-size:.9rem;
  font-weight:500;white-space:nowrap}
.topnav-item:hover{background:var(--surface-2)}
.topnav-item.active{background:var(--accent);color:#fff}
.lnk-sair{font-weight:500}
@media(max-width:780px){.topnav{flex-wrap:wrap;gap:.1rem}.topnav-item{padding:.4rem .6rem;font-size:.82rem}}
.papel-badge{font-size:.72rem;font-weight:600;padding:.22rem .6rem;border-radius:20px;background:var(--blue-soft);color:#0b62b6}
.papel-sel{font-size:.72rem;font-weight:600;padding:.2rem 1.4rem .2rem .6rem;border-radius:20px;
  background:var(--blue-soft);color:#0b62b6;border:1px solid transparent;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230b62b6' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center}
.papel-sel:hover{border-color:#bcd6f0}
.user{font-size:.85rem;color:var(--muted)}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:10px;text-decoration:none;
  width:40px;height:40px;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--navy)}
.icon-btn:hover{border-color:var(--cyan);color:var(--accent-d)}
a.icon-btn{font-weight:700}
.icon-btn .dot{position:absolute;top:-6px;right:-6px;background:var(--err);color:#fff;font-size:.68rem;
  font-weight:700;min-width:18px;height:18px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* main é o ÚNICO scroller (altura fixa + overflow): é o que faz o position:sticky da
   coluna esquerda do detalhe engatar. Com min-height a janela rolava e o sticky não pegava. */
main{padding:1.6rem 1.8rem 3rem;overflow:auto;max-width:1180px;width:100%;margin:0 auto;height:calc(100vh - 56px)}
/* o detalhe usa toda a largura útil (workspace) */
main:has(.detalhe-grid){max-width:1320px}

/* ---------- KPIs (caixas grandes, número-link) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.6rem}
.kpis-prod{grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem}
.kpis-prod .kpi.box{padding:.9rem .85rem}
@media(max-width:900px){.kpis-prod{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.kpis-prod{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi.box{position:relative;display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow);cursor:pointer;
  text-decoration:none;transition:.12s}
.kpi.box:hover{border-color:var(--accent);transform:translateY(-2px)}
.kpi.box .info{position:absolute;top:.6rem;right:.65rem;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:.66rem;font-weight:700;font-style:italic;
  display:flex;align-items:center;justify-content:center;cursor:help;line-height:1}
.kpi.box:hover .info{border-color:var(--accent);color:var(--accent-d)}
.kpi.box[data-tip]::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);z-index:30;
  width:min(280px,72vw);background:var(--navy);color:#fff;font-size:.76rem;font-weight:400;line-height:1.4;
  padding:.55rem .7rem;border-radius:8px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s;pointer-events:none}
.kpi.box[data-tip]::before{content:"";position:absolute;left:14px;top:calc(100% + 2px);z-index:31;
  border:6px solid transparent;border-bottom-color:var(--navy);opacity:0;visibility:hidden;transition:.14s}
.kpi.box[data-tip]:hover::after,.kpi.box[data-tip]:hover::before{opacity:1;visibility:visible;transform:translateY(0)}
/* breakdown por tipo no hover/focus (KPIs com .has-bk) — links navegáveis */
.kpi-bk{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(260px,80vw);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s}
.kpi.box.has-bk:hover .kpi-bk,.kpi.box.has-bk:focus-within .kpi-bk{opacity:1;visibility:visible;transform:translateY(0)}
.kpi.box.has-bk:hover{z-index:41}
.kpi-bk .bk-hd{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:.3rem .45rem .25rem}
.kpi-bk .bk-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem .45rem;border-radius:7px;font-size:.82rem;font-weight:500;color:var(--navy);cursor:pointer}
.kpi-bk .bk-row:hover{background:var(--surface-2);color:var(--accent-d)}
.kpi-bk .bk-row b{font-variant-numeric:tabular-nums;font-weight:700}
.kpi-bk .bk-ft{font-size:.68rem;color:var(--muted);padding:.3rem .45rem 0;border-top:1px solid var(--line);
  margin-top:.25rem}

.kpi.box .num{font-size:2.4rem;font-weight:700;color:var(--navy);line-height:1}
.kpi.box .num .num-sub{font-size:1rem;font-weight:500;color:var(--muted)}
.kpi.box .lab{font-size:.8rem;color:var(--muted);margin-top:.45rem}
.kpi.box.hl .num{color:var(--accent-d)}
.kpi.box.warn .num{color:var(--amber)}
.kpi.box.ok .num{color:var(--ok)}

/* ---------- cards / list ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.1rem}
.grid2{display:grid;grid-template-columns:1.3fr .9fr;gap:1.2rem;align-items:start}
.grupo{margin-bottom:1.1rem}
.grupo-hd{display:flex;align-items:center;gap:.6rem;padding:.5rem .2rem;cursor:pointer;
  border-bottom:2px solid var(--line);margin-bottom:.6rem}
.grupo-hd b{color:var(--navy);font-size:1rem}
.grupo-hd .caret{color:var(--muted);font-size:.85rem;transition:.15s;width:.9rem;display:inline-block}
.grupo.fechado .caret{transform:rotate(-90deg)}
.grupo.fechado .grupo-body{display:none}
.grupo-hd .grupo-n{background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;
  border-radius:20px;padding:.05rem .55rem}
.grupo-hd .grupo-sub{color:var(--muted);font-size:.8rem;margin-left:.2rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.caso-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;
  margin-bottom:.6rem;cursor:pointer;transition:.12s;display:flex;gap:.8rem;align-items:center}
.caso-row:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.caso-row .main{flex:1;min-width:0}
.caso-row .titulo{font-weight:600;color:var(--navy)}
.caso-row .sub{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caso-row .right{text-align:right;font-size:.76rem;color:var(--muted);flex-shrink:0}
.caso-row .sub{white-space:normal;overflow:visible}
.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.02em}

.chip{display:inline-block;font-size:.72rem;padding:.16rem .55rem;border-radius:20px;background:var(--surface-2);
  color:var(--navy);border:1px solid var(--line);font-weight:500}
.chip.b{background:var(--blue-soft);border-color:#cfe2fb;color:#0b62b6}
.chip.g{background:var(--ok-soft);border-color:#bfe6cf;color:#157346}
.chip.r{background:var(--err-soft);border-color:#f3c7bf;color:#a5301f}
.chip.a{background:var(--amber-soft);border-color:#e9d9ad;color:var(--amber)}
.chip.lock{background:#f0eafc;border-color:#ddd0f3;color:#6b41b3}
.chip.route{background:#e6f7fb;border-color:#b8e7f0;color:var(--accent-d)}
.chip.route.fix{background:#fff3da;border-color:#e9d9ad;color:#8a6d1f;font-weight:600}

/* chip de TIPO de manifestação (cor por tipo, neutra e discreta) */
.chip.tipo{font-weight:600;background:var(--surface-2);border-color:var(--line);color:var(--navy)}
.chip.tipo-proposicao{background:#eef0fb;border-color:#d6daf6;color:#3d46a8}
.chip.tipo-noticia{background:#e7f4ee;border-color:#c4e6d3;color:#157346}
.chip.tipo-rede_social{background:#fbeef6;border-color:#f1cfe5;color:#a8348a}
.chip.tipo-discurso{background:#fff1e2;border-color:#f3d9bd;color:#a86a1f}
.chip.tipo-evento{background:#e6f6f9;border-color:#bfe7ef;color:var(--accent-d)}

/* ---------- barra de filtros (tipo / macrotema / período) ---------- */
.filtros{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.1rem}
.ftipos{display:flex;flex-wrap:wrap;gap:.4rem}
.fchip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--surface);
  color:var(--navy);border-radius:20px;padding:.34rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:.12s}
.fchip:hover{border-color:var(--accent);background:var(--surface-2)}
.fchip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fchip-n{font-size:.7rem;font-weight:700;background:var(--surface-2);color:var(--muted);border-radius:20px;
  padding:.02rem .4rem;min-width:1.1rem;text-align:center}
.fchip.active .fchip-n{background:rgba(255,255,255,.25);color:#fff}
.frow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.fsel{padding:.45rem 2rem .45rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-size:.84rem;color:var(--ink);font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2369748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .65rem center;max-width:100%}
.fperiodo{font-size:.8rem}
.fclear{border:0;background:transparent;color:var(--muted);font-size:.8rem;font-weight:600;cursor:pointer;
  font-family:inherit;padding:.4rem .5rem;border-radius:8px}
.fclear:hover{background:var(--surface-2);color:var(--err)}

.prio{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.prio.p1{background:var(--err)} .prio.p2{background:var(--amber)} .prio.p3{background:var(--muted)}

/* ---------- detalhe ---------- */
.btn{border:0;border-radius:10px;padding:.6rem 1rem;font-weight:600;cursor:pointer;font-size:.9rem}
.btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-d)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--navy)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:.3rem}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--accent))}

.ementa{line-height:1.6;font-size:.95rem;color:#2a3550}

/* ---------- workspace de detalhe: esquerda fixa + blocos colapsáveis ---------- */
.detalhe-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:1.2rem;align-items:start}
/* coluna esquerda: altura NATURAL limitada à viewport (max-height, não height fixo),
   para conteúdo curto não gerar espaço em branco enorme; longo rola dentro do teor. */
/* main já é o scroller e começa abaixo da topbar (56px) — o sticky top é relativo
   ao topo do main, então NÃO se desconta a topbar de novo (senão sobra um vazio de 56px). */
.detalhe-left{position:sticky;top:0;align-self:start;max-height:calc(100vh - 56px - 3rem);
  display:flex;flex-direction:column;gap:1rem}
.voltar-fila{flex-shrink:0;font-size:.85rem;cursor:pointer}

/* Discussão do caso — estilo chat: outros à esquerda (com avatar), eu à direita */
.thread{display:flex;flex-direction:column;gap:.55rem;max-height:340px;overflow:auto;padding:.15rem}
.msg-row{display:flex;gap:.45rem;align-items:flex-end;max-width:100%}
.msg-row.mine{flex-direction:row-reverse}
.msg-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:.64rem;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.msg{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.45rem .65rem;max-width:78%}
.msg-row:not(.mine) .msg{border-bottom-left-radius:4px}
.msg-row.mine .msg{background:var(--blue-soft);border-color:#cfe0f7;border-bottom-right-radius:4px}
.msg-hd{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem;flex-wrap:wrap}
.msg-row.mine .msg-hd{justify-content:flex-end}
.msg-tx{font-size:.88rem;white-space:pre-wrap;line-height:1.45;color:var(--ink)}

/* Estúdio de criação de issue */
.estudio-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
@media(max-width:900px){.estudio-grid{grid-template-columns:1fr}}
.est-tip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);padding:.4rem .55rem;max-width:220px;pointer-events:none;z-index:5}
#estCanvas + .est-tip{margin-top:-4px}
.card:has(#estCanvas){position:relative}
.detalhe-left>.card:first-child{margin-top:0}
.cbox{display:flex;flex-direction:column;min-height:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  transition:flex-grow .22s ease,flex-basis .22s ease}
#boxResumo{flex:0 0 auto}              /* resumo é curto: altura natural, sem esticar */
#boxTeor{flex:0 1 auto}                /* teor: natural, encolhe e rola só quando longo */
.cbox.hide{flex:0 0 auto}
#boxResumo.hide,#boxTeor.hide{flex:0 0 auto}
.cbox.hide .cbox-body{display:none}
.cbox-body{overflow:auto;padding:0 1rem 1rem;min-height:0;flex:1 1 auto}
.collapse-h{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  user-select:none;padding:.8rem 1rem .4rem}
.collapse-h h4{margin:0}
.collapse-h .caret{color:var(--muted);font-size:.85rem;transition:.15s}
.cbox.hide .collapse-h .caret{transform:rotate(-90deg)}
.detalhe-left .ementa{max-height:none;border:0;background:transparent;padding:0}
.teor-nota{font-size:.78rem;color:var(--amber);background:var(--amber-soft);border:1px solid #e9d9ad;
  border-radius:8px;padding:.45rem .7rem;margin:.3rem 0}
mark.hl,.hl{background:#fff3c4;border-bottom:2px solid #e9c64a;padding:0 1px;border-radius:2px;color:inherit}
mark.hl.strong,.hl.strong{background:#ffe08a;border-bottom-color:#d9a514}
mark.hl.flash{animation:flash 1.3s ease}
@keyframes flash{0%{background:#ffd24a;box-shadow:0 0 0 4px #ffe08a}60%{background:#ffd24a}100%{background:#fff3c4;box-shadow:none}}
.mk-leg{cursor:pointer;transition:.12s}.mk-leg:hover{border-left-color:var(--accent-d);background:#eafafd}
.destaque{border-left:3px solid var(--accent);background:var(--surface-2);padding:.5rem .7rem;border-radius:0 8px 8px 0;margin:.4rem 0;font-size:.9rem}
.destaque .motivo{font-size:.72rem;color:var(--muted);margin-top:.2rem}

.rec-box{background:linear-gradient(180deg,#f0fbfd,#fff);border:1px solid #c5ecf3;border-radius:12px;padding:.9rem}
.rec-box .path{font-size:.8rem;color:var(--muted)}
.rec-box .issue{font-weight:700;color:var(--navy);font-size:1.02rem;margin:.2rem 0}

.field{display:flex;flex-direction:column;font-size:.78rem;color:var(--muted);gap:.3rem;margin-bottom:.7rem}
.field input,.field select,.field textarea{padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-size:.92rem;color:var(--ink);font-family:inherit}
.busca-modos{display:flex;gap:.4rem;margin-bottom:.4rem}
.busca-modos .modo{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:8px;padding:.4rem .5rem;font-size:.78rem;font-weight:600;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:.35rem;font-family:inherit}
.busca-modos .modo.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.busca-modos .modo .soon{font-size:.62rem;font-weight:700;background:var(--amber-soft);color:var(--amber);
  border-radius:10px;padding:.02rem .35rem}
.busca-modos .modo.active .soon{background:rgba(255,255,255,.25);color:#fff}
.busca-res{max-height:230px;overflow:auto;margin-top:.4rem}
.busca-res .it{padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;margin-bottom:.35rem;cursor:pointer}
.busca-res .it:hover{border-color:var(--accent);background:var(--surface-2)}
.busca-res .it.sel{border-color:var(--accent);background:#eafafd}
.sim-row{display:flex;justify-content:space-between;gap:.5rem;padding:.55rem .6rem;border:1px solid var(--line);
  border-radius:8px;margin-bottom:.4rem;font-size:.85rem}
.sim-row .s{color:var(--accent-d);font-weight:700;flex-shrink:0}

.autor{font-size:.84rem;color:var(--navy)}
.tram{font-size:.82rem;color:var(--muted);border-left:2px solid var(--line);padding-left:.6rem;margin:.3rem 0}

/* notificações */
.notif-panel{position:absolute;right:1.4rem;top:62px;width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);z-index:40;max-height:70vh;overflow:auto}
.notif-panel .hd{padding:.7rem .9rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.notif{padding:.7rem .9rem;border-bottom:1px solid var(--line);font-size:.86rem;cursor:pointer}
.notif:hover{background:var(--surface-2)} .notif.unread{background:#f4faff}
.notif .meta{font-size:.72rem;color:var(--muted);margin-top:.25rem}

.empty{text-align:center;color:var(--muted);padding:3rem 1rem}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:.7rem 1.2rem;border-radius:10px;box-shadow:var(--shadow);z-index:80;font-size:.9rem;opacity:0;transition:.2s}
.toast.show{opacity:1}
.row-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.kv{display:flex;gap:.5rem;font-size:.85rem;margin:.2rem 0}.kv b{color:var(--navy)}
.section-title{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0 .6rem}
.section-title h3{margin:0}
hr.soft{border:0;border-top:1px solid var(--line);margin:1rem 0}

/* sim-row clicável (precedente) */
.sim-row.clickable{cursor:pointer;transition:.12s}
.sim-row.clickable:hover{border-color:var(--accent);background:#eafafd;transform:translateY(-1px)}

/* card colapsável (clientes que acompanham) */
.card.collapsible .collapse-h{padding:0;cursor:pointer}
.card.collapsible .collapse-h h4{display:flex;align-items:center}
.card.collapsible .caret{color:var(--muted);font-size:.85rem;transition:.15s}
.card.collapsible.closed .caret{transform:rotate(-90deg)}
.card.collapsible.closed .collapsible-body{display:none}
.card.collapsible .collapsible-body{margin-top:.7rem}

/* modal "Análise do precedente" */
.modal-bg{position:fixed;inset:0;background:rgba(31,43,74,.45);z-index:60}
.modal{position:fixed;z-index:61;top:50%;left:50%;transform:translate(-50%,-50%);width:min(620px,92vw);
  max-height:86vh;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 24px 60px -20px rgba(31,43,74,.5)}
.modal-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.1rem 1.3rem .6rem}
.modal-body{padding:0 1.3rem 1.3rem}
.modal .ementa{line-height:1.55}

@media(max-width:900px){
  main{min-height:auto}
  main{height:auto;overflow:visible}
  .detalhe-grid{grid-template-columns:1fr}
  .detalhe-left{position:static;height:auto}
  .cbox{transition:none}
  #boxResumo,#boxTeor{flex:0 0 auto}
  #boxResumo.hide,#boxTeor.hide{flex:0 0 auto}
  .cbox-body{max-height:50vh}
}

/* ---------- Gestão: abas, segmentos, tabela, gargalos ---------- */
.tabs{display:flex;gap:.3rem;border-bottom:2px solid var(--line);margin:.2rem 0 1.1rem}
.tabs .tab{padding:.6rem 1rem;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--muted);
  border:0;background:none;border-bottom:3px solid transparent;margin-bottom:-2px;font-family:inherit}
.tabs .tab:hover{color:var(--navy)}
.tabs .tab.active{color:var(--navy);border-bottom-color:var(--accent)}
.seg-group{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg{border:0;background:transparent;padding:.45rem .8rem;font-size:.82rem;font-weight:600;color:var(--muted);
  cursor:pointer;font-family:inherit;border-right:1px solid var(--line)}
.seg:last-child{border-right:0}
.seg:hover{background:var(--surface-2)}
.seg.active{background:var(--accent);color:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.4rem}
table.tbl th,table.tbl td{padding:.55rem .6rem;text-align:left;border-bottom:1px solid var(--line)}
table.tbl th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tr:hover td{background:var(--surface-2)}
.lnk-num{color:var(--accent-d);font-weight:600;cursor:pointer}
.lnk-num:hover{text-decoration:underline}
.gargalo{border-left:4px solid var(--line);transition:.12s}
.gargalo:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.gargalo.sev-alta{border-left-color:var(--err)}
.gargalo.sev-media{border-left-color:var(--amber)}
.gargalo.sev-baixa{border-left-color:var(--accent)}
.sev-badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.1rem .45rem;border-radius:20px;margin-left:.4rem;vertical-align:middle}
.sev-badge.sev-alta{background:var(--err-soft);color:var(--err)}
.sev-badge.sev-media{background:var(--amber-soft);color:var(--amber)}
.sev-badge.sev-baixa{background:var(--blue-soft);color:#0b62b6}

/* ---------- seletor de tema (A/B) ---------- */
.tema-switch{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  font-size:.72rem;font-weight:700}
.tema-switch a{padding:.28rem .7rem;color:var(--muted);white-space:nowrap}
.tema-switch a:hover{background:var(--surface-2)}
.tema-switch a.on{background:var(--accent);color:#fff}

/* ============ MOBILE (≤640px) — passe de celular ============ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  /* header: marca + cluster à direita na linha 1; nav vira faixa rolável na linha 2 */
  header.top{flex-wrap:wrap;gap:.45rem .6rem;padding:.5rem .8rem}
  header.top .sp{flex:1}
  .brand{font-size:1.05rem}
  #userNome{display:none}                 /* economiza espaço; papel+sino+Sair ficam */
  .tema-switch{font-size:.64rem}
  .papel-badge,.papel-sel{font-size:.68rem}
  .icon-btn{width:34px;height:34px}
  .topnav{order:10;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;
    padding-bottom:.15rem;gap:.15rem}
  .topnav-item{flex:0 0 auto;padding:.4rem .7rem}

  main{padding:1rem .85rem 2.2rem}

  /* KPIs: 2 por linha, mais compactos (em vez de 5 caixas gigantes empilhadas) */
  .kpis{grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.1rem}
  .kpi.box{padding:.7rem .8rem}
  .kpi.box .num{font-size:1.55rem}
  .kpi.box .num .num-sub{font-size:.8rem}
  .kpi.box .lab{font-size:.7rem;margin-top:.3rem}
  /* tooltips de hover não servem em touch e o ::after (280px) criava overflow lateral */
  .kpi.box[data-tip]::after,.kpi.box[data-tip]::before{display:none}
  .kpi.box .info{display:none}
  /* o breakdown por tipo (hover) também não serve em touch — os chips de filtro dão o mesmo drill-down */
  .kpi-bk{display:none}

  /* filtros: chips de tipo e período rolam horizontalmente sem estourar a largura */
  .ftipos{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}
  .fchip{flex:0 0 auto}
  .fsel{flex:1 1 auto}
  .fperiodo{overflow-x:auto}

  /* abas e segmentos roláveis horizontalmente */
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tabs .tab{flex:0 0 auto;padding:.55rem .8rem;font-size:.86rem}
  .seg-group{font-size:.74rem}

  .section-title{flex-wrap:wrap;gap:.4rem}
  table.tbl{font-size:.8rem;min-width:460px}
  table.tbl th,table.tbl td{padding:.45rem .5rem}
}

/* ============ Pré-visualização CELULAR no desktop (body.sim-mobile) ============ */
/* Emula a viewport de celular numa moldura central; espelha as regras do @media. */
body.sim-mobile{background:#363b45}
body.sim-mobile header.top{max-width:412px;margin:0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
body.sim-mobile main{max-width:412px !important;margin:0 auto;
  box-shadow:0 0 40px rgba(0,0,0,.25)}
/* — espelho do @media(max-width:640px) — */
body.sim-mobile header.top{flex-wrap:wrap;gap:.45rem .6rem;padding:.5rem .8rem}
body.sim-mobile .brand{font-size:1.05rem}
body.sim-mobile #userNome{display:none}
body.sim-mobile .tema-switch{font-size:.64rem}
body.sim-mobile .papel-badge,body.sim-mobile .papel-sel{font-size:.68rem}
body.sim-mobile .icon-btn{width:34px;height:34px}
body.sim-mobile .topnav{order:10;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.15rem;gap:.15rem}
body.sim-mobile .topnav-item{flex:0 0 auto;padding:.4rem .7rem}
body.sim-mobile .kpis{grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.1rem}
body.sim-mobile .kpi.box{padding:.7rem .8rem}
body.sim-mobile .kpi.box .num{font-size:1.55rem}
body.sim-mobile .kpi.box .lab{font-size:.7rem;margin-top:.3rem}
body.sim-mobile .kpi.box[data-tip]::after,body.sim-mobile .kpi.box[data-tip]::before{display:none}
body.sim-mobile .kpi-bk{display:none}
body.sim-mobile .tabs{overflow-x:auto;flex-wrap:nowrap}
body.sim-mobile .tabs .tab{flex:0 0 auto;padding:.55rem .8rem;font-size:.86rem}
body.sim-mobile table.tbl{font-size:.8rem;min-width:460px}
/* — espelho do empilhamento do detalhe (≤900px) — */
body.sim-mobile .detalhe-grid{grid-template-columns:1fr}
body.sim-mobile .detalhe-left{position:static;max-height:none}
body.sim-mobile #boxResumo,body.sim-mobile #boxTeor{flex:0 0 auto}
body.sim-mobile .cbox-body{max-height:50vh}

/* ---------- tooltip genérico em chip (motivo da auto-classificação) ---------- */
.chip.tip{position:relative;cursor:help}
/* Tooltip genérico de ajuda: qualquer elemento .tip com data-tip mostra a explicação no hover/foco.
   Serve para chips de etiqueta e para os controles (botões, labels) — "saiba o efeito antes de clicar". */
.tip{position:relative}
.tip[data-tip]:hover::after,.tip[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:60;
  width:max-content;max-width:min(320px,82vw);background:var(--navy);color:#fff;font-size:.74rem;font-weight:400;
  text-transform:none;letter-spacing:normal;line-height:1.45;padding:.55rem .7rem;border-radius:8px;
  box-shadow:var(--shadow);white-space:normal;pointer-events:none;text-align:left}
/* Ícone de ajuda "ⓘ" ao lado de rótulos de seção */
.hint{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:.3rem;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font-size:.66rem;font-weight:700;cursor:help;vertical-align:middle}
.hint:hover{border-color:var(--cyan);color:var(--accent-d)}

/* Interruptor palavra-chave ↔ semântica (busca de issue no detalhe) */
.switch-wrap{display:flex;align-items:center;gap:.45rem;cursor:pointer;user-select:none}
.switch-lbl{font-size:.76rem;color:var(--muted);transition:.15s}
.switch-lbl.on{color:var(--navy,#111);font-weight:600}
.switch{position:relative;display:inline-block;width:38px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#c7d0de;border-radius:999px;transition:.18s}
.switch .slider::before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:var(--cyan,#00B3CC)}
.switch input:checked + .slider::before{transform:translateX(18px)}

/* Seletor de posição do autor (favor/contra/neutro) — captura da posição do stakeholder */
.pos-box{margin:.5rem 0 .2rem}
.pos-seg{display:inline-flex;gap:0;border:1px solid var(--line,#e5e9f0);border-radius:8px;overflow:hidden}
.pos-opt{padding:.4rem .9rem;font-size:.84rem;background:#fff;border:none;border-right:1px solid var(--line,#e5e9f0);
  cursor:pointer;color:var(--muted,#4b5563);transition:.12s}
.pos-opt:last-child{border-right:none}
.pos-opt:hover:not(.on){background:#f3f5f9}
.pos-opt.on{font-weight:600}

/* Aviso de caso aguardando aprovação de nova issue (gateway "sem issue boa" do BPMN) */
.aviso-nova-issue{background:#fff7e6;border:1px solid #ffd591;color:#8a5a00;border-radius:8px;
  padding:.5rem .7rem;font-size:.82rem;margin:.4rem 0 .6rem}