/* ==========================================
   MÓVIL COMPATIBLE (APLICA A TODO EL PROYECTO)
   ========================================== */

/* Asegura que el padding no rompa el ancho en ningún lado */
* {
    box-sizing: border-box;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* Evita por completo el scroll horizontal */
    padding: 10px !important;
}

/* 📊 Adaptación de Formularios y Contenedores */
form, .container, .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    margin: 0 auto !important;
}

/* Fuerza a que los inputs y botones ocupen el ancho de la pantalla móvil */
input[type="text"], 
input[type="password"], 
input[type="email"], 
select, 
textarea {
    width: 100% !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* 🌐 Barra de navegación y Logout Responsivo */
/* Si los botones no caben de lado, se bajan ordenadamente */
div[style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* ❌ EL REY DE LA RESPUESTA: Ajuste para QR Studio Core */
#studio-canvas-target {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    overflow: hidden;
}

/* Obliga al Canvas generado por tu motor v6 a encogerse si la pantalla mide menos de 300px */
#studio-canvas-target canvas, 
#studio-canvas-target svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Ajustes finos para pantallas muy pequeñas (Teléfonos) */
@media (max-width: 480px) {
    h1, h2 {
        font-size: 1.4rem !important;
        text-align: center;
    }
    
    /* Si tienes tablas en el Dashboard, esto permite hacerles scroll de lado sin romper la web */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   📱 PARCHE CORREGIDO: BOTÓN ADMIN LIBRE Y MAPA A SALVO
   ========================================================= */
@media (max-width: 480px) {
    
    /* 1. Contenedores de texto y botón (EXCLUIMOS por completo al mapa aquí) */
    .hero, .header, header, .main-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 20px 10px !important;
    }

    /* 2. Forzamos al texto principal a alinearse sin flotar */
    h1, .main-title, .hero-text, p.intro {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    /* 3. Liberamos el botón de administración para que sea accesible */
    a[href="login.php"], .btn-admin, .admin-access, #boton-admin {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        
        display: inline-block !important;
        width: 85% !important;
        max-width: 280px !important;
        margin: 15px auto !important;
        padding: 12px 20px !important;
        text-align: center !important;
        z-index: 9999 !important; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    }

    /* =========================================================
       🗺️ SECCIÓN DEL MAPA: LE DEVOLVEMOS SUS DIMENSIONES NATIVAS
       ========================================================= */
    .map-wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        margin: 20px 0 !important;
    }

    /* Forzamos al contenedor real del mapa a recuperar su tamaño en móviles */
    #mapa-general {
        width: 100% !important;
        height: 350px !important; /* Le devolvemos una altura fija para que el motor gráfico pueda pintarlo */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
.admin-btn {
    display: none; /* Esto lo hace invisible y lo saca del flujo de la página */
}