/* Biblioteca de treinos — filtro, cartões de exercício e modalidades. */

/* ---------------- Filtro ---------------- */
.lib-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}

.lib-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;               /* alvo de toque confortável no celular */
  padding:0 18px;
  border:1px solid rgba(19,19,18,.16);
  border-radius:999px;
  background:#fff;
  color:#131312;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.lib-chip:hover{border-color:rgba(19,19,18,.42)}
.lib-chip.is-active{background:#131312;border-color:#131312;color:#fff}

.lib-chip-count{
  min-width:22px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(19,19,18,.08);
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.lib-chip.is-active .lib-chip-count{background:rgba(255,255,255,.2)}

.lib-status{
  margin:0 0 18px;
  font-size:14px;
  font-weight:700;
  color:rgba(19,19,18,.62);
  min-height:20px;               /* reserva a linha para o texto não empurrar a grade */
}

/* ---------------- Cartões ---------------- */
.lib-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

.lib-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px;
  border:1px solid rgba(19,19,18,.12);
  border-radius:18px;
  background:#fff;
}
.lib-card[hidden]{display:none}

.lib-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.lib-card-head h3{
  margin:0;
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.02em;
}

.lib-tag{
  flex:0 0 auto;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(19,19,18,.07);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.lib-tag--musculacao{background:rgba(152,192,31,.20)}
.lib-tag--peso-livre{background:rgba(224,122,31,.18)}
.lib-tag--cardio{background:rgba(43,127,212,.16)}
.lib-tag--mobilidade{background:rgba(122,92,209,.16)}

.lib-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin:0;
  padding:12px 0;
  border-top:1px solid rgba(19,19,18,.08);
  border-bottom:1px solid rgba(19,19,18,.08);
}
.lib-meta dt{
  margin:0 0 2px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(19,19,18,.5);
}
.lib-meta dd{margin:0;font-size:13px;font-weight:700;line-height:1.35}

.lib-exec{margin:0;font-size:14px;line-height:1.55;color:rgba(19,19,18,.8)}

.lib-erro{
  margin:0;
  padding:11px 13px;
  border-left:3px solid #e07a1f;
  border-radius:0 10px 10px 0;
  background:rgba(224,122,31,.08);
  font-size:13px;
  line-height:1.5;
}

/* ---------------- Modalidades ---------------- */
.lib-modalidades{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.lib-modalidade{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:22px;
  border:1px solid rgba(19,19,18,.12);
  border-radius:18px;
  background:#fff;
}
.lib-modalidade h3{margin:0;font-size:20px;letter-spacing:-.02em}
.lib-modalidade p{margin:0;font-size:13px;font-weight:800;color:rgba(19,19,18,.55)}
.lib-modalidade .btn{margin-top:6px}

/* ---------------- Aviso ---------------- */
.lib-aviso{
  padding:28px;
  border:1px solid rgba(19,19,18,.12);
  border-radius:20px;
  background:rgba(19,19,18,.03);
}
.lib-aviso h2{margin:0 0 10px;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em}
.lib-aviso p{margin:0 0 18px;font-size:15px;line-height:1.6;max-width:70ch;color:rgba(19,19,18,.78)}

@media (max-width:720px){
  .lib-grid{grid-template-columns:1fr}
  .lib-card{padding:18px}
  .lib-card-head{flex-direction:column}
  .lib-aviso{padding:20px}
}