/* ============================================================
   css/arvore.css — árvore lateral e layout de duas colunas.
   A árvore abre e fecha com <details>, sem JS.
   ============================================================ */

.pagina{display:flex;flex-direction:column}
.pagina > .arvore{order:2;margin:1.6rem 0 0}

@media (min-width:1000px){
  .pagina.com-arvore{
    display:grid;
    grid-template-columns:clamp(250px,18vw,310px) minmax(0,1fr);
    gap:2rem;align-items:start;
  }
  .pagina.com-arvore > .arvore{
    grid-column:1;grid-row:1;
    position:sticky;top:calc(var(--topo) + 20px);
    max-height:calc(100vh - var(--topo) - 40px);
    overflow:auto;
    margin:0;
  }
  .pagina.com-arvore > .principal{grid-column:2;grid-row:1;min-width:0}
}

.arvore{
  border:0;border-radius:22px;
  background:linear-gradient(180deg,#fff 0%, var(--pl) 140%);
  padding:.7rem .55rem .75rem;
  box-shadow:0 10px 0 color-mix(in srgb, var(--pj) 55%, #fff);
}

.arvore .cima{
  display:inline-flex;align-items:center;gap:.3rem;
  margin:0 0 .55rem;padding:.38rem .72rem;
  border:0;border-radius:999px;background:#fff;color:var(--pa);
  font-size:.78rem;font-weight:750;line-height:1.2;text-decoration:none;
  box-shadow:0 3px 0 var(--pj);
}
.arvore .cima:hover{background:var(--pa);color:#fff}
.arvore .cima:focus-visible{outline:3px solid var(--pj);outline-offset:2px}
.arvore .cima .ic{flex:0 0 auto;width:12px;height:12px;stroke-width:2.6;display:block}

.arv-caixa{border:0;margin:0}
.arv-resumo{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  padding:.5rem .65rem;margin:0 0 .35rem;border-radius:8px;
  background:var(--pl);color:var(--pa);
  font-size:.84rem;font-weight:800;line-height:1.2;
  cursor:pointer;list-style:none;
}
.arv-resumo::-webkit-details-marker{display:none}
.arv-resumo::after{content:"\25BE";font-size:.85em;line-height:1}
.arv-caixa[open] > .arv-resumo::after{content:"\25B4"}

.arvore ul{list-style:none;margin:0;padding:0}
.arvore li{margin:0;padding:0;font-size:.76rem;font-weight:450;line-height:1.35}
.arvore details{margin:0}

.arvore summary.tr-linha{list-style:none;cursor:pointer}
.arvore summary.tr-linha::marker{content:''}
.arvore summary.tr-linha::-webkit-details-marker{display:none}

.arvore details > ul{
  margin:.1rem 0 .15rem .4rem;
  padding-left:.28rem;
  border-left:2px dotted var(--pj);
}
.arvore li.on > details > ul{border-left-color:var(--pa)}

.tr-linha{
  display:flex;align-items:center;gap:0;
  min-height:30px;border-radius:4px;line-height:1.2;
  text-decoration:none;
}
.tr-linha:hover{background:color-mix(in srgb, var(--pa) 46%, #fff)}
.tr-linha:hover .tr-nome{color:#1A120E}

.tr-seta{
  flex:0 0 16px;width:16px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--pa);border-radius:999px;
}
.tr-seta .ic{width:13px;height:13px;flex:0 0 auto;display:block;stroke-width:3;transition:transform .18s}
.tr-seta.vazio{display:none}
details[open] > summary .tr-seta .ic{transform:rotate(90deg)}
details[open] > summary .tr-seta{color:var(--pa)}

.tr-nome{
  flex:1 1 auto;min-width:0;display:block;
  padding:4px 8px 4px 2px;
  color:#3A2E28;text-decoration:none;
  font-size:inherit;font-weight:500;
  white-space:normal;overflow:visible;
}
a.tr-nome:hover{color:var(--pa)}

li[data-n="1"]{font-size:.82rem}
li[data-n="1"] > details > summary.tr-linha,
li[data-n="1"] > a.tr-linha{
  margin:.32rem 0;
  min-height:42px;
  padding-right:.4rem;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--pj) 70%, #fff);
  border-radius:16px;
  box-shadow:0 4px 0 var(--pj);
}
li[data-n="1"] > details > summary.tr-linha:hover,
li[data-n="1"] > a.tr-linha:hover{
  background:var(--pl);
  transform:translateY(-1px);
}
li[data-n="1"] > details > summary .tr-nome,
li[data-n="1"] > a.tr-linha .tr-nome{font-weight:600;color:#2A211C}
li[data-n="1"] > details > summary .tr-seta,
li[data-n="1"] > a.tr-linha .tr-seta{
  margin-left:.28rem;
  background:var(--pl);
  color:var(--pa);
}

li[data-n="2"]{font-size:.76rem}
li[data-n="2"] .tr-nome{font-weight:500;color:#4A382E}
li[data-n="3"],li[data-n="4"],li[data-n="5"],li[data-n="6"]{font-size:.72rem}
li[data-n="3"] .tr-nome,li[data-n="4"] .tr-nome,li[data-n="5"] .tr-nome,li[data-n="6"] .tr-nome{font-weight:450;color:#5C4A40}

li.on:not([data-n="1"]) > .tr-linha,
li.on:not([data-n="1"]) > details > summary.tr-linha{
  background:color-mix(in srgb, var(--pa) 68%, #fff);
  border-radius:4px;
  box-shadow:none;
}
li.on:not([data-n="1"]) > .tr-linha .tr-nome,
li.on:not([data-n="1"]) > details > summary.tr-linha .tr-nome{
  color:#10241C;
  text-shadow:none;
}
li[data-n="1"].on > details > summary.tr-linha,
li[data-n="1"].on > a.tr-linha{
  background:var(--pl);
  border-color:var(--pa);
  box-shadow:0 4px 0 var(--pj);
}
li.on > .tr-linha .tr-nome,
li.on > details > summary.tr-linha .tr-nome,
li.on > a.tr-linha .tr-nome{color:#1A120E;font-weight:600}

.tr-corta{
  margin:.55rem 0 0;padding:.45rem .55rem;border-radius:7px;
  background:#FBFCFD;font-size:.72rem;color:var(--tf);line-height:1.45;
}

@media (min-width:1000px){
  .arv-resumo{display:none}
  .arv-caixa > ul{margin-top:0}
}