/* ==========================================================================
   LevelPro - Reglas de Diseño Responsivo
   ========================================================================== */

/* Breakpoint para Laptops y Pantallas Medianas (max-width: 1200px) */
@media (max-width: 1200px) {
    :root {
        --spacing-xl: 6rem;
        --spacing-lg: 3rem;
    }
}

/* Breakpoint para Tablets Grandes (max-width: 991px) */
@media (max-width: 991px) {
    :root {
        --spacing-xl: 5rem;
        --spacing-lg: 2.5rem;
    }
    
    /* Mostrar botón de hamburguesa y ocultar menú clásico */
    .nav-menu {
        display: none;
    }
    
    .burger-menu {
        display: block;
    }
    
    /* Layouts en una sola columna */
    .zigzag-row {
        flex-direction: column !important;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }
    
    .zigzag-col-img {
        width: 100%;
    }
    
    .about-profile {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .split-screen {
        flex-direction: column;
    }
    
    .split-col {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    /* Banner de Comunidades */
    .community-banner-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .community-banner-btn-col {
        text-align: left;
        width: 100%;
    }
    
    .community-banner-btn-col .btn {
        width: 100%;
        text-align: center;
    }

    /* Grid de Mantenimiento Comunidades (2 columnas) */
    .maintenance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Breakpoint para Tablets y Móviles (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-lg: 2rem;
        --spacing-md: 1.25rem;
    }
    
    body {
        font-size: 15px;
    }
    
    /* Evitar desbordamiento de columnas flex y grid con min-width en línea */
    [style*="min-width"] {
        min-width: 100% !important;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-actions .btn {
        width: 100%;
    }
    
    .stats-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .legal-links {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .map-container {
        height: 300px;
    }

    /* Grid de Mantenimiento Comunidades (1 columna) */
    .maintenance-grid {
        grid-template-columns: 1fr;
    }

    /* Grid de Servicios (1 columna) */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Bottom Fixed Actions Bar for Mobile/Tablet */
    body {
        padding-bottom: 75px; /* Evita que el contenido quede tapado por la barra inferior */
    }

    .floating-actions-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.08);
        align-items: center;
        justify-content: space-between;
    }

    .floating-btn {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 12px 10px;
        font-size: 0.78rem;
        border-radius: 30px;
        box-shadow: none;
        letter-spacing: 0.02em;
    }

    .floating-btn-urgencias {
        order: 1;
    }

    .floating-btn-whatsapp {
        order: 2;
    }

    .phone-number-text {
        display: none !important;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Breakpoint para Móviles Pequeños (max-width: 480px) */
@media (max-width: 480px) {
    :root {
        --spacing-xl: 3rem;
        --spacing-lg: 1.5rem;
        --spacing-md: 1rem;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    .stats-container {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-item {
        width: 100%;
    }
    
    .profile-img-container {
        padding: 0.8rem;
    }

    .contact-form-wrapper {
        padding: 2rem 1.25rem;
    }

    .image-badge {
        position: relative;
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        margin-top: 15px;
        max-width: 100% !important;
        width: 100%;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    .admin-table th, 
    .admin-table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* Soporte para animaciones de reducción de movimiento (Accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-delay: -1s !important;
        animation-duration: -1s !important;
        animation-iteration-count: 1 !important;
        background-attachment: scroll !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .hero-bg {
        animation: none !important;
        transform: none !important;
    }
}