:root {
	/* backgrounds */
	--primary: rgb(30,33,40);
	--secondary: rgb(25,28,33);
	--third: #ddd;
	--border: rgb(19,20,23);

	/* text */
	--font-color: rgb(155,162,177);

	/* Links / anchors */
	--anchor:#b39062;
	--anchor-hover:#e79424;

	/* buttons or alert boxes with different colors */
	--bg-danger: #3c0e0e;
	--color-danger: #9e5858;
	--border-danger: #350505;

	--bg-warning: #905c00;
	--color-warning: #39280a;
	--border-warning: #322001;

	--bg-info: #005d90;
	--color-info: #00263e;
	--border-info: #022530;

	--bg-success: #009039;
	--color-success: #003f0c;
	--border-success: #00380c;

	--bg-default: #0006;
	--color-default: #968452;
	--border-default: #000;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #121212; /* Fondo oscuro */
    color: #f0f0f0;
}

#wrapper {
    width: 1024px;
    margin: 0 auto;
    background-color: #1e1e1e; /* Fondo del área central */
    min-height: 100vh;
}

.main {
	max-width: 1220px;
	margin: 5rem auto;
	position: relative;
	z-index: 1;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Nav bar top */
nav {
	border: 10px solid var(--primary);
	background: var(--primary);
}

nav .container {
	padding-left: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

nav .container > div {
	display: flex;
	align-items: center;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

nav ul li {
	margin: 0 15px;
}

nav ul li a {
	color: var(--anchor);
	text-decoration: none;
	padding: 20px 10px;
	display: block;
	white-space: nowrap;
	transition: color 0.2s ease;
}

nav ul li a:hover {
	color: var(--anchor-hover);
}

/* Banner: sin caja ni borde */
.banner {
	background: url("../img/header.png") no-repeat center center;
	background-size: cover;
	height: 240px;
	margin-top: 30px;
}

/* Layout 3 columnas */
.layout-3column {
	display: flex;
	gap: 1rem;
	margin-top: 20px;
}

/* Barra izquierda: fondo y líneas divisorias entre secciones */
.left-menu {
	width: 20%;
	background: var(--secondary);
	padding: 15px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	border-right: 1px solid var(--border);
	box-sizing: border-box;
}

.left-menu h3 {
	color: var(--font-color);
	font-size: 16px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--border);
}

.left-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.left-menu li {
	margin: 8px 0;
	border-bottom: 1px solid var(--border);
	padding-bottom: 6px;
}

.left-menu li:last-child {
	border-bottom: none;
}

.left-menu a {
	color: var(--anchor);
	text-decoration: none;
	display: block;
	padding: 8px;
	border-radius: 0;
	transition: background 0.2s, color 0.2s;
}

.left-menu a:hover {
	background-color: #3a3a3a;
	color: var(--anchor-hover);
}

/* Contenido central */
.centerContent {
	width: 60%;
	background: var(--secondary);
	padding: 15px;
	box-sizing: border-box;
	border-radius: 0; /* sin bordes redondeados */
	color: var(--font-color);
}

/* Barra derecha: fondo general */
.rightPane {
	width: 20%;
	padding: 0; /* quitar padding para que lo maneje inner box */
	box-sizing: border-box;
	color: var(--font-color);
}

/* Contenedor general barra derecha */
.rightPane-box {
	background: var(--secondary);
	padding: 15px;
	border: 1px solid var(--border);
	border-radius: 0;
	box-sizing: border-box;
}

/* Cada widget separado */
.rightPane-widget {
	background: var(--primary);
	border: 1px solid var(--border);
	padding: 12px 15px;
	margin-bottom: 15px;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--font-color);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
	transition: background 0.3s ease;
}

.rightPane-widget:hover {
	background: #2a2a2a;
}

/* Links dentro de widgets de derecha */
.rightPane a {
	color: var(--anchor);
	text-decoration: none;
}

.rightPane a:hover {
	color: var(--anchor-hover);
}

/* General */
a {
	color: var(--anchor);
	text-decoration: none;
}

a:hover {
	color: var(--anchor-hover);
}

button:hover {
	background: #0000004d;
}

/* Inputs y botones */
input, select, textarea {
	width: 100%;
	height: 40px;
	border: 1px solid var(--border);
	color: var(--font-color);
	font-size: 1em;
	background: var(--secondary);
	box-sizing: border-box;
}

input[type=radio], input[type=checkbox] {
	width: initial !important;
	height: initial !important;
}

button, input[type=submit] {
	margin-top: 10px;
	padding: 8px 15px;
	background: var(--primary);
	color: var(--anchor);
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.3s;
}

button:hover, input[type=submit]:hover {
	background: var(--anchor-hover);
	color: var(--primary);
}

/* Otras clases usadas */
.alert-box {
	max-width: 500px;
	font-size: 14px;
	border-radius: 0;
	border: 1px solid var(--third);
	margin: 0 auto 15px auto;
	text-align: center;
	background: var(--secondary);
	color: var(--font-color);
}

.alert-default {
	background: var(--bg-default);
	color: var(--color-default);
	border-color: var(--border-default);
}

.alert-info {
	background: var(--bg-info);
	color: var(--color-info);
	border-color: var(--border-info);
}

.alert-success {
	background: var(--bg-success);
	color: var(--color-success);
	border-color: var(--border-success);
}

.alert-warning {
	background: var(--bg-warning);
	color: var(--color-warning);
	border-color: var(--border-warning);
}

.alert-danger {
	background: var(--bg-danger);
	color: var(--color-danger);
	border-color: var(--border-danger);
}

/* Tablas, encabezados, feed */
.header {
	color: #d1a233;
	padding: 10px;
}

.feedContainer {
	margin: 2rem 0;
}

/* Scroll overflow */
nav .container, .preventCollapse, .ellipsis {
	overflow: hidden;
}

/* NUEVAS REGLAS AGREGADAS */

/* Download button box */
.download-box {
	margin-bottom: 15px;
}

.download-box button {
	width: 100%;
	padding: 12px 0;
	font-size: 1.2rem;
	background: var(--primary);
	color: var(--anchor);
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.3s ease;
}

.download-box button:hover {
	background: var(--anchor-hover);
	color: var(--primary);
}

/* Slider box para imágenes */
.slide-box {
	width: 100%;
	height: 200px;
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
}

.slide-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}

.slide-box img.active-slide {
	opacity: 1;
}