@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--rz-body-font-family, 'Roboto', 'Helvetica Neue', Arial, sans-serif);
	font-size: var(--rz-body-font-size, 14px);
	color: var(--rz-text-color);
	background-color: #f5f9fe;
	--rz-body-background-color: #f5f9fe;
}

h1:focus {
	outline: none;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHJlY3QgeD0iMjM1IiB5PSI1MSIgd2lkdGg9IjU2IiBoZWlnaHQ9IjQ5Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzNSAtNTEpIj48cGF0aCBkPSJNMjYzLjUwNiA1MUMyNjQuNzE3IDUxIDI2NS44MTMgNTEuNDgzNyAyNjYuNjA2IDUyLjI2NThMMjY3LjA1MiA1Mi43OTg3IDI2Ny41MzkgNTMuNjI4MyAyOTAuMTg1IDkyLjE4MzEgMjkwLjU0NSA5Mi43OTUgMjkwLjY1NiA5Mi45OTZDMJM5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

.blazor-error-boundary::after {
	content: "An error has occurred.";
}

/* ═══════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════ */

.app-shell {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

/* ── Header ── */
.app-header {
	height: 3.2rem;
	background: linear-gradient(90deg, #155ab0 0%, #1565c0 40%, #1976d2 100%);
	display: flex;
	align-items: center;
	padding: 0 0.5rem;
	gap: 1rem;
	position: sticky;
	top: 0;
	z-index: 200;
	flex-shrink: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}


.header-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.brand-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

.brand-logo {
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.brand-name {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.header-separator {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 300;
	font-size: 1rem;
}

.header-company {
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	margin-left: auto;
}

.user-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* ── Header actions (derecha) ── */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

.header-beta {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff59d;
	background: rgba(255, 235, 59, 0.18);
	border: 1px solid rgba(255, 235, 59, 0.45);
	border-radius: 20px;
	padding: 0.2rem 0.65rem;
	white-space: nowrap;
}

.header-notif {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.header-notif:hover {
	background: rgba(255, 255, 255, 0.22);
}

.header-notif .material-symbols-outlined {
	font-size: 1.3rem;
}

/* ── Header user menu ── */
.header-user-menu {
	position: relative;
}

.header-user-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.65rem 0.3rem 0.75rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.header-user-btn:hover,
.header-user-menu.open .header-user-btn {
	background: rgba(255, 255, 255, 0.22);
}

.header-chevron {
	font-size: 1.1rem;
	opacity: 0.8;
	transition: transform 0.2s;
}

.header-user-menu.open .header-chevron {
	transform: rotate(180deg);
}

.header-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: linear-gradient(90deg, #dce8f8 0%, #e8f2fc 45%, #f0f6fd 100%);
	border: 1px solid #b3d0f0;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	z-index: 200;
	padding: 0.3rem 0;
	overflow: hidden;
}

.header-user-menu.open .header-dropdown {
	display: block;
}

.header-dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0 1.1rem;
	height: 2.4rem;
	background: none;
	border: none;
	color: #1a3d6b;
	font-size: 0.9rem;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: background 0.1s;
	white-space: nowrap;
}

.header-dropdown-item:hover {
	background: rgba(26, 61, 107, 0.1);
}

.header-dropdown-item .material-symbols-outlined {
	font-size: 1.15rem;
	opacity: 0.7;
}

.header-dropdown-item--danger {
	color: #c62828;
}

.header-dropdown-item--danger:hover {
	background: rgba(198, 40, 40, 0.08);
}

.header-dropdown-item--danger .material-symbols-outlined {
	opacity: 0.8;
}

.header-dropdown-sep {
	height: 1px;
	background: #b3d0f0;
	margin: 0.3rem 0.75rem;
}

.user-name {
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.user-cargo {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
}

/* ── Header empresa menu ── */
.header-empresa-menu {
	position: relative;
}

.header-empresa-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.65rem 0.3rem 0.75rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.header-empresa-btn:hover,
.header-empresa-menu.open .header-empresa-btn {
	background: rgba(255, 255, 255, 0.22);
}

.header-empresa-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.header-empresa-menu.open .header-chevron {
	transform: rotate(180deg);
}

.header-empresa-menu.open .header-dropdown {
	display: block;
}

.header-empresa-nombre {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-dropdown-item--active {
	background: rgba(21, 101, 192, 0.1);
	color: #1565c0;
	font-weight: 600;
}

.header-dropdown-item--active .material-symbols-outlined {
	opacity: 1;
	color: #1565c0;
}

/* ── Nav bar ── */
.app-nav {
	background: linear-gradient(180deg, #ebebeb 0%, #d0d0d0 100%);
	border-bottom: 1px solid #a8a8a8;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
	position: sticky;
	top: 2.5rem;
	z-index: 100;
	flex-shrink: 0;
	overflow: visible;
}

/* ── Body (sidebar + content) ── */
.app-body {
	flex: 1;
	display: flex;
	min-height: 0;
}

/* ── Side Nav (menu izquierdo icon-only) ── */
.app-sidenav {
	width: 46px;
	background: linear-gradient(90deg, #dce8f8 0%, #e8f2fc 45%, #f0f6fd 100%);
	border-right: 1px solid #dae8f7;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	z-index: 150;
}

.sc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	color: #1e3a5f;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.sc-btn:hover {
	background: rgba(26, 61, 107, 0.1);
	color: #0f2a4d;
}

.sc-btn.active {
	background: rgba(26, 61, 107, 0.15);
	color: #0f2a4d;
	box-shadow: inset 2px 0 0 #1565c0;
}

.sc-btn .material-symbols-outlined {
	font-size: 20px;
}

.sc-divider {
	width: 28px;
	height: 1px;
	background: rgba(0, 0, 0, 0.15);
	margin: 4px 0;
}

.sc-btn--bottom {
	margin-top: auto;
	margin-bottom: 4px;
}

/* ── SideNav: menú icon-only con flyouts CSS ── */
.sidenav-menu {
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	gap: 2px;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(26, 61, 107, 0.25) transparent;
}
.sidenav-menu::-webkit-scrollbar {
	width: 4px;
}
.sidenav-menu::-webkit-scrollbar-thumb {
	background: rgba(26, 61, 107, 0.25);
	border-radius: 2px;
}
.sidenav-menu::-webkit-scrollbar-track {
	background: transparent;
}

.sidenav-spacer {
	flex: 1;
}

.sidenav-item {
	position: relative;
}

.sidenav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 5px;
	border-radius: 8px;
	color: #317ac1;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sidenav-btn:hover {
	background: rgba(26, 61, 107, 0.1);
	color: #0f2a4d;
}

.sidenav-btn.active {
	background: #1e88e5;
	color: #fff;
	box-shadow: inset 3px 0 0 #0d47a1;
}

.sidenav-btn .material-symbols-outlined {
	font-size: 21px;
}

.sidenav-btn--empty {
	opacity: 0.42;
	cursor: default;
}

.sidenav-flyout {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
	position: fixed;
	left: 46px;
	min-width: 240px;
	max-height: calc(100vh - 1rem);
	overflow-y: auto;
	background: linear-gradient(90deg, #dce8f8 0%, #e8f2fc 45%, #f0f6fd 100%);
	border: 1px solid #b3d0f0;
	border-radius: 0 6px 6px 6px;
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.22);
	z-index: 500;
	padding-bottom: 0.3rem;
}

.sidenav-item.has-flyout:hover .sidenav-flyout {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
}

.sidenav-flyout:hover {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
}

.sidenav-flyout-header {
	padding: 0.5rem 1rem 0.45rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(90deg, #155ab0 0%, #1565c0 45%, #1976d2 100%);
	border-radius: 0 6px 0 0;
	margin-bottom: 0.2rem;
}

.sidenav-flyout-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 1.25rem;
	height: 2.4rem;
	color: #1a3d6b;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.1s;
}

.sidenav-flyout-item:hover {
	background: rgba(26, 61, 107, 0.1);
	color: #0f2a4d;
}

.sidenav-flyout-item.active {
	background: #1e88e5;
	color: #fff;
	font-weight: 600;
}

.sidenav-flyout-item .material-symbols-outlined {
	font-size: 1.25rem;
	opacity: 0.7;
}

.sidenav-flyout-item.active .material-symbols-outlined {
	opacity: 1;
}

.sidenav-flyout-sep {
	height: 1px;
	background: #b3d0f0;
	margin: 0.3rem 0.75rem;
}

/* ── Content ── */
.app-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #f5f9fe;
	overflow: hidden;
	min-height: 0;
	position: relative;
}

/* ── Nav Progress Bar ── */
.nav-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 500;
	background: linear-gradient(90deg, #1565c0 0%, #78909c 40%, #cfd8dc 70%, #ffffff 100%);
	background-size: 200% 100%;
	animation: nav-progress-run 0.75s ease-out forwards, nav-progress-shimmer 1.2s linear infinite;
}

@keyframes nav-progress-run {
	0% {
		transform: scaleX(0);
		transform-origin: left;
		opacity: 1;
	}
	75% {
		transform: scaleX(1);
		transform-origin: left;
		opacity: 1;
	}
	100% {
		transform: scaleX(1);
		transform-origin: left;
		opacity: 0;
	}
}

@keyframes nav-progress-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.content {
	flex: 1;
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
}

/* ── Footer ── */
.app-footer {
	background: #f5f9fe;
	border-top: 1px solid #e0e0e0;
	color: #888;
	font-size: 0.72rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1.5rem;
	flex-shrink: 0;
}

/* ── Blazor error UI ── */
#blazor-error-ui {
	color-scheme: light only;
	background: #dc2626;
	color: #ffffff;
	top: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 9999;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

/* ═══════════════════════════════════════════════
   TOP MENU
═══════════════════════════════════════════════ */

.topmenu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 4px 0.5rem;
	gap: 0;
}

.topmenu .menu-item {
	position: relative;
	list-style: none;
}

.topmenu .menu-btn {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	height: 1.75rem;
	padding: 0 0.85rem;
	color: #1a3d6b;
	font-size: 0.90rem;
	font-weight: 500;
	font-family: inherit;
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.12s;
	letter-spacing: 0.01em;
	border-radius: 4px;
}

.topmenu .menu-btn:hover,
.topmenu .has-dropdown:hover>.menu-btn {
	background: rgba(26, 61, 107, 0.1);
	color: #0f2a4d;
}

.topmenu .menu-btn.active {
	background: rgba(26, 61, 107, 0.15);
	color: #0f2a4d;
	font-weight: 600;
}

/* Dropdown */
.topmenu .dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	list-style: none;
	margin: 0;
	padding: 0.3rem 0;
	background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%);
	border: 1px solid #b0b0b0;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	min-width: 180px;
	z-index: 500;
}

.topmenu .has-dropdown.open>.dropdown {
	display: block;
}

.topmenu .dropdown li {
	list-style: none;
}

.topmenu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.1rem;
	height: 2rem;
	color: #1a3d6b;
	font-size: 0.83rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.1s;
}

.topmenu .dropdown-item:hover {
	background: rgba(26, 61, 107, 0.1);
	color: #0f2a4d;
}

.topmenu .dropdown-item.active {
	background: rgba(26, 61, 107, 0.15);
	color: #0f2a4d;
	font-weight: 600;
}

.topmenu .material-symbols-outlined {
	font-size: 1.3rem;
	line-height: 1;
	color: inherit;
	opacity: 0.7;
}

.topmenu .dropdown-separator {
	height: 1px;
	background: #c4c4c4;
	margin: 0.3rem 0.75rem;
	list-style: none;
}

.topmenu .menu-btn--empty {
	opacity: 0.42;
	cursor: default;
}

/* ── Nav inner wrapper (flex para justificar config a la derecha) ── */
.app-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-config {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-right: 0.5rem;
	color: #1a1a1a;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.12s;
	flex-shrink: 0;
}

.menu-config:hover {
	background: rgba(0, 0, 0, 0.09);
	color: #000000;
}

.menu-config.active {
	background: rgba(0, 0, 0, 0.13);
	color: #000000;
}

.menu-config .material-symbols-outlined {
	font-size: 1.1rem;
	opacity: 0.75;
}

/* ═══════════════════════════════════════════════
   NOT FOUND (404)
═══════════════════════════════════════════════ */

.notfound-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
}

.notfound-code {
	font-size: 6rem;
	font-weight: 800;
	line-height: 1;
	color: #d0d0d0;
	letter-spacing: -0.02em;
}

.notfound-title {
	margin: 0.5rem 0 0.75rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--rz-text-color, #1a1a1a);
}

.notfound-msg {
	margin: 0 0 2rem;
	font-size: 0.9rem;
	color: var(--rz-text-secondary-color, #666);
}

.notfound-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.4rem;
	background: linear-gradient(90deg, #052767 0%, #3a0647 100%);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity 0.15s;
}

.notfound-btn:hover {
	opacity: 0.88;
}

.notfound-btn .material-symbols-outlined {
	font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════
   CONFIGURACIÓN
═══════════════════════════════════════════════ */

.config-container {
	padding: 1.5rem 2rem;
}

.config-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--rz-text-color, #1a1a1a);
	margin: 0 0 1.25rem;
}

.config-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #d0d0d0;
	margin-bottom: 1.5rem;
}

.config-tab {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	font-family: inherit;
	color: #555;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.config-tab:hover {
	color: #1a1a1a;
}

.config-tab.active {
	color: #052767;
	border-bottom-color: #052767;
	font-weight: 600;
}

.config-tab .material-symbols-outlined {
	font-size: 1rem;
}

.config-panel {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 1.5rem;
}

.config-placeholder {
	color: #999;
	font-size: 0.9rem;
	margin: 0;
}

/* ── Configuración: Logo ── */
.config-logo-area {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.75rem 0;
}
.config-logo-preview {
	width: 80px;
	height: 80px;
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.config-logo-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.config-logo-actions {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.config-logo-hint {
	font-size: 0.78rem;
	color: #888;
	margin: 0;
}
.config-logo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	background: linear-gradient(180deg, #ebebeb, #d0d0d0);
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	font-size: 0.82rem;
	font-weight: 500;
	color: #245591;
	cursor: pointer;
	transition: opacity 0.15s;
}
.config-logo-btn:hover {
	opacity: 0.82;
}

/* ── Configuración: Usuarios y Permisos ── */
.config-usuarios {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.usuarios-toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.usuarios-body {
	display: flex;
	gap: 1rem;
	min-height: 420px;
}
.usuarios-lista {
	width: 260px;
	min-width: 200px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow-y: auto;
	background: #fafafa;
	flex-shrink: 0;
}
.usuario-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.12s;
}
.usuario-item:hover {
	background: #f0f0f0;
}
.usuario-item.selected {
	background: #e8f0fe;
}
.usuario-icon {
	color: #888;
	font-size: 1.4rem;
	flex-shrink: 0;
}
.usuario-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.usuario-nombre {
	font-weight: 500;
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.usuario-username {
	font-size: 0.75rem;
	color: #888;
}
.usuario-estatus {
	font-size: 0.7rem;
	padding: 1px 6px;
	border-radius: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}
.usuario-estatus.activo {
	background: #e8f5e9;
	color: #2e7d32;
}
.usuario-estatus.inactivo {
	background: #fce4ec;
	color: #c62828;
}
.usuarios-form {
	flex: 1;
	min-width: 0;
}
/* ── Tab Empresas ─────────────────────────── */
.config-empresas {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.empresas-toolbar {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #eee;
	display: flex;
	gap: 0.5rem;
}
.empresas-body {
	display: flex;
	min-height: 0;
	flex: 1;
}
.empresas-lista {
	width: 260px;
	min-width: 200px;
	border-right: 1px solid #eee;
	overflow-y: auto;
	background: #fafafa;
}
.empresa-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}
.empresa-item:hover {
	background: #f0f4ff;
}
.empresa-item.selected {
	background: #e8f0fe;
}
.empresa-icon {
	color: #666;
	font-size: 1.4rem;
}
.empresa-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.empresa-nombre {
	font-size: 0.9rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.empresa-rnc {
	font-size: 0.78rem;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.empresa-estatus {
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	border-radius: 9999px;
	font-weight: 500;
	white-space: nowrap;
}
.empresa-estatus.activo {
	background: #e8f5e9;
	color: #2e7d32;
}
.empresa-estatus.inactivo {
	background: #fce4ec;
	color: #c62828;
}
.empresas-detalle {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.empresa-subtabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #e5e7eb;
	background: #f8fafc;
	padding: 0 1rem;
}
.empresa-subtab {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	border: none;
	background: transparent;
	font-size: 0.82rem;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}
.empresa-subtab:hover {
	color: #3b82f6;
}
.empresa-subtab.active {
	color: #2563eb;
	border-bottom-color: #2563eb;
	font-weight: 600;
}
.empresa-subtab .material-symbols-outlined {
	font-size: 1rem;
}
.empresas-detalle .cfg-sys-wrap {
	flex: 1;
	min-width: 0;
	padding: 1.25rem;
	overflow-y: auto;
}
.empresas-form {
	flex: 1;
	min-width: 0;
	padding: 1.25rem;
	overflow-y: auto;
}
.form-titulo {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1rem;
	color: #333;
}
.permisos-section {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 0.75rem;
}
.permisos-section h4 {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: #555;
	border-bottom: 1px solid #ebebeb;
	padding-bottom: 0.35rem;
}
.permiso-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0;
}
.permiso-padre {
	font-weight: 500;
	font-size: 0.875rem;
}
.permiso-hijo {
	padding-left: 1.5rem;
	font-size: 0.85rem;
	color: #555;
}
.estatus-toggle {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	height: 56px;
}
.estatus-label {
	font-size: 0.85rem;
	color: #555;
	font-weight: 500;
}
.estatus-valor {
	font-size: 0.85rem;
	color: #333;
}



/* ── Configuración Sistema: tabla por grupos ── */
.cfg-param-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cfg-desc-field .tbf-native {
	font-weight: 700;
	font-size: 13.5px;
	color: #0f172a;
}

.cfg-param-desc {
	font-weight: 700;
	font-size: 13.5px;
	color: #0f172a;
	line-height: 1.3;
}

.cfg-param-codigo {
	font-size: 11.5px;
	color: #64748b;
	line-height: 1.3;
}

/* ═══════════════════════════════════════════════
   FACTURACION — detalle grid: edit row
═══════════════════════════════════════════════ */

.fac-det-grid .rz-row-editing td {
	vertical-align: middle;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

.fac-det-grid .rz-row-editing .rz-inputtext,
.fac-det-grid .rz-row-editing .rz-autocomplete-input {
	height: 34px !important;
	line-height: 34px !important;
}

.fac-det-grid .rz-row-editing .rz-autocomplete,
.fac-det-grid .rz-row-editing .rz-numeric {
	height: 34px !important;
}

.fac-det-grid .rz-row-editing .rz-spinner-button-group {
	height: 34px !important;
}

/* ═══════════════════════════════════════════════
   FACTURACION — filas con FormFields del mismo alto
═══════════════════════════════════════════════ */

.fac-edit-row>[class*="rz-col"] {
	display: flex;
	flex-direction: column;
}

.fac-edit-row>[class*="rz-col"]>.rz-form-field {
	flex: 1;
}

/* ═══════════════════════════════════════════════
   BUSCADOR BOX
═══════════════════════════════════════════════ */

.rz-form-field-content {
	margin-block: 0 !important;
}

.buscador-inner .rz-autocomplete,
.buscador-inner .rz-autocomplete.rz-state-focus {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.buscador-inner input.rz-inputtext,
.buscador-inner input.rz-inputtext:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
}

:root {
	--rz-input-height: auto;
}


/* ═══════════════════════════════════════════════
   LOADING — componente genérico
═══════════════════════════════════════════════ */

.loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9000;
}

.loading-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	min-width: 160px;
}

.loading-inline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1rem;
	gap: 0.85rem;
}

.loading-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid #e0e0e0;
	border-top-color: #245591;
	border-radius: 50%;
	animation: loading-spin 0.7s linear infinite;
}

@keyframes loading-spin {
	to {
		transform: rotate(360deg);
	}
}

.loading-msg {
	font-size: 0.85rem;
	font-weight: 500;
	color: #245591;
	margin: 0;
}

.loading-card--progress {
	min-width: 300px;
}

.loading-progress-pct {
	font-size: 1.75rem;
	font-weight: 700;
	color: #1d4ed8;
	line-height: 1;
}

.loading-progress-track {
	width: 100%;
	height: 8px;
	background: #dbeafe;
	border-radius: 4px;
	overflow: hidden;
}

.loading-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #1d4ed8);
	border-radius: 4px;
	transition: width 0.35s ease;
}

/* ── Mobile ── */
@media (max-width: 640px) {
	.header-company,
	.user-info {
		display: none;
	}

	.content {
		padding: 1rem;
	}
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════ */
.dashboard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 2px 0;
}

/* Bienvenida */
.dash-welcome {
	display: flex;
	align-items: center;
	gap: 12px;
}
.dash-hello {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: #245591;
}
.dash-sub {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: rgba(36, 85, 145, 0.65);
}

/* KPI Cards */
.dash-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
/* Chart rows */
.dash-row {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 12px;
}

/* Chart cards */
.dash-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.dash-card-title {
	margin: 0 0 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #245591;
	letter-spacing: 0.01em;
}

/* Recent transactions table */
.dash-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}
.dash-table th {
	text-align: left;
	padding: 5px 8px;
	border-bottom: 2px solid #e8eef6;
	color: #888;
	font-weight: 600;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.dash-table td {
	padding: 7px 8px;
	border-bottom: 1px solid #f0f0f0;
	color: #333;
	vertical-align: middle;
}
.dash-table tr:last-child td {
	border-bottom: none;
}
.dash-table tr:hover td {
	background: #f7f9fc;
}
.dash-factura {
	font-weight: 600;
	color: #245591;
	font-family: monospace;
}
.dash-monto {
	text-align: right;
	font-weight: 600;
	color: #1a1a1a;
}

/* Responsive dashboard */
@media (max-width: 1100px) {
	.dash-kpis {
		grid-template-columns: repeat(2, 1fr);
	}
	.dash-row {
		grid-template-columns: 1fr;
	}
}

/* ── Detalle tabla: hover/focus en controles ─── */
.det-table td input:hover,
.det-table td input:focus,
.det-table td .rz-inputwrapper:hover,
.det-table td .rz-inputwrapper:focus-within,
.det-table td [class*="rz-"]:hover,
.det-table td [class*="rz-"]:focus-within {
	background: #e3f2fd !important;
	border: 1px solid #d8e2ea !important;
	border-radius: 4px !important;
}

/* Notificaciones: mover contenedor a esquina inferior derecha */
.rz-notification {
	inset-block-start: auto !important;
	inset-block-end: 1rem;
}

/* ═══════════════════════════════════════════════
   DIALOG CONFIRM — botones con estilo ButtonField
   El tema usa var(--rz-danger) y var(--rz-base-200).
   Redefinimos las variables en el scope del wrapper
   para que el tema mismo use nuestros colores.
═══════════════════════════════════════════════ */
.rz-dialog-confirm-buttons {
	--rz-danger: #2563eb;
	--rz-danger-lighter: #3b82f6;
	--rz-danger-light: #2563eb;
	--rz-danger-dark: #1d4ed8;
	--rz-danger-darker: #1e40af;
	--rz-on-danger: #ffffff;
	--rz-on-danger-lighter: #ffffff;
	--rz-on-danger-light: #ffffff;
	--rz-on-danger-dark: #ffffff;
	--rz-on-danger-darker: #ffffff;
}

/* Cancelar: asegurar texto negro */
.rz-dialog-confirm-buttons .rz-button.rz-light {
	color: #1a1a1a !important;
}
/* ── Sin acceso a dashboard ─────────────────────────────────── */
.sin-acceso-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 60vh;
	color: #94a3b8;
	user-select: none;
}
.sin-acceso-icon {
	font-size: 4rem;
	opacity: 0.35;
}
.sin-acceso-modulo {
	font-size: 1.1rem;
	font-weight: 700;
	color: #64748b;
	margin-top: 0.25rem;
}
.sin-acceso-sistema {
	font-size: 0.85rem;
	color: #94a3b8;
}
.sin-acceso-version {
	font-size: 0.75rem;
	color: #cbd5e1;
}