/* ================= */
/* == I M P O R T == */
/* ================= */

@import url(fuentes.css);
@import url(reset.css);
@import url(zonaClicks.css);
@import url(capaEfectos.css);
@import url(visualizadorCuentos.css);


/* ===================== */
/* == E L E M E N T O == */
/* ===================== */

/* == CONTENEDOR PRINCIPAL (LA VENTANA) == */
.ventana {
    width: 800px;  
    height: 800px; 

    position: relative;
    overflow: hidden; 
    
    background-color: #1a1a1a;
    
    border: 14px solid #111111; 
    border-radius: 6px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.7), 
                inset 0 0 30px rgba(0,0,0,0.9); 
    
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}


/*== ARQUITECTURA DE MÓDULOS (PANTALLAS) == */
/* Por defecto, ocultas, desde js llamo a la que toque */
.pantalla-modulo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    position: absolute;

    display: none; 
}

.pantalla-modulo.activa {
    display: block;
}

#video-transicion, .modulo-detalle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* EFECTO PARALLAX INTERIOR (MÓDULO HABITACIÓN) == */
.habitacion {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 800px;

    position: relative;
}


.capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    object-fit: contain;
    
    /* VALORES INICIALES SEGUROS: Nace visible y en el centro */
    opacity: 1 !important; 
    display: block !important;
    
    /* Posición neutra inicial (Carga inicial estática estricta) */
    transform: translate3d(0, 0, 0); 
}

/* Profundidades 3D reales en el eje Z */
.capa-paisaje     { transform: translateZ(0px); }
.capa-base        { transform: translateZ(15px); }
.capa-posterTartalow   { transform: translateZ(16px); }
.capa-estanteria   { transform: translateZ(25px); }
.capa-escritorio   { transform: translateZ(35px); }
.capa-ordenador   { transform: translateZ(35px); }
.capa-peluche     { transform: translateZ(45px); }
.capa-album       { transform: translateZ(60px); }

.capa-primerPlano { 
    transform: translateZ(100px); 
    filter: blur(1px); 
}

/* Contenedor del detalle del ordenador para poder posicionar cosas encima */
#pantalla-ordenador {
    position: relative;
}

/* El sistema operativo virtualizado */
.sistema-operativo-pc {
    position: absolute;
    top: 12%;
    left: 16%;
    width: 86%;
    height: 66%;
    background-color: #000;
    border: none;
    z-index: 5;
    transform: scale(0.8); /* Reduce TODO al 80% de su tamaño original */
    transform-origin: top left; 
}

/* Botón flotante para regresar a la habitación */
.boton-volver {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 100; /* Asegura que flote por encima del iframe y del render */
    
    background-color: #efb810;
    color: #2b1d16;
    border: none;
    padding: 10px 16px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.boton-volver:hover {
    background-color: #f7cf43;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

.boton-volver:active {
    transform: translateY(0);
}



/* Estilo para que las imágenes de detalle reaccionen al pasar el ratón */
.trigger-dialog {
    cursor: pointer;
    transition: filter 0.3s ease;
}

.trigger-dialog:hover {
    filter: brightness(1.08);
}





/* ESTILO DE LOS BOTONES DE PÁGINA */
.btn-pag {
    background-color: #5c4335;
    color: #f1e6d2;
    border: none;
    padding: 6px 14px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.1s ease;
}

.btn-pag:hover {
    background-color: #735443;
}

.btn-pag:active {
    transform: scale(0.95);
}

/* ============================= */
/* == EFECTOS HOVER ELEMENTOS == */
/* ============================= */

/* Creamos el efecto de iluminación/contorno usando drop-shadow encadenados */
.destacar-elemento {
    filter: 
        drop-shadow(2px 0px 0px #efb810) 
        drop-shadow(-2px 0px 0px #efb810) 
        drop-shadow(0px 2px 0px #efb810) 
        drop-shadow(0px -2px 0px #efb810)
        brightness(1.1); 
    
    transition: all 0.2s ease;
}