/*--------------------------------------------------------------
# General https://es.pinterest.com/pin/15199717491361212/
--------------------------------------------------------------*/
:root {
	scroll-behavior: smooth;
	/* Paleta principal - Colores verdes naturales */
	--primary-color: #8EB69B; /* Verde principal */
	--primary-color-transparent: rgba(142, 182, 155, 0.55); /* 55% opacidad */

	--secondary-color: #6A9A7F; /* Verde más oscuro para elementos secundarios */
	--secondary-color-transparent: rgba(106, 154, 127, 0.75);
	--background-color: #F5F9F7; /* Fondo muy claro con tono verde suave */
	/* Colores de acento y estados */
	--hover-color: #235347; /* Verde oscuro para hover/activo */
	--card-background: #FFFFFF; /* Fondo blanco puro para cards */
	/* Colores de texto */
	--text-primary: #0B2B26; /* Texto principal - verde muy oscuro */
	--text-secondary: #3D5952; /* Texto secundario - verde grisáceo */
	/* Elementos de interfaz */
	--border-color: #DAF1DE; /* Bordes - verde muy claro */
	--light-background-primary: #E6F4EC; /* Fondo claro primario - verde muy suave */
	--light-background-secondary: #F0F8F3; /* Fondo claro secundario - aún más claro */
	/* Colores para estados específicos (manteniendo tu estructura) */
	--light-background-success: #DAF1DE; /* Verde claro para éxito */
	--light-background-danger: #FFE6E6; /* Rojo suave para peligro */
	--light-background-warning: #FFF2CC; /* Amarillo pálido para advertencia */
	--light-background-info: #E0F2F7; /* Azul claro para información */
	--light-background-dark: #163832; /* Verde oscuro para fondos oscuros */
	/* Elementos específicos */
	--card-title-secondary: #5A8575; /* Títulos secundarios en cards */
	--shadow-color: rgba(11, 43, 38, 0.1); /* Sombra suave verde oscuro */
	--dropdown-divider-color: #DAF1DE; /* Divisor de dropdown */
	--dropdown-footer-color: #235347; /* Footer de dropdown */
	--header-text-color: #FFFFFF; /* Texto en cabecera */
	--danger-color: #E57373; /* Color de peligro/alertas (rojo suavizado) */
	--select-highlight-color: #A3C9B2; /* Highlight en selects */
}



/* Mejora para elementos que deben mantener estado durante la transición */
.header, .footer, .sidebar {
	view-transition-name: none; /* Estos elementos no necesitan animarse */
}

/* Asegurar que las transiciones sean suaves */
* {
	view-transition-behavior: allow-discrete;
}

/* === MASTER PAGE === */

.fileContainer {
	overflow: hidden;
	position: relative;
}

	.fileContainer [type=file] {
		cursor: inherit;
		display: block;
		font-size: 999px;
		filter: alpha(opacity=0);
		min-height: 100%;
		min-width: 100%;
		opacity: 0;
		position: absolute;
		right: 0;
		text-align: right;
		top: 0;
	}

.thumb {
	width: 100%;
	height: auto;
	border: 1px solid #000;
	margin: .5em 0;
}

.close {
	position: relative;
	background-color: #fff;
	top: 75px;
	left: 10px;
	padding: 0.25em 0.6em;
	font-size: 2em;
	font-weight: bold
}

/* Nuevos estilos para esquinas redondeadas */
.redondeado, #header {
	border-radius: 16px !important;
	margin: 5px !important;
}

.sidebar-redondeado {
	border-radius: 16px !important;
}

#sidebar {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

.dropdown-menu.profile {
	border-radius: 12px;
	overflow: hidden;
}

.sidebar-nav .nav-link {
	border-radius: 12px;
	margin: 2px 0;
}

.pagetitle, .section {
	border-radius: 16px;
}

.logo img {
	border-radius: 8px;
}

.nav-profile img.rounded-circle {
	border-radius: 50% !important; /* Mantener círculo perfecto */
}

.card {
	border-radius: 24px;
}

.btn {
	border-radius: 12px;
}


/* =======================================================
   ESTADO ACTIVO / SELECCIONADO (Oscuro)
   ======================================================= */

/* 1. Esto cambia el color del TEXTO */
.sidebar-nav .nav-content a.active {
	color: var(--primary-color) !important; /* O usa 'red' si prefieres */
}

	/* 2. Esto asegura que el ÍCONO también tome ese color */
	.sidebar-nav .nav-content a.active i {
		color: var(--primary-color) !important;
	}

/* === FIN MASTER PAGE === */


/* Body Styles */
body {
	font-family: "Inter", sans-serif;
	background: var(--background-color);
	color: var(--secondary-color);
}

a {
	color: var(--primary-color);
	text-decoration: none;
}

	a:hover {
		color: var(--hover-color);
		text-decoration: none;
		cursor: pointer;
	}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Nunito", sans-serif;
}

.back-to-top {
	background: var(--primary-color);
}

	.back-to-top:hover {
		background: var(--hover-color);
	}

.header {
	background-color: var(--background-color);
	color: var(--header-text-color);
}

.breadcrumb a {
	color: var(--primary-color);
}

	.breadcrumb a:hover {
		color: var(--hover-color);
	}
/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
	margin-top: 60px;
	padding: 20px 30px;
	transition: all 0.3s;
}

@media (max-width: 1199px) {
	#main {
		padding: 20px;
	}
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
	margin-bottom: 10px;
}

	.pagetitle h1 {
		font-size: 24px;
		margin-bottom: 0;
		font-weight: 600;
		color: var(--text-primary);
	}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	background: var(--primary-color);
	width: 40px;
	height: 40px;
	border-radius: 4px;
	transition: all 0.4s;
}

	.back-to-top i {
		font-size: 24px;
		color: #fff;
		line-height: 0;
	}

	.back-to-top:hover {
		background: var(--hover-color);
		color: #fff;
	}

	.back-to-top.active {
		visibility: visible;
		opacity: 1;
	}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
	border-radius: 4px;
	padding: 10px 0;
	-webkit-animation-name: dropdown-animate;
	animation-name: dropdown-animate;
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	border: 0;
	box-shadow: 0 5px 30px 0 var(--shadow-color);
}

	.dropdown-menu .dropdown-header,
	.dropdown-menu .dropdown-footer {
		text-align: center;
		font-size: 15px;
		padding: 10px 25px;
	}

		.dropdown-menu .dropdown-footer a {
			color: var(--dropdown-footer-color);
			text-decoration: underline;
		}

			.dropdown-menu .dropdown-footer a:hover {
				text-decoration: none;
			}

	.dropdown-menu .dropdown-divider {
		color: var(--dropdown-divider-color);
		margin: 0;
	}

	.dropdown-menu .dropdown-item {
		font-size: 14px;
		padding: 10px 15px;
		transition: 0.3s;
	}

		.dropdown-menu .dropdown-item i {
			margin-right: 10px;
			font-size: 18px;
			line-height: 0;
		}

		.dropdown-menu .dropdown-item:hover {
			background-color: var(--light-background-primary);
		}

@media (min-width: 768px) {
	.dropdown-menu-arrow::before {
		content: "";
		width: 13px;
		height: 13px;
		background: #fff;
		position: absolute;
		top: -7px;
		right: 20px;
		transform: rotate(45deg);
		border-top: 1px solid var(--border-color);
		border-left: 1px solid var(--border-color);
	}
}

@-webkit-keyframes dropdown-animate {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes dropdown-animate {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Light Backgrounds */
.bg-primary-light {
	background-color: var(--light-background-primary);
	border-color: var(--light-background-primary);
}

.bg-secondary-light {
	background-color: var(--light-background-secondary);
	border-color: var(--light-background-secondary);
}

.bg-success-light {
	background-color: var(--light-background-success);
	border-color: var(--light-background-success);
}

.bg-danger-light {
	background-color: var(--light-background-danger);
	border-color: var(--light-background-danger);
}

.bg-warning-light {
	background-color: var(--light-background-warning);
	border-color: var(--light-background-warning);
}

.bg-info-light {
	background-color: var(--light-background-info);
	border-color: var(--light-background-info);
}

.bg-dark-light {
	background-color: var(--light-background-dark);
	border-color: var(--light-background-dark);
}

/* Card */
.card {
	background: var(--card-background) !important;
	margin-bottom: 30px;
	border: none;
	border-radius: 16px;
	box-shadow: 0px 0 30px var(--shadow-color);
}

.card-header,
.card-footer {
	border-color: var(--border-color);
	background-color: #fff;
	color: var(--card-title-secondary);
	padding: 15px;
}

.card-title {
	padding: 20px 0 15px 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--text-primary);
	font-family: "Poppins", sans-serif;
}

	.card-title span {
		color: var(--card-title-secondary);
		font-size: 14px;
		font-weight: 400;
	}

.card-body {
	padding: 0 20px 20px 20px;
}

.card-img-overlay {
	background-color: rgba(255, 255, 255, 0.6);
}

/*--------------------------------------------------------------
# Alerts
--------------------------------------------------------------*/
.alert-heading {
	font-weight: 500;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
}

/* Close Button */
.btn-close {
	background-size: 25%;
}

	.btn-close:focus {
		outline: 0;
		box-shadow: none;
	}

/* Accordion */
.accordion-item {
	border: 1px solid var(--border-color);
}

.accordion-button:focus {
	outline: 0;
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	color: var(--text-primary);
	background-color: var(--light-background-primary);
}

.accordion-flush .accordion-button {
	padding: 15px 0;
	background: none;
	border: 0;
}

	.accordion-flush .accordion-button:not(.collapsed) {
		box-shadow: none;
		color: var(--primary-color);
	}

.accordion-flush .accordion-body {
	padding: 0 0 15px 0;
	color: var(--text-secondary);
	font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
	font-size: 14px;
	font-family: "Nunito", sans-serif;
	color: var(--card-title-secondary);
	font-weight: 600;
}

	.breadcrumb a {
		color: var(--primary-color);
		transition: 0.3s;
	}

		.breadcrumb a:hover {
			color: var(--hover-color);
		}

	.breadcrumb .breadcrumb-item::before {
		color: var(--card-title-secondary);
	}

	.breadcrumb .active {
		color: var(--hover-color);
		font-weight: 600;
	}

/* Bordered Tabs */
.nav-tabs-bordered {
	border-bottom: 2px solid var(--border-color);
}

	.nav-tabs-bordered .nav-link {
		margin-bottom: -2px;
		border: none;
		color: var(--text-secondary);
	}

		.nav-tabs-bordered .nav-link:hover,
		.nav-tabs-bordered .nav-link:focus {
			color: var(--hover-color);
		}

		.nav-tabs-bordered .nav-link.active {
			background-color: #fff;
			color: var(--hover-color);
			border-bottom: 2px solid var(--hover-color);
		}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
	background-color: var(--primary-color); /* Fondo con color primario */
	color: var(--header-text-color);
	transition: all 0.5s;
	z-index: 997;
	height: 60px;
	box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
	padding-left: 20px;
}

.navbar-brand,
.navbar-nav .nav-link {
	color: var(--header-text-color) !important; /* Mantener el texto del encabezado en blanco */
	transition: color 0.3s ease;
}

	.navbar-nav .nav-link.dropdown-toggle {
		color: var(--header-text-color) !important;
	}

.header a:hover {
	color: var(--hover-color); /* Color hover para enlaces */
	text-decoration: underline; /* Opcional: subrayado al pasar el rat�n */
}

.logo {
	line-height: 1;
}

@media (min-width: 1200px) {
	.logo {
		width: 280px;
	}
}

.logo img {
	max-height: 37px;
	margin-right: 6px;
}

@media (max-width: 768px) {
	.logo img {
		max-height: 24px;
	}
}

.logo span {
	font-size: 26px;
	font-weight: 700;
	color: var(--text-primary);
	font-family: "Nunito", sans-serif;
}

/* Toggle Sidebar Button */
.header .toggle-sidebar-btn {
	font-size: 32px;
	padding-left: 10px;
	cursor: pointer;
	color: var(--text-primary);
}

/* Search Bar */
.header .search-bar {
	min-width: 360px;
	padding: 0 20px;
}

@media (max-width: 1199px) {
	.header .search-bar {
		position: fixed;
		top: 50px;
		left: 0;
		right: 0;
		padding: 20px;
		box-shadow: 0px 0px 15px 0px var(--shadow-color);
		background: #fff;
		z-index: 9999;
		transition: 0.3s;
		visibility: hidden;
		opacity: 0;
	}

	.header .search-bar-show {
		top: 60px;
		visibility: visible;
		opacity: 1;
	}
}

.header .search-form {
	width: 100%;
}

	.header .search-form input {
		border: 0;
		font-size: 14px;
		color: var(--text-primary);
		border: 1px solid rgba(1, 41, 112, 0.2);
		padding: 7px 38px 7px 8px;
		border-radius: 3px;
		transition: 0.3s;
		width: 100%;
	}

		.header .search-form input:focus,
		.header .search-form input:hover {
			outline: none;
			box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
			border: 1px solid rgba(1, 41, 112, 0.3);
		}

	.header .search-form button {
		border: 0;
		padding: 0;
		margin-left: -30px;
		background: none;
	}

		.header .search-form button i {
			color: var(--text-primary);
		}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
	list-style: none;
}

.header-nav > ul {
	margin: 0;
	padding: 0;
}

.header-nav .nav-icon {
	font-size: 22px;
	color: var(--text-primary);
	margin-right: 25px;
	position: relative;
}

.header-nav .nav-profile {
	color: var(--text-primary);
}

	.header-nav .nav-profile img {
		max-height: 36px;
	}

	.header-nav .nav-profile span {
		font-size: 14px;
		font-weight: 600;
	}

.header-nav .badge-number {
	position: absolute;
	inset: -2px -5px auto auto;
	font-weight: normal;
	font-size: 12px;
	padding: 3px 6px;
}

.header-nav .notifications {
	inset: 8px -15px auto auto !important;
}

	.header-nav .notifications .notification-item {
		display: flex;
		align-items: center;
		padding: 15px 10px;
		transition: 0.3s;
	}

		.header-nav .notifications .notification-item i {
			margin: 0 20px 0 10px;
			font-size: 24px;
		}

		.header-nav .notifications .notification-item h4 {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 5px;
		}

		.header-nav .notifications .notification-item p {
			font-size: 13px;
			margin-bottom: 3px;
			color: #919191;
		}

		.header-nav .notifications .notification-item:hover {
			background-color: var(--light-background-primary);
		}

.header-nav .messages {
	inset: 8px -15px auto auto !important;
}

	.header-nav .messages .message-item {
		padding: 15px 10px;
		transition: 0.3s;
	}

		.header-nav .messages .message-item a {
			display: flex;
		}

		.header-nav .messages .message-item img {
			margin: 0 20px 0 10px;
			max-height: 40px;
		}

		.header-nav .messages .message-item h4 {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 5px;
			color: var(--dropdown-footer-color);
		}

		.header-nav .messages .message-item p {
			font-size: 13px;
			margin-bottom: 3px;
			color: #919191;
		}

		.header-nav .messages .message-item:hover {
			background-color: var(--light-background-primary);
		}


.header-nav .profile {
	min-width: 240px;
	padding-bottom: 0;
	top: 8px !important;
}

	.header-nav .profile .dropdown-header h6 {
		font-size: 18px;
		margin-bottom: 0;
		font-weight: 600;
		color: var(--primary-color) !important;
	}

	.header-nav .profile .dropdown-header span {
		font-size: 14px;
	}

	.header-nav .profile .dropdown-item {
		font-size: 14px;
		padding: 10px 15px;
		transition: 0.3s;
	}

		.header-nav .profile .dropdown-item i {
			margin-right: 10px;
			font-size: 18px;
			line-height: 0;
		}

		.header-nav .profile .dropdown-item:hover {
			background-color: #f6f9ff;
		}

.nombre-arriba {
	color: var(--header-text-color) !important;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
	position: fixed;
	top: 70px; /* Aumenté el espacio superior */
	left: 8px; /* Agregué margen izquierdo */
	bottom: 20px; /* Agregué margen inferior */
	width: 230px;
	z-index: 996;
	transition: all 0.3s;
	padding: 20px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--border-color) transparent;
	box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
	background-color: var(--background-color);
	border-radius: 12px; /* Bordes más redondeados */
	margin-right: 20px; /* Espacio adicional a la derecha */
}

	/* Efecto de elevación al pasar el mouse */
	.sidebar:hover {
		box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
	}

@media (max-width: 1199px) {
	.sidebar {
		left: -270px; /* Ajusté para compensar los márgenes */
	}
}

.sidebar::-webkit-scrollbar {
	width: 5px;
	height: 8px;
	background-color: var(--background-color);
}

.sidebar::-webkit-scrollbar-thumb {
	background-color: var(--border-color);
	border-radius: 10px;
}

@media (min-width: 1200px) {

	#main,
	#footer {
		margin-left: 270px; /* Aumenté el margen para compensar el espacio del sidebar */
	}
}

@media (max-width: 1199px) {
	.toggle-sidebar .sidebar {
		left: 20px; /* Mantiene el margen cuando está visible */
	}
}

@media (min-width: 1200px) {

	.toggle-sidebar #main,
	.toggle-sidebar #footer {
		margin-left: 0;
	}

	.toggle-sidebar .sidebar {
		left: -270px; /* Ajusté para compensar los márgenes */
	}
}

/* Resto de tus estilos permanecen igual */
.sidebar-nav {
	padding: 0;
	margin: 0;
	list-style: none;
}

	.sidebar-nav li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.sidebar-nav .nav-item {
		margin-bottom: 5px;
	}

	.sidebar-nav .nav-heading {
		font-size: 11px;
		text-transform: uppercase;
		color: var(--text-secondary);
		font-weight: 600;
		margin: 10px 0 5px 15px;
	}

	.sidebar-nav .nav-link {
		display: flex;
		align-items: center;
		font-size: 15px;
		font-weight: 600;
		color: var(--primary-color);
		transition: 0.3s;
		background: var(--light-background-primary);
		padding: 10px 15px;
		border-radius: 8px; /* Bordes más redondeados en los items */
	}

		.sidebar-nav .nav-link i {
			font-size: 16px;
			margin-right: 10px;
			color: var(--primary-color);
		}

		.sidebar-nav .nav-link.collapsed {
			color: var(--text-primary);
			background: var(--background-color);
		}

			.sidebar-nav .nav-link.collapsed i {
				color: var(--text-secondary);
			}

		.sidebar-nav .nav-link:hover {
			color: var(--primary-color);
			background: var(--light-background-primary);
			transform: scale(1.02);
		}

			.sidebar-nav .nav-link:hover i {
				color: var(--primary-color);
			}

		.sidebar-nav .nav-link .bi-chevron-down {
			margin-right: 0;
			transition: transform 0.2s ease-in-out;
		}

		.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
			transform: rotate(180deg);
		}

	.sidebar-nav .nav-content {
		padding: 5px 0 0 0;
		margin: 0;
		list-style: none;
	}

		.sidebar-nav .nav-content a {
			display: flex;
			align-items: center;
			font-size: 14px;
			font-weight: 600;
			color: var(--text-primary);
			transition: 0.3s;
			padding: 10px 0 10px 40px;
		}

			.sidebar-nav .nav-content a i {
				font-size: 6px;
				margin-right: 8px;
				line-height: 0;
				/*				border-radius: 50%;*/
			}

			.sidebar-nav .nav-content a:hover,
			.sidebar-nav .nav-content a.active {
				color: var(--hover-color) !important;
				transform: translateX(5px); /* Efecto de desplazamiento en subitems */
			}

				.sidebar-nav .nav-content a.active i {
					/*background-color: var(--primary-color);*/
				}
/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
	position: absolute;
	right: 0px;
	top: 15px;
}

	.dashboard .filter .icon {
		color: var(--border-color);
		padding-right: 20px;
		padding-bottom: 5px;
		transition: 0.3s;
		font-size: 16px;
	}

		.dashboard .filter .icon:hover,
		.dashboard .filter .icon:focus {
			color: var(--primary-color);
		}

	.dashboard .filter .dropdown-header {
		padding: 8px 15px;
	}

		.dashboard .filter .dropdown-header h6 {
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 600;
			letter-spacing: 1px;
			color: var(--border-color);
			margin-bottom: 0;
			padding: 0;
		}

	.dashboard .filter .dropdown-item {
		padding: 8px 15px;
	}

/* Info Cards */
.dashboard .info-card {
	padding-bottom: 10px;
}

	.dashboard .info-card h6 {
		font-size: 28px;
		color: var(--text-primary);
		font-weight: 700;
		margin: 0;
		padding: 0;
	}

.dashboard .card-icon {
	font-size: 32px;
	line-height: 0;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	flex-grow: 0;
}

.dashboard .sales-card .card-icon {
	color: var(--primary-color);
	background: var(--light-background-primary);
}

.dashboard .revenue-card .card-icon {
	color: var(--secondary-color);
	background: var(--light-background-secondary);
}

.dashboard .customers-card .card-icon {
	color: var(--hover-color);
	background: var(--light-background-hover);
}

/* Activity */
.dashboard .activity {
	font-size: 14px;
}

	.dashboard .activity .activity-item .activite-label {
		color: var(--border-color);
		position: relative;
		flex-shrink: 0;
		flex-grow: 0;
		min-width: 64px;
	}

		.dashboard .activity .activity-item .activite-label::before {
			content: "";
			position: absolute;
			right: -11px;
			width: 4px;
			top: 0;
			bottom: 0;
			background-color: var(--light-background-primary);
		}

	.dashboard .activity .activity-item .activity-badge {
		margin-top: 3px;
		z-index: 1;
		font-size: 11px;
		line-height: 0;
		border-radius: 50%;
		flex-shrink: 0;
		border: 3px solid var(--background-color);
		flex-grow: 0;
	}

	.dashboard .activity .activity-item .activity-content {
		padding-left: 10px;
		padding-bottom: 20px;
	}

	.dashboard .activity .activity-item:first-child .activite-label::before {
		top: 5px;
	}

	.dashboard .activity .activity-item:last-child .activity-content {
		padding-bottom: 0;
	}

/* News & Updates */
.dashboard .news .post-item + .post-item {
	margin-top: 15px;
}

.dashboard .news img {
	width: 80px;
	float: left;
	border-radius: 5px;
}

.dashboard .news h4 {
	font-size: 15px;
	margin-left: 95px;
	font-weight: bold;
	margin-bottom: 5px;
}

	.dashboard .news h4 a {
		color: var(--text-primary);
		transition: 0.3s;
	}

		.dashboard .news h4 a:hover {
			color: var(--primary-color);
		}

.dashboard .news p {
	font-size: 14px;
	color: var(--text-secondary);
	margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
	font-size: 14px;
}

	.dashboard .recent-sales .table thead {
		background: var(--light-background-primary);
	}

		.dashboard .recent-sales .table thead th {
			border: 0;
		}

/* Top Selling */
.dashboard .top-selling {
	font-size: 14px;
}

	.dashboard .top-selling .table thead {
		background: var(--light-background-primary);
	}

		.dashboard .top-selling .table thead th {
			border: 0;
		}

	.dashboard .top-selling .table tbody td {
		vertical-align: middle;
	}

	.dashboard .top-selling img {
		border-radius: 5px;
		max-width: 60px;
	}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
	display: grid;
	max-width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.25rem;
	padding-top: 15px;
}

	.iconslist .icon {
		background-color: var(--background-color);
		border-radius: 0.25rem;
		text-align: center;
		color: var(--text-primary);
		padding: 15px 0;
	}

	.iconslist i {
		margin: 0.25rem;
		font-size: 2.5rem;
	}

	.iconslist .label {
		font-family: var(--bs-font-monospace);
		display: inline-block;
		width: 100%;
		overflow: hidden;
		padding: 0.25rem;
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--text-secondary);
	}

/*--------------------------------------------------------------
# Profile Page
--------------------------------------------------------------*/
.profile .profile-card img {
	max-width: 120px;
}

.profile .profile-card h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 10px 0 0 0;
}

.profile .profile-card h3 {
	font-size: 18px;
}

.profile .profile-card .social-links a {
	font-size: 20px;
	display: inline-block;
	color: rgba(1, 41, 112, 0.5);
	line-height: 0;
	margin-right: 10px;
	transition: 0.3s;
}

	.profile .profile-card .social-links a:hover {
		color: var(--primary-color);
	}

.profile .profile-overview .row {
	margin-bottom: 20px;
	font-size: 15px;
}

.profile .profile-overview .card-title {
	color: var(--text-primary);
}

.profile .profile-overview .label {
	font-weight: 600;
	color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
	font-weight: 600;
	color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
	max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color);
}

.faq .basic p {
	color: var(--text-secondary);
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
	padding: 28px 30px;
}

	.contact .info-box i {
		font-size: 38px;
		line-height: 0;
		color: var(--primary-color);
	}

	.contact .info-box h3 {
		font-size: 20px;
		color: var(--text-primary);
		font-weight: 700;
		margin: 20px 0 10px 0;
	}

	.contact .info-box p {
		padding: 0;
		line-height: 24px;
		font-size: 14px;
		margin-bottom: 0;
		color: var(--text-secondary);
	}

.contact .php-email-form .error-message {
	display: none;
	color: #fff;
	background: var(--danger-color);
	text-align: left;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.contact .php-email-form .sent-message {
	display: none;
	color: #fff;
	background: var(--success-color);
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.contact .php-email-form .loading {
	display: none;
	background: var(--background-color);
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
}

	.contact .php-email-form .loading:before {
		content: "";
		display: inline-block;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		margin: 0 10px -6px 0;
		border: 3px solid var(--success-color);
		border-top-color: #eee;
		-webkit-animation: animate-loading 1s linear infinite;
		animation: animate-loading 1s linear infinite;
	}

.contact .php-email-form input,
.contact .php-email-form textarea {
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
	border-radius: 0;
}

	.contact .php-email-form input:focus,
	.contact .php-email-form textarea:focus {
		border-color: var(--primary-color);
	}

.contact .php-email-form input {
	padding: 10px 15px;
}

.contact .php-email-form textarea {
	padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
	background: var(--primary-color);
	border: 0;
	padding: 10px 30px;
	color: var(--background-color);
	transition: 0.4s;
	border-radius: 4px;
}

	.contact .php-email-form button[type=submit]:hover {
		background: var(--hover-color);
	}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
	padding: 30px;
}

	.error-404 h1 {
		font-size: 180px;
		font-weight: 700;
		color: var(--primary-color);
		margin-bottom: 0;
		line-height: 150px;
	}

	.error-404 h2 {
		font-size: 24px;
		font-weight: 700;
		color: var(--text-primary);
		margin-bottom: 30px;
	}

	.error-404 .btn {
		background: var(--text-secondary);
		color: var(--background-color);
		padding: 8px 30px;
	}

		.error-404 .btn:hover {
			background: var(--hover-color);
		}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
	padding: 20px 0;
	font-size: 14px;
	transition: all 0.3s;
	border-top: 1px solid var(--border-color);
}

	.footer .copyright {
		text-align: center;
		color: var(--text-primary);
	}

	.footer .credits {
		padding-top: 5px;
		text-align: center;
		font-size: 13px;
		color: var(--text-primary);
	}

/*--------------------------------------------------------------
# Data Tables
--------------------------------------------------------------*/
.dataTables_length {
	margin-right: 10px;
}

.dataTables_length, button.dt-button, .paginate_button, .dataTables_info {
	font-size: 12px !important;
	color: var(--text-primary);
}

.datatable tr td, .datatable tr th {
	font-size: 14px !important;
	color: var(--text-primary);
}

/*--------------------------------------------------------------
# Custom Elements
--------------------------------------------------------------*/
.icnhover {
	color: var(--primary-color);
	cursor: pointer;
}

.btn-danger {
	background-color: var(--danger-color) !important;
}

.swal2-confirm {
	background-color: var(--primary-color);
	color: #ffffff;
	border: 1px solid var(--primary-color);
	padding: 10px 20px; /* Espaciado para una buena �rea de clic */
	font-weight: 600; /* Un poco m�s de peso para destacar */
	border-radius: 4px; /* Esquinas suavemente redondeadas */
	transition: all 0.3s ease; /* Transici�n suave al hacer hover */
}


	.swal2-confirm:hover {
		background-color: var(--hover-color);
		border: 1px solid var(--hover-color);
		color: #ffffff; /* Texto blanco */
		box-shadow: 0px 0px 10px var(--shadow-color); /* Sombra suave al hacer hover */
		cursor: pointer; /* Cambia el cursor para indicar clic */
	}

	.swal2-confirm:focus {
		box-shadow: 0 0 0 3px var(--primary-color) !important;
	}

.btn-danger:focus {
	box-shadow: 0 0 0 3px rgba(181, 17, 17, 0.5) !important;
}


.btn {
	background-color: var(--primary-color);
	color: #ffffff;
	border: 1px solid var(--primary-color);
	padding: 10px 20px; /* Espaciado para una buena �rea de clic */
	font-weight: 600; /* Un poco m�s de peso para destacar */
	border-radius: 10px; /* Esquinas suavemente redondeadas */
	transition: all 0.3s ease; /* Transici�n suave al hacer hover */
}

	.btn:hover {
		background-color: var(--hover-color);
		border: 1px solid var(--hover-color);
		color: #ffffff; /* Texto blanco */
		box-shadow: 0px 0px 10px var(--shadow-color); /* Sombra suave al hacer hover */
		cursor: pointer; /* Cambia el cursor para indicar clic */
	}

	.btn:active {
		background-color: var(--secondary-color); /* Color m�s oscuro al presionar */
		border: 1px solid var(--secondary-color); /* Borde m�s oscuro */
		color: #ffffff; /* Texto blanco */
		box-shadow: 0px 0px 5px var(--shadow-color); /* Sombra m�s reducida para indicar la interacci�n */
		transform: translateY(2px); /* Efecto de presi�n al hacer clic */
	}

	.btn:disabled {
		background-color: #bfcdb9; /* Un verde gris�ceo para botones deshabilitados */
		color: #ffffff; /* Texto blanco */
		border: 1px solid #bfcdb9; /* Borde del mismo color del fondo */
		cursor: not-allowed; /* Cursor de prohibido para deshabilitado */
		opacity: 0.6; /* M�s opaco para indicar estado deshabilitado */
	}

	.btn:focus {
		/* box-shadow: 0 0 0 3px var(--primary-color) !important; */
	}



.btn-primary {
	background-color: var(--primary-color);
	color: #ffffff; /* Texto blanco */
	border: 1px solid var(--primary-color); /* Borde del mismo color que el fondo */
	padding: 10px 20px; /* Espaciado para una buena �rea de clic */
	font-weight: 600; /* Un poco m�s de peso para destacar */
	border-radius: 10px; /* Esquinas suavemente redondeadas */
	transition: all 0.3s ease; /* Transici�n suave al hacer hover */
}

	.btn-primary:focus {
		box-shadow: 0 0 0 3px var(--primary-color) !important;
	}

	.btn-primary:hover {
		background-color: var(--hover-color); /* Cambia el fondo al verde hover */
		border: 1px solid var(--hover-color); /* Mantiene el borde del color hover */
		color: #ffffff; /* Texto blanco */
		box-shadow: 0px 0px 10px var(--shadow-color); /* Sombra suave al hacer hover */
		cursor: pointer; /* Cambia el cursor para indicar clic */
	}

	.btn-primary:active {
		background-color: var(--secondary-color); /* Color m�s oscuro al presionar */
		border: 1px solid var(--secondary-color); /* Borde m�s oscuro */
		color: #ffffff; /* Texto blanco */
		box-shadow: 0px 0px 5px var(--shadow-color); /* Sombra m�s reducida para indicar la interacci�n */
		transform: translateY(2px); /* Efecto de presi�n al hacer clic */
	}

	.btn-primary:disabled {
		background-color: #bfcdb9; /* Un verde gris�ceo para botones deshabilitados */
		color: #ffffff; /* Texto blanco */
		border: 1px solid #bfcdb9; /* Borde del mismo color del fondo */
		cursor: not-allowed; /* Cursor de prohibido para deshabilitado */
		opacity: 0.6; /* M�s opaco para indicar estado deshabilitado */
	}

/* Estilos para los tabs usando los colores definidos */
.nav-tabs {
	border-bottom: 2px solid var(--border-color); /* Borde inferior para separar la secci�n de las pesta�as */
}

	.nav-tabs .nav-link {
		color: var(--text-secondary); /* Color del texto de las pesta�as */
		border: 1px solid transparent; /* Borde transparente inicialmente */
		padding: 10px 15px; /* Espacio interno para mejor usabilidad */
		transition: all 0.3s ease-in-out; /* Transici�n suave al interactuar */
	}

		.nav-tabs .nav-link:hover {
			color: var(--hover-color); /* Color del texto al pasar el mouse */
			border-color: var(--hover-color); /* Borde cambia al color hover */
			background-color: var(--card-background); /* Fondo suave para destacar */
		}

		.nav-tabs .nav-link.active {
			color: var(--primary-color); /* Color del texto de la pesta�a activa */
			background-color: var(--light-background-primary); /* Fondo de la pesta�a activa */
			border: 1px solid var(--primary-color); /* Borde del color principal */
			border-bottom-color: var(--background-color); /* Quitar borde inferior para una apariencia de estar "conectado" */
		}

			.nav-tabs .nav-item.show .nav-link,
			.nav-tabs .nav-link.active:hover {
				background-color: var(--light-background-primary); /* Fondo suave para la pesta�a activa */
				color: var(--primary-color); /* Texto del color principal */
			}



/*--------------------------------------------------------------
# Visibility Controls
--------------------------------------------------------------*/
.ocultar {
	display: none;
	visibility: hidden;
}

.mostrar {
	visibility: visible;
}

/*--------------------------------------------------------------
# Select2 Bootstrap Integration
--------------------------------------------------------------*/
/* Estilo para el Select2 cuando se abre el dropdown */
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
	background-color: var(--select-highlight-color) !important; /* Fondo violeta para el resaltado */
	color: #ffffff !important; /* Texto blanco para visibilidad */
}

/* Ajustes adicionales para mantener consistencia */
.select2-container--bootstrap .select2-selection--single {
	height: 60px !important;
	border-color: var(--primary-color); /* Ajusta el borde con tu color primario */
	outline: none; /* Elimina el borde azul por defecto */
}


.select2-results, .select2-results__options, .form-floating:focus, .form-control:focus, .select2-selection--single:focus {
	border-color: var(--primary-color);
	outline: none !important;
	box-shadow: none !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
	margin-top: 25px !important;
	color: var(--text-primary);
}

/* Estilo para cuando el elemento est� seleccionado en el dropdown */
.select2-container--bootstrap .select2-results__option[aria-selected="true"] {
	background-color: var(--select-highlight-color) !important; /* Fondo violeta cuando est� seleccionado */
	color: #ffffff !important; /* Texto blanco */
}

.select2-container--bootstrap .select2-selection--single:focus {
	outline: none; /* Elimina el borde azul predeterminado */
	border: 2px solid var(--primary-color);
	box-shadow: 0 0 5px var(--primary-color);
}
/*--------------------------------------------------------------
# Width Classes
--------------------------------------------------------------*/
.ancho50 {
	width: 50px !important;
}

.ancho65 {
	width: 65px !important;
}

.ancho75 {
	width: 75px !important;
}

.ancho100 {
	width: 100px !important;
}

.ancho200 {
	width: 200px !important;
}

.ancho350 {
	width: 350px !important;
}

.ancho700 {
	width: 700px !important;
}

/*--------------------------------------------------------------
# Submit Button with Icon
--------------------------------------------------------------*/
.submitwithicon {
	font-family: bootstrap-icons !important;
	border: none;
	background-color: transparent;
}

	.submitwithicon:hover {
		color: var(--hover-color);
		cursor: pointer;
	}

/*--------------------------------------------------------------
# Loading Overlay
--------------------------------------------------------------*/
#EsperaPorProceso {
	background-color: var(--background-color);
	opacity: 0.8;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90000;
}

	#EsperaPorProceso img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

/*--------------------------------------------------------------
# Alert and Error Boxes
--------------------------------------------------------------*/
.mierrror {
	padding: 15px;
	background-color: var(--warning-color);
	border-radius: 10px;
	margin-bottom: 10px;
}

.bold {
	font-weight: bold !important;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.botonazul {
	color: #fff;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

	.botonazul:hover {
		background-color: var(--hover-color) !important;
		color: #fff !important;
	}

/*--------------------------------------------------------------
# Text Alignment and Cell Styles
--------------------------------------------------------------*/
.textAlignRight {
	text-align: right !important;
}

.celdaentreboletas {
	background-color: var(--secondary-color-light) !important;
}

/*--------------------------------------------------------------
# Input Styles
--------------------------------------------------------------*/
.inputStock {
	width: 80px;
	text-align: right;
	border: solid 1px var(--border-color);
	border-radius: 10px;
	padding: 5px;
}

/*--------------------------------------------------------------
# Secondary Buttons
--------------------------------------------------------------*/
.botonsecundario {
	color: #fff;
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}

	.botonsecundario:hover {
		background-color: var(--hover-color) !important;
		color: #fff !important;
	}

/*--------------------------------------------------------------
# Close Button
--------------------------------------------------------------*/
.close {
	border: solid 1px var(--border-color);
	border-radius: 50px;
}

	.close:hover {
		cursor: pointer;
	}

/*--------------------------------------------------------------
# Miscellaneous
--------------------------------------------------------------*/
.sinasignar {
	color: var(--primary-color);
}

.bi.bi-pen, .bi.bi-trash, .bi.bi-image-fill, .bi.bi-person-fill, .bi.bi-printer, .iconbi {
	font-size: 1rem !important;
	margin-right: 10px;
}

.div_circulo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.circulo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	color: var(--background-color);
	font-weight: bold;
	-webkit-text-stroke: 1px black;
}

	.circulo input {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: none;
	}

.nomargin-left {
	margin-left: 0 !important;
}

.nomargin-top {
	margin-top: 0 !important;
}

/*--------------------------------------------------------------
# Rows Styling
--------------------------------------------------------------*/
.renglones {
	height: calc(5 * 1.5em) !important;
}

/*--------------------------------------------------------------
# Sweet Alert
--------------------------------------------------------------*/
/* Contenedor principal */
.swal2-popup {
	background: var(--card-background) !important;
	color: var(--text-primary) !important;
	border-radius: 12px !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: 0 4px 20px var(--shadow-color) !important;
	font-family: inherit !important;
	padding: 1.8rem !important;
	width: auto !important;
	max-width: 32rem !important;
}

/* T�tulo */
.swal2-title {
	color: var(--primary-color) !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	margin-bottom: 0.8rem !important;
}

/* Texto del contenido */
.swal2-html-container {
	color: var(--text-secondary) !important;
	font-size: 1.05rem !important;
	line-height: 1.5 !important;
}

/* Botones */
.swal2-actions {
	margin: 1.5rem auto 0 !important;
	gap: 0.8rem !important;
}

.swal2-confirm {
	background: var(--secondary-color) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.6rem 1.8rem !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
}

	.swal2-confirm:hover {
		background: var(--hover-color) !important;
		transform: translateY(-1px);
		box-shadow: 0 2px 6px var(--shadow-color) !important;
	}

.swal2-cancel {
	background: var(--light-background-primary) !important;
	color: var(--text-primary) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.6rem 1.8rem !important;
	transition: all 0.2s ease !important;
}

	.swal2-cancel:hover {
		background: var(--light-background-secondary) !important;
		transform: translateY(-1px);
		box-shadow: 0 2px 6px var(--shadow-color) !important;
	}

/* BOTONES DE ELIMINAR */

/* Bot�n Eliminar (rojo) */
button.swal2-confirm.btn-danger {
	background: var(--danger-color) !important;
	color: white !important;
	border: none !important;
}
	/* Hover */
	button.swal2-confirm.btn-danger:hover {
		background: #c62828 !important; /* Rojo m�s oscuro */
		box-shadow: 0 2px 6px rgba(229, 57, 53, 0.3) !important;
	}
/* Selecciona el bot�n por su texto (usando atributo "aria-label") */
button.swal2-confirm[aria-label="Eliminar"] {
	background: var(--danger-color) !important;
	color: white !important;
}
/* ------------------- */


/* Inputs (si los usas) */
.swal2-input, .swal2-file, .swal2-textarea {
	border: 1px solid var(--border-color) !important;
	border-radius: 6px !important;
	color: var(--text-primary) !important;
}

	.swal2-input:focus {
		border-color: var(--secondary-color) !important;
		box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2) !important;
	}

/* Footer (opcional) */
.swal2-footer {
	border-top: 1px solid var(--dropdown-divider-color) !important;
	color: var(--text-secondary) !important;
}



/* TOOLTIP */
/* TOOLTIP ACÚRICO OSCURO CON ANIMACIÓN DE BURBUJA */

@import url(https://fonts.googleapis.com/css?family=Audiowide);
/* TOOLTIPS DE BOOTSTRAP CON EFECTO GLASSMORPHISM Y ANIMACIÓN */

/* Contenedor del tooltip */
.tooltip {
	position: absolute;
	z-index: 9999;
	pointer-events: none;
}
	/* Burbuja del tooltip con efecto glassmorphism */
	.tooltip .tooltip-inner {
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		color: black;
		font-size: 0.9rem;
		font-family: "Audiowide", sans-serif;
		font-weight: bold;
		padding: 0.5em 0.75em;
		border-radius: 1em;
		box-shadow: 0 4px 15px rgba(0,0,0,0.25);
		white-space: nowrap;
		/* Animación inicial */
		opacity: 0;
		transform: scale(0.8) translateY(10%);
		transition: all 0.3s ease;
	}

	/* Eliminar la flecha del tooltip */
	.tooltip .tooltip-arrow,
	.tooltip .tooltip-arrow::before {
		display: none !important;
	}

	/* Tooltip visible */
	.tooltip.show .tooltip-inner {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	.tooltip.fade:not(.show) {
		opacity: 0;
		transform: scale(0.8);
	}

	.tooltip.fade.show {
		opacity: 1;
		transform: scale(1);
	}





/* HEADER con efecto cristal */
#header {
	background: var(--primary-color-transparent);
	backdrop-filter: blur(2px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--header-text-color);
}



/* SIDEBAR con efecto cristal claro */
#sidebar {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px) saturate(180%);
	-webkit-backdrop-filter: blur(15px) saturate(180%);
	border-right: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
	transition: background 0.3s ease, backdrop-filter 0.3s ease;
}


	#sidebar ul.sidebar-nav li a i {
		font-size: 1.3rem !important;
		margin-right: 8px;
		vertical-align: middle;
	}



/* ===================================
   BASE DE DIALOGS (reutilizable)
   =================================== */

/* Dialog genérico */
dialog,
.dialog {
	border: none;
	padding: 0;
	border-radius: 22px;
	width: min(560px, 92vw);
	box-shadow: 0 22px 60px rgba(0,0,0,.35);
	overflow: hidden;
	background: transparent;
	/* Centrado pero OCULTO por defecto */
	position: fixed;
	inset: 0;
	margin: auto;
	max-height: 90vh; /* ✅ Limitar altura */
	display: none; /* ✅ OCULTO por defecto */
	opacity: 0; /* ✅ Transparente inicialmente */
	pointer-events: none; /* ✅ Sin interacción cuando cerrado */
}

	/* Fondo y desenfoque */
	dialog::backdrop {
		background: rgba(15, 18, 21, .35);
		backdrop-filter: blur(2px);
	}

	/* DIALOG ABIERTO - Ahora SÍ visible */
	dialog[open],
	.dialog[open] {
		display: flex !important; /* ✅ Mostrar */
		flex-direction: column; /* ✅ Estructura vertical */
		opacity: 1; /* ✅ Visible */
		pointer-events: auto; /* ✅ Interactivo */
		animation: dlg-pop 160ms ease-out;
		z-index: 2000;
	}

@keyframes dlg-pop {
	from {
		transform: scale(.98);
		opacity: .6;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Estructura interna */
.dlg-header,
.dlg-footer {
	padding: 14px 16px;
	background: #f7f8f9;
	flex-shrink: 0; /* ✅ No se comprime */
}

.dlg-body {
	padding: 16px;
	background: #fff;
	flex: 1; /* ✅ Ocupa espacio disponible */
	overflow-y: auto; /* ✅ SCROLL AQUÍ */
	max-height: calc(90vh - 140px); /* ✅ Altura máxima calculada */
}

	/* Scroll personalizado para .dlg-body */
	.dlg-body::-webkit-scrollbar {
		width: 8px;
	}

	.dlg-body::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 4px;
	}

	.dlg-body::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 4px;
	}

		.dlg-body::-webkit-scrollbar-thumb:hover {
			background: #555;
		}

/* Encabezado */
.dlg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

	.dlg-header h4,
	.dlg-header h5 {
		margin: 0;
		font-weight: 600;
	}

/* Botón de cierre */
.dlg-close {
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 6px;
	border-radius: 10px;
}

	.dlg-close:hover {
		background: #e9ecef;
	}

/* Footer: cerrar a izquierda, procesar a derecha */
.dlg-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* ===================================
   ANIMACIONES VIEW-TRANSITION
   =================================== */

:root {
	view-transition-name: none;
}

::view-transition {
	pointer-events: none;
}

::view-transition-group(vt-open),
::view-transition-group(vt-close) {
	animation-duration: 350ms;
	animation-timing-function: cubic-bezier(0.38,0.49,0,1);
}

/* fade in/out */
@keyframes vt-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes vt-fade-out {
	to {
		opacity: 0;
	}
}

::view-transition-new(vt-open) {
	animation: vt-fade-in 300ms both cubic-bezier(0.38,0.49,0,1);
}

::view-transition-old(vt-close) {
	animation: vt-fade-out 300ms both cubic-bezier(.75,0,.41,-0.6);
}

/* 1) Apertura (vt-open): el fotograma OLD desaparece */
@keyframes vt-old-vanish {
	0%, 99%, 100% {
		opacity: 0;
		transform: scale(1);
	}
}

::view-transition-old(vt-open) {
	animation: vt-old-vanish 140ms linear both;
	clip-path: inset(0 round 8px);
	transform-origin: center;
}




.select2-container--bootstrap-5 .select2-selection {
	min-height: calc(3.5rem + 2px) !important;
	padding: .75rem 1rem !important;
	font-size: 1rem !important;
	border-radius: .375rem !important;
	border: 1px solid #ced4da !important;
}

.select2-container--bootstrap-5 .select2-selection__rendered {
	line-height: 1.5rem !important;
}

.select2-container--bootstrap-5 .select2-selection__arrow {
	top: .9rem !important;
}



/* ==============================================
   TAMAÑOS DE DIALOGS ESPECÍFICOS (pantallas grandes)
   ============================================== */
#dialog-repuesto-3ro,
#dialog-repuesto-simple,
#dialog-repuesto-propio,
#dialog-repar-gtia {
	width: 75vw !important;
}

#dialog-presupuesto,
#dialog-servicios-vehiculo {
	width: 65vw !important;
}

/* ==============================================
   DIALOGS EN PANTALLAS PEQUEÑAS - CASI FULL SCREEN
   Aplica a TODOS los dialogs
   ============================================== */
@media (max-width: 992px) {
	/* TODOS los dialogs ocupan casi toda la pantalla */
	dialog,
	.dialog {
		width: 98vw !important;
		max-width: 98vw !important;
		max-height: 95vh !important;
		margin: 2.5vh auto !important;
		border-radius: 12px !important;
	}

		/* Ajustar el body de TODOS los dialogs para mejor scroll */
		dialog .dlg-body,
		.dialog .dlg-body {
			max-height: calc(95vh - 140px) !important;
			overflow-y: auto !important;
		}

		/* Footer con botones más compactos */
		dialog .dlg-footer,
		.dialog .dlg-footer {
			padding: 10px 12px !important;
			flex-wrap: wrap !important;
			gap: 8px !important;
		}

			/* Botones más pequeños en pantallas chicas */
			dialog .dlg-footer .btn,
			.dialog .dlg-footer .btn {
				padding: 8px 12px !important;
				font-size: 0.85rem !important;
			}
}

/* Pantallas muy pequeñas (móviles) - FULL SCREEN */
@media (max-width: 576px) {
	/* TODOS los dialogs en full screen */
	dialog,
	.dialog {
		width: 100vw !important;
		max-width: 100vw !important;
		max-height: 100vh !important;
		height: 100vh !important;
		margin: 0 !important;
		border-radius: 0 !important;
		inset: 0 !important;
	}

		/* Body ocupa todo el espacio disponible */
		dialog .dlg-body,
		.dialog .dlg-body {
			max-height: calc(100vh - 120px) !important;
			flex: 1 !important;
		}

		/* Header más compacto */
		dialog .dlg-header,
		.dialog .dlg-header {
			padding: 10px 12px !important;
		}

			dialog .dlg-header h4,
			dialog .dlg-header h5,
			.dialog .dlg-header h4,
			.dialog .dlg-header h5 {
				font-size: 1rem !important;
			}

		/* Footer en columna para móviles */
		dialog .dlg-footer,
		.dialog .dlg-footer {
			flex-direction: column !important;
			align-items: stretch !important;
			padding: 8px 10px !important;
		}

			dialog .dlg-footer .btn,
			.dialog .dlg-footer .btn {
				width: 100% !important;
				margin: 2px 0 !important;
			}
}

/* ==============================================
   FIX: SweetAlert2 siempre encima de dialogs
   ============================================== */
.swal2-container {
	z-index: 999999 !important;
}

	/* Backdrop de SweetAlert también debe estar alto */
	.swal2-container.swal2-backdrop-show {
		z-index: 999998 !important;
	}

#dialog-presupuesto .select2-results__options {
	max-height: 220px !important;
}

#dialog-presupuesto {
	position: relative; /* necesario para top/left del dropdown */
}


#dialog-servicios-vehiculo .select2-results__options {
	max-height: 220px !important;
}

#dialog-servicios-vehiculo {
	position: relative; /* necesario para top/left del dropdown */
}

.h-200 {
	height: 200px !important;
}


/*--------------------------------------------------------------
# Dialog Foto Vehículo
--------------------------------------------------------------*/

/* Dialog de foto - ancho adaptativo */
#dialog-foto-vehiculo {
	width: min(90vw, 900px) !important;
}

/* Miniatura clickeable */
.foto-miniatura-vehiculo {
	cursor: pointer;
	transition: transform 0.2s ease;
}

	.foto-miniatura-vehiculo:hover {
		transform: scale(1.05);
	}

/* Responsive */
@media (max-width: 768px) {
	#dialog-foto-vehiculo {
		width: 95vw !important;
	}
}



/* Efecto hover para las cards de accesos directos */
.hover-card {
	transition: all 0.3s ease;
	cursor: pointer;
}

	.hover-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
	}

	.hover-card i {
		transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		display: inline-block;
	}

	.hover-card:hover i {
		transform: translateY(-8px) rotate(5deg) scale(1.15);
	}

	.hover-card a {
		color: inherit;
	}
/* FIN Efecto hover para las cards de accesos directos */