:root {
    --primary-color: #504090;
    /*#1e293b;*/
    /*#f5f5f5;*/
    --accent-color: #6050A0;
    /*#3b82f6;*/
    /*#b88ee2;*/
}
    
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0;
}

body {
    overflow-x: hidden; 
	font-family: Arial; 
	font-size: 12pt;
}

.letragrande {
	font-size: 16pt; 
}

.letrachica {
	font-size: 10pt;
    width: 100%; 
}

A:link {
	COLOR: #791116;
	text-decoration: none;
}

A:visited {
	COLOR: #791116;
	text-decoration: none;
}

A:hover {
	text-decoration: none; /*none,underline*/
	color:#CB1D67;
}

h1 {
	/* Título de la página en la sección main */
	font-size: 16pt;
	padding: 0px 0px 5px 0px;
	margin: 0px 0px 10px 0px;
	border-bottom: 1px dashed #aaddaa;
}
h2 { 
	/* Título de la página en la sección lateral izquierda */
	font-size: 18pt;
	text-align: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
h3 { 
	font-size: 14pt;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
li {
	padding: 0 2em 0 0;
}
img {
	max-height: 100%;
	max-width: 100%;
}
header {
    height: 100px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
input:read-only {
  background-color: #f0f0f0;
}
#header-left { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}
header.shrink {
    height: 60px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#logo-img { height: 80px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#title-img { height: 60px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.shrink #logo-img { height: 60px; }
.shrink #title-img { height: 40px; }

#btn-menu { display: none; }

.hamburger-btn {
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--primary-color);
    position: absolute;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
}

.hamburger-icon::before { transform: translateY(-8px); }
.hamburger-icon::after { transform: translateY(8px); }

#btn-menu:checked ~ header .hamburger-icon { background-color: transparent; }
#btn-menu:checked ~ header .hamburger-icon::before { transform: rotate(45deg); }
#btn-menu:checked ~ header .hamburger-icon::after { transform: rotate(-45deg); }

.user-avatar { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid #eee; }
.user-menu { position: relative; }
.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    background: #EEE;
    /*#;*/
    color: #EEE;
    min-width: 150px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}
.user-dropdown a { display: block; padding: 12px; text-decoration: none; color: #333; }
.user-dropdown a:hover { background: #b88ee2; color: var(--accent-color); }
.user-menu:hover .user-dropdown { display: block; }

#container {
    display: flex;
    min-height: calc(100vh - 150px);
}
.sidebar {
    width: 250px;
    background: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden; /* Importante para ocultar el texto al encoger */
    white-space: nowrap; /* Evita que el texto salte de línea al encoger */
}
.nav-links { list-style: none; padding: 10px 0 ; }
.nav-links a {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    text-decoration: none;
    padding: 15px 22px; /* Alineación para que el icono quede centrado en mini */
    transition: background 0.2s;
}
.nav-links .icon2 {
    width: 24px;
    margin-right: 20px;
    text-align: center;
}
.nav-links a:hover { background: #334155; color: white; }
#main {
    flex: 1;
    padding: 10px;
    background: #FFFFFF;
    min-width: 0;
}

footer { 
	background-color: #363839;
	height: 200px;
	color: #FFFFFF; 
	bottom: 0;
	text-align: left;
}
#footertext { 
	padding: 1rem;
}
.footer-inverted {
    color: #363839; 
}
#sidebar {
	/* Div lateral izquierda */
	visibility: hidden;
	width: 13%;
	min-width: 180px;
	height: 100%;
	float: left;
	text-align: left;
	margin: 15px 10px 15px 20px; /*Distancia entre el borde del marco y los objetos externos top-right-bottom-left*/
	padding: 15px 15px 15px 15px; /*Distancia entre el borde del marco y los objetos internos*/
	border-bottom: 1px solid #aaddaa; /*none, dashed, dotted, solid*/
	border-top: 1px solid #aaddaa;
	border-left: 1px solid #aaddaa;
	border-right: 1px solid #aaddaa;
	background: #ddFFdd fixed;
	border-radius: 10px;
	-moz-border-radius: 10px; /*Firefox*/
	-webkit-border-radius: 10px; /*Safari-Chrome*/
}
#main2 { 
	/*width: 740px;*/
	/*float: left;*/
	width: 960px;
	height: 100%;
	margin: 0 auto;
	padding: 1% 1% 1% 1%; /*Distancia entre el borde del marco y los objetos internos*/
	background: #FFFFFF fixed;
	border-radius: 5px;
	-moz-border-radius: 5px; /*Firefox*/
	-webkit-border-radius: 5px; /*Safari-Chrome*/
	border-bottom: 1px solid #aaddaa; /*none, dashed, dotted, solid*/
	border-top: 1px solid #aaddaa;
	border-left: 1px solid #aaddaa;
	border-right: 1px solid #aaddaa;
	text-align: left;
    overflow: hidden;
	/* Antes: overflow: hidden; */
    /* overflow: scroll; */
    width:30%;
    float:left;
    text-align:center;
    margin:1rem;
}
#mapid { 
	/*width: 740px;*/
	/*float: left;*/
    width: 100%;
    height: 600px;
	/*margin: 1rem;*/
	padding: 1% 1% 1% 1%; 
	background: #FFFFFF fixed;
	border-radius: 5px;
	-moz-border-radius: 5px; /*Firefox*/
	-webkit-border-radius: 5px; /*Safari-Chrome*/
	border-bottom: 1px solid #aaddaa; /*none, dashed, dotted, solid*/
	border-top: 1px solid #aaddaa;
	border-left: 1px solid #aaddaa;
	border-right: 1px solid #aaddaa;
	text-align: left;
    overflow: hidden;
    z-index:0;
    float:left;
}
iframex {
	position:absolute;
	width: 100%;
	height: 100%;
	border:none;
	top:0px;
	left:0px;
}
.derechax {
	/* Div lateral derecha */
	width: 13%;
	min-width: 150px;
	float: left;
	margin: 15px 10px 15px 20px; /*Distancia entre el borde del marco y los objetos externos top-right-bottom-left*/
	padding: 15px 15px 15px 15px; /*Distancia entre el borde del marco y los objetos internos*/
	border-bottom: 1px solid #aaddaa; /*none, dashed, dotted, solid*/
	border-top: 1px solid #aaddaa;
	border-left: 1px solid #aaddaa;
	border-right: 1px solid #aaddaa;
	background: #ddFFdd fixed;
	border-radius: 10px;
	-moz-border-radius: 10px; /*Firefox*/
	-webkit-border-radius: 10px; /*Safari-Chrome*/
}
/* Estilos para la página de inicio */
/* .inicial {background-attachment: scroll; background-image: url(images/bg-fotos.jpg);	background-repeat: no-repeat; background-position: 25px 75px; } */
.inicial { background-attachment: scroll; background-image: url(../images/bg-fotos.jpg); background-repeat: no-repeat; background-position: 25px 75px; }
.primario { background-attachment: scroll; background-image: url(../images/bg-fotos2.jpg); background-repeat: no-repeat; background-position: 25px 75px; }
.secundario { background-attachment: scroll; background-image: url(../images/bg-fotos4.jpg); background-repeat: no-repeat; background-position: 25px 75px; }

.menu1 {
	width: 100px;
	margin: 0px 0px 0px 0px;
	height: 32px;
	padding:0px 0px 0px 0px;
	/* background:url(backmenu3.png) no-repeat; */
}
.dropline1 {
	padding: 0;
	list-style: none;
	text-align: center;
	margin:0 auto;
	font-size: 14pt;
	font: arial, sans-serif;
	height: 32px;
	width: 900px;
	position: relative;
	left: 0;
	letter-spacing: 0.05em;
	z-index: 1000;
}
.menu2 {
	width: 100%;
	margin: 0;
	padding: 0.25em 0 0.25em 0;
	text-align: left;
}
.ul2 {
	margin: 0;
	padding: 0;
	list-style: none;
}
.li2 {
	margin: 0;
	padding: 0 0.25em 0.25em 0;
	list-style: none;
}
.menu3 {
	width: 100%;
	margin: 0;
	padding: 0.25em;
	background: #bbddbb fixed;
	text-align: left;
}
.ul3 {
	width: auto;
	margin: 0;
	padding: 0.5em;
	list-style: none;
}
.li3 {
	width: auto;
	margin: 0;
	padding: 0 2em 0 0;
	list-style: none;
	display: inline;
}
.tabla1 {
	/*width: 100%;*/
	border: 0px;
	background: auto;
	height: auto;
	color: auto;
}
.tabla2 {
	/*Se usa en lateral*/
	width: 100%;
}
.tabla2 td {
	padding: 2px;
}
.tabla3 {
	/* Tabla para mostrartitulocartelera*/
	width: 100%;
	border-bottom: 1px dashed #aaddaa; /*none, dashed, dotted, solid*/
	margin: 0px 0px 15px 0px;
}
.tabla3 td {
	padding: 2px;
}
.tabla4 {
	/* Tabla para datos verticales */
	margin: 10px 0px 0px 0px;
	width: 100%;
	border: 1px solid #AACCAA; /*none, dashed, dotted, solid*/
	border-collapse: collapse;
}
.tabla4 tr:nth-child(even) { 
	background: #BBDDBB;
}
.tabla4 tr:nth-child(odd) {
	background: #DDFFDD;
}
.tabla4 td {
	border: 1px solid #AACCAA;
	padding: 2px 2px 2px 2px;
}
.tabla4 th {
	background: #006B01;
	color: #DDFFDD;
	font-weight: bold;
	text-align: left;
	border: 1px solid #AACCAA;
	padding: 2px 2px 2px 2px;
}
.tabla5 {
	/* Tabla para datos horizontales */
	margin: 10px 0px 0px 0px;
	width: 100%;
	border: 1px dotted #AADDAA; /*none, dashed, dotted, solid*/
	border-collapse: collapse;
}
.tabla5 td {
	padding: 2px 2px 2px 2px;
}
.tabla5 tr:nth-child(even) { 
	background: #DDFFDD;
}
.tabla5 tr:nth-child(odd) {
	background: #AADDAA;
}
.tabla5 th {
	background: #BBDDBB;
	font-weight: bold;
	border: 1px dotted #99BB99;
	text-align: left;
	padding: 2px 2px 2px 2px;
}
.tabla6 {
	/* Tabla para submenúes*/
	width: 100%;
	margin: 1% 0 1% 0;
	padding: 0px;
	font-size: 12pt;
	background: #BBDDBB;
}
.celda1 {
	width: 34px;
	vertical-align: middle;
}
.TablaSeccionPrincipal tfoot {
	background-color: #009933;
	text-align: center;
}
input [type="radio"] {
    margin: 0.1rem;
}
.input1 {
	border-style: dotted;
	border-width: 1px;
	font-family: Arial; 
	font-size: 14pt;
	color: #22682F;
	height: 20;
	padding: 0;
	margin: 0.1rem 0.5rem 0.5rem 0.1rem;
	background-color: #C2F0CA;
}
.input2 { 
	/*height: 40px;*/
	/*padding: 11px 15px 11px 15px;*/
	padding: 8px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 2px solid #BDC2C9;
	vertical-align: middle;
	display: inline-block;
	margin: 0.1rem 0.5rem 0.5rem 0.1rem;
	font-family: Arial; 
	background-color: #FFF;
	/*font-size: 14pt;*/
}
:focus.input2{
    /*border-color: rgba( 0, 107, 1, 0.8);*/
    border-color: rgba(168, 236, 82, 0.8);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(168, 236, 82, 0.6);
    outline: 0;
}
.select2 { 
	/*height: 30px;*/
}
.textarea2 {
	height: auto;
	font-family: Arial; 
	font-size: 14pt; 
}
.color1 {
	color:#8A131A;
}
.color2 {
	color: #24417B;
}
.linea {
	background-color: #24417B;
}
.boton1 {
	/*height: 40px;*/
	/*Antes pero queda muy gordo: padding: 12px 16px 12px 16px;*/
	padding: 8px;
	color: #FFFFFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	border: 1px solid #00CC77;
	text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
	background-image: linear-gradient(to bottom,#1AB35D,#0DFB98);
	margin: 2px 0px 2px 0px;
	font-size: 13pt; 
	font-family: Arial; 
}
:hover.boton1 {
	background-image: linear-gradient(to bottom,#0DFB98,#1AB35D);
}
:active.boton1 {
	background: #009354;
}
.boton2 {
	/*height: 40px;*/
	/*Antes pero queda muy gordo: padding: 12px 16px 12px 16px;*/
	padding: 8px;
	color: #FFFFFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	border: 1px solid #A06060;
	text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
	background-image:linear-gradient(to bottom,#804040,#C08080);
	margin: 2px 0px 2px 0px;
	font-size: 13pt; 
	font-family: Arial; 
}
:hover.boton2 {
	background-image:linear-gradient(to bottom,#C08080,#804040);
}
:active.boton2 {
	background: #804040;
}
.boton3 {
	/*height: 40px;*/
	/* Antes pero queda muy gordo: padding: 12px 16px 12px 16px;*/
	padding: 8px;
	color: #FFFFFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	border: 1px solid #BB0000;
	text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
	background-image:linear-gradient(to bottom,#990000,#FF0000);
	margin: 2px 0px 2px 0px;
	font-size: 13pt; 
	font-family: Arial; 
}
:hover.boton3 {
	background-image:linear-gradient(to bottom,#FF0000,#990000);
}
:active.boton3 {
	background: #FF0000;
}
.vertical {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
	display: block;
	/*position: absolute;*/
	/*right: -5px;*/
	/*top: 15px;*/
	width: 10;
	height: 100;
	transform: rotate(-90deg);
}
.icon {
    float: left;
    padding: 0.5rem;
    width: 128px;
    text-align: center;
    font-size: 14px;
}
.prtTitulo { FONT-WEIGHT: bold; FONT-SIZE:14px; COLOR: lightskyblue; FONT-FAMILY: Tahoma, Verdana, Arial; }
.prtSubtitu { FONT-SIZE: 12px; COLOR: black; FONT-FAMILY: Tahoma, Verdana, Arial; }
.prtSubtitu1 { FONT-SIZE: 12px; COLOR: black; FONT-FAMILY: Tahoma, Verdana, Arial; }
.prtCabecera { FONT-SIZE: 12px; COLOR: black; FONT-FAMILY: Tahoma, Verdana, Arial; BACKGROUND-COLOR: gainsboro; }
.prtDetCampo { FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Tahoma, Verdana, Arial; BACKGROUND-COLOR: gainsboro; }
.prtSaltoDePagina{ PAGE-BREAK-BEFORE: always; }

/*Estilo para los votos de los pulgares */
.votos {float:right;width:138px;margin:0 0 10px 40px;border:2px solid #eee;padding:10px;list-style:none;}
.votos .dw_button {background: url(../images/s/votos.png) -64px 0 no-repeat;float: left;height: 42px;width: 64px;cursor:pointer;margin:0 0 0 10px}
.votos .dw_button:hover {background: url(../images/s/votos.png) no-repeat -64px -42px;}
.votos .up_button {background: url(../images/s/votos.png) 0 0 no-repeat;float: left;height: 42px;width: 64px;cursor:pointer;}
.votos .up_button:hover{background: url(../images/s/votos.png) no-repeat 0 -42px;}
.voting_btn{float:left;}
.voting_btn span{font-size: 11px;font-family:Arial,sans-serif;margin:10px 0 0 37px;display:block;width:27px;height:22px;line-height:22px;text-align:center}
.likes_votado{background: url(../images/s/votos.png) no-repeat 0 -42px !important;}
.hates_votado{background: url(../images/s/votos.png) no-repeat -64px -42px !important;}

/*Estilos para los votos con estrellitas*/
#ccontainer {padding: 0px 0px 0px 0px;text-align:left;display:inline;float:left;}
.ratingblock {padding-bottom:8px;margin-bottom:8px;}
.loading {height: 30px;background: url(../images/s/working.gif) 50% 50% no-repeat;}
.unit-rating {list-style:none;margin: 0px !important;padding:0px !important;height: 30px;position: relative;background: url(../images/s/starrating.gif) top left repeat-x;}
.unit-rating li{
    text-indent: -90000px;padding:0px;margin:0px;
	/*\*/
	float: left;
	/* */
}
.unit-rating li a {
	outline: none;
	display:block;
	width:30px;
	height: 30px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.unit-rating li a:hover{
	background: url(../images/s/starrating.gif) left center;z-index: 2;left: 0px;
}
.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:30px;}
.unit-rating a.r2-unit{left:30px;}
.unit-rating a.r2-unit:hover{width: 60px;}
.unit-rating a.r3-unit{left: 60px;}
.unit-rating a.r3-unit:hover{width: 90px;}
.unit-rating a.r4-unit{left: 90px;}	
.unit-rating a.r4-unit:hover{width: 120px;}
.unit-rating a.r5-unit{left: 120px;}
.unit-rating a.r5-unit:hover{width: 150px;}
.unit-rating a.r6-unit{left: 150px;}
.unit-rating a.r6-unit:hover{width: 180px;}
.unit-rating a.r7-unit{left: 180px;}
.unit-rating a.r7-unit:hover{width: 210px;}
.unit-rating a.r8-unit{left: 210px;}
.unit-rating a.r8-unit:hover{width: 240px;}
.unit-rating a.r9-unit{left: 240px;}
.unit-rating a.r9-unit:hover{width: 270px;}
.unit-rating a.r10-unit{left: 270px;}
.unit-rating a.r10-unit:hover{width: 300px;}
.unit-rating li.current-rating {
	background: url(../images/s/starrating.gif) left bottom;
	position: absolute;
	height: 30px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
}
.voted {color:#999;}
.thanks {color:#36AA3D;}
.static {color:#5D3126;}

@media screen and (max-width: 960px) {
	#main {
		width: 100%;
		padding: 0;
	}
	#main2 {
		width: 100%;
		padding: 0;
        margin:0
	}
	#mapid {
		width: 100%;
		padding: 0;
        /*margin: 0.1rem;*/
        height: 500px;
	}
	header {
		width: 100%;
		padding: 0;
	}
}
@media screen and (min-width: 200px) and (orientation: landscape) {
	#derecha {
		float: left;
		border: 20px solid #00FF00;
	}
}
@media screen and (min-width: 200px) and (orientation: portrait) {
	#derecha {
		float: left;
		border: 20px solid #FF0000;
	}
}
@media screen and (min-width: 1200px) {
	#derecha {
		float: left;
		border: 20px solid #000000;
	}
}
@media screen and (max-width: 600px) {
	#main { width: 100%; margin:0; padding:5; }
    #menusuperior { margin: 0; }
}
/* ESCRITORIO: Abierto por defecto. Cuando se desmarca: Se vuelve mini. Ocultar texto cuando no está marcado */ 
@media (min-width: 1024px) {
    /* Estado inicial (Checked): Ancho completo */
    .sidebar { width: 70px; }
    .sidebar .text { opacity: 0; }
    /* Cuando el script o el usuario lo marcan: */
    #btn-menu:checked ~ #container .sidebar { width: 250px; }
    #btn-menu:checked ~ #container .sidebar .text { opacity: 1; }
}

/* MÓVIL: Cerrado por defecto.*/ 
@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        left: calc(-1 * 250px);
        width: 250px;
        height: 100%;
        z-index: 999;
    }
    #btn-menu:checked ~ #container .sidebar { left: 0; }   
    .title-img { display: none; } /* Ahorrar espacio en móvil */
}