body {
  background: linear-gradient(to bottom right, #f1f4f9, #dff1ff);
}

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
}

.glass-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.profile-img {
  max-height: 280px;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.comment-card {
  border-radius: 1rem;
  border: none;
  background: #ffffffcc;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.reply-card {
  margin-top: 1rem;
  margin-left: 1rem;
  border-left: 4px solid #0d6efd;
  background-color: #f8f9fa;
}

.form-control {
  border-radius: 0.75rem;
}

.btn-primary {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  border: none;
  border-radius: 1rem;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0062cc, #00aaff);
}

.btn-gradient-blue {
  background: linear-gradient(135deg, #2193b0, #6dd5ed);
  border: none;
  color: white;
  padding: 0.6rem 1.5rem;
  border-radius: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-gradient-blue:hover {
  background: linear-gradient(135deg, #1b6a85, #5abbe0);
  color: white;
}

.reply-link {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Botones de puntuación */
.score-btn {
  min-width: 48px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: none;
  text-align: center;
  font-weight: bold;
  transition: 0.2s ease;
}

.score-btn:hover {
  filter: brightness(1.1);
}

.score-1 { background-color: #ffe0e0; color: #a33; }
.score-2 { background-color: #ffeccc; color: #a65; }
.score-3 { background-color: #fff9c4; color: #997700; }
.score-4 { background-color: #d4edda; color: #155724; }
.score-5 { background-color: #c3e6cb; color: #1c6633; }

.btn-check:checked + .score-btn {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  transform: scale(1.05);
  font-weight: bold;
}

.btn-outline-info {
  border-radius: 1rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  transition: all 0.3s ease;
}

.btn-outline-info:hover {
  background-color: #0dcaf0;
  color: white;
  border-color: #0dcaf0;
}

.reply-form textarea {
  border-radius: 0.5rem;
  resize: none;
}
.reply-form button {
  border-radius: 1rem;
  margin-top: 0.5rem;
}