@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* =========================================================
   PALETA (ajusta aquí los colores del cartel)
   ---------------------------------------------------------
   --violeta: color principal (marcos/títulos del póster)
   --violeta-osc: hover/bordes del violeta
   --amarillo: crema del bloque central
   --lima-ini/lima-fin: gradiente verdoso de fondo
   --gris-grid: líneas de rejilla (si decides usarlas)
   --texto: color base de texto
   ========================================================= */
:root {
	--violeta: #6E3EB2;
	--violeta-osc: #5B3394;
	--amarillo: #F1E6A6;
	--lima-ini: #CBEF95;
	--lima-fin: #A8E07D;
	--gris-grid: #E6E6E6;
	--blanco: #FFFFFF;
	--negro: #000000;
	--texto: #2A2A2A;
}

/* ===== Reseteo y tipografía base ===== */
html {
	position: relative;
	min-height: 100%;
	overflow-x: hidden;
}

body {
	margin-bottom: 80px;
	font-family: 'Lato', 'Raleway', Arial, sans-serif !important;
	color: var(--texto);
	/* Fondo inspirado en el póster (opcional, si prefieres blanco, comenta estas dos líneas) */
	/* background: linear-gradient(180deg, var(--lima-ini), var(--lima-fin)) fixed; */
}

* {
	font-family: 'Lato', 'Raleway', Arial, sans-serif;
}

/* ===== Barra hamburguesa (Bootstrap 3) ===== */
.icon-bar {
	background-color: var(--blanco);
}

/* ===== NAVBAR principal con gradiente violeta ===== */
.navbar-trans {
	background: linear-gradient(var(--violeta), var(--violeta-osc));
	color: var(--blanco);
	opacity: 0.95;
	border: none;
	top: 0;
	z-index: 1000;
	position: relative;
}

/* Hover/activo en navbar: resalte con crema */
.navbar-trans li>a:hover,
.navbar-trans li>a:focus,
.navbar-trans li.active {
	background-color: rgba(241, 230, 166, 0.62);
	/* var(--amarillo) con transparencia */
}

/* Color de enlaces en la navbar */
.navbar-trans a {
	color: var(--blanco);
	font-weight: bold;
}

/* Focus de inputs en navbar con acento violeta */
.navbar-trans .form-control:focus {
	border-color: var(--violeta);
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(110, 62, 178, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(110, 62, 178, 0.6);
}

/* ===== Paneles y headings (Bootstrap) con violeta ===== */
.panel-primary>.panel-heading {
	background-color: var(--violeta);
}

.panel-default>.panel-heading {
	color: var(--blanco);
	background-color: var(--violeta);
	border-color: #dddddd;
}

.panel-default .panel-heading h4 {
	font-weight: bold !important;
	font-family: Arial, Helvetica, sans-serif;
}

/* ===== Secciones y espaciado ===== */
section {
	min-height: 10%;
	padding: 10px;
}

.subtitulo {
	padding-top: 30px;
}

.v-center {
	padding-top: 10%;
	font-size: 70px;
}

.well {
	border-color: transparent;
}

/* ===== Tarjetas de premios (mantengo dorado/frontal oscuro) ===== */
.premio-card {
	transition: transform 0.3s ease-in-out;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	font-size: 40px;
	color: #fff;
	padding: 20px;
	border-radius: 14px;
	width: 260px;
	height: 250px;
	text-align: center;
	line-height: normal;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	perspective: 1000px;
}

.premio-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.7s;
	transform-style: preserve-3d;
}

.premio-card:hover .premio-card-inner,
.premio-card.permanent-hover .premio-card-inner {
	transform: rotateY(180deg);
}

.premio-card-front,
.premio-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.premio-card-front {
	background: #ffd700;
	color: #fff;
}

.premio-card-back {
	background: #333;
	color: #fff;
	transform: rotateY(180deg);
}

.premio-card:hover {
	transform: scale(1.1);
}

/* ===== List-group activos/info en violeta ===== */
a.list-group-item.active,
[class*='-info'] {
	background-color: var(--violeta);
	color: var(--blanco);
}

/* ===== Imágenes y layout responsive ===== */
.img-responsive {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.align-equal {
	display: flex !important;
	align-items: stretch;
	flex-wrap: wrap;
}

.align-equal>.col-md-5 {
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.align-equal>.col-md-7 {
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.align-equal>.col-md-5>*,
.align-equal>.col-md-7>* {
	display: block;
}

.align-equal .cartel {
	display: block;
	max-width: 90%;
	width: auto;
	height: 100% !important;
	object-fit: contain;
}

@media (max-width: 990px) {
	.align-equal {
		display: block;
	}

	.align-equal>.col-md-5,
	.align-equal>.col-md-7 {
		max-width: 100%;
		flex: 0 0 100%;
		width: 100%;
	}
}

/* ===== Tablas y resaltados (mantengo esquema oro/plata/bronce) ===== */
.table-container {
	margin-bottom: 100px;
}

.highlight {
	font-weight: bold;
	background-color: #FFF8DC !important;
}

.gold {
	background-color: #ffff99 !important;
	font-weight: bold;
}

.silver {
	background-color: #EAEAEA !important;
	font-weight: bold;
}

.bronze {
	background-color: #E6C3A7 !important;
	font-weight: bold;
}

/* ===== Botones de exportación (adaptados a violeta) ===== */
.export-buttons {
	margin-bottom: 10px;
	font-weight: bold;
}

.btn-export-csv,
.btn-export-pdf {
	background-color: var(--violeta);
	color: var(--blanco);
	border: none;
	padding: 8px 12px;
	margin-right: 5px;
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}

.btn-export-csv:hover,
.btn-export-pdf:hover {
	background-color: var(--violeta-osc);
}

/* ===== Patrocinadores (thumbnails) ===== */
.customer-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 auto;
}

.thumbnail {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	width: 350px;
	overflow: hidden;
	margin: 4px auto;
}

.customer-img {
	width: 110px;
	height: 110px;
}

.customer-img2 {
	width: 100px;
	height: 100px;
}

/* ===== Texto general ===== */
.texto {
	font-size: 18px;
}

/* ===== Enlaces con violeta ===== */
a {
	color: var(--violeta);
	font-weight: bold;
}

a:hover,
a:focus {
	color: var(--violeta-osc);
}

/* ===== Cabeceras de tabla ===== */
th {
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
	text-align: left;
	unicode-bidi: isolate;
	font-size: 20px;
}

/* ===== Secciones temáticas (ajustadas a paleta) ===== */
#section1 {
	background-color: #ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
}

#section2 {
	background-color: #ffffff;
	color: #000000;
}

#section3 {
	background-color: var(--violeta);
	color: #f0f0f0;
}

#section4 {
	background-color: #fff;
	color: #444;
}

#section5,
#section7,
#section7 a {
	color: var(--violeta);
}

#section6 {
	background-color: var(--violeta);
	color: #f0f0f0;
}

/* ===== FOOTER estilo póster (violeta + crema en hover) ===== */
footer {
	position: absolute;
	width: 100%;
	height: relative;
	background: linear-gradient(var(--violeta), var(--violeta-osc));
	opacity: 0.95;
	color: var(--blanco);
	display: inline-block;
	padding-bottom: 0px;
}

footer .nav>li>a {
	padding: 3px;
	color: #caa68e;
	/* tono crema para links del footer */
}

footer .nav>li>a:hover {
	background-color: transparent;
	color: var(--amarillo);
}

/* Ajustes del footer de tu componente */
#footer .dropup .btn-default {
	margin: 10px;
}

#footer .col-lg-4 h5 {
	margin-top: 20px;
}

/* Copyright */
.copyright {
	text-align: center;
	padding-top: 10px;
}

/* ===== Títulos destacados en violeta ===== */
.page-header {
	color: var(--violeta);
	font-weight: bold;
}

/* ===== Pills activos en violeta ===== */
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
	color: var(--blanco);
	background-color: var(--violeta);
}

/* ===== Jumbotron (mantiene imagen actual) ===== */
.jumbotron {
	background-image: url('http://www.olimpiadasinformatica.uclm.es/imagenes/carteles_logos/banner_olimpiada_1.png');
	background-size: auto 100%;
	background-position: center center;
	background-color: #fff;
	height: auto;
	width: auto;
	background-repeat: no-repeat;
}

/* ===== Iconos y mapas (sin cambios de color) ===== */
.glyphicon.glyphicon-envelope {
	font-size: 21px;
}

.map_container .map_canvas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

/* ===== Tabs y utilidades ===== */
#tabSubsections {
	padding-top: 15px;
}

.col-25pc {
	width: 25%
}

/* ===== Botón estilo “twitter” adaptado a paleta ===== */
a.twitter-timeline {
	display: inline-block;
	padding: 6px 12px 6px 30px;
	margin: 10px 0;
	border: var(--violeta) solid 1px;
	border-radius: 3px;
	background: var(--violeta) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjAiIGZpbGw9Im5vbmUiIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIvPg0KPHBhdGggZmlsbD0iIzZFM0VCMiIgZD0iTTY4LjgxMiwxNS4xNDFjLTIuMzQ4LDEuMDM5LTQuODY5LDEuNzQzLTcuNTE5LDIuMDZjMi43MDMtMS42Miw0Ljc3OC00LjE4Nyw1Ljc1Ni03LjI0NGMtMi41MjksMS41LTUuMzMsMi41OTItOC4zMTMsMy4xNzYNCglDNTYuMzQ5LDEwLjU5MSw1Mi45NDgsOSw0OS4xODIsOWMtNy4yMjksMC0xMy4wOTIsNS44NjEtMTMuMDkyLDEzLjA5M2MwLDEuMDI2LDAuMTE4LDIuMDIxLDAuMzM4LDIuOTgxDQoJYy0xMC44ODUtMC41NDgtMjAuNTI4LTUuNzU3LTI2Ljk4Ny0xMy42NzljLTEuMTI2LDEuOTM2LTEuNzcxLDQuMTg0LTEuNzcxLDYuNTgxYzAsNC41NDIsMi4zMTIsOC41NTEsNS44MjQsMTAuODk4DQoJYy0yLjE0Ni0wLjA2OS00LjE2NS0wLjY1Ny01LjkzLTEuNjM4Yy0wLjAwMiwwLjA1NS0wLjAwMiwwLjExLTAuMDAyLDAuMTYyYzAsNi4zNDUsNC41MTMsMTEuNjM4LDEwLjUwNCwxMi44NA0KCWMtMS4xMDEsMC4yOTgtMi4yNTYsMC40NTctMy40NDksMC40NTdjLTAuODQ2LDAtMS42NjctMC4wNzgtMi40NjUtMC4yMzFjMS42NjcsNS4yLDYuNDk5LDguOTg2LDEyLjIzLDkuMDkNCgljLTQuNDgyLDMuNTEyLTEwLjEyOSw1LjYwNi0xNi4yNiw1LjYwNmMtMS4wNTUsMC0yLjA5Ni0wLjA2MS0zLjEyMi0wLjE4NGM1Ljc5NCwzLjcxNywxMi42NzYsNS44ODIsMjAuMDY3LDUuODgyDQoJYzI0LjA4MywwLDM3LjI1MS0xOS45NDksMzcuMjUxLTM3LjI0OWMwLTAuNTY2LTAuMDE0LTEuMTM0LTAuMDM5LTEuNjk0QzY0LjgzOCwyMC4wNjgsNjcuMDU4LDE3Ljc2NSw2OC44MTIsMTUuMTQxeiIvPg0KPC9zdmc+DQo=") 8px 8px no-repeat;
	background-size: 1em 1em;
	color: var(--blanco);
	white-space: nowrap;
}

a.twitter-timeline:hover,
a.twitter-timeline:focus {
	background-color: var(--violeta-osc);
}

a.twitter-timeline:focus {
	outline: none;
	border-color: var(--violeta);
}

/* ===== Utilidades varias ===== */
.code {
	font-size: 1.2em;
}

.table-container {
	margin-bottom: 100px;
}

.noticias {
	max-height: 600px;
	overflow: hidden;
	border: 1px solid #bbb;
	padding: 2px;
}

.campoRojo {
	border: red 2px solid;
}

.menuLateral {
	margin: 0px;
}

.bottomBorder {
	border-bottom: 1px solid #ddd;
}

.special_title {
	width: 50%;
	margin: 0 auto;
	font-size: 30px;
	font-weight: bolder;
	color: #7A4BC0;
	/* violeta aclarado */
}

/* ===== Botones Bootstrap adaptados ===== */
.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default,
.btn-default:active:hover,
.btn-default.active:hover,
.open>.dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open>.dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open>.dropdown-toggle.btn-default.focus {
	background-color: var(--amarillo);
	border-color: var(--blanco);
	color: var(--texto);
	font-weight: bold;
	border-width: 2px;
}

.btn-default:hover {
	color: var(--blanco);
	background-color: var(--violeta);
	border-color: var(--blanco);
}

.btn-primary {
	background-color: var(--violeta);
	border-color: var(--violeta);
	color: var(--blanco);
	font-weight: bold;
}

.btn-primary:hover {
	color: var(--blanco);
	background-color: var(--violeta-osc);
	border-color: var(--violeta-osc);
}

/* ===== Modales y galería (sin cambios cromáticos críticos) ===== */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

.modal-content,
#caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width:700px) {
	.modal-content {
		width: 100%;
	}
}

/* ===== Overlays / popups / campos ===== */
.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}

.overlay:target {
	visibility: visible;
	opacity: 1;
}

.popup {
	margin: 70px auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 30%;
	position: relative;
	transition: all 5s ease-in-out;
	color: #000;
}

.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}

.popup .close:hover {
	color: #a2ca8e;
}

.popup .content {
	max-height: 30%;
	overflow: auto;
}

.searchField {
	margin-top: 25px;
	border-color: var(--violeta) !important;
	color: #a2ca8e !important;
}

/* ===== Gestión de equipos (colores adaptados) ===== */
.teamManagement {
	color: var(--blanco) !important;
	padding-bottom: 0px;
	padding-top: 0px;
	border-color: var(--blanco) !important;
	font-weight: bold;
}

.panelEquipos {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.cabeceraParticipante {
	font-weight: bold;
	color: var(--amarillo);
}

/* ===== Visibilidad de cabeceras (dejar como está) ===== */
/* .headerCompeticiones{ display:none !important; } */
/* .headerPuntuaciones{ display:none !important; } */
/* .headerTemario{ display:none !important; } */
/* .headerPremios{ display:none !important; } */
/* .headerFotos{ display:none !important; } */
/* .headerOrganizacion{ display:none !important; } */
/* .headerPrensa{ display:none !important; } */
/* .headerZonaequipos{ display:none !important; } */
/* .headerMoodle{ display:none !important; } */
/* .headercontacto{ display:none !important; } */

/* ========= Paleta: añadimos un alias directo para el lima ========= */
:root {
	/* ya los tienes definidos arriba; aseguramos alias útil */
	--lima: #CBEF95;
	/* verde lima (ajusta si quieres) */
	--lima-osc: #A8E07D;
	/* lima más oscuro para hover/borde */
	--amarillo: #F7F2CF;
	/* crema más pálido para fondo global */
}

/* ========= Fondo global crema (en vez de gradiente) ========= */

/* ========= Header / logo (navbar-brand) con hover lima ========= */
/* Nota: funciona tanto si el logo es texto como si es una <img> dentro del <a> */
.navbar-trans .navbar-brand {
	border-radius: 6px;
	transition: background-color .2s ease, box-shadow .2s ease, transform .08s ease;
}

.navbar-trans .navbar-brand:hover,
.navbar-trans .navbar-brand:focus {
	background-color: var(--lima) !important;
	/* verde lima al pasar el ratón */
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .05) inset;
	color: #1d1d1d !important;
	/* mejor contraste sobre lima */
}

/* Si tu logo es imagen, añadimos un pequeño “lift” agradable */
.navbar-trans .navbar-brand img {
	transition: transform .12s ease;
}

.navbar-trans .navbar-brand:hover img {
	transform: translateY(-1px);
}

/* ========= Más presencia de lima en la UI (manteniendo violeta como primario) ========= */

/* Enlaces: al hacer hover, subrayado/bor de acento lima */
a:hover,
a:focus {
	border-bottom: 2px solid var(--lima);
	padding-bottom: 1px;
}

/* Dropdown: resalte de item en lima */
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
	background-color: var(--lima) !important;
	color: #1d1d1d !important;
}

/* Botón “success” (útil para CTAs secundarios con lima) */
.btn-success {
	background-color: var(--lima);
	border-color: var(--lima-osc);
	color: #1d1d1d;
	font-weight: 700;
}

.btn-success:hover,
.btn-success:focus {
	background-color: var(--lima-osc);
	border-color: var(--lima-osc);
	color: #0f0f0f;
}

/* Botón default: sutil toque lima en focus */
.btn-default:focus,
.btn-default:active:focus {
	box-shadow: 0 0 0 3px rgba(203, 239, 149, .45);
}

/* Inputs y elementos focus: anillo de enfoque lima accesible */
.form-control:focus,
select:focus,
textarea:focus,
input[type="text"]:focus {
	border-color: var(--lima-osc);
	box-shadow: 0 0 0 3px rgba(203, 239, 149, .35);
	outline: none;
}

/* Paginación: hover con fondo lima */
.pagination>li>a:hover,
.pagination>li>span:hover {
	background-color: var(--lima);
	border-color: var(--lima-osc);
	color: #1d1d1d;
}

/* Badges/labels “success” en lima para reforzar la paleta */
.label-success,
.badge-success {
	background-color: var(--lima);
	color: #1d1d1d;
}

/* Footer: enlaces con hover lima (primario sigue siendo violeta) */
footer .nav>li>a:hover {
	color: var(--lima) !important;
}

/* Bloques crema reutilizables (por si quieres aplicarlo en secciones) */
.section-cream {
	background: var(--amarillo);
	color: #1f1f1f;
	border-radius: 8px;
}

/* ===== Contenedor Iframe Inscripción ===== */
.iframe-container {
	width: 100%;
	max-width: 1000px;
	height: 900px;
	/* Altura considerable para el formulario */
	/* Altura considerable para el formulario */
	margin: 60px auto 40px auto;
	/* Centrado horizontal y margen vertical */
	clear: both;
	/* Evita que los flotantes superiores monten el contenendor */
	padding: 0;
	/* Sin padding para que el iframe ocupe todo o padding pequeño */
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	/* Sombra más pronunciada */
	border: 1px solid #e0e0e0;
	overflow: hidden;
	/* Para redondear esquinas del iframe si sobresale */
}

/* Ajustes responsive para el contenedor */
@media (max-width: 768px) {
	.iframe-container {
		height: 600px;
		margin: 20px auto;
		border-radius: 8px;
	}
}

/* ===== Contenedor QR Inscripción ===== */
.qr-container {
	width: 100%;
	max-width: 600px;
	/* Ampliado para que quepa bien el texto */
	margin: 30px auto;
	padding: 25px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	border: 1px solid #e0e0e0;
	text-align: center;
}

.qr-img {
	width: 100%;
	height: auto;
	max-width: 250px;
	/* Limita el tamaño de la imagen */
	display: block;
	margin: 0 auto;
	border-radius: 8px;
	/* Opcional: si quieres bordes redondeados en la imagen */
}