@font-face {
    font-family: 'Courier std'; /* Nombre que deseas asignar a tu fuente */
    src: url('fuentes/CourierStd.otf') format('opentype');
    /* Incluye otros formatos como .ttf si es necesario */
    font-weight: normal;
    font-style: normal;
}

.st29{
    font-family: "Courier std";
    /* transform: translateX(-0.3px); */
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

body{
    /* background: #F9E79F; */
    background-image: url('imagenes/fondo.jpg');
    background-color: #F9E79F;
    background-size: 120 100vh;
    background-position: center center; 
    background-repeat: no-repeat;
    overflow-x: hidden;
    overflow-y: hidden;
}

@media (max-width: 1250px) {
    body {
        background-size: 200vh; /* Ajusta la altura al 100% */
        overflow-x: hidden;
        overflow-y: hidden;
    }

    #Labs1{
        /* height: 90vh;  */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #mapa {
        display: flex;
        margin-top: -5vh;
        height: 100vh; /* Altura del viewport */
        margin-left: -1vw;
        transform-origin: center center;
        width: 100%;
        justify-content: center;
        align-items: center center;
        overflow: visible;
    }

    
}

.aulas01 {
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aulas01 svg {
    width: 98%;
}



.aulas02 {
    width: 100%;
    height: 70vh; 
    display: flex;
    justify-content: center;
    align-items: center;
}


.aulas04 {
    width: 100%;
    height: 70vh; 
    display: flex;
    justify-content: center;
    align-items: center;
}

#aulas04 {
    cursor: grab;
    user-select: none; /* Evita la selección de texto */
}

#aulas04.dragging {
    cursor: grabbing;
}

.aulas04 svg {
    width: 98%;
}

.aulas02 svg {
    width: 98%;
}


#Labs1 {
    cursor: grab;
    user-select: none; /* Evita la selección de texto */
}

.Labs1 {
    /* margin-top: 5vh; */
    width: 100%;
    height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
}

#Labs1.dragging {
    cursor: grabbing;
}


.Labs1 svg {
    width: 98%;

}

.Labs2 svg {
    width: 98%;
}
#aulas02 {
    cursor: grab;
    user-select: none; /* Evita la selección de texto */
}

#aulas02.dragging {
    cursor: grabbing;
}

.aulas03 {
    width: 100%;
    height: 70vh; 
    display: flex;
    justify-content: center;
    align-items: center;
}

#aulas03 {
    cursor: grab;
    user-select: none; /* Evita la selección de texto */
}

#aulas03.dragging {
    cursor: grabbing;
}

.aulas03 svg {
    width: 98%
}

.pesados {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pesados svg {
    width: 38%;
}

#pesados {
    cursor: grab;
    user-select: none; /* Evita la selección de texto */
}

#pesados.dragging {
    cursor: grabbing;
}


#aulas01 {
    cursor: grab;
    user-select: none; /* Evita la selección de texto */
}

#aulas01.dragging {
    cursor: grabbing;
}

#mapa.dragging {
    cursor: grabbing;
}

.mapa{
    display: flex;
        margin-top: -30vh;
        height: 130vh; /* Altura del viewport */
        margin-left: -3vw;
        transform-origin: center center;
        width: 100%;
        justify-content: center;
        align-items: center center;
        overflow: visible;
}
.mapa #Aulas1:hover,
    #Aulas2:hover,
    #Aulas3:hover,
    #Laboratorios:hover,
    #Epesados:hover, 
    /*.cls-43:hover,*/
    #Aulas4:hover{
    fill: #7e3b3b;
    cursor:pointer;
}

.mapa .cls-43{
    fill: #333333;
}


/* BOTONES EN ZOOM Y REGRESAR EDIFICIO CENTRAL*/
#backButton {
    position: absolute;
    top: 3vh;
    left: 1.5vw;
    border: none;
    background: none;
    cursor: pointer;
}

#backButton img {
    width: 80px;
    height: 80px;
}

#resetZoomButton {
    position: absolute;
    top: 3vh;
    right: 1.5vw;
    border: none;
    background: none;
    cursor: pointer;
}

#resetZoomButton img {
    width: 90px;
    height: 90px;
}

/* Media queries para pantallas más pequeñas (dispositivos móviles) */
@media (max-width: 600px) {
    #backButton img, #resetZoomButton img {
        width: 35px; /* Tamaño más pequeño para móviles */
        height: 35px;
    }

}

/* Clase para resaltar el texto */
.resaltado {
    font-size: 14px; /* Tamaño de la fuente */
    fill: black;
    text-anchor: middle; /* Alineación del texto */
    font-weight: bold; /* Peso de la fuente */
    stroke: rgb(227, 227, 227); /* Color del contorno */
    stroke-width: 0.2px; /* Ancho del contorno */
    
    paint-order: stroke fill;
    /* stroke: rgb(210, 210, 210); Color de resaltado */
    stroke-width: 3px; /* Ancho del resaltado */
}

.resaltadoP {
    font-size: 18px; /* Tamaño de la fuente */
    fill: black;
    text-anchor: middle; /* Alineación del texto */
    font-weight: bold; /* Peso de la fuente */
    stroke: rgb(200, 200, 200); /* Color del contorno */
    stroke-width: 0.1px; /* Ancho del contorno */
    
    paint-order: stroke fill;
    /* stroke: rgb(210, 210, 210); Color de resaltado */
    stroke-width: 3px; /* Ancho del resaltado */
}

.nombreEdP {
    font-size: 45px; /* Tamaño de la fuente */
    fill: rgb(255, 255, 255);
    text-anchor: middle; /* Alineación del texto */
    font-weight: bold; /* Peso de la fuente */
    
    stroke-width: 0px; /* Ancho del contorno */
    font-family: 'Bodoni MT', serif;
    paint-order: stroke fill;
    cursor:pointer;
    pointer-events: none; /* Evita que el texto responda a eventos del ratón */
}


  /* Clase para subrayar el texto */
.nombreMapa {
    font-size: 25px; /* Tamaño de la fuente */
    fill: black;
    text-anchor: middle; /* Alineación del texto */
    font-weight: bold; /* Peso de la fuente */
    stroke: rgb(227, 227, 227); /* Color del contorno */
    stroke-width: 0.2px; /* Ancho del contorno */
    font-family: 'Times New Roman', serif;
    paint-order: stroke fill;
    /* stroke: rgb(210, 210, 210); Color de resaltado */
    /* stroke-width: 1px; Ancho del resaltado
     */
cursor:pointer;
pointer-events: none; /* Evita que el texto responda a eventos del ratón */
}

.nombreEd {
    font-size: 36px; /* Tamaño de la fuente */
    fill: black;
    text-anchor: middle; /* Alineación del texto */
    font-weight: bold; /* Peso de la fuente */
    stroke: rgb(202, 202, 195); /* Color del contorno */
    stroke-width: 3px; /* Ancho del contorno */
    font-family: 'Bodoni MT', serif;
    paint-order: stroke fill;
    cursor:pointer;
    pointer-events: none; /* Evita que el texto responda a eventos del ratón */
}


/* Estilos CSS para aulas 4*/
#div1 {
    align-items: center;
    position: relative;
    top: 10vh; 
    font-size: 4vw; /* Tamaño de la fuente */
    fill: black;
    text-anchor: middle; /* Alineación del texto */
    font-weight: bold; /* Peso de la fuente */
    font-family: 'Times New Roman', serif;
    paint-order: stroke fill;
    text-align: center; /* Alineación horizontal del contenido */
    letter-spacing: 2px; 
    cursor:pointer;
    pointer-events: none; /* Evita que el texto responda a eventos del ratón */

    color: #151515;
	-webkit-text-stroke: 1px #282828;
	text-shadow: 0px 4px 4px #282828;
}