/* montador-de-personagem.css -- Montador de Personagem (montador-de-personagem.php).
   Reaproveita variáveis de codex.css e os painéis/botões de montador-de-times.css. */

.mp-sexo{ display:flex; gap:.4rem; }
.mp-sexo .montador-btn.is-ativo{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.mp-palco{
  display:grid;
  grid-template-columns: minmax(200px, 250px) minmax(260px, 1fr) minmax(300px, 400px);
  gap:1.5rem;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:1.25rem;
}
.mp-secao{
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-bright);
  border-left:3px solid var(--accent);
  padding-left:.55rem; margin:0 0 .6rem;
}
.mp-col--esq .mp-secao:not(:first-child){ margin-top:1.4rem; }

/* ---------- Slots ---------- */
.mp-slots{ display:flex; flex-wrap:wrap; gap:.6rem; }
.mp-slots--2{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-slot-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.25rem; min-width:0; }
.mp-slot{
  position:relative;
  width:88px; height:88px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  border:1px solid var(--hairline);
  border-bottom:4px solid var(--rarity-color, var(--hairline));
  border-radius:10px;
  padding:0; cursor:pointer; color: var(--text-dim);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-slot:hover{ border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.mp-slot img{ width:76px; height:76px; object-fit:contain; }
.mp-slot--vazio{ border-style:dashed; border-bottom-width:1px; font-size:1.4rem; }
.mp-slot-x{
  position:absolute; top:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--panel-2); border:1px solid var(--hairline); color: var(--text);
  font-size:.65rem; padding:0; cursor:pointer;
}
.mp-slot-x:hover{ border-color:#ff3a3a; color:#ff3a3a; }
.mp-slot-nome{ font-size:.7rem; color: var(--text-dim); text-align:center; max-width:88px; overflow-wrap:anywhere; line-height:1.2; }
.mp-col--esq .mp-slots--2 .mp-slot-wrap{ align-items:flex-start; }

/* ---------- Figura + slots centrais ---------- */
.mp-col--centro{ display:flex; flex-direction:column; align-items:center; gap:1rem; min-width:0; }
.mp-figura{
  width:100%; display:flex; justify-content:center;
  background: radial-gradient(ellipse at 50% 30%, var(--accent-soft), transparent 70%);
  border-radius:12px;
}
.mp-figura img{ max-height:420px; width:auto; max-width:100%; object-fit:contain; }
.mp-slots-centro{ display:grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap:.9rem 1rem; width:100%; justify-items:start; align-items:start; }
.mp-slots-centro .mp-secao{ text-align:left; }

/* ---------- Nível, barras, atributos ---------- */
.mp-nivel{ display:flex; gap:1rem; align-items:center; margin-bottom:.9rem; border-left:4px solid var(--accent); padding-left:.8rem; }
.mp-nivel-num{ display:flex; flex-direction:column; gap:.1rem; }
.mp-nivel-num span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim); }
.mp-nivel-num input{
  width:84px; font-size:2rem; font-weight:700; line-height:1.1;
  background: var(--panel-2); color: var(--text-bright);
  border:1px solid var(--hairline); border-radius:8px; padding:.1rem .4rem; text-align:center;
}
.mp-nivel-info{ font-size:.8rem; color: var(--text-dim); }
.mp-nivel-info b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }

.mp-barras{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.2rem; }
.mp-barra{
  position:relative; height:30px; border-radius:6px; overflow:hidden;
  background: rgba(0,0,0,.35); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; padding:0 .6rem;
  font-variant-numeric: tabular-nums;
}
.mp-barra span{ position:absolute; inset:0 auto 0 0; }
.mp-barra b, .mp-barra em{ position:relative; z-index:1; font-style:normal; font-size:.9rem; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.mp-barra em{ font-weight:500; font-size:.75rem; opacity:.9; }
.mp-barra--sp span{ background: linear-gradient(90deg, #1f8fe0, #4ab3f0); }
.mp-barra--hp span{ background: linear-gradient(90deg, #1fa155, #2fd070); }

.mp-pontos{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:.15rem .8rem;
  background: var(--accent-soft); border:1px solid var(--accent-line); border-radius:8px;
  padding:.55rem .8rem; margin-bottom:.6rem;
}
.mp-pontos > span{ font-size:.85rem; color: var(--text-bright); font-weight:600; }
.mp-pontos > b{ font-size:1.5rem; color: var(--accent); text-align:right; font-variant-numeric: tabular-nums; }
.mp-pontos > small{ color: var(--text-dim); font-size:.72rem; grid-column:1 / -1; }
.mp-pontos .mp-neg{ color:#ff5a5a; }
.mp-extras{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.75rem; color: var(--text-dim); }
.mp-extras input{ width:70px; background: var(--panel-2); color: var(--text-bright); border:1px solid var(--hairline); border-radius:6px; padding:.1rem .35rem; text-align:right; }

.mp-attrs{ display:flex; flex-direction:column; gap:.4rem; }
.mp-attr{
  display:grid; grid-template-columns: 22px 1fr auto auto; align-items:center; gap:.6rem;
  background: rgba(0,0,0,.22); border:1px solid var(--hairline); border-radius:8px; padding:.45rem .7rem;
}
.mp-attr > i{ color: var(--text-dim); }
.mp-attr-nome{ color: var(--text-bright); font-size:.9rem; min-width:0; overflow-wrap:anywhere; }
.mp-attr-nome small{ display:block; color: var(--text-dim); font-size:.7rem; }
.mp-attr-val{ min-width:64px; text-align:right; font-size:1.05rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.mp-attr-pts{ display:inline-flex; align-items:center; gap:.2rem; }
.mp-attr-pts button{
  width:24px; height:24px; line-height:1; padding:0;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:6px; color: var(--text-bright); cursor:pointer;
}
.mp-attr-pts button:hover{ border-color: var(--accent-line); background: var(--accent-soft); }
.mp-attr-pts input{ width:46px; text-align:center; background: var(--panel-2); color: var(--text-bright); border:1px solid var(--hairline); border-radius:6px; padding:.1rem 0; }

/* ---------- Painéis de baixo ---------- */
.mp-elem{ width:18px; height:18px; vertical-align:-3px; }
.mp-alvo-btn{
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  background: var(--panel-2); border:1px solid var(--hairline); border-bottom:3px solid var(--rarity-color, var(--hairline));
  border-radius:10px; padding:.55rem .8rem; color: var(--text-bright); cursor:pointer;
}
.mp-alvo-btn:hover{ border-color: var(--accent-line); }
.mp-alvo-btn img{ width:56px; height:56px; object-fit:contain; }
.mp-alvo-btn span{ flex:1; min-width:0; }
.mp-alvo-btn small{ display:block; color: var(--text-dim); }
.mp-alvo-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:.6rem; margin-top:.8rem; }
.mp-alvo-stats > div, .mp-alvo-stats > label{ display:flex; flex-direction:column; gap:.1rem; }
.mp-alvo-stats span, .mp-dano-lista span, .mp-cap-form span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-dim); }
.mp-alvo-stats b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }
.mp-alvo-stats input{ width:100%; background: var(--panel-2); color: var(--text-bright); border:1px solid var(--hairline); border-radius:6px; padding:.15rem .4rem; }

.mp-dano-num{ font-size:2.2rem; font-weight:700; color: var(--accent); font-variant-numeric: tabular-nums; line-height:1.1; }
.mp-dano-num small{ display:block; font-size:.78rem; font-weight:500; color: var(--text-dim); margin-top:.2rem; }
.mp-dano-lista{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:.6rem; margin:.9rem 0 .5rem; }
.mp-dano-lista > div{ display:flex; flex-direction:column; gap:.1rem; }
.mp-dano-lista b{ color: var(--text-bright); }
.mp-formula{ font-size:.8rem; color: var(--text-dim); }
.mp-formula summary{ cursor:pointer; color: var(--accent); }
.mp-formula p{ margin:.4rem 0 0; }
.mp-cap-form{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:.6rem; margin-bottom:.9rem; }
.mp-cap-form label{ display:flex; flex-direction:column; gap:.2rem; }
.mp-cap-form .filter-select{ width:100%; }
.mp-check{ flex-direction:row !important; align-items:center; gap:.45rem !important; font-size:.85rem; color: var(--text); }

.mp-lista-img{ width:44px; height:44px; object-fit:contain; flex:none; }
.mp .montador-lista-item{ display:flex; align-items:center; gap:.7rem; text-align:left; }

@media (max-width: 991.98px){
  .mp-palco{ grid-template-columns: 1fr; }
  .mp-col--esq .mp-slots--2{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mp-figura img{ max-height:320px; }
}
@media (max-width: 575.98px){
  .mp-slot{ width:72px; height:72px; }
  .mp-slot img{ width:62px; height:62px; }
  .mp-attr{ grid-template-columns: 22px 1fr auto; }
  .mp-attr-val{ grid-column: 2 / -1; text-align:left; }
}

/* Os painéis do Montador de Times ocupam 100% da altura da coluna; aqui ficam empilhados
   e devem acompanhar o conteúdo, senão passam do fim da coluna e cobrem o que vem depois. */
.mp .montador-painel{ height:auto; }
.mp .montador-notas{ position:relative; }

.mp a:not(.montador-btn){ color: var(--accent); text-decoration: underline; text-underline-offset:2px; }
.mp .montador-time-efeito{ overflow-wrap:anywhere; }
@media (max-width: 575.98px){
  .mp .montador-time-efeito{ grid-template-columns: 1fr; }
  .mp .montador-time-efeito b{ text-align:left; }
}
.mp .text-muted{ color: var(--text-dim) !important; }

/* ---------- Listas dos modais (o modal fica fora de .mp) ---------- */
#mp-modal .montador-lista-item{
  flex-wrap:nowrap; gap:.8rem; align-items:center;
  border-left:4px solid var(--rarity-color, var(--hairline));
}
#mp-modal .montador-lista-item:hover{ border-color: var(--rarity-color, var(--accent-line)); }
#mp-modal .mp-lista-corpo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
#mp-modal .mp-lista-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .6rem; }
#mp-modal .montador-lista-nome{ overflow-wrap:anywhere; }
#mp-modal .badge-rarity{ font-size:.66rem; padding:.2em .6em; white-space:nowrap; }
#mp-modal .mp-lista-desc{ display:block; color: var(--text); opacity:.75; font-size:.78rem; overflow-wrap:anywhere; }
#mp-modal .text-muted{ color: var(--text) !important; opacity:.75; }

/* Busca fixa no topo da lista do modal, sempre à mão em telas pequenas. */
#mp-modal .modal-body > .filter-search{
  position:sticky; top:-1rem; z-index:5;
  margin:-1rem -1rem .75rem !important; padding:.75rem 1rem;
  background: var(--panel); border-bottom:1px solid var(--hairline);
}
.mp-alvo-stats small{ color: var(--text-dim); font-size:.7rem; }
.mp-hab{ display:flex; flex-direction:column; gap:.2rem; margin-bottom:.8rem; }
.mp-hab span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-dim); }
.mp-hab .filter-select{ width:100%; }
.mp-resumo{ margin:.4rem 0 .6rem; padding:.55rem .75rem; border-radius:8px; background: var(--accent-soft); border:1px solid var(--accent-line); color: var(--text-bright); font-size:.9rem; }
.mp-dano-lista small{ color: var(--text-dim); font-size:.72rem; }