/* ===========================================================================
   BARRA INTERATIVA DAS PAGINAS DA LIBRARY  —  08/10/2026
   ---------------------------------------------------------------------------
   UM arquivo para as 41 paginas. O padrao visual e o mesmo que foi aprovado
   na pagina de regras (css/eclipse/p-tibiarules.css): paleta Eclipse, chip
   arredondado, bolinha colorida, contador ao vivo a direita.
   NAO editar a mao nenhum CSS gerado (css/eclipse/auto/*) por causa disto -
   este arquivo e proprio e entra DEPOIS, com @layer para vencer o automatico.
   =========================================================================== */
@layer eclipse {

:root{
  --bml-painel:   var(--ec-panel,    #10131B);
  --bml-painel-2: var(--ec-panel-2,  #161B26);
  --bml-painel-3: var(--ec-panel-3,  #1C2230);
  --bml-linha:    var(--ec-line,     #272E3E);
  --bml-linha-hi: var(--ec-line-hi,  #3A4458);
  --bml-prata:    var(--ec-silver,   #E6E9F0);
  --bml-prata-2:  var(--ec-silver-2, #B6BDCC);
  --bml-prata-3:  var(--ec-silver-3, #7D8698);
  --bml-ouro:     var(--ec-eternal,  #C19664);
  --bml-ouro-txt: var(--ec-eternal-txt, #D4AE7E);
  --bml-ok:       var(--ec-ok,       #5FBF8F);
  --bml-warn:     var(--ec-warn,     #E3C38F);
  --bml-bad:      #FF5A5F;
}

/* ---------- a barra ---------- */
.bml-bar{
  margin:0 0 18px; padding:14px 16px;
  background:linear-gradient(180deg, var(--bml-painel-2), var(--bml-painel));
  border:1px solid var(--bml-linha); border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
}
.bml-bar-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.bml-busca{
  flex:1 1 240px; min-width:0;
  background:var(--bml-painel); border:1px solid var(--bml-linha);
  border-radius:10px; padding:12px 15px 12px 38px;
  font-size:14px; font-family:inherit; color:var(--bml-prata);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D8698' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.3-4.3'/></svg>");
  background-repeat:no-repeat; background-position:12px center; background-size:16px;
}
.bml-busca::placeholder{color:var(--bml-prata-3);opacity:.85}
.bml-busca:focus{outline:none;border-color:var(--bml-ouro);box-shadow:0 0 0 3px rgba(193,150,100,.16)}

.bml-conta{
  margin-left:auto; font-size:11.5px; color:var(--bml-prata-3);
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
.bml-conta b{color:var(--bml-prata);font-size:16px;font-weight:800;margin-right:4px}

/* ---------- chips de secao ---------- */
.bml-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:11px;padding-top:11px;border-top:1px dashed var(--bml-linha)}
.bml-chip{
  background:var(--bml-painel); border:1px solid var(--bml-linha);
  border-radius:999px; padding:7px 14px; cursor:pointer;
  font-size:12.5px; font-weight:600; font-family:inherit;
  color:var(--bml-prata-2); transition:.15s;
  display:inline-flex; align-items:center; gap:7px;
}
.bml-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bml-prata-3);flex:0 0 auto}
.bml-chip:nth-of-type(6n+2):before{background:var(--bml-ok)}
.bml-chip:nth-of-type(6n+3):before{background:var(--bml-warn)}
.bml-chip:nth-of-type(6n+4):before{background:var(--ec-crystal,#45A4CD)}
.bml-chip:nth-of-type(6n+5):before{background:var(--ec-genesis-txt,#C27BF3)}
.bml-chip:nth-of-type(6n+6):before{background:var(--bml-ouro-txt)}
.bml-chip:hover{background:var(--bml-painel-3);border-color:var(--bml-linha-hi);transform:translateY(-1px)}
.bml-chip.on{background:linear-gradient(180deg,#E3C38F,#C19664);border-color:var(--bml-ouro);color:#14100A;font-weight:800}
.bml-chip.on:before{background:#14100A}

/* ---------- destaque da busca ---------- */
.bml-hit{background:rgba(227,195,143,.26);color:var(--bml-prata);border-radius:3px;padding:0 2px;box-shadow:0 0 0 1px rgba(227,195,143,.3)}
.bml-oculto{display:none !important}

.bml-vazio{
  margin:14px 0 0; padding:16px 18px; text-align:center;
  background:rgba(255,90,95,.08); border:1px dashed var(--bml-bad);
  border-radius:10px; color:var(--bml-prata-2); font-size:13.5px;
}
.bml-vazio b{color:var(--bml-bad)}

/* ---------- numero importante em cor ---------- */
.bml-num-max{color:var(--bml-bad);font-weight:800}
.bml-num-bom{color:var(--bml-ok);font-weight:800}

/* ---------- "veja tambem": as paginas ligadas ---------- */
.bml-veja{
  margin:30px 0 6px; padding:17px 18px;
  background:linear-gradient(180deg, var(--bml-painel-2), var(--bml-painel));
  border:1px solid var(--bml-linha); border-radius:14px;
}
.bml-veja-t{
  font-family:var(--ec-serif,Georgia,serif); font-size:15px; font-weight:700;
  color:var(--bml-prata); margin:0 0 4px; letter-spacing:.02em;
  display:flex; align-items:center; gap:9px;
}
.bml-veja-t:before{content:"";width:18px;height:2px;background:var(--bml-ouro);border-radius:2px;flex:0 0 auto}
.bml-veja-sub{font-size:12px;color:var(--bml-prata-3);margin:0 0 13px}
.bml-veja-grid{display:flex;gap:8px;flex-wrap:wrap}
.bml-veja-link{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bml-painel); border:1px solid var(--bml-linha);
  border-radius:10px; padding:9px 14px; font-size:13px; font-weight:600;
  color:var(--bml-prata-2); text-decoration:none; transition:.16s;
}
.bml-veja-link:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bml-ouro);flex:0 0 auto;opacity:.8}
.bml-veja-link:hover{background:var(--bml-painel-3);border-color:var(--bml-ouro);color:var(--bml-prata);transform:translateY(-2px);text-decoration:none}

/* ---------- link automatico dentro do texto ---------- */
a.bml-xref{
  color:var(--bml-ouro-txt); text-decoration:none;
  border-bottom:1px dotted rgba(193,150,100,.55); transition:.15s;
}
a.bml-xref:hover{color:#F0D6AD;border-bottom-style:solid;text-decoration:none}

/* ---------- voltar ao topo ---------- */
.bml-topo-nao-usado{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:linear-gradient(180deg, var(--bml-painel-3), var(--bml-painel));
  border:1px solid var(--bml-linha-hi); color:var(--bml-prata-2);
  font-size:17px; line-height:1; display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.45); transition:.16s;
}
.bml-topo.ver{display:flex}
.bml-topo:hover{color:var(--bml-prata);border-color:var(--bml-ouro);transform:translateY(-2px)}

@media (max-width:640px){
  .bml-bar{padding:12px 13px;border-radius:12px}
  .bml-conta{margin-left:0;width:100%;order:3}
  .bml-veja-link{flex:1 1 140px;justify-content:center}
  .bml-topo-nao-usado{right:12px;bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .bml-chip,.bml-veja-link,.bml-topo-nao-usado{transition:none}
  .bml-chip:hover,.bml-veja-link:hover,.bml-topo:hover{transform:none}
}

}