/* =========================================
   PÁGINA DE DASHBOARD (PANEL PRINCIPAL)
========================================== */

/* --- EL SUPER GRID (PC) --- */
.dashboard-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 2fr 1fr; /* 2 tercios izquierda, 1 tercio derecha */
    grid-template-areas: 
        "tendencias tendencias"
        "descubrimientos seguidos";
}

/* --- ASIGNACIÓN DE ÁREAS --- */
.area-tendencias { 
    grid-area: tendencias; 
    background-color: var(--color-tarjeta);
    border-radius: 12px;
    padding: 1.5rem;
}

.area-descubrimientos { 
    grid-area: descubrimientos; 
    background-color: var(--color-tarjeta);
    border-radius: 12px;
    padding: 1.5rem;
}

.area-seguidos { 
    grid-area: seguidos; 
    background-color: var(--color-tarjeta);
    border-radius: 12px;
    padding: 1.5rem;
}

/* --- ENCABEZADOS DE SECCIÓN --- */
.header-seccion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 0.5rem;
}

.header-seccion h3 {
    margin: 0;
    color: var(--color-texto-principal);
    font-size: 1.2rem;
}

/* --- BADGES Y TAGS --- */
.badge-trofeo {
    background-color: var(--color-tarjeta);
    border: 1px solid #555;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.badge-trofeo-small {
    background-color: var(--color-tarjeta);
    border: 1px solid #555;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    float: right;
}

.tags-info {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    display: flex;
    gap: 10px;
}

/* --- ITEMS COLUMNA DERECHA (SEGUIDOS) --- */
.seguido-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-borde);
}

.seguido-item:last-child {
    border-bottom: none;
}

.seguido-item img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.seguido-info h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
}

/* --- RESPONSIVO DASHBOARD --- */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr; /* Todo a 1 columna en pantallas pequeñas */
        grid-template-areas: 
            "tendencias"
            "descubrimientos"
            "seguidos";
    }
}

/* =========================================
   ADAPTACIÓN MÓVIL (PWA) - CORREGIDO
========================================== */

/* --- 1. ESTILOS GLOBALES / PC --- */
/* Ocultar elementos exclusivos de móvil cuando estamos en PC */
.bottom-nav-movil,
.mostrar-en-movil {
    display: none;
}


/* --- 2. REGLAS EXCLUSIVAS PARA CELULAR (hasta 768px) --- */
@media (max-width: 768px) {
    
    /* Prevenir que el contenido quede oculto detrás de la barra inferior */
    body {
        padding-bottom: 80px; 
        background-color: #121212; /* Fondo oscuro de tu maqueta */
    }

    /* Apagar elementos de PC */
    .ocultar-en-movil {
        display: none !important;
    }

    /* Encender contenedor Móvil Superior */
    .mostrar-en-movil {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* --- BARRA SUPERIOR (MÓVIL) --- */
    .encabezado-flotante {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-color: #121212; /* Fondo oscuro igual al body */
        position: sticky;
        top: 0;
        z-index: 1000;
        border: none; /* Quitamos bordes raros */
    }

    /* --- FILA 1: Logo e Icono --- */
    .top-bar-movil {
        display: flex;
        justify-content: space-between; 
        align-items: center;
        padding: 15px 20px 5px 20px; 
    }

    .enlace-logo-movil, 
    .logo-texto-movil {
        text-decoration: none !important;
        border: none !important;
        outline: none !important;
    }

    .logo-texto-movil {
        font-family: 'FuenteXylo', sans-serif;
        color: white;
        font-size: 1.5rem;
        letter-spacing: 4px;
        font-weight: bold;
    }
    .btn-icono-movil {
        color: white; 
        font-size: 1.4rem;
        text-decoration: none;
    }

    /* --- FILA 2: Pestañas --- */
    .tabs-movil {
        display: flex;
        justify-content: space-between; 
        padding: 0 20px; 
        border-bottom: 1px solid #333333;
    }

    .tab-item {
        padding: 12px 0;
        color: #888888;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: bold;
        position: relative;
    }

    /* ESTADO REACTIVO SEGURO */
    .tab-item.tab-activa {
        color: var(--color-acento-purpura, #9B59B6); 
    }

    .tab-item.tab-activa::after {
        content: '';
        position: absolute;
        bottom: -1px; 
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--color-acento-purpura, #9B59B6); 
        border-radius: 3px 3px 0 0;
    }

    /* --- BARRA INFERIOR (MÓVIL) --- */
    .bottom-nav-movil {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px; /* Altura fija para que no brinque al hacer scroll */
        background-color: #0a0a0a; /* Un negro casi puro para contrastar */
        border-top: 1px solid #222222; /* Borde súper sutil */
        justify-content: space-around;
        align-items: center;
        
        /* MAGIA PWA: Respeta la barra de gestos de iPhone/Android */
        padding-bottom: env(safe-area-inset-bottom); 
        z-index: 1000;
    }

    .bottom-nav-movil .nav-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: #666666; /* Gris apagado para los inactivos */
        font-size: 1.4rem; /* Tamaño perfecto para el pulgar */
        text-decoration: none;
        transition: color 0.2s ease, transform 0.1s ease;
        
        /* MAGIA PWA: Quita el destello azul feo al tocar la pantalla */
        -webkit-tap-highlight-color: transparent; 
    }

    /* Ocultar cualquier texto residual que haya quedado en el HTML */
    .bottom-nav-movil .nav-item span {
        display: none !important;
    }

    /* Estado Activo: El botón de la página en la que estás */
    .bottom-nav-movil .nav-item.activo {
        color: #ffffff; /* Blanco brillante (O cámbialo a tu var(--color-acento-purpura)) */
    }

    /* Pequeña animación al tocar */
    .bottom-nav-movil .nav-item:active {
        transform: scale(0.9);
    }

    /* --- APILAMIENTO DE COLUMNAS (Obligatorio para móvil) --- */
    .dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }

    .area-tendencias, 
    .area-descubrimientos, 
    .area-seguidos,
    .caja-seccion {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding: 1rem 0 !important; /* Quitamos padding lateral para que las tarjetas toquen el borde */
        background-color: transparent !important; /* Quitamos el fondo gris para que se funda con el fondo negro */
    }

    /* Ajuste del carrusel para móvil */
    .carrusel-wrapper {
        padding-left: 15px; /* Pequeño margen para que la primera tarjeta no pegue al borde */
    }

} /* <--- ¡ESTA LLAVE ES CRUCIAL! CIERRA EL MEDIA QUERY */