/*----------------------------------------------------------------------------------------*/
/*                                          FONDO                                         */
/*----------------------------------------------------------------------------------------*/
*{
padding:0px;
margin:0px;	
}


body {
width: 100%;
height: 100vh;
overflow: hidden;
background-attachment:fixed;
font-family: 'Kanit', sans-serif;
background: url(../b_img/fondo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#actualizando{
display:none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../b_img/cargando_03.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;	
}

#actualizando2{
display:none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../b_img/cargando3.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;	
}

h1{
color:#5788BD;
padding:5px;
font-size:25px;

  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:"wdth" 100;	
}

h3{
background-color:#223D7B; 
color:#FFF;

font-family: "Roboto Mono", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;	
}


.logo{
width:70%;
min-width:280px;
max-width:360px;	
}

/*----------------------------------------------------------------------------------------*/
/*                                       CONTENEDOR                                       */
/*----------------------------------------------------------------------------------------*/
.centrador{	
position: relative;
z-index: 2;
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}

.contenedor{	
display: block;
background-color:#FFF;
width:90%;
max-width:1200px;
min-width:320px;
border-radius:8px;
}



/*----------------------------------------------------------------------------------------*/
/*                                      Separadores                                       */
/*----------------------------------------------------------------------------------------*/
.separador25{
display:block;
width:100%;
height:25px;	
}

.separador50{
display:block;
width:100%;
height:50px;	
}

.separador75{
display:block;
width:100%;
height:75px;	
}

.separador100{
display:block;
width:100%;
height:100px;	
}

.separador200{
display:block;
width:100%;
height:200px;	
}


/* ---------------------------------------------------------------- */
/*                           Boton Base                             */
/* ---------------------------------------------------------------- */
.boton{
padding:0px 5px;
align-items:center;
justify-content:center;
height: 40px;
background: #5788BD;
color: #fff;
font-size: 16px;
border: none;
cursor: pointer;
transition: .3s ease all;
border-radius: 4px;
position: relative;
overflow: hidden;

font-family: "Roboto Mono", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}

.boton.login:active{
background: #5788BD;
}

.boton span{
position:relative;
z-index: 2;
transition: .3s ease all;
}

.boton.login::after{
content: "";
width: 100%;
position: absolute;
z-index: 1;
top: 0;
left: calc(-100% - 80px);
border-bottom: 80px solid #223D7B;
border-right: 80px solid transparent;
transition: .4s ease-in-out all;
}

.boton.login:hover::after {
left: 0;
}


/*----------------------------------------------------------------------------------------*/
/*                                      piso                                              */
/*----------------------------------------------------------------------------------------*/
.piso{
display:block;
width:100%;
color:#333333;
font-size:12px;
font-family: "Roboto Mono", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;		
}


/*----------------------------------------------------------------------------------------*/
/*                                      TABLA                                              */
/*----------------------------------------------------------------------------------------*/
#miTabla{
width:100%;	
max-width:1200px;
height:460px;
overflow-x:hidden; 
overflow-y:auto;
}

#tabla_lista{
width:100%;
font-size:12.5px;
border-collapse:separate;
border-spacing:0px;
border: 1px solid #FFF;
font-family: 'Source Sans Pro', sans-serif;
}

#tabla_lista th{
height:30px;
font-size:13px;
background-color:#A0A0A0;
color:#FFF;
border-spacing:0px;
border: 2px solid #FFF;
}

td.par{
height:30px;
border-spacing:0px;
border: 0px solid #FFF;
background-color:#F0F0F0;
}

td.impar{
height:30px;
border-spacing:0px;
border: 0px solid #FFF;
background-color:#FFF;
}

#tabla_lista a{
color:#636363;
font-size:14px;
}


/*----------------------------------------------------------------------------------------*/
/*                                      MENU COMPLETO                                     */
/*----------------------------------------------------------------------------------------*/
.barra_menu {
position: fixed;
z-index: 999;
display: block;
width: 100%;
height: 50px;
background-color: #5788BD;
}

#check_menu{
display:none;	
}


/* -------------------------*/
/* -------------------------*/



.barra_menu label{
display: none;
width:40px;
height:40px;
padding:5px;
}

.barra_menu label:hover{
cursor:pointer;
background: rgba(0,0,0,0.3);
}

.barra_menu label img{
width:100%;
width:40px;
height:40px;
}

/* -------------------------*/
/* -------------------------*/

.nav_menu ul{	
display:flex;
width:100%;
height:50px;
flex-direction: row;
align-items: center;
justify-content: center;
margin:0;
padding:0;
list-style:none;
z-index: 5;
}

.nav_menu li a {
display: block;
color:#FFF;
text-decoration:none;
font-size:18px;
vertical-align: middle;
background-color:#223D7B;
padding:4px 8px;
margin:0px 7px;
border-radius:8px;

  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.nav_menu li a:hover{
background-color:#FFF;
color:#000;
border-bottom:3px solid #B95C00;	
}

.ico_menu{
vertical-align: middle;
width:15px;
height:15px;
}
/* -------------------------*/
/* -------------------------*/
@media(max-width:920px)
{

	.barra_menu label{
	display:block;
	}
	
    .nav_menu {
        position: fixed; /* Cambiado de relative a fixed */
        z-index: 999; /* Asegúrate de que sea más alto */
        display: block;
        width: 230px;
        margin-left: -280px;
        transition: all 0.5s;
        background-color: #5788BD; /* Asegurar un fondo sólido */
    }

	.nav_menu ul{
	width:230px;
	height:100%;
	flex-direction:column;
	list-style:none;
	}	
	
	.nav_menu li{
	width:230px;
	border-top:1px solid #FFF;
	}
	
	.nav_menu li a {
	width:230px;
	background-color:#5788BD;
	border-radius:0px;
	margin-top:0px;
	margin-left:0px;
	padding:10px 0px;
	text-align: left;
	}	
	.ico_menu{
	margin-left:10px;	
	}
	
	/*alt 126*/
	#check_menu:checked ~ .nav_menu{
	margin:0;
	}	
}