/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   

   /* AJUSTE GLOBAL */
* {
    box-sizing: border-box;
}
.mobile-only-button {
display: none; /* No existe en PC */
}

/* 1. FONDO Y ANIMACIÓN */
body {
    background-image: url('https://mycozylittlecorner.neocities.org/backgrounds/HD-purple-wallpaper-image-to-use-as-background-112.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0;
    padding-bottom: 50px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

/* 2. BASE CRISTALINA */
.contenedor-glossy {
    animation: entradaSuave 0.8s ease-out;
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 60%, rgba(100, 100, 100, 0.2) 100%);
    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 25px;
    padding: 30px;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 10px 10px -5px rgba(255, 255, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 25px;
}

/* 3. DISEÑO DE COLUMNAS Y BLOQUES - VERSIÓN FINAL */
.ancho-total {
    width: 95%;
    max-width: 1800px;
    margin: 40px auto;
    border: 2px solid #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.caja-marquesina {
    border: 2px solid #ff5e00; 
    box-shadow: 0 0 15px rgba(255, 94, 0, 0.3);
    margin: 20px auto !important;
    padding: 10px;
    overflow: visible !important; 
    background: rgba(0, 0, 0, 0.2); 
    display: block !important; /* Forzamos que se comporte como bloque */
    position: relative !important;
    z-index: 999; 
}

.marquee-container {
    width: 100%;
    overflow: hidden; /* Corta lo que sale de la caja */
    white-space: nowrap; /* Obliga a los blinkies a estar en una sola fila */
    position: relative;
    height: 45px;
}

.animacion-blinkies {
    display: inline-block;
    padding-left: 100%; /* Empieza fuera de la pantalla */
    animation: movimientoInfinito 120s linear infinite;
}

.animacion-blinkies img {
    margin-right: 15px;
    vertical-align: middle;
}

/* La magia del movimiento */
@keyframes movimientoInfinito {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Forzamos que la caja naranja no bloquee nada */
.caja-marquesina {
    pointer-events: auto !important;
    z-index: 10;
}

.layout-principal {
    display: flex !important;
    flex-direction: row; /* Columna Izquierda primero, Derecha después */
    gap: 25px;
    width: 95%;
    max-width: 1800px;
    margin: 0 auto;
    align-items: flex-start;
}

.columna-izquierda {
    flex: 0 0 320px !important;
    width: 320px !important;
    order: 1; /* Fuerza a estar a la izquierda */
}

.columna-derecha {
    flex: 1 !important;
    order: 2; /* Fuerza a estar a la derecha */
}

/* IMPORTANTE: En PC, el contenido SIEMPRE se ve */
@media (min-width: 769px) {
    .hidden-mobile { display: block !important; }
    .mobile-only-button { display: none !important; }
}

/* 4. COLORES DE BORDES ESPECÍFICOS */
.clase-verde { 
    border: 2px solid #a6ff00 !important;
    box-shadow: 0 0 15px rgba(166, 255, 0, 0.3) !important;
}

.clase-morada { 
    border: 2px solid #bc00ff !important;
    box-shadow: 0 0 15px rgba(188, 0, 255, 0.3) !important;
}

.clase-amarilla { 
    border: 2px solid #ffea00 !important;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.3) !important;
}

.clase-azul { 
    border: 2px solid #00e5ff !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
}

.clase-roja { 
    border: 2px solid #ff3131 !important;
    box-shadow: 0 0 15px rgba(255, 49, 49, 0.3) !important;
}

/* 5. ENLACES GENERALES (Efecto Neón Intenso) */
a {
    color: #00e5ff;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    padding: 3px 8px; /* Un poco más de espacio para el cuadro */
    border-radius: 6px;
    display: inline-block;
    position: relative;
}


/* Solo aplica este estilo a los enlaces que NO sean del menú */
a:not(.menu-item):hover {
    background: rgba(0, 229, 255, 0.25); 
    box-shadow:  
        0 0 10px rgba(0, 229, 255, 0.6),  
        0 0 20px rgba(0, 229, 255, 0.4),
        inset 0 0 12px rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-shadow:  
        0 0 5px #fff,  
        0 0 10px #00e5ff,  
        0 0 15px #00e5ff;  
    transform: scale(1.08) translateY(-1px);
}

/* 6. ESTRUCTURA DE GALERÍA */
.galeria-grid {
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 20px;
    padding: 20px 0;
    width: 100%;
}

.item-galeria {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    height: 300px; 
}

.item-galeria img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block;
    transition: transform 0.5s ease;
    cursor: zoom-in;
}

.item-galeria:hover img {
    transform: scale(1.1);
}

.info-tag {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 8px;
    text-align: center;
    backdrop-filter: blur(5px);
    z-index: 5;
}


/* 7. ESTILO DEL VISUALIZADOR TIPO WIKI (Única versión) */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 99999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 85vw;
    max-width: 1000px;
    height: 85vh;
    
    background-color: rgba(15, 15, 15, 0.98); 
    backdrop-filter: blur(10px);
    border: 2px solid #ffea00;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 234, 0, 0.2);
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    
    opacity: 0; /* Empieza invisible */
    transition: opacity 0.4s ease-in-out;
}

/* LA CLAVE: Esto hace que el visualizador aparezca */
.lightbox.activo {
    display: flex !important;
    opacity: 1 !important;
}

.lightbox-contenido {
    max-width: 90%;
    max-height: 70vh; 
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid rgba(255, 234, 0, 0.3);
}

/* Botón cerrar */
.cerrar {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #ffea00;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 100001;
}

.cerrar:hover {
    transform: scale(1.2);
    color: #ffffff;
    text-shadow: 0 0 15px #ffea00;
}

/* FLECHAS DE NAVEGACIÓN (Estilo Wiki Neón) */
.flecha-izq, .flecha-der {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffea00;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
    padding: 20px;
    user-select: none;
    transition: 0.3s;
    z-index: 100000;
    background: none; /* Quitamos el fondo negro circular */
    border: none;
}

.flecha-izq { left: 20px; }
.flecha-der { right: 20px; }

.flecha-izq:hover, .flecha-der:hover {
    color: white;
    text-shadow: 0 0 20px #ffea00;
    transform: translateY(-50%) scale(1.2);
}

/* Info de pie de foto y contador */
#caption {
    color: white;
    margin-top: 20px;
    font-family: 'Segoe UI', sans-serif;
    text-align: center;
    font-size: 1.2em;
}

#contador-lightbox {
    color: #ffea00;
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 8. CRÉDITOS DE ARTISTA */
.info-tag a.link-artista {
    color: #ffea00;
    text-decoration: none;
    font-weight: bold;
    display: inline;
    transition: all 0.2s ease;
}

.info-tag a.link-artista:hover {
    text-shadow: 0 0 8px #ffea00;
    text-decoration: underline;
    color: #ffffff;
}




/* 9. RESPONSIVE FINAL */
@media (max-width: 768px) {
    .layout-principal { 
        flex-direction: column !important; 
    }
    .columna-izquierda, .columna-derecha { 
        width: 100% !important; 
        order: unset; 
    }

    .menu-container {
        grid-template-columns: repeat(2, 1fr) !important; /* Pares en móvil */
    }

    .mobile-only-button {
        display: flex !important;
        position: fixed;
        top: 20%;
        right: 15px;
        width: 50px;
        height: 50px;
        background: #a349a4;
        color: white;
        border-radius: 50%;
        border: 2px solid white;
        z-index: 9999; /* Por encima del panel lateral */
        justify-content: center;
        align-items: center;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    
    #overlay-pantalla {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Negro suave al 50% */
        z-index: 9997; /* Justo debajo del panel */
        display: none; /* Escondido por defecto */
        backdrop-filter: blur(3px); /* Un ligero desenfoque a la página de fondo */
    }

    /* Clase para mostrar el overlay */
    .overlay-activo {
        display: block !important;
    }
    
    .hidden-mobile {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%; 
        width: 85%;    
        height: 100vh; 
        
        /* FONDO */
        background-image: url('https://mycozylittlecorner.neocities.org/backgrounds/HD-purple-wallpaper-image-to-use-as-background-112.jpg'); !important;
        background-attachment: scroll !important; /* Cambiamos fixed por scroll */
        background-position: center;
        background-size: cover;
        background-color: #551e6e; /* Color de respaldo por si la imagen tarda en cargar */
        
        /* Añadimos este filtro para que el contenido sea más legible al abrirlo */
        background-blend-mode: overlay; 
        background-color: rgba(0, 0, 0, 0.2); /* Oscurece un pelín el fondo solo en el menú */
        
        z-index: 9998;
        padding: 60px 20px 20px 20px;
        overflow-y: auto;
        transition: right 0.4s ease-in-out;
        box-shadow: -10px 0 20px rgba(0,0,0,0.2);
    }
    
    .show-content {
        right: 0 !important;
    }
}

/* ============================================================
    10. MENÚ AERO VISTA - VERSIÓN FINAL CORREGIDA
   ============================================================ */
.menu-container {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr); /* 8 iconos por fila en PC */
    gap: 15px;
    padding: 20px;
    justify-items: center;
}

/* El enlace base */
.columna-derecha .menu-item {
    text-decoration: none !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    width: 140px;
    transition: transform 0.25s ease-in-out;
    padding: 0 !important;
    z-index: 1;
}

/* El contenedor del marco */
.menu-item .marco-aero {
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; 
    background: none !important;
    z-index: 10;
    padding: 12px; /* Espacio interno para que nada toque el metal */
}

/* EL CRISTAL (CAPA SUPERIOR) */
.menu-item .marco-aero::after {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://files.catbox.moe/5birc0.png') no-repeat center center !important;
    background-size: 100% 100% !important;
    z-index: 999 !important; 
    pointer-events: none !important;
}

/* EL CONTENIDO (CAPA INTERIOR): Vestido y Texto */
.menu-item .marco-aero img, 
.menu-item .marco-aero span {
    position: relative !important;
    z-index: 50 !important; 
}

/* --- ESTADO HOVER --- */
.columna-derecha .menu-item:hover {
    transform: scale(1.1) !important; 
    z-index: 1000;
}

/* Iconos: Ajustados para dejar espacio al texto largo */
.menu-item img {
    width: 55px; /* Reducido ligeramente para ganar espacio vertical */
    height: 55px;
    object-fit: contain;
    margin-bottom: 2px;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6));
}

/* Texto: Optimización para nombres largos (Hats, etc.) */
.menu-item span {
    font-size: 11px; /* Tamaño ligeramente menor para que quepan más palabras */
    color: #00e5ff; 
    font-weight: bold;
    text-align: center;
    line-height: 1.0; /* Interlineado compacto */
    text-shadow: 2px 2px 3px rgba(0,0,0,1);
    display: block;
    width: 110px; /* Ancho fijo para forzar el salto de línea dentro del cristal */
    word-wrap: break-word; /* Rompe palabras si es necesario */
    overflow: hidden;
}

/* --- ESTILO CHANGELOG - VERSIÓN FINAL --- */

.changelog-container {
    margin-top: 25px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 15px !important;
}

.changelog-titulo {
    color: #ffea00 !important;
    margin-bottom: 15px !important;
    border-bottom: 2px inset rgba(255, 255, 255, 0.2) !important;
    padding-bottom: 5px !important;
    text-transform: uppercase !important;
}

.changelog-lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* ESTILO BASE PARA TODOS LOS ITEMS (La "Cajita") */
.changelog-item {
    padding: 10px 10px 10px 15px !important;
    border-radius: 4px 10px 10px 4px !important;
    display: block !important;
}

.changelog-item span {
    font-size: 0.9em !important;
    font-weight: bold !important;
    display: block !important;
    margin-bottom: 3px !important;
}

.changelog-item p {
    margin: 0 !important;
    font-size: 0.95em !important;
    color: #ffffff !important;
}

/* COLOR PARA LA MÁS RECIENTE (AZUL) */
.changelog-item.reciente {
    border-left: 4px solid #00e5ff !important;
    background: rgba(0, 229, 255, 0.1) !important;
}
.changelog-item.reciente span {
    color: #00e5ff !important;
}

/* COLOR PARA LAS VIEJAS (GRIS TRASLÚCIDO) */
.changelog-item.viejas {
    border-left: 4px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.changelog-item.viejas span {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* --- ESTILO CALENDARIO GADGET --- */

.calendario-aero {
    padding: 15px !important;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.calendario-header {
    background: rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    justify-content: space-around;
    text-shadow: 0 0 5px #00e5ff;
}

.calendario-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.calendario-tabla th {
    color: #00e5ff;
    padding-bottom: 8px;
    font-size: 0.8em;
}

.calendario-tabla td {
    padding: 5px;
    color: #f0f0f0;
    transition: all 0.2s;
    border-radius: 4px;
    cursor: default;
}

/* Efecto al pasar el mouse por los días */
.calendario-tabla td:hover:not(:empty) {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    color: #ffffff;
}

/* Resaltado del día actual */
.calendario-tabla td.hoy {
    background: rgba(255, 234, 0, 0.3) !important;
    color: #ffea00 !important;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
    outline: 1px solid #ffea00;
}

.calendario-tabla th:first-child { color: #ff3131; }
.calendario-tabla th:last-child { color: #ff3131; }

/* Color para los Domingos (Columna 1) */
.calendario-tabla td:nth-child(1) {
    color: #ff3131 !important; /* Rojo */
    font-weight: bold;
}

/* Color para los Sábados (Columna 7) */
.calendario-tabla td:nth-child(7) {
    color: #ff3131 !important; /* Cian */
    font-weight: bold;
}

/* Ajuste para que el texto de los días Sun, Mon, etc., se vea mejor */
.calendario-tabla th {
    color: #00e5ff;
    padding-bottom: 8px;
    font-size: 0.85em; 
    text-shadow: 0 0 3px rgba(0, 229, 255, 0.5);
}

/* Asegura que el día "hoy" siempre gane al color rojo del domingo */
.calendario-tabla td.hoy {
    background: rgba(255, 234, 0, 0.3) !important;
    color: #ffea00 !important;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
    outline: 1px solid #ffea00;
    z-index: 10;
}