body {
    margin: 0;
    padding: 0;
    background: #f6f8fa;
    font-family: 'Segoe UI', Arial, sans-serif;
}
h3#map-titulo {
    text-align: center;
    margin-top: 26px;
    font-size: 1.45rem;
    font-weight: 800;
    color: #133B6B;
    margin-bottom: 14px;
}
.mapa-bloque {
    position: relative;
    width: 100vw;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 12px 36px rgba(20,40,70,.06);
    border-radius: 24px;
    background: #fff;
    overflow: visible;
}
#map {
    width: 100%;
    height: 80vh;
    min-height: 600px;
    border-radius: 24px;
    box-shadow: 0 2px 16px rgba(19,59,107,0.10);
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Menú interactivo (engranaje) */
/* ...Resto de tu CSS... */

/* Menú interactivo (engranaje) - AHORA IZQUIERDA SUPERIOR */
.menu-capas {
    position: absolute;
    top: 32px;
    left: 32px; /* CAMBIA right: 32px a left: 32px */
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Cambia a align-items: flex-start */
}
.btn-capas {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow .15s;
}
.btn-capas:hover, .btn-capas.active {
    box-shadow: 0 8px 36px rgba(0,0,0,0.16);
}

.icono-engranaje {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g stroke="%230b60a3" stroke-width="2" fill="white"><circle cx="16" cy="16" r="7"/><path d="M16 2v3M16 27v3M2 16h3M27 16h3M6.6 6.6l2.1 2.1M23.3 23.3l2.1 2.1M6.6 25.4l2.1-2.1M23.3 8.7l2.1-2.1"/><path d="M16,11 a5,5 0 1,0 0.1,0"/></g></svg>') center/contain no-repeat;
}

/* Panel de opciones */
.panel-capas {
    position: absolute;
    top: 60px;
    left: 0; /* CAMBIA right: 0 a left: 0 */
    min-width: 230px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.14);
    padding: 16px 17px 12px 17px;
    opacity:1;
    visibility:visible;
    transition: opacity .23s;
    max-height: 65vh;           /* <- Limita el alto */
    overflow-y: auto;
    direction: rtl;
}
.panel-capas > * {direction: ltr; /* Mantiene el contenido alineado normal */}
.panel-capas::-webkit-scrollbar {width: 8px; background: transparent;}
.panel-capas::-webkit-scrollbar-thumb {background: #eee;border-radius: 6px;}

.panel-capas.oculto { opacity:0; visibility:hidden; pointer-events:none;}
.panel-capas-header { font-weight:700; color:#0b60a3; margin-bottom:10px; }
.panel-capas-main { margin-bottom:9px; }
.capas-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    padding: 7px 10px;
    margin-bottom: 5px;
    color: #213040;
    text-align: left;
    cursor: pointer;
    transition: background .13s;
}
.capas-btn.active, .capas-btn:hover { background:rgba(19,59,107,0.08); }

.submenu { display: none; margin-top:12px;}
.submenu-activo { display: block;}
.submenu-title { font-weight:700; color:#174466; margin-bottom:8px;}
.servicio-checkbox { display:flex; align-items:center; gap:9px; font-size:15px; margin-bottom:7px; cursor:pointer;}
.servicio-icon { width:22px; height:22px; object-fit:contain; opacity:0.93;}
input[type="checkbox"] { width:18px; height:18px; accent-color:#0b60a3;}
@media (max-width:900px) {
    .menu-capas { top: 10px; left: 8px; }
    .btn-capas { width:42px; height:42px;}
    .icono-engranaje { width:22px; height:22px;}
    .panel-capas { top:45px; left:0; min-width:160px; padding:10px 7px 7px 7px;}
}

#buscador-campus {
    font-size: 15px;
}
.busqueda-item:hover {
    background: #eaf1fb;
}





@media (max-width: 900px) {
    }
@media (max-width: 900px) {
    }
.info-panel ul {
    margin-top: 6px;
    margin-bottom: 0;
    padding-left: 22px;
    font-size: 0.96em;
}
.info-panel li {
    margin-bottom: 2px;
}
.busqueda-btn-edificio {
    transition: background .16s, color .14s;
}
.busqueda-btn-edificio:hover {
    background: #dbe7f8;
    color: #0b60a3;
}



/* Controles del mapa con z-index controlado */
.leaflet-control, #btn-capas, .leaflet-top, .leaflet-bottom,
#menu-capas, .menu-capas, .btn-capas, .icono-engranaje {
    z-index: 900 !important;
}
/* ===== PANEL DE INFORMACIÓN (unificado: imagen arriba + detalles abajo) ===== */
.info-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.18);
    padding: 0;
    z-index: 2000 !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    max-height: calc(80vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.info-panel.oculto { display: none !important; }

/* Botón de cierre flotante sobre la imagen */
.info-panel .close-panel {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,0.90);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.3em;
    color: #0b60a3;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Bloque de imagen/ícono en la parte superior del panel */
.info-panel .panel-media {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}
.info-panel .panel-foto {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 18px 18px 0 0;
}
.info-panel .panel-foto-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3fa;
    height: 120px;
    border-radius: 18px 18px 0 0;
}

/* Área de texto scrolleable */
.info-panel .panel-content {
    overflow-y: auto;
    padding: 14px 18px 18px 18px;
    flex: 1;
}

.info-panel img.foto-lugar {
    width: 100%;
    border-radius: 12px;
    margin: 8px 0 12px 0;
    display: block;
    max-height: 180px;
    object-fit: cover;
}
.info-panel .panel-title {
    font-size: 1.28em;
    font-weight: 700;
    margin-bottom: 2px;
    color: #1a2946;
}
.info-panel .panel-cat {
    color: #0b60a3;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 10px;
}
.info-panel .panel-section {
    margin-bottom: 8px;
    font-size: 0.97em;
    line-height: 1.5;
}
.info-panel .panel-section b { color: #1a2946; }
.info-panel .panel-submenu {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}
.info-panel .academica-tab {
    padding: 5px 16px;
    border-radius: 7px;
    font-weight: 500;
    background: #f3f7fc;
    color: #174466;
    border: none;
    cursor: pointer;
    font-size: 0.95em;
}
.info-panel .academica-tab.active {
    background: #0b60a3;
    color: #fff;
}
.info-panel ul {
    margin: 4px 0 0 0;
    padding-left: 20px;
    font-size: 0.94em;
}
.info-panel li { margin-bottom: 2px; }
.info-panel .planta-titulo {
    font-weight: 600;
    color: #0b60a3;
    margin-top: 8px;
    font-size: 0.96em;
}
.panel-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f5fb;
    border-radius: 12px;
    height: 100px;
    margin: 8px 0 12px 0;
}
.panel-placeholder img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 0.55;
}


/* Panel de imagen secundario desactivado (ahora integrado en info-panel) */
#imagen-panel { display: none !important; }

@media (max-width: 900px) {
    .info-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 70vh;
    }
    .info-panel .panel-foto {
        border-radius: 18px 18px 0 0;
        max-height: 160px;
    }
    .info-panel .panel-foto-fallback {
        border-radius: 18px 18px 0 0;
    }
}