body {
            font-family: 'Inter', sans-serif;
            background-color: #f7fafc;
        }
        /* Estilos para el modal */
        .modal {
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 50; /* Asegurar que el modal esté por encima de todo */
        }
        .modal.is-visible {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            transform: scale(0.95);
            transition: transform 0.3s ease-in-out;
        }
        .modal.is-visible .modal-content {
            transform: scale(1);
        }

        /* Estilo para el modal de la galería de imágenes */
        #galleryModal img {
            max-height: 80vh;
            max-width: 80vw;
        }
        
        /* Estilos para el modal de vista rápida del producto */
        #quickViewModal {
            z-index: 60;
        }
        #quickViewModal .modal-content {
            max-width: 900px;
            max-height: 90vh;
        }

        /* --- Estilos personalizados para el scrollbar --- */
        .ace-scrollbar-v::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .ace-scrollbar-v::-webkit-scrollbar-track {
            background-color: transparent;
        }
        .ace-scrollbar-v::-webkit-scrollbar-thumb {
            background-color: #cbd5e1; /* Color del thumb (barra) del scrollbar */
            border-radius: 10px;
        }
        .ace-scrollbar-v::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8; /* Color del thumb al pasar el mouse */
        }
        /* Fin de los estilos personalizados para el scrollbar */

        /* Estilo para el elemento arrastrado */
        .dragging {
            opacity: 0.5;
            border: 2px dashed #3b82f6;
            transform: rotate(5deg);
        }
        
        /* Estilo para la tabla en dispositivos móviles */
        @media (max-width: 767px) {
            .table-mobile-stack td:before {
                content: attr(data-label);
                font-weight: bold;
                display: block;
                margin-bottom: 4px;
                color: #4a5568;
            }
        }
        
        /* Estilo para el botón de exportar */
        #exportExcelBtn {
            background-color: #10b981; /* Un color verde para Excel */
            color: white;
            border: none;
            padding: 0.5rem 1.5rem;
            border-radius: 9999px; /* rounded-full */
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        #exportExcelBtn:hover {
            background-color: #059669;
        }
        #cart-sidebar {
    will-change: transform;
    touch-action: pan-y; /* permite deslizar horizontal sin conflicto con scroll */
}
        /* Estilos para el switch */
        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #3b82f6;
        }
        input:checked + .slider:before {
            transform: translateX(20px);
        }
	#view-prod-images {
	  overflow: hidden; /* evita que la imagen se salga */
	  border-radius: 0.5rem; /* opcional: bordes redondeados */
	}

	#view-prod-images img {
 	 transition: transform 0.4s ease; /* animación suave */
	  cursor: zoom-in; /* cambia el cursor */
	}

	#view-prod-images img:hover {
	  transform: scale(1.2); /* zoom al 120% */
	}
	#zoom-container {
  position: relative;
  display: inline-block;
}

#zoom-lens {
  width: 90px;   /* antes 100px → más pequeño = más zoom */
  height: 90px;
  border: 2px solid #aaa;
  background: rgba(255,255,255,0.3);
}

#zoomed-image {
  transform: scale(3);   /* antes 2 → ahora 3x zoom */
  transform-origin: top left;
}

//Tamaño del modal
	#view-product-modal .product-view-modal-content {
  max-width: 900px;      /* ancho fijo */
  max-height: 90vh;      /* alto máximo = 90% de la pantalla */
  width: 100%;           /* ocupa todo el espacio permitido */
  height: auto;
  overflow-y: auto;      /* si el contenido es largo, aparece scroll */
  margin: auto;          /* centrado */
}

#view-prod-images img {
  max-height: 400px;     /* límite de altura para imagen principal */
  width: 100%;
  object-fit: contain;   /* encaja sin deformarse */
  border-radius: 8px;
}

	.product-description {
  white-space: pre-line; /* 👈 respeta saltos de línea y espacios */
}