/*----------------------------------------------------------------------------------------*/
/*                                          FONDO                                         */
/*----------------------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
width: 100%;
height: 100vh;
overflow: hidden;
background-attachment:fixed;

background: url(../b_img/fondo_admin.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

font-family: "Nunito", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}

.contenedor{
width: 100%;
height: 100vh;	
overflow: auto;
}

.centrador{

}

#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;	
}


/*----------------------------------------------------------------------------------------*/
/*                                       CONTENEDOR                                       */
/*----------------------------------------------------------------------------------------*/
.separador10{
display:block;
width:100%;
height:10px;	
}

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

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

.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{
align-items:center;
justify-content:center;
height: 40px;
padding: 0px 4px;
background:#2A6086;
color: #fff;
font-size: 20px;
border: none;
cursor: pointer;
transition: .3s ease all;
border-radius: 4px;
position: relative;
overflow: hidden;
}

.boton.login:active{
background: #008000;	
}

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

.boton span img{
vertical-align: baseline;
}

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

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




/* ---------------------------------------------------------------- */
/*                               Lista                              */
/* ---------------------------------------------------------------- */
#miTabla{
margin-top:15px;
width:100%;	
width:1200px;
overflow-x:hidden; 
overflow-y:auto;
}

#tabla_lista{
width:100%;
font-size:12.5px;
border-collapse:separate;
border-spacing:0px;
border: 1px solid #FFF;
}

#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;
}

.puntero{
background-color: #043262;
border: none; 
color: white; 
padding: 2px 5px;
text-align: center;
text-decoration: none;
display: inline-block; 
font-size: 12px;
border-radius: 4px;
cursor: pointer;
}


/*----------------------------------------------------------------------------------------*/
/*                                      MENU COMPLETO                                     */
/*----------------------------------------------------------------------------------------*/
nav {
background:#262626;
display: flex;
justify-content: center; /* CENTRAR el contenido del nav */
}

/* Botón hamburguesa */
#menu-toggle {
display: none;
}
.menu-icon {
display: none;
padding: 1rem;
color: white;
background:#262626;
cursor: pointer;
font-size: 1.5rem;
}

/* Menú principal */
ul.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}
ul.menu li {
position: relative;
}
ul.menu > li > a, ul.menu > li > label {
color: white;
text-decoration: none;
padding: 1rem;
display: block;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}

/* Submenú oculto por defecto */
ul.submenu {
list-style: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
display: none;
min-width: 200px;
}
ul.submenu li a {
display: block;
padding: 0.5rem 1rem;
color: white;
background: #333;
text-decoration: none;
transition: background 0.3s, color 0.3s;
}

/* Hover para PC */
ul.menu li:hover > ul.submenu {
display: block;
}

/* Submenú controlado por checkbox (ocultos) */
ul.menu li input[type="checkbox"] {
display: none;
}


ul.menu > li > a:hover,ul.menu > li > label:hover{
background: #FFF;
color: #333;
}	

ul.submenu li a:hover{
background: #FFF;
color: #333;
}	

@media (max-width: 768px) {
	/* Mostrar el botón en móvil */
	.menu-icon {
	display: block;
	}

	/* Cambiar a vertical */
	nav {
	justify-content: flex-start; /* En móvil, alineación normal */
	flex-direction: column;
	}

	nav ul.menu {
	flex-direction: column;
	display: none;
	}

	/* Mostrar menú si el checkbox #menu-toggle está activo */
	#menu-toggle:checked ~ nav ul.menu {
	display: flex;
	}

	/* Desactivar hover en móvil */
	ul.menu li:hover > ul.submenu {
	display: none;
	}

	/* Mostrar submenú si su checkbox está activo */
	ul.menu li input[type="checkbox"]:checked + label + ul.submenu {
	display: block;
	}

	/* Submenús también verticales */
	ul.submenu {
	position: static;
	}
}