/* =========================================================
	 kui tokens — variables de la aplicación sobre KUI
	 Light es el tema por defecto. Dark se activa con
	 la clase .kui-theme-dark.
	 Ver: app/docs/css.md para documentación completa.
	 ========================================================= */

/* =========================================================
	 LIGHT THEME (default)
	 ========================================================= */

:root {
	/* 🎨 Paleta de colores */
	--c-primary: 250, 170, 40;
	/* color primaario */
	--c-secondary: 250, 100, 10;
	/* color secundrio */
	--c-tertiary: 75, 20, 110;
	/* color terciario */
	--c-success: 106, 199, 90;
	/* Verde */
	--c-danger: 231, 76, 60;
	/* Rojo */
	--c-warning: 241, 196, 15;
	/* Amarillo */
	--c-info: 103, 186, 241;
	/* Turquesa */
	--c-light: 236, 240, 241;
	/* color claro */
	--c-dark: 44, 62, 80;
	/* Gris oscuro */
	--c-text: 20, 23, 40;
	/* color de texto general */
	--c-background: 255, 255, 255;
	/* color de fondo general por ej. de fondo de card */
	/* 🔤 Tipografía */
	--font-family-base: Tahoma, Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;
	/* 📏 Espaciados */
	--spacer-0: 0;
	--spacer-1: 0.25rem;
	--spacer-2: 0.5rem;
	--spacer-3: 1rem;
	--spacer-4: 1.5rem;
	--spacer-5: 3rem;
	/* 🔲 Bordes */
	--border-radius: 1rem;
	--border-width: 1px;
	/* ✨ Sombras */
	--box-shadow: 0 0.5rem 1rem rgba(var(--c-dark), 0.15);
	--backdrop-filter: blur(.2rem) saturate(150%);
	--sidebar-normal: 20rem;
	--sidebar-condensed: 8rem;
	--sidebar-minimal: 5rem;
}
html.kui-theme-dark {
	--c-text: 239, 227, 202;
	--c-background: 14, 18, 23;
}
:root {
	--chart-primary: #2563eb;
	--chart-secondary: #16a34a;
	--chart-grid: #e5e7eb;
	--chart-text: #374151;
}
html.kui-theme-dark {
	--chart-primary: #60a5fa;
	--chart-secondary: #4ade80;
	--chart-grid: #374151;
	--chart-text: #d1d5db;
}/* =========================================================
	 kui base — reset
	 Ver: app/docs/css.md para documentación completa.
	 ========================================================= */

*, *::before, *::after {
	box-sizing: border-box;
	padding: 0;
}
* {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	/*transition: all 0.3s ease 0s;*/
}
html, body {
	height: 100%;
	overflow: hidden;
}
html {
	/* Base 16px: 1rem = 16px para edición predecible */
	font-size: 16px;
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-family-base);
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	margin: 0;
}
[x-cloak] {
	display: none !important;
}
.transition-fade {
	/*transition-property: opacity;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);*/
	/*transform: translateY(0);*/
	opacity: 1;
}
::-webkit-scrollbar {
	width: .25rem;
	height: .25rem;
	background-color: rgb(var(--c-background));
}
::-webkit-scrollbar-thumb {
	border-radius: .25rem;
	/*box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);*/
	/*border: 1px solid var(--c-background);*/
	background-color: rgb(var(--c-primary));
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-corner {
	background-color: rgb(var(--c-background));
}
/* Oculta las flechas del scrollbar del documento y los controles nativos. */
::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}
/*::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: red; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: red; }*/

@media (max-width: 768px) {
	::-webkit-scrollbar {
		width: .2rem;
		height: .2rem;
	}
}
/* ========================================
	 ELEMENTOS BASE - ENLACES
	 ======================================== */

a {
	color: rgba(var(--c-primary), .75);
	text-decoration: none;
}
a:hover, a:focus {
	color: rgba(var(--c-primary), 1);
	text-decoration: none;
	outline: none;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}
a:active {
	color: var(--c-secondary);
}
a[disabled], a.disabled {
	pointer-events: none;
	color: var(--c-light);
	text-decoration: none;
	cursor: default;
}
hr {
	border: 1px solid rgb(var(--c-primary), .5);
	margin: 1rem 0;
}
/* =========================================================
	 Transición SPA (Swup) — patrón oficial: Swup añade
	 `is-animating` a <html> durante la transición.
	 ========================================================= */

.transition-fade {
	transition: opacity 0.2s ease;
	opacity: 1;
}
html.is-animating .transition-fade {
	opacity: 0;
}
/* =========================
	 4. Display y alineación
	 ========================= */

/* ========================================
	 UTILIDADES DE DISPLAY Y ALINEACIÓN
	 ======================================== */

/* Display */

.d-none {
	display: none !important;
}
.d-inline {
	display: inline !important;
}
.d-inline-block {
	display: inline-block !important;
}
.d-block {
	display: block !important;
}
.d-flex {
	display: flex !important;
}
.d-inline-flex {
	display: inline-flex !important;
}
.d-grid {
	display: grid !important;
}
/* Flex dirección */

.flex-row {
	flex-direction: row !important;
}
.flex-row-reverse {
	flex-direction: row-reverse !important;
}
.flex-column {
	flex-direction: column !important;
}
.flex-column-reverse {
	flex-direction: column-reverse !important;
}
/* Flex wrap */

.flex-wrap {
	flex-wrap: wrap !important;
}
.flex-nowrap {
	flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
	flex-wrap: wrap-reverse !important;
}
/* Justificación de contenido */

.justify-start {
	justify-content: flex-start !important;
}
.justify-center {
	justify-content: center !important;
}
.justify-end {
	justify-content: flex-end !important;
}
.justify-between {
	justify-content: space-between !important;
}
.justify-around {
	justify-content: space-around !important;
}
.justify-evenly {
	justify-content: space-evenly !important;
}
/* Alineación en eje vertical (cross-axis) */

.align-start {
	align-items: flex-start !important;
}
.align-center {
	align-items: center !important;
}
.align-end {
	align-items: flex-end !important;
}
.align-stretch {
	align-items: stretch !important;
}
.align-baseline {
	align-items: baseline !important;
}
/* Alineación de contenido en grid/flex (multi-line) */

.align-content-start {
	align-content: flex-start !important;
}
.align-content-center {
	align-content: center !important;
}
.align-content-end {
	align-content: flex-end !important;
}
.align-content-between {
	align-content: space-between !important;
}
.align-content-around {
	align-content: space-around !important;
}
.align-content-stretch {
	align-content: stretch !important;
}
/* Auto-alineación de items */

.align-self-start {
	align-self: flex-start !important;
}
.align-self-center {
	align-self: center !important;
}
.align-self-end {
	align-self: flex-end !important;
}
.align-self-stretch {
	align-self: stretch !important;
}
/* Grid helpers */

.grid-cols-1 {
	grid-template-columns: repeat(1, 1fr) !important;
}
.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr) !important;
}
.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr) !important;
}
.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr) !important;
}
.grid-cols-5 {
	grid-template-columns: repeat(5, 1fr) !important;
}
.grid-cols-6 {
	grid-template-columns: repeat(6, 1fr) !important;
}
.grid-rows-1 {
	grid-template-rows: repeat(1, 1fr) !important;
}
.grid-rows-2 {
	grid-template-rows: repeat(2, 1fr) !important;
}
.grid-rows-3 {
	grid-template-rows: repeat(3, 1fr) !important;
}
.grid-rows-4 {
	grid-template-rows: repeat(4, 1fr) !important;
}
.grid-rows-5 {
	grid-template-rows: repeat(5, 1fr) !important;
}
.grid-rows-6 {
	grid-template-rows: repeat(6, 1fr) !important;
}
.gap-0 {
	gap: 0 !important;
}
.gap-1 {
	gap: 0.25rem !important;
}
.gap-2 {
	gap: 0.5rem !important;
}
.gap-3 {
	gap: 1rem !important;
}
.gap-4 {
	gap: 1.5rem !important;
}
.gap-5 {
	gap: 3rem !important;
}
.vh25 {
	height: 25vh !important;
}
.vh50 {
	height: 50vh !important;
}
.vh75 {
	height: 75vh !important;
}
.vh100 {
	height: 100vh !important;
}
.w-100 {
	width: 100%;
}
.text-align-left {
	text-align: left;
	!important;
}
.text-align-center {
	text-align: center;
	!important;
}
.text-align-right {
	text-align: right;
	!important;
}
.line-height-1 {
	line-height: 1.1;
	!important;
}
.card {
	display: flex;
	flex-direction: column;
	border-radius: 0.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}
.card-hover:hover {
	transform: translateY(-0.125rem);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
}
.card-header, .card-footer {
	padding: var(--padding, 1rem) var(--padding, 1rem) 0;
	font-weight: 500;
}
.card-footer {
	padding: 0 var(--padding, 1rem) var(--padding, 1rem);
	border-bottom: none;
}
.card-body {
	padding: 0 var(--padding, 1rem);
	flex: 1;
}
.card-primary {
	border-color: var(--c-primary);
}
.card-secondary {
	border-color: var(--c-secondary);
}
.bento-card {
	position: relative;
	background: rgba(var(--g-c, var(--c-background)));
	transition: transform .3s ease, box-shadow .3s ease;
	border: 1px solid rgba(var(--g-c, var(--c-text)), .15);
	border-radius: 1rem;
	box-shadow: 0 .5rem 1rem .5rem rgba(var(--c-background), .5);
}
.bento-card:hover {
	border-color: rgba(var(--c-secondary), .65);
	/*transform: translateY(-2px);*/
}
.bento-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.04), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
	border-radius: inherit;
}
.bento-card:hover::before {
	opacity: 1;
}
@media (max-width: 768px) {
	.bento-card {
		background: unset;
		backdrop-filter: unset;
		-webkit-backdrop-filter: unset;
		transition: unset;
		border: unset;
		border-radius: unset;
		box-shadow: unset;
	}
}
.mini-card {
	position: relative;
	--padding: .5rem;
	--background: rgb(var(--c-background));
	--border: 1px solid rgb(var(--c-text), .75);
	--border-radius: var(--spacer-2);
}
.mini-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: red;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
.mini-card.success {
	--mc-background: rgb(var(--c-success), .25);
	--mc-color: rgb(var(--c-success));
}
.mini-card.warning {
	--mc-background: rgb(var(--c-warning), .25);
	--mc-color: rgb(var(--c-warning));
}
.mini-card.info {
	--mc-background: rgb(var(--c-info), .25);
	--mc-color: rgb(var(--c-info));
}
.mini-card.danger {
	--mc-background: rgb(var(--c-danger), .25);
	--mc-color: rgb(var(--c-danger));
}
.glass-card {
	--g-c: var(--c-background);
	background: rgba(var(--g-c, var(--c-background)), .65);
	backdrop-filter: blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
	border: 1px solid rgba(var(--g-c, var(--c-background)), 0.3);
	overflow: hidden;
}
.badge {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .15rem .25rem;
	font-size: .65rem;
	font-weight: 600;
	border-radius: .5rem;
	color: rgb(var(--c-text));
}
.badge.primary {
	background-color: var(--c-primary);
}
.badge.secondary {
	background-color: var(--c-secondary);
}
.badge.tertiary {
	background-color: var(--c-tertiary);
}
.badge.success {
	background-color: rgb(var(--c-success));
}
.badge.danger {
	background-color: rgb(var(--c-danger));
}
.badge.warning {
	background-color: rgb(var(--c-warning));
}
.badge.info {
	background-color: rgb(var(--c-info));
}
.badge.upper {
	position: absolute;
	top: .25rem;
	right: .25rem;
	z-index: 1;
}
.btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	border: unset;
	border-radius: var(--border-radius);
	color: rgb(var(--c-text), .8);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.btn:hover {
	border-color: rgb(var(--c-text), .9);
	color: rgb(var(--c-text), .9);
	background: rgb(var(--c-text), .2);
}
.btn:active {
	color: rgb(var(--c-text), 1);
	background: rgb(var(--c-text), .5);
}
/* Variantes de color */

.btn-primary {
	background-color: rgb(var(--c-primary)) !important;
	border-color: rgb(var(--c-primary)) !important;
}
.btn-secondary {
	background-color: rgb(var(--c-secondary));
	border-color: rgb(var(--c-secondary));
}
.btn-success {
	background-color: rgb(var(--c-success));
	border-color: rgb(var(--c-success));
}
.btn-danger {
	background-color: rgb(var(--c-danger));
	border-color: rgb(var(--c-danger));
}
.btn-warning {
	background-color: rgb(var(--c-warning));
	border-color: rgb(var(--c-warning));
	color: #000;
}
.btn-info {
	background-color: rgb(var(--c-info));
	border-color: rgb(var(--c-info));
}
.btn-light {
	background-color: rgb(var(--c-light));
	border-color: rgb(var(--c-light));
	color: #000;
}
.btn-dark {
	background-color: rgb(var(--c-dark));
	border-color: rgb(var(--c-dark));
}
/* Botones contorneados (outline) */

.btn-outline {
	border: 1px solid rgb(var(--c-text));
}
.btn-outline-primary {
	color: rgb(var(--c-primary));
	background-color: transparent;
	border-color: rgb(var(--c-primary));
}
.btn-outline-secondary {
	color: rgb(var(--c-secondary));
	background-color: transparent;
	border-color: var(--c-secondary);
}
.btn-outline-tertiary {
	color: var(--c-tertiary);
	background-color: transparent;
	border-color: var(--c-tertiary);
}
.btn-outline-success {
	color: var(--c-success);
	background-color: transparent;
	border-color: var(--c-success);
}
.btn-outline-danger {
	color: var(--c-danger);
	background-color: transparent;
	border-color: var(--c-danger);
}
.btn-outline-warning {
	color: var(--c-warning);
	background-color: transparent;
	border-color: var(--c-warning);
}
.btn-outline-info {
	color: var(--c-info);
	background-color: transparent;
	border-color: var(--c-info);
}
.btn-outline-light {
	color: var(--c-light);
	background-color: transparent;
	border-color: var(--c-light);
}
.btn-outline-dark {
	color: var(--c-dark);
	background-color: transparent;
	border-color: var(--c-dark);
}
.btn-outline-primary:hover {
	background-color: rgb(var(--c-primary));
	color: #fff;
}
.btn-outline-secondary:hover {
	background-color: rgb(var(--c-secondary));
	color: #fff;
}
.btn-outline-success:hover {
	background-color: rgb(var(--c-success));
	color: #fff;
}
.btn-outline-danger:hover {
	background-color: rgb(var(--c-danger));
	color: #fff;
}
.btn-outline-warning:hover {
	background-color: rgb(var(--c-warning));
	color: #000;
}
.btn-outline-info:hover {
	background-color: rgb(var(--c-info));
	color: #fff;
}
.btn-outline-light:hover {
	background-color: rgb(var(--c-light));
	color: #000;
}
.btn-outline-dark:hover {
	background-color: rgb(var(--c-dark));
	color: #fff;
}
/* Tamaños */

.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}
.btn-lg {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
}
/* Bloque completo */

.btn-block {
	display: block;
	width: 100%;
}
/* Variantes de color */

.btn-primary:hover {
	background-color: rgba(var(--c-primary), 0.75);
}
.btn-secondary:hover {
	background-color: rgba(var(--c-secondary), 0.75);
}
.btn-tertiary:hover {
	background-color: rgba(var(--c-tertiary), 0.75);
}
.btn.active {
	background: rgb(var(--c-primary), .1);
}
.btn:hover, .btn:focus-visible {
	/*filter: brightness(80%);*/
	outline: none;
}
.btn:active {
	transform: scale(0.97);
}
.btn:disabled {
	opacity: 0.6;
	pointer-events: none;
}
.btn:hover {
	background-color: rgb(var(--c-text), .15);
}
.btn>.tki {
	vertical-align: middle;
}
.bento {
	background-image: linear-gradient(to right, rgba(var(--c-primary)) 0%, rgba(var(--c-secondary)) 51%);
	transition: all 0.3s ease 0s !important;
	background-size: 200% auto;
}
.bento:hover {
	background: linear-gradient(to right, rgba(var(--c-primary)) 0%, rgba(var(--c-secondary)) 81%);
}
/* ========================================
	 UTILIDADES TIPOGRÁFICAS
	 ======================================== */

/* Alineación de texto */

.text-start {
	text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.text-end {
	text-align: right !important;
}
.text-justify {
	text-align: justify !important;
}
/* Transformación de texto */

.text-lowercase {
	text-transform: lowercase !important;
}
.text-uppercase {
	text-transform: uppercase !important;
}
.text-capitalize {
	text-transform: capitalize !important;
}
/* Peso y estilo de fuente */

.fw-light {
	font-weight: 300 !important;
}
.fw-normal {
	font-weight: 400 !important;
}
.fw-medium {
	font-weight: 500 !important;
}
.fw-bold {
	font-weight: 700 !important;
}
.fw-bolder {
	font-weight: 900 !important;
}
.fst-italic {
	font-style: italic !important;
}
.fst-normal {
	font-style: normal !important;
}
/* Truncamiento de texto */

.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Tamaños de fuente */

.fs-1 {
	font-size: 2.5rem;
}
.fs-2 {
	font-size: 2rem;
}
.fs-3 {
	font-size: 1.75rem;
}
.fs-4 {
	font-size: 1.5rem;
}
.fs-5 {
	font-size: 1.25rem;
}
.fs-6 {
	font-size: 1rem;
}
.fs-7 {
	font-size: .85rem;
}
.fs-8 {
	font-size: .7rem;
}
.fs-9 {
	font-size: .55rem;
}
/* Colores de texto */

/* Brand */

.brand {
	width: auto;
	max-width: 15rem;
	margin: auto;
}
.brand.brand-h {
	aspect-ratio: 3 / 1;
}
.brand.brand-v {
	aspect-ratio: 1 / 1;
}
.brand.icon {
	width: unset;
	aspect-ratio: 1 / 1;
}
.kui-theme-dark .brand-h-p {
	content: url("/static/logo/brand-h-s.png");
}
.kui-theme-dark .brand-h-s {
	content: url("/static/logo/brand-h-p.png");
}
.kui-theme-dark .brand-h-w {
	content: url("/static/logo/brand-h-b.png");
}
.kui-theme-dark .brand-h-b {
	content: url("/static/logo/brand-h-w.png");
}
.kui-theme-dark .brand-v-p {
	content: url("/static/logo/brand-v-s.png");
}
.kui-theme-dark .brand-v-s {
	content: url("/static/logo/brand-v-s.png");
}
.kui-theme-dark .brand-v-w {
	content: url("/static/logo/brand-v-b.png");
}
.kui-theme-dark .brand-v-b {
	content: url("/static/logo/brand-v-w.png");
}
.kui-input:hover, .kui-select:hover {
	border-color: rgb(var(--c-primary), .6);
}
.kui-input:focus-visible, .kui-select:focus-visible {
	box-shadow: 0 0 0 .2rem rgb(var(--c-primary), .25);
}
/*.auth.signin {
	height: 100%;
}

.auth.signin>.card {
	height: 100%;
}
*/

.auth-form {
	padding: 1rem;
	text-align: initial;
}
.auth-form>.header>.title {
	font-size: 1.5rem;
}
.auth-form>.header>.steps {
	gap: 1rem;
}
.auth-form>.header>.steps>.step {
	flex: 1;
}
.auth-form>.header>.steps>.step>.icon {
	font-size: 1.5rem;
}
.auth-form>.header>.steps>.step>.title {
	display: none;
}
.auth-form>.header>.steps>.step:not(:last-child)::after {
	width: 1rem;
}
.auth-form>.header>.bar {
	margin: 0 1rem;
}
.auth-form>.forms {
	min-height: 8rem;
}
.auth-form>.buttons {
	margin: 1rem 0 0;
}
.auth-form>.buttons>.btn {
	font-size: .8rem;
	gap: .25rem;
}/* =========================================================
	 kui layout — shell (dashboard / header / aside / content)
	 Ver: app/docs/css.md para documentación completa.
	 ========================================================= */

/* ---------- kui-dashboard ---------- */

kui-dashboard {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: var(--sidebar-width) 15rem 1fr 16rem;
	grid-template-rows: 5rem 1fr 5rem;
	grid-template-areas: "brand header cards user" "aside content content content" "aside content content content";
	width: 100%;
	height: 100%;
	/*margin: var(--space-grid);*/
	/*	width: calc(100% - (2 * var(--space-grid)));
	height: calc(100% - (2 * var(--space-grid)));
	margin: var(--space-grid);*/
	padding: var(--space-grid);
	background: rgb(var(--c-background));
	overflow: hidden;
	transition: grid-template-columns 0.3s ease;
}
/*kui-dashboard {
	background-image: url(/images/bg2.webp);
	background-position: center;
	background-size: cover;
}
kui-dashboard::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(var(--c-background), .95);
	backdrop-filter: blur(.1rem);
	pointer-events: none;
	z-index: 0;
}*/

/* Mantiene el velo decorativo detrás de todas las áreas del dashboard. */

kui-brand, kui-user, kui-header, kui-cards, kui-aside, kui-content {
	position: relative;
	z-index: 1;
}
/* Las áreas de control permanecen operables cuando kui-content.full ocupa el grid. */

kui-brand, kui-user, kui-header, kui-cards, kui-aside {
	z-index: 20;
}
/*
*/

/* Anchos del aside según el modo (normal por defecto) */

kui-dashboard.mode-normal {
	--sidebar-width: 18rem;
	--space-grid: 1rem;
	--border-radius: 1rem;
}
kui-dashboard.mode-condensed {
	--sidebar-width: 8rem;
	--space-grid: .5rem;
	--border-radius: .5rem;
}
kui-dashboard.mode-minimal {
	--sidebar-width: 5rem;
	--space-grid: .25rem;
	--border-radius: .25rem;
}
/* Toggle de hamburguesa en desktop: colapsa a solo iconos */

kui-dashboard.collapsed {
	grid-template-columns: 5rem 1fr;
}
@media (max-width: 1024px) {
	kui-dashboard {
		grid-template-areas: "brand header user" "aside cards cards" "aside content content" "aside content content";
	}
	kui-dashboard, kui-dashboard.mode-minimal, kui-dashboard.mode-condensed, kui-dashboard.mode-normal {
		grid-template-columns: var(--sidebar-width) auto 16rem !important;
		grid-template-rows: 4rem 5rem 6rem 1fr;
		--space-grid: .25rem;
		--border-radius: .5rem;
	}
}
@media (max-width: 820px) {
	kui-dashboard {
		/*		grid-template-columns: 1fr 1fr;
		grid-template-rows: 5rem 1fr 5rem;*/
		grid-template-areas: "brand user" "header header" "cards cards" "content content";
	}
	/* En móvil el aside es panel fijo: se ignora mode/collapsed y el grid es 1 columna */
	kui-dashboard, kui-dashboard.mode-minimal, kui-dashboard.mode-condensed, kui-dashboard.mode-normal {
		grid-template-columns: auto 16rem !important;
		grid-template-rows: 4rem 3rem 6rem 1fr;
		--space-grid: .25rem;
		--border-radius: .5rem;
	}
}
kui-brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--c-text), .1);
	overflow: hidden;
	margin: 0 var(--space-grid) 0 0;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}
kui-brand>.logo {
	display: flex;
	place-items: center;
	flex: 0 0 auto;
	transition: width 0.3s ease, height 0.3s ease;
	cursor: pointer;
	background: transparent;
	border: unset;
	width: unset;
	height: unset;
}
kui-brand>.logo>img {
	overflow: hidden;
}
kui-brand>.toggle {
	display: none;
}
kui-dashboard.mode-minimal kui-brand {
	flex: 0 0 var(--sidebar-minimal);
}
kui-dashboard.mode-condensed kui-brand {
	flex: 0 0 var(--sidebar-condensed);
}
kui-dashboard.mode-minimal kui-brand>.logo>img, kui-dashboard.mode-condensed kui-brand>.logo>img {
	content: url("/static/logo/icon.png") !important;
	aspect-ratio: 1;
	width: 4rem;
	height: auto;
}
@media (max-width: 820px) {
	kui-brand {
		margin: 0 var(--space-grid) var(--space-grid) 0;
		border-radius: var(--border-radius);
	}
	kui-brand>.toggle {
		display: grid;
	}
}
@media (max-width: 576px) {
	kui-brand>.logo>img {
		content: url("/static/logo/icon.png") !important;
		aspect-ratio: 1;
		width: 3rem;
		height: auto;
	}
}
.kui-theme-dark kui-brand>.logo>img {
	content: url("/static/logo/brand-h-s.png");
}
/* ---------- kui-user ---------- */

kui-user {
	grid-area: user;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	margin: 0 0 0 var(--space-grid);
	background: rgb(var(--c-primary), .5);
	border-radius: var(--border-radius);
}
kui-user>.group {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;
	padding: 1rem;
}
kui-user>.group>.btn {
	padding: .5rem;
	width: 3rem;
	height: 3rem;
	/*color: rgb(var(--c-text), .8);*/
}
kui-user>.group>.btn:hover {
	/*color: rgb(var(--c-text), .9);*/
	/*background: inherit;*/
}
kui-user>.group>.btn:active {
	/*color: rgb(var(--c-text), 1);*/
	/*background: inherit;*/
}
kui-user>.group>.btn>i {
	font-size: 1.25rem;
}
@media (max-width: 820px) {
	kui-user {
		margin: 0 0 var(--space-grid);
	}
}
kui-dashboard.mode-minimal kui-aside {}
kui-dashboard.mode-condensed kui-aside {}
/* ---------- kui-header ---------- */

kui-header {
	grid-area: header;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	/*background: rgb(var(--c-surface));*/
	background: rgb(var(--c-text), .1);
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	padding: 1rem;
	gap: .25rem;
}
kui-header>h1 {
	width: 100%;
	margin: 0;
	font-size: 1.1rem;
	line-height: 1;
}
kui-header>p {
	width: 100%;
	font-size: .7rem;
	line-height: 1.1;
	opacity: .65;
	margin: 0;
}
@media (max-width: 820px) {
	kui-header {
		justify-content: flex-start;
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		flex-direction: row;
		gap: .5rem;
		align-items: center;
	}
	kui-header>h1 {
		flex: 0 0 35%;
	}
	kui-header>p {
		line-height: 2;
	}
}
@media (max-width: 576px) {
	kui-header {
		padding: 1rem .5rem;
	}
	kui-header>h1 {}
	kui-header>p {
		line-height: 1.3;
	}
}
/* ---------- kui-cards ---------- */

kui-cards {
	grid-area: cards;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: rgb(var(--c-text), .1);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	overflow: hidden;
}
kui-cards>.card {
	flex: 1;
	max-width: 8rem;
}
kui-cards>.card>.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .25rem;
}
kui-cards>.card .icon {
	padding: .25rem;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	/*display: grid;*/
	place-items: center;
	font-size: .7rem;
}
kui-cards>.card .icon {
	background: var(--mc-background);
	color: var(--mc-color);
}
kui-cards>.card .name {
	font-size: .6rem;
}
kui-cards>.card .data {
	font-size: 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
}
@media (max-width: 1024px) {
	kui-cards {
		margin: var(--space-grid) 0 0;
		border-radius: var(--border-radius);
		justify-content: space-around;
	}
}
@media (max-width: 820px) {
	kui-cards {
		justify-content: space-around;
		border-radius: 0 0 var(--border-radius) var(--border-radius);
		padding: 0 .5rem;
	}
	kui-cards>.card {
		gap: .5rem;
	}
	kui-cards>.card>.card-body {
		flex: unset;
	}
}
/* ---------- kui-aside ---------- */

kui-aside {
	grid-area: aside;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: .5rem 0;
	overflow-y: auto;
	transition: width .25s ease;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	background: rgb(var(--c-text), .1);
	margin: 0 var(--space-grid) 0 0;
	width: calc(100% - var(--space-grid));
	overflow-x: hidden;
	overflow-y: auto;
}
kui-aside>.nav-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	list-style: none;
	margin: 0;
}
kui-aside>.menu-helpers {
	flex: 0 0 auto;
}
kui-aside>.nav-list .nav-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: .75rem 2.5rem;
	background: transparent;
	border: none;
	color: rgb(var(--c-text));
	font-family: var(--font-family-base);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s, color 0.2s, flex-direction 0.3s ease, padding 0.3s ease, gap 0.3s ease;
}
kui-aside>.nav-list .nav-item:hover {
	background: rgb(var(--c-text), .1);
}
kui-aside>.nav-list .nav-item.active {
	background: rgb(var(--c-primary), .25);
	color: rgb(var(--c-primary));
	border-radius: 0;
	border-left: .25rem solid;
}
kui-aside>.nav-list .nav-item>.nav-icon {
	font-size: 1.25rem;
	flex: 0 0 1.25rem;
}
kui-aside>.nav-list .nav-item>.nav-label {
	white-space: nowrap;
}
/* Visibilidad de labels según modo */

/* Minimal: solo iconos */

kui-dashboard.mode-minimal kui-aside .nav-label, kui-dashboard.collapsed kui-aside .nav-label {
	display: none;
}
kui-dashboard.mode-minimal kui-aside .nav-item, kui-dashboard.collapsed kui-aside .nav-item {
	justify-content: center;
	padding: 0.75rem;
	aspect-ratio: 1;
}
/* Condensed: botones en forma vertical (icono arriba, label abajo) */

kui-dashboard.mode-condensed kui-aside .nav-item {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 0.375rem;
	text-align: center;
}
kui-dashboard.mode-condensed kui-aside .nav-label {
	font-size: 0.6875rem;
	white-space: normal;
	line-height: 1.1;
}
/* Backdrop del aside */

.nav-backdrop {
	position: fixed;
	inset: 0;
	backdrop-filter: var(--backdrop-filter);
	-webkit-backdrop-filter: var(--backdrop-filter);
	z-index: 1;
}
@media (max-width: 820px) {
	kui-aside {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 0;
		height: 100dvh;
		z-index: 60;
		background: unset;
		padding: 0;
		border-radius: unset;
	}
	kui-dashboard.nav-open kui-aside {
		width: 100dvw;
	}
	kui-aside>.nav-list {
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
		width: 15rem;
		background: rgb(var(--c-surface));
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 2;
		padding: 2rem 0;
	}
	kui-dashboard.nav-open kui-aside>.nav-list {
		transform: translateX(0);
	}
}
/* ---------- kui-content ---------- */

kui-content {
	grid-area: content;
	display: block;
	padding: 0;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
	background: rgb(var(--c-text), .1);
	margin: var(--space-grid) 0 0 0;
	height: calc(100% - var(--space-grid));
	border-radius: var(--border-radius);
}
kui-content.welcome {
	flex-direction: column;
}
kui-content.auth {
	grid-row-start: brand;
	grid-row-end: content;
	grid-column-start: aside;
	grid-column-end: content;
	position: relative;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: unset;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 10;
}
kui-content.auth>* {
	height: 100%;
}
kui-content.auth>.welcome {
	flex: 60%;
	padding: 1rem;
}
kui-content.auth>.welcome>.content {
	padding: 1rem;
	height: 100%;
	/*background: rgb(var(--c-text), .2);*/
	border-radius: 1rem;
	background: linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%);
}
kui-content.auth>.card {
	flex: 40%;
	align-items: center;
	overflow-y: auto;
	overflow-x: hidden;
}
kui-content.auth>.card>.card-body {
	max-width: 30rem;
	display: flex;
	align-items: center;
}
@media (max-width: 992px) {
	kui-content.auth {
		grid-row-start: brand;
		grid-row-end: content;
		grid-column-start: cards;
		grid-column-end: content;
		flex-direction: column;
	}
	kui-content.auth>.welcome {
		flex: unset;
		height: unset;
	}
}
@media (max-width: 520px) {
	kui-content.auth {
		grid-row-start: brand;
		grid-row-end: content;
		grid-column-start: content;
		grid-column-end: content;
		flex-direction: column;
	}
}
/* ---------- kui-content ---------- */

kui-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--c-background));
	z-index: 100;
	font-size: 3rem;
}
kui-loader>.kui-spinner {
	font-size: 3rem;
}
.kui-dialog.kui-drawer {
	--kui-drawer-size: 24rem;
}
.kui-dialog.kui-drawer {
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
}
.kui-drawer::backdrop {
	backdrop-filter: var(--backdrop-filter);
	-webkit-backdrop-filter: var(--backdrop-filter);
}
.drawer-profile {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.drawer-profile-header {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.drawer-profile-info {
	min-width: 0;
}
.drawer-profile-info h3 {
	margin: 0 0 .25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.drawer-profile-info span, .drawer-profile-public p {
	color: rgb(var(--c-text), .65);
}
.drawer-profile-public {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.drawer-profile-public p {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
}
.profile-public-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: .5rem;
	padding: .375rem .625rem;
	border-radius: 999px;
	background: rgb(var(--c-primary), .12);
	color: rgb(var(--c-primary));
	font-size: .75rem;
	font-weight: 600;
}
.drawer-profile-actions .kui-btn {
	width: 100%;
}
@media (max-width: 1024px) {
	.kui-dialog.kui-drawer {
		--kui-drawer-size: 50vw;
	}
}
@media (max-width: 820px) {
	.kui-dialog.kui-drawer {
		--kui-drawer-size: 75vw;
	}
}
/* =========================================================
	 Search button (header) + Command Palette (modal)
	 ========================================================= */

.kui-dialog.kui-d-search {
	width: min(35rem, 92vw);
	max-height: 80vh;
	border-radius: 1rem;
	background: rgb(var(--c-background));
	border: 1px solid rgb(var(--c-text), .2);
	color: rgb(var(--c-text));
}
.kui-d-search > .kui-dialog-header {
	padding: 0;
	border-bottom: none;
}
.kui-d-search::backdrop {
	backdrop-filter: var(--backdrop-filter);
	-webkit-backdrop-filter: var(--backdrop-filter);
}
.kui-d-search > .kui-dialog-body {
	padding: 0 0.875rem 0.875rem;
}
.header-search-btn {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: 2.625rem;
	padding: 0 0.75rem 0 0.875rem;
	min-width: 17.5rem;
	background: rgb(var(--c-background));
	border: 1px solid rgb(var(--c-text), .2);
	border-radius: var(--border-radius);
	color: rgb(var(--c-text), .5);
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.header-search-btn:hover {
	border-color: rgb(var(--c-outline), .5);
	background: rgb(var(--c-surface));
}
.header-search-btn .header-icon {
	font-size: 1rem;
	color: rgb(var(--c-text), .2);
}
.search-btn-text {
	flex: 1;
	text-align: left;
}
.search-kbd {
	font-family: var(--font-family-base);
	font-size: 0.6875rem;
	color: rgb(var(--c-text));
	background: rgb(var(--c-background));
	border: 1px solid rgb(var(--c-text), .2);
	border-radius: 0.375rem;
	padding: 0.125rem 0.375rem;
	line-height: 1;
}
/* Palette input */

.search-palette-input-wrap {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.25rem 0.875rem;
	border-bottom: 1px solid rgb(var(--c-text), .2);
	margin-bottom: 0.5rem;
}
.search-palette-icon {
	font-size: 1.125rem;
	color: rgb(var(--c-text), .75);
	flex: 0 0 auto;
}
.search-palette-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font: inherit;
	font-size: 0.9375rem;
	color: rgb(var(--c-text));
}
.search-palette-input::placeholder {
	color: rgb(var(--c-text), .75);
}
/* Results */

.search-results {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}
.search-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.search-group-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025rem;
	color: rgb(var(--c-text), .75);
	;
	padding: 0 0.375rem 0.375rem;
}
.search-group-icon {
	font-size: 0.8125rem;
}
.search-result {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	border-radius: 0.625rem;
	background: transparent;
	color: rgb(var(--c-text));
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.search-result:hover {
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
}
.search-result-icon {
	font-size: 1.0625rem;
	color: rgb(var(--c-text), .75);
	flex: 0 0 auto;
}
.search-result-label {
	flex: 1;
}
.search-result-hint {
	font-size: 0.75rem;
	color: rgb(var(--c-text), .75);
}
.search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 0;
	color: rgb(var(--c-text), .75);
	text-align: center;
}
.search-empty-icon {
	font-size: 1.75rem;
}
.settings-panel {}
.settings-section {
	margin-bottom: 1.625rem;
}
.settings-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: rgb(var(--c-text));
	margin-bottom: 0.375rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.settings-title::before {
	content: "";
	width: 0.1875rem;
	height: 1rem;
	background: rgb(var(--c-primary));
	border-radius: 0.125rem;
}
.settings-desc {
	font-size: 0.8125rem;
	color: rgb(var(--c-text), .75);
	margin-bottom: 0.875rem;
}
@media (max-width: 520px) {
	/* Drawer de settings: apila el segmented y los modos en móvil */
	.sidebar-mode-options {
		grid-template-columns: repeat(3, 1fr);
	}
	.settings-section .kui-radio-group {
		flex-wrap: wrap;
	}
	.settings-section .kui-radio-wrapper {
		flex: 1 1 100%;
	}
	/* En móvil no se puede cambiar el modo del aside: ocultar esa sección */
	.settings-section--sidebar {
		display: none;
	}
}
.notif-panel {
	width: 20rem;
	padding: 0.25rem 0;
	--spacing: .5rem;
}
.notif-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 1rem 0;
}
.notif-header span {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgb(var(--c-text));
}
.notif-list {
	max-height: 17.5rem;
	overflow-y: auto;
}
.notif-list>.notif-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: .5rem;
	transition: background 0.2s;
}
.notif-list>.notif-item:hover {
	background: rgb(var(--c-background));
}
.notif-list>.notif-item>.notif-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgb(var(--c-primary));
	margin-top: 0.3125rem;
	flex: 0 0 0.5rem;
}
.notif-list>.notif-item>.notif-dot.read {
	background: rgb(var(--c-background));
}
.notif-list>.notif-item>.notif-content {
	flex: 1;
	min-width: 0;
}
.notif-list>.notif-item>.notif-content>.notif-title {
	font-size: 0.8125rem;
	color: rgb(var(--c-text));
	font-weight: 500;
}
.notif-list>.notif-item>.notif-content>.notif-time {
	font-size: 0.6875rem;
	color: rgb(var(--c-text), .75);
	margin-top: 0.125rem;
}
/* Los avisos usan la capa superior nativa, incluso dentro de un diálogo modal. */
.kui-toast[popover] {
	inset: var(--spacer-3) var(--spacer-3) auto auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgb(var(--c-text));
	width: max-content;
	max-width: calc(100vw - 2rem);
	overflow: visible;
}
.kui-toast[popover]:not(:popover-open) {
	display: none;
}

.welcome-progress > .kui-progress-bar { width: 25%; }
/*dashboard.css*/


/* ---------- dashboard grid ---------- */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	width: 100%;
}

/* Spans de las tarjetas dentro del grid de 12 columnas */
.dashboard-grid > .kpi-card { grid-column: span 3; }
.dashboard-grid > .chart-card--wide { grid-column: span 8; }
.dashboard-grid > .chart-card:not(.chart-card--wide) { grid-column: span 4; }

/* =========================================================
	 Responsive — shell / grid / header
	 ========================================================= */
@media (max-width: 1100px) {
	.dashboard-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 520px) {
	.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
	/* Drawer de settings: apila el segmented y los modos en móvil */
	.sidebar-mode-options { grid-template-columns: repeat(3, 1fr); }
	.settings-section .kui-fieldset { flex-wrap: wrap; }
	.settings-section .kui-radio-wrapper { flex: 1 1 100%; }
	/* En móvil no se puede cambiar el modo del aside: ocultar esa sección */
	.settings-section--sidebar { display: none; }
}

@media (max-width: 820px) {
	.dashboard-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
/* Explorer KUI: estructura visual conservada del prototipo y adaptada a los tokens del shell. */
.item .drag-handle { cursor: grab; }
.item .drag-handle:active { cursor: grabbing; }

kui-c-explorer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 7rem;
	grid-template-rows: minmax(18rem, 1fr) 3rem;
	grid-template-areas: "body tools" "footer footer";
	width: 100%;
	height: 100%;
	overflow: hidden;
}
@media (min-width: 769px) {
	kui-c-explorer.nav-open {
		grid-template-columns: 15rem minmax(0, 1fr) 6rem;
		grid-template-areas: "nav body tools" "footer footer footer";
	}
}
exp-loader {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--c-background));
	transition: opacity .3s ease;
}
exp-loader.finish {
	opacity: 0;
	pointer-events: none;
}
exp-navigator {
	grid-area: nav;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-right: 1px solid rgb(var(--c-text), .2);
}
@media (min-width: 769px) {
	kui-c-explorer:not(.nav-open) exp-navigator {
		display: none;
	}
}
/* Lista de tenants: filas legibles y sin la altura fija de los botones de herramientas. */
exp-navigator > .nav-tree {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .25rem;
	min-height: 0;
	padding: .5rem;
	background: rgb(var(--c-background));
	overflow-y: auto;
}
exp-tools {
	grid-area: tools;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: .25rem;
	padding: .25rem;
	border-left: 1px solid rgb(var(--c-text), .25);
}
exp-tools>.btn {
	width: 100%;
	height: auto;
	row-gap: .5rem;
	padding: .65rem .5rem;
	border: 1px solid transparent;
	border-radius: var(--spacer-2);
	background: transparent;
	color: rgb(var(--c-text));
	cursor: pointer;
	font: inherit;
}
exp-tools>.btn:hover {
	background: rgb(var(--c-light), .025);
	color: rgb(var(--c-primary), .75);
}
exp-tools>.btn.active {
	border-color: rgb(var(--c-primary));
	background: rgb(var(--c-primary), .25);
	color: rgb(var(--c-primary));
}
exp-tools>.btn i {
	font-size: 1.125rem;
}
exp-tools>.btn>.name {
	font-size: .55rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}
exp-body {
	grid-area: body;
	z-index: 1;
	overflow: auto;
}
exp-body>.empty-state {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	min-height: 18rem;
	padding: 1rem;
	color: rgb(var(--c-text), .75);
	text-align: center;
}
exp-body>.empty-state i {
	color: rgb(var(--c-text), .5);
	font-size: 3rem;
}
exp-body>.items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1rem;
	padding: 1rem;
	counter-reset: explorer-item;
}
exp-body>.items>.item {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	min-height: 5rem;
	margin: .25rem 0;
	padding: .35rem .5rem .35rem 5rem;
	overflow: visible;
	border: 1px solid rgb(var(--c-text), .2);
	border-radius: .5rem;
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	font: inherit;
	text-align: left;
	cursor: pointer;
	counter-increment: explorer-item;
	transition: border-color .25s, transform .25s, box-shadow .25s;
}
exp-body>.items>.item:not(.header):not(.selected):not(.highlighted):hover {
	border-color: rgb(var(--c-text), .4);
	box-shadow: 0 .25rem .5rem rgb(var(--c-dark), .1);
}
exp-body>.items>.item>.i {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: -.5rem .25rem .25rem;
	overflow: hidden;
	border: 1px solid rgb(var(--c-text), .2);
	border-radius: 1rem;
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	font-size: 2rem;
	font-weight: 500;
}
exp-body>.items>.item>.a, exp-body>.items>.item>.b, exp-body>.items>.item>.c {
	overflow: hidden;
	font-size: .8rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
exp-body>.items>.item>.a {
	color: rgb(var(--c-text));
	font-size: 1rem;
}
exp-body>.items>.item>.b {
	opacity: .75;
	font-weight: 400;
}
exp-body>.items>.item>.c, exp-body>.items>.item>.d {
	overflow: hidden;
	opacity: .5;
	font-size: .7rem;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
}
exp-body>.items>.item>.ss {
	--status-color: rgb(var(--c-text), .5);
	position: absolute;
	top: -.75rem;
	left: 0;
	width: .7rem;
	height: .7rem;
	padding: .15rem;
}
exp-body>.items>.item>.ss.a {
	--status-color: rgb(var(--c-success));
}
exp-body>.items>.item>.ss.d {
	--status-color: rgb(var(--c-warning));
}
exp-body>.items>.item>.ss.r, exp-body>.items>.item>.ss.s {
	--status-color: rgb(var(--c-danger));
}
exp-body>.items>.item>.ss::after {
	position: absolute;
	top: 0;
	left: 0;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--status-color);
	content: '';
}
exp-body>.items>.item.header {
	display: none;
}
exp-body>.items>.item.selected {
	border: 1px dashed rgb(var(--c-primary));
	background: rgb(var(--c-primary), .1);
}
exp-body>.items>.item.highlighted {
	background: rgb(var(--c-primary), .25);
}
exp-body.list-view>.items {
	grid-template-columns: 1fr;
}
exp-body.list-view>.items>.item {
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2rem;
	margin: 0;
	padding: .25rem;
}
exp-body.list-view>.items>.item>* {
	flex: 1 0 5rem;
	font-size: .8rem;
}
exp-body.list-view>.items>.item>.i {
	position: relative;
	inset: auto;
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	margin: 0;
}
exp-body.list-view>.items>.item>.ss {
	position: relative;
	top: auto;
	flex: 0 0 2rem;
}
exp-body.list-view>.items>.item>.ss::after {
	left: calc(50% - .35rem);
}
exp-body.list-view>.items>.item.header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	border-radius: 0;
	background: rgb(var(--c-background));
	text-transform: uppercase;
	cursor: default;
}
exp-body.list-view>.items>.item.header>* {
	height: auto;
	border: 0;
	background: transparent;
	font-size: .6rem;
	font-weight: 600;
}
exp-toolbars {
	position: absolute;
	right: 8rem;
	bottom: 4rem;
	z-index: 20;
	display: flex;
	height: 3rem;
	gap: .5rem;
}
exp-toolbars>.bar {
	display: flex;
	gap: .25rem;
}
exp-toolbars .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: var(--spacer-2);
	background: rgb(var(--c-primary));
	color: rgb(var(--c-light));
	cursor: pointer;
}
exp-toolbars .btn:hover {
	background: rgb(var(--c-primary), .9);
	transform: translateY(-var(--spacer-1));
}
exp-footer {
	grid-area: footer;
	border-top: 1px solid rgb(var(--c-text), .25);
}
exp-footer>.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	height: 100%;
}
exp-footer .btn {
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border: 1px solid rgb(var(--c-text), .1);
	border-radius: var(--spacer-2);
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	cursor: pointer;
	font: inherit;
	font-size: .8125rem;
}
exp-footer .btn:hover:not(:disabled) {
	border-color: rgb(var(--c-primary));
	color: rgb(var(--c-light));
}
exp-footer .btn.active {
	border-color: rgb(var(--c-primary), .25);
	background: rgb(var(--c-primary));
	color: rgb(var(--c-light));
}
exp-footer .btn:disabled {
	opacity: .4;
	cursor: default;
}
.explorer-details {
	display: grid;
	gap: .8rem;
}
.explorer-details>div {
	display: grid;
	grid-template-columns: minmax(7rem, .45fr) 1fr;
	gap: 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--spacer-2);
}
.explorer-details small {
	color: rgb(var(--c-text), .75);
}
.kui-dialog.crud-modal {
	width: min(32rem, 92vw);
	max-height: 85vh;
	border: 1px solid rgb(var(--c-text), .2);
	border-radius: 1rem;
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
}
.crud-form {
	display: flex;
	flex-direction: column;
	gap: .875rem;
}
.explorer-tags, .explorer-tags .tag-create {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.explorer-tags .tag-row {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.explorer-tags .tag-row .tag-toggle {
	flex: 1;
	min-width: 0;
}
.explorer-tags .tag-row .tag-toggle {
	white-space: normal;
	overflow-wrap: anywhere;
}
.explorer-tags .tags-error {
	color: rgb(var(--c-danger));
}
.explorer-record header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.explorer-record h2 {
	margin: 0;
	font-size: 1.25rem;
	overflow-wrap: anywhere;
}
.explorer-record dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.explorer-record dl > .wide {
	grid-column: 1 / -1;
}
.explorer-record dt {
	font-size: .8rem;
	color: rgb(var(--c-text), .65);
}
.explorer-record dd {
	margin: .25rem 0 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
@media (max-width: 520px) {
	.explorer-record dl { grid-template-columns: minmax(0, 1fr); }
}
.crud-confirm {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: .75rem;
	padding: .5rem 0;
	text-align: center;
}
.crud-confirm .crud-warn {
	color: rgb(var(--c-primary));
	font-size: 2.25rem;
}
@media (max-width: 768px) {
	kui-c-explorer {
		grid-template-columns: minmax(0, 1fr) 4rem;
		grid-template-rows: minmax(18rem, 1fr) 3rem;
	}
	exp-tools>.btn {
		justify-content: center;
		aspect-ratio: 1;
	}
	exp-tools>.btn>.name {
		display: none;
	}
	exp-body>.items {
		grid-template-columns: 1fr;
		padding: .75rem .5rem .5rem;
	}
	exp-body.list-view>.items {
		width: 250%;
	}
	exp-toolbars {
		right: 5rem;
	}
	exp-navigator {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 30;
		width: 15rem;
		height: calc(100% - 3rem);
		box-shadow: .5rem 0 1rem rgba(0, 0, 0, .1);
	}
	exp-navigator:not(.open) {
		pointer-events: none;
		opacity: 0;
		transform: translateX(-100%);
	}
}

exp-navigator .navigator-groups {
	display: flex;
	flex-direction: column;
	gap: .375rem;
}
exp-navigator .navigator-group {
	min-width: 0;
}
exp-navigator .navigator-group > summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	min-height: 2.5rem;
	padding: .5rem .625rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .875rem;
	font-weight: 600;
	color: rgb(var(--c-text), .8);
}
exp-navigator .navigator-group > summary::-webkit-details-marker {
	display: none;
}
exp-navigator .navigator-group > summary:hover {
	background: rgb(var(--c-text), .06);
}
exp-navigator .navigator-group > summary > i {
	flex: 0 0 auto;
	font-size: 1.125rem;
}
exp-navigator .navigator-group > summary > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
exp-navigator .navigator-group > summary > small {
	margin-left: auto;
	color: rgb(var(--c-text), .55);
}
exp-navigator .navigator-children {
	margin-left: .625rem;
	padding-left: .375rem;
	border-left: 1px solid rgb(var(--c-text), .2);
}
exp-navigator .nav-tree .navigator-item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-start;
	gap: .625rem;
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	height: auto;
	padding: .625rem .75rem;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	font: inherit;
	font-size: .875rem;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	color: rgb(var(--c-text), .8);
	background: transparent;
}
exp-navigator .navigator-item > i {
	flex: 0 0 auto;
	font-size: 1.125rem;
	line-height: 1;
}
exp-navigator .navigator-item > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
exp-navigator .nav-tree .navigator-item:hover:not(:disabled) {
	background: rgb(var(--c-text), .06);
	color: rgb(var(--c-text));
}
exp-navigator .nav-tree .navigator-item.active {
	border-color: rgb(var(--c-primary), .25);
	background: rgb(var(--c-primary), .12);
	color: rgb(var(--c-primary));
	font-weight: 600;
}
exp-navigator .navigator-item:focus-visible {
	outline: 2px solid rgb(var(--c-primary));
	outline-offset: -2px;
}
exp-navigator .navigator-item:disabled {
	cursor: wait;
	opacity: .6;
}

/* Controles visuales reservados para futuras acciones de categorías. */
exp-navigator .navigator-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .25rem .75rem;
	font-size: .875rem;
	color: rgb(var(--c-text), .8);
}
exp-navigator .navigator-header-actions {
	display: flex;
	gap: .125rem;
	flex-shrink: 0;
}
exp-navigator .navigator-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--border-radius);
	background: transparent;
	color: rgb(var(--c-text), .65);
	font-size: 1.125rem;
	cursor: default;
}
exp-navigator .navigator-control:hover {
	background: rgb(var(--c-text), .06);
}
exp-navigator .navigator-control:focus-visible {
	outline: 2px solid rgb(var(--c-primary));
	outline-offset: -2px;
}
exp-navigator .navigator-row {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
}
exp-navigator .navigator-row:has(.navigator-category-options) .navigator-item {
	padding-right: 2.75rem;
}
exp-navigator .navigator-category-options {
	position: absolute;
	top: 50%;
	right: .375rem;
	transform: translateY(-50%);
	opacity: 0;
}
exp-navigator .navigator-row:hover .navigator-category-options,
exp-navigator .navigator-row:focus-within .navigator-category-options {
	opacity: 1;
}
@media (hover: none), (pointer: coarse) {
	exp-navigator .navigator-category-options {
		opacity: 1;
	}
}










.app-navigation-list { display: flex; flex-direction: column; gap: .6rem; }
.app-navigation-row { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid rgb(var(--c-border)); border-radius: .6rem; }
.app-navigation-row .i { cursor: grab; touch-action: none; }
.app-navigation-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-navigation-name small { opacity: .7; overflow-wrap: anywhere; }







#sc-account .sidebar {
	display: flex;
	gap: .5rem;
	margin: 1rem;
}
#sc-account .sidebar>.btn {
	border: 1px solid rgb(var(--c-primary));
	flex: 1 1 5rem;
	/*height: 5rem;*/
	padding: .5rem;
	aspect-ratio: unset;
}
#sc-account .sidebar>.btn>.title {
	text-transform: uppercase;
	font-size: .65rem;
}

#sc-account .scheme {
	display: flex;
	gap: .5rem;
	margin: 1rem;
}
#sc-account .scheme>.btn {
	border: 1px solid rgb(var(--c-primary));
	flex: 1 1 5rem;
	aspect-ratio: unset;
}
#sc-account .scheme>.btn>.title {
	text-transform: uppercase;
	font-size: .65rem;
}
#sc-account .scheme_checkbox {
	position: relative;
	width: 100%;
	padding: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 992px) {
	#sc-account .sidebar {
		display: none;
	}
}

#sc-search .modal-dialog>.tki.search {
	flex: none;
}
#sc-search .modal-dialog>input {
	flex: 1;
}

#sc-account .sidebar {
	display: flex;
	gap: .5rem;
	margin: 1rem;
}
#sc-account .sidebar>.btn {
	border: 1px solid rgb(var(--c-primary));
	flex: 1 1 5rem;
	/*height: 5rem;*/
	padding: .5rem;
	aspect-ratio: unset;
}
#sc-account .sidebar>.btn>.title {
	text-transform: uppercase;
	font-size: .65rem;
}

#sc-account .scheme {
	display: flex;
	gap: .5rem;
	margin: 1rem;
}
#sc-account .scheme>.btn {
	border: 1px solid rgb(var(--c-primary));
	flex: 1 1 5rem;
	aspect-ratio: unset;
}
#sc-account .scheme>.btn>.title {
	text-transform: uppercase;
	font-size: .65rem;
}
#sc-account .scheme_checkbox {
	position: relative;
	width: 100%;
	padding: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 992px) {
	#sc-account .sidebar {
		display: none;
	}
}

/* La presentación utiliza los estilos compartidos de Explorer. */

/* La presentación utiliza los estilos compartidos de Explorer. */




#modFormBuilder {
	display: block;
}


#modFormBuilder {
	display: block;
}


.modal.offcanvas.oc-ai {
	position: fixed;
	bottom: -20rem;
	left: calc(50% - 12rem);
	width: 24rem;
	height: unset;
	margin: 2rem 0 0 0;
}
.modal.offcanvas.oc-ai>.modal-dialog {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: .5rem 1rem;
	border-radius: 1rem;
}
.modal.offcanvas.oc-ai>.modal-dialog>.tki {
	color: rgb(var(--c-primary));
	font-size: 1.6rem;
}
.modal.offcanvas.oc-ai>.modal-dialog>input {
	font-size: 1.4rem;
	background: transparent;
	border: transparent;
	color: rgb(var(--c-primary));
	caret-color: rgb(var(--c-primary));
}
.modal.offcanvas.oc-ai>.modal-dialog>input::placeholder {
	color: rgb(var(--c-text), .5);
	opacity: 1;
}
.modal.offcanvas.oc-ai>.modal-dialog>input:focus {
	border-color: unset;
	box-shadow: unset;
}
.modal.offcanvas.oc-ai.show {
	bottom: 0;
}

@media (max-width: 767px) {
	.modal.offcanvas.oc-ai {
		width: 22rem;
		left: calc(50% - 11rem);
	}
}
#modFormBuilder {
	display: block;
}