/* ============================================
   RESPONSIVE UTILITIES - MindUp 2025
   Clases para mostrar/ocultar elementos según el dispositivo
   ============================================ */

/* ============================================
   DESKTOP ONLY (.web-desktop)
   ============================================ */

/* Por defecto, mostrar en desktop */
.web-desktop {
    display: block !important;
}

/* Ocultar en móviles y tablets */
@media (max-width: 991.98px) {
    .web-desktop {
        display: none !important;
    }
}

/* ============================================
   MOBILE ONLY (.web-mobile)
   ============================================ */

/* Por defecto, ocultar en desktop */
.web-mobile {
    display: none !important;
}

/* Mostrar solo en móviles y tablets */
@media (max-width: 991.98px) {
    .web-mobile {
        display: block !important;
    }
}

/* ============================================
   BREAKPOINTS ESPECÍFICOS
   ============================================ */

/* Solo móviles pequeños (hasta 576px) */
.web-mobile-sm {
    display: none !important;
}

@media (max-width: 575.98px) {
    .web-mobile-sm {
        display: block !important;
    }
}

/* Solo móviles (576px - 767px) */
.web-mobile-md {
    display: none !important;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .web-mobile-md {
        display: block !important;
    }
}

/* Solo tablets (768px - 991px) */
.web-tablet {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .web-tablet {
        display: block !important;
    }
}

/* Solo desktop pequeño (992px - 1199px) */
.web-desktop-sm {
    display: none !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .web-desktop-sm {
        display: block !important;
    }
}

/* Solo desktop grande (1200px+) */
.web-desktop-lg {
    display: none !important;
}

@media (min-width: 1200px) {
    .web-desktop-lg {
        display: block !important;
    }
}

/* ============================================
   FLEXBOX RESPONSIVE UTILITIES
   ============================================ */

/* Flexbox para desktop */
.web-desktop-flex {
    display: flex !important;
}

@media (max-width: 991.98px) {
    .web-desktop-flex {
        display: none !important;
    }
}

/* Flexbox para móvil */
.web-mobile-flex {
    display: none !important;
}

@media (max-width: 991.98px) {
    .web-mobile-flex {
        display: flex !important;
    }
}

/* ============================================
   GRID RESPONSIVE UTILITIES
   ============================================ */

/* Grid para desktop */
.web-desktop-grid {
    display: grid !important;
}

@media (max-width: 991.98px) {
    .web-desktop-grid {
        display: none !important;
    }
}

/* Grid para móvil */
.web-mobile-grid {
    display: none !important;
}

@media (max-width: 991.98px) {
    .web-mobile-grid {
        display: grid !important;
    }
}

/* ============================================
   INLINE RESPONSIVE UTILITIES
   ============================================ */

/* Inline para desktop */
.web-desktop-inline {
    display: inline !important;
}

@media (max-width: 991.98px) {
    .web-desktop-inline {
        display: none !important;
    }
}

/* Inline para móvil */
.web-mobile-inline {
    display: none !important;
}

@media (max-width: 991.98px) {
    .web-mobile-inline {
        display: inline !important;
    }
}

/* ============================================
   INLINE-BLOCK RESPONSIVE UTILITIES
   ============================================ */

/* Inline-block para desktop */
.web-desktop-inline-block {
    display: inline-block !important;
}

@media (max-width: 991.98px) {
    .web-desktop-inline-block {
        display: none !important;
    }
}

/* Inline-block para móvil */
.web-mobile-inline-block {
    display: none !important;
}

@media (max-width: 991.98px) {
    .web-mobile-inline-block {
        display: inline-block !important;
    }
}

/* ============================================
   TABLA RESPONSIVE UTILITIES
   ============================================ */

/* Tabla para desktop */
.web-desktop-table {
    display: table !important;
}

@media (max-width: 991.98px) {
    .web-desktop-table {
        display: none !important;
    }
}

/* Tabla para móvil */
.web-mobile-table {
    display: none !important;
}

@media (max-width: 991.98px) {
    .web-mobile-table {
        display: table !important;
    }
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

/* Ocultar en todos los dispositivos */
.web-hidden {
    display: none !important;
}

/* Mostrar en todos los dispositivos */
.web-visible {
    display: block !important;
}

/* Ocultar solo en móviles */
.web-desktop-only {
    display: block !important;
}

@media (max-width: 767.98px) {
    .web-desktop-only {
        display: none !important;
    }
}

/* Mostrar solo en móviles */
.web-mobile-only {
    display: none !important;
}

@media (max-width: 767.98px) {
    .web-mobile-only {
        display: block !important;
    }
}

/* ============================================
   PRINT UTILITIES
   ============================================ */

/* Ocultar en impresión */
@media print {
    .web-no-print {
        display: none !important;
    }
}

/* Mostrar solo en impresión */
.web-print-only {
    display: none !important;
}

@media print {
    .web-print-only {
        display: block !important;
    }
}

/* ============================================
   HOVER UTILITIES (solo desktop)
   ============================================ */

/* Efectos hover solo en desktop */
.web-desktop-hover:hover {
    /* Aplicar efectos hover solo en desktop */
}

@media (max-width: 991.98px) {
    .web-desktop-hover:hover {
        /* Desactivar hover en móviles */
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ============================================
   ANIMACIONES RESPONSIVE
   ============================================ */

/* Animaciones solo en desktop */
.web-desktop-animate {
    transition: all 0.3s ease;
}

@media (max-width: 991.98px) {
    .web-desktop-animate {
        transition: none !important;
        animation: none !important;
    }
}

/* Animaciones solo en móvil */
.web-mobile-animate {
    transition: none;
    animation: none;
}

@media (max-width: 991.98px) {
    .web-mobile-animate {
        transition: all 0.3s ease;
    }
}

/* ============================================
   DEBUG UTILITIES (solo para desarrollo)
   ============================================ */

/* Mostrar breakpoints actuales (solo para debug) */
.web-debug::before {
    content: "Desktop";
    position: fixed;
    top: 10px;
    right: 10px;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
}

@media (max-width: 991.98px) {
    .web-debug::before {
        content: "Mobile/Tablet";
    }
}

@media (max-width: 767.98px) {
    .web-debug::before {
        content: "Mobile";
    }
}

@media (max-width: 575.98px) {
    .web-debug::before {
        content: "Mobile Small";
    }
}

/* ============================================
   LEGACY SUPPORT
   ============================================ */

/* Mantener compatibilidad con clases existentes */
.web-desktop.show,
.web-mobile.show {
    display: block !important;
}

.web-desktop.hide,
.web-mobile.hide {
    display: none !important;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Usar will-change solo cuando sea necesario */
.web-desktop-animate,
.web-mobile-animate {
    will-change: transform, opacity;
}

/* Optimizar repaints */
.web-desktop,
.web-mobile {
    contain: layout style;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Asegurar que elementos ocultos no sean accesibles */
.web-desktop[aria-hidden="true"],
.web-mobile[aria-hidden="true"] {
    display: none !important;
}

/* ============================================
   DOCUMENTACIÓN DE USO
   ============================================ */

/*
USO BÁSICO:
- .web-desktop: Solo visible en desktop (992px+)
- .web-mobile: Solo visible en móviles/tablets (hasta 991px)

USO AVANZADO:
- .web-mobile-sm: Solo móviles pequeños (hasta 575px)
- .web-mobile-md: Solo móviles medianos (576px-767px)
- .web-tablet: Solo tablets (768px-991px)
- .web-desktop-sm: Solo desktop pequeño (992px-1199px)
- .web-desktop-lg: Solo desktop grande (1200px+)

DISPLAY TYPES:
- .web-desktop-flex: Flexbox solo en desktop
- .web-mobile-flex: Flexbox solo en móvil
- .web-desktop-grid: Grid solo en desktop
- .web-mobile-grid: Grid solo en móvil

EJEMPLOS:
<div class="web-desktop">Solo se ve en desktop</div>
<div class="web-mobile">Solo se ve en móvil</div>
<div class="web-desktop-flex">Flexbox solo en desktop</div>
<div class="web-mobile-flex">Flexbox solo en móvil</div>

DEBUG:
<div class="web-debug">Muestra el breakpoint actual</div>
*/