/**
 * Archivo: tienda/includes/scrollbar-fix.css
 * Solución centralizada para barras de desplazamiento dobles
 */

/* ========== RESET GLOBAL DE SCROLLBARS ========== */
* {
    /* Previene scrollbars dobles en cualquier elemento */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 30, 30, 0.3);
}

/* Reset completo para html y body */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
    height: 100%;
    box-sizing: border-box;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
}

/* ========== CONTENEDORES PRINCIPALES ========== */
.main-container {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.page-wrapper {
    overflow-x: hidden !important;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========== TABLAS RESPONSIVAS ========== */
.table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    /* Previene scrollbar doble */
    contain: layout style;
}

.table-container::-webkit-scrollbar {
    height: 8px;
    background: rgba(30, 30, 30, 0.3);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.6);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.8);
}

.table-container table {
    width: 100%;
    min-width: 600px; /* Ancho mínimo para evitar colapso */
    border-collapse: collapse;
}

/* ========== CONTENEDORES DE SCROLL ESPECÍFICOS ========== */
.scroll-container {
    /* Solo permite scroll cuando es necesario */
    overflow: auto !important;
    /* Previene scrollbars innecesarios */
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 30, 30, 0.3);
}

.scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: rgba(30, 30, 30, 0.3);
    border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.6);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.8);
}

/* ========== CONTENEDORES ESPECÍFICOS ========== */
.products-grid {
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
}

.filters-bar {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 30, 30, 0.3);
}

.filters-bar::-webkit-scrollbar {
    height: 6px;
    background: rgba(30, 30, 30, 0.3);
    border-radius: 3px;
}

.filters-bar::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.6);
    border-radius: 3px;
}

/* ========== MODALES Y DROPDOWNS ========== */
.modal-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 90vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 30, 30, 0.3);
}

.dropdown-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 30, 30, 0.3);
}

/* ========== NAVEGACIÓN MÓVIL ========== */
.mobile-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) rgba(30, 30, 30, 0.3);
}

/* ========== RESPONSIVE ESPECÍFICO ========== */
@media (max-width: 768px) {
    .table-container {
        /* En móvil, asegurar scroll horizontal suave */
        -webkit-overflow-scrolling: touch;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    .filters-bar {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    /* Ocultar scrollbars en móvil para limpiar la interfaz */
    .table-container::-webkit-scrollbar,
    .scroll-container::-webkit-scrollbar,
    .filters-bar::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }

    /* Ocultar scrollbar visible del contenedor principal en móvil (mantiene el scroll funcional) */
    html,
    body,
    .page-wrapper {
        -ms-overflow-style: none;      /* IE/Edge legado */
        scrollbar-width: none;         /* Firefox */
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .page-wrapper::-webkit-scrollbar {
        width: 0 !important;           /* Chrome/Safari/Edge */
        height: 0 !important;
        background: transparent !important;
    }
}

@media (max-width: 480px) {
    .table-container table {
        min-width: 500px; /* Menor ancho mínimo en móviles muy pequeños */
    }
}

/* ========== PREVENCIÓN DE CONFLICTOS ========== */
/* Elementos que NO deben tener scroll */
.no-scroll {
    overflow: hidden !important;
}

/* Elementos que SOLO necesitan scroll vertical */
.scroll-y-only {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Elementos que SOLO necesitan scroll horizontal */
.scroll-x-only {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* ========== UTILIDADES DE DEBUG (remover en producción) ========== */
.debug-overflow {
    border: 2px solid red !important;
    position: relative;
}

.debug-overflow:before {
    content: 'OVERFLOW DEBUG';
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    padding: 2px 4px;
    font-size: 10px;
    z-index: 9999;
}

/* ========== PARCHES ESPECÍFICOS PARA PROBLEMAS CONOCIDOS ========== */
/* Previene scroll horizontal en contenedores flex */
.flex-container {
    overflow-x: hidden !important;
    width: 100%;
    min-width: 0; /* Importante para flexbox */
}

.flex-container > * {
    min-width: 0; /* Permite que los elementos flex se encojan */
    flex-shrink: 1;
}

/* Previene scroll en grids */
.grid-container {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
}

/* Fix para imágenes que causan overflow */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Fix para contenido pre-formateado */
pre, code {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100%;
    word-wrap: break-word;
    white-space: pre-wrap;
}