* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
	width: 100%; height: 100%;
	overflow: hidden;
	font-family: 'Montserrat', sans-serif;
	background-color: var(--color-fondo-body); 
}

/* --- STRUCTURE & WIDGETS --- */
.dashboard-main {
	position: absolute;
	top: 160px; 
	left: 6%;
	width: 88vw;
	height: calc(100vh - 260px); 
	z-index: 50;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr; 
	gap: 50px;
	align-items: center; 
	pointer-events: none;
}

.dash-widget-side {
	grid-column: 2; 
	width: 100%;
	height: 100%;
	background: var(--fondo-chat-fijo); 
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 25px;
	overflow-y: auto;
	box-shadow: 0 20px 50px rgba(0,0,0,0.3);
	z-index: 2; 
	display: var(--mostrar-chat);
	pointer-events: auto;
}

/* --- SLIDESHOW --- */
.slider-wrapper { position: relative; width: 100vw; height: 100vh; z-index: 1; }

.slide {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	opacity: 0; visibility: hidden; transition: opacity 1.5s ease-in-out;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr; 
	gap: 50px;
	left: 6vw; 
	width: 88vw;
	height: calc(100vh - 260px);
	top: 160px;
	overflow: visible;
}
.slide.active { opacity: 1; visibility: visible; }

.slide-bg {
	position: fixed; 
	top: 0; left: 0; width: 100vw; height: 100vh;
	background-size: cover; background-position: center; z-index: -1;
}
.slide-bg::after {
	content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(rgba(0,0,0,0.4), transparent 40%, rgba(0,0,0,0.7));
}

.slide-text-side {
	color: white; display: flex; flex-direction: column; justify-content: center;
	opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	transition-delay: 0.5s; margin-bottom: 80px;
}
.slide.active .slide-text-side { opacity: 1; transform: translateY(0); }

/* Le agregué la sombra elegante al título principal blanco */
.slide-text-side h1 { 
	font-size: 3.2rem; font-weight: 700; line-height: 1.1; margin-bottom: 25px; 
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); 
}

/* Le agregué la sombra al span azul (#3b82f6) para que ese color brillante resalte más sobre el fondo */
.slide-text-side h1 span { 
	color: #3b82f6; 
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); 
}

/* Una sombra un toque más sutil para el párrafo para que no pierda legibilidad */
.slide-text-side p { 
	font-size: 1.1rem; font-weight: 300; line-height: 1.6; opacity: 0.8; margin-bottom: 35px; max-width: 550px; 
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); 
}

.dash-btn {
	align-self: flex-start; padding: 15px 35px; background: #3b82f6; color: white; border: none;
	border-radius: 6px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.95rem;
	cursor: pointer; transition: background 0.3s, transform 0.2s;
}
.dash-btn:hover { background: #2563eb; transform: translateY(-2px); }

/* --- SIDEBARS PRINCIPALES --- */
.sidebar {
	position: fixed;
	top: 0; width: 350px; height: 100%;
	background: var(--fondo-paneles-laterales); 
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	z-index: 300; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex; flex-direction: column; padding: 40px;
}
.sidebar-left { left: -350px; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-left.open { left: 0; }
.sidebar-right { right: -350px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-right.open { right: 0; }

/* PANEL COMPLEMENTARIO RECONTRACORREGIDO */
.sidebar-complement {
	position: fixed;
	top: 0;
	/* Ocupa todo el ancho restante de la pantalla de forma dinámica */
	width: calc(100vw - 350px); 
	height: 100%;
	background: rgba(15, 15, 15, 0.98);
	backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
	z-index: 290; 
	display: flex;
	flex-direction: column;
	padding: 60px;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0;
	visibility: hidden;
}

/* ESCENARIO 1: Menú IZQUIERDO abierto (350px) */
/* El complemento sale desde la DERECHA y se clava en el borde derecho (right: 0) */
/* Al medir calc(100vw - 350px), su borde izquierdo llegará EXACTAMENTE hasta los 350px del menú */
.sidebar-complement.from-right {
	right: -100vw;
	left: auto;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-complement.from-right.open {
	right: 0; /* <--- Se clava en la derecha y se estira hacia la izquierda hasta los 350px */
	left: auto;
	opacity: 1;
	visibility: visible;
}

/* ESCENARIO 2: Intranet DERECHA abierta (350px) */
/* El complemento sale desde la IZQUIERDA y se clava en el borde izquierdo (left: 0) */
/* Al medir calc(100vw - 350px), su borde derecho llegará EXACTAMENTE hasta donde empieza la intranet */
.sidebar-complement.from-left {
	left: -100vw;
	right: auto;
	border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-complement.from-left.open {
	left: 0; /* <--- Se clava en la izquierda y se estira hacia la derecha hasta los 350px antes del final */
	right: auto;
	opacity: 1;
	visibility: visible;
}

/* Contenedor interno dinámico */
.dynamic-container { 
	width: 100%; 
	color: var(--color-texto-submenu); 
	overflow-y: auto; 
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	transform: translateY(0);
} 

.sidebar-full, .sidebar-full-down {
	position: fixed; left: 0; width: 100vw; height: 100vh;
	background: var(--fondo-paneles-completos); 
	backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
	z-index: 350; transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px;
}
.sidebar-full { top: 100%; }
.sidebar-full.open { top: 0; }
.sidebar-full-down { top: -100%; }
.sidebar-full-down.open { top: 0; }

.close-btn { color: var(--color-texto-submenu); font-size: 1.5rem; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; } 
.close-btn:hover { opacity: 1; }
.sidebar-left .close-btn { align-self: flex-end; margin-bottom: 50px; }
.sidebar-right .close-btn { align-self: flex-start; margin-bottom: 50px; }
.sidebar-complement .close-btn { position: absolute; top: 40px; right: 40px; }
.sidebar-full .close-btn, .sidebar-full-down .close-btn { position: absolute; top: 40px; right: 40px; }

.sidebar-full .dynamic-container, .sidebar-full-down .dynamic-container { max-width: 800px; text-align: center; }

/* --- HEADER --- */
header {
	position: fixed; top: 0; left: 0; width: 100%;
	display: flex; justify-content: space-between; align-items: center;
	padding: 40px 60px; z-index: 100;
}
.logo-box { display: flex; flex-direction: column; align-items: center; }
.logo-icon { width: 65px; height: 65px; margin-bottom: 10px; }
.logo-text { font-family: 'Cinzel', serif; color: var(--color-texto-menu); font-size: 1.1rem; letter-spacing: 6px; text-transform: uppercase; } 

.nav-menu { display: flex; list-style: none; gap: 40px; }
.nav-menu li a {
	color: var(--color-texto-menu); text-decoration: none; 
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	opacity: 0.7; cursor: pointer; text-align: center;
}
.nav-menu li a i { font-size: 1.5rem; transition: transform 0.3s; }
.nav-menu li a span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px; }
.nav-menu li a:hover { opacity: 1; }
.menu-toggle { display: none; color: var(--color-texto-menu); font-size: 1.8rem; cursor: pointer; z-index: 150; opacity: 0.8; } 

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
	header { padding: 30px 40px; }
	.logo-text { font-size: 0.9rem; letter-spacing: 4px; }
	.nav-menu { display: none; }
	.menu-toggle { display: block; }

	.sidebar { width: 100vw; }
	.sidebar-left { left: -100vw; }
	.sidebar-left.open { left: 0; }
	.sidebar-right { right: -100vw; }
	.sidebar-right.open { right: 0; }
	
	.sidebar-complement { width: 100vw; left: 100vw; z-index: 310; }
	.sidebar-complement.open { left: 0 !important; right: 0 !important; opacity: 1; visibility: visible; }

	.slide, .dashboard-main {
		display: flex; flex-direction: column; justify-content: flex-start; gap: 20px;
		overflow-y: auto; top: 130px; height: calc(100vh - 200px);
	}
	.dashboard-main { grid-template-columns: 1fr; }
	.slide { align-items: center; padding-bottom: 50px;}
	.slide-text-side { width: 100%; order: 1; margin-top: 20px;}
	.dash-widget-side { width: 100%; height: 450px; order: 2; margin-bottom: 30px; grid-column: 1;}
	.slide-text-side h1 { font-size: 1.8rem; margin-bottom: 10px; text-align: center; }
	.slide-text-side p { font-size: 0.9rem; text-align: center; margin-bottom: 20px; }
	.dash-btn { align-self: center; padding: 10px 25px; }
}