html,
body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

body ::-webkit-scrollbar {
	display: none;
}

.html ::-webkit-scrollbar {
	display: none;
}

label {
	font-size: 0.9rem !important;
}

.btn path {
	fill: currentColor;
	transition: fill 0.2s ease-in-out;
}

.form-section-title {
	color: var(--bs-primary);
	font-size: 1.1rem !important;
	font-weight: 600 !important;
}

.tooltip .tooltip-inner {
	background-color: var(--color-primary-dark) !important;
	color: var(--color-surface-elevated) !important;
}

.text-sm {
	font-size: small;
}

.subsection-accordion .accordion-item,
.subsection-accordion .accordion-button,
.subsection-accordion .list-group-item {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.subsection-accordion .accordion-button:not(.collapsed) {
	background-color: transparent !important;
	color: inherit;
	box-shadow: none;
}

.min-w-10r {
	min-width: 10rem;
}

.min-w-20r {
	min-width: 20rem;
}

.min-w-30r {
	min-width: 30rem;
}

/* Ajustes solo para modales que contienen Quill */
.modal.modal-has-quill .ql-snow .ql-tooltip {
	left: 0 !important;
}

.fs-5_5 {
	font-size: 0.93rem;
}

.cursor-pointer {
	cursor: pointer;
}

.card-title {
	font-size: 1.2rem;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
/* Refuerzo de modales apilados: asegura que el backdrop intermedio oscurezca el modal inferior */
.modal-backdrop.modal-stack {
	opacity: 0.5; /* mantener el tono estándar de Bootstrap */
}

.reply-invert::before {
	transform: scaleX(-1);
}

.editable-link:hover::after {
	content: "Click para editar";
	position: fixed;
	left: var(--mouse-x, 0px);
	top: var(--mouse-y, 0px);
	transform: translate(12px, 8px);
	margin-left: 0;
	background: #f8f9fa;
	color: #212529;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.9rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	z-index: 9999;
	pointer-events: none;
}

/* Oculta el botón eliminar por defecto y lo muestra al hacer hover sobre el item */
.personal-link-item .delete-btn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.15s ease-in-out,
		visibility 0.15s ease-in-out;
}

.personal-link-item:hover .delete-btn,
.personal-link-item:focus-within .delete-btn {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (min-width: 992px) {
	.padding-md-17rem {
		padding-left: 17rem !important;
		padding-right: 17rem !important;
	}
}

/* Bootstrap component overrides (tokens live in theme.css) */
a.btn-outline-primary,
a.dropdown-item,
a.text-primary,
.text-primary,
.nav-link,
.sidebar-nav .nav-link,
.sidebar-nav .nav-link i,
.sidebar-nav .nav-content a,
.sidebar-nav .nav-content a i {
	color: var(--bs-primary) !important;
}

/* Botones y fondos */
.btn-primary,
.btn.btn-primary,
.bg-primary {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
	background-color: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
}

/* Texto y enlaces de warning (paralelo a primary) */
a.text-warning,
.text-warning {
	color: var(--bs-warning) !important;
}

/* Botones y fondos de warning */
.btn-warning,
.bg-warning {
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning) !important;
	color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus {
	background-color: var(--color-warning-dark) !important;
	border-color: var(--color-warning-dark) !important;
}

/* Texto y enlaces de info */
a.text-info,
.text-info {
	color: var(--bs-info) !important;
}

/* Botones y fondos de info */
.btn-info,
.bg-info {
	background-color: var(--bs-info) !important;
	border-color: var(--bs-info) !important;
	color: var(--color-surface-elevated) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
	background-color: var(--color-info-dark) !important;
	border-color: var(--color-info-dark) !important;
	color: var(--color-surface-elevated) !important;
}

.border-info {
	border-color: var(--bs-info) !important;
}

.alert-info {
	background-color: var(--bs-info-bg-subtle) !important;
	border-color: var(--bs-info-border-subtle) !important;
	color: var(--bs-info-text-emphasis) !important;
}

.form-control.border-info:focus,
input.border-info:focus,
textarea.border-info:focus {
	border-color: var(--bs-info) !important;
	box-shadow: var(--focus-ring-info) !important;
}

.btn-outline-info {
	color: var(--bs-info) !important;
	background-color: transparent !important;
	border-color: var(--bs-info) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info.active,
.btn-outline-info.show,
.btn-outline-info:active,
.btn-check:checked + .btn-outline-info {
	color: var(--color-surface-elevated) !important;
	background-color: var(--bs-info) !important;
	border-color: var(--bs-info) !important;
	box-shadow: none !important;
}

.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active {
	color: var(--color-surface-elevated) !important;
	background-color: var(--bs-info) !important;
	border-color: var(--bs-info) !important;
}

/* Banderas activas, tabs y navs */
.nav-tabs .nav-link.active,
.nav-tabs-bordered .nav-link.active,
.nav-tabs-bordered .nav-link:hover,
.sidebar-nav .nav-content a.active,
.sidebar-nav .nav-content a:hover {
	color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

/* Bordes y fondos primarios */
.border-primary {
	border-color: var(--bs-primary) !important;
}

.bg-primary {
	background-color: var(--bs-primary) !important;
}

/* Inputs focus */
input:focus,
textarea:focus,
.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
	border-color: var(--bs-primary) !important;
	box-shadow: var(--focus-ring-primary) !important;
}

/* Reemplazar cualquier color inline estilo con los hex antiguos si es posible */
*[style*="#4154f1"],
*[style*="#5969f3"] {
	color: var(--bs-primary) !important;
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

/* Asegurar texto blanco en botones outline-primary al hover/focus/active */
.btn-outline-primary,
.btn.btn-outline-primary {
	color: var(--bs-primary) !important;
	background-color: transparent !important;
	border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:active,
.btn.btn-outline-primary:active,
/* Botón btn-check seleccionado */
.btn-check:checked + .btn-outline-primary,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
	color: #fff !important;
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	box-shadow: none !important;
}

/* Mantener texto blanco cuando el botón está en estado pressed/active */
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
	color: #fff !important;
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.nav-link.active {
	background-color: var(--bs-primary) !important;
	color: #fff !important;
}

/* Bordes y fondos warning */
.border-warning {
	border-color: var(--bs-warning) !important;
}

.bg-warning {
	background-color: var(--bs-warning) !important;
}

/* Alertas de warning: usar color y contraste apropiado */
.alert-warning {
	background-color: var(--bs-warning) !important;
	border-color: rgba(var(--bs-warning-rgb), 0.16) !important;
	color: #212529 !important; /* texto oscuro para legibilidad */
}

/* Inputs con border-warning deben mostrar sombra de foco basada en la variable */
.form-control.border-warning:focus,
input.border-warning:focus,
textarea.border-warning:focus {
	border-color: var(--bs-warning) !important;
	box-shadow: var(--focus-ring-warning) !important;
}

/* Reglas para btn-outline-warning (paralelas a btn-outline-primary) */
.btn-outline-warning {
	color: var(--bs-warning) !important;
	background-color: transparent !important;
	border-color: var(--bs-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning.active,
.btn-outline-warning.show,
.btn-outline-warning:active,
.btn-check:checked + .btn-outline-warning {
	color: #fff !important;
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning) !important;
	box-shadow: none !important;
}

/* Mantener texto blanco cuando el botón outline-warning está en estado pressed/active */
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active {
	color: #fff !important;
	background-color: var(--bs-warning) !important;
	border-color: var(--bs-warning) !important;
}

.text-justify {
	text-align: justify !important;
}

@media (max-width: 992px) {
	.shadow-navbar {
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}

	.shadow-navbar:has(.navbar-collapse.show) {
		box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.5) !important;
	}
}

@media (min-width: 992px) {
	.shadow-navbar {
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}
}

@media (min-width: 992px) {
	.w-lg-auto {
		width: auto !important;
	}
}

@media (max-width: 992px) {
	.sub2menu {
		position: static !important;
	}
}

@media (min-width: 992px) {
	.sub2menu {
		position: absolute !important;
	}
}

footer a {
	text-decoration: none !important;
	color: inherit !important;
}

footer a:hover {
	text-decoration: underline !important;
	color: var(--bs-warning) !important;
}

/*--------------------------------------------------------------
# Quill Editor
--------------------------------------------------------------*/

.ql-editor img {
	width: 50%;
}

.js-quill-rendered p {
	margin-bottom: 0;
}

.js-quill-rendered img {
	max-width: 180px !important;
	max-height: 140px !important;
	width: auto !important;
	height: auto !important;
	object-fit: cover;
	border-radius: 0.5rem;
	cursor: zoom-in;
}

.quill-image-viewer-open {
	overflow: hidden;
}

.quill-image-viewer-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	z-index: 3000;
	padding: 1rem;
}

.quill-image-viewer-overlay.is-open {
	display: flex;
}

.quill-image-viewer-stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quill-image-viewer-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.quill-image-viewer-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: 0;
	border-radius: 999px;
	width: 2.25rem;
	height: 2.25rem;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.subsection-content-centered {
	width: 100%;
}

@media (min-width: 992px) {
	.course-formations-card {
		width: 70% !important;
	}

	.subsection-content-centered {
		width: 95%;
	}
}

/* Training: estilos base de categoría y bloqueo secuencial reutilizable */
.category-card {
	border: 0;
}

.category-cover {
	width: 100%;
	aspect-ratio: 4.7 / 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

@media (max-width: 576px) {
	.category-cover {
		aspect-ratio: 3 / 1;
	}
}

.category-content {
	padding: 1rem 1rem 1.25rem;
}

.category-description-line {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.category-progress {
	height: 0.6rem;
	background-color: var(--color-surface-muted);
}

.category-state-badge-new {
	background: linear-gradient(135deg, #ffe082 0%, #ffca28 45%, #f9a825 100%);
	color: #000000;
	border: 1px solid rgba(249, 168, 37, 0.55);
	box-shadow: 0 0 0.45rem rgba(249, 168, 37, 0.32);
}

.category-state-badges .badge {
	font-size: 0.8rem;
	padding: 0.3rem 0.4rem;
	line-height: 1;
}

.category-card.category-completed-tinted .category-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--category-color, var(--color-primary));
	opacity: 0.24;
	pointer-events: none;
}

.category-card.category-completed-tinted .category-content {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
		linear-gradient(
			var(--category-color, var(--color-primary)),
			var(--category-color, var(--color-primary))
		);
}

.section-draggable.section-completed-tinted {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
		linear-gradient(
			var(--category-color, var(--color-primary)),
			var(--category-color, var(--color-primary))
		);
}

.section-draggable.section-completed-tinted .card-header,
.section-draggable.section-completed-tinted .card-body {
	background-color: transparent;
}

.subsection-draggable.subsection-completed-tinted {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
		linear-gradient(
			var(--category-color, var(--color-primary)),
			var(--category-color, var(--color-primary))
		);
}

/* La clase se aplica en el root de category: añade filtro y candado automáticamente. */
.training-sequential-locked > * {
	filter: grayscale(0.1);
	opacity: 0.75;
	cursor: not-allowed;
}

.category-card.training-sequential-locked::after {
	content: "\1F512";
	font-family: bootstrap-icons, sans-serif;
	font-size: 10rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	pointer-events: none;
}