/************ botones *************/

button,
button.login,
button.cielo, button.rojo,
a.boton {
	display: block;
	background: var(--naranja);
	color: #fff;
	border-radius: 4px;
	font-weight: bold;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	padding: 8px 10px;
	margin: 0 auto 0;
	}
button:hover, button.login:hover { background: var(--azul); }
button.login { margin:10px auto 10px; border-radius: 4px; }

button.cielo { background: var(--cielo); }
button.rojo { background: var(--rojo); }

button.mas, button.gris, button.verde, 
button.guardar, button.editar, button.eliminar, 
a.guardar, a.editar, a.eliminar,
a.negro, a.gris, a.azul, a.cielo, a.rojo, a.amarillo, a.naranja, a.verde, a.morado, a.rosa, a.cafe {
	display: block;
	position: relative;
	padding: 12px 16px;
	margin-bottom: 5px;
	color: #ffffff;
	border-radius: 6px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	background-color: var(--negro);
	z-index: 1;
	-webkit-box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	border: none;
	text-transform: uppercase;
}
	a.boton:hover, a.color1:hover, a.waze:hover { 
		top: 3px;
		background-color: var(--contraste2);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--negro)),to(var(--color1)));
		background-image: linear-gradient(var(--negro) 10%,var(--color1) 100%);
		-webkit-box-shadow: none; 
		-moz-box-shadow: none; 
		box-shadow: none;
		transition: all 0.5s;
	}
a.guardar, a.editar, a.eliminar, 
a.negro, a.gris, a.azul, a.cielo, a.rojo, a.amarillo, a.naranja, a.verde, a.morado, a.rosa, a.cafe { padding: 3px 5px; }

button.mas:hover, button.gris:hover, button.verde:hover, 
button.guardar:hover, button.editar:hover,
a.guardar:hover, a.editar:hover { background: var(--azul); }

a.cielo:hover { background: var(--negro); }
a.rojo:hover { background: var(--negro); }
a.morado:hover { background: var(--negro); }
a.rosa:hover { background: var(--negro); }

button.mas { background: var(--rojo2); }
button.gris { background: var(--gris9); }
button.verde { background: var(--verde); }
button.eiliminar:hover, a.eliminar:hover { background: var(--negro); }

button.centro { margin: 0 auto 0; }

a.guardar, button.guardar { background: var(--verde); }
a.editar, button.editar { background: var(--cielo); }
a.eliminar, button.eliminar { background: var(--rojo); }
a.imprimir {
	background: var(--cielo);
	padding: 5px 8px;
	color: var(--blanco);
	border-radius: 4px;
	font-size: 26px;
	font-weight: bold;
	line-height: 36px;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	margin: 0;
}
a.imprimir:hover { color: var(--dorado); background: var(--negro); }

a.codigoqr, a.terreno {
	padding: 5px 8px;
	font-size: 22px;
	font-weight: bold;
	line-height: 36px;
	color: var(--negro);
	background: var(--dorado);
	border-radius: 4px;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
a.terreno { background: var(--amarillo); }
a.codigoqr:hover { color: var(--negro); background: var(--naranja); }
a.terreno:hover { color: var(--negro); background: var(--naranja); }

a.accion {
	background: var(--naranja);
	padding: 8px 14px;
	color: var(--blanco);
	border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	margin: 0 auto 0;
	display: block;
	width: 100px;
}
a.accion:hover { color: var(--dorado); background: var(--marino); }

a.boton { width: 30px; padding: 5px; background: var(--fiuxa); }
a.boton:hover { background: var(--rata); }

a.marino { background: var(--marino); }
a.azul { background: var(--azul); }
a.cielo { background: var(--cielo); }
a.guinda { background: var(--guinda); }
a.rojo { background: var(--rojo); }
a.rosa { background: var(--rosa); }
a.violeta { background: var(--violeta); }
a.morado { background: var(--morado); }
a.cafe { background: var(--cafe); }
a.naranja { background: var(--naranja); }
a.amarillo { background: var(--amarillo); }
a.verde { background: var(--verde); }
a.negro { background: var(--negro); }
a.rata { background: var(--rata); }
a.gris { background: var(--gris); }
a.gris9 { background: var(--gris9); }
a.blanco { background: var(--blanco); }

a.centro { margin: 0 auto 0; }

/************ form input label *************/

form {
	margin: 0px;
}

label.texto {
	width: auto; /* Ajustar el ancho automáticamente al contenido */
	margin: 0;
	font-size: 13px;
	text-align: left;
	white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
    margin-right: 5px; /* Espacio entre el label y el input (ajusta según tus preferencias) */
}
label.texto strong { color: var(--naranja); }
label.textos {
	display: inline-block;
	width: 100%;
	margin: 10px 0px 0px 0px;
	font-size: 13px;
	line-height: 25px;
	text-align: left;
	color: var(--gris);
	float: left;
}
	label.radio {
		text-align: left;
		cursor: pointer;
		text-indent: 28px;
		font-size: 13px;
		color: var(--rata);
		overflow: visible;
		display: block;
		position: relative;
		margin: 0px 0px 0px 0px;
		padding-top: 5px;
	}
		label.radio strong { color: var(--negro); }
		label.radio:before {
			background: var(--plata);
			content:'';
			position: absolute;
			top: 3px;
			left: 0;
			width: 20px;
			height: 20px;
			border-radius: 100%;
		}
		label.radio:after {
			opacity: 0;
			content: '';
			position: absolute;
			width: 13px;
			height: 6px;
			background: transparent;
			top: 4px;
			left: 2px;
			border: 6px solid var(--cielo);
			border-top: none;
			border-right: none;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

input[type=radio] {
	visibility: hidden;
}

	input[type=radio]:checked + label:after {
		opacity: 1;
	}

input[type=text], input[type=date], input[type=number], input[type=password], input[type="email"] {
	width: 100%; 
	height: 30px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 13px;
	color: var(--azul);
	background: none;
	border-bottom: 1px solid var(--gris10);
}

	input[type=password] {
		margin-bottom: 10px;
	}

	input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, input[type=password]:focus, input[type="email"]:focus {
		border-bottom: 1px solid var(--cielo);
	}

textarea {
	width: 100%;
	color: var(--azul);
	background: none;
	box-sizing: border-box;
	min-width: 80px;
	height: 25px;
	font-size: 13px;
	line-height: 18px;
	padding-left: 5px;
	margin-bottom: 8px;
	border-bottom: 1px solid #dadada;
	resize: vertical;
	}

	textarea.basic {
		width: 100%;
		color: var(--azul);
		background: none;
		box-sizing: border-box;
		max-width: 300px;
		font-size: 13px;
		line-height: 18px;
		padding: 0px;
		margin: 0px;
		border: none;
		resize: vertical;
		}

	textarea.formulario {
		width: 100%; 
		margin: 0px;
		padding: 5px 0px;
		font-size: 16px;
		line-height: 21px;
		color: var(--azul);
		background: none;
		box-sizing: border-box;
		border-bottom: 1px solid var(--gris10);
	}


	/* Estilos para la barra de desplazamiento cuando se desplaza */
	textarea::-webkit-scrollbar {
		width: 6px; /* Ancho de la barra de desplazamiento */
	}

	textarea::-webkit-scrollbar-thumb {
		background-color: var(--plata); /* Color de la barra de desplazamiento */
	}

	textarea::-webkit-scrollbar-track {
		background-color: none; /* Color del riel de la barra de desplazamiento */
	}

select {
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 13px;
	color: var(--azul);
	border: none;
	background: none;
}


.opcioneslinea { float: left; display: block; width: 100%; }
.opcioneslinea > div { display: inline-block; }

input.formulario, .col-formulario input {
	width: 100%; 
	height: 20px;
	margin: 0px;
	padding: 5px 0px;
	font-size: 16px;
	color: var(--azul);
	background: none;
	border-bottom: 1px solid var(--gris10);
}
	.col-formulario textarea { font-size: 16px; }
	input.formulario:focus, .col-formulario input:focus, 
	.col-formulario textarea:focus {
		border-bottom: 1px solid var(--cielo);
	}

input.captura {
	width: 100%; 
	height: 20px;
	margin: 0 0 15px 0px;
	padding: 5px 0px;
	font-size: 16px;
	color: var(--azul);
	background: none;
	border-bottom: 1px solid var(--gris10);
}	
	input.captura:focus { border-bottom: 1px solid var(--rojo); }

input.basic, input.basic:focus {
	margin: 0px;
	padding: 0px;
	height: 20px;
	font-size: 13px;
	background: none;
	border: none;
	color: var(--azul);
}

input.tablath, input.tablath:focus {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color:var(--naranja);
	border: none;
}
input.tabla, input.tabla:focus {
	margin: 0;
	padding: 0;
	font-size: 13px;
	background: none;
	border: none;
}
input.tablaform {
	width: 100%; 
	height: 20px;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	color: var(--azul);
	background: none;
	border: none;
}

input.izquierda { text-align: left; }
input.centro { text-align: center; }
input.derecha { text-align: right; }

input.negro { color: var(--negro); }
input.gris { color: var(--gris); }
input.cielo { color: var(--cielo); }
input.violeta { color: var(--violeta); }
input.morado { color: var(--morado); }
input.naranja { color: var(--naranja); }
input.rosa { color: var(--rosa); }
input.verde { color: var(--verde); }
input.guinda { color: var(--guinda); }
input.vino { color: var(--vino); }
input.rojo { color: var(--rojo); }



input::placeholder { color: var(--gris10); }
textarea::placeholder { color: var(--gris10); }

/************ radio button custom *************/

.lbl{
	display: inline-block;
	width: 45px;
	height: 25px;
	background: var(--gris9);
	border-radius: 100px;
	cursor: pointer;
	position: relative;
	transition: .2s;
}
 
.lbl::after{
	content: '';
	display: block;
	width: 17px;
	height: 17px;
	background: #eee;
	border-radius: 100px;
	position: absolute;
	top: 4px;
	left: 4px;
	transition: .2s;
}
	.swtichek:checked + .lbl::after { left: 23px; }
	.swtichek:checked + .lbl { background: var(--cielo); }

	.swtichek.cafe:checked + .lbl { background: var(--cafe); }
	.swtichek.verde:checked + .lbl { background: var(--verde); }
	.swtichek.cielo:checked + .lbl { background: var(--cielo); }

	.swtichek { display: none; }

/*****/

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

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

.switch label { 
	min-width: 40px;
	background-color: var(--alpha);
	color: var(--gris);
	font-size: 13px;
	line-height: 1;
	text-align: center;
	padding: 7px 5px 5px 5px;
	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.Ene { border-radius: 5px 0px 0px 0px; }
.switch label.Abr { border-radius: 0px 5px 0px 0px; }
.switch label.Sep { border-radius: 0px 0px 0px 5px; }
.switch label.Dic { border-radius: 0px 0px 5px 0px; }

.switch label.Mujer, .switch label.Si { border-radius: 5px 0 0 5px; font-size: 13px; padding: 5px 10px; }
.switch label.Hombre, .switch label.No { border-radius: 0 5px 5px 0; font-size: 13px; padding: 5px 10px; }

.switch label:hover { cursor: pointer; }
.switch input:checked + label { background-color: var(--cielo); 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.negro2 { background-color: var(--negro2); 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; }

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

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

input.buscarbasic {
	width: 97%;
	height: 18px;
	padding: 8px;
	border: 1px solid var(--gris);
	border-radius: 5px;
	outline: none;
	color: var(--color);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
input.searchTerm::placeholder { opacity: 1; }

.buscar {
	width: 100%;
	position: relative;
	display: flex;
}

input.searchTerm {
	width: 100%;
	height: 18px;
	padding: 8px;
	border: 1px solid var(--gris);
	border-right: none;
	border-radius: 5px 0 0 5px;
	outline: none;
	color: var(--color);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
input.searchTerm::placeholder { opacity: 1; }

button.searchButton {
	width: 40px;
	height: 36px;
	text-align: center;
	color: var(--blanco);
	cursor: pointer;
	border-radius: 0 5px 5px 0;
	border: 1px solid var(--gris);
	background: var(--cielo);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
button.searchButton:hover { background: var(--azul); }


.caputra-manual, .dos-bloques, .tres-bloques {
	display: grid;
	grid-auto-rows: minmax(50px, auto);
	grid-template-columns: 2fr 3fr 3fr;
	grid-gap: 5px;
	padding: 0px;
	margin: 0px;
}

.dos-bloques, .tres-bloques { grid-gap: 0px; }

.dos-bloques { grid-template-columns: 1fr 1fr; }
.tres-bloques { grid-template-columns: 1fr 1fr 1fr; }

.bloque-captura {
	min-width: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	text-align: center;
	padding: 5px 2px;
	margin: 0px;
	border-radius: 8px;
	transition: background .2s ease;
}

.bloque-captura.activo {
	background: rgba(0,0,0,.04);
}

.bloque-captura label {
	font-size: 14px;
	font-weight: 600;
	display: block;
	margin-bottom: 10px;
	color: var(--cielo);
}

.celdas {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.celdas input {
	width: 44px;
	height: 44px;
	text-align: center;
	font-size: 16px;
	border: 1px solid #bbb;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1); 
	transition: all .15s ease;
}

.celdas input:focus {
	background: rgba(255, 255, 255, 0.85);
	border-color: #666;
	outline: none;
}

.celdas input[data-v="6"]  { background:#fdecea; border-color:#e74c3c; color: #922b21; }
.celdas input[data-v="7"] { background: #fff9e6; border-color: #f1c40f; color: #7d6608; }
.celdas input[data-v="8"] { background: #ebf5fb; border-color: #3498db; color: #1f618d; }
.celdas input[data-v="9"] { background: #f7f1fb; border-color: #b39ddb; color: #5e3b7e; }
.celdas input[data-v="10"] { background: #e9f7ef; border-color: #27ae60; color: #196f3d; }