/* General */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex; /* Corrección de "fle" a "flex" */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    position: relative; /* Cambiado para evitar problemas con la posición absoluta */
    font-family: sans-serif;
    background-color: #ffffff;
   
    transform: scale(0.58); /* Escala correctamente */
    transform-origin: center;
    margin: 0; /* Elimina márgenes predeterminados */
    padding: 0; /* Elimina padding predeterminado */
    max-height: 95vh;  /* No exceder la altura del viewport */
    overflow: hidden;
 

  
}/* Animación de Fade In */
/* Animación de Fade In y Acercamiento */
@keyframes fadeIn {
    from {
        background-color: #000000;
        opacity: 0;
     
    }
    to {
        opacity: 1;
        background-color: #2c2c2c;
    }
}

/* Aplicar la animación al cargar la página */
body {
    animation: fadeIn 4s ease-in-out forwards;
}


#animationCanvas { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 1080px;
    z-index: 20;
}

#animationCanvas {
    opacity: 0;              /* Inicia con el canvas completamente transparente */
    transition: opacity 1s ease-in-out;  /* Transición suave de la opacidad en 2 segundos */
}

.body-visible #animationCanvas {
    opacity: 1;              /* Estado final con el canvas completamente visible */
}


/* Botón Anterior y Siguiente */
#prev-btn, #next-btn {
    cursor: pointer;
    background: none;               
    border: none;                   
    border-radius: 20px;            
    z-index: 30;
    padding: 0;                     
    position: relative; /* Necesario para que ::after se posicione correctamente */
}

/* Efecto de Resaltado */
#next-btn.resaltado::after {
    content: "";
    position: absolute;    /* Importante para posicionar ::after */
    top: -12px;                /* Coincide con el botón */
    left: -12px;               /* Coincide con el botón */
    width: 120%;           /* Ocupa todo el botón */
    height: 120%;          
    background-color: rgba(253, 132, 225, 0.28) !important;
    pointer-events: none;  /* No bloquear clics */
    border-radius: 20px;   /* Esquinas redondeadas */
    z-index: 800;          /* Aparece encima */
}

/* Imagen dentro del botón */
#prev-btn img, #next-btn img {
    width: 100%;                    
    height: auto;                   
    display: block;                 
}

/* Cambio de Imagen al Presionar */
#prev-btn:active img {
    content: url("Assets/Images/flecha1oprimida.png"); 
}

#next-btn:active img {
    content: url("Assets/Images/flecha2oprimida.png"); 
}

/* Efecto de Escalado */
#next-btn img:hover {
    transform: scale(1.1); 
    transition: transform 0.3s ease; 
}
#prev-btn:active img {
    content: url("Assets/Images/flecha1oprimida.png");  /* Imagen alternativa */
}

#next-btn:active img {
    content: url("Assets/Images/flecha2oprimida.png");  /* Imagen alternativa */
}

/* Estilo base para el botón */
#next-btn {
    position: relative;
    display: inline-block;
}

 Superposición amarilla al resaltar 
#next-btn.resaltado::after {
    content: "";
    background-color: rgba(233, 152, 172, 0.527) !important;
    top: 10px;
    left: 550px;
    z-index: 800;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* No bloquear clics */
    border-radius:20px;    /* Opcional: esquinas redondeadas */
} 


/* Efecto de escalado con animación */
@keyframes resaltarAnimacion {
    0%, 100% {
        transform: scale(1);
        left: 550px;
        z-index: 500;
        
    }
    50% {
        transform: scale(1.8);
        left: 550px;
        z-index: 500;
        
    }
}

#next-btn.animado {
    animation: resaltarAnimacion 0.5s ease-in-out 3 alternate;
    background-color: #007bff00;
}

#prev-btn:hover img, #next-btn:hover img {
    transform: scale(1.2); /* Agranda la imagen al pasar el mouse */
    background-color: #007bff00;
}
/*
#info-square {
    

        /* Frame 85 
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 14px 29px;
    gap: 10px;

    position: absolute;
    width: 1176px;
    height: 100px;
    left: 1px;
    top: 50px;

    background: #FFFFFF;
    border-radius: 15px;


    /* Ahora, sostén el clic sobre el nuevo gato 

    width: 1118px;
    height: 69px;

    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-size: 60px;
    line-height: 69px;
    identical to box height */



    /* Inside auto layout 
    flex: none;
    order: 0;
    flex-grow: 0;

}*//* Contenedor de la interfaz */
#ui-overlay {
    position: fixed;  /* Superposición fija */
    width: 100%;
    min-width: 1100px; /* Ancho máximo permitido */
    /* transform: translateX(-200px);  <-- Remove transform here */
    height: 100%;
    pointer-events: none;  /* Solo botones permiten clics */
    z-index: 30; /* Superpuesto al canvas */
    max-width: 1400px;   /* Ancho máximo permitido */
    height: 600px;   /* Altura máxima permitida */
}

/* Estilo base para los botones */
#ui-overlay button {
    position: fixed;
    pointer-events: auto; /* Habilitar clics */
    font-size: 16px;
    border: none;
    padding: 5px;;
    border-left: 500px;
    cursor: pointer;
    z-index: 40; /* Asegura superposición */
}

button {
    background-color: #007bff00; /* Color de fondo */
    color: rgba(255, 255, 255, 0);              /* Color del texto */
    border: none;              /* Sin borde */
    padding: 10px 20px;        /* Espaciado interno */
    font-size: 16px;           /* Tamaño de fuente */
    border-radius: 5px;        /* Esquinas redondeadas */
    cursor: pointer;           /* Cursor al pasar el mouse */
    transition: background-color 0.3s ease; /* Animación suave */
}

/* Botón de sonido */
#sound-toggle-button {
      /* Ajuste vertical */

    top: -170px;    /* Ajuste vertical */
    left: 85%;     /* Ajuste horizontal */
    width: 40px;  /* Ancho original */
    height: 50px; /* Alto original */
}
#credits-button {
         /* Ajuste vertical */
    top: -170px;    /* Ajuste vertical */
    left: 58%;    /* Ajuste horizontal */
    width: 40px;  /* Ancho original */
    height: 50px; /* Alto original */
}

/* Botón de Home */
#home-button {
    top: -170px;    /* Ajuste vertical */    
    left: 65%;    /* Ajuste horizontal */
    width: 50px;  /* Ancho original */
    height: 50px; /* Alto original */
    transition: transform 0.3s ease;
}

/* Posición del botón home cuando se muestran los juegos */
#home-button.games-active {
    transform: translateX(-300px);
}

/* Botón de Pantalla Completa */
#fullscreen-button {
    top: -170px;    /* Ajuste vertical */
    left: 75%;    /* Ajuste horizontal */
    width: 50px;  /* Ancho original */
    height: 50px; /* Alto original */
}

/* Botón de Reiniciar Escena */
#restart-button {
    top: -170px;    /* Ajuste vertical */
    left: 55%;    /* Ajuste horizontal */
    width: 50px;  /* Ancho original */
    height: 50px; /* Alto original */
}

#start-button {
    width: 40px;
    position: fixed;
    bottom: 0px;
    left: 43%;
    height: 80px;
    pointer-events: auto;
    z-index: 999;
    margin-right: 500px; /* Ajusta este valor para moverlo a la izquierda */
}
#watch-button {
    width: 80px;
    
    position: absolute;
    bottom: 0px;
    left: 60%;
    height: 80px;
    pointer-events: auto;
    z-index: 999;
   
}
#play-button {
    
    width: 80px;
    position: absolute;
    bottom: 0px;
    left: 79%;
    height: 80px;
    pointer-events: auto;
    z-index: 999;
   
}
/* Efectos al pasar el mouse */
#ui-overlay button:hover {
    transform: scale(1.1); /* Agrandar ligeramente */
    
}






/* Book */
.book {
    
    width: 955px;
    height: 1075px;
    position: relative;
    transition: transform 2s ease-in-out;
    box-shadow: #2c2c2c;
    
    
    
}
.zoom-out {
    transform: scale(0.4); /* Reduce el tamaño del libro a muy pequeño */
}

.zoom-in {
    transform: scale(1); /* Devuelve el libro a su tamaño original */
}

.paper {
    height: 100%;
    min-width: 955px;
    min-height: 1075px;;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    perspective: 1500px;
    z-index: 0;

}

.front {
    backface-visibility: hidden;
    border-left: 3px solid #ffffff;
   
}

.front, 
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(160, 143, 143);
    transform-origin: left;
    transition: transform 0.5s;

}

.front {
    z-index: 1;
}

.back {
    z-index: 0;
}

.front-content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.back-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.back-content {
    transform: rotateY(180deg)
}
.parrafonormal-content {
    display: flex; /* Establece el modelo Flexbox para el contenedor */
    align-items: stretch; /* Hace que los elementos se estiren para llenar el contenedor en la dirección transversal */
    text-align: justify;
    font-size: 15pt;
}
.content {
    display: flex; /* Establece el modelo Flexbox para el contenedor */
    align-items: stretch; /* Hace que los elementos se estiren para llenar el contenedor en la dirección transversal */
    text-align: justify;
    font-size: 15pt;
}

.column1, .column2 {
    flex-basis: 50%; /* Asigna a cada columna la mitad del espacio disponible */
    padding: 10px; /* Opcional: añade algo de padding dentro de las columnas */
}

/* Paper Flipped */
.flipped .front,
.flipped .back {
    transform: rotateY(-180deg)
}

/* Paper Z-index */
#p1 {
    z-index: 3;
}

#p2 {
    z-index: 2;
}

#p3 {
    z-index: 1;
}

/* Customization */

.book-title {
    font-size: 7em;
    margin-bottom: 40px;
}

.cover-img {
    width: 200px;
    height: 270px;
    object-fit: cover;
    border-radius: 30px;
}

#b1 {
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    justify-content: space-around;
}

#b1 h2 {
    font-size: 2em;
    margin-top: 10px;
    margin-bottom: 20px;
}

#b1 p {
    margin-bottom: 20px;
}
.fade-toggle {
    transition: opacity 0.5s ease;
}
/* Efectos de fade */
.fade-effect {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.body-visible {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.transition-start {
    transform: scale(1.1);
    
    transition: transform 0.4s ease-in, filter 0.4s ease-in;
}

.transition-end {
    transform: scale(1);
    filter: brightness(100%);
    transition: transform 0.4s ease-out, filter 0.4s ease-out;

    
} 


/* Por defecto para pantallas grandes (>= 1600px) */
@media screen and (min-width: 1600px) {
    body {
        transform: scale(1);
        margin-top: 100px;
        transform-origin: top center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
     body.escena-inicial .paper[data-scene="PreloadScene"] {
        transform: scale(1.2);
        transition: transform 0.8s ease;
    }
    
    body.preload-active #ui-overlay {
        margin-left: -550px !important;
        margin-top: 100px !important;
        transform: scale(1.2) !important;
        transition: transform 0.6s ease, margin 0.6s ease;
    }

}

@media screen and (min-width: 1200px) and (max-width: 1599px) {
    body {
        margin-left: auto;
        margin-top: 200px;
        transform: scale(0.58);
        transform-origin: top center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.escena-inicial .paper[data-scene="PreloadScene"] {
        transform: scale(1.2);
        transition: transform 0.8s ease;
    }

    body.preload-active #ui-overlay {
        margin-left: -500px !important;
        margin-top: 100px !important;
        transform: scale(1.2) !important;
        transition: transform 0.6s ease, margin 0.6s ease;
    }
}

/* Pantallas pequeñas como tablets horizontales (>= 800px y < 1200px) */
@media screen and (min-width: 800px) and (max-width: 1199px) {
    body {
        margin-top: 115px;
        transform: scale(0.30);
        transform-origin: top center;
        

    }
     body.escena-inicial .paper[data-scene="PreloadScene"] {
        transform: scale(1.2);
        transition: transform 0.8s ease;
    }
    
    body.preload-active #ui-overlay {
        margin-left: -500px !important;
        margin-top: 100px !important;
        transform: scale(1.2) !important;
        transition: transform 0.6s ease, margin 0.6s ease;
    }
}


/* Tablets verticales o teléfonos grandes (>= 600px y < 800px) */
@media screen and (min-width: 600px) and (max-width: 799px) {
    body {
       
        margin-top: 100px;
        transform: scale(0.38);
        transform-origin: top center;

    }
    body.escena-inicial .paper[data-scene="PreloadScene"] {
        transform: scale(1.2);
        transition: transform 0.8s ease;
    }
    
    body.preload-active #ui-overlay {
        margin-left: -250px !important;
        margin-top: 100px !important;
        transform: scale(1.2) !important;
        transition: transform 0.6s ease, margin 0.6s ease;
    }
}

/* Celulares normales (< 600px) */
@media screen and (max-width: 599px) {

    body.preload-active .paper[data-scene="PreloadScene"] {
        transform: scale(1.2);
        margin-left: -50px;
        transition: transform 0.5s ease;
    }
    body {
        margin-top: 275px;
        transform: scale(0.22);
        transform-origin: top center;
        
    }
    #prev-btn, #next-btn {
        
        translate:  y(90px);
        margin-left: -50px;
        margin-top: 1100px;
        transform: scale(5.5);
    }
   
    .book {
        margin-left: -210px;
        
    }
    .paper {
        transform: scale(0.85);
    }
   
    

    .escena-inicial {
        transform: scale(1.2);
        margin-left: -20px;
        transition: transform 0.6s ease;
    }
    body.escena-inicial .paper[data-scene="PreloadScene"] {
        transform: scale(1.2);
        transition: transform 0.8s ease;
        margin-left: -50px;
    }
    
    body.preload-active #ui-overlay {
        margin-left: -500px !important;
        margin-top: 100px !important;
        transform: scale(1.4) !important;
        transition: transform 0.6s ease, margin 0.6s ease;
    }

   
  
}

/* Contenedor de botones de juegos */
#game-buttons-container {
    position: fixed;
    top: 80%;
    left: 62.5%;
    transform: translate(-10%, -10%);
    z-index: 50;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#game-buttons-container.visible {
    opacity: 1;
}

/* Estilo base para los botones de juego */
.game-button {
    position: fixed;
    width: 180px;
    height: 70px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 20%;
    transform: translateX(-10%);
    opacity: 0;
    scale:3;
}

.game-button.visible {
    opacity: 1;
}

/* Posicionamiento específico para cada botón */
#juego1-button {
    top: calc(50% - 500px);
}

#juego2-button {
    top: calc(50% - 250px);
}

#juego3-button {
    top: calc(50% + 0px  );
}

#gameback-button {
    top: calc(140% );
    left: 100px;
    scale: 0.7;
}

.game-button:hover {
    transform: translateX(-50%) scale(1.05);
}

.game-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ajuste para pantallas pequeñas */
@media screen and (max-width: 599px) {
    .game-button {
        width: 150px;
        height: 60px;
    }
}


/* Hide previous and next buttons throughout the games flow */
body.games-active #prev-btn,
body.games-active #next-btn {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}