/* montador-de-times.css -- Montador de Times (montador-de-times.php).
   Reaproveita as variáveis de codex.css e os botões de compartilhar de
   breeding-calc.css (.path-finder-share-*). */

.montador-toolbar{
  display:flex; flex-wrap:wrap; gap:.75rem;
  justify-content:space-between; align-items:center;
  margin-bottom:1rem;
}
.montador-toolbar-grupo{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

.montador-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  color: var(--text-bright);
  border-radius:8px;
  font-size:.82rem; font-weight:600;
  padding:.45rem .8rem;
  cursor:pointer; text-decoration:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.montador-btn:hover{ border-color: var(--accent-line); background: var(--accent-soft); color: var(--text-bright); }
.montador-btn--perigo:hover{ border-color:#ff3a3a; background: rgba(255,58,58,.12); }
.montador-btn--mini{ padding:.15rem .5rem; font-size:.72rem; margin-left:.6rem; }

.montador-predefinidos{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.montador-predefinido-btn{
  background: var(--accent-soft); border:1px solid var(--accent-line); color: var(--accent);
  border-radius:8px; padding:.35rem .7rem; font-size:.8rem; font-weight:600; cursor:pointer;
}
.montador-predefinido-btn:hover{ background: var(--accent); color:#0a0d14; }

/* ---------- Slots do time ---------- */
.montador-slots{
  display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:.75rem;
}
.montador-slot{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-bottom:3px solid var(--rarity-color, var(--hairline));
  border-radius:12px;
  padding:.8rem .5rem .6rem;
  color: var(--text);
  cursor:pointer;
  min-width:0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.montador-slot:hover{ border-color: var(--accent-line); }
.montador-slot.is-sel{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.montador-slot img{ width:72px; height:72px; object-fit:contain; }
.montador-slot-nome{ font-weight:600; color: var(--text-bright); text-align:center; overflow-wrap:anywhere; font-size:.9rem; }
.montador-slot-nivel{ font-size:.75rem; color: var(--text-dim); }
.montador-slot--vazio{
  justify-content:center; min-height:150px;
  border-style:dashed; border-bottom-width:1px;
  color: var(--text-dim); font-size:.8rem;
}
.montador-slot--vazio i{ font-size:1.6rem; color: var(--accent); }
.montador-slot-remover{
  position:absolute; top:.35rem; right:.4rem;
  color: var(--text-dim); font-size:.75rem; cursor:pointer; padding:.15rem .3rem;
}
.montador-slot-remover:hover{ color:#ff6b6b; }
.montador-estrelas{ color: var(--gold); font-size:.62rem; letter-spacing:1px; }

/* ---------- Painéis ---------- */
.montador-painel{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:1rem 1.1rem;
  min-width:0;
  height:100%;
}
.montador-vazio{ text-align:center; color: var(--text-dim); padding:2.5rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.montador-vazio i{ font-size:2rem; color: var(--accent); }

.montador-editor-topo{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding-bottom:.8rem; border-bottom:1px solid var(--hairline); }
.montador-editor-img{ width:64px; height:64px; object-fit:contain; border-bottom:3px solid var(--rarity-color); }
.montador-editor-titulo{ flex:1 1 140px; min-width:0; }
.montador-editor-titulo h2{ margin:0; font-family: var(--font-display); color: var(--text-bright); font-size:1.5rem; overflow-wrap:anywhere; }
.montador-elementos{ display:flex; align-items:center; gap:.4rem; color: var(--text-dim); font-size:.8rem; }

.montador-subtitulo{
  display:flex; align-items:center; flex-wrap:wrap;
  margin:1.1rem 0 .5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-dim);
}
.montador-subtitulo small{ margin-left:.4rem; text-transform:none; letter-spacing:normal; font-weight:400; }
.montador-subtitulo--topo{ margin-top:0; }

.montador-grade{ display:grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap:.7rem; margin-top:.8rem; }
.montador-grade--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top:0; }
.montador-grade--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top:0; }
.montador-campo{ display:flex; flex-direction:column; gap:.25rem; font-size:.75rem; color: var(--text-dim); min-width:0; }
.montador-campo > small{ font-size:.68rem; }
.montador-campo--check{ flex-direction:row; align-items:center; gap:.5rem; align-self:end; color: var(--text); font-size:.85rem; }
.montador-input{
  width:100%;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
  color: var(--text-bright);
  padding:.4rem .55rem;
  font-size:.9rem;
}
.montador-input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.montador-estrelas-edit{ display:flex; gap:.15rem; }
.montador-estrela{ background:none; border:0; color: var(--text-dim); font-size:1.35rem; padding:0 .1rem; cursor:pointer; }
.montador-estrela.is-on{ color: var(--gold); }
.montador-estrela:hover{ color: var(--gold); }

.montador-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.montador-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px;
  padding:.3rem .3rem .3rem .55rem; font-size:.82rem; color: var(--text-bright);
}
.montador-chip--passiva{ padding:.15rem .3rem .15rem .15rem; background:transparent; border-color:transparent; }
.montador-chip small{ color: var(--text-dim); }
.montador-chip button{ background:none; border:0; color: var(--text-dim); padding:0 .25rem; cursor:pointer; }
.montador-chip button:hover{ color:#ff6b6b; }

/* ---------- Resultado ---------- */
.montador-stats{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.6rem; }
.montador-stat{
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px;
  padding:.55rem .7rem; font-size:.85rem; color: var(--text-dim);
}
.montador-stat b{ color: var(--text-bright); font-size:1.15rem; font-variant-numeric: tabular-nums; }
.montador-stat--destaque{ grid-column: 1 / -1; border-color: var(--accent-line); }
.montador-stat--destaque b{ color: var(--accent); font-size:1.4rem; }
.montador-stats--pequeno{ grid-template-columns:1fr; }
.montador-stats--pequeno .montador-stat b{ font-size:.95rem; }

.montador-apts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.montador-apt{ display:inline-flex; align-items:center; gap:.3rem; background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px; padding:.25rem .55rem; font-size:.8rem; }
.montador-apt b{ color: var(--text-bright); }
.montador-apt.is-up{ border-color: var(--gold); }
.montador-apt.is-up b{ color: var(--gold); }
.montador-apt .icon-img{ width:20px; height:20px; }

.montador-companheiro{ background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px; padding:.6rem .8rem; }
.montador-companheiro b{ color: var(--text-bright); }
.montador-companheiro p{ margin:.3rem 0 0; font-size:.85rem; white-space:pre-line; overflow-wrap:anywhere; }

/* ---------- Efeitos do time ---------- */
.montador-time-efeitos{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:.6rem; }
.montador-time-efeito{
  display:grid; grid-template-columns: 1fr auto; column-gap:.6rem; row-gap:.15rem; align-items:baseline;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px; padding:.55rem .75rem;
  font-size:.85rem; color: var(--text);
}
.montador-time-efeito b{ color: var(--accent); font-size:1.05rem; display:inline-flex; align-items:center; gap:.3rem; }
.montador-time-efeito small{ grid-column:1 / -1; color: var(--text-dim); font-size:.72rem; }
.montador-time-comps{ display:flex; flex-direction:column; gap:.6rem; }
.montador-time-comp{ display:flex; gap:.7rem; align-items:flex-start; }
.montador-time-comp img{ width:44px; height:44px; object-fit:contain; flex:0 0 auto; }
.montador-time-comp p{ margin:.15rem 0 0; font-size:.83rem; color: var(--text); white-space:pre-line; overflow-wrap:anywhere; }
.montador-time-comp b{ color: var(--text-bright); }
.montador-time-poder{ margin-top:1.1rem; padding-top:.8rem; border-top:1px solid var(--hairline); color: var(--text-dim); }
.montador-time-poder b{ color: var(--accent); font-size:1.2rem; }
.montador-aviso{ margin:.6rem 0 0; font-size:.75rem; color: var(--text-dim); }
.montador-notas{ font-size:.78rem; color: var(--text-dim); background: var(--panel); border:1px solid var(--hairline); border-radius:12px; padding:.8rem 1rem; }

/* ---------- Modal ---------- */
.montador-modal{ background: var(--panel); color: var(--text); border:1px solid var(--hairline); }
.montador-modal .modal-header{ border-bottom-color: var(--hairline); }
.montador-lista{ display:flex; flex-direction:column; gap:.35rem; }
.montador-lista-item{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
  text-align:left; width:100%;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:8px;
  color: var(--text); padding:.5rem .7rem; cursor:pointer; font-size:.85rem;
}
.montador-lista-item:hover{ border-color: var(--accent-line); }
.montador-lista-item.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.montador-lista-item i.bi-check-lg{ margin-left:auto; color: var(--accent); }
.montador-lista-nome{ color: var(--text-bright); font-weight:600; }
.montador-lista-desc{ flex:1 1 220px; color: var(--text-dim); white-space:pre-line; }
.montador-tag{ background: var(--accent-soft); color: var(--accent); border-radius:6px; padding:.05rem .4rem; font-size:.7rem; }

.montador-meus-times{ min-width:260px; max-height:360px; overflow-y:auto; background: var(--panel); border-color: var(--hairline); }
.montador-meu-time{ display:flex; align-items:center; }
.montador-meu-time .dropdown-item{ color: var(--text); flex:1; overflow-wrap:anywhere; white-space:normal; }
.montador-meu-time .dropdown-item:hover{ background: var(--accent-soft); color: var(--text-bright); }
.montador-meu-time-excluir{ background:none; border:0; color: var(--text-dim); padding:.4rem .7rem; cursor:pointer; }
.montador-meu-time-excluir:hover{ color:#ff6b6b; }

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .montador-slots{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .montador-slots{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .montador-grade--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .montador-stats{ grid-template-columns:1fr; }
  .montador-toolbar-grupo{ width:100%; }
  .montador-toolbar-grupo .montador-btn,
  .montador-toolbar-grupo .path-finder-share-btn{ flex:1 1 auto; justify-content:center; margin-left:0; }
}