/* ============================================================================
   GAR BPO — Refresh visual (piloto login + dashboard)
   ----------------------------------------------------------------------------
   Refinamiento de la identidad azul corporativa actual.
   Solo reglas visuales — no asume cambios en el markup existente.
   Se carga DESPUÉS de styles.css / authentication.css / dashboard-projects.css
   para ganar la cascada con selectores de igual o mayor especificidad.
   ============================================================================ */

/* ------------------------------ Design Tokens ------------------------------ */
:root {
	/* Paleta brand — azul corporativo refinado (partiendo del #497cb1 original) */
	--color-brand-50:  #eff5fc;
	--color-brand-100: #dbe9f8;
	--color-brand-200: #b8d4f1;
	--color-brand-300: #7fb0e4;
	--color-brand-400: #4f8ece;
	--color-brand-500: #2563a0;
	--color-brand-600: #1d4e84;
	--color-brand-700: #173d6a;
	--color-brand-800: #112e50;
	--color-brand-900: #0d2643;

	/* Neutros fríos (reemplazan al gris cálido original) */
	--color-neutral-0:   #ffffff;
	--color-neutral-50:  #f8fafc;
	--color-neutral-100: #f1f5f9;
	--color-neutral-200: #e2e8f0;
	--color-neutral-300: #cbd5e1;
	--color-neutral-400: #94a3b8;
	--color-neutral-500: #64748b;
	--color-neutral-600: #475569;
	--color-neutral-700: #334155;
	--color-neutral-800: #1e293b;
	--color-neutral-900: #0f172a;

	/* Semánticos */
	--color-success-500: #16a34a;
	--color-success-600: #15803d;
	--color-warning-500: #f59e0b;
	--color-warning-600: #d97706;
	--color-danger-500:  #dc2626;
	--color-danger-600:  #b91c1c;
	--color-info-500:    #0284c7;
	--color-info-600:    #0369a1;

	/* Acentos para KPIs (complementan el brand) */
	--color-accent-teal:   #0d9488;
	--color-accent-indigo: #4338ca;

	/* Tipografía */
	--font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--text-xs:   11px;
	--text-sm:   12px;
	--text-base: 13px;
	--text-md:   14px;
	--text-lg:   16px;
	--text-xl:   18px;
	--text-2xl:  22px;
	--text-3xl:  28px;
	--text-4xl:  34px;
	--leading-tight:  1.25;
	--leading-normal: 1.5;
	--leading-relax:  1.65;

	/* Spacing (escala 4px) */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Radios */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 14px;
	--radius-2xl: 20px;

	/* Sombras (apiladas, suaves) */
	--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
	--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
	--shadow-focus-brand: 0 0 0 3px rgba(37, 99, 160, 0.18);

	/* Transiciones */
	--transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition:      160ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------ Base global ------------------------------- */
html {
	background: var(--color-neutral-50);
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-neutral-700);
	background: var(--color-neutral-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container-fluid {
	padding-left: var(--space-8);
	padding-right: var(--space-8);
}

/* Headings más respirados */
h1, h2, h3, h4, h5, h6 {
	color: var(--color-neutral-800);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: var(--leading-tight);
}

/* ------------------------------ Links ------------------------------------- */
a {
	color: var(--color-brand-500);
	transition: color var(--transition-fast);
}
a:hover,
a:focus {
	color: var(--color-brand-700);
	text-decoration: none;
}

/* ------------------------------ Header ------------------------------------ */
.header {
	background: var(--color-neutral-0);
	border-bottom: 1px solid var(--color-neutral-200);
	box-shadow: var(--shadow-xs);
	height: 72px;
}

.header .branding,
.theme-3 .header .branding {
	background: var(--color-neutral-900);
	height: 72px;
	box-shadow: none;
}

.header .topbar {
	height: 72px;
}

.header .main-nav-toggle {
	color: var(--color-neutral-500);
	transition: color var(--transition-fast);
}
.header .main-nav-toggle:hover .icon,
.header .main-nav-toggle:hover .icon-bar {
	color: var(--color-brand-500);
}

.header .search-container .main-search-input {
	border: 1px solid transparent;
	background: var(--color-neutral-100);
	border-radius: var(--radius-md);
	padding-left: var(--space-5);
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.header .search-container .main-search-input:focus {
	background: var(--color-neutral-0);
	border-color: var(--color-brand-300);
	box-shadow: var(--shadow-focus-brand);
	outline: none;
}

/* Iconos de utilities del header */
.header .utilities-container .item .icon {
	color: var(--color-neutral-500);
	transition: color var(--transition-fast);
}
.header .utilities-container .item:hover .icon {
	color: var(--color-brand-500);
}

.header .user-container img {
	border: 2px solid var(--color-neutral-200);
	border-radius: 50%;
	transition: border-color var(--transition-fast);
}
.header .user-container:hover img {
	border-color: var(--color-brand-300);
}

/* ------------------------------ Sidebar ----------------------------------- */
.main-nav-wrapper,
.main-nav-wrapper .main-nav,
.main-nav-wrapper .main-nav > div,
.main-nav-wrapper .main-nav ul,
.main-nav-wrapper .main-nav li .sub-menu {
	background-color: var(--color-neutral-900);
}

.main-nav-wrapper .main-nav li a {
	color: rgba(255, 255, 255, 0.7);
	padding: var(--space-3) var(--space-5);
	font-weight: 400;
	font-size: var(--text-md);
	border-left: 3px solid transparent;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.main-nav-wrapper .main-nav li a:hover,
.main-nav-wrapper .main-nav li a:focus {
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-neutral-0);
	border-left-color: var(--color-brand-300);
}

.main-nav-wrapper .main-nav li.active > a,
.main-nav-wrapper .main-nav li .sub-menu li.active > a {
	background: rgba(37, 99, 160, 0.30);
	color: var(--color-neutral-0);
	border-left-color: var(--color-brand-400);
	font-weight: 600;
}

.main-nav-wrapper .main-nav li a .icon {
	color: var(--color-neutral-400);
	transition: color var(--transition-fast);
	margin-right: var(--space-3);
}
.main-nav-wrapper .main-nav li a:hover .icon,
.main-nav-wrapper .main-nav li.active > a .icon {
	color: var(--color-brand-300);
}

.main-nav-wrapper .main-nav li .sub-menu li a {
	padding-left: var(--space-10);
	font-size: var(--text-sm);
	background: transparent;
}
.main-nav-wrapper .main-nav li .sub-menu li a:hover {
	background: rgba(255, 255, 255, 0.04);
}

.main-nav-wrapper .main-nav li.divider {
	background: rgba(255, 255, 255, 0.06);
	margin: var(--space-2) var(--space-5);
}

/* ------------------------------ Content wrapper & titles ----------------- */
.content-wrapper {
	background: var(--color-neutral-50);
	padding-top: var(--space-8);
	padding-bottom: var(--space-12);
}

.content-wrapper .view-title {
	color: var(--color-neutral-900);
	font-size: var(--text-3xl);
	font-weight: 300;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-6) 0;
}
.content-wrapper .view-title strong {
	font-weight: 600;
	color: var(--color-brand-600);
}

/* ------------------------------ Module cards ------------------------------ */
.module {
	margin-bottom: var(--space-6);
}
.module .module-inner {
	background: var(--color-neutral-0);
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition-slow);
}
.module:hover .module-inner {
	box-shadow: var(--shadow-md);
}

.module .module-heading {
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--color-neutral-100);
	background: var(--color-neutral-0);
}
.module .module-heading .module-title {
	color: var(--color-neutral-800);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.005em;
	margin: 0;
}

.module .module-heading .actions li a {
	color: var(--color-neutral-400);
	transition: color var(--transition-fast);
}
.module .module-heading .actions li a:hover {
	color: var(--color-brand-500);
}

.module .module-content .module-content-inner {
	padding: var(--space-6);
}

.module .module-footer {
	background: var(--color-neutral-50);
	border-top: 1px solid var(--color-neutral-100);
	padding: var(--space-4) var(--space-6);
}

/* ------------------------------ Dashboard KPIs --------------------------- */
.module-projects-overview .data-list {
	padding: var(--space-2) 0 var(--space-6) 0;
	margin-bottom: var(--space-6);
}

.module-projects-overview .item a {
	padding: var(--space-6) var(--space-5);
	border-radius: var(--radius-lg);
	color: var(--color-neutral-0);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
	position: relative;
	overflow: hidden;
}
.module-projects-overview .item a:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
	pointer-events: none;
}
.module-projects-overview .item a:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.module-projects-overview .item .icon {
	font-size: 22px;
	margin-bottom: var(--space-3);
	opacity: 0.9;
}
.module-projects-overview .item .data {
	font-size: var(--text-4xl);
	font-weight: 200;
	line-height: 1;
	margin: var(--space-1) 0 var(--space-2) 0;
	letter-spacing: -0.02em;
}
.module-projects-overview .item .desc {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.85;
	font-weight: 600;
}

/* Paleta refinada para las 4 KPI cards — sobria y coherente */
.module-projects-overview .item-1 a,
.module-projects-overview .item-1 a:hover {
	background: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);
}
.module-projects-overview .item-2 a,
.module-projects-overview .item-2 a:hover {
	background: linear-gradient(135deg, var(--color-accent-teal) 0%, #0f766e 100%);
}
.module-projects-overview .item-3 a,
.module-projects-overview .item-3 a:hover {
	background: linear-gradient(135deg, var(--color-brand-700) 0%, var(--color-brand-900) 100%);
}
.module-projects-overview .item-4 a,
.module-projects-overview .item-4 a:hover {
	background: linear-gradient(135deg, var(--color-accent-indigo) 0%, #312e81 100%);
}

.module-projects-overview .title {
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--color-neutral-700);
	margin-bottom: var(--space-3);
}
.module-projects-overview .title .icon {
	color: var(--color-brand-500);
}
.module-projects-overview .inner {
	padding: var(--space-5);
	background: var(--color-neutral-50);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-neutral-100);
}

/* ------------------------------ Buttons ----------------------------------- */
.btn {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--text-base);
	letter-spacing: 0.01em;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	padding: var(--space-2) var(--space-5);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	box-shadow: var(--shadow-xs);
}
.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
.btn:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
}
.btn:focus {
	outline: none;
	box-shadow: var(--shadow-focus-brand);
}

.btn-lg {
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-md);
	border-radius: var(--radius-md);
}
.btn-sm {
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-sm);
}

.btn-primary {
	background: var(--color-brand-500);
	border-color: var(--color-brand-500);
	color: var(--color-neutral-0);
}
.btn-primary:hover,
.btn-primary:focus {
	background: var(--color-brand-600);
	border-color: var(--color-brand-600);
	color: var(--color-neutral-0);
}

.btn-success {
	background: var(--color-success-500);
	border-color: var(--color-success-500);
	color: var(--color-neutral-0);
}
.btn-success:hover,
.btn-success:focus {
	background: var(--color-success-600);
	border-color: var(--color-success-600);
	color: var(--color-neutral-0);
}

.btn-warning {
	background: var(--color-warning-500);
	border-color: var(--color-warning-500);
	color: var(--color-neutral-0);
}
.btn-warning:hover,
.btn-warning:focus {
	background: var(--color-warning-600);
	border-color: var(--color-warning-600);
	color: var(--color-neutral-0);
}

.btn-danger {
	background: var(--color-danger-500);
	border-color: var(--color-danger-500);
	color: var(--color-neutral-0);
}
.btn-danger:hover,
.btn-danger:focus {
	background: var(--color-danger-600);
	border-color: var(--color-danger-600);
	color: var(--color-neutral-0);
}

.btn-default {
	background: var(--color-neutral-0);
	border-color: var(--color-neutral-200);
	color: var(--color-neutral-700);
}
.btn-default:hover,
.btn-default:focus {
	background: var(--color-neutral-50);
	border-color: var(--color-neutral-300);
	color: var(--color-neutral-900);
}

/* ------------------------------ Form inputs ------------------------------- */
.form-control {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--color-neutral-800);
	background: var(--color-neutral-0);
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	height: 38px;
	box-shadow: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
	border-color: var(--color-brand-400);
	box-shadow: var(--shadow-focus-brand);
	outline: none;
}
.form-control::-webkit-input-placeholder { color: var(--color-neutral-400); }
.form-control::-moz-placeholder          { color: var(--color-neutral-400); opacity: 1; }
.form-control:-ms-input-placeholder      { color: var(--color-neutral-400); }

.input-lg,
.input-group-lg > .form-control {
	height: 46px;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-md);
}

.input-group-addon {
	background: var(--color-neutral-50);
	border: 1px solid var(--color-neutral-200);
	color: var(--color-neutral-500);
	border-radius: var(--radius-md);
}

/* Labels */
label,
.control-label {
	color: var(--color-neutral-700);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: 0.01em;
}

/* ------------------------------ Login page --------------------------------
   Estrategia: refinar sin pelear con authentication.css. Cambiamos fondo,
   radio, sombras, colores del botón y focus ring de inputs; dejamos el
   posicionamiento de íconos y estructura del formulario como están.
   ------------------------------------------------------------------------- */
body.layout-no-leftnav {
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 55%),
		linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 55%, var(--color-brand-600) 100%);
	min-height: 100vh;
}

.auth-section {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

/* Unificar heading (logo) e inner (formulario) en una sola card con radio completo */
.auth-section .form-box .form-box-heading {
	background: var(--color-neutral-0);
	padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	margin-bottom: 0;
	border: none;
	border-bottom: none;
	box-shadow: none;
}
/* Quitar el triangulito decorativo original */
.auth-section .form-box .form-box-heading:before {
	display: none;
}
.auth-section .form-box .form-box-heading img {
	max-width: 180px;
	height: auto;
	display: inline-block;
}

.auth-section .form-box .form-box-inner {
	background: var(--color-neutral-0);
	padding: var(--space-4) var(--space-8) var(--space-8) var(--space-8);
	border: none;
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.auth-section .form-box .title {
	font-size: var(--text-xl);
	font-weight: 400;
	color: var(--color-neutral-800);
	margin-top: 0;
	margin-bottom: var(--space-6);
	letter-spacing: -0.01em;
}
.auth-section .form-box .title strong {
	font-weight: 700;
}

/* Inputs del login — respeta padding-left: 30px de authentication.css
   (el ícono vive en left:10px top:9px) y solo refina colores/focus. */
.auth-section .form-control {
	background: var(--color-neutral-50);
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	color: var(--color-neutral-800);
	transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-section .form-control:focus {
	background: var(--color-neutral-0);
	border-color: var(--color-brand-400);
	box-shadow: var(--shadow-focus-brand);
	outline: none;
}

/* Recolor del ícono del input para que combine con el tema */
.auth-section .form-group.email .icon,
.auth-section .form-group.password .icon {
	color: var(--color-neutral-400);
}

/* Checkbox — solo separación, sin fondo */
.auth-section .checkbox {
	margin-top: var(--space-2);
	margin-bottom: var(--space-3);
}
.auth-section .checkbox label {
	color: var(--color-neutral-600);
	font-size: var(--text-sm);
	font-weight: 400;
}

/* Botón de login — color/radius/uppercase, sin tocar su display.
   El `<center>` tag del HTML ya lo centra; mantenemos el botón como inline-block. */
.auth-section #btnLogin.btn.btn-success {
	background: var(--color-brand-500);
	border-color: var(--color-brand-500);
	color: var(--color-neutral-0);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-10);
	font-size: var(--text-md);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: var(--shadow-sm);
	margin-top: var(--space-2);
	margin-bottom: var(--space-2);
}
.auth-section #btnLogin.btn.btn-success:hover,
.auth-section #btnLogin.btn.btn-success:focus {
	background: var(--color-brand-600);
	border-color: var(--color-brand-600);
	color: var(--color-neutral-0);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.auth-section .alt-path {
	margin-top: var(--space-5);
	margin-bottom: 0;
	font-size: var(--text-sm);
	color: var(--color-neutral-500);
}
.auth-section .alt-path a.signup-link {
	color: var(--color-brand-500);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition-fast);
}
.auth-section .alt-path a.signup-link:hover {
	color: var(--color-brand-700);
	text-decoration: underline;
}

.auth-section .copyright {
	margin-top: var(--space-10);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--text-xs);
}
.auth-section .copyright a {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
}
.auth-section .copyright a:hover {
	color: var(--color-neutral-0);
}

/* ------------------------------ Footer global ----------------------------- */
.site-footer {
	background: var(--color-neutral-0);
	border-top: 1px solid var(--color-neutral-200);
	padding: var(--space-4) var(--space-8);
	color: var(--color-neutral-500);
	font-size: var(--text-xs);
}
.site-footer strong {
	color: var(--color-neutral-800);
}
.site-footer a {
	color: var(--color-brand-500);
	font-weight: 600;
}

/* ------------------------------ Dropdown menus (header) ------------------- */
.dropdown-menu {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-1) 0;
}
.dropdown-menu > li > a {
	padding: var(--space-2) var(--space-4);
	color: var(--color-neutral-700);
	font-size: var(--text-base);
	transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--color-brand-50);
	color: var(--color-brand-700);
}
.dropdown-menu .dropdown-footer {
	background: var(--color-neutral-50);
	border-top: 1px solid var(--color-neutral-100);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding: var(--space-3) var(--space-4);
}

/* ------------------------------ Datepicker (Bootstrap datepicker) --------- */
.datepicker.dropdown-menu,
.datepicker-dropdown {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-neutral-200);
	padding: var(--space-3);
}
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active {
	background: var(--color-brand-500);
	border-color: var(--color-brand-500);
	color: var(--color-neutral-0);
}

/* ------------------------------ Pace progress bar ------------------------- */
.theme-3 .pace .pace-progress,
.pace .pace-progress {
	background: var(--color-brand-500);
	height: 3px;
}

/* ------------------------------ Modals ------------------------------------ */
.modal-backdrop {
	background-color: var(--color-neutral-900);
}
.modal-backdrop.in {
	opacity: 0.6;
}

.modal-content {
	border: none;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15, 23, 42, 0.04);
	overflow: hidden;
}

.modal-header {
	padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--color-neutral-100);
	background: var(--color-neutral-0);
}

.modal-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-neutral-900);
	letter-spacing: -0.01em;
}

.modal-body {
	padding: var(--space-6);
	color: var(--color-neutral-700);
}

.modal-footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-neutral-100);
	background: var(--color-neutral-50);
}

.modal button.close {
	color: var(--color-neutral-400);
	opacity: 0.7;
	font-size: 24px;
	font-weight: 300;
	transition: opacity var(--transition-fast), color var(--transition-fast);
}
.modal button.close:hover {
	color: var(--color-neutral-700);
	opacity: 1;
}

/* Animación de entrada más suave */
.modal.fade .modal-dialog {
	transform: translateY(-20px) scale(0.98);
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.modal.in .modal-dialog {
	transform: translateY(0) scale(1);
}

/* Form controls dentro de modales — heredan el refresh automáticamente,
   pero ajustamos el label spacing para que se vea más limpio */
.modal-body .form-group {
	margin-bottom: var(--space-4);
}
.modal-body label {
	margin-bottom: var(--space-1);
}

/* Chosen/Select2 dentro de modales */
.modal .chosen-container .chosen-single,
.modal .select2-container .select2-choice {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	height: 38px;
	line-height: 36px;
	background: var(--color-neutral-0);
	box-shadow: none;
}

/* ------------------------------ Tables & DataTables ----------------------- */
.table {
	border-color: var(--color-neutral-200);
	margin-bottom: 0;
}
.table > thead > tr > th {
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-neutral-500);
	padding: var(--space-3) var(--space-4);
	border-bottom: 2px solid var(--color-neutral-200);
	border-top: none;
	background: var(--color-neutral-50);
	white-space: nowrap;
}
.table > thead > tr > td {
	border-color: var(--color-neutral-200);
}
.table > tbody > tr > td,
.table > tbody > tr > th {
	padding: var(--space-3) var(--space-4);
	border-color: var(--color-neutral-100);
	color: var(--color-neutral-700);
	font-size: var(--text-sm);
	vertical-align: middle;
	white-space: nowrap;
}
.table > tbody > tr > th {
	font-weight: 600;
	color: var(--color-neutral-800);
}
.table-striped > tbody > tr:nth-of-type(odd) {
	background: var(--color-neutral-50);
}
.table-hover > tbody > tr:hover {
	background: var(--color-brand-50);
}
.table > tbody > tr.active > td,
.table > tbody > tr.active > th {
	background: var(--color-brand-50);
}

/* DataTables wrapper — espaciado general */
.dataTables_wrapper {
	padding: var(--space-4) 0;
}

/* Search input */
div.dataTables_filter input {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-neutral-700);
	background: var(--color-neutral-0);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	outline: none;
	height: 34px;
}
div.dataTables_filter input:focus {
	border-color: var(--color-brand-400);
	box-shadow: var(--shadow-focus-brand);
}

div.dataTables_filter label,
div.dataTables_length label {
	color: var(--color-neutral-500);
	font-size: var(--text-sm);
	font-weight: 400;
}

/* Length select dropdown */
div.dataTables_length select {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-neutral-700);
	background: var(--color-neutral-0);
	height: 34px;
	transition: border-color var(--transition-fast);
}
div.dataTables_length select:focus {
	border-color: var(--color-brand-400);
	outline: none;
}

/* Info text (ej. "Mostrando 1 a 10 de 50") */
div.dataTables_info {
	color: var(--color-neutral-500);
	font-size: var(--text-sm);
	padding-top: var(--space-4);
}

/* Pagination */
div.dataTables_paginate ul.pagination {
	margin: var(--space-3) 0;
}
div.dataTables_paginate ul.pagination > li > a,
div.dataTables_paginate ul.pagination > li > span {
	color: var(--color-neutral-600);
	border-color: var(--color-neutral-200);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	background: var(--color-neutral-0);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
div.dataTables_paginate ul.pagination > li > a:hover {
	background: var(--color-brand-50);
	color: var(--color-brand-600);
	border-color: var(--color-brand-200);
}
div.dataTables_paginate ul.pagination > .active > a,
div.dataTables_paginate ul.pagination > .active > a:hover,
div.dataTables_paginate ul.pagination > .active > span {
	background: var(--color-brand-500);
	border-color: var(--color-brand-500);
	color: var(--color-neutral-0);
}
div.dataTables_paginate ul.pagination > .disabled > a,
div.dataTables_paginate ul.pagination > .disabled > span {
	color: var(--color-neutral-300);
	background: var(--color-neutral-50);
}

/* Export buttons (html5buttons) */
.html5buttons {
	margin-bottom: var(--space-3);
}
.html5buttons .btn {
	font-size: var(--text-xs);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-neutral-0);
	border: 1px solid var(--color-neutral-200);
	color: var(--color-neutral-600);
	font-weight: 600;
	box-shadow: none;
}
.html5buttons .btn:hover {
	background: var(--color-brand-50);
	border-color: var(--color-brand-200);
	color: var(--color-brand-600);
	transform: none;
}
.html5buttons .btn:focus {
	box-shadow: var(--shadow-focus-brand);
}

/* ------------------------------ Utility overrides ------------------------- */
.text-theme,
.theme-3 .text-theme {
	color: var(--color-brand-500);
}
.bg-theme,
.theme-3 .bg-theme {
	background: var(--color-brand-500);
}

/* Scrollbar sutil (WebKit) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--color-neutral-100);
}
::-webkit-scrollbar-thumb {
	background: var(--color-neutral-300);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-neutral-100);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--color-neutral-400);
}

/* Selection */
::selection {
	background: var(--color-brand-200);
	color: var(--color-brand-900);
}