/* ============================================
   ESTILOS ESPECÍFICOS PARA MÓVILES
   Optimizado para pantallas de hasta 980px
   ============================================ */

/* Ajustes generales para móvil */
@media (max-width: 980px) {
    
    /* Evitar desbordamiento horizontal */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Contenedor principal del iframe */
    .site-wrapper {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ajustar el iframe para que ocupe bien la pantalla */
    #ColumnaDerecha iframe,
    .iframe_calles {
        width: 100% !important;
        height: 75vh !important;
        min-height: 400px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ajustar la columna de botones */
    #ColumnaIzquierda {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding: 20px 0 0 0 !important;
        margin: 0 !important;
        display: block !important;
        clear: both !important;
    }
    
    /* Botones más táctiles */
    #ColumnaIzquierda .btn-lg,
    #ColumnaIzquierda button {
        width: 100% !important;
        padding: 14px 10px !important;
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
        background-color: rgba(0,0,0,0.7) !important;
        color: white !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
    }
    
    /* Input de búsqueda más grande */
    #busca_sup input {
        margin-top: 15px !important;
        font-size: 1.2rem !important;
        padding: 12px !important;
        border-radius: 8px !important;
        margin-bottom: 5px !important;
    }
    
    /* Select de distritos más táctil */
    #Select_Distritos select {
        font-size: 1.1rem !important;
        padding: 12px !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    
    /* Ocultar botón de subir en móvil (ya hay uno flotante) */
    #boton_arriba {
        display: none !important;
    }
    
    /* Header responsive */
    .masthead .inner {
        margin: -40px 0px 10px -45px !important;
        width: 100% !important;
    }

    .masthead-brand {
       font-size: 2.2rem !important;
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        background-color: rgb(3, 3, 3) !important;

    }
    
    .cover-heading {
        font-size: 1.5rem !important;
    }
    
    .lead {
        font-size: 0.9rem !important;
    }
    
    /* Botones de la portada */
    .row .btn-lg {
        font-size: 1.5rem !important;
        padding: 10px !important;
    }
}

/* ============================================
   AJUSTES PARA EL MODAL EN MÓVIL
   ============================================ */

@media (max-width: 800px) {
    
    .ficha-contenedor {
        width: 98% !important;
        max-width: 98% !important;
        max-height: 95vh !important;
        border-radius: 12px !important;
    }
    
    .ficha-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .ficha-texto {
        order: 2 !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        padding: 15px !important;
    }
    
    .ficha-derecha {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .ficha-imagen {
        min-height: 200px !important;
        max-height: 200px !important;
    }
    
    .ficha-mapa {
        min-height: 200px !important;
        max-height: 200px !important;
    }
    
    .ficha-titulo {
        font-size: 1.3rem !important;
    }
    
    .ficha-descripcion {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .ficha-acciones {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .btn-accion {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        background: #f0f0f0 !important;
        border-radius: 20px !important;
    }
    
    .ficha-cerrar {
        top: 5px !important;
        right: 5px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 24px !important;
        background: rgba(0,0,0,0.7) !important;
    }
    
    /* Mapa más usable en móvil */
    .ficha-mapa #mapaContainer {
        min-height: 180px !important;
    }
}

/* ============================================
   AJUSTES PARA GALERÍA POLAROID EN MÓVIL
   ============================================ */

@media (max-width: 550px) {
    .polaroid-container {
        gap: 15px !important;
        padding: 15px 10px !important;
    }
    
    .polaroid {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 0 auto 15px auto !important;
        padding: 10px !important;
    }
    
    .polaroid-img {
        height: auto !important;
        min-height: 200px !important;
        aspect-ratio: 4 / 3 !important;
    }
    
    .polaroid h3 {
        font-size: 0.9rem !important;
    }
    
    .polaroid .caption,
    .polaroid .autor {
        font-size: 0.7rem !important;
    }
    
    /* Eliminar rotaciones en móvil para mejor legibilidad */
    .polaroid.rotate-left,
    .polaroid.rotate-right,
    .polaroid.rotate-left-more,
    .polaroid.rotate-right-more,
    .polaroid.rotate-more-left,
    .polaroid.rotate-more-right {
        transform: rotate(0deg) !important;
    }
}

/* ============================================
   AJUSTES PARA PANTALLAS MUY PEQUEÑAS (<= 400px)
   ============================================ */

@media (max-width: 400px) {
    .polaroid-img {
        min-height: 160px !important;
    }
    
    #ColumnaDerecha iframe,
    .iframe_calles {
        height: 100vh !important;
        min-height: 350px !important;
    }
    
    .ficha-texto {
        max-height: 45vh !important;
    }
    
    .ficha-imagen {
        min-height: 150px !important;
        max-height: 150px !important;
    }
    
    .ficha-mapa {
        min-height: 150px !important;
        max-height: 150px !important;
    }
}

/* ============================================
   MEJORAS PARA EL SLIDER EN MÓVIL (promo.php)
   ============================================ */

@media (max-width: 980px) {
    .flexslider1 .foto_slide h1 {
        font-size:3em; top:5%; 
    }
    
    .flexslider1 {
        margin: 0 !important;
    }
    
    .flex-direction-nav a {
        width: 30px !important;
        height: 30px !important;
        top: 50% !important;
        margin-top: -15px !important;
    }
}

/* ============================================
   BOTÓN FLOTANTE MEJORADO
   ============================================ */

@media (max-width: 980px) {
    img[onclick*="window.open"][src*="icon_top_lat.png"] {
        bottom: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        opacity: 0.7 !important;
        z-index: 1000 !important;
    }
}

/* ============================================
   PREVENIR ZOOM EN INPUTS (mejor UX)
   ============================================ */

@media (max-width: 980px) {
    input, select, textarea, button {
        font-size: 16px !important; /* Previene zoom automático en iOS */
    }
}

/* ============================================
   MEJORAR TOUCH TARGETS
   ============================================ */

@media (max-width: 980px) {
    .btn, 
    button,
    .polaroid,
    .btn-accion,
    [onclick] {
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    /* Efecto de feedback al tocar */
    .polaroid:active {
        transform: scale(0.98) !important;
        transition: transform 0.05s !important;
    }
}

/* ============================================
   ESTILOS DEL INDEX PARA MÓVIL
   ============================================ */
		.movil { display:block}
		.no_movil { display:none}
		
		#Select_Distritos {margin-top:1px; width:100%;}
		#Select_Distritos form {width:100%; }
		#Select_Distritos form select {width:100%; font-size:1.1rem; padding:12px;}

		#muestra_ficha {position: fixed; width:0%; height:0%; left:0px; top:0px; z-index:9999; overflow:hidden; 
			-webkit-transition: all 0s ease-in-out;
			-moz-transition: all 0s ease-in-out;
			-o-transition: all 0s ease-in-out;
			transition: all 0s ease-in-out;
		}
		
		/* Ajustes adicionales específicos para móviles */
		.masthead-brand { 
			float: none; 
			position: relative; 
			top: 0px; 
			left: 0px; 
			font-size: 1.4rem;
			text-align: center;
			margin: 10px 0;
		}
		
		.cover-container {
			padding: 0 15px;
		}
		
		.inner.cover {
			padding: 20px 0;
		}
		
		/* Mejorar el iframe en móvil */
		#ColumnaDerecha {
			width: 100% !important;
			margin: 0 !important;
			padding: 0 !important;
		}
		
		#ColumnaDerecha iframe {
			height: 80vh !important;
			min-height: 400px !important;
		}
		
		/* Botones de la portada en móvil */
		.row div {
			width: 100%;
			margin-bottom: 8px;
		}
		
		.row div button {
			font-size: 0.9rem;
			padding: 12px;
			font-weight: bold;
		}
		
		/* Ajustes generales */
		.site-wrapper {
			background-attachment: scroll !important;
		}
		
		@media only screen and (max-width: 480px) {
			#ColumnaDerecha iframe {
				height: 65vh !important;
				min-height: 350px !important;
			}
		}