/* ============================================================
   MOD RESPONSIVE — Reglas para pantallas pequeñas y control táctil
   ============================================================ */

/* ===============================================
   MOD RESPONSIVE — Ajuste del panel informativo
   =============================================== */

/* --- Ajuste táctil universal --- */
@media screen and (max-width: 1024px) {

    #map,
    .ol-viewport {
        touch-action: pan-x pan-y !important;
    }
}

/* ==========================================
   MÓVIL VERTICAL — Panel más estrecho y más bajo
   ========================================== */
@media screen and (max-width: 1024px) and (orientation: portrait) {

    .info-panel {
        position: fixed !important;

        /* Más abajo — baja 30px extra */
        top: 90px !important;

        /* Más estrecho — ancho ideal */
        width: 60% !important;
        max-width: 60% !important;

        left: 50% !important;
        transform: translateX(-50%) !important;

        border-radius: 22px !important;
        padding-top: 10px !important;

        z-index: 9999 !important;
    }

    .info-panel-content {
        padding-left: 20px !important;      /* Iconos bien alineados */
        padding-right: 18px !important;
        padding-bottom: 18px !important;
    }

    .info-row {
        margin-bottom: 16px !important;
        gap: 6px !important;
    }

    .info-icon {
        width: 28px !important;
    }
}


/* ============================================================
   MÓVIL EN HORIZONTAL (LANDSCAPE)
   ============================================================ */
@media screen and (max-width: 1024px) and (orientation: landscape) {

    .info-panel {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 8px !important;
        width: 65% !important;
        max-width: 65% !important;
        border-radius: 18px !important;
        margin: 0 auto !important;
        z-index: 9999 !important;
    }

 /* 🔥 Reducir márgenes en blanco del panel */
    .info-panel-content {
        padding-top: 8px !important;       /* antes ~20–26px */
        padding-bottom: 8px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .info-panel-content {
        padding: 2px !important;
    }
}