/*-----------------------------------------------------------------------------------

	CSS INDEX
	=========================================
	01. header css here
	02. datatable css here
	03. login css here
	04. tagsinput css here
	05. product css here

-----------------------------------------------------------------------------------*/

/* 01. header css here */

.navbar-nav .nav-button {
	--bs-nav-link-padding-y: 0;
}

/* 02. datatable css here */

.data_table {
	background: #fff;
	padding: 15px;
	box-shadow: 1px 3px 5px #aaa;
	border-radius: 5px;
}

/* 03. datatable css here */

.login-page{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1028%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='rgba(255%2c 213%2c 76%2c 1)'%3e%3c/rect%3e%3cpath d='M153.45557752382726 699.8751414821618L426.1247754824377 757.8327686735664 211.4132047152319 427.2059435235513z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1062.464%2c1000.784C1115.96%2c1002.746%2c1171.115%2c987.227%2c1200.492%2c942.476C1232.664%2c893.466%2c1237.346%2c829.512%2c1208.336%2c778.567C1179.052%2c727.141%2c1121.633%2c701.161%2c1062.464%2c700.086C1001.148%2c698.972%2c935.484%2c718.725%2c907.109%2c773.092C880.098%2c824.845%2c908.021%2c884.734%2c940.923%2c932.957C968.949%2c974.033%2c1012.771%2c998.962%2c1062.464%2c1000.784' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1304.3372712215535 83.45968537118361L1164.6095913005981 357.69069789391176 1438.840603823326 497.4183778148671 1578.5682837442816 223.187365292139z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M805.7494117586011-97.02455724587708L649.5414924607607 134.56320687768925 881.129256584327 290.77112617552973 1037.3371758821675 59.18336205196343z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M71.636%2c996.618C102.448%2c995.122%2c125.695%2c972.694%2c141.914%2c946.454C159.286%2c918.348%2c173.284%2c885.249%2c158.839%2c855.533C142.847%2c822.635%2c108.209%2c801.237%2c71.636%2c801.879C36.022%2c802.504%2c6.674%2c827.256%2c-10.423%2c858.503C-26.784%2c888.405%2c-28.956%2c924.6%2c-11.546%2c953.904C5.518%2c982.624%2c38.268%2c998.238%2c71.636%2c996.618' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M512.24 285.59 a207.63 207.63 0 1 0 415.26 0 a207.63 207.63 0 1 0 -415.26 0z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M386.982%2c1197.096C442.283%2c1195.824%2c492.073%2c1166.422%2c520.744%2c1119.116C550.583%2c1069.882%2c561.808%2c1007.405%2c531.679%2c958.348C502.599%2c910.999%2c442.465%2c898.28%2c386.982%2c901.318C337.264%2c904.04%2c294.373%2c930.998%2c267.351%2c972.82C237.343%2c1019.265%2c216.095%2c1076.736%2c242.12%2c1125.525C269.288%2c1176.458%2c329.271%2c1198.423%2c386.982%2c1197.096' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1996.329606778474 841.2432550864154L1811.5271209069474 586.3740164015437 1695.2224372347218 835.7902154243067z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M192.55411556373488 533.7681187359351L469.6515103508448 494.82461957869674 430.7080111936064 217.72722479158682 153.6106164064965 256.6707239488252z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M762.1126260202576 884.1960693964156L757.7730580623822 759.9271022162687 573.5393912710997 828.5709377431554z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1543.74 860.42 a270.07 270.07 0 1 0 540.14 0 a270.07 270.07 0 1 0 -540.14 0z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1109.6722325409282 319.4710163695956L1190.2100403351285 138.58013837419182 1009.3191623397248 58.04233057999147 928.7813545455244 238.93320857539527z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M178.00669262507392 402.54425291558147L-109.49855083047368 372.32623416731406-139.7165695787411 659.8314776228617 147.7886738768065 690.0494963711291z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M725.7068858427422 1013.2716772235822L673.1210711360641 816.2679414431815 544.9046472076495 940.0851027767565z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1061.540803558546 568.6985531729575L1006.4531727640482 330.0878094151169 767.8424290062076 385.17544020961475 822.9300598007054 623.7861839674554z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M630.7686995993673 214.28847302882278L703.7038996631263 42.91817508458095 541.7880681881004 59.936214729169734z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1361.733%2c1479.301C1476.554%2c1481.949%2c1610.221%2c1482.58%2c1668.668%2c1383.712C1727.675%2c1283.896%2c1664.703%2c1165.475%2c1606.559%2c1065.153C1548.654%2c965.243%2c1477.108%2c858.966%2c1361.733%2c854.123C1240.222%2c849.022%2c1137.056%2c936.386%2c1078.515%2c1042.987C1022.262%2c1145.422%2c1014.751%2c1272.073%2c1078.38%2c1370.097C1137.449%2c1461.097%2c1253.272%2c1476.799%2c1361.733%2c1479.301' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1307 689.33 a248.09 248.09 0 1 0 496.18 0 a248.09 248.09 0 1 0 -496.18 0z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M992.76 375.61 a203.24 203.24 0 1 0 406.48 0 a203.24 203.24 0 1 0 -406.48 0z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1218.9184207969809 603.5292164558482L1347.3722729378858 767.9426496265663 1529.7654966235104 493.0551548298498z' fill='rgba(197%2c 165%2c 62%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1028'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* 04. tagsinput css here */

.use-bootstrap-tag .input-wrapper > span {
	visibility: visible;
}

.use-bootstrap-tag input[type="text"] {
	color: #212529 !important; /* texto */
	caret-color: #212529 !important; /* cursor */
}

.use-bootstrap-tag .input-wrapper > span {
	opacity: 0 !important;
}

/* 05. product css here */

.select2-container .select2-selection--single {
	height: 38px !important;
	background: #fff !important;
	border: 1px solid #ced4da !important;
	border-radius: .25rem !important;
	padding: 6px 12px !important;

	display: flex !important;
	align-items: center !important;
}

.select2-container .select2-selection__rendered {
	color: #212529 !important;
	padding-left: 0 !important;
	line-height: 24px !important;
}

.select2-container .select2-selection__arrow {
	height: 100% !important;
	right: 10px !important;
}

.select2-container--default .select2-selection--single:hover {
	border-color: #b3b3b3 !important;
}

.select2-container--default.select2-container--focus 
.select2-selection--single {
	border-color: #86b7fe !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25) !important;
	outline: none !important;
}

.select2-container .select2-dropdown {
	border-color: #ced4da !important;
}

.select2-selection__placeholder {
	color: #6c757d !important;
	opacity: .7 !important;
}


			 /* ==================================
					 IMAGEN PRINCIPAL
				================================== */
				.image-preview-container {
						text-align: center;
						padding: 20px;
						background: #fff;
						border: 2px dashed #dee2e6;
						border-radius: 8px;
						margin-bottom: 15px;
						cursor: pointer;
						transition: all 0.3s;
				}
				
				.image-preview-container:hover {
						border-color: #007bff;
						background: #f8f9fa;
				}
				
				.image-preview-container img {
						max-width: 100%;
						width: 300px;
						height: 300px;
						object-fit: contain;
						border-radius: 8px;
						background: #f8f9fa;
				}
				
				.image-preview-container.has-image {
						border-color: #28a745;
				}
				
				.custom-file-input {
						display: block;
						width: 100%;
						padding: 10px;
						border: 1px solid #ced4da;
						border-radius: 4px;
						cursor: pointer;
						background: #fff;
						font-size: 14px;
				}
				
				.custom-file-input:hover {
						background: #f8f9fa;
				}
				
				.image-info {
						margin-top: 10px;
						padding: 8px;
						background: #e7f3ff;
						border-radius: 4px;
						font-size: 12px;
						color: #333;
				}
				
				/* ==================================
					 GALERÍA / DROPZONE
				================================== */
				.container2 {
						width: 100%;
						padding: 10px;
				}
				
				.dropzone {
						border: 2px dashed #f77b72 !important;
						border-radius: 10px !important;
						background: #fafafa;
						min-height: 200px;
						padding: 20px;
						position: relative;
				}
				
				.dropzone .dz-message {
						text-align: center;
						margin: 2em 0;
				}
				
				.dropzone .dz-preview {
						display: none !important;
				}
				
				.dropzone.has-images .dz-message {
						display: none;
				}

				.dropzone.has-images {
						border-color: #28a745 !important;
				}
				
				.dropzone:not(.has-images) .dz-message {
						display: block;
				}
				
				.preview-grid {
						display: grid;
						grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
						gap: 15px;
						pointer-events: none;
				}
				
				.preview-item {
						position: relative;
						border: 1px solid #ddd;
						border-radius: 5px;
						overflow: hidden;
						background: #fff;
						pointer-events: auto;
				}
				
				.preview-item img {
						width: 100%;
						height: 150px;
						object-fit: cover;
						display: block;
				}
				
				.preview-item .remove-btn {
						position: absolute;
						top: 5px;
						right: 5px;
						background: #dc3545;
						color: white;
						border: none;
						border-radius: 50%;
						width: 30px;
						height: 30px;
						cursor: pointer;
						font-size: 18px;
						line-height: 1;
						font-weight: bold;
						transition: all 0.3s;
				}
				
				.preview-item .remove-btn:hover {
						background: #c82333;
						transform: scale(1.1);
				}
				
				.preview-item .image-info {
						padding: 8px;
						background: #f9f9f9;
						font-size: 11px;
						text-align: center;
						font-weight: bold;
						margin: 0;
				}
				
				/* ==================================
					 MODAL DE CROP (COMPARTIDO)
				================================== */
				.modal-crop {
						display: none;
						position: fixed;
						z-index: 99999 !important;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0,0,0,0.9);
						overflow-y: auto;
				}
				
				.modal-crop-content {
						background-color: #fefefe;
						margin: 20px auto;
						padding: 20px;
						border-radius: 10px;
						width: 95%;
						max-width: 800px;
						max-height: 90vh;
						overflow-y: auto;
						position: relative;
				}
				
				.crop-container {
						width: 100%;
						height: 400px;
						margin: 15px 0;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #000;
						border-radius: 5px;
				}
				
				.crop-container img {
						max-width: 100%;
						max-height: 100%;
						display: block;
				}
				
				.crop-buttons {
						text-align: center;
						margin-top: 15px;
						padding-top: 15px;
						border-top: 1px solid #ddd;
				}
							
				.btn-primary {
						background-color: #28a745;
						color: white;
				}
				
				.btn-primary:hover {
						background-color: #218838;
				}
				
				.btn-secondary {
						background-color: #6c757d;
						color: white;
				}
				
				.btn-secondary:hover {
						background-color: #5a6268;
				}
				
				.modal-crop h3 {
						margin-top: 0;
						margin-bottom: 10px;
						color: #333;
						font-size: 18px;
				}
				
				.instructions {
						background: #fff3cd;
						padding: 10px;
						border-radius: 5px;
						margin-bottom: 15px;
						border-left: 4px solid #ffc107;
				}
				
				.instructions ol {
						margin: 8px 0 0 0;
						padding-left: 20px;
						font-size: 13px;
				}
				
				.instructions strong {
						font-size: 14px;
				}