/* ==========================================================================
   TEMA CORPORATIVO SETOURS NEXUS (Sobrescribe AdminLTE / Bootstrap 4)
   ========================================================================== */

:root {
	--p-black: rgb(85, 81, 80);
	--p-7529: rgb(192, 180, 170); /* gris cálido */
	--p-ds31: rgb(202, 188, 159); /* beige cálido */
	--p-0961: rgb(156, 143, 122); /* marrón cálido (acciones/botones) */
	--p-ds43: rgb(222, 218, 207); /* crema clara (principal/superficies) */
	--p-151: rgb(218, 149, 0); /* ámbar (warning) */
}

/* ─── 1. BARRA SUPERIOR (Navbar) ─── */
.main-header.navbar {
	background-color: var(--p-ds43) !important; /* Color Crema Setours */
	border-bottom: 1px solid var(--p-7529) !important;
}
	/* Color de las letras/iconos de la barra superior */
	.main-header.navbar .nav-link, .main-header.navbar .navbar-nav .nav-link {
		color: var(--p-black) !important;
	}

/* ─── 2. MENÚ LATERAL (Sidebar) ─── */
/* Fondo del menú lateral en color corporativo (Beige Cálido) */
.main-sidebar,
[class*="sidebar-dark-"],
[class*="sidebar-light-"] {
	background-color: var(--p-ds43) !important;
}

	/* ─── Forzar letras, iconos y logo a NEGRO ─── */
	.main-sidebar .nav-link,
	.main-sidebar .nav-link p,
	.main-sidebar .nav-icon,
	.main-sidebar .brand-text,
	.main-sidebar .user-panel .info a,
	.main-sidebar .nav-header {
		color: var(--p-black) !important;
	}

	/* Forzar el color negro también en los submenús (opciones desplegables) */
	.main-sidebar .nav-treeview > .nav-item > .nav-link,
	.main-sidebar .nav-treeview > .nav-item > .nav-link p,
	.main-sidebar .nav-treeview > .nav-item > .nav-link i {
		color: var(--p-black) !important;
	}

	/* Opción activa en el menú lateral (Fondo marrón, letras blancas para resaltar) */
	[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active,
	[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active,
	[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active p,
	[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active i {
		background-color: var(--p-0961) !important; /* Marrón cálido */
		color: #ffffff !important;
	}

	/* Efecto al pasar el mouse (hover) por las opciones que no están activas */
	.main-sidebar .nav-sidebar .nav-link:hover,
	.main-sidebar .nav-sidebar .nav-link:hover p,
	.main-sidebar .nav-sidebar .nav-link:hover i {
		background-color: var(--p-ds43) !important; /* Crema clara */
		color: var(--p-black) !important;
	}

	/* Línea divisoria debajo del logo */
	.main-sidebar .brand-link {
		border-bottom: 1px solid var(--p-7529) !important;
	}
/* ─── 3. BOTONES PRINCIPALES ─── */
.btn-primary {
	background-color: var(--p-0961) !important; /* Marrón cálido */
	border-color: var(--p-0961) !important;
	color: #fff !important;
}

	.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
		background-color: var(--p-black) !important;
		border-color: var(--p-black) !important;
		box-shadow: none !important;
	}

/* ─── 4. TABLAS (DataTables) Y TARJETAS ─── */
.card-header {
	background-color: var(--p-ds31) !important; /* Beige cálido */
	color: var(--p-black) !important;
	border-bottom: 1px solid var(--p-7529) !important;
}

table.dataTable thead th, table.table thead th {
	background-color: var(--p-ds43) !important; /* Crema clara */
	color: var(--p-black) !important;
	border-bottom: 2px solid var(--p-0961) !important;
}

/* ─── 5. PAGINACIÓN DE DATATABLES (Números de tabla) ─── */
/* Botón de página activo (Número actual) */
.page-item.active .page-link {
	background-color: var(--p-0961) !important; /* Marrón cálido */
	border-color: var(--p-0961) !important;
	color: #ffffff !important;
}

/* Botones de página normales al pasar el mouse (hover) */
.page-link:hover {
	background-color: var(--p-ds43) !important; /* Crema clara */
	color: var(--p-black) !important;
	border-color: var(--p-7529) !important;
}

/* Color del texto de los botones que no están activos ("Previous", "Next", otros números) */
.page-link {
	color: var(--p-black) !important;
}

/* Borde de foco cuando haces clic en un número */
.page-item .page-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(156, 143, 122, 0.25) !important;
}

/* ─── 6. PANTALLA DE LOGIN ─── */
.login-page, .register-page {
	background-color: var(--p-ds43) !important; /* Crema clara Setours */
}

/* El botón de "Ingresar" o "Iniciar Sesión" */
.login-box .btn-primary {
	background-color: var(--p-0961) !important; /* Marrón cálido */
	border-color: var(--p-0961) !important;
	color: #ffffff !important;
}

	.login-box .btn-primary:hover {
		background-color: var(--p-black) !important;
		border-color: var(--p-black) !important;
	}

/* El borde de las cajas de texto (Usuario y Contraseña) cuando se seleccionan */
.login-box .form-control:focus {
	border-color: var(--p-0961) !important;
	box-shadow: none !important;
}