/* =========================================================
	 kui layout — shell (dashboard / header / aside / content)
	 Ver: app/docs/css.md para documentación completa.
	 ========================================================= */

/* ---------- kui-dashboard ---------- */
kui-dashboard {
	display: grid;
	grid-template-columns: var(--sidebar-width) 12rem 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);*/
	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;
	background: rgb(var(--c-background), .95);
	width: 100%;
	height: 100%;
	backdrop-filter: blur(.1rem);
	/*z-index: -1;*/
}
/*
*/

/* 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-light), .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(--kui-sidebar-minimal);
}

kui-dashboard.mode-condensed kui-brand {
	flex: 0 0 var(--kui-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-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: var(--sl-color-neutral-100);*/
	background: rgb(var(--c-light), .1);
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	padding: 1rem;
	gap: .25rem;
}
kui-header>h1 {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1;
}
kui-header>span {
	font-size: .7rem;
	line-height: 1;
}

@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;
	}
	kui-header>span {
		line-height: 2;
	}
}

/* ---------- kui-cards ---------- */
kui-cards {
	grid-area: cards;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: rgb(var(--c-light), .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;
	}
}






.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;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.btn:hover {
	/*border-color: var(--kui-text-muted);*/
	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);
}

/* ---------- 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-light), .1);
	margin: 0 var(--space-grid) 0 0;
	width: calc(100% - var(--space-grid));
	overflow-x: hidden;
	overflow-y: auto;

	scrollbar-width: thin;
}


kui-aside>.nav-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	list-style: none;
	margin: 0;
}
kui-aside>.nav-list .nav-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: .75rem 2.5rem;
	background: transparent;
	border: none;
	border-radius: 0.75rem;
	color: rgb(var(--c-text));
	font-family: var(--kui-font);
	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: var(--kui-surface-hover);
	color: var(--kui-text-main);
}
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: var(--sl-color-neutral-100);
		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-light), .1);*/
	margin: var(--space-grid) 0 0 0;
	height: calc(100% - var(--space-grid));
	border-radius: var(--border-radius);

	scrollbar-width: thin;
}
kui-content.full {
	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;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 10;
}

@media (max-width: 992px) {
	kui-content.full {
		grid-row-start: brand;
		grid-row-end: content;
		grid-column-start: cards;
		grid-column-end: content;
	}
}

@media (max-width: 520px) {
	kui-content.full {
		grid-row-start: brand;
		grid-row-end: content;
		grid-column-start: content;
		grid-column-end: content;
	}
}


/* ---------- 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>sl-spinner {
	--indicator-color: rgb(var(--c-primary));
	--track-color: rgb(var(--c-primary), .1);
}

.kui-drawer {
	--size: 24rem;
}
.kui-drawer::part(panel) {
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
}
.kui-drawer::part(overlay) {
	backdrop-filter: var(--backdrop-filter);
	-webkit-backdrop-filter: var(--backdrop-filter);
}

@media (max-width: 1024px) {
	.kui-drawer {
		--size: 50vw;
	}
}

@media (max-width: 820px) {
	.kui-drawer {
		--size: 75vw;
	}
}



/* =========================================================
	 Search button (header) + Command Palette (modal)
	 ========================================================= */
.kui-d-search::part(panel) {
	width: min(35rem, 92vw);
	max-height: 80vh;
	border-radius: 1rem;
	background: rgb(var(--c-background));
	border: 1px solid var(--kui-border);
	color: rgb(var(--c-text));
}
.kui-d-search::part(header) {
	padding: 0;
	border-bottom: none;
}
.kui-d-search::part(overlay) {
	backdrop-filter: var(--backdrop-filter);
	-webkit-backdrop-filter: var(--backdrop-filter);
}
.kui-d-search::part(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 var(--kui-border);
	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: var(--kui-border-strong);
	background: var(--kui-surface-hover);
}
.header-search-btn .header-icon { font-size: 1rem; color: var(--kui-text-faint); }
.search-btn-text { flex: 1; text-align: left; }
.search-kbd {
	font-family: var(--kui-font);
	font-size: 0.6875rem;
	color: var(--kui-text-faint);
	background: var(--kui-elevated);
	border: 1px solid var(--kui-border);
	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 var(--kui-border);
	margin-bottom: 0.5rem;
}
.search-palette-icon { font-size: 1.125rem; color: var(--kui-text-faint); 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: var(--kui-text);
}
.search-palette-input::placeholder { color: var(--kui-text-faint); }

/* 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: var(--kui-text-faint);
	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: var(--kui-text-main);
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.search-result:hover { background: var(--kui-surface-hover); color: var(--kui-text); }
.search-result-icon { font-size: 1.0625rem; color: var(--kui-text-muted); flex: 0 0 auto; }
.search-result-label { flex: 1; }
.search-result-hint { font-size: 0.75rem; color: var(--kui-text-faint); }

.search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 0;
	color: var(--kui-text-faint);
	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: var(--kui-text);
	margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.5rem;
}
.settings-title::before {
	content: "";
	width: 0.1875rem;
	height: 1rem;
	background: var(--kui-red);
	border-radius: 0.125rem;
}
.settings-desc { font-size: 0.8125rem; color: var(--kui-text-faint); 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 sl-radio-group { flex-wrap: wrap; }
	.settings-section sl-radio-button { flex: 1 1 100%; }
	/* En móvil no se puede cambiar el modo del aside: ocultar esa sección */
	.settings-section--sidebar { display: none; }
}





{
	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: var(--kui-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: var(--kui-surface-hover);
}
.notif-list>.notif-item>.notif-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--kui-red);
	margin-top: 0.3125rem;
	flex: 0 0 0.5rem;
}
.notif-list>.notif-item>.notif-dot.read {
	background: var(--kui-border);
}
.notif-list>.notif-item>.notif-content {
	flex: 1;
	min-width: 0;
}
.notif-list>.notif-item>.notif-content>.notif-title {
	font-size: 0.8125rem;
	color: var(--kui-text);
	font-weight: 500;
}
.notif-list>.notif-item>.notif-content>.notif-time {
	font-size: 0.6875rem;
	color: var(--kui-text-faint);
	margin-top: 0.125rem;
}