/* =========================================================
   ====================== PLANTA ALTA ======================
   ========================================================= */

.plano-container {
    display: grid;
    grid-template-rows: 11fr 2fr 10fr;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 27 / 24;
    background-color: #590661;
    border-left: 0.25rem solid gold;
    border-right: 0.25rem solid gold;
}

.columna {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

.col-izquierda, .pasillo-central, .col-derecha {
    border-top: 0.25rem solid gold;
    border-bottom: 0.25rem solid gold;
}

.pasillo-central {
    background-color: #590661;
}

.sala {
    background-color: #590661;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    color: gold;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------------- FILA SUPERIOR ---------------- */
.vacio-izquierda {
    flex: 140;
}

.sala-8 {
    flex: 105;
    border-left: 0.25rem solid gold;
}

.sala-9 {
    flex: 65;
    border-left: 0.25rem solid gold;
    border-right: 0.25rem solid gold;
}

.vacio-derecha {
    flex: 365;
}

/* ---------------- FILA INFERIOR ---------------- */
.sala-1 {
    border-left: 0.25rem solid gold;
}

.sala-2 {
    flex: 160;
}

.sala-6 {
    flex: 75;
}

.sala-7 {
    flex: 85;
}

.sala-1, .sala-3, .sala-4, .sala-5 {
    flex: 65;
}

.sala-3, .sala-4, .sala-5, .sala-6, .sala-7 {
    border-right: 0.25rem solid gold;
}

.contenedor-escalera {
    flex: 95;
    border-right: 0.25rem solid gold;
    display: grid;
    grid-template-rows: 6fr;
    background-color: #590661;
}

.lineas-escalera {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lineas-escalera span {
    flex: 1;
    border-bottom: 0.125rem solid gold;
    display: flex;
    justify-content: center;
    align-items: center;
    color: gold;
    text-align: center;
    font-weight: bold;
}

.lineas-escalera span:last-child {
    border-bottom: none;
}

/* =========================================================
   ====================== PLANTA BAJA ======================
   ========================================================= */
.plano-bajo-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.35;
    background: #111;
    overflow: hidden;
}

/* Estilo común de las salas */
.plano-bajo-container .sala {
    position: absolute;
    border: 2px solid gold;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    color: gold;
    font-size: clamp(0.7rem, 1vw, 1rem);
}

/* ----------------- FILA 1 (ABAJO) ----------------- */

.baja-patio-d {
    left: 0%;
    top: 85%;
    width: 100%;
    height: 15%;
}

/* ---------------------- FILA 2 ---------------------- */

/* Auditorio + escenario integrados */
.baja-auditorio {
    left: 0%;
    top: 60%;
    width: 40%;
    height: 25%;
}

/* Escenario dentro del auditorio */
.escenario-interior {
    position: absolute;
    left: 0;
    top: 0;
    width: 23%;
    height: 100%;
    border-right: 2px dashed gold;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 215, 0, 0.05);
    font-size: 0.8em;
}

.auditorio-texto {
    margin-left: 3rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Información */
.baja-informacion {
    left: 40%;
    top: 60%;
    width: 20%;
    height: 25%;
}

/* Entrada (ocupa fila 2 y 3) */
.baja-entrada {
    left: 60%;
    top: 50%;
    width: 20%;
    height: 35%;
}

/* Sala de exposiciones */
.baja-exposiciones {
    left: 80%;
    top: 50%;
    width: 20%;
    height: 35%;
}

/* ---------------------- FILA 3 ---------------------- */

/* Pasillo */
.baja-pasillo {
    position: absolute;
    left: 0%;
    top: 40%;
    width: 90%;
    height: 20%;
}

/* Texto superior */
.baja-pasillo span:first-of-type {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Texto inferior */
.baja-pasillo span:last-of-type {
    position: absolute;
    top: 75%;
    left: 35%;
    transform: translate(-50%, -50%);
}

/* Línea central */
.linea-divisoria-pasillo {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: gold;
    transform: translateY(-50%);
}

/* ---------------------- FILA 4 ---------------------- */

.vacio-camerinos {
    top: 20%;
    width: 22%;
    height: 20%;
}

/* Aseos */
.baja-aseos {
    left: 22%;
    top: 20%;
    width: 38%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid gold;
    border-bottom: 2px solid gold;
    flex-direction: column;
    gap: 1rem;
}

/* Escalera */
.baja-escalera {
    position: absolute;
    left: 60%;
    top: 20%;
    width: 10%;
    height: 20%;
    background-color: #590661;
    border-left: 0.15rem solid gold;
    border-right: 0.15rem solid gold;
    padding: 0 !important;
}

/* Contenedor interno de peldaños */
.lineas-escalera-baja {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Peldaños */
.lineas-escalera-baja span {
    flex: 1 1 0;
    width: 100%;
    border-bottom: 0.12rem solid gold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ultimo sin borde */
.lineas-escalera-baja span:last-child {
    border-bottom: none;
}

/* Ascensor */
.baja-ascensor {
    position: absolute;
    left: 70%;
    top: 20%;
    width: 10%;
    height: 20%;
    background-color: #590661;
    border-left: 0.15rem solid gold;
    border-right: 0.15rem solid gold;
    padding: 0 !important;
}

/* Cafetería */
.baja-cafeteria {
    left: 80%;
    top: 20%;
    width: 20%;
    height: 30%;
}

/* ----------------- FILA 5 (ARRIBA) ----------------- */

.baja-patio-t {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 20%;
}

/* ------------- ILUMINACIÓN INTERACTIVA ------------- */

.plano-container .sala.highlight {
    background-color: gold !important;
    color: #000000 !important;
    box-shadow: inset 0 0 1rem rgba(255, 255, 255, 1);
    animation: parpadeo-sala-interactiva 0.4s infinite alternate;
}

@keyframes parpadeo-sala-interactiva {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.25);
    }
}

/* ----------- CAPAS DE INTERFAZ MUTABLES ------------ */

.map-overlay {
    position: fixed;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.75);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Feedback de que pulsar en cualquier lado cierra el mapa */
}

.map-modal-content {
    background-color: #590661;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 0.25rem solid gold;
    position: relative;
    box-shadow: 0 0.75rem 2.2rem rgba(0, 0, 0, 0.5);
}

.map-title-popup {
    color: gold;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 0.05rem;
}

/* ==========================================================================
   PLANO PLANTA BAJA (FORMATO DE DIVISIONES ABSOLUTAS)
   ========================================================================== */

/* Clases de iluminación para el script interactivo */
.plano-bajo-container .sala.highlight {
    background-color: gold !important;
    color: #590661 !important;
    box-shadow: inset 0 0 1rem rgba(255, 255, 255, 1);
    animation: parpadeo-sala-interactiva 0.4s infinite alternate;
}

/* ==========================================================================
   MEDIA QUERIES COMPLETAMENTE PROPORCIONALES (SIN MÁXIMOS EN PX)
   ========================================================================== */

/* DISPOSITIVOS MÓVILES / TABLETS (Hasta 992px) */
@media (max-width: 992px) {
    .map-overlay.mobile-active {
        display: flex;
    }

    /* El contenedor escala de forma mayoritaria cubriendo el 85% del ancho de pantalla */
    .map-modal-content {
        width: 85vw;
    }

    .tarjeta-interactiva {
        cursor: pointer;
        position: relative;
    }

    .tarjeta-interactiva::after {
        content: "📍 Ver mapa";
        position: absolute;
        bottom: 0.4rem;
        right: 0.75rem;
        font-size: 0.7rem;
        color: gold;
        font-weight: bold;
        opacity: 0.8;
    }
}

/* MONITORES Y PC (A partir de 993px) */
@media (min-width: 993px) {
    .map-overlay {
        display: block;
        position: fixed;
        top: 50%;
        right: 3vw;

        /* Separación lateral adaptativa */
        transform: translateY(-50%);
        left: auto;
        bottom: auto;

        /* Proporción mayoritaria del 45% de la anchura total de la pantalla del PC */
        width: 45vw;

        height: auto;
        background: none;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .map-overlay.desktop-active {
        opacity: 1;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .map-modal-content {
        width: 100%;
        padding: 1.25rem;
    }

    .tarjeta-interactiva {
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .tarjeta-interactiva:hover {
        transform: translateY(-0.125rem);
        box-shadow: 0 0.375rem 1rem rgba(125, 9, 136, 0.35);
    }
}