/*
Theme Name: Check Compras 2
Theme URI: http://poeticavisual.com
Description: Veladoras
Version: 1
Author: Zabdiel
Author URI: http://poeticavisua.com
*/

/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body {line-height: 1; }ol, ul {list-style: none; }blockquote, q {quotes: none; }blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none; }:focus {outline: 0; }ins {text-decoration: none; }del {text-decoration: line-through; }table {border-collapse: collapse; border-spacing: 0; } * {padding: 0; margin: 0; border: 0; }

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding:0;
	margin:0; }

fieldset, img { border:0 }

ol, ul, li { list-style:none }

:focus { outline:none }

:root {
	--color: #0f2b49;
	--marino: #051c48;
	--azul: #2941c6;
	--cielo: #01A9DB;
	--celeste: #A9F5F2;
	--azulclaro: #D5DDE5;

	--color1: #0f2b49;
	--color2: #051c48;
	--color3: #2c2e83;
	--color4: #01A9DB;
	--contraste2: #A9F5F2;
	--contraste3: #D5DDE5;

	--guinda: #571546;
	--vino: #8f083f;
	--rojo: #FF0000;
	--rojo2: #B40404;
	--rojo3: #610B0B;
	--rojoclaro: #FEDBDB;
	--rojoclaro2: #FBC5C5;

	--rosa: #e5007d;
	--violeta: #BF00FF;
	--rosaclaro: #F8E0F1;

	--morado: #8000FF;
	--moradoclaro: #BCA9F5;
	
	--cafe: #AB8126;
	--cafe2: #DBA901;
	--cafeclaro: #F1DDC7;

	--naranja: #FF8C00;
	--naranja2: #ffb600;
	--naranjaclaro: #FFEAC4;
	
	--amarillo: #f4ed0f;
	--amarillo2: #cac40f;
	--amarillo3: #b29a05;
	--amarilloclaro: #F5F6CE;
	--amarilloclaro2: #F2F5A9;

	--verde: #298A08;
	--verde2: #94d500;
	--verde3: #0B610B;
	--verde4: #0B3B0B;
	--limon: #BCF5A9;
	--verdeclaro: #D8F6CE;
	--turquesa: #45c1a3;
	
	--dorado: #efba10;

	--negro: #1A1D23;
	--oscuro: #21252E;
	--oxford: #343A45;
	--gray: #9DA6AE;
	--plata: #D8D8D8;

	--rata: #3f3e3e;
	--gris: #5b626b;
	--gris5: #555;
	--gris6: #a6a6a6;
	--gris9: #999;
	--gris10: #AEB6BF;

	--gris1: #6b7580;
	--gris2: #525d6a;
	--gris3: #2b3644;
	--gris4: #a9a9aa;
	--grisclaro: #d9d9d9;
	--grisclaro2: #cacaca;

	--blanco: #fff;
	--alpha: #f1f1f1;

	--alternate: #EBEBEB;
	--hover: #f7ecf7;

	--td: #f5f5f5;
	--border: #C1C3D1;

	--input: #f9f7f6;
}

html{
	background: var(--alpha) url(images/bg.jpg) repeat center center;
	scroll-behavior: smooth;
}

body,
input,
textarea,
select {
	font-family: "Lato", Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: 200;
	color: var(--rata);
}

a { text-decoration:none; }
a, a:visited {	text-decoration: none; }
a:hover { text-decoration: none; }

.izqueirda, .left { float:left; }
.derecha, .right { float:right; }
.centro, .center { text-align: center; }
.justificado { text-align: justify; }
.clear { clear: both; }
.inline { display: inline-block; }

img.alignright { margin: 3px 0 10px 20px; display: inline; }
img.alignleft { margin: 3px 20px 10px 0; display: inline; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.centered { display: block; margin-left: auto; margin-right: auto; }

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { text-align:center; }

.salto { height: 90px; }

#wrap {
	max-width:1024px;
	margin:0px auto 0px;
	clear: both;
	overflow: hidden;
}
/*box-shadow: 0px 0px 10px #111;*/

/*************************************/

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: #FFF none repeat scroll 0% 0%;
	z-index: 99999;
}
#page-loader .preloader-interior {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--color1);
 
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

/*************************************/

header {

	}

#cabeza {
	border-top: 5px solid var(--color1);
	border-bottom: 1px solid var(--gris);
	margin:0px auto 0px;
	background-color: var(--alfa);
	padding: 5px 0px 10px 0px;
}

.menuvacio { height: 50px; visibility: hidden; }

.topnav {
	overflow: hidden;
	background-color: var(--alfa);
	padding-top: 10px;
	display: block;
	margin-left: 20px;
	z-index: 100;
	text-align: right;
}
	.topnav a {
		color: var(--negro);
		text-align: center;
		padding: 12px 10px;
		text-decoration: none;
		font-weight: normal;
		font-size: 15px;
		line-height: 40px;
	}
	.topnav a:hover {
		text-decoration: none;
		color: var(--blanco);
		background: var(--color2);
	}
	.topnav .icon {
		display: none;
		border: 1px solid var(--color1);
	}

	.topnav a.oculto {
		display: none;
	}
	a.botonmini {
		display: block;
		color: #e4a80c;
		margin: 15px 0px 0px 0px;
		padding: 12px 8px;
		font-size: 12px;
	}

.topnav a.logo {
	background: url(images/logo.png) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width:42px;
	height:45px;
	margin: 0px 15px 0px 0px;
	padding: 0px;
	display:block;
	float:left;
	}
	.topnav a.logo:hover {
		background-color: none;
	}

/*--------------------------------------------------------------
# generales
--------------------------------------------------------------*/

h1, h1 a {
	letter-spacing:1px;
	display: inline-block;
	box-sizing: border-box;
	font-size: 45px;
	line-height: 55px;
	font-weight: bold;
	color: var(--color1);
	margin: 0px 0px 0px 0px;
	clear:both;
}
h2, h2 a {
	box-sizing: border-box;
	font-size: 30px;
	line-height: 40px;
	font-weight: normal;
	color: var(--rojo);
	margin: 10px 0px 10px 0px;
	clear:both;
}
h3, h3 a {
	display: inline-block;
	box-sizing: border-box;
	font-size: 26px;
	line-height: 34px;
	margin: 20px 0px 5px 0px;
	clear:both;
}
h4, h4 a {
	font-size: 22px;
	line-height: 30px;
	font-weight:normal;
	clear:both;
	margin:10px 0px 10px 0px;
	clear:both;
}
h5, h5 a {
	font-size: 20px;
	line-height: 26px;
	font-weight:normal;
	clear:both;
	margin-bottom:10px;
	clear:both;
	color: var(--blanco);
} 
h6, h6 a {
	font-size: 18px;
	line-height: 24px; 
	text-transform: uppercase;
	font-weight: 200;
	letter-spacing:2px;
	margin-bottom: 10px;
	clear:both;
} 

p {
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 10px;
}

.color1 { color: var(--color1); }
.color2 { color: var(--color2); }
.color3 { color: var(--color3); }
.color4 { color: var(--color4); }

.blanco { color: var(--blanco); }
.negro { color: var(--negro); }
.gris { color: var(--gris); }
.rata { color: var(--rata); }

.bg-color1 { background: var(--color1); }
.bg-color2 { background: var(--color2); }
.bg-color3 { background: var(--color3); }
.bg-color4 { background: var(--color4); }
.bg-contraste { background: var(--contraste3); }
.bg-blanco { background: var(--blanco); }
.bg-gris { background: var(--gris); }
.bg-alfa { background: var(--alfa); }


.linea1, .linea, .lineacolor { 
	width: 100px;
	height: 1px;
	margin: 15px auto 15px;
	border-bottom: 1px solid #fff;
}
.lineacolor { border-bottom: 1px solid var(--color2); }
.linea1 { border-bottom: 1px solid var(--color1); margin: 15px 0px; }

.radio { border-radius: 8px; }

.margen { padding: 35px 20px 30px 20px; }
.margen40 { padding: 15px 40px 40px 40px; }
.margen-page { padding: 0px 100px 0px 100px; }
.margen-blog { padding: 10px 20px 30px 20px; }

.flex {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.icon {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-size: 40px;
}

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

.dos, .tres, .cuatro, .cinco {
	display: grid;
	grid-gap: 10px;
	grid-auto-flow: dense;
}

.dos {
	grid-template-columns: repeat(2, 1fr);
}
.tres {
	grid-template-columns: repeat(3, 1fr);
}
.cuatro {
	grid-template-columns: repeat(4, 1fr);
}
.cinco {
	grid-template-columns: repeat(5, 1fr);
}

/***************************/
/***************************/
/***************************/

#botones-container {
	display: flex;
	gap: 10px;
}

#camera-stream {
	width: 100%; /* El ancho del video ocupará el 100% del contenedor/pantalla */
	height: auto;
	display: block;
	max-width: 100vw;
	max-height: 50vh;
	margin: 0 auto;
}

.cuadro {
	background-color: rgba(243, 33, 103, 0.9);
	border-radius: 15px;
	padding: 20px;
	color: white;
	margin: 20px auto;
	border: 1px solid #bb0642;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

/***************************/
/***************************/
/***************************/

input[type=text], input[type=date], input[type=number], input[type="email"], input[type=password],
textarea {
	padding: 8px;
	margin-bottom: 10px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 5px;
	outline: none;
	color: var(--negro);
	background: var(--input);
	border: 1px solid var(--border);
	font-family: "Lato", Arial, sans-serif;
	font-weight: bold;
	font-size: 16px;
}

input::placeholder {
	color: var(--rojo);
}

input.folio {
	font-weight: bold;
	letter-spacing: 2px;
	color: var(--blanco);
	background: var(--cielo);
}
input.folio::placeholder {
	color: var(--blanco);
}

select {
	padding: 8px;
	margin-bottom: 10px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 5px;
	outline: none;
	color: var(--negro);
	background-color: #f9f7f6;
	border: 1px solid var(--border);
	font-family: "Lato", Arial, sans-serif;
	font-weight: bold;
	font-size: 16px;
	appearance: none;
	cursor: pointer;
}

	select::after {
		content: "▼";
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
		color: #999;
	}


/* Ocultar el checkbox por defecto */
input[type="checkbox"] {
	display: none;
}

/* Estilo de la etiqueta (caja de selección) */
input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	font-size: 16px;
	color: #333;
	cursor: pointer;
	transition: color 0.3s ease;
	margin-bottom: 5px;
}

/* Estilo de la caja de selección antes de marcarse */
input[type="checkbox"] + label:before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

	/* Estilo cuando el checkbox está marcado */
	input[type="checkbox"]:checked + label:before {
		background-color: var(--rosa); /* Cambia por tu color preferido */
		border-color: var(--rosa);
		transform: translateY(-50%) scale(1.1); /* Aumentar el tamaño ligeramente */
		font-weight: bold;
		color: var(--rosa);
	}

	/* Estilo de la marca dentro de la caja cuando está seleccionado */
	input[type="checkbox"]:checked + label:after {
		content: '✔';
		position: absolute;
		left: 4px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: white;
	}

	/* Cambiar el color de la etiqueta al pasar el mouse */
	input[type="checkbox"] + label:hover {
		color: var(--rosa); /* Cambia por el color que prefieras */
	}

	/* Estilo cuando el checkbox está en foco */
	input[type="checkbox"]:focus + label:before {
		border-color: var(--rosa); /* Color para el borde cuando está enfocado */
		box-shadow: 0 0 0 3px rgba(255, 223, 0, 0.4); /* Sombra en el enfoque */
	}

	input[type="checkbox"]:checked + label {
		font-weight: bold;
	    color: var(--rosa); /* Cambia el color cuando está marcado */
	}

	input[type="checkbox"]:hover + label {
	    color: var(--rosa); /* Cambia el color cuando se pasa el mouse por encima */
	}

button, a.boton, a.salir {
	display: inline-block;
	background-color: var(--gris4);
	color: var(--blanco);
	padding: 12px 15px;
	text-decoration: none;
	border-radius: 5px;
	margin-top: 5px;
}

button.verde { background-color: var(--verde); }
button.naranja { background-color: var(--naranja); }
button.rosa { background-color: var(--rosa); }
button.morado { background-color: var(--morado); }
button.cafe { background-color: var(--cafe); }
button.cielo { background-color: var(--cielo); }
button.azul { background-color: var(--azul); }
button.vino { background-color: var(--vino); }

button.ticket { 
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--vino); 
	color:var(--blanco); 
	letter-spacing: 1px;
	font-size: 30px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
	animation: bounce 1s infinite;
}

button:hover, a.boton:hover { background-color: var(--negro); }

a.salir { padding: 5px 6px; }

@keyframes bounce {
	0%, 100% {
		margin-left: 10px;
	}
	50% {
		margin-left: -10px;
	}
}

.switch {
	display: flex;
	margin: 0px;
}

.switch input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch label { 
	margin-top: 1px;
	min-width: 40px;
	background-color: var(--input);
	color: var(--negro);
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	padding: 10px 8px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch label:first-of-type{ border-radius: 5px 0 0 5px; }
.switch label:last-of-type { border-radius: 0 5px 5px 0; }

.switch label:hover { cursor: pointer; }
.switch input:checked + label { background-color: var(--rosa); color: var(--blanco); box-shadow: none; }

.switch input:checked + label.blanco { background-color: var(--blanco); color: var(--negro); box-shadow: none; }
.switch input:checked + label.cafe { background-color: var(--cafe); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.azul { background-color: var(--azul); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.gris { background-color: var(--gris5); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.cielo { background-color: var(--cielo); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.rosa { background-color: var(--rosa); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.rojo { background-color: var(--rojo); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.amarillo { background-color: var(--amarillo); color: var(--negro); box-shadow: none; }
.switch input:checked + label.vino { background-color: var(--vino); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.verde { background-color: var(--verde); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.negro { background-color: var(--negro); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.naranja { background-color: var(--naranja); color: var(--negro); box-shadow: none; }
.switch input:checked + label.morado { background-color: var(--morado); color: var(--blanco); box-shadow: none; }

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.contenido {
	padding: 20px 20px 20px 20px;
}
.content {
	max-width: 500px;
	margin: 0 auto 0;
	padding: 20px 20px 20px 20px;
}
.content p { color: var(--rata); }
.content a { color: var(--color1); }
.content a:hover { color: var(--color2); }
.content a.mas:hover { color: var(--blanco); }
.content strong { font-weight: bold; color: var(--negro); }
.content em { font-style:italic; color: var(--rata); }

/* Estilos para listas no ordenadas */
.content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0 20px; /* Ajusta el margen izquierdo según tus preferencias */
}

.content ul li {
	font-size: 18px;
	line-height: 26px;
}

	.content ul li::before {
		font-family: 'IcoFont' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		line-height: 1;
		-webkit-font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;
		content: "\ea6d";
		color: var(--color2);
		display: inline-block;
		padding-right: 10px;
		font-size: 14px;
		line-height: 20px;
		width: 10px;
	}

	.content ul li a {
		color: var(--rata);
	}

	.content ul li a:hover {
		color: var(--rata);
	}

	/* Estilos para listas ordenadas */
	.content ol {
		list-style: none;
		margin: 0;
		counter-reset: item;
	}

	.content ol li {
		font-size: 18px;
		line-height: 26px;
	}

	.content ol li::before {
		color: var(--blanco);
		background-color: var(--color1);
		display: inline-block;
		content: counter(item);
		counter-increment: item;
		padding: 8px;
		margin-right: 10px;
		font-size: 12px;
		line-height: 5px;
		font-weight: bold;
		border-radius: 16px;
	}

	.content ol li a {
		color: var(--rata);
	}

	.content ol li a:hover {
		color: var(--rata);
	}

	/* Márgenes izquierdos para listas anidadas */
	.content ul ul,
	.content ol ol {
		margin-left: 20px; /* Ajusta el margen izquierdo según tus preferencias */
	}

	.content ul ul ul,
	.content ol ol ol {
		margin-left: 40px; /* Ajusta el margen izquierdo según tus preferencias */
	}

	/* Añade más reglas según sea necesario para más niveles de anidación */

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

#footer {

}

#login {
	padding: 20px 30%;
}