


html[data-mx] {
	--mx-bg: #fafafa;
	--mx-superficie: #ffffff;
	--mx-hundido: #f4f4f4;
	--mx-borde: #e8e8e8;
	--mx-borde-fuerte: #d4d4d4;
	--mx-texto: #0a0a0a;
	--mx-texto-2: #4a4a4a;
	--mx-tenue: #8a8a8a;
	--mx-acento: #0a0a0a;
	--mx-acento-texto: #ffffff;
	--mx-hover: #f2f2f2;
	--mx-activo: #ececec;

	
	--mx-peligro: #b42318;
	--mx-peligro-fondo: #fdf1f0;
	--mx-exito: #196b44;
	--mx-aviso: #8a5a00;

	--mx-radio: 10px;
	--mx-radio-sm: 6px;
	--mx-fuente: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mx-fuente-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	
	--bs-body-font-family: var(--mx-fuente);
	--bs-body-color: var(--mx-texto);
	--bs-body-bg: var(--mx-bg);
	--bs-border-color: var(--mx-borde);
	--bs-primary: #0a0a0a;
	--bs-primary-rgb: 10, 10, 10;
	--bs-link-color: var(--mx-texto);
	--bs-link-hover-color: var(--mx-texto);
}

html[data-mx].dark-theme {
	--mx-bg: #0a0a0a;
	--mx-superficie: #111111;
	--mx-hundido: #171717;
	--mx-borde: #232323;
	--mx-borde-fuerte: #333333;
	--mx-texto: #ededed;
	--mx-texto-2: #a8a8a8;
	--mx-tenue: #6f6f6f;
	--mx-acento: #fafafa;
	--mx-acento-texto: #0a0a0a;
	--mx-hover: #1a1a1a;
	--mx-activo: #222222;
	--mx-peligro: #f0776b;
	--mx-peligro-fondo: #2a1413;
	--mx-exito: #6fcf97;
	--mx-aviso: #e3b341;
	--bs-primary: #fafafa;
	--bs-primary-rgb: 250, 250, 250;
}


html[data-mx] body {
	font-family: var(--mx-fuente);
	font-size: 14px;
	letter-spacing: -0.005em;
	color: var(--mx-texto);
	background: var(--mx-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'ss01', 'cv11';
}

html[data-mx] h1, html[data-mx] h2, html[data-mx] h3,
html[data-mx] h4, html[data-mx] h5, html[data-mx] h6 {
	font-family: var(--mx-fuente);
	color: var(--mx-texto);
	font-weight: 600;
	letter-spacing: -0.02em;
}

html[data-mx] h6 { font-size: 0.9rem; letter-spacing: -0.01em; }

html[data-mx] a { color: var(--mx-texto); text-decoration: none; }
html[data-mx] a:hover { color: var(--mx-texto); text-decoration: underline; text-underline-offset: 3px; }

html[data-mx] .text-muted,
html[data-mx] .small.text-muted { color: var(--mx-tenue) !important; }


html[data-mx] .monto,
html[data-mx] .kpi-valor {
	font-family: var(--mx-fuente);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
	letter-spacing: -0.01em;
}


html[data-mx] .font-monospace,
html[data-mx] code {
	font-family: var(--mx-fuente-mono);
	letter-spacing: -0.01em;
}

html[data-mx] code {
	color: var(--mx-texto);
	background: var(--mx-hundido);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 0.85em;
}

html[data-mx] ::selection { background: var(--mx-texto); color: var(--mx-superficie); }


html[data-mx] .sidebar-wrapper {
	background: var(--mx-superficie);
	border-right: 1px solid var(--mx-borde);
	box-shadow: none;
}

html[data-mx] .sidebar-header {
	background: var(--mx-superficie);
	border-bottom: 1px solid var(--mx-borde);
	border-right: 1px solid var(--mx-borde);
	padding: 0 16px;
	gap: 10px;
}

html[data-mx] .sidebar-header .moxen-logo {
	height: 17px;
	width: auto;
	color: var(--mx-texto);
	display: block;
}

html[data-mx] .sidebar-header .moxen-marca { display: none; height: 20px; width: auto; color: var(--mx-texto); }

html[data-mx] .sidebar-header .toggle-icon { color: var(--mx-tenue); font-size: 18px; }

html[data-mx] .sidebar-wrapper .metismenu { padding: 10px 10px 24px; }

html[data-mx] .sidebar-wrapper .metismenu a {
	font-size: 13.5px;
	font-weight: 450;
	color: var(--mx-texto-2);
	padding: 7px 10px;
	border-radius: var(--mx-radio-sm);
	letter-spacing: -0.005em;
	transition: background-color .12s ease, color .12s ease;
}

html[data-mx] .sidebar-wrapper .metismenu a .parent-icon { font-size: 18px; color: var(--mx-tenue); }
html[data-mx] .sidebar-wrapper .metismenu a .menu-title { margin-left: 10px; }

html[data-mx] .sidebar-wrapper .metismenu a:hover,
html[data-mx] .sidebar-wrapper .metismenu a:focus {
	color: var(--mx-texto);
	background: var(--mx-hover);
	text-decoration: none;
}

html[data-mx] .sidebar-wrapper .metismenu .mm-active > a {
	color: var(--mx-texto);
	background: var(--mx-activo);
	font-weight: 550;
}

html[data-mx] .sidebar-wrapper .metismenu .mm-active > a .parent-icon,
html[data-mx] .sidebar-wrapper .metismenu a:hover .parent-icon { color: var(--mx-texto); }

html[data-mx] .menu-label {
	color: var(--mx-tenue);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	padding: 18px 10px 6px;
}


html[data-mx] .sidebar-wrapper .metismenu .menu-principal > a {
	color: var(--mx-texto);
	font-weight: 550;
}


html[data-mx] .topbar {
	background: color-mix(in srgb, var(--mx-superficie) 88%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--mx-borde);
	box-shadow: none;
}

html[data-mx] .topbar-titulo h5 { font-size: 15px; font-weight: 600; color: var(--mx-texto); }

html[data-mx] .topbar .nav-link,
html[data-mx] .topbar .dark-mode-icon i { color: var(--mx-texto-2); }

html[data-mx] .user-box { border-left: 1px solid var(--mx-borde); }
html[data-mx] .user-box .user-name { color: var(--mx-texto); font-weight: 550; font-size: 13.5px; }
html[data-mx] .user-box .designattion { color: var(--mx-tenue); font-size: 12px; }

html[data-mx] .user-avatar-iniciales {
	background: var(--mx-texto);
	color: var(--mx-superficie);
	font-weight: 600;
	font-size: 14px;
	width: 32px;
	height: 32px;
}


html[data-mx] .page-wrapper { background: var(--mx-bg); }
html[data-mx] .page-content { padding: 28px; }
html[data-mx] .page-footer {
	background: var(--mx-bg);
	border-top: 1px solid var(--mx-borde);
	color: var(--mx-tenue);
	font-size: 12px;
	box-shadow: none;
}


html[data-mx] .card {
	background: var(--mx-superficie);
	border: 1px solid var(--mx-borde);
	border-radius: var(--mx-radio);
	box-shadow: none;
	margin-bottom: 1.25rem;
}

html[data-mx] .card-header {
	background: transparent;
	border-bottom: 1px solid var(--mx-borde);
	padding: 14px 20px;
}

html[data-mx] .card-body { padding: 20px; }
html[data-mx] .card-footer { background: transparent; border-top: 1px solid var(--mx-borde); }


html[data-mx] .card-kpi .kpi-icono {
	background: var(--mx-hundido) !important;
	color: var(--mx-texto) !important;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	font-size: 19px;
}

html[data-mx] .card-kpi .kpi-valor { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--mx-texto); }
html[data-mx] .card-kpi .kpi-label { color: var(--mx-tenue); font-size: 12.5px; }


html[data-mx] .btn {
	font-family: var(--mx-fuente);
	font-weight: 500;
	font-size: 13.5px;
	letter-spacing: -0.005em;
	border-radius: var(--mx-radio-sm);
	padding: 7px 14px;
	box-shadow: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

html[data-mx] .btn-sm { font-size: 12.5px; padding: 4px 10px; }
html[data-mx] .btn-lg { font-size: 15px; padding: 10px 20px; }


html[data-mx] .btn-primary,
html[data-mx] .btn-success,
html[data-mx] .btn-dark {
	--bs-btn-color: var(--mx-acento-texto);
	--bs-btn-bg: var(--mx-acento);
	--bs-btn-border-color: var(--mx-acento);
	--bs-btn-hover-color: var(--mx-acento-texto);
	--bs-btn-hover-bg: color-mix(in srgb, var(--mx-acento) 82%, var(--mx-bg));
	--bs-btn-hover-border-color: color-mix(in srgb, var(--mx-acento) 82%, var(--mx-bg));
	--bs-btn-active-bg: var(--mx-acento);
	--bs-btn-active-color: var(--mx-acento-texto);
	--bs-btn-disabled-bg: var(--mx-acento);
	--bs-btn-disabled-border-color: var(--mx-acento);
	color: var(--mx-acento-texto);
	background: var(--mx-acento);
	border-color: var(--mx-acento);
}

html[data-mx] .btn-primary:hover,
html[data-mx] .btn-success:hover,
html[data-mx] .btn-dark:hover {
	color: var(--mx-acento-texto);
	background: color-mix(in srgb, var(--mx-acento) 82%, var(--mx-bg));
	border-color: color-mix(in srgb, var(--mx-acento) 82%, var(--mx-bg));
}


html[data-mx] .btn-outline-primary,
html[data-mx] .btn-outline-secondary,
html[data-mx] .btn-outline-success,
html[data-mx] .btn-outline-info,
html[data-mx] .btn-outline-dark,
html[data-mx] .btn-outline-warning,
html[data-mx] .btn-light {
	color: var(--mx-texto);
	background: var(--mx-superficie);
	border: 1px solid var(--mx-borde-fuerte);
}

html[data-mx] .btn-outline-primary:hover,
html[data-mx] .btn-outline-secondary:hover,
html[data-mx] .btn-outline-success:hover,
html[data-mx] .btn-outline-info:hover,
html[data-mx] .btn-outline-dark:hover,
html[data-mx] .btn-outline-warning:hover,
html[data-mx] .btn-light:hover {
	color: var(--mx-texto);
	background: var(--mx-hover);
	border-color: var(--mx-borde-fuerte);
}


html[data-mx] .btn-outline-danger { color: var(--mx-peligro); border-color: color-mix(in srgb, var(--mx-peligro) 35%, transparent); background: transparent; }
html[data-mx] .btn-outline-danger:hover { color: #fff; background: var(--mx-peligro); border-color: var(--mx-peligro); }
html[data-mx] .btn-danger { background: var(--mx-peligro); border-color: var(--mx-peligro); color: #fff; }

html[data-mx] .btn-link { color: var(--mx-texto-2); text-decoration: none; }
html[data-mx] .btn-link:hover { color: var(--mx-texto); }
html[data-mx] .btn-link.text-danger { color: var(--mx-peligro) !important; }

html[data-mx] .btn:focus-visible,
html[data-mx] .form-control:focus,
html[data-mx] .form-select:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-texto) 12%, transparent);
	border-color: var(--mx-texto);
	outline: none;
}


html[data-mx] .form-control,
html[data-mx] .form-select,
html[data-mx] .input-group-text {
	font-family: var(--mx-fuente);
	font-size: 13.5px;
	color: var(--mx-texto);
	background-color: var(--mx-superficie);
	border: 1px solid var(--mx-borde-fuerte);
	border-radius: var(--mx-radio-sm);
}

html[data-mx] .input-group-text { background: var(--mx-hundido); color: var(--mx-tenue); }
html[data-mx] .form-control::placeholder { color: var(--mx-tenue); }
html[data-mx] .form-label { font-size: 12.5px; font-weight: 500; color: var(--mx-texto-2); }
html[data-mx] .form-text { color: var(--mx-tenue); font-size: 12px; }
html[data-mx] .form-check-input:checked { background-color: var(--mx-acento); border-color: var(--mx-acento); }

html[data-mx] .seccion-form {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--mx-tenue);
	border-bottom-color: var(--mx-borde);
}


html[data-mx] .table {
	--bs-table-bg: transparent;
	--bs-table-hover-bg: var(--mx-hover);
	--bs-table-border-color: var(--mx-borde);
	color: var(--mx-texto);
}

html[data-mx] .table thead th {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--mx-tenue);
	background: transparent;
	border-bottom: 1px solid var(--mx-borde);
}

html[data-mx] .table td { border-color: var(--mx-borde); }
html[data-mx] .table-light, html[data-mx] .table-light > * { --bs-table-bg: var(--mx-hundido); color: var(--mx-texto); }
html[data-mx] .fila-vencida { background: var(--mx-peligro-fondo) !important; }



html[data-mx] .tabla-montos { font-variant-numeric: tabular-nums; white-space: normal; }
html[data-mx] .tabla-montos td,
html[data-mx] .tabla-montos tbody th,
html[data-mx] .tabla-montos tfoot th { padding: 0.6rem 0.75rem; vertical-align: middle; font-weight: 400; }
html[data-mx] .tabla-montos td.text-end { white-space: nowrap; }
html[data-mx] .tabla-montos tr.fila-total > * {
	font-weight: 600;
	border-top: 1px solid var(--mx-borde-fuerte);
}
html[data-mx] .tabla-montos tr.fila-sub > * { color: var(--mx-tenue); font-size: 0.8125rem; }
html[data-mx] .tabla-montos tr.fila-sub > th { padding-left: 1.5rem; }
html[data-mx] .tabla-montos tr.fila-sub.text-danger > * { color: var(--mx-peligro); }
html[data-mx] .tabla-montos tr:last-child > * { border-bottom: 0; }
html[data-mx] .tabla-montos a.badge { text-decoration: none; }
@media (max-width: 575.98px) {
	html[data-mx] .tabla-montos { font-size: 0.8125rem; }
	html[data-mx] .tabla-montos td,
	html[data-mx] .tabla-montos th,
	html[data-mx] .tabla-montos thead th { padding: 0.5rem 0.35rem; }
	html[data-mx] .tabla-montos tr.fila-sub > th { padding-left: 0.75rem; }
}


html[data-mx] .tabla-docs thead th { padding-top: 0.85rem; }
html[data-mx] .tabla-docs tr > :first-child { padding-left: 1.25rem; }
html[data-mx] .tabla-docs tr > :last-child { padding-right: 1.25rem; }
html[data-mx] .tabla-docs .badge { font-weight: 500; }
html[data-mx] .tabla-docs .celda-concepto { min-width: 120px; }
html[data-mx] .tabla-docs .fila-anulada > * { color: var(--mx-tenue); }
html[data-mx] .tabla-docs .fila-anulada td.text-end { text-decoration: line-through; }
html[data-mx] .doc-enlace {
	display: inline-flex; align-items: center; gap: 0.25rem;
	font-size: 0.8125rem; text-decoration: none; margin: 0;
}
html[data-mx] .doc-enlace:hover { text-decoration: underline; }


html[data-mx] .grafico-dona { position: relative; height: 200px; max-width: 220px; margin: 0 auto; }
html[data-mx] .grafico-dona-centro {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	pointer-events: none;
}
html[data-mx] .grafico-dona-centro .valor { font-size: 1.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
html[data-mx] .grafico-dona-centro .etiqueta { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mx-tenue); margin-top: 0.35rem; }
html[data-mx] .leyenda-dona { margin-top: 1rem; font-size: 0.8125rem; }
html[data-mx] .leyenda-dona > div { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
html[data-mx] .leyenda-dona strong { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
html[data-mx] .leyenda-dona .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--mx-borde); }
html[data-mx] .leyenda-dona .punto.lleno { background: var(--mx-texto); }



html[data-mx] .badge {
	font-family: var(--mx-fuente);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: 0;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid transparent;
}

html[data-mx] .badge.bg-success { background: var(--mx-acento) !important; color: var(--mx-acento-texto) !important; }

html[data-mx] .badge.bg-info,
html[data-mx] .badge.bg-primary,
html[data-mx] .badge.bg-warning {
	background: transparent !important;
	color: var(--mx-texto) !important;
	border-color: var(--mx-borde-fuerte);
}

html[data-mx] .badge.bg-secondary,
html[data-mx] .badge.bg-light,
html[data-mx] .badge.bg-dark {
	background: var(--mx-hundido) !important;
	color: var(--mx-texto-2) !important;
}

html[data-mx] .badge.bg-danger {
	background: var(--mx-peligro-fondo) !important;
	color: var(--mx-peligro) !important;
	border-color: color-mix(in srgb, var(--mx-peligro) 25%, transparent);
}

html[data-mx] .bg-light-primary, html[data-mx] .bg-light-success, html[data-mx] .bg-light-info,
html[data-mx] .bg-light-warning, html[data-mx] .bg-light-danger {
	background: var(--mx-hundido) !important;
}


html[data-mx] .text-primary, html[data-mx] .text-info { color: var(--mx-texto) !important; }
html[data-mx] .text-warning { color: var(--mx-aviso) !important; }
html[data-mx] .text-danger { color: var(--mx-peligro) !important; }
html[data-mx] .text-success { color: var(--mx-exito) !important; }


html[data-mx] .nav-tabs { border-bottom: 1px solid var(--mx-borde); gap: 4px; }

html[data-mx] .nav-tabs .nav-link {
	color: var(--mx-tenue);
	font-weight: 500;
	font-size: 13.5px;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 10px 12px;
	margin-bottom: -1px;
	background: transparent;
	border-radius: 0;
}

html[data-mx] .nav-tabs .nav-link:hover { color: var(--mx-texto); text-decoration: none; }
html[data-mx] .nav-tabs .nav-link.active { color: var(--mx-texto); border-bottom-color: var(--mx-texto); background: transparent; }

html[data-mx] .nav-tabs .nav-link .contador {
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	color: var(--mx-tenue);
	margin-left: 4px;
}

html[data-mx] .nav-pills .nav-link {
	color: var(--mx-texto-2);
	font-size: 13px;
	font-weight: 500;
	border-radius: 999px;
}

html[data-mx] .nav-pills .nav-link:hover { background: var(--mx-hover); text-decoration: none; }
html[data-mx] .nav-pills .nav-link.active { background: var(--mx-acento); color: var(--mx-acento-texto); }


html[data-mx] .alert {
	border: 1px solid var(--mx-borde) !important;
	border-radius: var(--mx-radio);
	background: var(--mx-superficie);
	color: var(--mx-texto);
	font-size: 13.5px;
}

html[data-mx] .alert-success { border-left: 3px solid var(--mx-texto) !important; }
html[data-mx] .alert-warning { border-left: 3px solid var(--mx-aviso) !important; }
html[data-mx] .alert-danger { border-left: 3px solid var(--mx-peligro) !important; color: var(--mx-texto); }
html[data-mx] .alert-light { background: var(--mx-hundido); }
html[data-mx] .alert i.fs-3, html[data-mx] .alert i.fs-4 { color: var(--mx-texto) !important; }


html[data-mx] .modal-content {
	background: var(--mx-superficie);
	border: 1px solid var(--mx-borde);
	border-radius: 12px;
	box-shadow: 0 24px 48px -12px rgb(0 0 0 / .18);
}

html[data-mx] .modal-header, html[data-mx] .modal-footer { border-color: var(--mx-borde); }
html[data-mx] .modal-title { font-weight: 600; font-size: 15px; }
html[data-mx] .modal-backdrop.show { opacity: .35; }

html[data-mx] .dropdown-menu {
	background: var(--mx-superficie);
	border: 1px solid var(--mx-borde);
	border-radius: 8px;
	box-shadow: 0 12px 32px -8px rgb(0 0 0 / .14);
	padding: 4px;
}

html[data-mx] .dropdown-item { border-radius: 5px; font-size: 13.5px; color: var(--mx-texto); }
html[data-mx] .dropdown-item:hover { background: var(--mx-hover); color: var(--mx-texto); }


html[data-mx] .barra-cobro { background: var(--mx-hundido); height: 6px; }
html[data-mx] .barra-cobro > span { background: var(--mx-acento); }

html[data-mx] .resumen-totales {
	background: var(--mx-hundido);
	border: 1px solid var(--mx-borde);
	border-radius: var(--mx-radio);
}

html[data-mx] .resumen-totales .linea.total { border-top-color: var(--mx-texto); }

html[data-mx] .estado-vacio { color: var(--mx-tenue); }
html[data-mx] .estado-vacio i { opacity: .35; font-size: 2.4rem; }

html[data-mx] .lista-pagos .pago-icono,
html[data-mx] .pago-icono {
	background: var(--mx-hundido);
	color: var(--mx-texto);
}

html[data-mx] .password-visible { color: var(--mx-texto); }
html[data-mx] .logo-mark { background: var(--mx-acento); color: var(--mx-acento-texto); }


html[data-mx] .pace .pace-progress { background: var(--mx-texto); height: 2px; }


html[data-mx] .kanban-columna,
html[data-mx] .kanban-col { background: var(--mx-hundido); border: 1px solid var(--mx-borde); }


@media screen and (min-width: 1025px) {
	html[data-mx] .wrapper.toggled:not(.sidebar-hovered) .sidebar-header .moxen-logo { display: none; }
	html[data-mx] .wrapper.toggled:not(.sidebar-hovered) .sidebar-header .moxen-marca { display: block; }
}


html[data-mx] .ficha-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 20px;
}

html[data-mx] .ficha-cabecera h1 {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0 0 4px;
}

html[data-mx] .ficha-miga {
	font-size: 12.5px;
	color: var(--mx-tenue);
	margin-bottom: 6px;
}

html[data-mx] .ficha-miga a { color: var(--mx-tenue); }
html[data-mx] .ficha-miga a:hover { color: var(--mx-texto); }


html[data-mx] .cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 1px solid var(--mx-borde);
	border-radius: var(--mx-radio);
	background: var(--mx-superficie);
	margin-bottom: 20px;
	overflow: hidden;
}

html[data-mx] .cifras > div { padding: 16px 20px; border-right: 1px solid var(--mx-borde); }
html[data-mx] .cifras > div:last-child { border-right: 0; }

html[data-mx] .cifras .etiqueta {
	font-size: 11.5px;
	color: var(--mx-tenue);
	margin-bottom: 4px;
}

html[data-mx] .cifras .valor {
	font-family: var(--mx-fuente);
	font-variant-numeric: tabular-nums;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--mx-texto);
}

html[data-mx] .cifras .valor.peligro { color: var(--mx-peligro); }

@media (max-width: 767.98px) {
	html[data-mx] .cifras > div { border-right: 0; border-bottom: 1px solid var(--mx-borde); }
	html[data-mx] .cifras > div:last-child { border-bottom: 0; }
}


html[data-mx] .desglose { margin: 0; }
html[data-mx] .desglose > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px dashed var(--mx-borde);
	font-size: 13.5px;
}

html[data-mx] .desglose > div:last-child { border-bottom: 0; }
html[data-mx] .desglose dt { font-weight: 400; color: var(--mx-texto-2); }
html[data-mx] .desglose dd { margin: 0; font-variant-numeric: tabular-nums; }
html[data-mx] .desglose .total { border-top: 1px solid var(--mx-texto); border-bottom: 0; margin-top: 4px; padding-top: 12px; }
html[data-mx] .desglose .total dt, html[data-mx] .desglose .total dd { font-weight: 600; color: var(--mx-texto); }


html[data-mx] .tarea {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--mx-borde);
}

html[data-mx] .tarea:last-child { border-bottom: 0; }
html[data-mx] .tarea.completada .tarea-titulo { color: var(--mx-tenue); text-decoration: line-through; }
html[data-mx] .tarea-titulo { font-weight: 500; }
html[data-mx] .tarea-meta { font-size: 12px; color: var(--mx-tenue); }

html[data-mx] .check-tarea {
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--mx-borde-fuerte);
	border-radius: 50%;
	background: transparent;
	display: grid;
	place-items: center;
	padding: 0;
	flex-shrink: 0;
	color: transparent;
	transition: all .12s ease;
}

html[data-mx] .check-tarea:hover { border-color: var(--mx-texto); }
html[data-mx] .tarea.completada .check-tarea { background: var(--mx-acento); border-color: var(--mx-acento); color: var(--mx-acento-texto); }

html[data-mx] .responsable {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--mx-texto-2);
}

html[data-mx] .responsable .inicial {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mx-hundido);
	border: 1px solid var(--mx-borde);
	display: grid;
	place-items: center;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--mx-texto);
}


html[data-mx] .credencial {
	border: 1px solid var(--mx-borde);
	border-radius: var(--mx-radio);
	padding: 14px 16px;
	background: var(--mx-superficie);
	height: 100%;
}

html[data-mx] .credencial-campo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mx-fuente-mono);
	font-size: 12.5px;
	padding: 6px 10px;
	background: var(--mx-hundido);
	border-radius: 6px;
	margin-top: 6px;
}

html[data-mx] .credencial-campo .etq {
	font-family: var(--mx-fuente);
	color: var(--mx-tenue);
	font-size: 11px;
	width: 62px;
	flex-shrink: 0;
}

html[data-mx] .credencial-campo .val { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-mx] .credencial-campo button { color: var(--mx-tenue); padding: 0 2px; border: 0; background: none; }
html[data-mx] .credencial-campo button:hover { color: var(--mx-texto); }


html[data-mx] .adjunto {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	padding: 2px 8px;
	border: 1px solid var(--mx-borde);
	border-radius: 999px;
	color: var(--mx-texto-2);
}

html[data-mx] .adjunto:hover { border-color: var(--mx-texto); color: var(--mx-texto); text-decoration: none; }


html[data-mx] .conmutador {
	display: inline-flex;
	padding: 3px;
	background: var(--mx-hundido);
	border-radius: 8px;
	gap: 2px;
	margin-bottom: 12px;
}

html[data-mx] .conmutador label {
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 6px;
	color: var(--mx-tenue);
	cursor: pointer;
	margin: 0;
}

html[data-mx] .conmutador a {
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 6px;
	color: var(--mx-tenue);
	text-decoration: none;
}
html[data-mx] .conmutador a.activo {
	background: var(--mx-superficie);
	color: var(--mx-texto);
	box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}
html[data-mx] .conmutador label[hidden] { display: none; }

html[data-mx] .conmutador input { display: none; }
html[data-mx] .conmutador input:checked + label {
	background: var(--mx-superficie);
	color: var(--mx-texto);
	box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}


html[data-mx] .acceso {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--mx-bg);
}

html[data-mx] .acceso-caja { width: 100%; max-width: 360px; }
html[data-mx] .acceso-caja .moxen-logo { height: 22px; width: auto; color: var(--mx-texto); display: block; margin: 0 auto 40px; }
html[data-mx] .acceso-caja h1 { font-size: 1.3rem; text-align: center; margin-bottom: 6px; }
html[data-mx] .acceso-caja .bajada { text-align: center; color: var(--mx-tenue); font-size: 13.5px; margin-bottom: 28px; }
html[data-mx] .acceso-caja .form-control { padding: 9px 12px; }
html[data-mx] .acceso-caja .btn { width: 100%; padding: 10px; }

html[data-mx] .acceso-caja .input-group .btn { width: auto; padding: 9px 12px; }
html[data-mx] .acceso-pie { text-align: center; margin-top: 32px; font-size: 12px; color: var(--mx-tenue); }


html[data-mx] .min-w-0 { min-width: 0; }


html[data-mx] .tabla-docs .fila-pendiente > * { background: var(--mx-hundido); }


html[data-mx] .asistente { display: flex; flex-direction: column; gap: 1rem; }
html[data-mx] .asistente-cabecera {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
}
html[data-mx] .asistente-cabecera h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
html[data-mx] .estado-asistente {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 12px; font-weight: 500; color: var(--mx-tenue);
	border: 1px solid var(--mx-borde); border-radius: 999px; padding: 3px 10px;
}
html[data-mx] .estado-asistente .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--mx-borde-fuerte); }
html[data-mx] .estado-asistente.en-linea { color: var(--mx-texto); }
html[data-mx] .estado-asistente.en-linea .punto { background: var(--mx-texto); }

html[data-mx] .asistente-chat {
	display: flex; flex-direction: column;
	height: calc(100vh - 260px); min-height: 420px; margin-bottom: 0;
}
html[data-mx] .asistente-mensajes {
	flex: 1; overflow-y: auto; padding: 1.25rem;
	display: flex; flex-direction: column; gap: 0.75rem;
}
html[data-mx] .par-mensajes { display: flex; flex-direction: column; gap: 0.75rem; }
html[data-mx] .burbuja {
	max-width: min(680px, 85%); padding: 0.65rem 0.9rem; border-radius: 14px;
	font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere;
}
html[data-mx] .burbuja.propia {
	align-self: flex-end; background: var(--mx-acento); color: var(--mx-acento-texto);
	border-bottom-right-radius: 4px;
}
html[data-mx] .burbuja.propia .hora { display: block; text-align: right; font-size: 10.5px; opacity: 0.6; margin-top: 2px; }
html[data-mx] .burbuja.propia .adjunto-enviado { color: inherit; display: inline-flex; gap: 0.3rem; align-items: center; opacity: 0.9; }
html[data-mx] .burbuja.asistente-resp {
	align-self: flex-start; background: var(--mx-hundido); color: var(--mx-texto);
	border-bottom-left-radius: 4px;
}
html[data-mx] .burbuja.pensando { display: inline-flex; gap: 4px; padding: 0.85rem 1rem; }
html[data-mx] .burbuja.pensando span {
	width: 6px; height: 6px; border-radius: 50%; background: var(--mx-tenue);
	animation: mx-pensando 1.2s infinite ease-in-out;
}
html[data-mx] .burbuja.pensando span:nth-child(2) { animation-delay: 0.15s; }
html[data-mx] .burbuja.pensando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mx-pensando { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-mx] .burbuja.pensando span { animation: none; opacity: 0.6; } }

html[data-mx] .documento-confirmar,
html[data-mx] .documento-estado {
	margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mx-borde);
}
html[data-mx] .documento-estado { font-size: 12.5px; font-weight: 500; }

html[data-mx] .asistente-vacio {
	margin: auto; text-align: center; color: var(--mx-tenue);
	display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
html[data-mx] .asistente-vacio > i { font-size: 2rem; color: var(--mx-texto); }
html[data-mx] .asistente-vacio p { margin: 0; color: var(--mx-texto); font-weight: 500; }
html[data-mx] .sugerencias { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.5rem; }
html[data-mx] .sugerencia {
	border: 1px solid var(--mx-borde); background: var(--mx-superficie); color: var(--mx-texto);
	border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
html[data-mx] .sugerencia:hover { border-color: var(--mx-borde-fuerte); background: var(--mx-hover); }

html[data-mx] .asistente-redactar { border-top: 1px solid var(--mx-borde); padding: 0.75rem 1rem 0.5rem; }
html[data-mx] .asistente-redactar textarea { resize: none; min-height: 38px; max-height: 160px; }
html[data-mx] .adjunto-elegido {
	display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
	font-size: 12.5px; border: 1px solid var(--mx-borde); border-radius: 8px; padding: 3px 6px 3px 9px;
}
@media (max-width: 767.98px) {
	html[data-mx] .asistente-chat { height: calc(100vh - 220px); }
	html[data-mx] .asistente-mensajes { padding: 0.75rem; }
	html[data-mx] .burbuja { max-width: 92%; }
}


html[data-mx] .correo-barra {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
html[data-mx] .correo-buscar input { min-width: 200px; }
html[data-mx] .correo-lista { overflow: hidden; }
html[data-mx] .correo-item {
	display: block; padding: 0.7rem 1rem; border-bottom: 1px solid var(--mx-borde);
	color: var(--mx-texto); text-decoration: none; position: relative;
}
html[data-mx] .correo-item:hover { background: var(--mx-hover); }
html[data-mx] .correo-item.activo { background: var(--mx-hundido); }
html[data-mx] .correo-item.no-leido::before {
	content: ""; position: absolute; left: 0.35rem; top: 1.05rem;
	width: 6px; height: 6px; border-radius: 50%; background: var(--mx-texto);
}
html[data-mx] .correo-item .de { font-size: 0.875rem; }
html[data-mx] .correo-item.no-leido .de,
html[data-mx] .correo-item.no-leido .asunto { font-weight: 600; }
html[data-mx] .correo-item .cuando { font-size: 11.5px; color: var(--mx-tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-mx] .correo-item .asunto { font-size: 0.85rem; }
html[data-mx] .correo-item .asunto i { color: var(--mx-tenue); }
html[data-mx] .correo-item .extracto { font-size: 12.5px; color: var(--mx-tenue); }
html[data-mx] .correo-item .etiquetas { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
html[data-mx] .correo-asunto { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
html[data-mx] .correo-meta { font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; overflow-wrap: anywhere; }
html[data-mx] .correo-cuerpo {
	width: 100%; min-height: 480px; height: 62vh; border: 1px solid var(--mx-borde); border-radius: 8px; background: #fff;
}
html[data-mx] .correo-texto { white-space: normal; font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }


html[data-mx] .perfil-dominio .perfil-titulo { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
html[data-mx] .perfil-dominio .credencial-campo { margin-top: 0.5rem; }
html[data-mx] .conmutador.flex-wrap { flex-wrap: wrap; }


html[data-mx] .aviso-demo {
	display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1rem;
	padding: 0.6rem 0.9rem; border: 1px dashed var(--mx-borde-fuerte); border-radius: 8px;
	font-size: 12.5px; color: var(--mx-texto); background: var(--mx-hundido);
}
html[data-mx] .aviso-demo i { font-size: 1.1rem; margin-top: 1px; }
