/******************************************/
/*                                        */
/* General Setting                        */
/*                                        */
/******************************************/
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: 'Roboto', sans-serif;
	font-size: 16px;
	background-color:#052C49;
	color:#024B4F;
    background-image: url('../imagenes/springfiel_fondo.jpg');
    background-size: 100%;
    background-position:top;
	background-repeat:no-repeat;

}
@media screen and (max-width: 1200px){
	body{
		background-size: 300%;
	}
}
.iconos_calendar{
    color:#FFF;
    font-size: 30px;
	margin-right: 15px;
	
}
/* End General Setings */
/******************************************/
/*                                        */
/* encabezado.php                         */
/*                                        */
/******************************************/
.header_dos{
	width:100%;
	left: 0;
	top: 0;
	z-index:1;
	display:grid;
	grid-template-columns: 1;
	grid-template-rows: 2;
	grid-template-areas: "logo_menu_header_dos"
						 "direccion_header_dos";
}
.logo_blanco_header_dos{
	width: 400px;
	margin:auto;
	margin-top:30px;
}
.logo_menu_header_dos{
	grid-area: logo_menu_header_dos;
    display: flex;
	align-items:center;
	justify-content: center;
}
#capa_direccion_header_dos{
	width:100%;
	display:grid;
	grid-template-columns: 80%;
	grid-template-rows: auto;
	grid-template-areas: "direccion_header_dos";
	justify-content: center;
	padding:5px;
}
#texto_direccion_header_dos{
    color:#00F7DC;
	font-size: calc(1em + 0.3vw);
    text-align: center;
	letter-spacing:4px;
}

@media screen and (max-width: 1200px){
	.logo_menu_header_dos{
		padding: 1px;
	}
	.logo_blanco_header_dos{
		width: 300px;
	}
}
@media screen and (max-width: 640px){
	.logo_blanco_header_dos{
		width: 200px;
	}
}

/* End Encabezado */



/***************************************/
/*                                     */
/* INDEX.PHP                           */
/*                                     */
/***************************************/
#contenedor_principal{
	width:100%;
	padding-top:0px;
}
.ir-arriba {
	display:none;
	padding:15px;
	background:#E81F3C;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position:fixed;
	bottom:20px;
	right:20px;
	border-radius:50px;
}
/******************************************/
/*                                        */
/* header index.php                       */
/*                                        */
/******************************************/
.header{
	width:100%;
	left: 0;
	top: 0;
	z-index:1;
	display:grid;
	grid-template-columns: 1;
	grid-template-rows: 2;
	grid-template-areas: "logo_menu"
						 "direccion"
						 "el_menu";
}
.logo_blanco{
	width: 400px;
	margin:auto;
	margin-top:30px;
}
.logo_menu{
	grid-area: logo_menu;
    display: flex;
	align-items:center;
	justify-content: center;
}
#capa_direccion{
	width:100%;
	display:grid;
	grid-template-columns: 80%;
	grid-template-rows: auto;
	grid-template-areas: "direccion";
	justify-content: center;
	padding:5px;
}
#texto_direccion{
    color:#00F7DC;
	font-size: calc(1em + 0.3vw);
    text-align: center;
	letter-spacing:4px;
}
.nav{
	font-size: calc(1em + 0.1vw);
	grid-area: el_menu;
    display: flex;
	justify-content: center;
	text-align: center;
}

.nav__checkbox {
	display: none;
}
  
.nav__toggle {
	cursor: pointer;
	margin: 0 1rem;
	position: absolute;
	right: 0;
}
  
.nav__toggle .close {
	display: none;
}
  
.nav__toggle .close,
.nav__toggle .menu {
	margin-top: 0.3rem;
}
  
.nav__menu {
	flex-direction: column;
	gap: 10px;
	margin: 1rem;
	display: flex;
	align-items: center;
	justify-content: right;
}

.nav__menu ul{
    margin: 0;
    text-align: center;
	list-style:none;
}

.nav__menu li {
	display: none;
	list-style-type: none;
	padding:10px;
}
.nav__menu a:hover, a:focus{
	padding-bottom: 10px;
	background-position: 50% 100%;
    background-size: 100% 2px;
}

.nav__menu a {
	padding-bottom: 10px;
	color:#fff;
	letter-spacing:3px;
	font-size: 1.4rem;
	text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .5s;
}
 
#nav__checkbox:checked ~ ul.nav__menu li {
	display: block;
}
  
#nav__checkbox:checked ~ label.nav__toggle .close {
	display: block;
}
  
#nav__checkbox:checked ~ label.nav__toggle .menu {
	display: none;
}
  
@media only screen and (min-width: 1200px) {
	.nav__toggle {
	  display: none;
	}
  
	.nav__menu {
	  flex-direction: row;
	}
  
	.nav__menu li {
	  display: block;
	}
}
@media screen and (max-width: 1200px){
	.logo_menu{
		padding: 10px;
	}
	.logo_blanco{
		width: 400px;
	}
}
@media screen and (max-width: 640px){
	.logo_blanco{
		width: 300px;
	}
}

/* End Header */
/******************************************/
/* Capa Slogan                            */
/******************************************/
#capa_slogan{
	width:100%;
	display:grid;
	grid-template-columns: 80%;
	grid-template-rows: auto;
	grid-template-areas: "slogan";
	justify-content: center;
	padding:50px;
}

#texto_slogan{
    grid-area: slogan;
    color:#0FF;
	font-size: calc(1em + 2.5vw);
    text-align: center;
	letter-spacing:4px;
}

@media screen and (max-width: 1200px){
	#capa_slogan{
		grid-template-columns: 90%;
		padding:5px;
		padding-top:50px;
	}
	#texto_slogan{
		font-size: calc(1em + 1.5vw);
		letter-spacing:4px;
	}
}
/* End Capa Slogan */


/******************************************/
/* Capa Comida                            */
/******************************************/

#capa_comida{
	padding-bottom: 0px;
	background:#000;
	display:grid;
	gap: 10px;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas: "capa_comida_titulo"
	  					 "contenedor_comidas";
	justify-content:center;
    text-align: center;
	align-items:flex-start;
}

#capa_comida_titulo{grid-area: capa_comida_titulo;}
#contenedor_comidas{grid-area: contenedor_comidas;}

.titulo_food_claro{
	color:#FFF;
	padding-top:20px;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 0px;
}

.subtitulo_comidas{
	color:#FFF;
	padding-top:10px;
	letter-spacing:2px;
	font-size: calc(0.5em + 0.5vw);
	font-weight:bold;
	margin-top: 0px;
	color:#0CF;
}

#contenedor_comidas
{
	padding-bottom: 10px;
	display:grid;
	gap: 10px;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas: "titulo_clasicas"
	  					 "grupo_clasicas"
						 "titulo_costiburger"
						 "grupo_costiburger"
						 "titulo_especiales"
						 "grupo_especiales"
						 "titulo_legendarias"
						 "grupo_legendarias"
						 "titulo_otros"
						 "grupo_otros";
	justify-content:center;
    text-align: left;
	align-items:flex-start;
}

#titulo_clasicas{grid-area: titulo_clasicas;}
#grupo_clasicas{
	grid-area: grupo_clasicas;
	border:solid 2px #0CF;
}
#titulo_costiburger{grid-area: titulo_costiburger;}
#grupo_costiburger{
	grid-area: grupo_costiburger;
	border:solid 2px #0CF;
}
#titulo_especiales{grid-area: titulo_especiales;}
#grupo_especiales{
	grid-area: grupo_especiales;
	border:solid 2px #0CF;
}
#titulo_legendarias{grid-area: titulo_legendarias;}
#grupo_legendarias{
	grid-area: grupo_legendarias;
	border:solid 2px #0CF;
}
#titulo_otros{grid-area: titulo_otros;}
#grupo_otros{
	grid-area: grupo_otros;
	border:solid 2px #0CF;
}


#capa_comida_grupo_clasicas{
	padding:20px 20px 0px 20px;
	text-align:center;
	display:grid;
	margin-top:0px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(3,auto);
	grid-template-areas: "grupo_clasicas_imgs";
	justify-content:center;
}
#grupo_clasicas_imgs{
	grid-area: grupo_clasicas_imgs;
}

#capa_comida_grupo_costiburger{
	padding:20px 20px 0px 20px;
	text-align:center;
	display:grid;
	margin-top:0px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(3,auto);
	grid-template-areas: "grupo_costiburger_imgs";
	justify-content:center;
}
#grupo_clasicas_imgs{
	grid-area: grupo_costiburger_imgs;
}
#capa_comida_grupo_especiales{
	padding:20px 20px 0px 20px;
	text-align:center;
	display:grid;
	margin-top:0px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(3,auto);
	grid-template-areas: "grupo_especiales_imgs";
	justify-content:center;
}
#grupo_especiales_imgs{
	grid-area: grupo_especiales_imgs;
}

#capa_comida_grupo_legendarias{
	padding:20px 20px 0px 20px;
	text-align:center;
	display:grid;
	margin-top:0px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(3,auto);
	grid-template-areas: "grupo_legendarias_imgs";
	justify-content:center;
}
#grupo_legendarias_imgs{
	grid-area: grupo_legendarias_imgs;
}

#capa_comida_grupo_otros{
	padding:20px 20px 0px 20px;
	text-align:center;
	display:grid;
	margin-top:0px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(3,auto);
	grid-template-areas: "grupo_otros_imgs";
	justify-content:center;
}
#grupo_otros_imgs{
	grid-area: grupo_otros_imgs;
}




.food_imgs_food{
	width: 250px;
}

@media screen and (max-width: 1200px){
	#capa_comida_grupo_clasicas{
		grid-template-columns: repeat(3,auto);
		grid-template-rows: auto;
		grid-template-areas: "grupo_clasicas_imgs";
		justify-content:center;
	}
	.food_imgs_food{
		width: 80%;
	}
}

@media screen and (max-width: 768px){
	#capa_comida_grupo_clasicas{
		grid-template-columns: repeat(1,auto);
		grid-template-rows: auto;
		grid-template-areas: "grupo_clasicas_imgs";
		justify-content:center;
	}
	.food_imgs_food{
		width: 80%;
	}
}




/* End Capa comida */




/******************************************/
/* Tercera Capa                           */
/******************************************/
#tercera_capa{
	padding-bottom: 100px;
	display:grid;
	gap: 10px;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto auto auto;
	grid-template-areas: "c3_titulo c3_titulo c3_titulo"
	  					 "c3_separador c3_separador c3_separador"					 
						 "c3_cuadro_1 c3_cuadro_2 c3_cuadro_3"
						 "c3_cuadro_4 c3_cuadro_5 c3_cuadro_6";
	justify-content:center;
    text-align: center;
	align-items:flex-start;
}

#capa3_titulo{grid-area: c3_titulo;}
#capa3_separador{grid-area: c3_separador;}
#capa3_cuadro_1{grid-area: c3_cuadro_1;}
#capa3_cuadro_2{grid-area: c3_cuadro_2;}
#capa3_cuadro_3{grid-area: c3_cuadro_3;}
#capa3_cuadro_4{grid-area: c3_cuadro_4;}
#capa3_cuadro_5{grid-area: c3_cuadro_5;}
#capa3_cuadro_6{grid-area: c3_cuadro_6;}

.titulo_fondo_claro{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 70px;
}

.separador_fondo_claro{
	border-top: 1px solid #6CF;
	padding-left: 30px;
	padding-right: 30px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.contenedor_cuadros_verticales{
	width: 450px;
	margin-top: 20px;
	margin-bottom:60px;
	margin-left:40px;
	margin-right:40px;
}

.encabezado_cuadros_verticales{
	display:flex;	
}

.lado_izquierdo_encabezado_cuadros_verticales{
	width:auto;
}

.lado_derecho_encabezado_cuadros_verticales_1, .lado_derecho_encabezado_cuadros_verticales_2, .lado_derecho_encabezado_cuadros_verticales_3, .lado_derecho_encabezado_cuadros_verticales_4, .lado_derecho_encabezado_cuadros_verticales_5, .lado_derecho_encabezado_cuadros_verticales_6{
	width:100%;
	padding:12px;
	text-align:left;
	font-size:20px;
	letter-spacing:1px;
}

.lado_derecho_encabezado_cuadros_verticales_1{
	background:#0D7DBF;
	color:#FFF;
}
.lado_derecho_encabezado_cuadros_verticales_2{
	background:#84C760;
	color:#FFF;
}
.lado_derecho_encabezado_cuadros_verticales_3{
	background:#637B7B;
	color:#FFF;
}
.lado_derecho_encabezado_cuadros_verticales_4{
	background:#FED521;
	color:#036;
}
.lado_derecho_encabezado_cuadros_verticales_5{
	background:#D2B27F;
	color:#630;
}
.lado_derecho_encabezado_cuadros_verticales_6{
	background:#ABBBDD;
	color:#75163F;
}

.cuerpo_cuadros_verticales{
	display:flex;	
}
.lado_izquierdo_cuerpo_cuadros_verticales{
	background:#FFF;
	width:200px;
	height:150px;
	padding:15px;
	position:relative;
	overflow:visible;
}
.lado_derecho_cuerpo_cuadros_verticales{
	background:#FFF;
	width:100%;
	padding:15px;
	text-align:left;
	font-size:15px;
	letter-spacing:1px;
}

.iconos_cuadro_vertical{
	background:#F15F30;
    color:#FFF;
    font-size: 28px;
	font-weight:200;
	padding:10px;
}

.titulo_cuadros_verticales{
	color:#024B4F;
	letter-spacing:2px;
	font-size: calc(1em + 0.6vw);
	font-weight:bold;
}

.imagen_cuadros_verticales{
	width:190px;
	height:190px;
	left:-50px;
	position:absolute;
}

@media screen and (max-width: 1200px){
	#tercera_capa {
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas: "c3_titulo"
							 "c3_separador"					 
							 "c3_cuadro_1"
							 "c3_cuadro_2"
							 "c3_cuadro_3"
							 "c3_cuadro_4"
							 "c3_cuadro_5"
							 "c3_cuadro_6";
	}
	.contenedor_cuadros_verticales{
		width: 90%;
		margin: auto;
		margin-bottom: 30px;
		
	}
	.titulo_fondo_claro{
		margin-top: 30px;
	}
	.titulo_food_claro{
		margin-top: 30px;
	}
	.imagen_cuadros_verticales{
		width:150px;
		height:150px;
		left:-20px;
		position:absolute;
	}
	.lado_derecho_cuerpo_cuadros_verticales{
		padding:8px;
		font-size:15px;
		letter-spacing:0px;
	}
	.lado_derecho_encabezado_cuadros_verticales_1, .lado_derecho_encabezado_cuadros_verticales_2, .lado_derecho_encabezado_cuadros_verticales_3, .lado_derecho_encabezado_cuadros_verticales_4, .lado_derecho_encabezado_cuadros_verticales_5, .lado_derecho_encabezado_cuadros_verticales_6{
		padding:12px;
		font-size:20px;
		letter-spacing:0px;
	}
}


/* End Tercera Capa */

/******************************************/
/* Cuarta Capa                            */
/******************************************/

#cuarta_capa{
	background:#222;
	text-align:center;
	padding-bottom: 0px;
	display:grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto;
	grid-template-areas: "c4_titulo"
						 "c4_separador"
						 "c4_imagen";
    text-align: center;
	justify-content:center;
}

#capa4_titulo{
	grid-area: c4_titulo;
}
#capa4_separador{
	grid-area: c4_separador;
}
#conteiner_imagen{
	grid-area: c4_imagen;
}
.capa4_imagen{
	width:120%;
}
#capa4_texto{
	position:relative;
	top:-370px;
	left: 70px;
	font-size: calc(1.5em + 0.1vw);
	color:#FED521;
}


@media screen and (max-width: 1650px){
	.conteiner_table {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto auto 3px;
		grid-template-areas: "columna_1 columna_2 columna_3 columna_4"
							 "columna_1a columna_5 columna_6 columna_7"
							 "table_footer table_footer table_footer table_footer";
	}
	#columna_1a{
		display: grid;
		width: auto;
	}
	.capa4_imagen{
		width:100%;
	}
	#capa4_texto{
		position:relative;
		top:-315px;
		left: 0px;
		font-size: 1.5em;
	}
}

@media screen and (max-width: 1200px){
	.conteiner_table {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto auto 3px;
		grid-template-areas: "columna_1 columna_2 columna_3"
							 "columna_1a columna_4 columna_5"
							 "columna_1b columna_6 columna_7"
							 "table_footer table_footer table_footer";
	}
	#columna_1a, #columna_1b {
		display: grid;
		width: auto;
	}
	.capa4_imagen{
		width:100%;
	}
	#capa4_texto{
		position:relative;
		top:-315px;
		left: 0px;
		font-size: 1.5em;
	}
}

@media screen and (max-width: 768px){
	.conteiner_table {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto auto auto auto auto 3px;
		grid-template-areas: "columna_1 columna_2"
							 "columna_1a columna_3"
							 "columna_1b columna_4"
							 "columna_1c columna_5"
							 "columna_1d columna_6"
							 "columna_1e columna_7"
							 "table_footer table_footer";
	}
	#columna_1a, #columna_1b, #columna_1c, #columna_1d, #columna_1e {
		display: grid;
		width: auto;
	}
	.capa4_imagen{
		width:100%;
	}
	#capa4_texto{
		position:relative;
		top:-315px;
		left: 0px;
		font-size: 1.5em;
	}
}

@media screen and (max-width: 680px){
	#capa4_texto{
		position:relative;
		top:-295px;
		left: 0px;
		font-size: 1.2em;
	}
}
@media screen and (max-width: 570px){
	#capa4_texto{
		position:relative;
		top:-250px;
		left: 0px;
		font-size: 1.1em;
	}
}
@media screen and (max-width: 515px){
	#capa4_texto{
		position:relative;
		top:-225px;
		left: 0px;
		font-size: 1em;
	}
}
@media screen and (max-width: 445px){
	#capa4_texto{
		position:relative;
		top:-200px;
		left: 0px;
		font-size: 0.9em;
	}
}
@media screen and (max-width: 405px){
	#capa4_texto{
		position:relative;
		top:-175px;
		left: 0px;
		font-size: 0.8em;
	}
}


/* End Cuarta Capa */


/******************************************/
/* Quinta Capa                            */
/******************************************/
#quinta_capa{
	background:#000;
	background-image: url('../imagenes/fondo_homero.jpg');
    background-size: 100%;
    background-position:top;
	background-repeat:no-repeat;
	text-align:center;
	padding-bottom: 14px;
	gap: 10px;
	display:grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto auto auto auto;
	grid-template-areas: "c5_titulo c5_titulo c5_titulo"
	  					 "c5_separador c5_separador c5_separador"					 
						 "c5_cuadro_1 c5_cuadro_3 c5_carrusel"
						 "c5_cuadro_2 c5_cuadro_4 c5_carrusel"
						 ". . c5_boton";
	justify-content:center;

}

#capa5_titulo{
	grid-area: c5_titulo;
}
#capa5_separador{
	grid-area: c5_separador;
}
#capa5_cuadro_1{
	grid-area: c5_cuadro_1;
}
#capa5_cuadro_2{
	grid-area: c5_cuadro_2;
}
#capa5_cuadro_3{
	grid-area: c5_cuadro_3;
}
#capa5_cuadro_4{
	grid-area: c5_cuadro_4;
}
#capa5_carrusel{
	grid-area: c5_carrusel;
}
#capa5_button{
	grid-area: c5_boton;
}


.contenedor_cuadros_verticales_carrusel{
	width:400px;
	padding: 30px 30px 0px 30px;
}
.cuerpo_cuadros_verticales_carrusel{
	display:flex;
	box-shadow: 0px 0px 25px #666;
	background:#FFF;
	font-size:16px;
	letter-spacing:1px;
}
.cuerpo_cuadros_verticales_carrusel:hover{
	background:#E81F3C;
	font-size:16px;
	color:#FFF;
	letter-spacing:1px;
}
.cuerpo_cuadros_verticales_carrusel:hover .iconos_cuadros_verticales_carrusel{
	color:#FFF;
}
.lado_izquierdo_cuerpo_cuadros_verticales_carrusel{
	padding:15px;
}
.lado_derecho_cuerpo_cuadros_verticales_carrusel{
	padding:15px;
	text-align:left;
}
.iconos_cuadros_verticales_carrusel{
    color:#E81F3C;
    font-size: 48px;
	font-weight:200;
}

.fondo_carrusel{
	width:550px;
}
.slider-container {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  margin:auto;
  padding-bottom:10px;
}
.slider-container::-webkit-scrollbar{
  height:20px;
}
.slider-container::-webkit-scrollbar-button{
	display:none;
}
.slider-container::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.slider-container::-webkit-scrollbar-thumb{
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(232,31,60,1); 
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}
.slider-container img {
  flex: 0 0 100%;
  width: 100%;
  object-fit: cover;
  scroll-snap-align: center;
}

.boton_contacto{
	font-size:16px;
	letter-spacing:1px;
	font-weight: bold;
	background:#E81F3C;
	color:#fff;
	width: 250px;
	border:none;
	padding:10px;
	border-radius: 5px;
	box-shadow: 0px 3px 10px #777;
	cursor:pointer;
	margin: auto;
	margin-top: 1px;
	text-decoration: none;
}
.boton_contacto:hover{
	box-shadow: 0px 3px 15px #777;
}

.boton_eula{
	font-size:16px;
	letter-spacing:1px;
	font-weight: bold;
	background:#E81F3C;
	color:#fff;
	width: 250px;
	border:none;
	padding:10px;
	border-radius: 5px;
	cursor:pointer;
	margin: auto;
	margin-top: 1px;
	text-decoration: none;
}


@media screen and (max-width: 1200px){
	#quinta_capa {
		background:#16C6EF;
		background-image:none;
		grid-template-columns: auto auto;
		grid-template-rows: repeat(6,auto);
		grid-template-areas: "c5_titulo c5_titulo"
							 "c5_separador c5_separador"
							 "c5_carrusel c5_carrusel"					 
							 "c5_cuadro_1 c5_cuadro_2"
							 "c5_cuadro_3 c5_cuadro_4"
							 "c5_boton c5_boton";
	}
	#capa5_carrusel{
		width: 80%;
		margin: auto;
	}
}

@media screen and (max-width: 768px){
	#quinta_capa {
		grid-template-columns: auto;
		grid-template-rows: repeat(4,auto);
		grid-template-areas: "c5_titulo"
							 "c5_separador"
							 "c5_carrusel"
							 "c5_cuadro_1"
							 "c5_cuadro_2"
							 "c5_cuadro_3"
							 "c5_cuadro_4"				 
							 "c5_boton";
	}
	#capa5_carrusel{
		width: 90%;
		margin: auto;
	}
}

/* End Quinta Capa */

/******************************************/
/* Sexta Capa                             */
/******************************************/
#sexta_capa{
	background:#6BADDF;
	text-align:center;
	padding-bottom: 50px;
	display:grid;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "c6_titulo c6_titulo"
	  					 "c6_separador c6_separador"					 
						 "contenedor_formulario mapa"
						 "c6_contacto_celular c6_contenedor_social"
						 "c6_contacto_mail c6_contenedor_social";
	justify-content:center;
}

#capa6_titulo{
	grid-area: c6_titulo;
}
#capa6_separador{
	grid-area: c6_separador;
}
#contenedor_formulario{
	grid-area: contenedor_formulario;
}
#mapa{
	grid-area: mapa;
	padding-left:50px;
}
#capa6_contacto_celular{
	grid-area: c6_contacto_celular;
	justify-content:left;
	padding-left:50px;
}
#capa6_contacto_mail{
	grid-area: c6_contacto_mail;
	justify-content:left;
	padding-left:50px;
}
#c6_contenedor_social{
	grid-area: c6_contenedor_social;
}

#grupo_formulario{
	background:#6BADDF;
	text-align:center;
	padding-bottom: 50px;
	display:grid;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(4,auto);
	grid-template-areas: "titulo_formulario titulo_formulario"
						 "c6_nombre c6_mensaje"
						 "c6_correo c6_mensaje"
						 "c6_celular c6_mensaje"
						 "c6_boton c6_boton";
	justify-content:center;
}
#capa6_nombre{
	grid-area: c6_nombre;
}
#titulo_formulario{
	grid-area: titulo_formulario;
}
#capa6_correo{
	grid-area: c6_correo;
}
#capa6_celular{
	grid-area: c6_celular;
}
#capa6_mensaje{
	grid-area: c6_mensaje;
}
#capa6_button{
	grid-area: c6_boton;
}

#grupo_social_media{
	text-align:center;
	display:grid;
	padding-top:30px;
	gap:30px;
	grid-template-columns: auto auto auto;
	grid-template-rows: repeat(2,auto);
	grid-template-areas: "c6_social_titulo c6_social_titulo c6_social_titulo"
						 "c6_icono_fb c6_icono_instagram c6_icono_tiktok";
	justify-content:center;
	align-items: center;
}
#c6_social_titulo{
	grid-area: c6_social_titulo;
}
#c6_icono_fb{
	grid-area: c6_icono_fb;
}
#c6_icono_instagram{
	grid-area: c6_icono_instagram;
}
#c6_icono_tiktok{
	grid-area: c6_icono_tiktok;
}

.c6_social_titulo_txt{
	font-size: calc(1em + 0.5vw);
	letter-spacing:4px;
	color:#000;
}
.capa6_icono_social{
	width:40px;
}
.capa6_icono_wa{
	width:50px;
}
.titulo_formulario{
	color:#000;
	letter-spacing:4px;
	font-size: calc(1em + 0.8vw);
	padding:20px;
}
.titulo_ubicacion{
	color:#000;
	letter-spacing:1px;
	font-size: calc(1em + 0.5vw);
	padding:5px;
}
.campo_contacto, .campo_contacto_text{
	background:#FFF;
	border:solid 2px #000;
	font-size:16px;
	padding: 15px 15px 15px 20px;
	border-radius: 5px;
	width:350px;
	letter-spacing:1px;
	margin: 10px;
	color:#000;
	box-shadow: 0px 1px 10px #444;
}
.campo_contacto_text{
	width:350px;
	height:200px;
	resize:none;
	font-family: 'Roboto', sans-serif;
}
.boton_enviar, .boton_enviar_usr{
	font-size:18px;
	letter-spacing:1px;
	font-weight: bold;
	background:#FED61C;
	color:#000;
	width: 200px;
	border:none;
	padding:15px 35px 15px 35px;
	border-radius: 5px;
	box-shadow: 0px 3px 10px #333;
	cursor:pointer;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	text-decoration:none;
}
.boton_enviar:hover, .boton_enviar_usr:hover{
	box-shadow: 0px 3px 15px #444;
}
.boton_enviar_usr{
	margin: auto;
}
.contenedor_contacto{
	display:flex;
	background:#6BADDF;
	font-size:15px;
	color:#024B4F;
	letter-spacing:1px;
	margin-top: 10px;
	align-items: center;
}
.lado_izquierdo_contacto{
	background:#E81F3C;
	border-radius:10px;
	padding:10px;
	box-shadow: 0px 1px 10px #444;
	height:50px;
}
.lado_derecho_contacto{
	padding:25px;
	text-align:left;
	font-size:18px;
}
.iconos_contacto{
    color:#FFF;
    font-size: 32px;
	font-weight:100;
}
.link_mail_contacto{
	text-decoration: none;
	color: #fff;
}


@media screen and (max-width: 1200px){
	#sexta_capa {
		align-items: center;
		text-align:center;
		justify-content:center;
		grid-template-columns: auto;
		grid-template-rows: repeat(7,auto);
		grid-template-areas: "c6_titulo"
							 "c6_separador"					 
							 "contenedor_formulario"
							 "mapa"
							 "c6_contacto_celular"
							 "c6_contacto_mail"
							 "c6_contenedor_social";
	}
	#capa6_nombre, #capa6_correo, #capa6_celular, #capa6_button, #capa6_mensaje{
		margin: auto;
		margin-bottom: 10px;
	}
	.link_mail_contacto{
		font-size: 14px;
	}

	#grupo_formulario{
		padding-bottom: 0px;
		grid-template-columns: auto;
		grid-template-rows: repeat(6,auto);
		grid-template-areas: "titulo_formulario"
							 "c6_nombre"
							 "c6_correo"
							 "c6_celular"
							 "c6_mensaje"
							 "c6_boton";
	}
	#mapa{
		padding-left:0px;
	}
}
/* End Sexta Capa */


/******************************************/
/* Capa Links                             */
/******************************************/
#capa_links{
	text-align:center;
	padding:20px;
	color:#777;
}
.links_capas{
	text-decoration: none;
	color:#BBB;
}
/* End Capa Links */


/* End Index.php */

/***************************************/
/*                                     */
/* DESIGNS.PHP                         */
/*                                     */
/***************************************/
#capa_designs{
	text-align:center;
	padding-top: 30px;
}
#capa_designs_separador{
	width: 100px;
}
/*
#designs_conteiner{
	text-align:center;
	display:grid;
	margin-top: 30px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(2,auto);
	grid-template-areas: "designs_imgs_1 designs_imgs_2 designs_imgs_3 designs_imgs_4"
	                     "designs_imgs_5 . . .";
	justify-content:center;
}

#designs_imgs_1{
	grid-area: designs_imgs_1;
}
#designs_imgs_2{
	grid-area: designs_imgs_2;
}
#designs_imgs_3{
	grid-area: designs_imgs_3;
}
#designs_imgs_4{
	grid-area: designs_imgs_4;
}
#designs_imgs_5{
	grid-area: designs_imgs_5;
}
.designs_imgs{
	width: 300px;
}
*/
#designs_conteiner_promos{
	text-align:center;
	display:grid;
	margin-top: 30px;
	gap: 20px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: repeat(2,auto);
	grid-template-areas: "designs_imgs_1_promos";
	justify-content:center;
}

#designs_imgs_1_promos{
	grid-area: designs_imgs_1_promos;
}
.designs_imgs_promos{
	width: 200px;
}

@media screen and (max-width: 1200px){
	#designs_conteiner{
		grid-template-columns: repeat(3,auto);
		grid-template-rows: repeat(2,auto);
		grid-template-areas: "designs_imgs_1 designs_imgs_2 designs_imgs_3"
							 "designs_imgs_4 designs_imgs_5 .";
		justify-content:center;
	}
	#designs_conteiner_promos{
		grid-template-columns: repeat(3,auto);
		grid-template-rows: repeat(2,auto);
		grid-template-areas: "designs_imgs_1_promos";
		justify-content:center;
	}
	.designs_imgs_promos{
		width: 90%;
	}
}

@media screen and (max-width: 768px){
	#designs_conteiner{
		grid-template-columns: repeat(1,auto);
		grid-template-rows: repeat(5,auto);
		grid-template-areas: "designs_imgs_1"
		                     "designs_imgs_2"
							 "designs_imgs_3"
							 "designs_imgs_4"
							 "designs_imgs_5";
		justify-content:center;
	}

	.designs_imgs{
		width: 300px;
	}

	#designs_conteiner_promos{
		grid-template-columns: repeat(1,auto);
		grid-template-rows: repeat(2,auto);
		grid-template-areas: "designs_imgs_1_promos";
		justify-content:center;
	}
	.designs_imgs_promos{
		width: 90%;
	}
}

/* End designs.php */


/***************************************/
/*                                     */
/* INVENTARIO.PHP                         */
/*                                     */
/***************************************/
.main_titulo_inventario{
	color:#0CF;
}

/* Tabla main */
.tbl_inventario_main
{
	margin: 30px auto 30px auto;
	border-collapse:collapse;
	background-color:#fff;
	font-size: calc(0.5em + 0.5vw);
	letter-spacing:1px;
	color:#024B4F;
	width:70%;
	border:none;
}
.tbl_inventario_main > thead > tr:first-child > td
{
	background:#036;
	font-size:calc(0.8em + 0.8vw);
	color:#FFF;
	padding:5px;
	text-align:center;
	letter-spacing:1px;
	font-weight:bold;
	border-color:#F00;
	border: 1px solid #ddd;
}

.tbl_inventario_main > tfoot > tr > td
{
	background-color:#0D7DBF;
	height:5px;
}


/* Tabla dentro de main*/
.tbl_inventario
{
	margin: 0px auto 0px auto;
	border-collapse:collapse;
	background-color:#fff;
	border:none;
	font-size: calc(0.5em + 0.5vw);
	letter-spacing:1px;
	color:#024B4F;
	width:100%;
}
.tbl_inventario > thead > tr > td
{
	background:#0D7DBF;
	padding:5px;
	text-align:center;
	font-size: calc(0.8em + 0.5vw);
	color:#FFF;
	letter-spacing:1px;
	font-weight:bold;
}
.tbl_inventario > tbody > tr > td:nth-of-type(1)
{
	text-align:left;
}

.tbl_inventario > tbody > tr > td
{
	border:solid 1px #ddd;
	padding:5px;
	text-align:left;
}
.tbl_inventario > tfoot > tr > td
{
	background-color:#0D7DBF;
	height:5px;
}
/* End Tabla */

.campo_inventario_existencia_numerico, .campo_inventario_existencia_texto, .campo_inventario_existencia_lista, .campo_inventario_requerimiento_llenar, .campo_inventario_requerimiento_pedir{
	background:#FFF;
	border:solid 1px #CCC;
	font-size: calc(0.5em + 0.5vw);
	padding: 5px 5px 5px 5px;
	border-radius: 5px;
	letter-spacing:1px;
	margin: 0px 10px 0px 10px;
	color:#000;
	text-align:center;
	width:75px;
}
.campo_inventario_existencia_texto{
	background:#FFC;
}
.campo_inventario_existencia_lista{
	width:auto;
}

#capa_inventario{
	margin-top: 30px;
	border: none;
	width:45%;
	margin:auto;
	padding:10px;
	justify-content:center;
    text-align: center;
	align-items:center;
}





@media screen and (max-width: 1200px){
	.tbl_inventario_main
	{
		width:98%;
	}
}


/* links.php                        */
#grupo_links_ultimos{
	text-align:center;
	padding-top:0px;
	color:#777;
	font-size: calc(0.5em + 0.5vw);
}
.grupo_links_fila_ultimos{
	padding:3px;
}
.grupo_links_link_ultimos{
	text-decoration: none;
	color:#FFF;
}

/* End links.php */









/* End inventario.php */




/***************************************/
/*                                     */
/* campania.PHP                     */
/*                                     */
/***************************************/
#capa_campania{
	text-align:center;
	padding-top: 30px;
}
#capa_campania_titulo{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
}
#capa_campania_separador{
	width: 100px;
	border-top: 1px solid #6CF;
	padding-left: 30px;
	padding-right: 30px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
#capa_campania_datos{
	display:grid;
	margin-top: 10px;
	gap: 1px;
	grid-template-columns: auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "campania_grupo_nombre"
						 "campania_grupo_vigencia_desde"
						 "campania_grupo_vigencia_hasta"
						 "campania_grupo_total_premios"
						 "capa_campania_button";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#campania_grupo_nombre{
	grid-area: campania_grupo_nombre;
	display:flex;
	align-items: center;
}
#campania_grupo_vigencia_desde{
	grid-area: campania_grupo_vigencia_desde;
	display:flex;
	align-items: center;
}
#campania_grupo_vigencia_hasta{
	grid-area: campania_grupo_vigencia_hasta;
	display:flex;
	align-items: center;
}
#campania_grupo_total_premios{
	grid-area: campania_grupo_total_premios;
	display:flex;
	align-items: center;
}
#capa_campania_button{
		grid-area: capa_campania_button;
		margin-top: 30px;
		margin-bottom: 30px;
}

.texto_formulario{
	color:#0CF;
	display:inline-block;
	width:260px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}
.campo_formulario{
	background:#FFF;
	border:solid 2px #000;
	font-size:16px;
	padding: 10px 10px 10px 10px;
	border-radius: 5px;
	letter-spacing:1px;
	margin: 10px;
	color:#000;
	box-shadow: 0px 1px 10px #444;
}
.campo_formulario_chkpuntos{
	background:#FF9;
	border:solid 1px #000;
	font-size:12px;
	padding: 1px 1px 1px 1px;
	border-radius: 5px;
	letter-spacing:1px;
	margin: 1px;
	color:#000;
	text-align:center;
}
.boton_enviar_chkpuntos, .boton_rechazar_chkpuntos{
	font-size:12px;
	letter-spacing:1px;
	font-weight: bold;
	background:#FED61C;
	color:#000;
	border:none;
	padding:5px 10px 5px 10px;
	border-radius: 3px;
	box-shadow: 0px 1px 3px #333;
	cursor:pointer;
	margin-left: auto;
	margin-top: 1px;
	margin-bottom: 1px;
	text-decoration:none;
}

.boton_rechazar_chkpuntos{
	background:#0CF;
}

/***************************************/
/* TABLAS USUARIO                      */
/***************************************/
.tbl_clients_list
{
	margin: 30px auto 30px auto;
	border-collapse:collapse;
	background-color:#fff;
	border:none;
	font-size:12px;
	letter-spacing:1px;
	color:#024B4F;
	width:80%;
}
.tbl_clients_list > thead > tr > td
{
	background:#0D7DBF;
	padding:5px;
	text-align:center;
	font-size:12px;
	color:#FFF;
	letter-spacing:1px;
	font-weight:bold;
}
.tbl_clients_list > tbody > tr > td:nth-of-type(1)
{
	text-align:left;
}

.tbl_clients_list > tbody > tr > td
{
	border:solid 1px #ddd;
	padding:5px;
	text-align:center;
}
.tbl_clients_list > tfoot > tr > td
{
	background-color:#0D7DBF;
	height:5px;
}
/* End Tabla */

@media screen and (max-width: 1200px){

	#campania_grupo_nombre, 
	#campania_grupo_vigencia_desde, 
	#campania_grupo_vigencia_hasta, 
	#campania_grupo_total_premios, 
	#capa_campania_button	
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
}
/* End campania.php */

/***************************************/
/*                                     */
/* premios.PHP                     */
/*                                     */
/***************************************/
#capa_premios{
	text-align:center;
	padding-top: 30px;
}
#capa_premios_separador{
	width: 100px;
}
#capa_premios_titulo{
}

.main_titulo_premios{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
}

.titulo_premios{
	color:#09F;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:normal;
	margin-top: 30px;
}

.titulo_vigencia{
	color:#FC0;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:normal;
	margin-top: 30px;
}
.especificaciones{
	color:#AAA;
	font-size: calc(0.5em + 0.1vw);
}
#capa_premios_datos{
	display:grid;
	margin-top: 30px;
	gap: 8px;
	grid-template-columns: auto;
	grid-template-rows: repeat(4,auto);
	grid-template-areas: "premios_grupo_nombre"
						 "premios_grupo_foto"
						 "premios_grupo_condiciones"
						 "premios_grupo_limite"
						 "premios_grupo_dias_limite"
						 "capa_premios_button";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#premios_grupo_nombre{
	grid-area: premios_grupo_nombre;
	display:flex;
	align-items: center;
}
#premios_grupo_foto{
	grid-area: premios_grupo_foto;
	display:flex;
	align-items: center;
}
#premios_grupo_condiciones{
	grid-area: premios_grupo_condiciones;
	display:flex;
	align-items: center;
}
#premios_grupo_limite{
	grid-area: premios_grupo_limite;
	display:flex;
	align-items: center;
}
#premios_grupo_dias_limite{
	grid-area: premios_grupo_dias_limite;
	display:flex;
	align-items: center;
}
#capa_premios_button{
	grid-area: capa_premios_button;
	margin-top: 30px;
	margin-bottom: 30px;
}

.texto_formulario_premios{
	color:#0CF;
	display:inline-block;
	width:300px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}

.solo_texto{
	color:#0CF;
	display:inline-block;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}

.campo_formulario{
	background:#FFF;
	border:solid 2px #000;
	font-size:16px;
	padding: 10px 10px 10px 10px;
	border-radius: 5px;
	letter-spacing:1px;
	margin: 10px;
	color:#000;
	box-shadow: 0px 1px 10px #444;
}

#uploadImage{
	color:#FFF;
	font-size:14px;
	letter-spacing:1px;
	font-weight: bold;
	width: 450px;
	border:none;
	padding:20px;
	cursor:pointer;
}

#imagen_premios{
	width: auto;
	max-width: 120px;
    height: 100%;
    max-height: 120px;
}

.link_premios{
	text-decoration: none;
	color:#FC0;
}
.link_registro{
	text-decoration: none;
	color:#FC0;
	font-size: calc(0.7em + 0.7vw);
}
#capa_link_registro{
	margin-top:20px;
}

/***************************************/
/* TABLAS USUARIO                      */
/***************************************/
.tbl_premios_list
{
	margin: 10px auto 10px auto;
	border-collapse:collapse;
	background-color:#fff;
	border:none;
	font-size:12px;
	letter-spacing:1px;
	color:#024B4F;
	width:60%;
}
.tbl_premios_list > thead > tr > td
{
	background:#0D7DBF;
	padding:5px;
	text-align:center;
	font-size:12px;
	color:#FFF;
	letter-spacing:1px;
	font-weight:bold;
}
.tbl_premios_list > tbody > tr > td:nth-of-type(1)
{
	text-align:center;
}

.tbl_premios_list > tbody > tr > td
{
	border:solid 1px #ddd;
	padding:5px;
	text-align:left;
}
.tbl_premios_list > tfoot > tr > td
{
	background-color:#0D7DBF;
	height:5px;
}
/* End Tabla */

@media screen and (max-width: 1200px){

	#premios_grupo_nombre, 
	#premios_grupo_foto, 
	#premios_grupo_condiciones, 
	#premios_grupo_limite, 
	#premios_grupo_dias_limite,  
	#capa_premios_button	
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
	.texto_formulario_premios{
		width:auto;
	}
	#imagen_premios{
		width: 80px;
	}
	.tbl_premios_list
	{
		width:90%;
	}
}


/* End premios.php */


/***************************************/
/*                                     */
/* compartir.php                       */
/*                                     */
/***************************************/
#compartir_conteiner{
	text-align:center;
	padding-top: 30px;
	margin-bottom: 50px;
	display:grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "compartir_titulo"
	  					 "compartir_separador"
						 "capa_nombre_compartir"
						 "capa_nombre_vigencia_desde"
						 "link_copy"
						 "compartir_qr";
	justify-content:center;
    align-content: center;
	align-items:center;
}

#compartir_titulo{
	grid-area: compartir_titulo;
}

#compartir_separador{
	grid-area: compartir_separador;
}
#capa_nombre_compartir{
	grid-area: capa_nombre_compartir;
}
#capa_nombre_vigencia_desde{
	grid-area: capa_nombre_vigencia_desde;
}
#link_copy{
	grid-area: link_copy;
	padding-top:50px;
	align-items: center;
	text-align:center;
	justify-content:center;
}
#compartir_qr{
	margin-top: 50px;
	padding: 50px;
	grid-area: compartir_qr;
	border: solid 1px #ddd;
}
.main_titulo_compartir{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
}
.titulo_compartir{
	color:#09F;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:normal;
	margin-top: 30px;
}

#copy_link{
	grid-area: copy_link;
	color: #000;
	border-color: #CCC;
	border-style: solid;
	width:100%;
	text-align:center;
}
#btn_copy_link{
	margin-top:20px;
}

@media screen and (max-width: 768px){
	#compartir_conteiner {
		grid-template-columns: auto;
		grid-template-rows: repeat(6,auto);
		grid-template-areas: "compartir_titulo"
		  					 "compartir_separador"
							 "capa_nombre_compartir"
							 "capa_nombre_vigencia_desde"
							 "link_copy"
							 "compartir_qr";
	}
	#compartir_qr{
		margin-bottom: 50px;
	}
}
/* End compartir.php */

/***************************************/
/*                                     */
/* selector.PHP                        */
/*                                     */
/***************************************/
#capa_selector{
	text-align:center;
	padding-top: 30px;
}
#capa_selector_titulo{
	width: 100%;
}
.main_titulo_selector{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
}
#capa_nombre_selector{
}
.titulo_selector{
	color:#09F;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:normal;
	margin-top: 30px;
}
#capa_selector_datos{
	display:grid;
	margin-top: 20px;
	gap: 8px;
	grid-template-columns: auto;
	grid-template-rows: repeat(4,auto);
	grid-template-areas: "selector_grupo_celular"
						 "selector_grupo_correo";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#selector_grupo_celular{
	grid-area: selector_grupo_celular;
	display:flex;
	align-items: center;
}
#selector_grupo_correo{
	grid-area: selector_grupo_correo;
	display:flex;
	align-items: center; 
}
.texto_formulario_selector{
	color:#0CF;
	display:inline-block;
	width:120px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}
#selector_grupo_redes{
	margin-top: 30px;
	text-align:center;
	justify-content:center;
}
.img_redes{
	border-radius:10px;
	margin-top:10px;
	margin-left:20px;
	margin-right:20px;
	width: 100px;
	height:100px;
}

#selector_conteiner{
	text-align:center;
	justify-content:center;
}
#selector_grupo_premios{
	display:grid;
	border-top: 1px solid #CCC;
	padding: 25px 0px 25px 0px;
	margin:auto;
	width:50%;
	gap: 0px;
	grid-template-columns: 1fr 1fr 70%;
	grid-template-rows: repeat(2,auto);
	grid-template-areas: "boton_seleccion contenedor_imagen_premios_selector grupo_descripcion_condiciones"
						 "separador_premios separador_premios separador_premios";
	justify-content:center;
    text-align: left;
	align-items:center;
}


#boton_seleccion{
	grid-area: boton_seleccion;
	display:flex;
	justify-content:center;
    align-content: center;
	align-items:center;
	padding-bottom:30px;
}

#boton_seleccion input[type="radio"] {
    display: none; /* Ocultar el input original */
}

/* Estilo del contenedor del radio button */
#boton_seleccion label {
    display: inline-block;
    position: relative;
    padding-left: 30px; /* Espacio para el círculo personalizado */
    margin-right: 15px; /* Espacio entre los radio buttons */
    cursor: pointer;
}

/* Estilo del círculo personalizado */
#boton_seleccion label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 25px; /* Tamaño del círculo */
    height: 25px; /* Tamaño del círculo */
    border: 2px solid #0CF; /* Color del borde */
    border-radius: 50%; /* Hacer el borde redondeado */
}

/* Estilo del círculo cuando está seleccionado */
#boton_seleccion input[type="radio"]:checked + label:before {
    background-color: #007bff; /* Color de fondo del círculo */
}

#contenedor_imagen_premios_selector{
	grid-area: contenedor_imagen_premios_selector;
    display: flex;
	align-items:center;
	justify-content: center;
	width: 120px;
	height:120px;
	margin-right: 20px;
}
#grupo_descripcion_condiciones{
	grid-area: grupo_descripcion_condiciones;
	background:#EEE;
	height:100%;
	padding:5px;
	font-size: calc(0.5em + 0.5vw);
	border-radius:5px;
}
#descripcion{
	color:#039;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}
#titulo_condiciones{
	text-decoration:underline;
}
#condiciones{
	padding-left:5px;
}
#fecha_limite{
	color:#06C;
}
#separador_premios{
	grid-area: separador_premios;
	padding-bottom:10px;
}

#imagen_premios_selector{
	width:100%;
	border: 2px solid #FFF;
	border-radius:5px;
}

@media screen and (max-width: 1200px){
	#selector_grupo_celular, 
	#selector_grupo_correo  
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
	#selector_grupo_premios
	{
		width:85%;
		gap: 10px;
		grid-template-columns: auto;
		grid-template-rows: repeat(4,auto);
		grid-template-areas: "boton_seleccion contenedor_imagen_premios_selector"
							 "grupo_descripcion_condiciones grupo_descripcion_condiciones"
							 "separador_premios separador_premios";
	}
	#contenedor_imagen_premios_selector{
		margin-right: 10px;
	}
	.texto_formulario_selector{
		width:auto;
	}
	#grupo_descripcion_condiciones{
		width:330px;
		font-size: 1em;
	}
}

/* End selector.php */

/***************************************/
/*                                     */
/* outofdate.php y datareg.php         */
/*                                     */
/***************************************/
#homerodoh{
	margin-top: 30px;
	text-align: center;
}
.img_homero{
	width:250px;
	height:auto;
}
#restricted_text{
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	text-align: center;
	color:#FFF;
	width:80%;
	margin:auto;
	margin-top: 30px;
}
#restricted_button{
	margin-top: 50px;
	text-align: center;
}

/* End outofdate.php y datareg.php */

/***************************************/
/*                                     */
/* registrado.php                      */
/*                                     */
/***************************************/
#registrado_conteiner{
	text-align:center;
	padding-top: 30px;
	margin-bottom: 50px;
	display:grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "felicidades"
	  					 "guarda_codigo"
						 "codigo"
						 "homero"
						 "finalizar_button"
						 "view_premio_qr";
	justify-content:center;
    align-content: center;
	align-items:center;
}

#felicidades{
	grid-area: felicidades;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 0px;
	text-align: center;
	color:#FFF;
	width:80%;
	margin:auto;
}

#guarda_codigo{
	grid-area: guarda_codigo;
	letter-spacing:2px;
	font-size: calc(1em + 0.6vw);
	font-weight:normal;
	text-align: center;
	color:#0CF;
	width:80%;
	margin:auto;
	margin-top: 20px;
}

#codigo{
	grid-area: codigo;
	letter-spacing:5px;
	font-size: calc(1em + 1.3vw);
	font-weight:bold;
	margin-top: 20px;
	text-align: center;
	color:#FC0;
}

#homero{
	grid-area: homero;
}
.img_homero_senial{
	width:350px;
	height:auto;
}
#finalizar_button{
	grid-area: finalizar_button;
	margin-top: 50px;
	text-align: center;
}

#view_premio_qr{
	width:50%;
	grid-area: view_premio_qr;
	padding: 10px;
	border: solid 1px #ddd;
	margin:auto;
	margin-top: 50px;
}
.img_qr{
	width:200px;
	height:auto;
}
/* End registrado.php */

/******************************************/
/*                                        */
/* buscador.php                           */
/*                                        */
/******************************************/
#buscador_titulo, #valor_buscado{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 30px;
	text-align:center;
}
#buscador_separador{
	border-top: 1px solid #6CF;
	padding-left: 30px;
	padding-right: 30px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	width:200px;
}


#grupo_formulario_buscador{
	padding-bottom: 50px;
	display:grid;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(2,auto);
	grid-template-areas: "buscador_codigo"
						 "buscador_boton";
	justify-content:center;
    text-align: center;
	align-items:flex-start;
}
#buscador_codigo{
	grid-area: buscador_codigo;
	text-transform:uppercase;
}
#buscador_boton{
	grid-area: buscador_boton;
	margin:auto;
}
/* End buscador */

/***************************************/
/*                                     */
/* registrar_premio.php                */
/*                                     */
/***************************************/
#capa_registrar{
	text-align:center;
	padding-top: 0px;
}
#main_titulo_registrar{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 20px;
}
#capa_registrar_separador{
	width: 100px;
}

.titulo_registrar{
	color:#09F;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:normal;
	margin-top: 0px;
}

#selector_conteiner_registrar{
	text-align:center;
	justify-content:center;
}


#selector_grupo_registrar{
	display:grid;
	border-top: 1px solid #CCC;
	padding: 25px 0px 25px 0px;
	margin:auto;
	width:50%;
	gap: 0px;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(2,auto);
	grid-template-areas: "contenedor_imagen_registrar grupo_descripcion_condiciones_selector"
						 "separador_premios separador_premios";
	justify-content:center;
    text-align: left;
	align-items:center;
	margin-top: 10px;
}

#contenedor_imagen_registrar{
	grid-area: contenedor_imagen_registrar;
    display: flex;
	align-items:center;
	justify-content: center;
	width: 120px;
	height:120px;
	margin-right: 20px;
}

#grupo_descripcion_condiciones_selector{
	grid-area: grupo_descripcion_condiciones_selector;
	background:#EEE;
	height:100%;
	padding:5px;
	font-size: calc(0.5em + 0.5vw);
	border-radius:5px;
}
#descripcion_selector{
	color:#039;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}
#titulo_condiciones_selector{
	text-decoration:underline;
}
#condiciones_selector{
	padding-left:5px;
}

.imagen_premios_registrar{
	border: 2px solid #FFF;
	border-radius:5px;
	width:120px;
}

.especificaciones_registrar{
	color:#AAA;
	font-size: calc(0.5em + 0.7vw);
	margin-top:5px;
}
#check_cobrar{
	color:#FC0;
	font-size: calc(0.5em + 0.5vw);
	margin-bottom:10px;
}

@media screen and (max-width: 1200px){
	#selector_grupo_registrar
	{
		width:85%;
		gap: 10px;
		grid-template-columns: auto;
		grid-template-rows: repeat(3,auto);
		grid-template-areas: "contenedor_imagen_registrar"
							 "grupo_descripcion_condiciones_selector"
							 "separador_premios";
	}
	#contenedor_imagen_registrar{
		margin: auto;
	}
	.imagen_premios_registrar{
		width:100px;
	}
}

/* End registrar_premio.php */

/***************************************/
/*                                     */
/* registro.php                        */
/*                                     */
/***************************************/
#capa_registro{
	text-align:center;
	padding-top: 30px;
}
#capa_registro_titulo{
	width: 100%;
}
.main_titulo_registro{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
}
.main_titulo_mensaje{
	color:#FF0;
	letter-spacing:2px;
	font-size: calc(0.8em + 0.8vw);
	font-weight:bold;
	margin-top: 10px;
}
#capa_registro_datos{
	display:grid;
	margin-top: 30px;
	gap: 8px;
	grid-template-columns: auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "registro_grupo_correo"
						 "registro_grupo_password"
						 "registro_grupo_nombre";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#registro_grupo_correo{
	grid-area: registro_grupo_correo;
	display:flex;
	align-items: center; 
}
#registro_grupo_password{
	grid-area: registro_grupo_password;
	display:flex;
	align-items: center; 
}
#registro_grupo_nombre{
	grid-area: registro_grupo_nombre;
	display:flex;
	align-items: center; 
}
#registro_button{
	grid-area: registro_button;
}

.texto_formulario_registro{
	color:#0CF;
	display:inline-block;
	width:120px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}

@media screen and (max-width: 1200px){
	#registro_grupo_correo, 
	#registro_grupo_password, 
	#registro_grupo_nombre
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
	.texto_formulario_registro{
		width:auto;
	}
}
/* End registro.php */

/***************************************/
/*                                     */
/* useradmin.php                        */
/*                                     */
/***************************************/
#capa_useradmin{
	text-align:center;
	padding-top: 30px;
}
#capa_useradmin_titulo{
	width: 100%;
}
.main_titulo_useradmin{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
	margin-bottom:10px;
}
.main_subtitulo_useradmin{
	color:#FF0;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
	margin-top: 10px;
	margin-bottom:10px;
}
.main_subtitulo_total_puntos_blanco{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(2em + 2vw);
	font-weight:bold;
	margin-top: 10px;
	margin-bottom:10px;
}
.main_subtitulo_total_puntos{
	color:#FC0;
	letter-spacing:2px;
	font-size: calc(2em + 2vw);
	font-weight:bold;
	margin-top: 10px;
	margin-bottom:10px;
}
#capa_useradmin_datos{
	display:grid;
	margin-top: 30px;
	border:solid 2px #0CF;
	width:45%;
	margin:auto;
	padding:10px;
	gap: 8px;
	grid-template-columns: auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "useradmin_subtitulo_datos"
						 "useradmin_grupo_correo"
						 "useradmin_grupo_nombre"
						 "useradmin_grupo_celular"
						 "useradmin_grupo_cumple"
						 "useradmin_subtitulo_factura"
						 "useradmin_grupo_nit"
						 "useradmin_grupo_nombre_factura"
						 "useradmin_button";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#useradmin_subtitulo_datos{
	grid-area: useradmin_subtitulo_datos;
	display:flex;
	align-items: center; 
	justify-content:center;
    text-align: left;
}
#useradmin_grupo_correo{
	grid-area: useradmin_grupo_correo;
	display:flex;
	align-items: center; 
}
#useradmin_grupo_nombre{
	grid-area: useradmin_grupo_nombre;
	display:flex;
	align-items: center; 
}
#useradmin_grupo_celular{
	grid-area: useradmin_grupo_celular;
	display:flex;
	align-items: center;
}
#useradmin_grupo_cumple{
	grid-area: useradmin_grupo_cumple;
	display:flex;
	align-items: center;
}
#useradmin_subtitulo_factura{
	grid-area: useradmin_subtitulo_factura;
	display:flex;
	align-items: center; 
	justify-content:center;
    text-align: left;
}
#useradmin_grupo_nit{
	grid-area: useradmin_grupo_nit;
	display:flex;
	align-items: center; 
}
#useradmin_grupo_nombre_factura{
	grid-area: useradmin_grupo_nombre_factura;
	display:flex;
	align-items: center; 
}
#useradmin_button{
	grid-area: useradmin_button;
	margin:auto;
}



#capa_canjear_datos{
	display:grid;
	margin-top: 30px;
	border:solid 2px #0CF;
	width:45%;
	margin:auto;
	padding:10px;
	gap: 8px;
	grid-template-columns: auto;
	grid-template-rows: repeat(3,auto);
	grid-template-areas: "canjear_subtitulo_datos"
						 "canjear_grupo_nombre"
						 "canjear_grupo_cumple"
						 "canjear_grupo_puntos"
						 "canjear_button";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#canjear_subtitulo_datos{
	grid-area: canjear_subtitulo_datos;
	display:flex;
	align-items: center; 
	justify-content:center;
    text-align: left;
}
#canjear_grupo_nombre{
	grid-area: canjear_grupo_nombre;
	display:flex;
	align-items: center; 
}
#canjear_grupo_cumple{
	grid-area: canjear_grupo_cumple;
	display:flex;
	align-items: center; 
}
#canjear_grupo_puntos{
	grid-area: canjear_grupo_puntos;
	display:flex;
	align-items: center;
}
#canjear_button{
	grid-area: canjear_button;
	margin:auto;
}








#capa_useradmin_club{
	display:grid;
	margin-top: 30px;
	border:solid 2px #0CF;
	width:45%;
	margin:auto;
	padding:10px;
	gap: 8px;
	grid-template-columns: auto;
	grid-template-rows: repeat(5,auto);
	grid-template-areas: "useradmin_subtitulo_club"
						 "useradmin_grupo_mesa"
						 "useradmin_grupo_monto"
						 "useradmin_button_club";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#useradmin_subtitulo_club{
	grid-area: useradmin_subtitulo_club;
	display:flex;
	align-items: center; 
	justify-content:center;
    text-align: left;
}
#useradmin_grupo_mesa{
	grid-area: useradmin_grupo_mesa;
	display:flex;
	align-items: center; 
}
#useradmin_grupo_monto{
	grid-area: useradmin_grupo_monto;
	display:flex;
	align-items: center; 
}
#useradmin_button_club{
	grid-area: useradmin_button_club;
	margin:auto;
}

#capa_useradmin_puntos{
	display:grid;
	margin-top: 30px;
	border:solid 2px #0CF;
	width:45%;
	margin:auto;
	padding:10px;
    text-align: center;
	align-items:center;
}
#capa_useradmin_lista_puntos{
	display:grid;
	margin-top: 30px;
	border:solid 2px #0CF;
	width:45%;
	margin:auto;
	padding:10px;
    text-align: center;
	align-items:center;
}


.texto_formulario_useradmin {
	color:#0CF;
	display:inline-block;
	width:160px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}
.texto_formulario_canjear{
	color:#0CF;
	display:inline-block;
	width:160px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}

.campo_formulario_noedit{
	background:none;
	border:none;
	border-bottom:solid 2px #0CF;
	font-size:16px;
	padding: 10px 10px 10px 10px;
	letter-spacing:1px;
	margin: 10px;
	color:#FC0;
}


@media screen and (max-width: 1200px){
	#capa_useradmin_datos{
		width:100%;
	}
	#capa_useradmin_club{
		width:100%;
	}
	#capa_useradmin_puntos{
		width:100%;
	}
	#capa_useradmin_lista_puntos{
		width:100%;
	}
	#capa_canjear_datos{
		width:100%;
	}
	#useradmin_grupo_correo, 
	#useradmin_grupo_nombre, 
	#useradmin_grupo_celular, 
	#useradmin_grupo_cumple, 
	#useradmin_grupo_nit,
	#useradmin_grupo_nombre_factura,
	#useradmin_grupo_mesa,
	#useradmin_grupo_monto, 
	#canjear_grupo_nombre, 
	#canjear_grupo_cumple, 
	#canjear_grupo_puntos 	
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
	.texto_formulario_useradmin{
		width:auto;
	}
	.texto_formulario_canjear{
		width:auto;
	}
	.campo_formulario_noedit{
		text-align:center;
	}

}
/* End useradmin.php */


/***************************************/
/* TABLAS PUNTOS                      */
/***************************************/
.tbl_puntos
{
	margin: 10px auto 10px auto;
	border-collapse:collapse;
	background-color:#fff;
	border:none;
	font-size:12px;
	letter-spacing:1px;
	color:#024B4F;
	width:90%;
}
.tbl_puntos > thead > tr > td
{
	background:#0D7DBF;
	padding:5px;
	text-align:center;
	font-size:12px;
	color:#FFF;
	letter-spacing:1px;
	font-weight:bold;
}
.tbl_puntos > tbody > tr > td:nth-of-type(1)
{
	text-align:center;
}

.tbl_puntos > tbody > tr > td
{
	border:solid 1px #ddd;
	padding:5px;
	text-align:center;
}
.tbl_puntos > tfoot > tr > td
{
	background-color:#0D7DBF;
	height:5px;
}
/* End Tabla */

@media screen and (max-width: 1200px){
	.tbl_puntos
	{
		width:98%;
	}
}


/* End puntos.php */



/***************************************/
/*                                     */
/* links.php                        */
/*                                     */
/***************************************/
#grupo_links{
	text-align:center;
	padding-top:20px;
	color:#777;
	font-size: calc(1em + 0.5vw);
}
.grupo_links_fila{
	padding:10px;
}
.grupo_links_link{
	text-decoration: none;
	color:#FC0;
}

/* End links.php */

/***************************************/
/*                                     */
/* usuarios.php                        */
/*                                     */
/***************************************/
#capa_usuarios{
	text-align:center;
	padding-top: 30px;
}
#capa_usuarios_titulo{
	width: 100%;
}
.main_titulo_usuarios{
	color:#FFF;
	letter-spacing:2px;
	font-size: calc(1em + 1vw);
	font-weight:bold;
	margin-top: 10px;
}
#capa_usuarios_datos{
	display:grid;
	margin-top: 30px;
	gap: 1px;
	grid-template-columns: auto;
	grid-template-rows: repeat(9,auto);
	grid-template-areas: "usuarios_grupo_nombre"
						 "usuarios_grupo_usuario"
						 "usuarios_grupo_password"
						 "usuarios_grupo_cargo"
						 "usuarios_grupo_ciudad"
						 "usuarios_grupo_celular"
						 "usuarios_grupo_correo"
						 "usuarios_grupo_fecha_nacimiento"
						 "usuarios_button";

	justify-content:center;
    text-align: left;
	align-items:center;
}
#usuarios_grupo_nombre{
	grid-area: usuarios_grupo_nombre;
	display:flex;
	align-items: center;
}
#usuarios_grupo_usuario{
	grid-area: usuarios_grupo_usuario;
	display:flex;
	align-items: center;
}
#usuarios_grupo_password{
	grid-area: usuarios_grupo_password;
	display:flex;
	align-items: center;
}
#usuarios_grupo_cargo{
	grid-area: usuarios_grupo_cargo;
	display:flex;
	align-items: center;
}
#usuarios_grupo_ciudad{
	grid-area: usuarios_grupo_ciudad;
	display:flex;
	align-items: center;
}
#usuarios_grupo_celular{
	grid-area: usuarios_grupo_celular;
	display:flex;
	align-items: center; 
}
#usuarios_grupo_correo{
	grid-area: usuarios_grupo_correo;
	display:flex;
	align-items: center; 
}
#usuarios_grupo_fecha_nacimiento{
	grid-area: usuarios_grupo_fecha_nacimiento;
	display:flex;
	align-items: center; 
}
#usuarios_button{
	grid-area: usuarios_button;
}

.texto_formulario_usuarios{
	color:#0CF;
	display:inline-block;
	width:160px;
	letter-spacing:2px;
	font-size: calc(1em + 0.5vw);
	font-weight:bold;
}
.texo_upper_usuarios{
	text-transform:uppercase;
}

@media screen and (max-width: 1200px){
	#usuarios_grupo_celular, 
	#usuarios_grupo_correo, 
	#usuarios_grupo_nombre, 
	#usuarios_grupo_nit
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}
	.texto_formulario_usuarios{
		width:auto;
	}
}
/* End usuarios.php */