/*
Theme Name: Checkpoint 12
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;

	--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: #f6fff5;

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

	--amarillo: #f4d03f;
	--naranja: #eb984e;
	--verde: #52be80;

	--rosa: #a569bd;
	--rojo: #e74c3c;
	--azul: #5499c7;

	--oxford: #5d6d7e;
	--petroleo: #1a5276;

	--dorado: #efba10;
	--plata: #d7d7d7;
	--bronce: #CD7F32;
}

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: normal;
	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;
	padding: 0px 20px;
	clear: both;
	overflow: hidden;
}

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

#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(--naranja);
 
	-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 {

	}

ul.menu {
	text-align: center;
	list-style:none;
	margin: 5px 0px 15px 0px;
}
	ul.menu li { display: inline-block; margin: 0px; }
	ul.menu li a {
		padding: 10px 8px 10px 8px;
		font-size: 14px;
		color: var(--blanco);
		background: var(--cielo);
		border-radius: 0px 0px 8px 8px;
	}
	ul.menu li a:hover {
		color: var(--blanco);
		background: var(--naranja);
	}
	ul.menu li a.activo {
		color: var(--blanco);
		background: var(--rojo);
	}

/*--------------------------------------------------------------
# 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(--rojo);
	margin: 0px 0px 0px 0px;
	clear:both;
	text-align: center;
}
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;
	text-align: center;
}
h3, h3 a {
	font-size: 26px;
	line-height: 34px;
	font-weight:bolder;
	color: var(--negro);
	clear:both;
	margin:10px 0px 10px 0px;
	clear:both;
	text-align: center;
}
h4, h4 a {
	font-size: 22px;
	line-height: 30px;
	font-weight:bolder;
	color: var(--negro);
	clear:both;
	margin:10px 0px 10px 0px;
	clear:both;
	text-align: center;
}
h5, h5 a {
	font-size: 18px;
	line-height: 24px;
	font-weight:normal;
	clear:both;
	margin:0px 0px 10px 0px;
	clear:both;
	text-align: center;
} 
h6, h6 a {
	font-size: 18px;
	line-height: 24px; 
	text-transform: uppercase;
	font-weight: 200;
	letter-spacing:2px;
	margin-bottom: 10px;
	clear:both;
	text-align: center;
} 

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

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

.bg-blanco { background: var(--blanco); }
.bg-gris { background: var(--gris); }
.bg-alfa { background: var(--alfa); }

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

.dos, .tres, .cuatro, .cinco {
	display: grid;
	grid-gap: 20px;
	grid-auto-flow: dense;
	margin: 0px;
	padding: 0px;
}

.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);
}

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

.content {
	max-width: 600px;
	margin: 0 auto 0;
	padding: 20px;
}

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

#botones-container {
	display: grid;
	grid-gap: 10px;
	grid-auto-rows: minmax(50px, auto);
	grid-template-columns: repeat(4, 1fr);
}
	#botones-container button { margin:0px; }

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

audio {
	max-width: 200px;
	width: 100%;
}

.audio-player {
	max-width: 200px;
	width: 100%;
}

.recording-animation {
	width: 15px;
	height: 15px;
	background-color: var(--rojo);
	border-radius: 50%;
	display: inline-block;
	animation: blink 1s infinite;
}

@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.3; }
	100% { opacity: 1; }
}

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

label.texto {
	font-size: 13px;
	text-align: left;
	white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
	margin-top: 10px;
}

input[type=text], input[type=date], input[type=number], input[type="email"], input[type=password],
textarea {
	padding: 10px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 6px;
	outline: none;
	color: #333;
	background: #f9f7f6;
	border: 1px solid #e9e7e6;
	font-family: "Lato", Arial, sans-serif;
}

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

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

a.boton {
	display: inline-block;
	background-color: var(--gris4);
	color: var(--blanco);
	padding: 4px 8px;
	text-decoration: none;
	border-radius: 5px;
}

button.amarillo, a.amarillo { background-color: var(--amarillo); }
button.naranja, a.naranja { background-color: var(--naranja); }
button.limon, a.limon { background-color: var(--turquesa); }
button.verde, a.verde { background-color: var(--verde); }
button.rosa, a.rosa { background-color: var(--rosa); }
button.rojo, a.rojo { background-color: var(--rojo); }
button.azul, a.azul { background-color: var(--azul); }
button.gris, a.gris { background-color: var(--gris4); color:var(--blanco); }
button.oxford, a.oxford { background-color: var(--oxford); }
button.petroleo, a.petroleo { background-color: var(--petroleo); }
button.dorado, a.dorado { background-color: var(--dorado); }
button.plata, a.plata { background-color: var(--plata); }
button.bronce, a.bronce { background-color: var(--bronce); }
button.vino, a.vino { background-color: var(--vino); }
button.cielo, a.cielo { background-color: var(--cielo); }

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


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

#footer {
	margin-bottom: 30px;
}

#login {
	padding: 20px 20%;
}
	#login input { margin-bottom:10px; }


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

@font-face {
	font-family: "IcoFont";
	font-weight: normal;
	font-style: "Regular";
	src: url("./fonts/icofont.woff2") format("woff2"),
	url("./fonts/icofont.woff") format("woff");
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	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;
	/* Better Font Rendering =========== */
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}
.icon-opciones:before { content: "\efe2"; }
.icon-ubicacion:before { content: "\ef79"; font-size:25px; line-height:10px; }


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

.icon-ojover:before { content: "\ef24"; font-size:24px; line-height:24px; }
.icon-ojonover:before { content: "\ef22"; font-size:24px; line-height:24px; }

.login-form h2 {
	text-align: center;
	margin-bottom: 20px;
	color: var(--rojo);
	font-size: 24px;
}

.login-form button.logeo {
	font-size: 16px;
	font-weight: normal;
	margin-top: 25px;
}

button.login-eye {
	display: block;
	background: none;
	color: var(--naranja);
	font-weight: bold;
	box-shadow: none;
	padding: 8px 10px;
	margin: 0px auto 0;
	}
button.login-eye:hover { background: none; }

.custom-checkbox {
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
	display: inline-block;
	color: var(--gris);
}

.custom-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.custom-checkbox .checkmark {
	position: absolute;
	top: 50%;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: var(--alfa);
	border: 1px solid var(--gris6);
	border-radius: 3px;
	transform: translateY(-50%);
}

.custom-checkbox:hover .checkmark {
	background-color: var(--gris9);
}

.custom-checkbox input:checked ~ .checkmark {
	background-color: var(--naranja);
	border-color: var(--amarillo);
}

.custom-checkbox .checkmark::after {
	content: "";
	position: absolute;
	display: none;
	left: 6px;
	top: 2px;
	width: 4px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark::after {
	display: block;
}