/* montador-trabalho.css -- Montador de Time de Trabalho (montador-de-time-de-trabalho.php). Estende montador-de-times.css
   (espaços, painéis) e usa invasoes.css nos grupos e no modal das ondas. Acento verde de trabalho; chances em semáforo. */
.mtt{
  --mtt-acento: #7fe0b0;
  --mtt-acento-soft: rgba(127,224,176,.12);
  --mtt-acento-linha: rgba(127,224,176,.35);
  --mtt-bom: #6fdc8c; --mtt-meio: #f2c14e; --mtt-ruim: #ff6b6b;
  --mtt-campo: #0e1119;
}
.mtt .pals-list-header h1 em{ color: var(--mtt-acento); }

/* ---------- Espaços: até 50, com rolagem ---------- */
.mtt-slots-topo{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.mtt-contador{ font-weight:700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.mtt-slots-dica{ font-size:.78rem; color: var(--text-dim); }
.mtt .mtt-slots{
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap:.55rem;
  max-height: 452px; overflow-y:auto; padding:.35rem; margin:-.35rem; scrollbar-gutter: stable;
}
.mtt .montador-slot{ padding:.6rem .4rem .5rem; }
.mtt .montador-slot img{ width:56px; height:56px; }
.mtt .montador-slot-nome{ font-size:.82rem; }
.mtt .montador-slot--vazio{ min-height:132px; }
.mtt-slot-apt{ display:inline-flex; align-items:center; gap:.2rem; padding:.05rem .35rem; border-radius:999px; background: var(--mtt-acento-soft); color: var(--mtt-acento); font-size:.72rem; }
.mtt .montador-slot .mtt-slot-apt img, .mtt-apt-ico{ width:16px; height:16px; object-fit:contain; vertical-align:-3px; }

.mtt-indice{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.5rem; }
.mtt-indice a{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; text-decoration:none;
  background: var(--panel); border:1px solid var(--hairline); color: var(--text); font-size:.82rem;
}
.mtt-indice a:hover{ border-color: var(--mtt-acento-linha); color: var(--text-bright); }
.mtt-indice a i{ color: var(--mtt-acento); }
.mtt section.montador-painel{ scroll-margin-top: calc(var(--site-nav-height, 78px) + 12px); }

/* ---------- Campos ---------- */
.mtt-select, .mtt-input{ background-color: var(--mtt-campo); border:1px solid var(--hairline); color: var(--text-bright); font-size:.86rem; }
.mtt-select:focus, .mtt-input:focus{ background-color: var(--mtt-campo); color: var(--text-bright); border-color: var(--mtt-acento); box-shadow: 0 0 0 .2rem var(--mtt-acento-soft); }
.mtt-select option, .mtt-select optgroup{ background: #12151f; color: var(--text); }
.mtt-select--mini{ padding-top:.2rem; padding-bottom:.2rem; font-size:.78rem; }
.mtt-campo{ display:flex; flex-direction:column; gap:.3rem; min-width:0; margin:0; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.mtt-campo b{ color: var(--text-bright); }
.mtt-campo--inline{ flex-direction:row; align-items:center; gap:.5rem; }
.mtt-campo--switch{ flex-direction:row; align-items:center; gap:.5rem; text-transform:none; letter-spacing:normal; font-size:.86rem; color: var(--text); align-self:end; padding-bottom:.4rem; }
.mtt-range{ accent-color: var(--mtt-acento); width:100%; }
.mtt-rotulo{ margin:1rem 0 .45rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); }
.mtt-rotulo small{ text-transform:none; letter-spacing:normal; font-weight:400; }
.mtt-nota{ font-size:.82rem; color: var(--text); margin:.75rem 0 0; }
.mtt-nota i{ color: var(--mtt-acento); margin-right:.3rem; }
.mtt-alerta{ margin-top:1rem; padding:.75rem 1rem; border-radius:8px; background: rgba(242,193,78,.08); border:1px solid rgba(242,193,78,.25); color: var(--text); font-size:.88rem; }
.mtt-alerta i{ color: var(--mtt-meio); margin-right:.35rem; }
.mtt-num{ font-variant-numeric: tabular-nums; }

/* ---------- KPIs ---------- */
.mtt-kpis{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:.55rem; margin-bottom:1rem; }
.mtt-kpi{ display:grid; grid-template-columns: auto minmax(0, 1fr); column-gap:.6rem; align-items:center; padding:.7rem .85rem; border-radius:10px; background: var(--mtt-campo); border:1px solid var(--hairline); }
.mtt-kpi i{ grid-row: span 3; font-size:1.25rem; color: var(--mtt-acento); }
.mtt-kpi span{ font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color: var(--text-dim); }
.mtt-kpi b{ font-size:1.25rem; color: var(--text-bright); font-variant-numeric: tabular-nums; line-height:1.2; }
.mtt-kpi small{ font-size:.72rem; color: var(--text-dim); }
.mtt-kpi--destaque{ border-color: currentColor; }
.mtt-kpi--destaque.is-bom{ color: var(--mtt-bom); } .mtt-kpi--destaque.is-meio{ color: var(--mtt-meio); } .mtt-kpi--destaque.is-ruim{ color: var(--mtt-ruim); }
.mtt-kpi--destaque i, .mtt-kpi--destaque b{ color: inherit; }

/* ---------- Aptidões do time ---------- */
.mtt-apts{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:.5rem; }
.mtt-apt{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.2rem; text-align:left;
  padding:.65rem .75rem .8rem; border-radius:10px; border:1px solid var(--hairline); background: var(--mtt-campo); color: var(--text);
  transition: border-color .15s;
}
.mtt-apt:hover:not(:disabled){ border-color: var(--mtt-acento-linha); }
.mtt-apt.is-off{ opacity:.4; cursor:default; }
.mtt-apt-topo{ display:flex; align-items:center; gap:.4rem; }
.mtt-apt-topo .mtt-apt-ico{ width:22px; height:22px; }
.mtt-apt-nome{ font-weight:600; color: var(--text-bright); font-size:.9rem; }
.mtt-apt-bonus{ margin-left:auto; font-style:normal; font-size:.72rem; font-weight:700; color: var(--mtt-acento); }
.mtt-apt-num{ font-size:.78rem; color: var(--text-dim); }
.mtt-apt-num b{ color: var(--text-bright); }
.mtt-apt-forca{ font-size:.82rem; color: var(--mtt-acento); font-variant-numeric: tabular-nums; }
.mtt-apt-barra{ position:absolute; left:0; right:0; bottom:0; height:3px; background: rgba(255,255,255,.05); }
.mtt-apt-barra::after{ content:''; position:absolute; inset:0 auto 0 0; width: var(--p); background: var(--mtt-acento); }

/* ---------- Lista do modal ---------- */
.mtt-lista{ display:flex; flex-direction:column; gap:.35rem; }
.mtt-lista-item{
  display:grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap:.7rem; align-items:center; text-align:left;
  padding:.45rem .7rem; border-radius:8px; border:1px solid var(--hairline); background: var(--mtt-campo); color: var(--text);
}
.mtt-lista-item:hover{ border-color: var(--mtt-acento-linha); }
.mtt-lista-item img{ width:40px; height:40px; object-fit:contain; }
.mtt-lista-item span{ display:flex; flex-direction:column; min-width:0; }
.mtt-lista-item span b{ color: var(--text-bright); }
.mtt-lista-item small{ color: var(--text-dim); font-size:.74rem; }
.mtt-lista-item em{ font-style:normal; font-weight:700; color: var(--mtt-acento); }
.mtt-lista-valor{ display:flex; flex-direction:column; align-items:flex-end; color: var(--text-bright); font-variant-numeric: tabular-nums; }

/* ---------- Calculadora ---------- */
.mtt-calc-controles{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 130px; gap:.75rem; }
.mtt-calc-alvo{ display:flex; align-items:center; gap:.7rem; margin-top:.9rem; padding:.6rem .8rem; border-radius:10px; background: linear-gradient(90deg, var(--mtt-acento-soft), transparent 70%); }
.mtt-calc-alvo img{ width:42px; height:42px; object-fit:contain; }
.mtt-calc-alvo span{ display:flex; flex-direction:column; }
.mtt-calc-alvo b{ color: var(--text-bright); }
.mtt-calc-alvo small{ color: var(--text-dim); font-size:.78rem; }
.mtt-chips{ display:flex; flex-wrap:wrap; gap:.35rem; max-height:220px; overflow-y:auto; }
.mtt-chip{
  display:inline-flex; align-items:center; gap:.45rem; padding:.25rem .65rem .25rem .25rem; border-radius:999px;
  border:1px solid var(--hairline); background: var(--mtt-campo); color: var(--text-dim); font-size:.8rem; text-align:left;
}
.mtt-chip img{ width:30px; height:30px; object-fit:contain; border-radius:50%; background: rgba(255,255,255,.04); }
.mtt-chip span{ display:flex; flex-direction:column; line-height:1.15; }
.mtt-chip small{ font-size:.7rem; }
.mtt-chip.is-on{ border-color: var(--mtt-acento); background: var(--mtt-acento-soft); color: var(--text-bright); }
.mtt-chip:not(.is-on) img{ filter: grayscale(.8); opacity:.6; }
.mtt-calc-res{ display:grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap:.5rem; margin-top:1rem; }
.mtt-calc-res > div{ display:flex; flex-direction:column; padding:.7rem .85rem; border-radius:10px; background: var(--mtt-campo); border:1px solid var(--hairline); }
.mtt-calc-res span{ font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color: var(--text-dim); }
.mtt-calc-res b{ font-size:1.15rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.mtt-calc-res small{ font-size:.74rem; color: var(--text-dim); }
.mtt-calc-res .mtt-calc-tempo{ border-color: var(--mtt-acento-linha); background: linear-gradient(160deg, var(--mtt-acento-soft), transparent 70%), var(--mtt-campo); }
.mtt-calc-res .mtt-calc-tempo b{ font-size:1.6rem; color: var(--mtt-acento); }
.mtt-tabela-wrap{ overflow-x:auto; margin-top:.75rem; }
.mtt-tabela{ width:100%; border-collapse:collapse; font-size:.84rem; }
.mtt-tabela th{ padding:.45rem .6rem; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color: var(--text-dim); border-bottom:1px solid var(--hairline); text-align:left; }
.mtt-tabela td{ padding:.4rem .6rem; border-bottom:1px solid rgba(255,255,255,.04); color: var(--text); }
.mtt-pal{ display:inline-flex; align-items:center; gap:.45rem; color: var(--text-bright); }
.mtt-pal img{ width:28px; height:28px; object-fit:contain; }
.mtt-parte{ position:relative; display:block; min-width:90px; padding-left:.4rem; font-variant-numeric: tabular-nums; z-index:0; }
.mtt-parte::before{ content:''; position:absolute; inset:0 auto 0 0; width: var(--p); background: var(--mtt-acento-soft); border-radius:3px; z-index:-1; }

/* ---------- Produção por hora ---------- */
.mtt-prod-topo{ display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:.75rem; align-items:center; margin-bottom:.75rem; }
.mtt-prods{ display:flex; flex-direction:column; gap:.4rem; }
.mtt-prod{
  display:grid; grid-template-columns: 44px minmax(0, 1.3fr) auto minmax(0, 1fr) 150px 28px; gap:.75rem; align-items:center;
  padding:.55rem .7rem; border-radius:10px; background: var(--mtt-campo); border:1px solid var(--hairline); border-left:3px solid var(--mtt-acento);
}
.mtt-prod.is-vazia{ border-left-color: var(--mtt-ruim); }
.mtt-prod-img{ width:44px; height:44px; object-fit:contain; }
.mtt-prod-est{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.mtt-prod-est b{ color: var(--text-bright); font-size:.9rem; }
.mtt-prod-est small{ color: var(--text-dim); font-size:.78rem; }
.mtt-qtd{ display:inline-flex; align-items:center; border:1px solid var(--hairline); border-radius:6px; }
.mtt-qtd button{ width:26px; height:28px; border:0; background:transparent; color: var(--text-bright); display:grid; place-items:center; }
.mtt-qtd button:disabled{ color: rgba(255,255,255,.2); }
.mtt-qtd b{ min-width:2.2rem; text-align:center; color: var(--text-bright); font-variant-numeric: tabular-nums; font-size:.85rem; }
.mtt-prod-pals{ display:flex; flex-wrap:wrap; gap:.2rem; min-width:0; }
.mtt-prod-pals img{ width:30px; height:30px; object-fit:contain; border-radius:50%; background: rgba(255,255,255,.04); }
.mtt-prod-sem{ font-size:.78rem; color: var(--mtt-ruim); }
.mtt-prod-res{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.mtt-prod-res b{ font-size:1.1rem; color: var(--mtt-acento); font-variant-numeric: tabular-nums; }
.mtt-prod-res small{ font-size:.72rem; color: var(--text-dim); }
.mtt-prod-rem{ border:0; background:transparent; color: var(--text-dim); }
.mtt-prod-rem:hover{ color: var(--mtt-ruim); }
.mtt-totais{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:.4rem; }
.mtt-total{ display:grid; grid-template-columns: 34px auto minmax(0, 1fr); gap:.5rem; align-items:center; padding:.45rem .6rem; border-radius:8px; background: var(--mtt-campo); border:1px solid var(--hairline); }
.mtt-total img{ width:34px; height:34px; object-fit:contain; }
.mtt-total b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }
.mtt-total span{ font-size:.78rem; color: var(--text-dim); line-height:1.2; }

/* ---------- Defesa ---------- */
.mtt-def-controles{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap:.75rem 1rem; align-items:end; margin-bottom:1rem; }
.mtt-def-grau{ display:flex; align-items:center; gap:.45rem; padding-bottom:.35rem; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.mtt-def-grau b{ font-size:1.1rem; color: var(--text-bright); }
.mtt-def-lista{ display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap:.5rem; }
.mtt-def-grupo{
  display:grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap:.2rem .8rem; align-items:center; text-align:left;
  padding:.7rem .85rem; border-radius:10px; border:1px solid var(--hairline); border-left:3px solid var(--tipo); background: var(--mtt-campo); color: var(--text);
}
.mtt-def-grupo:hover{ border-color: color-mix(in srgb, var(--tipo) 45%, var(--hairline)); }
.mtt-def-chance{ grid-row: span 2; display:flex; flex-direction:column; align-items:center; }
.mtt-def-chance b{ font-size:1.35rem; font-variant-numeric: tabular-nums; }
.mtt-def-chance small{ font-size:.66rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.mtt-def-corpo{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.mtt-def-ondas{ display:flex; gap:.25rem; }
.mtt-def-ondas i{ width:18px; height:6px; border-radius:2px; background: currentColor; }
.is-bom{ color: var(--mtt-bom); } .is-meio{ color: var(--mtt-meio); } .is-ruim{ color: var(--mtt-ruim); }
.mtt-onda-corpo{ display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:.75rem; padding:.6rem .75rem; align-items:center; }
.mtt-onda-inis{ display:flex; flex-wrap:wrap; gap:.3rem; }
.mtt-ini{ display:inline-flex; align-items:center; gap:.2rem; padding:.1rem .4rem .1rem .1rem; border-radius:999px; background: rgba(255,255,255,.04); font-size:.78rem; }
.mtt-ini img{ width:28px; height:28px; object-fit:contain; border-radius:50%; }
.mtt-ini b{ color: var(--inv-acento, #ff7a59); }
.mtt-onda-res{ display:grid; grid-template-columns: repeat(2, auto); gap:.2rem 1rem; font-size:.78rem; color: var(--text-dim); }
.mtt-onda-res b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }
.mtt-onda-res b.is-bom{ color: var(--mtt-bom); } .mtt-onda-res b.is-meio{ color: var(--mtt-meio); } .mtt-onda-res b.is-ruim{ color: var(--mtt-ruim); }
.mtt-onda-foge{ grid-column: 1 / -1; color: var(--mtt-meio); }

@media (max-width: 991.98px){
  .mtt-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtt-calc-controles{ grid-template-columns: minmax(0, 1fr); }
  .mtt-calc-res{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtt-def-controles{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mtt-prod{ grid-template-columns: 40px minmax(0, 1fr) auto 28px; }
  .mtt-prod-pals{ grid-column: 2 / 4; }
  .mtt-prod-res{ grid-column: 2 / 4; align-items:flex-start; text-align:left; }
}
@media (max-width: 575.98px){
  .mtt .mtt-slots{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 380px; }
  .mtt-def-lista{ grid-template-columns: minmax(0, 1fr); }
  .mtt-def-controles{ grid-template-columns: minmax(0, 1fr); }
  .mtt-onda-corpo{ grid-template-columns: minmax(0, 1fr); }
  .mtt-lista-item{ grid-template-columns: 36px minmax(0, 1fr) auto; }
  .mtt-lista-valor{ grid-column: 2 / -1; align-items:flex-start; }
  .mtt-prod-topo{ grid-template-columns: minmax(0, 1fr); }
  .mtt-prod{ grid-template-columns: 40px minmax(0, 1fr) 28px; }
  .mtt-prod .mtt-qtd{ grid-column: 2; grid-row: 2; justify-self:start; }
  .mtt-prod-pals, .mtt-prod-res{ grid-column: 2 / 4; }
  .mtt-prod-rem{ grid-column: 3; grid-row: 1; }
}