/* *********************************************************************************************************
 *                                  !ESTILOS GLOBALES - BRAND CENTER
 * *********************************************************************************************************
 * Tema de la Intranet v4 (assets/css/tema_rays.css de Intranet_v4, solo lo que usa Brand Center y solo el modo
 * claro): azul corporativo #0022B4, grises pizarra, Poppins y esquinas suaves. Aquí van las variables, la base,
 * el layout, el encabezado con el menú de usuario, SweetAlert2 y los componentes compartidos.
 * Lo propio del login va en assets/css/login.css y lo de cada vista en ajax/css/<vista>.css.
 */

:root {
	/* Tema Rays (copiado de la Intranet v4, modo claro) */
	--rays-primario: #0022B4;
	--rays-primario-rgb: 0, 34, 180;
	--rays-primario-hover: #0B30C8;
	--rays-primario-activo: #00177A;
	--rays-primario-suave: #EFF4FE;
	--rays-primario-borde: #C2D1FA;
	--rays-texto-primario: #0022B4;

	--rays-fondo-pagina: #F1F5F9;
	--rays-superficie: #FFFFFF;
	--rays-superficie-suave: #F8FAFC;
	--rays-borde: #E2E8F0;
	--rays-borde-fuerte: #CBD5E1;
	--rays-texto: #334155;
	--rays-texto-fuerte: #0F172A;
	--rays-texto-suave: #64748B;
	--rays-foco-borde: #93C5FD;

	--rays-peligro: #DC3545;
	--rays-peligro-hover: #BB2D3B;
	--rays-chip-peligro-fondo: #FEF2F2;
	--rays-chip-peligro-texto: #991B1B;
	--rays-chip-peligro-borde: #FECACA;
	--rays-chip-neutro-fondo: #F1F5F9;

	--rays-sombra-sutil: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
	--rays-sombra-tarjeta: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
	--rays-sombra-hover: 0 10px 15px -3px rgba(0, 34, 180, 0.08), 0 4px 6px -4px rgba(0, 34, 180, 0.04);
	--rays-sombra-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);

	--fuente-base: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Variables de Brand Center (las usan las vistas), tomadas del tema */
	--fondo-pagina: var(--rays-fondo-pagina);
	--fondo-tarjeta: var(--rays-superficie);
	--blanco: #ffffff;
	--texto-principal: var(--rays-texto-fuerte);
	--texto-secundario: var(--rays-texto-suave);
	--color-principal: var(--rays-primario);
	--azul-sombra: var(--rays-primario);
	--borde: var(--rays-borde);
	--gris-tenue: var(--rays-borde);
	--blanco-tenue: rgba(255, 255, 255, 0.2);
	--fondo-modal: rgba(15, 23, 42, 0.4);

	/* Colores de marca tomados de los logos oficiales (propios de Brand Center) */
	--color-grupo-rays: #0422b5; /* azul */
	--color-empresas: #058ae7; /* celeste */
	--color-agencias: #ff6b06; /* naranjo */
	--color-mice: #ffc200; /* amarillo */
	--color-travel: #f8645e; /* coral */
	--color-manual: #f43f5e; /* rosa */

	/* Colores de los tipos de archivo */
	--tipo-ppt: #ea580c;
	--tipo-word: #2563eb;
	--tipo-img: #0891b2;
	--tipo-pdf: #dc2626;
	--tipo-otro: #7c3aed;

	/* Barra de desplazamiento */
	--barra-desplazamiento: #cbd5e1;
	--barra-desplazamiento-activa: #94a3b8;

	--transicion-rapida: 0.2s ease;
	--transicion-media: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
	font-family: var(--fuente-base);
	background-color: var(--rays-fondo-pagina);
	color: var(--rays-texto);
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
	line-height: 1.6;
}

/* Con un modal abierto, la página no se desplaza */
body.modal-abierto {
	overflow: hidden;
}

/* Íconos Lucide: toman el tamaño de letra y el color de su contenedor */
svg.lucide {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.oculto {
	display: none !important;
}

/* Foco visible del tema en todos los controles */
a:focus-visible,
button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--rays-primario-rgb), 0.3);
}

@keyframes aparecer-bajando {
	from { opacity: 0; transform: translateY(-30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes aparecer-subiendo {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes girar {
	to { transform: rotate(360deg); }
}

/* Layout */
.contenedor {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 2rem 4rem;
	min-width: 0;
}

/* Encabezado (como app-header de la Intranet): marca a la izquierda y menú de usuario a la derecha */
.app-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 60px;
	padding: 0.5rem 1.5rem;
	background-color: var(--rays-superficie);
	border-bottom: 1px solid var(--rays-borde);
	box-shadow: var(--rays-sombra-sutil);
}

.app-header .marca-encabezado {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.app-header .logo-encabezado {
	height: 33px;
	width: auto;
	object-fit: contain;
}

.app-header .titulo-encabezado {
	padding-left: 0.75rem;
	border-left: 1px solid var(--rays-borde);
	font-size: 1rem;
	font-weight: 600;
	color: var(--rays-texto-fuerte);
	white-space: nowrap;
}

/* Menú de usuario: avatar con iniciales, nombre y correo */
.app-header .user-menu {
	position: relative;
}

.app-header .perfil-encabezado {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.2rem 0.5rem 0.2rem 0.2rem;
	font-family: inherit;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.app-header .perfil-encabezado:hover,
.app-header .perfil-encabezado[aria-expanded="true"] {
	background-color: var(--rays-superficie-suave);
}

.avatar-usuario {
	display: inline-flex;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 2px solid var(--rays-primario-borde);
	border-radius: 50%;
}

.avatar-usuario .avatar-iniciales {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rays-texto-primario);
	background-color: var(--rays-primario-suave);
}

.app-header .datos-perfil {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.app-header .nombre-perfil {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--rays-texto-fuerte);
}

.app-header .correo-perfil {
	font-size: 0.7rem;
	color: var(--rays-texto-suave);
	overflow-wrap: anywhere;
}

.app-header .flecha-perfil {
	font-size: 0.85rem;
	color: var(--rays-texto-suave);
	transition: transform var(--transicion-rapida);
}

.app-header .perfil-encabezado[aria-expanded="true"] .flecha-perfil {
	transform: rotate(180deg);
}

.app-header .menu-perfil {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 230px;
	max-width: calc(100vw - 2rem);
	padding: 0.5rem 0;
	background-color: var(--rays-superficie);
	border: 1px solid var(--rays-borde);
	border-radius: 0.75rem;
	box-shadow: var(--rays-sombra-modal);
}

.app-header .menu-perfil[hidden] {
	display: none;
}

/* En el menú se repiten nombre y correo: en celulares el botón solo muestra el avatar */
.app-header .cabecera-menu {
	display: flex;
	flex-direction: column;
	padding: 0.4rem 1rem 0.6rem;
	line-height: 1.3;
}

.app-header .divisor-menu {
	margin: 0.25rem 0;
	border: none;
	border-top: 1px solid var(--rays-borde);
}

.app-header .opcion-menu {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.5rem 1rem;
	font-family: inherit;
	font-size: 0.875rem;
	text-align: left;
	color: var(--rays-texto);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.app-header .opcion-menu:hover {
	color: var(--rays-texto-primario);
	background-color: var(--rays-primario-suave);
}

.app-header .opcion-menu.opcion-peligro {
	color: var(--rays-peligro);
}

.app-header .opcion-menu.opcion-peligro:hover {
	color: var(--rays-chip-peligro-texto);
	background-color: var(--rays-chip-peligro-fondo);
}

/* SweetAlert2 con la letra, las esquinas y los colores de la Intranet. Confirmar es el azul corporativo;
   para una acción destructiva se usa customClass: { confirmButton: "swal2-peligro" }. */
.swal2-popup {
	font-family: var(--fuente-base);
	border-radius: 14px;
}

.swal2-popup .swal2-styled {
	font-weight: 500;
	border-radius: 8px;
}

.swal2-popup .swal2-styled.swal2-confirm {
	background-color: var(--rays-primario);
}

.swal2-popup .swal2-styled.swal2-confirm.swal2-peligro {
	background-color: var(--rays-peligro);
}

.swal2-popup .swal2-styled.swal2-cancel {
	color: var(--rays-texto-fuerte);
	background-color: var(--rays-chip-neutro-fondo);
	border: 1px solid var(--rays-borde);
}

.swal2-popup .swal2-styled:focus-visible {
	box-shadow: 0 0 0 3px rgba(var(--rays-primario-rgb), 0.3);
}

/* Indicador de carga y estado vacío (cargador de vistas y contenedores) */
.indicador-carga {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 1rem;
	color: var(--rays-texto-suave);
	grid-column: 1 / -1;
}

.giro-carga {
	width: 36px;
	height: 36px;
	border: 3px solid var(--rays-borde);
	border-top-color: var(--rays-primario);
	border-radius: 50%;
	animation: girar 0.8s linear infinite;
}

.estado-vacio {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--rays-texto-suave);
	grid-column: 1 / -1;
}

/* Barra de desplazamiento */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--rays-fondo-pagina);
}

::-webkit-scrollbar-thumb {
	background: var(--barra-desplazamiento);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--barra-desplazamiento-activa);
}

/* Tablet: el título "Brand Center" del encabezado se mantiene; el correo se oculta del botón */
@media (max-width: 991px) {
	.app-header .perfil-encabezado .correo-perfil { display: none; }
}

/* Celular: el botón del menú solo muestra el avatar (nombre y correo van dentro del menú) */
@media (max-width: 768px) {
	.contenedor { padding: 2rem 1rem 3rem; }
	.app-header { padding: 0.5rem 1rem; }
	.app-header .perfil-encabezado .datos-perfil,
	.app-header .perfil-encabezado .flecha-perfil { display: none; }
	.app-header .perfil-encabezado { padding: 0.2rem; }
}

@media (max-width: 400px) {
	.app-header .logo-encabezado { height: 26px; }
	.app-header .titulo-encabezado { font-size: 0.9rem; padding-left: 0.6rem; }
}