// Estilos externos
@import url("ext.css");

// Variables globales
@tam1: 0.75em;
@tam2: 1em;
@tam3: 2.5em;
@tam4: 4em;
@tam5: 5.5em;
@tam6: 7em; //Titulo principal
@letra1: Verdana, Geneva, sans-serif;
@letra2: 'Ubuntu', sans-serif;
@letra3: 'Fredericka the Great', cursive;
@letra4: 'Happy Monkey', cursive;
@letra5: 'Monsieur La Doulaise', cursive;
@letra6: 'RobotoMedium';
@letra7: 'RobotoRegular';
@letra8: 'RobotoLight';
@letra9: 'RobotoBoldCondensed';
@colorFondoPagina: #f9f8f5;
@coloLiga: #006BAD;
@coloLigaHover: #007ecc;
@color-tit-home: #f9f8f5;
@color-text: #191919;
@ancho_pagina: 900px; /*Min 500px*/

@altoCabecera: 35px;
@fondoCabecera: #d9d2b9;
@lineaCabecera: #a85400;
@zCabecera: 98;

@anchoMenu: 200px;
@coloMenu: #F9F6F7;
@zMenu: 99;

@bordeBody: #d5ceb2;
@zBody: 10;

@zPie: 11;

@zIcoAviso: 89;
@zBanAviso: 88;
@zIcoSocial: 87;
@zBanSocial: 86;


/* FUNCIONES */
.df_borde(@grosor: 1px, @radio: 1px, @color:#666, @tipo: solid)
{
	border-radius: @radio;
	border: @grosor @tipo @color !important;
}
.df_cursor()
{
	cursor: pointer;
}
/* ----- */


/* CLASES */
.sp_cabecera
{
	position: fixed;
	width: 100%;
	left: 0px;
	top: 0px;
	height: @altoCabecera;
	background: @fondoCabecera;
	border-bottom: 1px solid @lineaCabecera;
	z-index: @zCabecera;
	
	._cont_pagina
	{
		width: @ancho_pagina;
		height: 100%;
		margin: 0 auto;
		
		._home, ._social, ._menu
		{
			height: 100%;
			padding: 0px;
			display: table;
			float: left;
		}
		
		._home
		{
			width: 35%;
			
			div
			{
				display: table-cell;
    			vertical-align: middle;
			
				._tit_home
				{
					font-family: @letra2;
					font-size: @tam2 + 0.25;
					font-weight: bold;
					color: @color-tit-home;
					text-shadow: 0px 0px 5px #807f7d;
			        filter: dropshadow(color=#807f7d, offx=0, offy=0);
					.df_cursor();	
				}
			}
		}
		._social
		{
			width: 30%;
			
			& > div
			{
				display: table-cell;
    			vertical-align: middle;
    			text-align: center;	
    			
				.fondo_icon_social
				{
					border: 1px solid #c7bd98;
					border-radius: 50%;
					display: inline-block;
					background: #ebe7da;
					padding: 3px;
					&:hover{
						background: #f6f7f7;
						box-shadow: 0px 0px 6px #a19162;
					}
				}
			}
		}
		._menu
		{
			width: 35%;
			
			div
			{
				display: table-cell;
    			vertical-align: middle;
    			text-align: right;
    			
    			._user
				{
					display: inline-block;
					font-family: @letra6;
					font-size: @tam1 + 0.2;
					color: #b6652d;
					& + span{vertical-align: middle;}
				}
    			
    			#btnRegistro
				{
					display: inline-block;
					font-family: @letra7;
					font-size: @tam1 + 0.2;
					color: @coloLiga;
					.df_cursor();
					&:hover{
						color: @coloLigaHover;
					}
				}
				#btnSesion
				{
					display: inline-block;
					font-family: @letra7;
					font-size: @tam1 + 0.2;
					font-weight: bold;
					color: @coloLiga;
					.df_cursor();
					&:hover{
						color: @coloLigaHover;
					}
				}
    			
    			._cabecera_btn_menu
				{
					display: inline-block;
					border: 1px solid #cec6a5;
					padding: 2px;
					.df_cursor();
					
					&:hover{
						background: @coloMenu;
					}
				}
    		}
		}
	}
}
.sp_gplus_vincu
{
	position: fixed;
	a
	{
		color: #FFFFFF !important;
	}
	z-index: 0;
}

.sp_menu
{
	display: none;
	position: fixed;
	width: @anchoMenu;
	.df_borde(1px, 0px);
	top: @altoCabecera;
	left: 50%;
	margin-left: 0px + (@ancho_pagina / 2) - @anchoMenu;
	background: @coloMenu;
	box-shadow: 1px 1px 5px #b5a977, -1px -1px 5px #b5a977;
	z-index: @zMenu;
	
	&:after
	{
		content: '\5E';
		position: absolute;
		text-align: center;
		font-weight: bold;
		font-size: @tam2 + 0.35;
		padding-top: 5px;
		background: @coloMenu;
		width: 23px;
		height: 22px;
		right: -1px;
		top: -28px;
		border-top: 1px solid #666;
		border-left: 1px solid #666;
		border-right: 1px solid #666;
		box-shadow: 1px -2px 4px #b5a977, -1px -2px 4px #b5a977;
	}
	
	nav
	{
		padding: 10px;
		font-family: @letra7;
		font-size: @tam1 + 0.3;
		color: #be9d7d;
		ul
		{
			margin: 0;
			padding: 0;
			text-align: center;
			span
			{
				opacity: 0.5;
			}
			li
			{
				margin: 2px;
				padding: 3px;
				list-style: none;
				text-align: right;
				div
				{
					display: inline-block;
					vertical-align: middle;
				}
				
				&[nav]:hover
				{
					.df_cursor();
					background: #be9d7d;
					color: #FFFFFF;
					border-radius: 5px;
					box-shadow: 0px 0px 10px #b5a977
				}
				&[ref]:hover
				{
					.df_cursor();
					background: #0000a3;
					color: #FFFFFF;
					border-radius: 5px;
					box-shadow: 0px 0px 15px #b5a977
				}
				&[cls]:hover
				{
					.df_cursor();
					background: #660000;
					color: #FFFFFF;
					border-radius: 5px;
					box-shadow: 0px 0px 15px #b5a977
				}
			}
		}
	}
}

.sp_body
{
	background-color: #FFF;
	margin: 0 auto;
	position: relative;
	width: @ancho_pagina;
	top: @altoCabecera;
	border-left: 1px solid @bordeBody;
	border-right: 1px solid @bordeBody;
	box-shadow: 7px 0px 15px #e4dfcd, 0px 0px 0px #e4dfcd, -7px 0px 15px #e4dfcd;
	z-index: @zBody;
}

.sp_pie
{
	margin: 0 auto;
	position: relative;
	width: @ancho_pagina + 30;
	min-height: 25px;
	top: @altoCabecera;
	background: @fondoCabecera;
	border-left: 1px solid @bordeBody;
	border-right: 1px solid @bordeBody;
	border-top: 1px solid @lineaCabecera;
	border-bottom: 1px solid #AEAEAE;
	box-shadow: 7px 0px 15px #e4dfcd, 0px 0px 0px #e4dfcd, -7px 0px 15px #e4dfcd;
	font-family: @letra2;
	font-size: @tam2;
	color: #816040;
	z-index: @zPie;
	
	#devDsp
	{
		color: #8e6a47;
	}
	
	._ribbon-left
	{
		position: absolute;
		left:0;
		bottom:-11px;
		width:15px;
		height:11px;
		background: @fondoCabecera;
		border-bottom-left-radius: 100% 100%;
		
		&:after
		{
			content: '';
			position: absolute;
			right:0;
			width:65%;
			height:65%;
			background: #AEAEAE;
			border-top-left-radius:100% 20%;
			border-bottom-left-radius:100% 100%;
		}
	}
	
	._ribbon-right
	{
		position: absolute;
		right:0;
		bottom:-11px;
		width:15px;
		height:11px;
		background: @fondoCabecera;
		border-bottom-right-radius:100% 100%;
		
		&:after
		{
			content: '';
			position: absolute;
			left:0;
			width:66%;
			height:66%;
			background: #AEAEAE;
			border-top-right-radius:100% 20%;
			border-bottom-right-radius:100% 100%;
		}
	}
}

._icono_avisos
{
	position: fixed;
	top: @altoCabecera + 5;
	left: 5px;
	.df_cursor();
	opacity: 0.8;
	z-index: @zIcoAviso;
	
	&:hover
	{
		opacity:1;
	}
}
.sp_banner_avisos
{
	position:fixed;
	width: 200px;
	height: 220px;
	top: @altoCabecera + 10;
	left: 9px;
	border: 1px solid #d5ceb2;
	border-radius: 12px;
	box-shadow: 7px 0px 15px #e4dfcd, 7px 0px 15px #e4dfcd, -7px 0px 15px #e4dfcd;
	background-color: #FFF;
	font-family: @letra7;
	z-index: @zBanAviso;
}

._icono_social
{
	position: fixed;
	bottom: 8px;
	right: 8px;
	.df_cursor();
	opacity: 0.6;
	z-index: @zIcoSocial;
	
	&:hover
	{
		opacity:9;
	}
}
.sp_banner_social
{
	position:fixed;
	width:310px;
	height:90px;
	bottom:15px;
	right:15px;
	border: 1px solid #d5ceb2;
	border-radius: 12px;
	box-shadow: 7px 0px 15px #e4dfcd, 7px 0px 15px #e4dfcd, -7px 0px 15px #e4dfcd;
	background-color: #FFF;
	font-family: @letra7;
	z-index: @zBanSocial;
}

.spg_inicio, .spg_registro, .spg_activar, .spg_sesion, .spg_recuperar, .spg_visitas, .spg_coordenadas, .spg_configuracion, .spg_informacion, .spg_cerrar
{
	padding-top: 15px;
	width: 95%;
	margin: 0 auto;
}

/* PAGINAS */
.spg_registro
{
	._conte
	{
		margin: 0 auto;
		width: 90%;
		fieldset
		{
			border: 0;
			margin: 0 auto;
		}
		._captcha
		{
			img{float: left;}
			input{width: 80px;}
		}
		#xNombre, #xAlias, #xPass, #xPass2{width: 200px;}
		#xCorreo, #xApellidos{width: 300px;}
	}
}
.spg_activar
{
	._conte
	{
		margin: 0 auto;
		width: 80%;
		.g_msgR
		{
			margin: 0 auto;
			text-align: center;
			a
			{
				font-weight: normal;
			}
		}
	}
}
.spg_sesion
{
	._conte
	{
		margin: 0 auto;
		width: 480px;
		fieldset
		{
			border: 0;
			margin: 0 auto;
			width: 300px;
			input
			{
				width: 96%;
			}
			._text
			{
				text-align: center;
				padding: 8px;
			}
		}
		
		._user
		{
			text-align: center;
			font-size: @tam2 + 0.1;
			font-weight: bold;
			color: #b6652d;
		}
	}
}
.spg_recuperar
{
	._conte
	{
		margin: 0 auto;
		width: 480px;
		fieldset
		{
			border: 0;
			margin: 0 auto;
			width: 300px;
			input
			{
				width: 96%;
			}
			._text
			{
				text-align: center;
				padding: 8px;
			}
		}
		._text
		{
			text-align: justify;
			font-family: @letra2;
			font-size: @tam1 + 0.28;
			color: @color-text;
		}
	}
}
.spg_visitas
{
	._conte
	{
		margin: 0 auto;
		width: 80%;
	}
}
/* ***** */


.g_tit_pagina
{
	border-bottom: 1px solid #CCCCCC;
	padding: 5px 0px 10px 0px;
	margin-bottom: 15px;
	font-family: @letra2;
	font-size: @tam3;
	font-weight: bold;
	letter-spacing: -1px;
	text-shadow: 0px 0px 1px #894400;
	color: #a85400;
}
.g_registro
{
	padding: 4px 0px 4px 0px;
	label
	{
		font-family: @letra7;
		font-size: @tam1 + 0.3;
		font-weight: bold;
		color: #191919;
	}
}
.g_msgR
{
	color: #B01642;
	font-weight: bold;
	font-family: @letra6;
	font-size: @tam1 + 0.3;
}

.dmsgClass
{
	position: fixed;
	top: @altoCabecera + 5;
	left: 50%;
	width: 600px;
	margin-left: -300px;
	background: rgba(237, 180, 36, 0.6);
	border-radius: 9px;
	padding: 8px;
	z-index: 98;
	._conte
	{
		background: #fbfbf3;
		border: 1px solid @lineaCabecera;
		border-radius: 9px;
	    box-shadow: 0px 0px 5px rgba(36, 28, 28, 0.7);
		padding: 8px;
		font-family: @letra9;
		font-size: @tam1 + 0.35;
		text-align: center;
		font-weight: bold;
		&._neg
		{
			color: #715309;
		}
		&._red
		{
			color: #D41111;
		}
		&._blue
		{
			color: #0E4EF0;
		}
	}
}


/* MAPA */
#sp_map_container
{
	width: 830px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
#mapa_sp
{
	position:absolute; 
	width:830px; 
	height:450px;
}
#sp_capa_mapa
{
	position: relative;	
	width: 830px;
	height: 450px;
	background: url('../img/mapa_capa.png') no-repeat;
	background-size: 100%;
	/*pointer-events:none;*/
}
#mapa_sp_controles
{
	position: absolute;
	bottom: 15px;
	width: 100%;
	pointer-events: none;
}
#mapa_sp_aviso
{
	position: absolute;
	top: 15px;
	right: 15px;
	border: 1px solid #eeb324;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff0a5;
	color: #1414ff;
	width: 300px;
	padding: 5px;
	text-align: center;
	
	&:hover
	{
		text-decoration:underline;
	}
}
.sp_boton_control_map
{
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	cursor: pointer;
	background: rgb(173, 146, 116);
	color: rgb(230, 251, 255);
	text-shadow:1px 1px 3px #8C6939;
	border: 1px solid #436bf9;
	box-shadow: 0 0 5px #436bf9; 
	padding:5px;
	pointer-events: auto;
	
	&:hover
	{
		color: rgb(255, 255, 255);
		box-shadow: 0 0 6px #052ebb;
	}
}
/* ***** */


/* Efectos */
.dc_icono_simple
{
	.df_cursor();	
}
/* ----- */


/* Textos */
.dmsgPaginaError
{
	text-align: center;
	padding: 10px;
	color: rgb(131, 131, 131);
	span
	{
		color: rgb(210, 19, 0);
		font-weight: bold;
	}
}

.sp_tit_principal
{
	font-family:'Fredericka the Great', cursive;
	font-size:7em;
	color:#a85400;
	text-shadow: 2px 2px 4px #d9d2b9, -2px -2px 3px #d9d2b9;
	filter: dropshadow(color=#d9d2b9, offx=-1, offy=1);
}
.sp_tit_principal_min
{
	font-family:'Fredericka the Great', cursive;
	font-size:2.5em;
	color:#d16800;
}

.sp_texto_2
{
	font-family: 'Monsieur La Doulaise', cursive;
	font-size:4em;
	text-shadow: -2px 2px 10px #d9d2b9;
	filter: dropshadow(color=#d9d2b9, offx=-1, offy=1);
}
/* ----- */


/* General */
.g_divTabla
{
	display: table;
	.g_divFila
	{
		display: table-row;
		.g_divCelda
		{
			display: table-cell;
			vertical-align: middle;
		}
	}
}

.g_divCentro{margin: 0 auto;}

.g_renglon{height: 20px;}

.g_rdio1{border-radius:3px;}
.g_rdio2{border-radius:6px;}
.g_rdio3{border-radius:9px;}
.g_rdio4{border-radius:12px;}
.g_rdio5{border-radius:15px;}
.g_rdio0{border-radius:50%;}

._10{width: 10%}
._20{width: 20%}
._30{width: 30%}
._40{width: 40%}
._50{width: 50%}
._60{width: 60%}
._70{width: 70%}
._80{width: 80%}
._90{width: 90%}
._100{width: 100%}

.g_tex-l{text-align:left;}
.g_tex-r{text-align:right;}
.g_tex-c{text-align:center;}
.g_tex-j{text-align:justify;}
/* ----- */


/* ETIQUETAS */
html
{
	font-size: 100%;
}

body
{
	background: @colorFondoPagina;
	font-family: @letra1;
	font-size: @tam1;
}

a
{
	text-decoration: none;
	font-family: @letra7;
	color: @coloLiga;
	&:hover
	{
		color: @coloLigaHover;
		border-bottom: 1px dotted #B5C5CA;
	}
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"]
{    
	.df_borde(1px, 3px, #CCCCCC);
	padding:6px 5px 6px 5px;
	margin: 3px 0px 3px 0px;
	color:#0F416A;
	&:focus
	{
		outline: 0;
		.df_borde(1px, 3px, #C1C100);
		box-shadow: 0px 0px 6px #FEFA50 !important;
	}
}

input[type="radio"]
{
	appearance: none;
	.df_borde(1px, 50%, #CCCCCC);
	padding: 7px;
	margin: 3px 0px 3px 0px;
	display: inline-block;
    position: relative;
    vertical-align: middle;
    & + label
    {
    	position: relative;
    	vertical-align: middle;
    	font-weight: normal;
    }
	&:checked:after
	{
		content: ' ';
	    width: 8px;
	    height: 8px;
	    top: 3px;
	    left: 3px;
	    border-radius: 50%;
	    position: absolute;
	    background: #99a1a7;
	}
}

button
{
	padding: 7px 13px 7px 13px;
	.df_borde(1px, 5px, #CCCCCC);
	color: #FFFFFF;
	text-shadow: 0px 0px 5px #807f7d;
	text-align: center;
	font-family: @letra2;
	font-size: @tam1 + 0.35;
	&._blue
	{
		background: #0393D9;
		&:hover
		{
			background: #0277B0;
			box-shadow: 0px 0px 2px #a19162;
		}
	}
	&._red
	{
		background: #CA3535;
		&:hover
		{
			background: #912626;
			box-shadow: 0px 0px 2px #a19162;
		}
	}
	
	div
	{
		display: inline-block;
		vertical-align: middle;
	}
}
/* ----- */