/* reviews.css v2 — estilos COMPARTIDOS de reseñas (reproductor / home).
   Tarjetas .sb-* (USADAS por review-cards.js en ambos sitios), estrellas
   .rstar, tags TU RESEÑA/ADMIN, respuestas, formularios de responder/editar
   e inputs de reseña. Antes duplicados entre home.css y player.css. */

/* ============ ESTRELLAS ============ */
.rstar{color:rgba(157,245,207,.22);display:inline-flex}
.rstar-on{color:var(--mint)}
.sb-stars,.sb-card-stars{display:inline-flex;align-items:center;gap:1px;vertical-align:-1px}

/* ============ TARJETA DE RESEÑA ============ */
.sb-card{
  border:1px solid rgba(157,245,207,.14);
  background:rgba(157,245,207,.03);
  padding:10px 12px;
  margin-bottom:10px;
}
.sb-card.sb-mine{border-color:rgba(157,245,207,.4)}
.sb-card-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sb-card-name{color:var(--mint);font-weight:normal;letter-spacing:.08em}
.sb-card-meta{
  font-size:.5rem;
  letter-spacing:.12em;
  color:rgba(157,245,207,.5);
  text-transform:uppercase;
}
.sb-card-track{
  font-size:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(157,245,207,.4);
}
.sb-card-why{
  margin:7px 0 4px;
  font-size:.72rem;
  font-style:italic;
  line-height:1.45;
  color:rgba(157,245,207,.85);
}
.sb-state{
  display:block;
  font-size:.6rem;
  letter-spacing:.1em;
  color:rgba(157,245,207,.5);
  margin:8px 0;
}
.sb-rm{
  margin-top:4px;
  padding:2px 8px;
  border:1px solid var(--line);
  background:transparent;
  color:rgba(157,245,207,.55);
  font-family:inherit;
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.sb-rm:hover{color:#ffb4b4;border-color:#ff9d9d}

/* ============ TAGS TU RESEÑA / ADMIN ============ */
.sb-tag{
  font-size:.46rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--line);
  padding:1px 5px;
  color:rgba(157,245,207,.6);
}
.sb-tag-mine{color:var(--mint);border-color:rgba(157,245,207,.5)}
.sb-tag-admin{color:#ffd27d;border-color:#ffd27d66}

/* ============ ACCIONES ============ */
.sb-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.sb-act{
  padding:2px 8px;
  border:1px solid var(--line);
  background:transparent;
  color:rgba(157,245,207,.55);
  font-family:inherit;
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.sb-act:hover{color:var(--mint);border-color:rgba(157,245,207,.5)}
.sb-act.danger:hover{color:#ffb4b4;border-color:#ff9d9d}

/* ============ RESPONSES (colapsables) ============ */
/* [hidden] debe respetarse aunque otros bloques pongan display:flex */
[hidden]{display:none!important}
.sb-replies{
  margin-top:8px;
  padding-top:6px;
  border-top:1px dashed rgba(157,245,207,.14);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sb-reply{font-size:.66rem;line-height:1.45;color:rgba(157,245,207,.8)}
.sb-reply b,.sb-reply .sb-reply-name{color:var(--mint);font-weight:normal;letter-spacing:.06em}
.sb-reply .sb-reply-meta{display:block;font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(157,245,207,.45)}
.sb-reply-rm,.sb-reply .sb-act{
  margin-left:6px;
  padding:0 4px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(157,245,207,.45);
  font-family:inherit;
  font-size:.46rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.sb-reply-rm:hover,.sb-reply .sb-act:hover{color:#ffb4b4;border-color:#ff9d9d}
.sb-replies-toggle{
  align-self:flex-start;
  margin-top:8px;
  padding:2px 8px;
  border:1px solid var(--line);
  background:transparent;
  color:rgba(157,245,207,.55);
  font-family:inherit;
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.sb-replies-toggle:hover{color:var(--mint);border-color:rgba(157,245,207,.5)}

/* ============ FORMULARIOS: respondiendo / editar ============ */
.sb-reply-form,.sb-edit-form{
  margin-top:8px;
  padding:8px;
  border:1px dashed rgba(157,245,207,.22);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sb-form-title{
  font-size:.5rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mint);
}
.sb-rinput{
  width:100%;
  padding:4px 6px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--mint);
  font-family:inherit;
  font-size:.64rem;
  letter-spacing:.08em;
  outline:none;
}
.sb-rinput::placeholder{color:rgba(157,245,207,.3);text-transform:none}
.sb-rinput:focus{border-color:var(--mint)}
.sb-rinput.why{min-height:44px;resize:vertical}
.sb-rsubmit{
  align-self:flex-start;
  padding:3px 10px;
  border:1px solid var(--mint-dim);
  background:transparent;
  color:var(--mint);
  font-family:inherit;
  font-size:.52rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}
.sb-rsubmit:hover{background:rgba(157,245,207,.16)}
.sb-rsubmit:disabled{opacity:.4;cursor:default}

/* ============ INPUTS DE RESEÑA (compartidos) ============ */
.review-form{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:6px 0 2px;
}
.review-field{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.54rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-dim);
}
.review-field label{white-space:nowrap}
.review-input{
  width:min(180px,38vw);
  background:#000;
  border:1px solid var(--line);
  color:var(--mint);
  font-family:inherit;
  font-size:.56rem;
  letter-spacing:.08em;
  padding:3px 6px;
  outline:none;
}
.review-input::placeholder{color:rgba(157,245,207,.3);text-transform:none}
.review-input:focus{border-color:var(--mint)}
.review-input.why{width:min(240px,52vw)}
.review-save{
  padding:3px 8px;
  border:1px solid var(--mint);
  background:rgba(157,245,207,.08);
  color:var(--mint);
  font-family:inherit;
  font-size:.54rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.review-save:hover{background:rgba(157,245,207,.16)}
.review-save:disabled{opacity:.4;cursor:default}
.review-msg{
  font-size:.5rem;
  letter-spacing:.14em;
  color:rgba(157,245,207,.5);
  text-transform:none;
}
.review-msg.err{color:#ff9d9d}
.review-title{
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mint);
}
.review-del{
  padding:2px 7px;
  border:1px solid var(--line);
  background:transparent;
  color:rgba(157,245,207,.5);
  font-family:inherit;
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.review-del:hover{color:#ffb4b4;border-color:#ff9d9d}
.review-del:disabled{opacity:.4;cursor:default}
.review-edit{
  padding:2px 7px;
  border:1px solid rgba(157,245,207,.35);
  background:rgba(157,245,207,.08);
  color:var(--mint);
  font-family:inherit;
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.review-edit:hover{border-color:var(--mint);background:rgba(157,245,207,.16)}

/* ============ ORDENAR RESEÑAS (sidebar / home) ============ */
.sb-sort{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.sort-btn{
  padding:2px 8px;
  border:1px solid var(--line);
  background:transparent;
  color:rgba(157,245,207,.5);
  font-family:inherit;
  font-size:.5rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.sort-btn:hover{color:var(--mint);border-color:rgba(157,245,207,.5)}
.sort-btn.fx-on{color:var(--mint);border-color:var(--mint);background:rgba(157,245,207,.08)}