/* fortalecimento-de-personagem.css -- página /fortalecimento-de-personagem. Visual inspirado na janela
   "Fortalecer personagem" do jogo: painel escuro, barra de título clara, linhas com − valor + e barra segmentada.
   Depende de codex.css e pals-list.css (cabeçalho). */
.fp-pagina{
  --fp-fundo: #0c1215;
  --fp-linha: #10181c;
  --fp-borda: rgba(170,205,210,.18);
  --fp-borda-forte: rgba(170,205,210,.38);
  --fp-acento: #8fe3d0;
  --fp-acento-soft: rgba(143,227,208,.12);
  --fp-seg: rgba(255,255,255,.12);
}
.fp-trilha{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1rem; font-size:.8rem; color: var(--text-dim); }
.fp-trilha a{ color: var(--text-dim); text-decoration:none; }
.fp-trilha a:hover{ color: var(--fp-acento); }
.fp-trilha i{ font-size:.65rem; opacity:.6; }
.fp-trilha span{ color: var(--text); }
.fp-cabecalho{ text-align:left; margin-bottom:1.25rem; }
.fp-cabecalho h1 em{ color: var(--fp-acento); }
.fp-cabecalho p{ max-width:70ch; }
.fp-cabecalho a{ color: var(--fp-acento); }

.fp-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap:1.25rem; align-items:start; }

/* ---------- Janela ---------- */
.fp-janela{ border:1px solid var(--fp-borda); border-radius:6px; background: var(--fp-fundo); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.fp-janela-titulo{
  margin:.6rem; padding:.45rem .9rem; border:1px solid var(--fp-borda-forte); border-radius:3px;
  background: linear-gradient(180deg, #2a3539, #1e272b); color: var(--text-bright); font-weight:600; letter-spacing:.01em;
}
.fp-janela-corpo{ padding:.25rem 1rem 1rem; }
.fp-acoes{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.85rem; }
.fp-dica{ font-size:.88rem; color: var(--text); }
.fp-acoes-botoes{ display:flex; gap:.4rem; }
.fp-botao{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:4px;
  border:1px solid var(--fp-borda-forte); background: transparent; color: var(--text); font-size:.8rem;
}
.fp-botao:hover{ border-color: var(--fp-acento); color: var(--fp-acento); }
.fp-botao:focus-visible, .fp-mais:focus-visible, .fp-menos:focus-visible, .fp-tabela-btn:focus-visible{ outline:2px solid var(--fp-acento); outline-offset:2px; }

.fp-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.fp-linha{ padding:.7rem .85rem .6rem; border:1px solid var(--fp-borda); border-radius:4px; background: var(--fp-linha); transition: border-color .15s, background .15s; }
.fp-linha.is-ativo{ border-color: color-mix(in srgb, var(--fp-acento) 35%, var(--fp-borda)); background: linear-gradient(90deg, var(--fp-acento-soft), transparent 60%), var(--fp-linha); }
.fp-linha-topo{ display:grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items:center; gap:.85rem; }
.fp-icone{ width:34px; height:34px; object-fit:contain; filter: drop-shadow(0 0 6px rgba(143,227,208,.15)); }
.fp-nome{ display:flex; flex-direction:column; min-width:0; }
.fp-nome b{ color: var(--text-bright); font-size:1rem; font-weight:600; }
.fp-nome small{ color: var(--text-dim); font-size:.76rem; line-height:1.3; }
.fp-nivel{ font-family: var(--font-mono); font-size:.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width:4.5rem; text-align:right; }
.fp-linha.is-max .fp-nivel{ color: var(--fp-acento); font-weight:700; font-size:.9rem; letter-spacing:.04em; }
.fp-controle{ display:grid; grid-template-columns: 32px 7rem 32px; align-items:center; border:1px solid var(--fp-borda); border-radius:3px; background: rgba(0,0,0,.35); }
.fp-mais, .fp-menos{ height:32px; border:0; background: rgba(255,255,255,.04); color: var(--text-bright); display:grid; place-items:center; }
.fp-mais:hover:not(:disabled), .fp-menos:hover:not(:disabled){ background: var(--fp-acento-soft); color: var(--fp-acento); }
.fp-mais:disabled, .fp-menos:disabled{ color: rgba(255,255,255,.2); cursor:default; }
.fp-valor{ text-align:center; font-size:1.05rem; font-weight:600; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.fp-linha.is-ativo .fp-valor{ color: var(--fp-acento); }

.fp-barra{ display:grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap:3px; margin:.55rem 0 .45rem calc(34px + .85rem); height:6px; }
.fp-barra span{ border-radius:1px; background: var(--fp-seg); cursor:pointer; transition: background .12s; }
.fp-barra span:hover{ background: rgba(143,227,208,.45); }
.fp-barra span.is-on{ background: #e9f2f1; box-shadow: 0 0 6px rgba(143,227,208,.35); }
.fp-barra.is-continua{ display:block; position:relative; border-radius:3px; background: var(--fp-seg); overflow:hidden; }
.fp-barra.is-continua .fp-barra-fill{ display:block; height:100%; width:0; background: linear-gradient(90deg, #cfe9e4, #e9f2f1); cursor:default; transition: width .15s; }

.fp-linha-info{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1rem; margin-left:calc(34px + .85rem); font-size:.75rem; color: var(--text-dim); }
.fp-linha-info [data-proximo]{ color: var(--text); }
.fp-linha-info a{ color: var(--fp-acento); text-decoration:none; }
.fp-linha-info a:hover{ text-decoration:underline; }
.fp-tabela-btn{ margin-left:auto; border:0; background:none; padding:0; color: var(--text-dim); font-size:.75rem; }
.fp-tabela-btn:hover{ color: var(--fp-acento); }
.fp-niveis{ margin:.6rem 0 .2rem calc(34px + .85rem); max-height:280px; overflow:auto; border:1px solid var(--fp-borda); border-radius:4px; }
.fp-niveis table{ width:100%; border-collapse:collapse; font-size:.8rem; font-variant-numeric: tabular-nums; }
.fp-niveis th{ position:sticky; top:0; background:#162024; padding:.35rem .6rem; text-align:left; font-family: var(--font-mono); font-size:.66rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim); }
.fp-niveis td{ padding:.3rem .6rem; border-top:1px solid rgba(255,255,255,.05); color: var(--text); }
.fp-niveis td b{ color: var(--fp-acento); }

/* ---------- Lateral ---------- */
.fp-lateral{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:84px; }
.fp-custo, .fp-notas{ padding:1rem; border:1px solid var(--fp-borda); border-radius:6px; background: var(--fp-fundo); }
.fp-custo h2, .fp-notas h2{ margin:0 0 .6rem; font-size:.95rem; font-weight:600; color: var(--text-bright); }
.fp-custo-total{ display:flex; align-items:baseline; gap:.5rem; margin:0 0 .75rem; }
.fp-custo-total b{ font-family: var(--font-display); font-size:2rem; line-height:1; color: var(--fp-acento); font-variant-numeric: tabular-nums; }
.fp-custo-total span{ font-size:.8rem; color: var(--text-dim); }
.fp-estatuas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.35rem; }
.fp-estatuas li{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.3rem .5rem .3rem .3rem; border:1px solid var(--fp-borda); border-radius:4px; background: var(--fp-linha); }
.fp-estatuas li.is-zero{ display:none; }
.fp-estatuas a{ display:flex; align-items:center; gap:.4rem; min-width:0; text-decoration:none; color: var(--text); font-size:.78rem; }
.fp-estatuas a:hover{ color: var(--fp-acento); }
.fp-estatuas img{ width:34px; height:34px; flex-shrink:0; object-fit:contain; }
.fp-estatuas b{ font-size:1rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.fp-vazio{ margin:0; font-size:.8rem; color: var(--text-dim); }
.fp-notas ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.45rem; font-size:.8rem; color: var(--text); }
.fp-notas a{ color: var(--fp-acento); }
.fp-notas code, .fp-fonte code{ font-family: var(--font-mono); font-size:.92em; }
.fp-fonte{ margin:.75rem 0 0; font-size:.72rem; color: var(--text-dim); }

@media (max-width:992px){ .fp-layout{ grid-template-columns: 1fr; } .fp-lateral{ position:static; } }
@media (max-width:640px){
  .fp-linha-topo{ grid-template-columns: 30px minmax(0, 1fr) auto; }
  .fp-controle{ grid-column: 1 / -1; grid-template-columns: 40px 1fr 40px; }
  .fp-barra, .fp-linha-info, .fp-niveis{ margin-left:0; }
  .fp-nome small{ display:none; }
}