/* ============================================================================
   ESTILOS RESPONSIVOS DEL TEMA
   ============================================================================ */

/* ============================================================================
   BREAKPOINT: TABLET (max-width: 1024px)
   ============================================================================ */
@media (max-width: 1024px) {
    .mi-tema-v2-sidebar {
        width: 250px;
        padding: 20px;
    }
    
    .mi-tema-v2-footer__content {
        gap: 30px;
        padding: 0 15px;
    }
    
    .mi-tema-v2-slider {
        height: 400px;
    }
}

/* ============================================================================
   BREAKPOINT: MÓVIL GRANDE (max-width: 768px)
   ============================================================================ */
@media (max-width: 768px) {
    /* Sidebar móvil */
    .mi-tema-v2-sidebar {
        transform: translateX(-100%);
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .mi-tema-v2-sidebar--active {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
    
    /* Footer móvil */
    .mi-tema-v2-footer {
        padding: 40px 0 20px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
    }
    
    .mi-tema-v2-footer__content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    /* Slider móvil */
    .mi-tema-v2-slider {
        height: 300px;
    }
    
    /* Márgenes para contenido principal */
    body {
        margin-bottom: 0 !important;
    }
    
    main {
        margin-bottom: 0 !important;
    }
    
    .site-content {
        margin-bottom: 0 !important;
    }
    
    #main {
        margin-bottom: 0 !important;
    }
}

/* ============================================================================
   BREAKPOINT: MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================================ */
@media (max-width: 480px) {
    .mi-tema-v2-sidebar {
        width: 100%;
        padding: 15px;
    }
    
    .mi-tema-v2-footer {
        padding: 30px 0 15px;
    }
    
    .mi-tema-v2-footer__content {
        padding: 0 10px;
        gap: 20px;
    }
    
    .mi-tema-v2-footer__section-title {
        font-size: 12px;
        margin-bottom: 15px;
    }
    
    .mi-tema-v2-footer__section-text {
        font-size: 11px;
    }
    
    .mi-tema-v2-slider {
        height: 250px;
    }
    
    .mi-tema-v2-slider__dots {
        bottom: 10px;
    }
    
    .mi-tema-v2-slider__dot {
        width: 10px;
        height: 10px;
    }
}

/* ============================================================================
   BREAKPOINT: MÓVIL MUY PEQUEÑO (max-width: 320px)
   ============================================================================ */
@media (max-width: 320px) {
    .mi-tema-v2-footer {
        padding: 20px 0 10px;
    }
    
    .mi-tema-v2-footer__content {
        gap: 15px;
    }
    
    .mi-tema-v2-slider {
        height: 200px;
    }
    
    .mi-tema-v2-slider__dots {
        gap: 8px;
    }
    
    .mi-tema-v2-slider__dot {
        width: 8px;
        height: 8px;
    }
}

/* ============================================================================
   ORIENTACIÓN: LANDSCAPE EN MÓVIL
   ============================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .mi-tema-v2-slider {
        height: 200px;
    }
    
    .mi-tema-v2-footer {
        padding: 20px 0 10px;
    }
    
    body {
        margin-bottom: 0 !important;
    }
    
    main {
        margin-bottom: 0 !important;
    }
}

/* ============================================================================
   PREFERENCIAS: REDUCIR ANIMACIONES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .mi-tema-v2-sidebar,
    .mi-tema-v2-slider__slide,
    .mi-tema-v2-slider__dot {
        transition: none !important;
    }
}

/* ============================================================================
   PREFERENCIAS: ALTO CONTRASTE
   ============================================================================ */
@media (prefers-contrast: high) {
    .mi-tema-v2-sidebar {
        border-right: 2px solid #000;
    }
    
    .mi-tema-v2-footer {
        border-top: 2px solid #fff;
    }
    
    .mi-tema-v2-slider__dot {
        border: 1px solid #fff;
    }
}