/* Opiniones – layout moderno y mobile-first (2026)
   Mantiene Bootstrap y design-2026, pero optimiza lectura en smartphone.
*/

.review-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.review-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(120%) blur(6px);
  font-size:.92rem;
  line-height:1;
}

.review-pill .bi{
  font-size:1rem;
}

.reviews-filters{
  display:flex;
  gap:.5rem;
  overflow:auto;
  padding:.25rem .05rem .5rem;
  -webkit-overflow-scrolling:touch;
}

.reviews-filters::-webkit-scrollbar{height:6px}
.reviews-filters::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:999px}

.review-filter-btn,
.reviews-filter{
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  padding:.5rem .75rem;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  color:inherit;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}

.review-filter-btn:active,
.reviews-filter:active{transform:scale(.98)}

.review-filter-btn.is-active,
.reviews-filter.is-active{
  background:rgba(27,67,50,.08);
  border-color:rgba(27,67,50,.35);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.reviews-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

@media (min-width:768px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:992px){
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
}

.review-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:1.25rem;
  padding:1rem;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  height:100%;
  display:flex;
  flex-direction:column;
}

@media (min-width:992px){
  .review-card{padding:1.25rem}
}

.review-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}

.review-stars{
  display:flex;
  gap:.15rem;
  color:#ffc107;
  line-height:1;
}

.review-source{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.82rem;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.10);
  white-space:nowrap;
}

.review-source .review-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15rem;
  height:1.15rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  font-size:.75rem;
  font-weight:800;
}

.review-text{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:#1C1917; /* mejora contraste de lectura */
}

.review-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.75rem;
}

.review-tags .tag{
  font-size:.78rem;
  padding:.2rem .55rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.7);
}

.review-details{
  margin-top:.75rem;
}

.review-details summary{
  cursor:pointer;
  user-select:none;
  font-weight:600;
  font-size:.92rem;
  color:rgba(0,0,0,.75);
}

.review-details summary::-webkit-details-marker{display:none}
.review-details summary::after{
  content:"▾";
  display:inline-block;
  margin-left:.35rem;
  transform:translateY(-1px);
  opacity:.7;
}

.review-details[open] summary::after{content:"▴"}

.review-details .small{
  margin-top:.5rem;
}

/* Respeta preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  .review-filter-btn,
  .reviews-filter{transition:none}
  .review-filter-btn:active,
  .reviews-filter:active{transform:none}
}

/* ===============================
   CONTRASTE (AA) — MINI HERO
   ===============================
   En la cabecera (.mini-hero) el texto general es blanco, pero
   elementos con fondo claro (píldoras) deben invertir a texto oscuro.
*/

.mini-hero .review-pill{
  color:#1C1917; /* stone-900 */
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.14);
}

.mini-hero .review-pill .bi{ color:#1B4332; }

.mini-hero .hero-note{ color:rgba(255,255,255,.88); }

.mini-hero .btn-outline-light{
  border-color:rgba(255,255,255,.82);
  color:#fff;
}

.mini-hero .btn-outline-light:hover,
.mini-hero .btn-outline-light:focus{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.mini-hero .btn-outline-light:active{ background:rgba(255,255,255,.18); }