/* ------------------------------------------------ */
/* 1. PALETA DE COLORES Y FONT */
/* ------------------------------------------------ */
:root {
    /* Colores de marca */
    --brand-purple: #8e24aa; /* Morado */
    --brand-orange: #f9a825; /* Naranja */
    --brand-green: #0e8127; /* Rosa */
    --brand-pink: #f06292; /* Rosa */
    
    /* Fondo lúdico (tomado de la referencia UI) */
    --app-background: #ffecc6; /* Amarillo pastel claro */ 
    
    /* Morado cercano al 157 0 255 para la sombra interior */
    --shadow-purple-dark: rgba(90, 0, 150, 0.24); 
    
    /* Color de borde 3D Pop Base (Inactivo) */
    --achievement-border-inactive: #cbd5e1;

    /* Colores de borde Pop Activos */
    --achievement-border-orange: #e65100; /* Naranja oscuro */
    --achievement-border-pink: #c2185b;   /* Rosa oscuro */
    --achievement-border-purple: #4a148c; /* Morado oscuro */
    --achievement-border-green: #15803d;  /* Verde oscuro */
    
    /* Borde específico para el panel morado */
    --panel-border-purple: #6a1b9a; 
}

/* Aplicación de colores base */
.bg-brand-purple { background-color: var(--brand-purple); }
.text-brand-purple { color: var(--brand-purple); }
.bg-brand-orange { background-color: var(--brand-orange); }
.text-brand-orange { color: var(--brand-orange); }
.bg-brand-pink { background-color: var(--brand-pink); }
.text-brand-pink { color: var(--brand-pink); }
.bg-app-background { background-color: var(--app-background); }


/* ------------------------------------------------ */
/* 2. ESTILO LÚDICO (Basado en la referencia UI) */
/* ------------------------------------------------ */

/* --- CLASE PARA GENERAR TEXTURA DE RUIDO GRANULADO --- */
.noisy-background {
    /* Genera ruido mediante un repeating-linear-gradient muy sutil */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 0,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    background-size: 4px 4px;
}

body {
    font-family: 'Nunito', sans-serif;
    /* Padding para compensar la navbar fija */
    padding-bottom: 70px; 
}

/* CLASE PARA EL CONTENEDOR FLOTANTE Y MARGEN */
.floating-header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    /* El padding se aplica desde el HTML (p-4 = 1rem) */
}

/* Compensación de espacio para el Header flotante */
main {
    padding-top: 6.5rem; 
}

/* Estilo de tarjeta base (usado en modales y otros elementos) */
.card-style {
    border-radius: 1.5rem; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); 
}
.card-memotest {
    background-color: var(--brand-purple);
    color: #ffffff;
    border-bottom: 8px solid var(--panel-border-purple);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.header-card{
    margin: 0.5em;
}

/* --- ESTILO 3D POP PARA EL HEADER (CON SOMBRA INTERIOR Y RUIDO) --- */
.header-3d-pop {
    background: #ffffff;
    border-bottom: 6px solid #cd94ee; 
    border-radius: 2rem; /* Muy redondeado */
    
    /* Sombra exterior suave para que flote un poco */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    
    /* SOMBRA INTERIOR APLICADA: Bisel rebajado con tu color */
    box-shadow: inset 0 2px 4px var(--shadow-purple-dark), 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- (NUEVO) ESTILO ESPECÍFICO PARA EL PANEL DE PROGRESO --- */
/* Esto soluciona el conflicto de color: aplicamos el fondo y borde aquí directamente */
#progress-panel {
    background-color: var(--brand-purple);
    color: white;
    
    /* Estilo 3D Pop específico para fondo oscuro */
    border-bottom: 6px solid var(--panel-border-purple); 
    border-radius: 2rem;
    
    /* Sombras adaptadas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(0,0,0,0.2);
}


/* Estilo para la etiqueta de racha (dentro del header) - Mantenido */
.streak-tag-style {
    background: #edf2f7; 
    color: #f9a825;
    border-radius: 999px; /* Forma de píldora perfecta */
    
    padding: 0.25rem 1rem;
    margin-bottom: 4px; /* Espacio para que la sombra no empuje el layout */
    transition: all 0.1s ease;
}

.streak-tag-style:active {
    /* Al presionar: quitamos la sombra y movemos el elemento hacia abajo 
    box-shadow: 0 0 0 #67e8f9;
    transform: translateY(4px);*/
}

/* Títulos principales */
.fun-title {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); 
}

/* Botones con efecto táctil */
.fun-button {
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
.fun-button:active {
    transform: scale(0.98);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Botón 3D pop genérico */
.btn-pop {
    position: relative;
    border-radius: 999px;
    border: 2px solid transparent;
    border-bottom-width: 6px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, border-bottom-width 0.1s ease-out, top 0.1s ease-out;
    top: 0;
}
.btn-pop:active {
    top: 2px;
    border-bottom-width: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

.btn-pop-purple {
    background-color: var(--brand-purple);
    color: #ffffff;
    border-color: var(--panel-border-purple);
    border-bottom-color: var(--panel-border-purple);
}

.btn-pop-definitive {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    border-color: #c2410c;
    border-bottom-color: #c2410c;
}

/* --- NUEVO ESTILO: TARJETA DE LOGRO 3D POP --- */
.achievement-card-pop {
    /* Estilo de borde Pop Base (Gris/Inactivo) */
    border-radius: 1.5rem; 
    border: 2px solid var(--achievement-border-inactive);      
    border-bottom: 6px solid var(--achievement-border-inactive); 
    box-shadow: none; 

    /* Efecto de levantamiento sutil al pasar el ratón o tocar */
    transition: transform 0.1s ease, border-color 0.3s;
    
    /* Para el efecto de presión */
    position: relative;
    top: 0;
}

.achievement-card-pop:active {
    /* Se "hunde" al hacer clic */
    top: 4px; 
    border-bottom-width: 2px;
}

/* --- CLASES DE BORDES DINÁMICOS (Estas faltaban para que cargue el color) --- */
.achievement-pop-border-orange {
    border-color: var(--achievement-border-orange);
    border-bottom-color: var(--achievement-border-orange);
    /* Opcional: fondo muy tenue para resaltar */
    background-color: #fffbf0; 
}

.achievement-pop-border-pink {
    border-color: var(--achievement-border-pink);
    border-bottom-color: var(--achievement-border-pink);
    background-color: #fff0f5;
}

.achievement-pop-border-purple {
    border-color: var(--achievement-border-purple);
    border-bottom-color: var(--achievement-border-purple);
    background-color: #f8f0fc;
}

.achievement-pop-border-green {
    border-color: var(--achievement-border-green);
    border-bottom-color: var(--achievement-border-green);
    background-color: #f0fdf4;
}


/* ------------------------------------------------ */
/* 3. NAVEGACIÓN Y COMPONENTES REPETITIVOS (ESTILO PILL INDICATOR CON SOMBRA Y RUIDO) */
/* ------------------------------------------------ */

/* Barra de navegación */
.nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 10;
    
    background-color: #ffffff; /* Fondo blanco */
    
    /* Sombra exterior y SOMBRA INTERIOR APLICADA */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1), 
                inset 0 2px 4px var(--shadow-purple-dark);
    
    /* Solo redondeado arriba */
    border-radius: 1.5rem 1.5rem 0 0; 
    
    /* Flexbox para centrar botones */
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 1rem; 
    
    /* ANIMACIÓN DE INTERACCIÓN: sutilmente escalamos la barra al presionar un botón */
    transition: transform 0.1s ease-out; 
}

/* Animación sutil al hacer clic en cualquier botón de la navbar */
.nav-bar .nav-button:active {
    transform: scale(0.99); 
}


/* Estilos para los iconos de navegación */
.nav-icon {
    width: 28px; /* AUMENTADO: de 24px a 28px */
    height: 28px; /* AUMENTADO: de 24px a 28px */
    object-fit: contain;
    transition: all 0.3s ease;
    filter: none; /* Icono mantiene su color original por defecto */
}

/* Estilos para el contenedor del botón (pastilla) */
.nav-content-wrapper {
    height: 40px; /* Altura de la pastilla */
    /* Alinear items al centro del wrapper */
    display: flex; 
    align-items: center;
    justify-content: center;

    padding: 0 1.5rem;
    border-radius: 999px; /* Redondeo completo */
    background-color: transparent; /* Por defecto */
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* CLASES DINÁMICAS DE COLOR PARA LA PASTILLA */
.nav-pill-juegos { background-color: var(--brand-orange); }
.nav-pill-logros { background-color: var(--brand-purple); }
.nav-pill-circo { background-color: var(--brand-pink); }
.nav-pill-amigos { background-color: var(--brand-green); }

/* ESTADO ACTIVO */
.nav-button.active .nav-icon {
    filter: none; 
    transform: scale(1.05);
}

/* Estilo para la etiqueta de texto (se muestra solo cuando está activa) */
.nav-label {
    color: #ffffff; /* CAMBIADO A BLANCO para asegurar el contraste */
    white-space: nowrap;
}

/* Ocultamos y ajustamos el espaciado de la etiqueta cuando no está activa (lo maneja JS) */
.nav-button:not(.active) .nav-label {
    display: none; 
}

/* ------------------------------------------------ */
/* 4. TRANSICIÓN DE PÁGINAS (Escalable) */
/* ------------------------------------------------ */
.content-transition {
    /* Estado inicial: invisible y ligeramente movido hacia abajo */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.content-transition.active {
    /* Estado final: visible y en posición */
    opacity: 1;
    transform: translateY(0);
}