/* ============================================
   MADESA - Responsive
   ============================================ */

/* ========== TABLET (max 1024px) ========== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ========== MOBILE (max 768px) ========== */
@media (max-width: 768px) {
    :root {
        --header-height: 68px;
        --logo-height: 50px;
    }

    /* Header - ocultar nav desktop, mostrar hamburguesa */
    .nav-desktop { display: none !important; }
    .menu-toggle { display: flex !important; }

    /* Mobile nav overlay */
    .nav-mobile {
        display: flex;
        position: fixed;
        top: calc(var(--header-height) + var(--mobile-menu-offset));
        left: 0;
        right: 0;
        background: var(--bg-overlay);
        backdrop-filter: blur(16px);
        border-bottom: 2px solid var(--color-primary);
        padding: var(--space-3);
        z-index: calc(var(--z-header) - 1);
        flex-direction: column;
        gap: var(--space-1);
        transform: translateY(-110%);
        transition: transform 0.3s ease;
        pointer-events: none;
        max-height: calc(100vh - var(--header-height) - var(--mobile-menu-offset));
        overflow-y: auto;
    }

    .nav-mobile.open {
        transform: translateY(var(--mobile-menu-drop));
        pointer-events: auto;
    }

    .nav-mobile .nav-link {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        width: 100%;
        font-size: var(--size-sm);
    }

    /* Grids */
    .grid-4,
    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }

    .grid-auto-sm,
    .grid-auto-md { grid-template-columns: 1fr; }

    /* Hero */
    .hero { padding: var(--space-16) 0 var(--space-12); }
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Stats banner */
    .stats-banner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }

    /* Admin */
    .admin-page-header { flex-direction: column; align-items: flex-start; }
    .admin-page-title { font-size: var(--size-2xl); }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form grid */
    .form-grid { grid-template-columns: 1fr; }

    /* Footer */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ========== SMALL MOBILE (max 480px) ========== */
@media (max-width: 480px) {
    .stats-banner-grid { grid-template-columns: 1fr; }
    .reasons-grid { grid-template-columns: repeat(2, 1fr); }

    .modal { padding: var(--space-6); }
    .login-card { padding: var(--space-8) var(--space-6); }

    .hero-eyebrow { font-size: 0.65rem; }

    .btn-lg { padding: 0.875rem 1.5rem; }
}

/* ========== PRINT ========== */
@media print {
    .header,
    .footer,
    .btn,
    .admin-sidebar { display: none !important; }

    body { background: #fff; color: #000; }
    .admin-content { margin-left: 0; padding: 0; }
}

/* ========== HOVER ONLY (non-touch) ========== */
@media (hover: none) {
    .card:hover,
    .product-card:hover,
    .service-card:hover {
        transform: none;
    }
}

/* ========== PREFERS REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    html { scroll-behavior: auto; }
}