/* Overrides puntuales sobre style.css (NexaDash). Ver docs/04-front-guidelines.md. */

/* El padding horizontal y superior del content-body debe ser igual al padding interno de las
   cards (--bs-card-spacer-x: 1rem), no el 1.875rem por defecto del template. Si no, el margen
   entre el borde de la página y las cards se ve mayor que el padding interno de cada card. */
.content-body .container-fluid,
.content-body .container-sm,
.content-body .container-md,
.content-body .container-lg,
.content-body .container-xl,
.content-body .container-xxl {
	padding-top: 1rem;
	padding-right: 1rem;
	padding-left: 1rem;
}

/* Formularios "sm" por defecto: inputs, selects y botones nacen pequeños sin tener que
   agregar .form-control-sm / .form-select-sm / .btn-sm a mano en cada vista. Los valores
   copian los de esas clases -sm del propio style.css para no inventar una escala nueva.
   Van con !important porque style.css redefine .form-control y .btn más abajo en el propio
   archivo con `height`/`padding` en valores literales (no basados en variables), pisando
   cualquier override que no use !important aunque se cargue después. */
.form-control,
.form-select {
	height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)) !important;
	min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)) !important;
	padding: 0.25rem 0.5rem !important;
	font-size: 0.76563rem !important;
	border-radius: var(--bs-border-radius-sm) !important;
}

.form-select {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
	padding-left: 0.5rem !important;
}

/* Controles nativos de DataTables ("Mostrar _MENU_ registros" / "Buscar:"): el <select> y el
   <input> que genera el propio plugin no llevan clase .form-control/.form-select (no vendorizamos
   la integración datatables.bootstrap5), así que no heredan el override "sm" de arriba y quedan
   con el tamaño nativo del navegador, grande y desalineado del resto de inputs "sm" de la UI.
   Replicamos a mano los mismos valores para que se vean consistentes en cualquier tabla. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
	min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
	padding: 0.25rem 0.5rem;
	font-size: 0.76563rem;
	border-radius: var(--bs-border-radius-sm);
	border: var(--bs-border-width) solid var(--bs-border-color, #e4e4e4);
}

/* style.css fija line-height: 2.375rem para inputs type=file (pensado para su altura por
   defecto, 45px); con la altura "sm" de arriba ese line-height alto empuja el texto del
   pseudo-botón "Seleccionar archivo" fuera del input y lo solapa con lo que venga debajo. */
.form-control[type="file"] {
	line-height: 1.5 !important;
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}

.btn,
.btn-group > .btn {
	padding: 0.25rem 0.5rem !important;
	font-size: 0.76563rem !important;
	border-radius: var(--bs-border-radius-sm) !important;
}

.form-label {
	font-size: 0.8125rem;
	margin-bottom: 0.25rem;
}

/* Ícono de mostrar/ocultar contraseña (resources/views/auth/{login,register}.blade.php):
   style.css posiciona `.eye` con `top: 38px` fijo, pensado para la altura grande original del
   input (form-control-lg). Con la altura "sm" de arriba ese valor fijo ya no coincide y el
   ícono queda descolocado por debajo del input. El markup ahora envuelve solo input+ícono en su
   propio `.position-relative` (sin el label), así el ícono se puede centrar con `top: 50%` +
   `translateY(-50%)`, independiente de cualquier altura de input. */
.position-relative > .show-pass.eye {
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
}

/* Selects potenciados por bootstrap-select (bootstrap-select.min.js) no heredan de
   .form-select/.form-control; su tamaño lo controla .bootstrap-select .dropdown-toggle. */
.bootstrap-select .dropdown-toggle {
	min-height: 2.5rem;
	padding: 0.25rem 1.563rem;
	font-size: 0.76563rem;
}

/* Modales: style.css redefine .modal-header/.modal-body/.modal-footer más abajo en el propio
   archivo con 1.875rem de padding (mismo problema que .form-control/.btn de arriba, valores
   literales que pisan cualquier override sin !important). Con controles "sm" adentro, ese
   padding queda desproporcionado — lo igualamos al 1rem del resto de la UI. */
.modal-header,
.modal-body,
.modal-footer {
	padding: 1rem !important;
}

/* Modales con `.modal-dialog-scrollable` (ej. #rolModal) cuyo `<form>` envuelve
   header/body/footer (patrón estándar del proyecto, ver `roles/_modales.blade.php`): el scroll
   interno de Bootstrap depende de que `.modal-header/.modal-body/.modal-footer` sean HIJOS
   DIRECTOS de `.modal-content` (que es `display:flex; flex-direction:column`) — así
   `.modal-header`/`.modal-footer` quedan fijos (`flex-shrink:0`) y `.modal-body` absorbe el resto
   con `flex:1 1 auto; overflow-y:auto`. El `<form>` de por medio rompe esa cadena: pasa a ser el
   único hijo (real) de `.modal-content`, y como es un bloque normal (no flex) sin `overflow`
   propio, simplemente crece con su contenido — el `.modal-body` de adentro nunca activa su
   scroll y el `.modal-footer` (Guardar/Cancelar) queda cortado por el `overflow:hidden` de
   `.modal-content`, sin forma de llegar a él. `display:contents` en el `<form>` lo saca de la
   caja (sigue funcionando igual para submit/eventos) y deja que sus hijos participen del flex de
   `.modal-content` como si el `<form>` no existiera en el layout. El `min-height:0` en
   `.modal-body` es el mismo arreglo que ya usa el menú del sidebar más abajo: un ítem flex no
   encoge por debajo de su contenido (min-height:auto por defecto) salvo que se lo digamos. */
.modal-dialog-scrollable .modal-content > form {
	display: contents;
}

.modal-dialog-scrollable .modal-body {
	min-height: 0;
}

/* El gutter de Bootstrap por defecto (25px, ver .row en style.css) deja mucho aire entre
   columnas/filas de cards y de formularios, en cualquier .row del sitio, no solo en modales.
   Lo bajamos a 1rem (equivalente a `g-3`) en todos lados, para no depender de que cada vista
   nueva se acuerde de agregar la clase `g-3` a mano. --bs-gutter-y también, así las filas que
   wrappean (ej. las cards de métricas en 2 líneas en mobile) quedan separadas por lo mismo. */
.row {
	--bs-gutter-x: 1rem;
	--bs-gutter-y: 1rem;
}

/* .card trae su propio `margin-bottom` (más abajo en style.css, con el mismo patrón de valores
   literales que .form-control/.btn: 1.563rem, o sea 25px) para separar cards que están una
   debajo de la otra dentro de la misma columna, y usa `height: calc(100% - 25px)` para que,
   dentro de una fila de cards de igual altura, el margin no rompa el alto visual entre ellas.
   Se ve como "mucho aire" porque no está alineado con el resto del espaciado (1rem). Bajamos
   ambos valores juntos — si se cambia uno hay que cambiar el otro o las cards de una misma fila
   quedan de alturas distintas. */
.card {
	margin-bottom: 1rem !important;
	height: calc(100% - 1rem) !important;
}

/* Logo del tenant en el nav-header: style.css solo oculta .brand-title cuando el sidebar
   está colapsado (#main-wrapper.menu-toggle), pero deja .logo-abbr visible siempre a
   propósito, porque el combo por defecto del template es icono+texto conviviendo en el
   menú expandido. Con logos subidos por el tenant (uno para expandido, otro para
   comprimido) ese comportamiento se ve como "dos logos a la vez"; se quiere exclusivo:
   solo <img>.logo-abbr (el mini) cuando está colapsado, solo <img>.brand-title (el full)
   cuando está expandido. No toca los SVG por defecto (siguen combinados como diseñó el
   template) porque el selector apunta solo a <img>. */
#main-wrapper:not(.menu-toggle) .nav-header .brand-logo img.logo-abbr {
	display: none;
}

/* En mobile el sidebar siempre se ve como off-canvas (nunca "expandido" de verdad), así que
   la regla exclusiva de arriba dejaría los dos logos ocultos si #main-wrapper no tiene
   .menu-toggle. Por debajo del breakpoint donde style.css ya oculta .brand-title
   (@media max-width: 47.9375rem), forzamos el mini logo visible en los dos estados. */
@media (max-width: 47.9375rem) {
	#main-wrapper.menu-toggle .nav-header .brand-logo img.logo-abbr,
	#main-wrapper:not(.menu-toggle) .nav-header .brand-logo img.logo-abbr {
		display: inline-block;
	}
}

/* .nav-header .brand-logo trae justify-content: flex-start (con padding lateral) para el
   combo icono+texto por defecto, pensado para que el texto arranque pegado al icono. Con un
   único logo (imagen) ocupando todo el ancho del nav-header, ese layout lo deja pegado a la
   izquierda en vez de centrado. */
.nav-header .brand-logo {
	justify-content: center;
}

/* style.css fija margin-left: 0.6375rem en .brand-title, pensado para separarlo del icono
   .logo-abbr en el combo por defecto. Con el logo del tenant como imagen única y centrada,
   ese margen la descentra. */
.nav-header .brand-title {
	margin-left: 0;
}

/* Menú lateral: la fuente de los .nav-text (14px, ver .deznav .metismenu > li > a en style.css)
   queda un poco chica al lado de los lordicon de 30x30 de resources/views/partials/sidebar.blade.php. */
.deznav .metismenu > li > a .nav-text {
	font-size: 0.9375rem;
}

/* Bloque de usuario (foto + nombre + rol) en la cabecera del sidebar, con botón de cámara
   superpuesto para cambiar la foto sin salir del menú (ver partials/sidebar.blade.php). */
.sidebar-user-card {
	padding: 1.5rem 1rem 1rem;
}

.sidebar-user-avatar {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
}

.sidebar-user-avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--rgba-primary-1, #fff);
}

.sidebar-user-avatar-edit {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: #fff;
	border-radius: 50%;
	border: 2px solid #fff;
	cursor: pointer;
	font-size: 0.75rem;
	margin: 0;
}

.sidebar-user-name {
	margin-top: 0.75rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.sidebar-user-role {
	font-size: 0.8125rem;
	color: #6f767e;
}

/* Sidebar comprimido (estilo "mini" fijo, o "full" colapsado con el botón toggle vía
   body.menu-toggle): igual que el template oculta .header-profile .header-info en ese modo,
   ocultamos nombre y rol y dejamos solo el avatar, más chico, para que quepa en el ancho de
   5rem que le da style.css. */
[data-sidebar-style="mini"] .sidebar-user-name,
[data-sidebar-style="mini"] .sidebar-user-role,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .sidebar-user-name,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .sidebar-user-role {
	display: none;
}

[data-sidebar-style="mini"] .sidebar-user-card,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .sidebar-user-card {
	padding: 1rem 0.5rem;
}

[data-sidebar-style="mini"] .sidebar-user-avatar,
[data-sidebar-style="mini"] .sidebar-user-avatar img,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .sidebar-user-avatar,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .sidebar-user-avatar img {
	width: 3rem;
	height: 3rem;
}

/* Ítem activo del menú lateral (li.mm-active, clase que metismenu asigna al link de la
   pestaña actual). El fondo del link activo es transparente por defecto (igual que el resto
   de .deznav, que es blanco): una sombra sola no se nota sin relleno propio contra el que
   contrastar, así que se le da un fondo blanco explícito + sombra para que la pill quede
   "levantada" sobre el sidebar en vez de plana. */
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li > a:hover {
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Layout del sidebar: la tarjeta de usuario queda arriba, el bloque help-desk + mode-btn
   pegado abajo, y el menú (<ul#menu>) al medio ocupando el espacio disponible con scroll
   vertical propio.
   Por defecto style.css hace que TODO el .deznav-scroll scrollee como un bloque único
   (height:100% + overflow-y:scroll) y PerfectScrollbar (js/custom.js) se engancha a ese mismo
   elemento. Lo convertimos en una columna flex sin scroll propio: user-card y help-desk/mode-btn
   quedan a tamaño fijo (flex:0 0 auto) arriba y abajo, y el menú toma el resto (flex:1) con su
   propio overflow-y (min-height:0 es necesario para que un ítem flex pueda encoger y scrollear).
   PerfectScrollbar deja de mostrar riel porque el contenedor ya no desborda. Scope a layout
   vertical para no pisar el `.grid-menu` horizontal (que style.css pone en flex-direction: row). */
[data-layout="vertical"] .deznav .deznav-scroll.grid-menu {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

[data-layout="vertical"] .deznav .deznav-scroll.grid-menu > .sidebar-user-card,
[data-layout="vertical"] .deznav .deznav-scroll.grid-menu > .help-desk,
[data-layout="vertical"] .deznav .deznav-scroll.grid-menu > .mode-btn {
	flex: 0 0 auto;
}

[data-layout="vertical"] .deznav .deznav-scroll.grid-menu > #menu {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Banda de marca sobre la imagen del login (resources/views/auth/login.blade.php): título +
   redes sociales del tenant, centrados verticalmente sobre la imagen con una franja
   translúcida detrás del bloque de redes. Reemplaza el bloque `.text-white` simple que traía
   el template por defecto. */
.login-brand-band {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.login-brand-title {
	color: #fff;
	font-weight: 700;
	font-size: 2.5rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	margin-bottom: 1rem;
}

.login-brand-socials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(2px);
}

.login-brand-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
	background: var(--primary, #1D69D6);
	color: #fff;
	font-size: 1rem;
}

/* ============================================================================
   Calendario de fichajes (feature 026). Mapa de clases `cal-veredicto-*` emitido
   por el backend (VeredictoCumplimiento::clase(), D6): tinte de fondo por día +
   etiqueta de texto accesible (nunca solo color). Variables por veredicto para
   poder ajustar light/dark en un solo lugar.
   ========================================================================== */

:root {
	--cal-ausencia: 220, 53, 69;    /* danger */
	--cal-retraso: 255, 159, 0;     /* warning ámbar */
	--cal-parcial: 253, 126, 20;    /* naranja, distinto de retraso */
	--cal-cumplido: 34, 172, 147;   /* success del template */
	--cal-exceso: 33, 150, 243;     /* info */
	--cal-libre: 137, 150, 163;     /* secondary */
	--cal-incidencia: 55, 60, 70;   /* dark */
	--cal-tinte: 0.16;
	--cal-texto: #1f2937;
}

[data-theme-version="dark"] {
	--cal-tinte: 0.28;
	--cal-texto: #e5e7eb;
}

/* Fondo del día en la vista mensual (eventos display:background). */
.fc .fc-bg-event.cal-veredicto-ausencia { background: rgba(var(--cal-ausencia), var(--cal-tinte)); opacity: 1; }
.fc .fc-bg-event.cal-veredicto-retraso { background: rgba(var(--cal-retraso), var(--cal-tinte)); opacity: 1; }
.fc .fc-bg-event.cal-veredicto-parcial { background: rgba(var(--cal-parcial), var(--cal-tinte)); opacity: 1; }
.fc .fc-bg-event.cal-veredicto-cumplido { background: rgba(var(--cal-cumplido), var(--cal-tinte)); opacity: 1; }
.fc .fc-bg-event.cal-veredicto-exceso { background: rgba(var(--cal-exceso), var(--cal-tinte)); opacity: 1; }
.fc .fc-bg-event.cal-veredicto-libre { background: rgba(var(--cal-libre), calc(var(--cal-tinte) * 0.6)); opacity: 1; }

/* Etiqueta de veredicto inyectada dentro del evento de fondo (eventDidMount). */
.fc .fc-bg-event .cal-etiqueta {
	position: absolute;
	left: 0.25rem;
	bottom: 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cal-texto);
	pointer-events: none;
}

/* Leyenda y badges de veredicto (leyenda de la card, modal de día, modal de equipo). */
.cal-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.cal-leyenda-item {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--cal-texto);
	background: rgba(var(--cal-libre), 0.15);
	border-left: 3px solid rgb(var(--cal-libre));
}

.cal-leyenda-item.cal-veredicto-ausencia { background: rgba(var(--cal-ausencia), var(--cal-tinte)); border-left-color: rgb(var(--cal-ausencia)); }
.cal-leyenda-item.cal-veredicto-retraso { background: rgba(var(--cal-retraso), var(--cal-tinte)); border-left-color: rgb(var(--cal-retraso)); }
.cal-leyenda-item.cal-veredicto-parcial { background: rgba(var(--cal-parcial), var(--cal-tinte)); border-left-color: rgb(var(--cal-parcial)); }
.cal-leyenda-item.cal-veredicto-cumplido { background: rgba(var(--cal-cumplido), var(--cal-tinte)); border-left-color: rgb(var(--cal-cumplido)); }
.cal-leyenda-item.cal-veredicto-exceso { background: rgba(var(--cal-exceso), var(--cal-tinte)); border-left-color: rgb(var(--cal-exceso)); }
.cal-leyenda-item.cal-veredicto-libre { background: rgba(var(--cal-libre), var(--cal-tinte)); border-left-color: rgb(var(--cal-libre)); }
.cal-leyenda-item.cal-veredicto-incidencia { background: rgba(var(--cal-incidencia), var(--cal-tinte)); border-left-color: rgb(var(--cal-incidencia)); }
.cal-leyenda-item.cal-previsto { background: rgba(var(--cal-libre), 0.12); border-left: 3px dashed rgb(var(--cal-exceso)); }
.cal-leyenda-item.cal-real { background: rgba(var(--cal-exceso), 0.9); border-left-color: rgb(var(--cal-exceso)); color: #fff; }

/* Vistas semana/día (US2): tramo previsto como bloque de fondo punteado, intervalo real
   como bloque sólido superpuesto — distinguibles sin depender solo del color. */
.fc .fc-bg-event.cal-previsto {
	background: rgba(var(--cal-libre), 0.12);
	border: 1px dashed rgba(var(--cal-exceso), 0.7);
	opacity: 1;
}

.fc .cal-previsto-etiqueta {
	position: absolute;
	top: 0.125rem;
	right: 0.25rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--cal-texto);
	opacity: 0.7;
	pointer-events: none;
}

.fc .fc-event.cal-real {
	background: rgba(var(--cal-exceso), 0.85);
	border: 1px solid rgb(var(--cal-exceso));
}

.fc .cal-real-contenido {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #fff;
	padding: 0 0.25rem;
}

/* Vista de equipo (US3): recuentos por día. */
.cal-resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.125rem;
}

.cal-resumen-badge {
	display: inline-block;
	padding: 0.0625rem 0.375rem;
	border-radius: 1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--cal-texto);
}

.cal-resumen-badge.cal-veredicto-ausencia { background: rgba(var(--cal-ausencia), 0.35); }
.cal-resumen-badge.cal-veredicto-retraso { background: rgba(var(--cal-retraso), 0.35); }
.cal-resumen-badge.cal-veredicto-incidencia { background: rgba(var(--cal-incidencia), 0.3); }

/* El evento contenedor del resumen de equipo no debe verse como "pastilla" azul default. */
.fc .fc-event.cal-resumen-equipo {
	background: transparent;
	border: 0;
}

/* ============================================================================
   Ayuda contextual (mini-tutorial por pantalla)
   Trigger en el sidebar (.ayuda-trigger) + modal global (.ayuda-modal).
   Ver docs/04-front-guidelines.md, sección "Ayuda contextual".
   ============================================================================ */

/* --- Trigger en el sidebar --- */
.help-desk .ayuda-trigger {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--primary, #1D69D6) 18%, transparent);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--primary, #1D69D6) 7%, transparent);
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
		background-color 160ms ease, border-color 160ms ease;
}

.help-desk .ayuda-trigger:hover {
	background: color-mix(in srgb, var(--primary, #1D69D6) 12%, transparent);
	border-color: color-mix(in srgb, var(--primary, #1D69D6) 32%, transparent);
}

.help-desk .ayuda-trigger:active {
	transform: scale(0.98);
}

.ayuda-trigger-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	line-height: 0;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--primary, #1D69D6) 15%, transparent);
}

.ayuda-trigger-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.ayuda-trigger-title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--primary, #1D69D6);
}

.ayuda-trigger-sub {
	font-size: 0.6875rem;
	line-height: 1.2;
	color: #8a94a6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ayuda-trigger-chevron {
	flex: 0 0 auto;
	font-size: 0.625rem;
	color: color-mix(in srgb, var(--primary, #1D69D6) 55%, transparent);
	transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.help-desk .ayuda-trigger:hover .ayuda-trigger-chevron {
	transform: translateX(2px);
}

/* --- Modal --- */
.ayuda-modal .ayuda-content {
	position: relative;
	border: 0;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 24px 60px -12px rgba(16, 24, 40, 0.28),
		0 0 0 1px rgba(16, 24, 40, 0.04);
}

/* Entrada un pelín más marcada que el default de Bootstrap: escala desde 0.96
   (nunca desde 0) con una curva ease-out fuerte. Modal centrado → origen centro. */
.ayuda-modal.fade .modal-dialog {
	transform: scale(0.96);
	transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ayuda-modal.show .modal-dialog {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.ayuda-modal.fade .modal-dialog {
		transition: none;
	}
	.help-desk .ayuda-trigger,
	.ayuda-trigger-chevron {
		transition: none;
	}
}

.ayuda-close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 24, 40, 0.05);
	color: #667085;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.ayuda-close:hover {
	background: rgba(16, 24, 40, 0.1);
	color: #1f2937;
}

.ayuda-close:active {
	transform: scale(0.94);
}

.ayuda-head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1.375rem 1.5rem 1.125rem;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--primary, #1D69D6) 9%, transparent),
		transparent);
	border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

.ayuda-head-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	line-height: 0;
	border-radius: 0.875rem;
	background: color-mix(in srgb, var(--primary, #1D69D6) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #1D69D6) 18%, transparent);
}

.ayuda-eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary, #1D69D6);
}

.ayuda-title {
	margin: 0.0625rem 0 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
}

.ayuda-body {
	padding: 1.25rem 1.5rem 1.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #475467;
	max-height: min(65vh, 32rem);
	overflow-y: auto;
}

.ayuda-body > p:first-child {
	margin-top: 0;
}

.ayuda-body p:last-child {
	margin-bottom: 0;
}

.ayuda-body strong {
	color: #1f2937;
	font-weight: 600;
}

/* Lista de pasos: números en círculo con el color del tenant. */
.ayuda-body ol {
	counter-reset: ayuda-paso;
	list-style: none;
	margin: 0.75rem 0 0.875rem;
	padding: 0;
}

.ayuda-body ol > li {
	position: relative;
	padding-left: 2.125rem;
	margin-bottom: 0.75rem;
}

.ayuda-body ol > li:last-child {
	margin-bottom: 0;
}

.ayuda-body ol > li::before {
	counter-increment: ayuda-paso;
	content: counter(ayuda-paso);
	position: absolute;
	left: 0;
	top: -0.0625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--primary, #1D69D6) 12%, transparent);
	color: var(--primary, #1D69D6);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.ayuda-body ul {
	padding-left: 1.125rem;
	margin: 0.5rem 0;
}

.ayuda-body ul > li {
	margin-bottom: 0.375rem;
}

/* Nota final (error común a evitar): callout suave, ícono de info implícito. */
.ayuda-body .ayuda-nota,
.ayuda-body > p.text-muted:last-child {
	margin-top: 1rem;
	padding: 0.625rem 0.75rem 0.625rem 2.25rem;
	position: relative;
	border-radius: 0.625rem;
	background: color-mix(in srgb, var(--primary, #1D69D6) 6%, transparent);
	color: #667085;
	font-size: 0.8125rem;
}

.ayuda-body .ayuda-nota::before,
.ayuda-body > p.text-muted:last-child::before {
	content: "\f05a";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0.75rem;
	top: 0.6875rem;
	color: color-mix(in srgb, var(--primary, #1D69D6) 70%, #667085);
}

.ayuda-empty {
	padding: 0.5rem 0;
	color: #667085;
}

/* --- Dark mode --- */
[data-theme-version="dark"] .ayuda-trigger-sub {
	color: #9aa4b8;
}

[data-theme-version="dark"] .ayuda-modal .ayuda-content {
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme-version="dark"] .ayuda-close {
	background: rgba(255, 255, 255, 0.08);
	color: #c2c9d6;
}

[data-theme-version="dark"] .ayuda-close:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

[data-theme-version="dark"] .ayuda-head {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme-version="dark"] .ayuda-body {
	color: #b3bccb;
}

[data-theme-version="dark"] .ayuda-body strong {
	color: #f0f2f5;
}