/* --- ESTILOS GLOBALES Y ANIMACIONES --- */

/* 1. Variables de Color para Fondos Animados */
:root, [data-bs-theme="light"] {
  --bg-gradient-1: #dadada;
  --bg-gradient-2: #c3c3c3;
  --bg-gradient-3: #a9a9a9;
  --bg-gradient-4: #8f8f8f;
}

[data-bs-theme="dark"] {
  --bg-gradient-1: #091213;
  --bg-gradient-2: #070810;
  --bg-gradient-3: #080a12;
  --bg-gradient-4: #090c10;
}

/* 2. Estilos base del body */
body {
  font-family: 'Inter', sans-serif;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* **LA CORRECCIÓN**: Aplicamos el fondo animado a cada tema por separado */
[data-bs-theme="light"] body, [data-bs-theme="dark"] body {
  background: linear-gradient(135deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), var(--bg-gradient-4));
  background-size: 600% 600%;
  animation: animated-gradient 25s ease infinite;
}

@keyframes animated-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.fade-in-on-load {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Scrollbar Personalizado */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bs-tertiary-bg); }
::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary);
  border-radius: 20px;
  border: 3px solid var(--bs-tertiary-bg);
}

/* --- FOOTER --- */
.site-footer {
  background-color: #1a2023;
  color: var(--bs-secondary-color);
  padding: 3rem 0;
  margin-top: 3rem;
  border-top: 1px solid var(--bs-border-color);
}
.site-footer a { color: var(--bs-secondary-color); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--bs-primary); }
.site-footer .footer-logo { font-size: 1.5rem; font-weight: bold; color: var(--bs-light); }

/* --- EFECTO "GLASSMORPHISM" PARA TARJETAS --- */
.card {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
  transition: background-color 0.3s ease;
}
.card:hover {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.8);
}
.card-mod {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-mod:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .25);
}
.card-mod .card-footer { background-color: transparent; border-top: 1px solid rgba(var(--bs-light-rgb), 0.1); }
.card-mod .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }

/* --- INTERACCIONES: ENLACES Y FORMULARIOS --- */
.page-link, .list-group-item-action, .dropdown-item, .nav-link {
  transition: all 0.2s ease-in-out;
}
.page-link:hover, .list-group-item-action:hover, .dropdown-item:hover, .nav-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* Anillo de foco personalizado */
.form-control:focus, .form-select:focus, a:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

/* --- PÁGINA DE PERFIL --- */

/* Tarjetas de Estadísticas */
.stat-card {
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, border-color .2s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-color: var(--bs-info);
}
.stat-card-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.stat-card-number { font-size: 2rem; font-weight: bold; line-height: 1; }
.stat-card-label { font-size: 0.85rem; color: var(--bs-secondary-color); text-transform: uppercase; }

/* Gráfico de Barras Animado */
@keyframes growBar {
    from { width: 0; }
    to { width: var(--bar-width); }
}
.bar-chart-bar {
    animation: growBar 1s ease-out forwards;
}
.bar-chart-container { padding: 1rem; }
.bar-chart-item { display: flex; align-items: center; margin-bottom: 1rem; }
.bar-chart-label { flex-shrink: 0; width: 35%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1rem; }
.bar-chart-bar-wrapper { flex-grow: 1; background-color: var(--bs-tertiary-bg); border-radius: .25rem; height: 2rem; }
.bar-chart-bar {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    height: 100%;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    padding-right: .75rem;
    font-weight: 700;
}

/* --- PÁGINA DE MOD (VALORACIÓN Y COMENTARIOS) --- */

/* --- NUEVO: Sistema de Valoración "Glass & Neon" --- */

/* 1. El contenedor de las estrellas ahora es el panel de cristal */
.rating-stars {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  
  transition: all 0.3s ease;
}

/* 2. Las estrellas individuales */
.rating-stars .star {
  font-size: 2.5rem; /* Un poco más grandes */
  color: rgba(var(--bs-body-color-rgb), 0.2); /* Color grisáceo y apagado por defecto */
  cursor: pointer;
  
  /* Transición suave para el color y el brillo */
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* 3. La animación al pasar el cursor (Hover) */
.rating-stars .star.hover {
  color: #ffd83a; /* Amarillo suave */
  transform: scale(1.2) translateY(-2px); /* La estrella salta un poco */
  
  /* Efecto de brillo / neón */
  text-shadow: 0 0 4px rgba(255, 221, 87, 0.5),
               0 0 4px rgba(255, 221, 87, 0.4);
}

/* 4. El estado final al seleccionar */
.rating-stars .star.selected {
  color: #ffc107; /* Amarillo brillante y definitivo */
  
  /* Efecto de brillo más intenso y permanente */
  text-shadow: 0 0 4px rgba(255, 193, 7, 0.7),
               0 0 4px rgba(255, 193, 7, 0.5);
}

/* Sistema de Comentarios */
@keyframes slideAndFadeIn {
    from { opacity:0; transform:translateY(-20px); }
    to { opacity:1; transform:translateY(0); }
}
.new-comment-animation {
    animation: slideAndFadeIn .5s ease-out forwards;
}
.comment { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.comment:last-child { border-bottom: none; }
.comment-avatar { width: 48px; height: 48px; }
.comment-body { flex: 1; }

/* --- OTROS COMPONENTES VISUALES --- */

/* Texto con Gradiente para Títulos */
.gradient-text {
  background: linear-gradient(45deg, var(--bs-primary), var(--bs-info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Estados Vacíos (Sin comentarios, sin mods, etc.) */
.empty-state-card { text-align: center; padding: 4rem 2rem; border-radius: .5rem; }
.empty-state-card i { font-size: 4rem; color: var(--bs-primary); }


/* --- MEJORAS VISUALES CON EFECTO GLASSMORPHISM --- */

/**
 * El efecto "Glass" se basa en dos propiedades clave:
 * 1. background-color: Un color con transparencia (usando rgba).
 * 2. backdrop-filter: Un desenfoque que se aplica a lo que está DETRÁS del elemento.
 */

/* 1. Efecto Glass para la Barra de Navegación */
.navbar.sticky-top {
  /* Hacemos el fondo un poco más transparente para un mejor efecto */
  background-color: rgba(var(--bs-dark-rgb), 0.75) !important;
  
  /* Aplicamos el desenfoque del fondo */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Un borde sutil para que el "cristal" destaque */
  border-bottom: 1px solid rgba(var(--bs-light-rgb), 0.1);
}

/* 2. Efecto Glass para el Footer */
.site-footer {
  background-color: rgba(26, 32, 35, 0.85); /* Un fondo más sólido pero aún translúcido */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(var(--bs-light-rgb), 0.1);
}

/* 3. Efecto Glass para las Tarjetas (Revisado) */
.card {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--bs-light-rgb), 0.1);
}

/* 4. Efecto Glass para los Menús Desplegables */
.dropdown-menu {
  background-color: rgba(var(--bs-dark-rgb), 0.8) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--bs-light-rgb), 0.15);
  padding: 0.5rem 0;
}
.dropdown-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 1);
}

/* 5. Efecto Translúcido para Botones */
/* El "glassmorphism" puro no funciona bien en botones sólidos,
   así que les daremos un aspecto translúcido que encaje con el tema.
*/
.btn-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.75);
  border-color: rgba(var(--bs-primary-rgb), 0.95);
  background-image: none; /* Quitamos el gradiente para un look más plano y "glass" */
}
.btn-primary:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.9);
  border-color: rgba(var(--bs-secondary-rgb), 0.7);
}

.btn-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 0.6);
  border-color: rgba(var(--bs-secondary-rgb), 0.8);
}
.btn-secondary:hover {
  background-color: rgba(var(--bs-secondary-rgb), 0.8);
  border-color: rgba(var(--bs-secondary-rgb), 1);
}

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--bs-danger);
}

/* --- NUEVO: GLASSMORPHISM EXTENDIDO Y REFINADO --- */

/**
 * El principio del "Glassmorphism" se aplica a más componentes
 * para crear una sensación de profundidad y capas en la interfaz.
 */

/* 1. Modales de Cristal (para reportes, moderación, etc.) */
.modal-content {
  background-color: rgba(var(--bs-dark-rgb), 0.8) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(var(--bs-light-rgb), 0.25);
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3);
}

.modal-header {
  border-bottom: 1px solid rgba(var(--bs-light-rgb), 0.25);
}

.modal-footer {
  border-top: 1px solid rgba(var(--bs-light-rgb), 0.25);
}


/* 2. Alertas de Cristal (mensajes de éxito/error) */
.alert {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-width: 1px;
}

/* Colores específicos para cada tipo de alerta */
.alert-success {
  background-color: rgba(var(--bs-success-rgb), 0.75);
  border-color: rgba(var(--bs-success-rgb), 1);
}
.alert-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.75);
  border-color: rgba(var(--bs-danger-rgb), 1);
}
.alert-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.75);
  border-color: rgba(var(--bs-warning-rgb), 1);
}


/* 3. Paginación de Cristal */
.pagination .page-item .page-link {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
  transition: all 0.2s ease-in-out;
}

.pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.pagination .page-item:not(.disabled) .page-link:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.5);
  transform: translateY(-2px);
}


/* 4. Acordeón de Cristal (para la lista de versiones en la página del mod) */
.accordion-item {
  background-color: transparent;
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.15);
}
.accordion-button {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.5);
}
.accordion-button:not(.collapsed) {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-primary-emphasis-color);
}
.accordion-body {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.3);
}

/* 5. Refinamiento de Tarjetas para un mejor efecto */
.card {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* --- NUEVO: Estilos para la Página de Mod Mejorada --- */
.mod-meta-list .list-group-item {
    background-color: transparent;
    border-color: rgba(var(--bs-body-color-rgb), 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
}

.mod-meta-list .list-group-item span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Estilo para las pestañas dentro de una tarjeta */
.card-header-tabs {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    margin-bottom: -0.8rem;
}