/* Fondos */
body,
.app-container,
.admin-container,
body.bg-gray-50,
.main-section {
	background: var(--purple-bg) !important;
	background-color: var(--purple-bg) !important;
}

/* Mensaje de bienvenida */
.alert {
	background-color: rgba(255, 255, 255, 0.05) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: var(--white) !important;
}

/* Estadisticas */
.chart-container {
	color: rgba(255, 255, 255, 0.90) !important;
}

/* Tablas */
#links_results,
:not(#biolinks_themes)>.card-body,
.table-custom tr,
.table-custom td,
.table-custom th {
	border-color: rgba(255, 255, 255, 0.1) !important;
	color: var(--white) !important;
	background: rgba(255, 255, 255, 0.02) !important;
}

/* Boton copiar y elipsis */
.btn-link {
	color: var(--white) !important;
}

.table,
.table-responsive,
.table-custom {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 1rem !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.admin-container .card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* El switch de activación */
.custom-control-input:checked~.custom-control-label::before {
	background: var(--btn-gradient) !important;
	border: none !important;
}

/* Badges (numeritos de clics) */
.badge-light {
	background: rgba(255, 255, 255, 0.1) !important;
	color: var(--white) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Botones de arriba (Página de Biolink, Filtros) */
.btn-light,
.btn-outline-secondary,
.btn-secondary {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: white !important;
}

/* Desplegable */
.dropdown-header {
	color: white !important;
}

.dropdown-divider {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Desplegable de Seleccion */
.custom-select,
.select2-selection,
.select2-selection.active,
.select2-dropdown,
.select2-container--default .select2-results__option--selected,
.custom-select option,
select option {
	background-color: #1a1149 !important;
	/* Un tono oscuro sólido similar al purple-bg */
	color: var(--white) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Cuando el input está enfocado */
.form-control:focus,
.select2-selection:focus,
.custom-select:focus {
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 0 0 0.2rem rgba(50, 197, 255, 0.25) !important;
	color: var(--white) !important;
}

/* --- Navbar --- */

.landing-header,
.navbar {
	background-color: var(--light-purple-bg) !important;
	color: var(--purple-deep) !important;

	.dropdown-menu {
		background-color: var(--light-purple-bg) !important;
		backdrop-filter: blur(15px);
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		border-radius: 0.75rem !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
		padding: 0.5rem 0 !important;
		margin-top: 10px !important;
		color: var(--purple-deep) !important;
	}

	/* Cada ítem de idioma */
	.dropdown-item,
	a {
		background-color: var(--light-purple-bg) !important;
		color: var(--purple-deep) !important;
		padding: 0.6rem 1.2rem !important;
		transition: all 0.2s ease !important;
		font-weight: 500 !important;
		display: flex;
		align-items: center;
	}

	/* Botón de notificaciones */
	a:hover,
	.dropdown-toggle:hover {
		background-color: rgba(21, 11, 66, 0.05) !important;
		color: var(--purple-bg) !important;
		opacity: 0.7 !important;
		box-shadow: none !important;
	}

	.dropdown-item:hover {
		background: rgba(255, 255, 255, 0.3) !important;
		color: var(--purple-deep) !important;
		padding-left: 1.5rem !important;
	}

	.dropdown-item.active,
	.dropdown-item:active,
	.dropdown-item.active svg,
	.dropdown-item:active svg {
		background: rgba(255, 255, 255, 0.45) !important;
		color: var(--purple-bg) !important;
	}

	/* Boton del Perfil */
	span {
		color: var(--purple-deep) !important;
	}

	/* Elimina linea superior del boton de Perfil */
	.dropdown-toggle-simple {
		border-top: none !important;
	}
}


/* --- Footer --- */
.footer,
.app-footer {
	background: var(--purple-bg) !important;
	color: var(--white) !important;
	opacity: 90%;
	border: none !important;

	a:hover {
		text-shadow: 0 5px 15px rgba(50, 197, 255, 0.7) !important;
	}
}


/* --- Edit Links --- */
.custom-breadcrumbs {
	color: var(--white) !important;
}

/* Botones dentro de Card Body */

/* Url base del link */
.input-group-text {
	background-color: rgba(255, 255, 255, 0.05) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: var(--white) !important;
}

/* Forzar el estilo en botones, enlaces tipo botón y botones de acordeón */
:not(#biolinks_themes) .card-body .btn-block,
:not(#biolinks_themes) .card-body .appearance-container button {
	background-color: rgba(255, 255, 255, 0.05) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: var(--white) !important;
	font-weight: 600 !important;
	padding: 12px 20px !important;
	border-radius: 8px !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	margin-bottom: 8px !important;
}

/* Efecto Hover para estos botones */
.card-body .btn:hover,
.card-body button:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-color: var(--color-primary) !important;
	transform: translateY(-1px);
}

/* El botón principal de acción */
.card-body .btn-primary,
.card-body button[type="submit"] {
	background: var(--btn-gradient) !important;
	border: none !important;
	color: var(--white) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Estado normal (No seleccionado) */
.nav-pills .nav-link {
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: rgba(255, 255, 255, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	transition: all 0.3s ease !important;
}

/* Estado seleccionado (Active) */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	background: rgba(255, 255, 255, 0.3) !important;
	color: var(--white) !important;
	box-shadow: 0 0 15px rgba(50, 197, 255, 0.1) !important;
}

.nav-pills .nav-link:hover {
	color: var(--white) !important;
	box-shadow: 0 0 15px rgba(50, 197, 255, 0.1) !important;
}

/* Elipsis de los bloques */
.dropdown button {
	border: none !important;
}

/* Fix para que el desplegable sea visible */
.biolink_block:has(.dropdown.show) {
	z-index: 100 !important;
}

/* Modal */
.modal-content,
.modal-title,
.modal-title svg,
.modal-body .close,
.modal-header .close,
.modal-content .close {
	color: var(--white) !important;
	background: var(--purple-bg) !important;
	background-color: var(--purple-bg) !important;
	opacity: 1 !important;
}

/* Efecto hover para el botón de cerrar e iconos varios*/
.modal-content .close:hover,
.ql-toolbar button:hover .ql-stroke,
.ql-toolbar .ql-picker-label:hover .ql-stroke {
	color: var(--color-primary) !important;
	opacity: 0.8 !important;
}

/* Forzar color blanco en los trazos de los iconos */
.ql-toolbar .ql-stroke {
	stroke: var(--white) !important;
}

/* Quitar el borde blanco */
.ql-toolbar,
.ql-container,
.form-control-file {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background-color: transparent !important;
}

/* Botón interno del input file */
.altum-file-input::-webkit-file-upload-button,
.altum-file-input::file-selector-button,
.ql-picker-label {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: var(--white) !important;
}

/* Efecto Hover para el botón de archivo */
.altum-file-input::-webkit-file-upload-button:hover,
.altum-file-input::file-selector-button:hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
}

/* --- Estadisticas --- */
.h4.text-truncate,
.h5.text-truncate {
	color: var(--white) !important;
}

/* Botones */
.btn.btn-block.btn-custom.text-truncate {
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: rgba(255, 255, 255, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	transition: all 0.3s ease !important;
}

/* Boton seleccionado (Active) */
.btn.btn-block.btn-custom.text-truncate.active {
	background: rgba(255, 255, 255, 0.3) !important;
	color: var(--white) !important;
	box-shadow: 0 0 15px rgba(50, 197, 255, 0.1) !important;
}


/* Fix Para los Themes Preview */
#biolinks_themes .link-biolink-theme {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* Evitamos el reset universal (*) que rompía los botones */
#biolinks_themes .card-body {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Esto asegura que los botones del preview no usen el padding gigante del dashboard */
#biolinks_themes .link-btn {
	padding: 0.4rem !important;
	margin-bottom: 6px !important;
	min-height: 30px !important;
}