/* =========================
   RESEÑAS
========================= */

.resenas{
  width:100%;
  height:auto;

  display:flex;
  justify-content:center;

  gap:40px;

  padding:20px;

  background:#000;
  color:#fff;

  box-sizing:border-box;

  margin-top:-50px;
}

/* =========================
   CALIFICACION TOTAL
========================= */

.calificacion-total{
  width:20%;
  height:90%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:15px;
}

/* =========================
   ESTRELLAS PROMEDIO
========================= */

.estrellas-promedio i{
  font-size:26px;
  color:#ffc107;
}

/* =========================
   TOTAL VOTOS
========================= */

.total-votos{
  font-size:14px;
  opacity:0.8;
}

/* =========================
   VOTANTES
========================= */

.votantes{
  display:flex;
  align-items:center;
}

.votantes img,
.mas-votos{
  width:35px;
  height:35px;

  border-radius:50%;
  border:2px solid #000;

  margin-left:-10px;
}

/* MAS VOTOS */

.mas-votos{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#ffc107;
  color:#000;

  font-size:12px;
  font-weight:bold;
}

/* =========================
   BOTON CALIFICAR
========================= */

.btn-calificar{
  margin-top:10px;
  padding:10px 16px;

  background:#7256cf;
  color:#fff;

  border:none;
  border-radius:6px;

  font-weight:600;

  cursor:pointer;
}

/* =========================
   COMENTARIOS
========================= */

.comentarios{
  width:55%;
  height:auto;

  max-height:300px;

  overflow-y:auto;

  align-items:center;

  margin-top:10px;
}

/* =========================
   SCROLL COMENTARIOS
========================= */

/* ANCHO */

.comentarios::-webkit-scrollbar{
  width:5px;
}

/* FONDO */

.comentarios::-webkit-scrollbar-track{
  background:#f1f1f1;
  border-radius:10px;
}

/* BARRA */

.comentarios::-webkit-scrollbar-thumb{
  background:#f5c400;
  border-radius:10px;

  transition:background 0.3s;
}

/* HOVER */

.comentarios::-webkit-scrollbar-thumb:hover{
  background:#e0b200;
}

/* =========================
   COMENTARIO
========================= */

.comentario{
  position:relative;

  display:flex;

  gap:15px;

  padding:15px;
  margin-bottom:15px;

  background:#111;

  border-radius:10px;
}

/* =========================
   AVATAR
========================= */

.avatar{
  width:50px;
  height:50px;

  border-radius:50%;
}

/* =========================
   AVATAR USUARIO
========================= */

.avatar-usuario{
  text-align:center;

  padding-top:12px;

  font-size:20px;
  font-weight:bold;
}

/* =========================
   CONTENIDO
========================= */

.contenido{
  flex:1;
}

/* =========================
   ESTRELLAS
========================= */

.estrellas i{
  font-size:16px;
  color:#ffc107;
}

/* =========================
   FECHA
========================= */

.fecha{
  margin-top:2px;

  font-size:0.8rem;

  color:#888;
}

/* =========================
   ACCIONES
========================= */

.acciones{
  position:relative;
}

/* BOTON OPCIONES */

.btn-opciones{
  background:none;
  border:none;

  color:#fff;

  font-size:20px;

  cursor:pointer;
}

/* MENU OPCIONES */

.menu-opciones{
  position:absolute;

  top:30px;
  right:0;

  display:none;
  flex-direction:column;

  overflow:hidden;

  background:#222;

  border-radius:8px;
}

/* BOTONES MENU */

.menu-opciones button{
  padding:10px 15px;

  background:none;
  border:none;

  color:#fff;

  text-align:left;

  cursor:pointer;
}

/* HOVER BOTONES */

.menu-opciones button:hover{
  background:#333;
}

/* ELIMINAR */

.menu-opciones .eliminar{
  color:#ff4d4d;
}

/* =========================
   MODAL CALIFICAR
========================= */

.modal-calificar{
  position:fixed;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,0.7);

  z-index:999;
}

/* =========================
   MODAL CONTENIDO
========================= */

.modal-contenido{
  width:400px;

  display:flex;
  flex-direction:column;

  gap:20px;

  padding:20px;

  background:#111;
  color:#fff;

  border-radius:12px;

  animation:aparecer .2s ease;
}

/* =========================
   MODAL HEADER
========================= */

.modal-header{
  display:flex;
  align-items:center;

  gap:12px;
}

/* =========================
   USER INFO
========================= */

.user-info{
  display:flex;
  flex-direction:column;

  line-height:1.2;
}

/* TEXTO */

.modal-header span{
  font-size:13px;
  opacity:.7;
}

/* CERRAR MODAL */

.modal-header .cerrar-modal{
  margin-left:auto;

  background:none;
  border:none;

  color:#fff;

  font-size:26px;

  cursor:pointer;
}

/* =========================
   RATING
========================= */

.rating{
  display:flex;
  justify-content:center;

  gap:8px;
}

/* ESTRELLAS */

.rating i{
  font-size:32px;

  color:#444;

  cursor:pointer;

  transition:color .2s;
}

/* ACTIVA */

.rating i.activa{
  color:#ffc107;
}

/* =========================
   TEXTAREA
========================= */

.modal-contenido textarea{
  height:100px;

  padding:12px;

  background:#000;
  color:#fff;

  border:1px solid #333;
  border-radius:8px;

  resize:none;
}

/* =========================
   BOTON ENVIAR
========================= */

.btn-enviar{
  padding:12px;

  background:#ffc107;
  color:#000;

  border:none;
  border-radius:8px;

  font-weight:600;

  cursor:pointer;
}

/* =========================
   ANIMACION
========================= */

@keyframes aparecer{

  from{
    transform:scale(.9);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }

}

/* =========================
   RESPONSIVE 768PX
========================= */

@media (max-width:768px){

  .resenas{
    flex-direction:column;

    gap:10px;

    height:auto !important;

    margin-bottom:-25px;
  }

  .calificacion-total{
    width:100%;
    height:auto;

    padding:5px 0;
  }

  .comentarios{
    width:100%;
    height:auto;

    max-height:300px;

    overflow-y:auto;

    align-items:center;

    margin-top:10px;
  }

  /* AJUSTES VISUALES */

  .estrellas-promedio i{
    font-size:22px;
  }

  .avatar{
    width:40px;
    height:40px;
  }

  .estrellas i{
    font-size:14px;
  }

  .btn-calificar{
    width:90%;
  }

}

/* =========================
   RESPONSIVE 600PX
========================= */

@media (max-width:600px){

  .comentarios{
    overflow-y:auto;

    -ms-overflow-style:none;
    scrollbar-width:none;
  }

  /* CHROME - SAFARI - EDGE */

  .comentarios::-webkit-scrollbar{
    display:none;
  }

}

/* =========================
   RESPONSIVE 400PX
========================= */

@media (max-width:400px){

  .comentario{
    zoom:90%;
  }

}