@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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,
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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: "";
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
	font-family: "Montserrat";
	src: url("../font/Montserrat-VariableFont_wght.ttf");
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: "Montserrat" !important;
	background: #fff;
	transition: 0.3s;
	color: #000 !important;
}

input,
select,
textarea,
label {
	font-family: "Montserrat" !important;
}

/* #edf1f4 */
body.dark {
	background: #111;
}

body::-webkit-scrollbar {
	background: transparent;
	width: 5px;
}

body::-webkit-scrollbar-thumb {
	background: var(--color-primario);
	border-radius: 5000px;
}

a {
	text-decoration: none;
	color: unset;
}

:root {
	--color-primario: #008375;
}

/* CONTENEDOR GENERAL */
.contenedor-general {
	width: 100%;
	min-height: 100vh;
	height: max-content;
	position: relative;
	background: #f2f2f5;
	padding: 20px;
	display: flex;
	gap: 20px;
}

	.contenedor-general .seccion-titulo {
		font-weight: 700;
		font-size: 24px;
		transition: 0.3s;
		color: #09ad9c;
	}

	.contenedor-general h3 {
		font-weight: 600;
	}

.container__wrapper {
	width: 100%;
}

.container__wrapper {
	height: calc(100vh - 40px);
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
}

	.container__wrapper::-webkit-scrollbar,
	.wrapper-section::-webkit-scrollbar {
		background: transparent;
		width: 0px;
	}

	.container__wrapper::-webkit-scrollbar-thumb,
	.wrapper-section::-webkit-scrollbar-thumb {
		background: var(--color-primario);
		border-radius: 5000px;
	}

.wrapper-section {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

/*HEADER*/
header {
	width: 100%;
	height: max-content;
	background: #fff;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	z-index: 11;
	padding: 15px 25px;
	border-radius: 30px;
	border: 1px solid #e1eddf;
	position: sticky;
	top: 0;
}

body.dark header {
	background: #111;
	transition: 0.3s;
}

header .btns-right-header {
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
}

header svg {
	fill: var(--color-primario);
	width: 20px;
	height: 20px;
	border-radius: 6px;
	cursor: pointer;
}

.btn-darkmode {
	width: 40px;
	height: 20px;
	background: var(--color-primario);
	border-radius: 25px;
	position: relative;
}

	.btn-darkmode::after {
		content: "";
		position: absolute;
		left: 0px;
		top: 50%;
		transform: translateY(-50%);
		width: 19px;
		height: 19px;
		border-radius: 25px;
		background: #fff;
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 1);
		cursor: pointer;
		transition: 0.3s;
	}

body.dark .btn-darkmode::after {
	left: 20px;
}

.icono-cerrar-sesion {
	width: 16px;
}

/*MENU IZQUIERDO*/
.menu-izquierdo-container {
	width: 300px;
	height: calc(100vh - 40px);
	background-color: #fff;
	padding: 25px;
	transition: 0.3s;
	overflow: hidden;
	border-radius: 40px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #e1eddf;
}

body.open .menu-izquierdo-container {
	display: flex;
}

.logo-menu {
	width: 140px;
}

.menu__izq-wrapper {
	width: 100%;
	position: relative;
	height: 75%;
}

.menu__izq-sipn {
	height: 100%;
	overflow-y: scroll;
	width: 100%;
	position: relative;
	padding-bottom: 100px;
}

.menu__izq-wrapper::after {
	content: "";
	position: absolute;
	height: 100px;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}

.menu__izq-sipn::-webkit-scrollbar {
	background: transparent;
	width: 0px;
}

.menu__izq-sipn::-webkit-scrollbar-thumb {
	background: var(--color-primario);
	border-radius: 5000px;
}

.menu__izq-wrapper h2 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	color: #a6aec1;
}

.menu__izq-submodules {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding-left: 10px;
}

	.menu__izq-submodules a {
		display: flex !important;
		gap: 10px;
		outline: none;
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
		transition: .3s;
	}


		.menu__izq-submodules a:hover {
			color: #09ad9c;
		}

		.menu__izq-submodules a figure {
			width: 18px;
			height: 18px;
		}

			.menu__izq-submodules a figure svg {
				fill: #09ad9c;
			}

.menu__izq-module {
	margin-bottom: 25px;
}

.info__empleado {
	height: max-content;
}

	.info__empleado p {
		font-size: 14px;
	}
/* RUTAS */
.ruta {
	margin: 10px 6px 15px;
	font-weight: 500;
	font-size: 14px;
	pointer-events: none;
}

	.ruta span {
		opacity: 0.5;
	}

		.ruta span.ubicacion-actual {
			opacity: 1;
		}

		.ruta span.ruta_empresa_jcjf,
		.ruta span.ruta_empresa_sg {
			display: none;
		}

body.vistaJCJF .ruta span.ruta_empresa_jcjf {
	display: inline-block;
}

body.vistaShipGo .ruta span.ruta_empresa_sg {
	display: inline-block;
}

/* FOOTER */
.footer-sitemtickets {
	width: 100%;
	text-align: center;
	padding: 10px 0;
	color: #6c788e;
}

body.dark .footer-sitemtickets {
	color: #fff;
}

.footer-sitemtickets h1 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 5px;
}

.footer-sitemtickets h2 {
	font-size: 12px;
	font-weight: 500;
}

/*INGRESO A LA EMPRESA*/
.empresas-container {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
}

	.empresas-container .card-logos-group {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

		.empresas-container .card-logos-group.group-sandg {
			background: #c2002c;
		}

		.empresas-container .card-logos-group.group-jcjfcargo {
			background: #008375;
		}

		.empresas-container .card-logos-group img {
			width: 300px;
			height: 300px;
			pointer-events: none;
			transition: 0.3s;
		}

		.empresas-container .card-logos-group:hover img {
			transform: translateY(-50px);
		}

		.empresas-container .card-logos-group .card-logos-group-buttons {
			width: max-content;
			height: mac-content;
			margin-top: 0px;
		}

			.empresas-container .card-logos-group .card-logos-group-buttons a {
				margin: 0 20px;
				padding: 8px 100px;
				border-radius: 5px;
				font-size: 14px;
				color: #fff;
				font-weight: 600;
				cursor: pointer;
				border: 2px solid transparent;
			}

		.empresas-container .card-logos-group.group-sandg .card-logos-group-buttons a {
			background: #89001f;
		}

		.empresas-container
		.card-logos-group.group-jcjfcargo
		.card-logos-group-buttons
		a {
			background: #005f54;
		}

		.empresas-container
		.card-logos-group.group-sandg
		.card-logos-group-buttons
		a:hover {
			border: 2px solid white;
		}

		.empresas-container
		.card-logos-group.group-jcjfcargo
		.card-logos-group-buttons
		a:hover {
			border: 2px solid white;
		}

	.empresas-container .container-txt {
		position: absolute;
		margin-left: 4%;
		margin-top: 2%;
		color: #fff;
	}

		.empresas-container .container-txt h1 {
			font-size: 64px;
			font-weight: 700;
			position: relative;
			transform: translateX(-2px);
		}

		.empresas-container .container-txt p {
			margin-top: 10px;
		}

		.empresas-container .container-txt h1 span#o,
		.empresas-container .container-txt h1 span#a {
			position: absolute;
			transition: 0.2s;
		}

		.empresas-container .container-txt h1 span#o {
			animation: 5s desaparecer infinite;
		}

		.empresas-container .container-txt h1 span#a {
			animation: 5s desaparecer infinite 2.5s;
		}

@keyframes desaparecer {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*ESTILOS DE LOS FORMULARIOS DE INGRESO Y DE REGISTRO*/
.formulario-container {
	width: 100%;
	min-height: 100vh;
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-image: url("../img/fondo-verde-2.svg");
}

	.formulario-container .login-box {
		width: 500px;
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		padding: 50px 50px;
		backdrop-filter: blur(20px);
		background: rgb(0, 0, 0);
		background: radial-gradient( circle, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100% );
		color: #fff;
	}


	.formulario-container.empresa_shipandgo .login-box {
		background: rgb(0, 0, 0);
		background: radial-gradient( circle, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100% );
		color: #fff;
	}

	.formulario-container.formulario-pase-lista .login-box {
		background-image: url("../../img/fondo_credencial.svg");
		background-size: cover;
		background-position: center;
		object-fit: cover;
		color: #54565a;
		width: 400px;
	}

	.formulario-container .login-box:hover,
	.formulario-container .login-box.login_box_active {
		box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.formulario-container.formulario-pase-lista .login-box {
		padding: 0px 0px;
		border: none;
	}

		.formulario-container.formulario-pase-lista .login-box .foto-empleado {
			width: 100%;
			height: 150px;
			background-image: url("../../img/fondo_credencial_verde.svg");
			background-size: cover;
			background-position: center;
			border-radius: 8px 8px 0 0;
			margin-bottom: 50px;
			position: relative;
		}

			.formulario-container.formulario-pase-lista
			.login-box
			.foto-empleado
			.img-emp-container {
				width: 140px;
				height: 140px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -45px;
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}

				.formulario-container.formulario-pase-lista
				.login-box
				.foto-empleado
				.img-emp-container
				img {
					width: 120px;
					height: 125px;
					border-radius: 50%;
				}

	.formulario-container .login-box .logo-container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 200px;
		height: 80px;
		margin: auto;
	}

	.formulario-container.formulario-pase-lista .login-box .logo-container {
		margin: 25px auto 0;
	}

	.formulario-container.formulario-pase-lista .login-box .informacion-pase-lista {
		text-align: center;
		padding: 0 50px;
	}

		.formulario-container.formulario-pase-lista .login-box .informacion-pase-lista h3 {
			font-weight: 600;
			font-size: 16px;
			margin: 10px 0 6px 0;
		}

		.formulario-container.formulario-pase-lista .login-box .informacion-pase-lista.registro-horas {
			text-align: left;
		}

		.formulario-container.formulario-pase-lista .login-box .informacion-pase-lista p {
			font-size: 15px;
			line-height: 1.5;
		}

	.formulario-container .login-box .logo-container img {
		width: 100%;
		position: absolute;
		opacity: 0;
		opacity: 1;
	}



	.formulario-container .login-box h1 {
		text-align: center;
		font-size: 24px;
		font-weight: 600;
		margin-top: 15px;
		margin-bottom: 20px;
	}

	.formulario-container .login-box h2 {
		text-align: center;
		font-size: 22px;
		font-weight: 500;
		margin-bottom: 40px;
	}

	.formulario-container .login-box .login_group {
		margin: 20px 0;
	}

	.formulario-container.formulario-pase-lista .login-box .login_group {
		padding: 0 50px;
	}

	.formulario-container .login-box .login_group label {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.formulario-container.formulario-pase-lista .login-box .login_group {
		text-align: center;
	}

	.formulario-container .login-box .login_group .login-input-group {
		position: relative;
		padding: 2px;
		border-radius: 5px;
		overflow: hidden;
		transition-delay: 0.4s;
		margin: 10px 0;
	}

		.formulario-container .login-box .login_group .login-input-group span {
			position: absolute;
			background: #fff;
			transition: 0.2s;
		}

	.formulario-container.empresa_shipandgo .login-box .login-input-group span {
		background: #1f419a;
	}

	.formulario-container.formulario-pase-lista .login-box .login_group .login-input-group span {
		background: #008375;
	}

	.formulario-container .login-box .login_group .login-input-group span.effect-input-line-top {
		top: 0;
		left: 0;
		width: 0%;
		height: 2px;
	}

	.formulario-container .login-box .login_group .login-input-group:hover span.effect-input-line-top,
	.formulario-container .login-box .login_group .login-input-group-active span.effect-input-line-top {
		width: 100%;
		transition-delay: 0.1s;
	}

	.formulario-container .login-box .login_group .login-input-group span.effect-input-line-right {
		top: 0;
		right: 0;
		width: 2px;
		height: 0%;
	}

	.formulario-container .login-box .login_group .login-input-group:hover span.effect-input-line-right,
	.formulario-container .login-box .login_group .login-input-group-active span.effect-input-line-right {
		height: 100%;
		transition-delay: 0.3s;
	}

	.formulario-container .login-box .login_group .login-input-group span.effect-input-line-bottom {
		bottom: 0;
		right: 0;
		width: 0%;
		height: 2px;
	}

	.formulario-container .login-box .login_group .login-input-group:hover span.effect-input-line-bottom,
	.formulario-container .login-box .login_group .login-input-group-active span.effect-input-line-bottom {
		width: 100%;
		transition-delay: 0.5s;
	}

	.formulario-container
	.login-box
	.login_group
	.login-input-group
	span.effect-input-line-left {
		bottom: 0;
		left: 0;
		width: 2px;
		height: 0%;
	}

	.formulario-container
	.login-box
	.login_group
	.login-input-group:hover
	span.effect-input-line-left,
	.formulario-container
	.login-box
	.login_group
	.login-input-group-active
	span.effect-input-line-left {
		height: 100%;
		transition-delay: 0.7s;
	}

	.formulario-container
	.login-box
	.login_group
	.login-input-group-invalid
	span.effect-input-line-left {
		height: 100%;
		transition-delay: 0.4s;
		background: #ff2047;
	}

	.formulario-container .login-box .login_group .login-input-group input {
		width: 100%;
		margin: 0px 0;
		height: 35px;
		padding: 0px 10px;
		border-radius: 2px;
		outline: none;
		border: 0px solid transparent;
		font-size: 14px;
		transition-delay: 0.8s;
		color: #fff;
		background: rgba(0, 131, 117, 1);
	}

		.formulario-container
		.login-box
		.login_group
		.login-input-group
		input::placeholder {
			font-weight: 500;
			color: #fff;
			opacity: 0.7;
		}

	.formulario-container.formulario-pase-lista
	.login-box
	.login_group
	.login-input-group
	input {
		text-align: center;
		background: #f2f2f2;
		color: #54565a;
	}

		.formulario-container.formulario-pase-lista
		.login-box
		.login_group
		.login-input-group
		input::placeholder {
			color: #54565a;
			font-weight: 500;
			opacity: 0;
		}

	.formulario-container .login-box .login_group .login-input-group img {
		position: absolute;
		z-index: 100;
		top: 50%;
		transform: translateY(-50%);
		right: 22px;
		width: 26px;
		pointer-events: none;
	}

	.formulario-container .login-box .login_group .login-input-group .ver-password {
		position: absolute;
		z-index: 100;
		top: 50%;
		transform: translateY(-50%);
		right: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		outline: none;
		padding: 0px;
		background: none;
		cursor: pointer;
		background: var(--color-primario);
	}

		.formulario-container .login-box .login_group .login-input-group .ver-password svg {
			width: 22px;
			fill: currentColor;
			pointer-events: none;
		}

			.formulario-container
			.login-box
			.login_group
			.login-input-group
			.ver-password
			svg.seen {
				display: none;
			}

	.formulario-container .login-box .buttons-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

		.formulario-container .login-box .buttons-container .btn-entrar {
			width: 100%;
			position: relative;
			padding: 10px 0;
			border: none;
			border-radius: 5px;
			margin-top: 10px;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			background: #fff;
			color: #008375;
		}

		.formulario-container .login-box .buttons-container .forgotten_password {
			font-size: 14px;
			margin-top: 10px;
			font-weight: 600;
			cursor: pointer;
			color: #fff;
		}


.btn-exit-of-login {
	position: absolute;
	top: 2%;
	left: 2%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	padding: 8px 30px;
	border-radius: 5px;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
	font-weight: 600;
	background: #fff;
	color: #008375;
}

	.btn-exit-of-login:hover {
		text-decoration: none;
	}


.formulario-container .btn-exit-of-login img {
	width: 20px;
	display: none;
}

.formulario-container .btn-exit-of-login p {
	margin-bottom: 0;
}

.formulario-container.empresa_jcjfcargo .btn-exit-of-login img.i-exit-green {
	display: block;
}

.formulario-container.empresa_shipandgo .btn-exit-of-login img.i-exit-white {
	display: block;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
	.formulario-container {
		padding: 100px 0;
	}

		.formulario-container .login-box {
			width: 95%;
			padding: 80px 15px;
		}
}

@media screen and (min-width: 769px) and (max-width: 1360px) {
	.formulario-container {
		padding: 50px 0;
	}

		.formulario-container .login-box {
			width: 450px;
			border-radius: 10px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			padding: 40px 40px;
			backdrop-filter: blur(20px);
		}

		.formulario-container.empresa_jcjfcargo .login-box .logo-container {
			width: 180px;
		}

		.formulario-container.empresa_shipandgo .login-box .logo-container {
			width: 160px;
		}

		.formulario-container .login-box .login_group label {
			font-size: 14px;
			margin-bottom: 0;
			font-weight: 600;
		}
}

.cambiar-password {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
}

body.dark .cambiar-password {
	color: #fff;
}

/*FILTTERS*/
.filtters {
	display: flex;
	align-items: flex-end;
	margin-top: 25px;
	gap: 15px;
}

	.filtters .filtter-group {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

		.filtters .filtter-group input {
			width: 100%;
			height: 40px;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 10px;
			padding: 0 10px;
			font-size: 14px;
			outline: none;
			border: 1px solid transparent;
			transition: 0.3s;
			font-family: Montserrat;
		}

			.filtters .filtter-group input:hover,
			.filtters .filtter-group input:focus {
				border: 1px solid #008375;
			}

/*CALENDARIO*/
.calendar-container {
	display: flex;
	flex-wrap: wrap;
}

.calendar-row {
	display: flex;
	width: 100%;
	justify-content: space-around;
}

.calendar-cell {
	display: flex;
	align-items: center;
	gap: 10px;
}

	.calendar-cell asp:CheckBox {
		margin: 0 auto;
	}

/*FORMULARIO EMERGENTE*/
.formulario-emergente {
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	transition: 0.3s;
}

	.formulario-emergente.mostrar-ventana-emergente {
		opacity: 1;
		pointer-events: all;
	}

	.formulario-emergente .form-container {
		background: #fff;
		width: 400px;
		padding: 25px 25px;
		border-radius: 5px;
		border: 1px solid rgba(0, 0, 0, 0.4);
	}

		.formulario-emergente .form-container h1 {
			font-size: 22px;
			font-weight: 600;
		}

		.formulario-emergente .form-container .fe-grupo {
			margin: 15px 0;
		}

			.formulario-emergente .form-container .fe-grupo label {
				margin-bottom: 15px;
				font-weight: 500;
				font-size: 14px;
			}

			.formulario-emergente .form-container .fe-grupo input {
				width: 100%;
				height: 30px;
				border: none;
				background: rgba(0, 0, 0, 0.05);
				border-radius: 5px;
				padding: 0 10px;
				font-size: 14px;
				outline: none;
			}

		.formulario-emergente .form-container .fe-grupo-botones {
			margin-top: 30px;
			display: flex;
			justify-content: flex-end;
			gap: 10px;
		}

			.formulario-emergente .form-container .fe-grupo-botones .fe-boton {
				border: 2px solid var(--color-primario);
				background: var(--color-primario);
				color: #fff;
				font-weight: 500;
				padding: 7px 10px;
				border-radius: 25px;
				font-size: 14px;
			}

				.formulario-emergente
				.form-container
				.fe-grupo-botones
				.fe-boton.fe-boton-borde {
					background: none;
					color: var(--color-primario);
				}

					.formulario-emergente
					.form-container
					.fe-grupo-botones
					.fe-boton.fe-boton-borde:hover {
						background: var(--color-primario);
						color: #fff;
					}

.formulario-container-modal {
	background: #fff;
	width: max-content;
	height: max-content;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 25px;
	border-radius: 5px;
}

@media screen and (max-width: 1440px) {
	.formulario-container-modal {
		top: 10%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
}

body.dark .formulario-container-modal {
	background: #222;
}

.formulario-container-modal h1 {
	font-size: 22px;
	font-weight: 700;
}

.formulario-container-modal h2 {
	font-size: 16px;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 5px;
}

.formulario-container-modal .controles-solicitud-permisos {
	margin-top: 10px;
	width: 400px;
}

	.formulario-container-modal .controles-solicitud-permisos label {
		font-size: 14px;
		font-weight: 500;
		margin: 0 5px;
	}

.form-group-modal {
	flex-direction: column;
	display: flex;
	margin: 15px 0;
	width: 100%;
}

	.form-group-modal .label {
		margin-bottom: 5px;
		font-weight: 500;
		font-size: 14px;
	}

	.form-group-modal input,
	.form-group-modal select {
		width: 100%;
		height: 35px;
		background: rgba(0, 0, 0, 0.05);
		border-radius: 5px;
		padding: 0 10px;
		font-size: 14px;
		outline: none;
		border: 1px solid transparent;
		transition: 0.3s;
	}

	.form-group-modal textarea {
		width: 100%;
		height: 80px;
		border: none;
		background: rgba(0, 0, 0, 0.05);
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		outline: none;
		transition: 0.3s;
		resize: none;
	}

body.dark .form-group-modal input,
body.dark .form-group-modal select,
body.dark .form-group-modal textarea {
	background: rgba(255, 255, 255, 0.1);
}

.form-group-modal input:hover,
.form-group-modal select:hover,
.form-group-modal textarea:hover,
.form-group-modal input:focus,
.form-group-modal select:focus,
.form-group-modal textarea:focus {
	border: 1px solid var(--color-primario);
}

input[type="checkbox"]:checked {
	accent-color: var(--color-primario);
}

.radios_groups_h_container {
	display: flex;
	gap: 10px;
}

.group_radio_h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

	.group_radio_h label {
		margin-bottom: 0px !important;
	}

	.group_radio_h input {
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
	}

.formulario-container-modal .tabla-permisos-grupo {
	font-size: 14px;
	font-weight: 500;
	border-collapse: separate;
	border-spacing: 5px;
}

.formulario-container-modal .fg-modal-botones {
	margin-top: 30px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.fg-boton {
	border: 2px solid var(--color-primario);
	background: var(--color-primario);
	color: #fff;
	font-weight: 500;
	padding: 7px 10px;
	border-radius: 15px;
	font-size: 14px;
	transition: .3s;
}

	.fg-boton.fg-boton-borde {
		background: none;
		color: var(--color-primario);
	}

body.dark .fg-boton.fg-boton-borde {
	color: #fff;
}

.formulario-container-modal .fg-modal-botones .fg-boton.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.fg-boton.fg-boton-borde:hover {
	background: var(--color-primario);
	color: #fff;
}

/* TABLAS */
.table-container {
	width: 100%;
	height: max-content;
	background: #fff;
	border-radius: 40px;
	padding: 40px;
	border: 1px solid #e1eddf;
}

	.table-container .table-content {
		width: 100%;
		overflow-x: scroll;
		padding: 25px 0px;
	}

		.table-container .table-content::-webkit-scrollbar {
			background: transparent;
			height: 6px;
		}

		.table-container .table-content::-webkit-scrollbar-thumb {
			background: var(--color-primario);
			border-radius: 5000px;
		}

		.table-container .table-content table {
			min-width: 100%;
			border-spacing: 10px;
			border-collapse: separate !important;
			table-layout: fixed;
		}

			.table-container .table-content table tr {
				border-bottom: 1px solid rgba(135, 135, 135,.25);
			}

				.table-container .table-content table tr th {
					font-size: 12px;
					text-align: center;
					min-width: max-content;
					position: relative;
					font-weight: 600;
					padding: 15px 0;
					transition: 0.2s;
				}

				.table-container .table-content table tr td {
					text-align: center;
					padding: 6px 10px;
					font-size: 12px;
					font-weight: 500;
					position: relative;
					vertical-align: middle;
					line-height: 1.5;
					transition: 0.2s;
					white-space: nowrap;
					background: #f7f8fc;
					border-radius: 13px;
				}

					.table-container .table-content table tr td

					.table-container .table-content table tr td span {
						font-weight: 600;
					}

		.table-container .table-content.align-text-left table tr td {
			text-align: left;
		}

		.table-container .table-content table tr td a.tabla-btn-accion {
			margin: 0 4px;
			cursor: pointer;
		}

			.table-container .table-content table tr td a.tabla-btn-accion svg {
				width: 18px;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-validar-solicitud
			svg {
				fill: #05c775;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-cancelar-solicitud
			svg {
				fill: #cc0f0f;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-ver-solicitud
			svg {
				fill: #0fbfcc;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-rechazar-solicitud
			svg {
				fill: #cc0f0f;
			}

			/* .table-container .table-content table tbody tr td a.tabla-btn-accion.ba- svg{
  fill: #fb0c06;
} */
			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-eliminar-solicitud
			svg {
				fill: #cc0f0f;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-aceptar-cancelacion
			svg {
				fill: #f56217;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-rechazar-cancelacion
			svg {
				fill: #cc0f0f;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-editar
			svg {
				fill: #1ca39e;
			}

			.table-container
			.table-content
			table
			tr
			td
			a.tabla-btn-accion.ba-password
			svg {
				fill: #7345d6;
			}

body.dark .table-container .table-content table tr td,
body.dark .table-container .table-content.show-bg-lastchild table tr td:last-child {
	background: #222;
	color: #fff
}

.table-container .table-content table tr td p {
	line-height: 1.5;
}

	.table-container .table-content table tr td p a.bold {
		font-weight: 700;
	}

.table-container
.table-content
table.tabla-lista-empleados
tbody
tr
td:nth-of-type(2),
.table-container
.table-content
table.tabla-lista-empleados
tbody
tr
td:nth-of-type(3) {
	text-align: left;
	padding-left: 20px;
}

.table-container .table-content table tr td:last-child,
body.dark .table-container .table-content table tr td:last-child {
	background: none;
	box-shadow: none;
	width: 150px;
}

.table-container .table-content.show-bg-lastchild table tr td:last-child {
	background: #f2f4f8;
	box-shadow: none;
	width: auto;
}

.table-container .table-content table.tabla-asistencia tr td:last-child {
	background: #f2f4f8;
	/* box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05); */
	width: auto;
}

body.dark
.table-container
.table-content
table.tabla-asistencia
tr
td:last-child {
	background: #222;
}

.table-container .table-content table tr td.estatus-activo,
body.dark .table-container .table-content table tr td.estatus-activo {
	background: #05c775;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table tr td.estatus-inactivo,
body.dark .table-container .table-content table tr td.estatus-inactivo {
	background: #cc0f0f;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table tr td.estatus-enviado,
body.dark .table-container .table-content table tr td.estatus-enviado {
	background: #0fbfcc;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table tr td.estatus-rechazado,
body.dark .table-container .table-content table tr td.estatus-rechazado {
	background: #f0c505;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table tr td.estatus-validar-solicitud,
body.dark
.table-container
.table-content
table
tr
td.estatus-validar-solicitud {
	background: #f56217;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table tr td.estatus-validar,
body.dark .table-container .table-content table tr td.estatus-validar {
	background: #1c31a5;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table tr td.estatus-proceso-cancelacion,
body.dark
.table-container
.table-content
table
tr
td.estatus-proceso-cancelacion {
	background: #468b06;
	color: #fff;
	font-weight: 600;
}

.table-container .table-content table.lista-usuarios tr td:last-child {
	min-width: 160px;
}

.table-container .table-content table tr td.acciones__table {
	border: 1px solid transparent;
}
/*CONTROLES DEL FOOTER DE LAS TABLAS */
.controls-table {
	height: max-content;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
	margin-top: 20px;
	font-weight: 600;
	font-size: 14px;
}

	.controls-table .cambiar-tabla-controles {
		display: flex;
		align-items: center;
		gap: 5px;
	}

		.controls-table .cambiar-tabla-controles li {
			background: transparent;
			color: var(--color-primario);
			padding: 5px 10px;
			transition: 0.3s;
			border-radius: 5px;
		}

			.controls-table .cambiar-tabla-controles li.contador-pagina {
				background: var(--color-primario);
				color: #fff;
			}

/*CONTROLES DEL HEADER DE LAS TABLAS */
.controls-table-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1%;
	margin-top: 20px;
}

	.controls-table-header .control-search {
		display: flex;
		align-items: center;
		height: max-content;
		width: 300px;
		position: relative;
	}

		.controls-table-header .control-search .search {
			background: none;
			outline: none;
			border: 2px solid var(--color-primario);
			height: 35px;
			border-radius: 5000px;
			padding-left: 20px;
			width: 100%;
			font-size: 14px;
		}

		.controls-table-header .control-search .search-btn {
			position: absolute;
			right: 2%;
			border: none;
			background: none;
			outline: none;
			color: var(--color-primario);
		}

	.controls-table-header .botones-header {
		display: flex;
		gap: 10px;
	}

	.controls-table-header .bh-btn {
		border: 2px solid var(--color-primario);
		background: var(--color-primario);
		color: #fff;
		font-weight: 500;
		padding: 6px 20px;
		border-radius: 25px;
		font-size: 14px;
		position: relative;
	}

		.controls-table-header .bh-btn.bh-btn-borde {
			background: none;
			color: var(--color-primario);
			font-weight: 600;
		}

	.controls-table-header .bh-btn-mostrar-list:hover .mostrar-list,
	.controls-table-header .bh-btn-mostrar-list:hover .mostrar-list:hover {
		opacity: 1;
		pointer-events: all;
	}

	.controls-table-header .bh-btn .mostrar-list {
		position: absolute;
		background: #fff;
		color: #6c788e;
		text-align: right;
		padding: 10px 0px;
		z-index: 1;
		top: 105%;
		right: 0;
		width: 150px;
		border-radius: 10px;
		border: 1px solid rgba(0, 0, 0, 0.2);
		pointer-events: none;
		opacity: 0;
		transition: 0.2s;
	}

body.dark .controls-table-header .bh-btn .mostrar-list {
	background: #222;
	color: #fff;
}

.controls-table-header .bh-btn .mostrar-list li {
	padding: 6px 20px;
	width: 100%;
}

	.controls-table-header .bh-btn .mostrar-list li.active,
	.controls-table-header .bh-btn .mostrar-list li.active:hover {
		background: var(--color-primario);
		color: #fff;
	}

	.controls-table-header .bh-btn .mostrar-list li:hover {
		background: #eee;
	}
/*PERFIL DE LA EMPRESA*/
.card-profile {
	display: flex;
	gap: 50px;
	padding: 0px 15px;
	margin-top: 20px;
	color: #2e3a56;
}

	.card-profile .card-image-container {
		background-color: #fff;
		width: max-content;
		height: max-content;
		padding: 30px;
		border-radius: 5px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
		text-align: center;
	}

body.dark .card-profile .card-image-container {
	background: #222;
}

.card-profile .card-image-container img {
	width: 200px;
	margin: auto;
	margin-bottom: 20px;
}

.card-profile .card-image-container h1 {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 5px;
}

.card-profile .card-image-container p {
	font-weight: 500;
	font-size: 16px;
}

body.dark .card-profile .card-image-container p {
	color: #fff;
}

.card-profile .card-form-contaiter {
	background-color: #fff;
	padding: 30px;
	border-radius: 5px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	width: 100%;
	overflow-x: hidden;
	height: max-content;
	transition: 0.5s;
}

body.dark .card-profile .card-form-contaiter {
	background: #222;
	color: #fff;
}

.card-profile .card-form-contaiter .card-controls {
	display: flex;
	gap: 20px;
	width: max-content;
	height: max-content;
	margin-bottom: 25px;
}

	.card-profile .card-form-contaiter .card-controls p {
		background: rgba(0, 0, 0, 0.03);
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
		transition: 0.5s;
	}

body.dark .card-profile .card-form-contaiter .card-controls p {
	background: rgba(255, 255, 255, 0.1);
}

	.card-profile .card-form-contaiter .card-controls p.card-control-activo,
	.card-profile .card-form-contaiter .card-controls p:hover,
	body.dark
	.card-profile
	.card-form-contaiter
	.card-controls
	p.card-control-activo,
	body.dark .card-profile .card-form-contaiter .card-controls p:hover {
		background: var(--color-primario);
		color: #fff;
	}

.card-profile .card-form-contaiter .card-form-flexbox {
	width: 100%;
	height: max-content;
	display: flex;
	transition: 0.5s;
	overflow: hidden;
}

	.card-profile .card-form-contaiter .card-form-flexbox .form__card {
		width: 100%;
		display: none;
	}

		.card-profile .card-form-contaiter .card-form-flexbox .form__card.show__card {
			display: block;
		}


.card-profile .card-form-contaiter .card-form-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
	width: 100%;
}

.card-profile .card-form-contaiter .grupo-horario-laboral {
	margin: 20px 0;
	padding: 20px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.card-profile .card-form-contaiter .flexbox-grupos {
	display: flex;
	gap: 10px;
}

.card-profile .card-form-contaiter h4 {
	font-size: 20px;
	margin-bottom: 20px;
	font-weight: 700;
}

.card-profile .card-form-contaiter .card-form-group label {
	font-size: 16px;
	font-weight: 500;
}

.card-profile .card-form-contaiter .card-form-group span {
	font-size: 14px;
}

.card-profile .card-form-contaiter .card-form-group input,
.card-profile .card-form-contaiter .card-form-group select {
	height: 35px;
	padding: 0px 10px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,.05);
	outline: none;
	background: transparent;
	font-size: 14px;
}

	.card-profile .card-form-contaiter .card-form-group select.max-content {
		height: max-content;
	}

.card-profile .card-form-contaiter .card-form-input-password {
	position: relative;
}

	.card-profile .card-form-contaiter .card-form-input-password input {
		width: 100%;
	}

.card-profile .card-form-contaiter .card-form-group input.btn-generar-password {
	background: var(--color-primario);
	color: #fff;
	font-weight: 500;
}

.card-profile .card-form-contaiter .card-form-input-password .ver-password {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5px;
	background: none;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-profile .card-form-contaiter .card-form-input-password svg {
	width: 22px;
}

	.card-profile .card-form-contaiter .card-form-input-password svg.seen {
		display: none;
	}

.card-profile .card-form-contaiter .card-form-group input[type="file"],
body.dark
.card-profile
.card-form-contaiter
.card-form-group
input[type="file"] {
	background: none;
}

body.dark .card-profile .card-form-contaiter .card-form-group input,
body.dark .card-profile .card-form-contaiter .card-form-group select {
	background: rgba(255, 255, 255, 0.1);
}

body.dark select option {
	background: #333;
}

.card-profile .card-submit-container {
	margin-top: 25px;
}

	.card-profile .card-submit-container .btn__registrar {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding: 12px 50px;
		border: none;
		background: var(--color-primario);
		color: #fff;
		border-radius: 5px;
		font-weight: 500;
	}

.ver-perfil-empleado .vpe-header {
	width: 100%;
	text-align: center;
}

	.ver-perfil-empleado .vpe-header .vpe-header-img {
		width: 120px;
		margin: auto;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15px;
	}

		.ver-perfil-empleado .vpe-header .vpe-header-img img {
			width: 100px;
		}

	.ver-perfil-empleado .vpe-header h1 {
		font-size: 18px;
		font-weight: 700;
	}

.ver-perfil-empleado .vpe-body {
	margin-top: 20px;
	width: 100%;
	overflow: hidden;
}

	.ver-perfil-empleado .vpe-body .vpe-body-controls {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}

		.ver-perfil-empleado .vpe-body .vpe-body-controls p {
			background: rgba(0, 0, 0, 0.03);
			padding: 8px 14px;
			border-radius: 5px;
			cursor: pointer;
			transition: 0.5s;
			font-size: 14px;
			font-weight: 500;
		}

			.ver-perfil-empleado .vpe-body .vpe-body-controls p.card-control-activo,
			.ver-perfil-empleado .vpe-body .vpe-body-controls p:hover {
				background: var(--color-primario);
				color: #fff;
			}

	.ver-perfil-empleado .vpe-body .vpe-body-flexbox {
		margin-top: 20px;
		display: flex;
		width: 200%;
		transition: 0.5s;
	}

		.ver-perfil-empleado .vpe-body .vpe-body-flexbox .vpe-body-grupos {
			width: 100%;
		}

			.ver-perfil-empleado
			.vpe-body
			.vpe-body-flexbox
			.vpe-body-grupos:nth-of-type(2) {
				height: 350px;
				overflow-y: scroll;
			}

			.ver-perfil-empleado
			.vpe-body
			.vpe-body-flexbox
			.vpe-body-grupos::-webkit-scrollbar {
				background: transparent;
				width: 5px;
			}

			.ver-perfil-empleado
			.vpe-body
			.vpe-body-flexbox
			.vpe-body-grupos::-webkit-scrollbar-thumb {
				background: var(--color-primario);
				border-radius: 5000px;
			}

		.ver-perfil-empleado .vpe-body .vpe-body-flexbox .vpe-body-group {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-top: 10px;
			width: 100%;
		}

		.ver-perfil-empleado .vpe-body .vpe-body-flexbox .grupo-horario-laboral {
			margin: 20px 0;
			padding: 20px 0;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		.ver-perfil-empleado .vpe-body .vpe-body-flexbox h4 {
			font-size: 20px;
			margin-bottom: 20px;
			font-weight: 700;
		}

		.ver-perfil-empleado .vpe-body .vpe-body-flexbox .vpe-body-group label {
			font-size: 16px;
			font-weight: 500;
		}

		.ver-perfil-empleado .vpe-body .vpe-body-flexbox .vpe-body-group input,
		.ver-perfil-empleado .vpe-body .vpe-body-flexbox .vpe-body-group select {
			height: 30px;
			padding: 0px 10px;
			border-radius: 5px;
			border: none;
			outline: none;
			background: rgba(0, 0, 0, 0.02);
		}

body.dark
.ver-perfil-empleado
.vpe-body
.vpe-body-flexbox
.vpe-body-group
input,
body.dark
.ver-perfil-empleado
.vpe-body
.vpe-body-flexbox
.vpe-body-group
select {
	background: rgba(255, 255, 255, 0.1);
}

/* CARRUSEL INICIO */
.anuncios__contenedor {
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	padding: 25px
}

.anuncio__tarjeta {
	width: 350px;
	min-height: 450px;
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	border: 1px solid #ededf2;
	color: #6c788e;
	background: #fff;
	padding: 25px;
}

body.dark .anuncio__tarjeta {
	background: #111;
	border: 1px solid #222;
	color: #fff;
}

.anuncio__imagen-contenedor {
	width: 100%;
	height: 250px;
	position: relative;
	border-radius: 25px;
	overflow: hidden;
}

.img__anuncio {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	transition: .3s;
}

.anuncio__tarjeta:hover .img__anuncio {
	transform: scale(1.1);
}

.anuncio__body {
	padding: 15px 0px;
}

	.anuncio__body h1 {
		color: var(--color-primario);
		font-size: 20px;
		line-height: 1.1;
		font-weight: 700;
		margin-bottom: 10px;
	}

	.anuncio__body p {
		font-size: 14px;
		font-weight: 500;
	}

/*FORMULARIO PARA CREAR ANUNCIOS*/
.formulario__anuncio {
	width: 600px;
	margin: 50px auto;
	padding: 0 50px;
}

.formulario__anuncio-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.anuncio__boton-admin {
	background: var(--color-primario);
	color: #fff;
	padding: 10px;
	border-radius: 10px;
	font-size: 14px;
}

.formulario__anuncio-body {
	padding: 25px 0;
}

	.formulario__anuncio-body .form-group {
		display: flex;
		flex-direction: column;
	}

		.formulario__anuncio-body .form-group .form__input {
			width: 100%;
			height: 40px;
			border: 1px solid transparent;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 10px;
			padding: 0 10px;
			font-size: 14px;
			border-radius: 10px;
			outline: none;
			transition: .3s;
		}

		.formulario__anuncio-body .form-group textarea.form__input {
			min-height: 80px;
			resize: none;
			padding: 10px;
		}

		.formulario__anuncio-body .form-group input[type=file] {
			background: none;
		}

		.formulario__anuncio-body .form-group .form__input:hover {
			border-color: var(--color-primario)
		}

		.formulario__anuncio-body .form-group input[type=file]:hover {
			border-color: transparent;
		}

		.formulario__anuncio-body .form-group .form__button {
			background: var(--color-primario);
			color: #fff;
			padding: 10px;
			border-radius: 10px;
			font-size: 14px;
			border: 1px solid var(--color-primario);
		}
/* BOTONES INICIO */
.botones-inicio-container {
	margin-top: 25px;
}

	.botones-inicio-container .botones {
		display: flex;
		flex-wrap: wrap;
		margin-top: 15px;
		gap: 15px;
	}

		.botones-inicio-container .botones .boton {
			width: 240px;
			height: 240px;
			border-radius: 10px;
			position: relative;
			text-align: right;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			gap: 15px;
			padding: 25px;
			box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
			transition: 0.2s;
			background: var(--color-primario);
		}

			.botones-inicio-container .botones .boton:hover {
				transform: scale(1.02);
			}

			.botones-inicio-container .botones .boton h1 {
				font-size: 24px;
				font-weight: 800;
				text-transform: uppercase;
				line-height: 1.5;
			}

			.botones-inicio-container .botones .boton.boton-verde {
				background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
			}

			.botones-inicio-container .botones .boton.boton-rojo {
				background-image: linear-gradient(135deg, #6b73ff 10%, #000dff 100%);
			}

			.botones-inicio-container .botones .boton.boton-azul {
				background-image: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
			}

			.botones-inicio-container .botones .boton a {
				width: max-content;
				height: max-content;
				padding: 6px 30px;
				background: rgba(255, 255, 255, 0.4);
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.5);
				border-radius: 5px;
				font-weight: 600;
				font-size: 14px;
			}

.abrir-menu {
	display: none;
}

.switch-container-mi {
	display: none;
}

.calendar td,
.ranges label {
	color: gray;
}

.alerta-registro {
	text-align: center;
	font-weight: 600;
	margin: 20px 0;
	color: #00c16c;
}

.pagination-container {
	display: flex;
	justify-content: flex-end;
	padding-left: 0;
	margin-top: 20px;
	list-style: none;
}

	.pagination-container li {
		display: inline;
	}

		.pagination-container li a {
			padding: 5px 10px;
			margin-right: 5px;
			background-color: #008375;
			color: white;
			text-decoration: none;
			border: 1px solid transparent;
		}

			.pagination-container li a:hover {
				background-color: #0056b3;
				border-color: #004095;
			}

			.pagination-container li a.active {
				background-color: #004085;
				border-color: #002753;
			}

.alerta-roja {
	color: #cc0f0f;
}

.btn__main {
	padding: 7px 20px;
	background: #008375;
	color: #fff;
	display: flex;
	width: max-content;
	height: max-content;
	border-radius: 14px;
	font-size: 12px;
	border: 1px solid transparent;
	transition: .3s;
	font-family: "Montserrat";
	cursor: pointer;
}

	.btn__main:hover {
		background: transparent;
		border: 1px solid #008375;
		color: #008375;
	}

	.btn__main.edit {
		background: #0396ff;
	}

		.btn__main.edit:hover {
			border: 1px solid #0396ff;
			background: transparent;
			color: #0396ff;
		}

	.btn__main.delete {
		background: #f01945;
	}

		.btn__main.delete:hover {
			border: 1px solid #f01945;
			background: transparent;
			color: #f01945;
		}

	.btn__main.accept {
		background: #00d46a;
	}

		.btn__main.accept:hover {
			border: 1px solid #00d46a;
			background: transparent;
			color: #00d46a;
		}

.dp-flex {
	display: flex;
}

.jc-spacebetween {
	justify-content: space-between;
}

.ai-center {
	align-items: center;
}

.gap-10px {
	gap: 10px;
}


.happybirthday__container {
	width: 100%;
	height: 100vh;
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	transition: .3s;
	opacity: 0;
	pointer-events: none;
}

body.show__happybirthday .happybirthday__container {
	opacity: 1;
	pointer-events: all;
}

#message {
	font-size: 2em;
	color: #ffffff;
	font-weight: 200;
}

#happybirthday__canvas {
	cursor: crosshair;
	display: block;
}

.bouncing-blob {
	width: 32vw;
	aspect-ratio: 1;
	border-radius: 50%;
	will-change: transform;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transform-origin: left top;
}

.bouncing-blob--blue {
	/* background: #0077ff; */
	background: #008375;
}

body.light .bouncing-blob--blue {
	background: #1b66ff;
}

.bouncing-blob--white {
	/* background: #ffffff; */
	background: #000000;
	z-index: 2;
	width: 20vw;
}

body.light .bouncing-blob--white {
	background: #000000;
}

.bouncing-blob--purple {
	/* background: #b498ff; */
	background: #63cfc4;
}

body.light .bouncing-blob--purple {
	background: #957adf;
}

.bouncing-blob--pink {
	/* background: rgba(250, 76, 209, 0.314); */
	background: rgba(0, 255, 229, 0.3);
}

body.light .bouncing-blob--pink {
	background: rgba(255, 0, 195, 0.5);
}

.bouncing-blobs-container {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bouncing-blobs-glass {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(155px);
	-webkit-backdrop-filter: blur(155px);
	pointer-events: none;
}

.bouncing-blobs {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.happybirthday__titles {
	width: max-content;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.logo__felicitacion {
	width: 250px;
}


#logo-jcjf-gris-verde path,
#logo-jcjf-gris-verde polygon {
	stroke-miterlimit: 10;
	stroke-width: 0.4px;
}

#logo-jcjf-gris-verde .logo-trazo-gris {
	stroke: #fff;
	fill: rgba(255, 255, 255, 0.2);
	animation: line-again 8s ease forwards infinite, logo-color-blanco 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde .logo-trazo-verde {
	stroke: #21d6c4;
	fill: rgba(0, 131, 117, 0.2);
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde path:nth-of-type(1) {
	stroke-dasharray: 116.11936950683594;
	stroke-dashoffset: 116.11936950683594;
}

#logo-jcjf-gris-verde path:nth-of-type(2) {
	stroke-dasharray: 178.3330841064453;
	stroke-dashoffset: 178.3330841064453;
}

#logo-jcjf-gris-verde path:nth-of-type(3) {
	stroke-dasharray: 116.11941528320312;
	stroke-dashoffset: 116.11941528320312;
}
/* body.dark #logo-jcjf-gris-verde path:nth-of-type(3){
	stroke-dasharray: 116.11941528320312;
    stroke-dashoffset: 116.11941528320312;
    animation:  line-again 8s ease forwards infinite, logo-color-blanco 8s ease forwards 1s infinite;
} */

#logo-jcjf-gris-verde path:nth-of-type(4) {
	stroke-dasharray: 26.665199279785156;
	stroke-dashoffset: 26.665199279785156;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde path:nth-of-type(5) {
	stroke-dasharray: 22.386693954467773;
	stroke-dashoffset: 22.386693954467773;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde path:nth-of-type(6) {
	stroke-dasharray: 93.6985855102539;
	stroke-dashoffset: 93.6985855102539;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde path:nth-of-type(7) {
	stroke-dasharray: 17.037858963012695;
	stroke-dashoffset: 17.037858963012695;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde path:nth-of-type(8) {
	stroke-dasharray: 59.94850540161133;
	stroke-dashoffset: 59.94850540161133;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde path:nth-of-type(9) {
	stroke-dasharray: 34.16584396362305;
	stroke-dashoffset: 34.16584396362305;
}

#logo-jcjf-gris-verde path:nth-of-type(10) {
	stroke-dasharray: 36.006839752197266;
	stroke-dashoffset: 36.006839752197266;
}

#logo-jcjf-gris-verde path:nth-of-type(11) {
	stroke-dasharray: 41.60911560058594;
	stroke-dashoffset: 41.60911560058594;
}

#logo-jcjf-gris-verde path:nth-of-type(12) {
	stroke-dasharray: 43.097434997558594;
	stroke-dashoffset: 43.097434997558594;
}

#logo-jcjf-gris-verde path:nth-of-type(13) {
	stroke-dasharray: 40.06523895263672;
	stroke-dashoffset: 40.06523895263672;
}

#logo-jcjf-gris-verde polygon:nth-of-type(1) {
	stroke-dasharray: 37.33442687988281;
	stroke-dashoffset: 37.33442687988281;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde polygon:nth-of-type(2) {
	stroke-dasharray: 37.31734085083008;
	stroke-dashoffset: 37.31734085083008;
	animation: line-again 8s ease forwards infinite, logo-color-verde 8s ease forwards 1s infinite;
}

#logo-jcjf-gris-verde polygon:nth-of-type(3) {
	stroke-dasharray: 160.32000732421875;
	stroke-dashoffset: 160.32000732421875;
}

@keyframes line-again {
	0% {
		stroke-dashoffset: "";
		stroke-dasharray: 25;
		stroke: "";
	}

	50% {
		stroke-dashoffset: 0;
		stroke-dasharray: "";
		stroke: transparent;
	}

	100% {
		stroke-dashoffset: "";
		stroke-dasharray: 25;
		stroke: "";
	}
}

@keyframes logo-color-blanco {
	0% {
		fill: rgba(255, 255, 255, 0.2);
	}

	50% {
		fill: rgba(255, 255, 255, 1);
	}

	100% {
		fill: rgba(255, 255, 255, 0.2);
	}
}

@keyframes logo-color-verde {
	0% {
		fill: rgba(0, 131, 117, 0.2);
	}

	50% {
		fill: #008375;
	}

	100% {
		fill: rgba(0, 131, 117, 0.2);
	}
}

.open__menu {
	width: 35px;
	height: max-content;
	display: flex;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}

	.open__menu span {
		width: 100%;
		height: 1px;
		background: black;
		transition: .3s;
	}

body.open .open__menu span:nth-of-type(1) {
	transform: translateY(3px)
}

body.open .open__menu span:nth-of-type(2) {
	opacity: 0;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
	.menu-izquierdo-container {
		position: absolute;
		z-index: 100;
		display: none;
	}

	.contenedor-general {
		background: #f2f2f5;
		padding: 10px;
	}

	.anuncios__contenedor {
		padding: 0;
	}
}