@font-face {
  font-family: "Amatic SC";
  src: url("AmaticSC-Regular.ttf");
}


@font-face {
  font-family: "Mystery Quest";
  src: url("mystery-questr.woff2");
}

@font-face {
  font-family: "Zen Tokyo Zoo";
  src: url("ZenTokyoZoo-Regular.ttf");
}

:root{
	--items: 0;
}

/*------------------------------------ESTILO INICIO-----------------------------------------*/
.bodyIndex{
	background-color: #134563;
	font-family: "Nunito Sans";
	color: #ffffff;
	margin: 0;
	font-size: 36px;
	padding: 0;
}

hr{
	border: 3px double #ffffff;
	width: 70%;
	margin-top: 40px;
}

hr.disabled{
	border: 3px double #89a2b1;
}

.iconoSitio{
	border-radius: 100px;
	float: left;
	margin: 3px 10px 3px 5px;
	border: 5px double #134563;

}


.titulo1{
	font-family: "Nunito Sans";
	font-size: 40px;
	text-align: center;
	margin: 0 auto;
	padding-top: 100px;
}

.intro{
	margin: 0 auto;
	padding-top: 20px;
	font-size: 24px;
	text-align: center;
	width: 500px;
}

.imgIndex{
	border-radius: 100px;
	border: 5px double #134563;
	margin: 10px 30px 10px 30px;
}

.divIndex{
	text-align: center;	
}

#p1{
	font-size: 30px;
	margin: 30px 0px 10px 0px;
}

.divUser{
	position: fixed;
	float: right;
	padding-right: 5px;
	text-align: right;
	width: auto;
    height: 123px;
	background-color: #00324b;
	width: 100%;
	border-bottom: 1px solid #ffffff;
}

#iconoUsuario{
	border-radius: 45px;
	float: right;
	margin: 3px 0px 0px 10px;
	position: relative; 
	top: -10px;
}

#logoIMPCH{
	float: left;
	position: relative; 
	top: -10px;
}

#cerrarSesion{
	color: #ffffff; 
}

.botonCrear {
    display: flex;             /* Activa el Flexbox */
	flex-direction: column; 
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente */
    height: auto;             /* Ajusta la altura del contenedor según necesites */
}

.boton1{
	width: 150px;
	height: 50px;
	margin-top: 20px;
	border: 5px double #ffffff;
	background-color: #ffffff;
	color: #134563;
	font-family: "Nunito Sans";
	font-size: 15px;
	border-radius: 40px;
	box-shadow: #0000000d 0px 0px 8px;
	letter-spacing: 1.5px;
	transition: all .5s ease;
	cursor: pointer;
	text-align: center;
}

.boton1:hover{
	letter-spacing: 3px;
	background-color: #134563;
	color: #ffffff;
	box-shadow: #ffffff 0px 7px 29px 0px;
}

.boton1:active{
	letter-spacing: 3px;
	background-color: #ffffff;
	color: #134563;
	box-shadow: #134563 0px 0px 0px 0px;
	transform: translateY(10px);
	transition: 100ms;
}

.boton1:disabled, .boton1:disabled:hover, .boton1:disabled:active {
    cursor: not-allowed; /* Cambia el cursor para indicar que el botón está deshabilitado */
    background-color: #d3d3d3; /* Cambia el color de fondo cuando está deshabilitado */
    color: #a9a9a9; /* Cambia el color del texto cuando está deshabilitado */
    box-shadow: none; /* Elimina el efecto de sombra */
    letter-spacing: normal; /* Reajusta el espaciado de letras */
    transform: none; /* Elimina cualquier transformación aplicada en el estado activo */
    transition: none; /* Desactiva la transición */
}

/*------------------------------------ESTILO MENU-----------------------------------------*/

.fecha{
	width: 200px;
	background-color: #ffffff;
	cursor: pointer;
	height: 40px;
	margin: 5px;
	border: 0;
	color: #134563;
	font-family: "Nunito Sans";
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
}

.inputs{
	width: 280px;
	height: 40px;
	margin: 5px;
	border: 0;
	color: #134563;
	background-color: #ffffff;
	font-family: "Nunito Sans";
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
}

.custom-checkbox{
	cursor: pointer;
	font-size: 24px;
}

.checkbox{
	box-shadow: #0000000d 0px 0px 8px;
	transition: all .5s ease;
}

.checkbox:hover{
	background-color: #4CAF50;
	box-shadow: #ffffff 0px 7px 29px 0px;

}

/* Oculta el checkbox original */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* Estilo del checkbox personalizado */
.custom-checkbox .checkbox {
    width: 20px;
    height: 20px;
    background-color: #ddd;
    border-radius: 4px;
    border: 2px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
}

/* Estilo del checkbox cuando está seleccionado */
.custom-checkbox input[type="checkbox"]:checked + .checkbox {
    background-color: #4CAF50; /* Cambia a tu color preferido */
    border-color: #4CAF50;
}

/* Icono de verificación al seleccionar */
.custom-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 7px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*------------------------------------ESTILO EQUIPOS-----------------------------------------*/

.columna {
    display: flex;             /* Activa el Flexbox */
	flex-direction: column; 
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente */
    height: auto;             /* Ajusta la altura del contenedor según necesites */
}

.hermanosSelect{
	margin: 18px 10px 0 0;
	color: #134563;
	font-family: "Nunito Sans";
	font-size: 24px;
	cursor: pointer;
	border-radius: 5px;
	width: auto;
	height: 40px;
	text-align: center;
}

.error{
	color: red;
	font-size: 24px;
	text-align: center;
}

.tabla{
	font-size: 24px;
	text-align: center;
	margin: 40px auto;
	margin-bottom: 0;
	font-weight: bold;
	width: auto;
	border-collapse: collapse;
	min-width: 600px;
}

.tabla.disabled th{
	background-color: #1e3746;
	color: #87a0af;
	border-color: #89a2b1; 
	border-bottom-color: #1e3746;
}

.tabla.disabled td{
	background-color: #89a2b1;
	color: #1e3746;
	border-color: #1e3746; 
}

.tabla th, .tabla td{
	border-width: thick;
	border-style: double;
}

.tabla th{
	background-color: #00324b;
	color: #ffffff;
	border-color: #ffffff; 
	border-bottom-color: #00324b;
}

.tabla td{
	background-color: #ffffff;
	color: #00324b;
	border-color: #00324b; 
}

.btnTabla{
	width: 100%;
	height: 50px;
	border: 1px solid #134563;
	background-color: #134563;
	color: #ffffff;
	font-family: "Nunito Sans";
	font-size: 15px;
	box-shadow: #0000000d 0px 0px 8px;
	letter-spacing: 1.5px;
	transition: all .5s ease;
	cursor: pointer;
	text-align: center;
}

.btnTabla:hover{
	letter-spacing: 3px;
	background-color: #ffffff;
	color: #134563;
	box-shadow: #134563 0px 7px 29px 0px;
}

.btnTabla:active{
	letter-spacing: 3px;
	background-color: #134563;
	color: #ffffff;
	box-shadow: #134563 0px 0px 0px 0px;
	transform: translateY(4px);
	transition: 100ms;
}

.btnTabla:disabled, .btnTabla:disabled:hover, .btnTabla:disabled:active {
    cursor: not-allowed; /* Cambia el cursor para indicar que el botón está deshabilitado */
    background-color: #d3d3d3; /* Cambia el color de fondo cuando está deshabilitado */
    color: #a9a9a9; /* Cambia el color del texto cuando está deshabilitado */
    box-shadow: none; /* Elimina el efecto de sombra */
    letter-spacing: normal; /* Reajusta el espaciado de letras */
    transform: none; /* Elimina cualquier transformación aplicada en el estado activo */
    transition: none; /* Desactiva la transición */
}

p.disabled{
	color: #87a0af;
}

/*para el form que está dentro del modal*/
.modal{
	padding: 60px 30px 30px 30px;
	margin: 0;
}

#modal::backdrop{
	background-color: rgba(0, 0, 0, 0.55);
}

dialog{
	padding: 0;
	max-width: 400px;
	max-height: 350px;
	opacity: 0;
 	animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
	from {
	  opacity: 0;
	  transform: scale(0.9); /* Modal aparece con un pequeño zoom */
	}
	to {
	  opacity: 1;
	  transform: scale(1);
	}
}

/* Animación de cierre */
dialog.closing {
	animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.9);
	}
}

.btnCerrar{
	margin: 5px 10px 0 0;
	max-width: 40px;
	max-height: 40px;
	position: absolute; 
	top: 5px;                 /* Distancia desde la parte superior */
    right: 5px;               /* Distancia desde el lado derecho */
}

/*------------------------------------ESTILO USUARIOS------------------------------------------*/

.password-container {
	display: flex;
	align-items: center;
}

.password-container input {
	flex: 1;
	width: 280px;
	height: 40px;
	margin: 5px;
	border: 0;
	color: #134563;
	background-color: #ffffff;
	font-family: "Nunito Sans";
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
	margin-top: 5px;
}

.password-container button {
	margin-left: 0.5rem;
	padding: 0.5rem;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 0;
}


/*------------------------------------ESTILO INICIO DE SESION---------------------------------*/
.logoSesion {
    position: absolute;
    top: 40px; /* Ajusta este valor para controlar cuánto sobresale */
    left: 50%;
    transform: translateX(-50%);
    width: 250px; /* Ajusta el tamaño del logo según sea necesario */
    height: auto;
    z-index: 2;
}

.password-containerLogin {
	display: flex;
	align-items: center;
	justify-content: center;
}

.password-containerLogin input {
	flex: 0 0 auto; /* Elimina la expansión automática */
    width: 220px;
	height: 40px;
	margin: 5px;
	border: 0;
	color: #134563;
	background-color: #eee;
	font-family: "Nunito Sans";
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
	margin-top: 5px;
}

.password-containerLogin button {
	margin-left: 0.5rem;
	padding: 0.5rem;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 0;
}

.btnVerPassLogin{
	width: 50px;
	height: 50px;
	margin-top: 20px;
	border: 5px double #ffffff;
	background-color: #134563;
	font-size: 15px;
	border-radius: 40px;
	box-shadow: #0000000d 0px 0px 8px;
	transition: all .5s ease;
	cursor: pointer;
	text-align: center;
}

.btnVerPassLogin:hover{
	letter-spacing: 3px;
	border: 5px double #134563;
	background-color: #ffffff;
	box-shadow: #134563 0px 7px 29px 0px;
}

.btnVerPassLogin:active{
	background-color: #134563;
	border: 5px double #ffffff;
	box-shadow: #134563 0px 0px 0px 0px;
	transform: translateY(10px);
	transition: 100ms;
}

.bodyInicioSesion{
	text-align: center;
	font-family: "Nunito Sans";
	font-weight: 100;
	font-style: normal; 
	color: #134563;
	font-size: 22px;
	background-color: #134563;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    background-size: cover; /* Opcional: hace que la imagen cubra todo el elemento */
    background-position: center; /* Opcional: centra la imagen en el elemento */
    background-repeat: no-repeat; /* Opcional: evita que la imagen se repita */
}

.cuadros{
	width: 280px;
	height: 40px;
	margin: 5px;
	border: 0;
	color: #134563;
	background-color: #eee;
	font-family: "Nunito Sans";
	font-size: 20px;
	text-align: center;
	border-radius: 5px;
}

.label{
	display: inline-block;
	width: 100px;
	height: 10px;
	margin: 5px;
	font-size: 24px;
}

.botonInicio{
	width: 150px;
	height: 50px;
	margin-top: 10px;
	border: 5px double #134563;
	background-color: #134563;
	color: #ffffff;
	font-family: "Nunito Sans";
	font-size: 15px;
	border-radius: 40px;
	box-shadow: #0000000d 0px 0px 8px;
	letter-spacing: 1.5px;
	transition: all .5s ease;
	cursor: pointer;
}

.botonInicio:hover{
	letter-spacing: 3px;
	background-color: #ffffff;
	color: #134563;
	box-shadow: #134563 0px 7px 29px 0px;
}

.botonInicio:active{
	letter-spacing: 3px;
	background-color: #134563;
	color: #ffffff;
	box-shadow: #134563 0px 0px 0px 0px;
	transform: translateY(10px);
	transition: 100ms;
}

.cuadroSesion{
	transition: all .4s ease;
	background-color: white; 
	width: 350px;
	height: 410px;
	padding-top: 80px;
	border-radius:70px;
	margin-top: 210px;
}

.cuadroSesion:hover{
	box-shadow: #ffffff 0px 0px 29px 0px; /* COLOR/ x / y / desenfoque / expansión */
}

.cuadroClave{
	transition: all .4s ease;
	background-color: white; 
	width: 350px;
	height: 300px;
	padding-top: 30px;
	border-radius:70px;
	margin-top: 150px;
}

.alineado{
	display: inline-block;
	vertical-align: middle; 
}

.oculto{
	display: none;
}



/*------------------------------------ESTILO MENU LATERAL-----------------------------------------*/

.sidebar {
    position: fixed;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #00324b;
    overflow-x: hidden;
    transition: 0.4s;
    padding: 0;
    box-sizing:border-box;
	margin-top: 123px;
	font-size: 24px;
	border-top: 1px solid white;
}

.sidebar .boton-cerrar {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 2rem;
    display: block;
    padding: 0;
    line-height: 1.5rem;
    margin: 0;
    height: 32px;
    width: 32px;
    text-align: center;
}

.sidebar ul, .sidebar li{
    margin: 0;
    padding: 0;
    list-style:none inside;
	line-height: 24px;
}

.sidebar ul {
    display: block;
    width: 80%;
    min-width:300px;
}

.sidebar li {
    display: block;
    font-size: 120%;
    color: #eee;
    text-decoration: none;
}

.sidebar a {
	padding: 15px 0 15px 15px;
    display: block;
    font-size: 120%;
    color: #eee;
    text-decoration: none;
}

.sidebar a:hover{
    color:#00324b;
    background-color: #ffffff;

}

.sidebar ul li{
	border-bottom: 1px solid white;
}

.sidebar ul ul{
	height: 0px;
	overflow: hidden;
	transition: 0.3s;
}

.sidebar ul li:hover ul{
	height: calc(var(--items) * 54px);
}

.sidebar ul ul a{
	background: #81cbe0; 
	color: #ffffff;
}

h1 {
    color:#00324b;
    font-size:180%;
    font-weight:normal;
}
#contenido {
    transition: margin-left .4s;
    padding: 1rem;
	padding: 123px 0 0 0;
}

.abrir-cerrar {
    color: #00324b;
    font-size:1rem;   
	position: fixed;
}

#cerrar {
    display:none;
}

.item-disabled {
    pointer-events: none;  /* Evita que se pueda hacer clic en el elemento */
    opacity: 0.5;          /* Reduce la opacidad para indicar que está deshabilitado */
	background: #bbb; 
}







/*------------------------------------ESTILO REGISTRO-----------------------------------------*/
.labelRegistro{
	display: inline-block;
	width: 180px;
	height: 10px;
	margin: 5px;
	font-size: 24px;
}

.labelRegistro2{
	display: inline-block;
	width: 180px;
	height: 10px;
	margin: 5px;
	padding-left: 70px;
	font-size: 24px;
}

.cuadrosRegistro{
	width: 140px;
	height: 30px;
	margin: 5px 70px 5px 0px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 24px;
	border-radius: 20px;
}

/*------------------------------------ESTILO CALCULAR-----------------------------------------*/
.titulo2{
	font-family: "Mystery Quest";
	font-size: 190%;
	margin: 0;
	padding: 30px 0px 50px 190px;
	height:90px;
}

.sectionForm{
	font-size: 25px;
	margin: 20px;
	font-weight: bold;
}

.cuadrosIndex{
	margin: 10px;
	width: 140px;
	height: 30px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 24px;
	border-radius: 10px;
}

#botonIndex{
	width: 130px;
	height: 60px;
	margin: 8px 0px 0px 90px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 28px;
	border-radius: 40px;
}

#labelIndex{
	font-size: 28px;
	margin: 3px 0px 3px 40px;
}

/*------------------------------------ESTILO INFORME-----------------------------------------*/
.titulo3{
	font-family: "Mystery Quest";
	font-size: 190%;
	margin: 0;
	padding: 40px 0px 0px 30px;
	height:60px;
}

.tablaInforme{
	text-align: center;
	padding: 5px;
	font-weight: bold;
	color: #81D7E1;
	background-color: #134563;
	border-collapse: collapse;
	border-width: thick;
	border-color: #14838F; 
	border-style: double;
}


/*------------------------------------ESTILO CONTACTO-----------------------------------------*/
#introContacto{
	font-family: "Mystery Quest";
	font-size: 140%;
	margin: 0;
	padding: 10px 0px 10px 180px;
	height:90px;
}

#titulo1Contacto{
	font-family: "Mystery Quest";
	font-size: 300%;
	margin: 0;
	padding-top: 30px;
	height:60px;
}

.titulo4{
	font-family: "Mystery Quest";
	font-size: 130%;
	margin: 5px;
	padding-top: 20px;
	height:40px;
}

#botonContacto1{
	width: 130px;
	height: 60px;
	margin: 8px 0px 0px 110px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 28px;
	border-radius: 40px;
}

#botonContacto2{
	width: 130px;
	height: 60px;
	margin: 8px 0px 0px 20px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 28px;
	border-radius: 40px;
}
#textBox{
	margin-top: 10px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 28px;
	border-radius: 10px;
}

#cuadroContacto{
	margin: 10px;
	width: 220px;
	height: 30px;
	border: 5px double #81D7E1;
	background-color: #134563;
	color: #81D7E1;
	font-family: "Amatic SC";
	font-size: 24px;
	border-radius: 10px;
}