/* laboratorio-pesquisa.css — página full-width da árvore de pesquisas do
   Laboratório de Pesquisa de Trabalho de Pals. Depende de codex.css
   (tokens de cor) e item-detalhe.css (.material-list/.material-row,
   reaproveitados no painel de detalhe). */

.labpesq-page{
  width:100%;
  max-width:1900px;
  margin:0 auto;
  padding:1.25rem clamp(1rem, 3vw, 2rem) 3rem;
}

.labpesq-alert-demo{ margin-bottom:1rem; }

.labpesq-breadcrumb{ margin-bottom:1.25rem; }
.labpesq-breadcrumb i.bi-arrow-left{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  color:var(--text-dim);
}

.labpesq-shell{
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
}

/* ---------- Sidebar: lista de aptidões + Total Geral ---------- */
.labpesq-sidebar-col{
  width:260px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:sticky;
  top:calc(78px + 1.25rem);
}
.labpesq-sidebar{
  width:100%;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:.75rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.labpesq-total-geral{
  width:100%;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:.75rem;
}
.labpesq-total-geral-btn{
  width:100%;
  justify-content:center;
}

.labpesq-cat-btn{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem .65rem;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  width:100%;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
.labpesq-cat-btn:hover{ background:var(--panel-2); }
.labpesq-cat-btn.is-active{
  background:var(--accent-soft);
  border-color:var(--accent-line);
}
.labpesq-cat-btn-icon{
  width:30px; height:30px;
  object-fit:contain;
  flex-shrink:0;
}
.labpesq-cat-btn-name{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:.9rem;
  color:var(--text-bright);
}
.labpesq-cat-btn-count{
  font-size:.75rem;
  color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.labpesq-cat-btn.is-active .labpesq-cat-btn-count{ color:var(--accent); }

/* ---------- Área central: árvore ---------- */
.labpesq-tree-wrap{
  flex:1;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.labpesq-tree-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--hairline);
  flex-wrap:wrap;
}
.labpesq-tree-header-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  font-size:1.05rem;
  color:var(--text-bright);
}
.labpesq-tree-header-title img{ width:28px; height:28px; object-fit:contain; }
.labpesq-tree-header-count{
  font-size:.8rem;
  color:var(--text-dim);
  background:var(--panel-2);
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid var(--hairline);
  font-variant-numeric:tabular-nums;
}
.labpesq-tree-header-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.labpesq-totais-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  padding:.3rem .8rem;
  border-radius:999px;
  cursor:pointer;
}
.labpesq-totais-btn:hover{ filter:brightness(1.1); }

.labpesq-tree-scroll{
  flex:1;
  overflow:auto;
  padding:2.5rem 2rem;
  min-height:420px;
}

.labpesq-tree-inner{
  display:flex;
  flex-direction:column;
  gap:3.25rem;
  position:relative;
  width:max-content;
  min-width:100%;
}

.labpesq-tree-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}
.labpesq-tree-svg path{
  fill:none;
  stroke:var(--hairline);
  stroke-width:2;
}
.labpesq-tree-svg path.is-essencial{ stroke:var(--gold-soft); }

.labpesq-row{
  display:flex;
  align-items:center;
  gap:2.75rem;
  position:relative;
  z-index:1;
  width:100%;
  padding:.6rem 1rem;
  margin:0 -1rem;
  border-radius:12px;
}
.labpesq-row:nth-child(odd){ background:var(--panel-2); }
.labpesq-row-label{
  flex-shrink:0;
  width:54px;
  text-align:right;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--text-dim);
  font-weight:600;
}
.labpesq-row-nodes{
  display:flex;
  align-items:center;
  gap:2.75rem;
}

.labpesq-node{
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.labpesq-node-diamond{
  width:56px;
  height:56px;
  transform:rotate(45deg);
  background:var(--panel-2);
  border:2px solid var(--hairline);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.labpesq-node img{
  width:28px;
  height:28px;
  object-fit:contain;
  transform:rotate(-45deg);
}
.labpesq-node.is-essencial .labpesq-node-diamond{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}
.labpesq-node:hover .labpesq-node-diamond{ border-color:var(--accent-line); }
.labpesq-node.is-selecionada .labpesq-node-diamond{
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:0 0 0 4px var(--accent-soft);
}

/* ---------- Painel direito: detalhe ---------- */
.labpesq-detail{
  width:340px;
  flex-shrink:0;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:1.1rem;
  position:sticky;
  top:calc(78px + 1.25rem);
  max-height:calc(100vh - 78px - 2.5rem);
  overflow-y:auto;
}

.labpesq-detail-title{
  font-weight:700;
  font-size:1rem;
  color:var(--text-bright);
  margin-bottom:.15rem;
}
.labpesq-detail-sub{
  font-size:.78rem;
  color:var(--text-dim);
  margin-bottom:1rem;
}

.labpesq-detail-section-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
  font-weight:600;
  margin:1rem 0 .5rem;
}
.labpesq-detail-section-label:first-of-type{ margin-top:0; }

.labpesq-effect-row{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.5rem 0;
  border-bottom:1px solid var(--hairline);
}
.labpesq-effect-row:last-child{ border-bottom:none; }
.labpesq-effect-row img{ width:22px; height:22px; object-fit:contain; flex-shrink:0; margin-top:.1rem; }
.labpesq-effect-row-text{ font-size:.83rem; color:var(--text); line-height:1.4; }

.labpesq-detail-empty{
  font-size:.85rem;
  color:var(--text-dim);
  padding:1rem 0;
}

.labpesq-node-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold);
  background:var(--gold-soft);
  border-radius:999px;
  padding:.2rem .55rem;
  margin-bottom:.6rem;
}

.labpesq-detail-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.83rem;
  color:var(--text);
  padding:.35rem 0;
}
.labpesq-detail-stat b{ color:var(--text-bright); font-variant-numeric:tabular-nums; }
.labpesq-info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  margin-left:.3rem;
  color:var(--text-dim);
  cursor:pointer;
  font-size:.78rem;
  line-height:1;
}
.labpesq-info-btn:hover{ color:var(--accent); }

.labpesq-prereq-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  border-radius:10px;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  color:var(--text);
  font-size:.83rem;
  text-decoration:none;
  cursor:pointer;
}
.labpesq-prereq-link:hover{ border-color:var(--accent-line); color:var(--text-bright); }
.labpesq-prereq-link img{ width:22px; height:22px; object-fit:contain; }

/* .material-name (item-detalhe.css) trunca com ellipsis por padrão -- nesta
   página o nome quebra em vez de cortar (nunca truncar texto em card novo). */
.labpesq-detail .material-name{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
}

/* ---------- Responsivo ---------- */
@media (max-width:1300px){
  .labpesq-detail{ width:300px; }
  .labpesq-sidebar-col{ width:230px; }
}

@media (max-width:1100px){
  .labpesq-shell{ flex-direction:column; }
  .labpesq-sidebar-col{
    width:100%;
    position:static;
  }
  .labpesq-sidebar{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:.5rem;
  }
  .labpesq-cat-btn{ width:auto; flex-shrink:0; }
  .labpesq-cat-btn-name{ white-space:nowrap; }
  .labpesq-tree-wrap{ width:100%; }
  .labpesq-detail{
    width:100%;
    position:static;
    max-height:none;
  }
}

@media (max-width:576px){
  .labpesq-page{ padding-left:.75rem; padding-right:.75rem; }
  .labpesq-tree-scroll{ padding:1.75rem 1rem; }
  .labpesq-tree-inner{ gap:2.25rem; }
  .labpesq-row{ gap:2rem; }
  .labpesq-row-nodes{ gap:2rem; }
  .labpesq-node{ width:58px; height:58px; }
  .labpesq-node-diamond{ width:48px; height:48px; }
  .labpesq-node img{ width:24px; height:24px; }
}

/* ---------- Modal "como o tempo é calculado" (com blur no fundo) ---------- */
/* Mesma técnica de palpedia.css: cor/blur ficam em .modal-backdrop (sem
   .show), presente durante toda a transição de abrir/fechar. Só o opacity
   muda entre os dois estados (Bootstrap já anima isso via .fade). Se
   cor/blur ficassem só em .show, ao fechar o Bootstrap trocaria
   IMEDIATAMENTE pro background-color:#000 sólido padrão dele assim que
   tira a classe .show, e como opacity ainda está perto de 1 nesse
   instante, pisca preto antes de sumir. */
.modal-backdrop{
  background:rgba(6,8,14,.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal-backdrop.show{
  /* opacity:1 tira o isolamento de contexto que opacity<1 cria (backdrop
     root) -- com isolamento, o backdrop-filter desfoca só o próprio
     elemento semi-transparente, não a página atrás dele. A
     transparência/escurecimento já vêm do alpha do rgba() acima, não
     dependem do opacity do elemento. */
  opacity:1;
}
.labpesq-modal-content{
  background:var(--panel);
  border:1px solid var(--hairline);
  color:var(--text);
}
.labpesq-modal-formula{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-bright);
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:.6rem .8rem;
  margin-bottom:.6rem;
  white-space:pre-wrap;
  line-height:1.5;
}
.labpesq-modal-secao{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
  font-weight:600;
  margin:1.1rem 0 .4rem;
}
.labpesq-modal-lista{
  margin:0;
  padding-left:1.1rem;
}
.labpesq-modal-lista li{ margin-bottom:.3rem; }
.labpesq-modal-obs{
  font-size:.78rem;
  color:var(--text-dim);
  margin:.4rem 0 1rem;
}