/**
 * El Club de la Grúa - Estilos Responsivos
 * 
 * Media queries y ajustes para diferentes dispositivos
 */

/* ============================================
   TABLET (768px - 991px)
   ============================================ */

@media (max-width: 991px) {
    :root {
        --ecdlg-font-size-h1: 2rem;
        --ecdlg-font-size-h2: 1.75rem;
        --ecdlg-font-size-h3: 1.5rem;
    }
    
    .container {
        max-width: 720px;
    }
    
    /* Dashboard */
    .dashboard {
        grid-template-columns: 1fr;
    }
    
    .dashboard-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        border-top: 1px solid #e0e0e0;
        padding: 0.5rem;
        z-index: 100;
        display: flex;
        justify-content: space-around;
    }
    
    .dashboard-menu {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }
    
    .dashboard-menu li {
        margin: 0;
    }
    
    .dashboard-menu a {
        flex-direction: column;
        padding: 0.5rem;
        font-size: 0.75rem;
        text-align: center;
    }
    
    .dashboard-menu a svg {
        width: 24px;
        height: 24px;
    }
    
    .dashboard-menu span {
        display: none;
    }
    
    .dashboard-content {
        padding-bottom: 80px; /* Espacio para menú móvil */
    }
    
    .user-info {
        display: none;
    }
    
    /* Servicios grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Auth pages */
    .auth-container {
        margin: 1rem;
        padding: 1.5rem;
    }
}

/* ============================================
   MÓVIL (< 768px)
   ============================================ */

@media (max-width: 767px) {
    :root {
        --ecdlg-font-size-base: 15px;
        --ecdlg-font-size-h1: 1.75rem;
        --ecdlg-font-size-h2: 1.5rem;
        --ecdlg-font-size-h3: 1.25rem;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    /* Header móvil */
    .site-header {
        position: sticky;
        top: 0;
    }
    
    .header-inner {
        padding: 0.75rem 0;
    }
    
    .site-logo img {
        height: 40px;
    }
    
    .site-title {
        font-size: 1.25rem;
    }
    
    /* Menú móvil */
    .mobile-menu-toggle {
        display: flex;
        z-index: 1001;
    }
    
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        box-shadow: -5px 0 25px rgba(0,0,0,0.2);
        transition: right 0.3s ease;
        z-index: 1000;
    }
    
    .main-navigation.active {
        right: 0;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .nav-menu li {
        border-bottom: 1px solid #eee;
    }
    
    .nav-menu a {
        display: block;
        padding: 1rem 0;
        font-size: 1.125rem;
    }
    
    .nav-menu a::after {
        display: none;
    }
    
    /* Overlay cuando menú está abierto */
    .main-navigation::before {
        content: '';
        position: fixed;
        top: 0;
        left: -100vw;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }
    
    .main-navigation.active::before {
        opacity: 1;
    }
    
    /* Hero section */
    .hero-section {
        min-height: 70vh;
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Services grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    /* Auth pages */
    .auth-page {
        padding: 2rem 0;
        align-items: flex-start;
    }
    
    .auth-container {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }
    
    /* Dashboard móvil */
    .service-status-grid {
        grid-template-columns: 1fr;
    }
    
    /* Membership page */
    .membership-benefits,
    .membership-payment {
        position: static;
    }
    
    /* WooCommerce móvil */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
    
    .woocommerce-cart table.cart td {
        padding: 0.5rem;
    }
    
    /* Tablas responsivas */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Formularios */
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    /* Footer */
    .footer-widgets {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    /* WhatsApp widget */
    .whatsapp-widget {
        bottom: 80px; /* Espacio para menú dashboard */
        right: 20px;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   MÓVIL PEQUEÑO (< 480px)
   ============================================ */

@media (max-width: 479px) {
    :root {
        --ecdlg-font-size-base: 14px;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .section {
        padding: 2rem 0;
    }
    
    .section-title {
        margin-bottom: 1.5rem;
    }
    
    .btn-lg {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    /* Ajustes de dashboard */
    .dashboard-content {
        padding: 1rem;
    }
    
    .service-status-card {
        padding: 1rem;
    }
    
    .service-counter {
        font-size: 2rem;
    }
}

/* ============================================
   DISPOSITIVOS GRANDES (> 1200px)
   ============================================ */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   PANTALLAS EXTRA GRANDES (> 1400px)
   ============================================ */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ============================================
   ORIENTACIÓN HORIZONTAL EN MÓVIL
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 3rem 0;
    }
    
    .mobile-menu-toggle {
        top: 1rem;
        right: 1rem;
    }
}

/* ============================================
   ALTO CONTRASTE (ACCESIBILIDAD)
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --ecdlg-primary: #0056b3;
        --ecdlg-secondary: #666666;
    }
    
    .btn {
        border-width: 2px;
    }
}

/* ============================================
   REDUCCIÓN DE MOVIMIENTO (ACCESIBILIDAD)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   MODO OSCURO (OPCIONAL FUTURO)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 
    Descomentar cuando se quiera implementar modo oscuro
    :root {
        --ecdlg-text: #e0e0e0;
        --ecdlg-text-light: #a0a0a0;
    }
    
    body {
        background-color: #1a1a1a;
    }
    */
}