/* ==========================================================================
   ui-premium-components.css  -  SISTEMA DE DISEÑO (SOLO DISEÑO)
   Botones, formularios, tablas, DataTables, select2, calendarios, switches,
   checks, modales, tabs, etiquetas, alertas, paginación, toastr...
   Se carga DESPUÉS de ui-premium.css (que maneja header + sidebar).
   No cambia ids, names ni comportamiento: solo apariencia.
   v1 - 2026-09-17
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS  (amplían los de ui-premium.css)
   -------------------------------------------------------------------------- */
:root {
	/* Neutros */
	--px-ink-900: #0f172a;
	--px-ink-800: #1e293b;
	--px-ink-700: #334155;
	--px-ink-500: #64748b;
	--px-ink-400: #94a3b8;
	--px-line: #e2e8f0;
	--px-line-soft: #eef2f7;
	--px-surface: #ffffff;
	--px-surface-2: #f8fafc;
	--px-page: #f5f8fd;

	/* Semánticos: color base / tinte suave / texto sobre tinte */
	--px-success: #059669;
	--px-success-soft: #d1fae5;
	--px-success-ink: #047857;
	--px-success-grad: linear-gradient(135deg, #047857 0%, #10b981 100%);

	--px-info: #0891b2;
	--px-info-soft: #cffafe;
	--px-info-ink: #0e7490;
	--px-info-grad: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);

	--px-warning: #d97706;
	--px-warning-soft: #fef3c7;
	--px-warning-ink: #b45309;
	--px-warning-grad: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);

	--px-danger: #dc2626;
	--px-danger-soft: #fee2e2;
	--px-danger-ink: #b91c1c;
	--px-danger-grad: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);

	--px-purple: #7c3aed;
	--px-purple-soft: #ede9fe;
	--px-purple-ink: #6d28d9;
	--px-purple-grad: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);

	--px-dark-grad: linear-gradient(135deg, #0a1631 0%, #14306b 100%);
	--px-primary-grad: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);

	/* Forma */
	--px-r-xs: 6px;
	--px-r-sm: 8px;
	--px-r-md: 10px;
	--px-r-lg: 14px;
	--px-r-xl: 18px;
	--px-r-pill: 999px;

	--px-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
	--px-shadow-sm: 0 2px 8px rgba(10, 22, 49, .06);
	--px-shadow-md: 0 8px 24px rgba(10, 22, 49, .10);
	--px-shadow-lg: 0 24px 60px rgba(10, 22, 49, .22);
	--px-ring: 0 0 0 3px rgba(37, 99, 235, .15);
	--px-ring-danger: 0 0 0 3px rgba(220, 38, 38, .14);

	--px-field-h: 38px;
	--px-field-bg: #f6f8fc;
	--px-field-border: #dbe3ef;

	--px-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   1. BASE / TIPOGRAFÍA
   -------------------------------------------------------------------------- */
html body {
	font-family: var(--px-font);
	color: var(--px-ink-700);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html body,
.page-content {
	background-color: var(--px-page);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, textarea,
.btn, .form-control, .table, .modal, .dropdown-menu, .tooltip, .popover {
	font-family: var(--px-font);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--px-ink-900);
	letter-spacing: -.01em;
}

a {
	color: var(--px-blue-600);
	transition: color .15s ease;
}

a:hover,
a:focus {
	color: var(--px-blue-700);
}

h3.page-title,
.page-title {
	font-weight: 700 !important;
	color: var(--px-ink-900) !important;
	letter-spacing: -.02em;
}

.page-title small {
	color: var(--px-ink-500) !important;
	font-weight: 500;
}

hr {
	border-top-color: var(--px-line-soft);
}

::selection {
	background: var(--px-blue-200);
	color: var(--px-ink-900);
}

/* Scroll delgado en todo el contenido */
.page-content ::-webkit-scrollbar,
.modal ::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.select2-results::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.page-content ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.select2-results::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: var(--px-r-pill);
	border: 2px solid transparent;
	background-clip: padding-box;
}

.page-content ::-webkit-scrollbar-thumb:hover,
.modal ::-webkit-scrollbar-thumb:hover {
	background-color: #94a3b8;
}

.page-content ::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar-track {
	background: transparent;
}

/* --------------------------------------------------------------------------
   2. PORTLETS  (la "tarjeta" de casi todas las páginas)
   -------------------------------------------------------------------------- */
.portlet {
	margin-bottom: 24px;
	border-radius: var(--px-r-lg) !important;
	box-shadow: var(--px-shadow-sm);
	background: var(--px-surface);
}

.portlet.box,
.portlet.box.blue,
.portlet.box.red,
.portlet.box.green,
.portlet.box.yellow,
.portlet.box.purple,
.portlet.box.grey,
.portlet.box.light-grey {
	border: 1px solid #dfe7f3 !important;
	border-radius: var(--px-r-lg) !important;
	padding: 0 !important;
	overflow: visible;
}

.portlet > .portlet-title,
.portlet.box > .portlet-title,
.portlet.box.blue > .portlet-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 54px;
	margin: 0 !important;
	padding: 10px 18px !important;
	background: var(--px-header-grad) !important;
	border: none !important;
	border-radius: calc(var(--px-r-lg) - 1px) calc(var(--px-r-lg) - 1px) 0 0 !important;
	color: #fff !important;
}

.portlet > .portlet-title:before,
.portlet > .portlet-title:after {
	display: none !important;
}

/* Variantes de color del tema -> mismos degradados del sistema */
.portlet.box.red > .portlet-title { background: var(--px-danger-grad) !important; }
.portlet.box.green > .portlet-title { background: var(--px-success-grad) !important; }
.portlet.box.yellow > .portlet-title { background: var(--px-warning-grad) !important; }
.portlet.box.purple > .portlet-title { background: var(--px-purple-grad) !important; }

.portlet > .portlet-title > .caption {
	display: flex !important;
	align-items: center;
	gap: 10px;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: .1px;
	color: #fff !important;
}

.portlet > .portlet-title > .caption > i {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 !important;
	border-radius: var(--px-r-md);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .18);
	font-size: 15px !important;
	color: #fff !important;
	float: none !important;
}

/* Iconos de la derecha (colapsar, recargar...) */
.portlet > .portlet-title > .tools,
.portlet > .portlet-title > .actions {
	display: flex !important;
	align-items: center;
	gap: 6px;
	float: none !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
}

.portlet > .portlet-title > .tools > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	border-radius: var(--px-r-sm);
	background: rgba(255, 255, 255, .12) !important;
	background-image: none !important;
	color: #fff !important;
	opacity: .9;
	text-decoration: none !important;
	transition: background-color .15s ease, opacity .15s ease;
}

.portlet > .portlet-title > .tools > a:hover {
	background: rgba(255, 255, 255, .26) !important;
	opacity: 1;
}

/* Iconos vectoriales en vez de las imágenes pixeladas del tema */
.portlet > .portlet-title > .tools > a:before {
	font-family: FontAwesome;
	font-size: 12px;
	line-height: 1;
}

.portlet > .portlet-title > .tools > a.collapse:before { content: "\f077"; }
.portlet > .portlet-title > .tools > a.expand:before { content: "\f078"; }
.portlet > .portlet-title > .tools > a.reload:before { content: "\f021"; }
.portlet > .portlet-title > .tools > a.remove:before { content: "\f00d"; }
.portlet > .portlet-title > .tools > a.config:before { content: "\f013"; }
.portlet > .portlet-title > .tools > a.fullscreen:before { content: "\f065"; }

/* Si el enlace ya trae su propio icono <i>, no duplicar */
.portlet > .portlet-title > .tools > a:not(:empty):before {
	content: none;
}

.portlet > .portlet-title > .actions .btn,
.portlet > .portlet-title > .actions > .btn-group > .btn {
	background: rgba(255, 255, 255, .14) !important;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.portlet > .portlet-title > .actions .btn:hover {
	background: rgba(255, 255, 255, .26) !important;
}

.portlet > .portlet-body,
.portlet.box > .portlet-body {
	padding: 18px 20px !important;
	background: var(--px-surface) !important;
	border: none !important;
	border-radius: 0 0 var(--px-r-lg) var(--px-r-lg) !important;
	color: var(--px-ink-700);
}

/* Portlet sin cabecera */
.portlet > .portlet-body:first-child {
	border-radius: var(--px-r-lg) !important;
}

/* Barra de herramientas encima de las tablas */
.table-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px !important;
}

.table-toolbar:before,
.table-toolbar:after {
	display: none !important;
}

.table-toolbar > .btn-group,
.table-toolbar > .pull-right,
.table-toolbar > .pull-left {
	float: none !important;
	margin: 0 !important;
}

.table-toolbar > .pull-right {
	margin-left: auto !important;
}

/* Campos dentro de la barra de herramientas (ej: "Lista" en Listas de Precios).
   Vienen con la rejilla de Bootstrap (col-md-1 + col-md-4), que usa floats: al
   ponerlos dentro de un flex se quedaban sin ancho y el select2 nacía diminuto. */
.table-toolbar > form {
	flex: 1 1 auto;
	min-width: 280px;
	margin: 0;
}

.table-toolbar .form-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 280px;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.table-toolbar .form-group > label,
.table-toolbar .form-group > .control-label {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	text-align: left;
}

.table-toolbar .form-group > [class*="col-md-"],
.table-toolbar .form-group > [class*="col-sm-"],
.table-toolbar .form-group > [class*="col-xs-"] {
	float: none;
	width: auto;
	flex: 1 1 auto;
	min-width: 200px;
	padding-left: 0;
	padding-right: 0;
}

/* select2 calcula su ancho al arrancar: si nació angosto, se corrige aquí */
html body .table-toolbar .select2-container {
	width: 100% !important;
	min-width: 200px;
}

/* El desplegable nunca más angosto que esto */
.select2-drop {
	min-width: 200px;
}

/* --------------------------------------------------------------------------
   3. BOTONES
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 36px;
	padding: 7px 15px;
	border: 1px solid transparent;
	border-radius: var(--px-r-md) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .1px;
	text-shadow: none !important;
	box-shadow: none;
	white-space: nowrap;
	vertical-align: middle;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease,
		box-shadow .18s ease, filter .18s ease, transform .12s ease;
}

.btn > i,
.btn > .fa {
	font-size: 1.05em;
	line-height: 1;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
	outline: none !important;
	box-shadow: var(--px-ring) !important;
}

.btn:active,
.btn.active {
	transform: translateY(1px);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
	opacity: .5 !important;
	filter: grayscale(.2);
	box-shadow: none !important;
	cursor: not-allowed;
}

/* Botón neutro */
.btn.btn-default,
.btn.default {
	background: var(--px-surface) !important;
	border: 1px solid var(--px-line) !important;
	color: var(--px-ink-700) !important;
	box-shadow: var(--px-shadow-xs);
}

.btn.btn-default:hover,
.btn.default:hover,
.btn.btn-default:focus,
.btn.default:focus,
.btn.btn-default.active,
.open > .btn.btn-default.dropdown-toggle {
	background: var(--px-tint) !important;
	border-color: var(--px-blue-200) !important;
	color: var(--px-blue-700) !important;
}

/* Rellenos con degradado */
.btn.btn-primary, .btn.blue {
	background: var(--px-primary-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(29, 78, 216, .22);
}

.btn.btn-success, .btn.green {
	background: var(--px-success-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(5, 150, 105, .22);
}

.btn.btn-info {
	background: var(--px-info-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(8, 145, 178, .22);
}

.btn.btn-warning, .btn.yellow {
	background: var(--px-warning-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(217, 119, 6, .22);
}

.btn.btn-danger, .btn.red {
	background: var(--px-danger-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, .22);
}

.btn.purple {
	background: var(--px-purple-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(124, 58, 237, .22);
}

.btn.dark, .btn.grey, .btn.btn-inverse {
	background: var(--px-dark-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(10, 22, 49, .22);
}

.btn.btn-primary:hover, .btn.blue:hover,
.btn.btn-success:hover, .btn.green:hover,
.btn.btn-info:hover,
.btn.btn-warning:hover, .btn.yellow:hover,
.btn.btn-danger:hover, .btn.red:hover,
.btn.purple:hover, .btn.dark:hover, .btn.grey:hover, .btn.btn-inverse:hover,
.btn.btn-primary:focus, .btn.blue:focus,
.btn.btn-success:focus, .btn.green:focus,
.btn.btn-info:focus,
.btn.btn-warning:focus, .btn.yellow:focus,
.btn.btn-danger:focus, .btn.red:focus,
.btn.purple:focus, .btn.dark:focus, .btn.grey:focus {
	filter: brightness(1.08) saturate(1.05);
	color: #fff !important;
}

.btn.btn-primary:hover, .btn.blue:hover { box-shadow: 0 8px 20px rgba(29, 78, 216, .32); }
.btn.btn-success:hover, .btn.green:hover { box-shadow: 0 8px 20px rgba(5, 150, 105, .30); }
.btn.btn-info:hover { box-shadow: 0 8px 20px rgba(8, 145, 178, .30); }
.btn.btn-warning:hover, .btn.yellow:hover { box-shadow: 0 8px 20px rgba(217, 119, 6, .30); }
.btn.btn-danger:hover, .btn.red:hover { box-shadow: 0 8px 20px rgba(220, 38, 38, .30); }

/* Botón principal de GUARDAR (id="guardar-form" en ~49 formularios y los
   submit del pie de formulario): siempre azul de marca y un poco más grande.
   El verde queda para "crear/nuevo" y confirmaciones. */
html body #guardar-form.btn,
html body .form-actions button[type="submit"].btn:not(.btn-danger):not(.red):not(.btn-default):not(.default) {
	min-height: 44px;
	padding: 10px 24px;
	border-radius: var(--px-r-lg) !important;
	background: var(--px-primary-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	font-size: 14.5px;
	letter-spacing: .2px;
	box-shadow: 0 8px 20px rgba(29, 78, 216, .28);
}

html body #guardar-form.btn:hover,
html body #guardar-form.btn:focus,
html body .form-actions button[type="submit"].btn:not(.btn-danger):not(.red):not(.btn-default):not(.default):hover {
	filter: brightness(1.08) saturate(1.05);
	box-shadow: 0 12px 26px rgba(29, 78, 216, .38);
	color: #fff !important;
}

html body #guardar-form.btn.disabled,
html body #guardar-form.btn[disabled] {
	box-shadow: none;
}

/* Botón tipo enlace */
.btn.btn-link {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--px-blue-600) !important;
	box-shadow: none !important;
}

.btn.btn-link:hover {
	color: var(--px-blue-700) !important;
	text-decoration: none;
	background: var(--px-tint) !important;
}

/* Tamaños */
.btn.btn-lg {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 14.5px;
	border-radius: var(--px-r-lg) !important;
}

.btn.btn-sm {
	min-height: 30px;
	padding: 5px 11px;
	font-size: 12.5px;
	gap: 6px;
	border-radius: var(--px-r-sm) !important;
}

.btn.btn-xs,
.btn.btn-ss {
	min-height: 26px;
	padding: 3px 8px;
	font-size: 11.5px;
	gap: 5px;
	border-radius: 7px !important;
	box-shadow: none !important;
}

.btn.btn-block {
	display: flex;
	width: 100%;
}

/* Grupos */
.btn-group {
	vertical-align: middle;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
	border-radius: 0 !important;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.btn-group > .btn + .btn {
	margin-left: -1px;
}

.btn-group > .btn.btn-primary + .btn,
.btn-group > .btn.btn-success + .btn,
.btn-group > .btn.btn-info + .btn,
.btn-group > .btn.btn-warning + .btn,
.btn-group > .btn.btn-danger + .btn,
.btn-group > .btn.blue + .btn,
.btn-group > .btn.green + .btn,
.btn-group > .btn.red + .btn {
	margin-left: 1px;
}

.btn .caret {
	border-top-color: currentColor;
}

/* --------------------------------------------------------------------------
   4. FORMULARIOS
   -------------------------------------------------------------------------- */
.form-group {
	margin-bottom: 18px;
}

label,
.control-label {
	color: var(--px-ink-700);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1px;
}

.form-horizontal .control-label {
	padding-top: 10px;
}

.required,
.control-label .required,
label .required {
	color: var(--px-danger) !important;
}

html body .form-control {
	height: var(--px-field-h);
	padding: 8px 12px;
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-md) !important;
	background-color: var(--px-field-bg) !important;
	color: var(--px-ink-900);
	font-size: 13.5px;
	box-shadow: none !important;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

html body .form-control:hover {
	border-color: #c5d2e6 !important;
}

html body .form-control:focus {
	border-color: var(--px-blue-500) !important;
	background-color: #fff !important;
	box-shadow: var(--px-ring) !important;
	outline: none;
}

html body .form-control::placeholder {
	color: var(--px-ink-400);
	opacity: 1;
}

html body .form-control::-webkit-input-placeholder {
	color: var(--px-ink-400);
}

html body textarea.form-control {
	height: auto;
	min-height: 80px;
	line-height: 1.5;
	resize: vertical;
}

html body select.form-control {
	padding-right: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 11px center !important;
}

html body select.form-control[multiple],
html body select.form-control[size] {
	height: auto;
	padding-right: 12px;
	background-image: none !important;
}

html body .form-control[disabled],
html body .form-control[readonly],
html body fieldset[disabled] .form-control {
	background-color: #eef2f7 !important;
	border-color: var(--px-line) !important;
	color: var(--px-ink-500);
	cursor: not-allowed;
}

html body .form-control[readonly]:not([disabled]) {
	cursor: default;
}

.form-control-static {
	padding-top: 9px;
	color: var(--px-ink-900);
	font-weight: 500;
}

/* Tamaños del tema (input-small, input-medium...) conservan ancho, solo estética */
.input-sm,
.form-control.input-sm {
	height: 32px !important;
	padding: 5px 10px !important;
	font-size: 12.5px !important;
	border-radius: var(--px-r-sm) !important;
}

.input-lg,
.form-control.input-lg {
	height: 46px !important;
	font-size: 15px !important;
	border-radius: var(--px-r-lg) !important;
}

/* Texto de ayuda y validación */
.help-block {
	margin-top: 6px;
	color: var(--px-ink-500);
	font-size: 12px;
}

.has-error .form-control,
.form-control.error {
	border-color: #f19b9b !important;
	background-color: #fff8f8 !important;
}

.has-error .form-control:focus,
.form-control.error:focus {
	border-color: var(--px-danger) !important;
	box-shadow: var(--px-ring-danger) !important;
}

.has-error .help-block,
.has-error .control-label,
.help-block.error,
span.error,
label.error {
	color: var(--px-danger-ink) !important;
}

.has-success .form-control {
	border-color: #6ee7b7 !important;
}

.has-success .help-block,
.has-success .control-label {
	color: var(--px-success-ink) !important;
}

.has-warning .form-control {
	border-color: #fcd34d !important;
}

/* Input con icono dentro */
.input-icon > i {
	color: var(--px-blue-500) !important;
	z-index: 3;
}

.input-icon > .form-control {
	padding-left: 34px !important;
}

.input-icon.right > .form-control {
	padding-left: 12px !important;
	padding-right: 34px !important;
}

/* Select2 dentro de un campo con icono: dejar el espacio del icono */
html body .input-icon > .select2-container .select2-choice,
html body .input-icon:not(.right) > .select2-container .select2-choices {
	padding-left: 34px !important;
}

html body .input-icon.right > .select2-container .select2-choice {
	padding-left: 12px !important;
}

.input-icon > i {
	pointer-events: none;
}

/* Input group (addon + campo + botón) */
.input-group {
	border-radius: var(--px-r-md);
}

.input-group-addon {
	min-width: 40px;
	padding: 6px 12px;
	border: 1px solid var(--px-field-border) !important;
	background: var(--px-tint) !important;
	color: var(--px-blue-700) !important;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--px-r-md);
}

.input-group-addon > i {
	color: var(--px-blue-600) !important;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) > .btn {
	border-radius: 0 !important;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.input-group-addon:first-child {
	border-right: 0 !important;
}

.input-group-addon:last-child {
	border-left: 0 !important;
}

.input-group-btn > .btn {
	min-height: var(--px-field-h);
	box-shadow: none !important;
}

.input-group-btn > .btn.btn-sm,
.input-group-btn > .btn.btn-xs {
	min-height: 32px;
}

/* Filas de campos (row > col-md-X > form-group): si un campo queda muy
   angosto baja solo a la línea siguiente, en vez de montarse sobre el vecino.
   Solo en escritorio; en móvil Bootstrap ya pone cada campo a lo ancho. */
@media (min-width: 992px) {
	.row:has(> [class*="col-md-"] > .form-group) {
		display: flex;
		flex-wrap: wrap;
	}

	.row:has(> [class*="col-md-"] > .form-group):before,
	.row:has(> [class*="col-md-"] > .form-group):after {
		display: none;
	}

	.row:has(> [class*="col-md-"] > .form-group) > [class*="col-md-"] {
		float: none;
		flex: 0 0 auto;
	}

	/* Solo baja si queda de verdad diminuto (no romper filas de 4-5 campos) */
	.row:has(> [class*="col-md-"] > .form-group) > [class*="col-md-"]:has(.form-control, .select2-container, .input-group) {
		min-width: 170px;
	}
}

/* Anchos fijos del tema (input-medium, input-large...) nunca más anchos que su columna */
.input-xsmall,
.input-small,
.input-medium,
.input-large,
.input-xlarge {
	max-width: 100%;
}

/* Etiquetas largas: una sola línea para que todos los campos de la fila queden alineados */
.form-group > .control-label {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.form-horizontal .form-group > .control-label {
	white-space: normal;
	overflow: visible;
}

/* Secciones y acciones de formulario */
.form-section,
h3.form-section,
h4.form-section {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 18px 0 !important;
	padding: 0 0 10px 0 !important;
	border-bottom: 1px solid var(--px-line) !important;
	color: var(--px-navy-700) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	letter-spacing: .1px;
}

.form-section:before,
h3.form-section:before,
h4.form-section:before {
	content: '';
	flex: 0 0 4px;
	height: 16px;
	border-radius: 4px;
	background: var(--px-primary-grad);
}

.form-body > .form-section:first-child,
.form-body > h3.form-section:first-child {
	margin-top: 4px !important;
}

.form-actions {
	margin: 20px -20px -18px -20px !important;
	padding: 14px 20px !important;
	background: var(--px-surface-2) !important;
	border-top: 1px solid var(--px-line) !important;
	border-radius: 0 0 var(--px-r-lg) var(--px-r-lg);
}

.modal .form-actions,
.tab-pane .form-actions,
.form-actions.nobg {
	margin: 20px 0 0 0 !important;
	border-radius: var(--px-r-md);
}

.form-actions.fluid,
.form-actions.right {
	text-align: right;
}

.form-bordered .form-group {
	border-bottom: 1px solid var(--px-line-soft) !important;
}

.form-bordered .form-group > div {
	border-left: 1px solid var(--px-line-soft) !important;
}

/* Fieldset / legend */
fieldset {
	border-color: var(--px-line);
}

legend {
	color: var(--px-navy-700);
	font-size: 14.5px;
	font-weight: 700;
	border-bottom-color: var(--px-line);
}

/* --------------------------------------------------------------------------
   5. CHECKBOX / RADIO  (plugin Uniform: div.checker > span, div.radio > span)
   -------------------------------------------------------------------------- */
div.checker,
div.radio {
	width: 18px !important;
	height: 18px !important;
	margin-right: 6px !important;
	vertical-align: -3px;
}

div.checker > span,
div.radio > span {
	position: relative;
	display: inline-block;
	width: 18px !important;
	height: 18px !important;
	background: #fff !important;
	background-image: none !important;
	border: 1.5px solid #c3cfe0;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

div.checker > span {
	border-radius: 5px;
}

div.radio > span {
	border-radius: 50%;
}

div.checker > span input,
div.radio > span input {
	width: 18px !important;
	height: 18px !important;
	margin: -1.5px 0 0 -1.5px !important;
	cursor: pointer;
}

div.checker.hover > span,
div.checker.focus > span,
div.radio.hover > span,
div.radio.focus > span {
	border-color: var(--px-blue-500);
	box-shadow: var(--px-ring);
}

div.checker > span.checked {
	background: var(--px-primary-grad) !important;
	border-color: var(--px-blue-600);
}

div.checker > span.checked:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	pointer-events: none;
}

div.radio > span.checked {
	border-color: var(--px-blue-600);
	box-shadow: inset 0 0 0 4px #fff;
	background: var(--px-blue-600) !important;
}

div.checker.disabled > span,
div.radio.disabled > span {
	background: #eef2f7 !important;
	border-color: var(--px-line);
	cursor: not-allowed;
}

div.checker.disabled > span.checked {
	background: #93a4c2 !important;
	border-color: #93a4c2;
}

.checkbox-inline,
.radio-inline,
.checkbox-list > label,
.radio-list > label {
	color: var(--px-ink-700);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. SWITCH  (bootstrap-switch v1: .make-switch -> .has-switch)
   -------------------------------------------------------------------------- */
.has-switch {
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-pill) !important;
	background: #e7ecf4 !important;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06) !important;
	-webkit-mask-image: none;
}

.has-switch span,
.has-switch label {
	font-family: var(--px-font) !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	letter-spacing: .3px;
	text-shadow: none !important;
	text-transform: uppercase;
}

.has-switch span.switch-left,
.has-switch span.switch-left.switch-primary {
	background: var(--px-primary-grad) !important;
	color: #fff !important;
	border-radius: var(--px-r-pill) 0 0 var(--px-r-pill) !important;
}

.has-switch span.switch-right {
	background: #e7ecf4 !important;
	color: var(--px-ink-500) !important;
	border-radius: 0 var(--px-r-pill) var(--px-r-pill) 0 !important;
}

.has-switch span.switch-success { background: var(--px-success-grad) !important; color: #fff !important; }
.has-switch span.switch-info { background: var(--px-info-grad) !important; color: #fff !important; }
.has-switch span.switch-warning { background: var(--px-warning-grad) !important; color: #fff !important; }
.has-switch span.switch-danger { background: var(--px-danger-grad) !important; color: #fff !important; }

.has-switch label {
	background: #fff !important;
	border: none !important;
	border-radius: var(--px-r-pill) !important;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .25) !important;
}

.has-switch.deactivate {
	opacity: .5;
}

/* --------------------------------------------------------------------------
   7. SELECT2  (v3 - clase select2me)
   -------------------------------------------------------------------------- */
.select2-container {
	vertical-align: middle;
}

/* Select2 copia las clases del <select> (form-control, input-small...) a su
   contenedor: sin esto se veía una caja dentro de otra caja */
html body .select2-container.form-control,
html body .select2-container.form-control:hover,
html body .select2-container.form-control:focus {
	height: auto !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

.select2-container .select2-choice,
.select2-container.form-control .select2-choice {
	height: var(--px-field-h) !important;
	padding: 0 0 0 12px !important;
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-md) !important;
	background: var(--px-field-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--px-ink-900) !important;
	font-size: 13.5px;
	line-height: calc(var(--px-field-h) - 2px) !important;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.select2-container .select2-choice:hover {
	border-color: #c5d2e6 !important;
}

.select2-container .select2-choice > .select2-chosen {
	margin-right: 34px;
	line-height: calc(var(--px-field-h) - 2px) !important;
}

.select2-container .select2-choice .select2-arrow {
	width: 32px !important;
	border: none !important;
	background: transparent !important;
	background-image: none !important;
	border-radius: 0 var(--px-r-md) var(--px-r-md) 0 !important;
}

.select2-container .select2-choice .select2-arrow b {
	background: none !important;
}

.select2-container .select2-choice .select2-arrow b:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -6px 0 0 -4px;
	border: solid var(--px-ink-500);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.select2-dropdown-open .select2-choice .select2-arrow b:after {
	margin-top: -2px;
	transform: rotate(-135deg);
	border-color: var(--px-blue-600);
}

.select2-container .select2-choice abbr {
	top: 50% !important;
	margin-top: -8px;
	right: 34px !important;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-dropdown-open .select2-choice,
.select2-dropdown-open.select2-container-multi .select2-choices {
	border-color: var(--px-blue-500) !important;
	background: #fff !important;
	box-shadow: var(--px-ring) !important;
}

.select2-dropdown-open .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choice {
	border-radius: var(--px-r-md) !important;
}

.select2-container.select2-container-disabled .select2-choice {
	background: #eef2f7 !important;
	border-color: var(--px-line) !important;
	color: var(--px-ink-500) !important;
	cursor: not-allowed;
}

.select2-default,
.select2-container .select2-choice.select2-default,
.select2-container .select2-choice .select2-chosen.select2-default {
	color: var(--px-ink-400) !important;
}

/* Desplegable */
.select2-drop,
.select2-drop.select2-drop-above,
.select2-drop-active {
	margin-top: 6px;
	border: 1px solid #d6e0ef !important;
	border-radius: var(--px-r-lg) !important;
	background: #fff !important;
	box-shadow: var(--px-shadow-md) !important;
	overflow: hidden;
	font-family: var(--px-font);
}

.select2-drop.select2-drop-above {
	margin-top: -6px;
}

.select2-search {
	padding: 8px 8px 4px 8px !important;
}

.select2-search input,
.select2-search input.select2-active {
	height: 34px !important;
	padding: 4px 10px 4px 32px !important;
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-sm) !important;
	background: var(--px-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center !important;
	font-size: 13px;
	box-shadow: none !important;
}

.select2-search input:focus {
	border-color: var(--px-blue-500) !important;
	background-color: #fff !important;
}

.select2-results {
	max-height: 260px;
	margin: 4px 0 !important;
	padding: 0 6px 4px 6px !important;
}

.select2-results li {
	margin: 1px 0;
	border-radius: var(--px-r-sm);
}

.select2-results .select2-result-label {
	padding: 8px 10px !important;
	color: var(--px-ink-700);
	font-size: 13px;
	line-height: 1.35;
}

.select2-results .select2-highlighted {
	background: var(--px-primary-grad) !important;
	border-radius: var(--px-r-sm);
}

.select2-results .select2-highlighted .select2-result-label {
	color: #fff !important;
}

.select2-results .select2-match {
	text-decoration: none;
	font-weight: 700;
	color: inherit;
	background: rgba(59, 130, 246, .14);
	border-radius: 3px;
}

.select2-results .select2-highlighted .select2-match {
	background: rgba(255, 255, 255, .22);
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
	padding: 10px;
	background: transparent !important;
	color: var(--px-ink-500);
	font-size: 12.5px;
}

.select2-results .select2-result-with-children > .select2-result-label {
	color: var(--px-ink-500);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
}

/* Multiple */
.select2-container-multi .select2-choices {
	min-height: var(--px-field-h) !important;
	padding: 3px 6px !important;
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-md) !important;
	background: var(--px-field-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
}

.select2-container-multi .select2-choices .select2-search-field input {
	height: 28px !important;
	padding: 4px 6px !important;
	color: var(--px-ink-900) !important;
	font-family: var(--px-font) !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
	margin: 3px 4px 3px 0 !important;
	padding: 4px 10px 4px 22px !important;
	border: 1px solid var(--px-blue-200) !important;
	border-radius: var(--px-r-pill) !important;
	background: var(--px-tint) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--px-blue-700) !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.select2-container-multi .select2-search-choice-close {
	left: 6px !important;
	top: 5px !important;
	opacity: .6;
}

.select2-container-multi .select2-search-choice-close:hover {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   8. CALENDARIOS  (bootstrap-datepicker + timepicker)
   -------------------------------------------------------------------------- */
.datepicker.dropdown-menu,
.datepicker-dropdown {
	padding: 12px !important;
	border: 1px solid #d6e0ef !important;
	border-radius: var(--px-r-lg) !important;
	box-shadow: var(--px-shadow-md) !important;
	font-family: var(--px-font);
}

.datepicker-dropdown:before,
.datepicker-dropdown:after {
	display: none !important;
}

.datepicker,
.datepicker table,
.datepicker table tr th,
.datepicker table tr td {
	font-family: var(--px-font) !important;
}

.datepicker thead tr:first-child th.datepicker-switch,
.datepicker thead tr:first-child th.switch {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--px-navy-700);
}

.datepicker thead tr:first-child th.prev,
.datepicker thead tr:first-child th.next {
	color: var(--px-blue-600);
	font-size: 16px;
}

.datepicker table tr td,
.datepicker table tr th {
	width: 34px;
	height: 32px;
	border-radius: var(--px-r-sm) !important;
	font-size: 12.5px;
	text-shadow: none !important;
}

.datepicker table tr th {
	color: var(--px-ink-900);
	font-weight: 700;
}

.datepicker table tr th.dow {
	color: var(--px-ink-400);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
	background: var(--px-tint) !important;
	color: var(--px-blue-700);
}

.datepicker table tr td.day {
	color: var(--px-ink-700);
	font-weight: 500;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
	color: #c0cad8 !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
	background: var(--px-warning-soft) !important;
	background-image: none !important;
	color: var(--px-warning-ink) !important;
	font-weight: 700;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover {
	background: var(--px-tint) !important;
	background-image: none !important;
	border-radius: 0 !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td.selected {
	background: var(--px-primary-grad) !important;
	background-image: var(--px-primary-grad) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(29, 78, 216, .3);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	color: #cbd5e1 !important;
	background: transparent !important;
}

.datepicker table tr td span {
	border-radius: var(--px-r-sm) !important;
}

/* Botón "limpiar fechas" / calendario al lado de la fecha */
.input-daterange .input-group-addon {
	min-width: 0;
	margin: 0 !important;
	padding: 0 12px !important;
	line-height: normal !important;
	vertical-align: middle !important;
	text-shadow: none !important;
	background: var(--px-surface-2) !important;
	color: var(--px-ink-500) !important;
	font-weight: 600;
	border-left: 0 !important;
	border-right: 0 !important;
}

.input-daterange input.form-control {
	text-align: center;
}

.bootstrap-timepicker-widget.dropdown-menu {
	padding: 10px !important;
	border-radius: var(--px-r-lg) !important;
	box-shadow: var(--px-shadow-md) !important;
	border-color: #d6e0ef !important;
}

.bootstrap-timepicker-widget table td a:hover {
	background: var(--px-tint);
	border-radius: var(--px-r-sm);
}

.bootstrap-timepicker-widget table td input {
	border-radius: var(--px-r-sm);
	border: 1px solid var(--px-field-border);
}

/* --------------------------------------------------------------------------
   9. TABLAS
   -------------------------------------------------------------------------- */
.table {
	margin-bottom: 14px;
	color: var(--px-ink-700);
	font-size: 13px;
	background: var(--px-surface);
}

/* Cabecera con el degradado del sistema (se pinta en la fila completa) */
html body .table > thead > tr {
	background: var(--px-header-grad);
}

html body .table > thead > tr > th,
html body .table > thead > tr > td {
	padding: 12px 14px !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: none !important;
	color: #fff !important;
	font-size: 11.5px;
	font-weight: 700 !important;
	letter-spacing: .5px;
	text-transform: uppercase;
	vertical-align: middle !important;
	white-space: nowrap;
	text-shadow: none;
}

html body .table > thead > tr > th a,
html body .table > thead > tr > th i {
	color: #fff !important;
}

/* Filas de cabecera extra (filtros por columna, subtítulos) */
html body .table > thead > tr + tr {
	background: var(--px-tint);
}

html body .table > thead > tr + tr > th,
html body .table > thead > tr + tr > td {
	color: var(--px-navy-700) !important;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	padding: 8px 10px !important;
	border-bottom: 1px solid #dbe6fb !important;
}

/* Esquinas redondeadas sin recortar menús desplegables de las filas */
html body .table > thead:first-child > tr:first-child > th:first-child,
html body .table > thead:first-child > tr:first-child > td:first-child {
	border-top-left-radius: var(--px-r-md);
}

html body .table > thead:first-child > tr:first-child > th:last-child,
html body .table > thead:first-child > tr:first-child > td:last-child {
	border-top-right-radius: var(--px-r-md);
}

html body .table > thead:first-child > tr:first-child {
	border-radius: var(--px-r-md) var(--px-r-md) 0 0;
}

/* Cuerpo */
html body .table > tbody > tr > td,
html body .table > tbody > tr > th,
html body .table > tfoot > tr > td,
html body .table > tfoot > tr > th {
	padding: 11px 14px;
	border-top: 1px solid var(--px-line-soft);
	vertical-align: middle;
	line-height: 1.45;
}

html body .table > tbody > tr:first-child > td,
html body .table > tbody > tr:first-child > th {
	border-top: none;
}

html body .table > tbody > tr > td {
	transition: background-color .12s ease;
}

html body .table-striped > tbody > tr:nth-child(odd) > td,
html body .table-striped > tbody > tr:nth-child(odd) > th {
	background-color: #f9fbfe;
}

html body .table-striped > tbody > tr:nth-child(even) > td,
html body .table-striped > tbody > tr:nth-child(even) > th {
	background-color: #fff;
}

html body .table-hover > tbody > tr:hover > td,
html body .table-hover > tbody > tr:hover > th {
	background-color: #eef4ff !important;
}

/* Pie de tabla (totales) */
html body .table > tfoot > tr > td,
html body .table > tfoot > tr > th {
	background: var(--px-tint);
	color: var(--px-navy-800);
	font-weight: 700;
	border-top: 2px solid #dbe6fb;
}

/* Bordeada: borde exterior suave, divisiones internas finas */
html body .table-bordered {
	border: 1px solid #dfe7f3 !important;
	border-collapse: separate !important;
	border-spacing: 0;
	border-radius: var(--px-r-md);
}

html body .table-bordered > tbody > tr > td,
html body .table-bordered > tbody > tr > th,
html body .table-bordered > tfoot > tr > td,
html body .table-bordered > tfoot > tr > th {
	border-left: none !important;
	border-right: 1px solid var(--px-line-soft) !important;
	border-bottom: none !important;
}

html body .table-bordered > tbody > tr > td:last-child,
html body .table-bordered > tbody > tr > th:last-child,
html body .table-bordered > tfoot > tr > td:last-child {
	border-right: none !important;
}

html body .table-bordered > thead > tr > th + th,
html body .table-bordered > thead > tr > td + td {
	border-left: 1px solid rgba(255, 255, 255, .08) !important;
}

html body .table-bordered > tbody:last-child > tr:last-child > td:first-child {
	border-bottom-left-radius: var(--px-r-md);
}

html body .table-bordered > tbody:last-child > tr:last-child > td:last-child {
	border-bottom-right-radius: var(--px-r-md);
}

/* Estados de fila de Bootstrap: versión suave */
html body .table > tbody > tr.success > td, html body .table > tbody > tr > td.success { background-color: #ecfdf5 !important; }
html body .table > tbody > tr.warning > td, html body .table > tbody > tr > td.warning { background-color: #fffbeb !important; }
html body .table > tbody > tr.danger > td,  html body .table > tbody > tr > td.danger  { background-color: #fef2f2 !important; }
html body .table > tbody > tr.info > td,    html body .table > tbody > tr > td.info    { background-color: #ecfeff !important; }
html body .table > tbody > tr.active > td,  html body .table > tbody > tr > td.active  { background-color: #f1f5f9 !important; }

/* Tabla condensada */
html body .table-condensed > tbody > tr > td,
html body .table-condensed > thead > tr > th {
	padding: 7px 10px !important;
}

/* Botones dentro de celdas: compactos y alineados */
html body .table td .btn {
	min-height: 28px;
	padding: 4px 9px;
	font-size: 12px;
	box-shadow: none !important;
}

html body .table td .btn.btn-xs {
	min-height: 24px;
	padding: 2px 7px;
	font-size: 11px;
}

html body .table td .btn + .btn {
	margin-left: 3px;
}

/* Contenedores con scroll horizontal */
.table-scrollable,
.table-responsive {
	margin: 10px 0 !important;
	border: 1px solid #dfe7f3 !important;
	border-radius: var(--px-r-md);
	background: #fff;
}

.table-scrollable > .table,
.table-responsive > .table {
	margin: 0 !important;
	border: none !important;
}

/* --------------------------------------------------------------------------
   10. DATATABLES  (1.9 + DT_bootstrap)
   -------------------------------------------------------------------------- */
.dataTables_wrapper {
	font-family: var(--px-font);
}

.dataTables_wrapper > .row:first-child {
	margin-bottom: 12px;
}

.dataTables_wrapper > .row:first-child,
.dataTables_wrapper > .row:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.dataTables_wrapper > .row:first-child:before,
.dataTables_wrapper > .row:first-child:after,
.dataTables_wrapper > .row:last-child:before,
.dataTables_wrapper > .row:last-child:after {
	display: none;
}

.dataTables_length label,
.dataTables_filter label {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--px-ink-500);
	font-size: 12.5px;
	font-weight: 500;
}

.dataTables_length select,
.dataTables_length .form-control,
div.dataTables_length select {
	width: 78px !important;
	height: 34px !important;
	padding: 4px 26px 4px 10px !important;
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-sm) !important;
	background-color: var(--px-field-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	-webkit-appearance: none;
	appearance: none;
	color: var(--px-ink-900);
	font-weight: 600;
}

/* Si el tema convirtió el select en select2 */
.dataTables_length .select2-container {
	width: 80px !important;
}

.dataTables_length .select2-container .select2-choice {
	height: 34px !important;
	line-height: 32px !important;
}

.dataTables_filter {
	text-align: right;
}

.dataTables_filter input,
div.dataTables_filter input,
.dataTables_filter .form-control {
	width: 240px !important;
	max-width: 100%;
	height: 36px !important;
	margin-left: 0 !important;
	padding: 6px 12px 6px 34px !important;
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-pill) !important;
	background: var(--px-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center !important;
	font-size: 13px;
	transition: border-color .16s ease, box-shadow .16s ease, width .25s var(--px-ease), background-color .16s ease;
}

.dataTables_filter input:focus {
	width: 300px !important;
	border-color: var(--px-blue-500) !important;
	background-color: #fff !important;
	box-shadow: var(--px-ring) !important;
	outline: none;
}

.dataTables_info {
	padding-top: 0 !important;
	color: var(--px-ink-500);
	font-size: 12.5px;
	font-weight: 500;
}

.dataTables_processing {
	padding: 10px 18px !important;
	border: none !important;
	border-radius: var(--px-r-pill) !important;
	background: var(--px-navy-800) !important;
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: var(--px-shadow-md);
}

/* Íconos de orden: FontAwesome en vez de las imágenes viejas */
html body table.table thead .sorting,
html body table.table thead .sorting_asc,
html body table.table thead .sorting_desc,
html body table.table thead .sorting_asc_disabled,
html body table.table thead .sorting_desc_disabled,
html body table.dataTable thead .sorting,
html body table.dataTable thead .sorting_asc,
html body table.dataTable thead .sorting_desc {
	position: relative;
	padding-right: 26px !important;
	background-image: none !important;
}

html body table.table thead .sorting:after,
html body table.table thead .sorting_asc:after,
html body table.table thead .sorting_desc:after {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -7px;
	font-family: FontAwesome;
	font-size: 11px;
	line-height: 14px;
	font-weight: normal;
	color: rgba(255, 255, 255, .45);
}

html body table.table thead .sorting:after { content: "\f0dc"; }
html body table.table thead .sorting_asc:after { content: "\f0de"; color: #fff; }
html body table.table thead .sorting_desc:after { content: "\f0dd"; color: #fff; }

html body table.table thead .sorting:hover:after {
	color: rgba(255, 255, 255, .85);
}

html body table.table thead .sorting_asc,
html body table.table thead .sorting_desc {
	background-color: rgba(255, 255, 255, .08) !important;
}

/* Tablas con scroll interno (sScrollY): DataTables separa el encabezado en
   otra tabla y deja una copia "invisible" dentro del cuerpo */
.dataTables_scroll {
	border: 1px solid #dfe7f3;
	border-radius: var(--px-r-md);
	overflow: hidden;
	background: #fff;
	margin-bottom: 12px;
}

/* El encabezado llega hasta el borde (encima de la barra de scroll) */
.dataTables_scroll .dataTables_scrollHead {
	background: var(--px-header-grad);
}

.dataTables_scroll .dataTables_scrollHead table,
.dataTables_scroll .dataTables_scrollBody table {
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}

html body .dataTables_scrollBody table > thead > tr {
	background: transparent !important;
}

html body .dataTables_scrollBody table > thead > tr > th,
html body .dataTables_scrollBody table > thead > tr > td {
	height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: none !important;
	line-height: 0 !important;
}

html body .dataTables_scrollBody table > thead > tr > th:after {
	display: none !important;
}

html body .dataTables_scrollHead table > thead > tr > th:first-child,
html body .dataTables_scrollHead table > thead > tr > th:last-child,
html body .dataTables_scrollBody table > tbody:last-child > tr:last-child > td {
	border-radius: 0 !important;
}

.dataTables_scrollBody {
	scrollbar-width: thin;
}

/* Scroll progresivo: la tabla toma su ancho natural (como antes) y se desplaza
   de lado dentro de la caja, en vez de apretar las columnas al 100% */
.px-scroll-progresivo .dataTables_scrollBody > table {
	width: max-content !important;
	min-width: 100% !important;
}

/* Cada celda en una sola línea (botones de acción, referencias, fechas...) */
.px-scroll-progresivo .dataTables_scrollBody > table > tbody > tr > td {
	white-space: nowrap;
}

/* Columnas congeladas: las celdas fijas necesitan fondo propio, si no se ve
   pasar el contenido por debajo al desplazar de lado */
html body .px-columnas-fijas .dataTables_scrollBody table > tbody > tr > td[style*="sticky"],
html body .px-columnas-fijas .dataTables_scrollBody table > tbody > tr > td {
	background-color: #fff;
}

html body .px-columnas-fijas .dataTables_scrollBody table.table-striped > tbody > tr:nth-child(odd) > td {
	background-color: #f9fbfe;
}

html body .px-columnas-fijas .dataTables_scrollBody table.table-hover > tbody > tr:hover > td {
	background-color: #eef4ff;
}

/* Chinche para elegir columnas fijas (en cada encabezado) */
html body .dataTables_scrollHead th .px-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 6px;
	border-radius: 6px;
	color: #fff;
	font-size: 11px;
	opacity: .35;
	cursor: pointer;
	vertical-align: middle;
	transform: rotate(45deg);
	transition: opacity .15s ease, background-color .15s ease, transform .15s ease;
}

html body .dataTables_scrollHead th:hover .px-pin {
	opacity: .75;
}

html body .dataTables_scrollHead th .px-pin:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .18);
}

html body .dataTables_scrollHead th .px-pin.px-pin-activo {
	opacity: 1;
	transform: none;
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

html body .dataTables_scrollHead th .px-pin:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
}

/* Botón para compactar/expandir los iconos de acción (en su encabezado) */
.px-th-acciones {
	position: relative;
}

html body .px-th-acciones .px-boton-acciones {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 24px;
	padding: 0;
	margin: 0 0 0 10px;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	border-radius: var(--px-r-sm) !important;
	background: #ffffff !important;
	color: var(--px-navy-800) !important;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
	box-shadow: 0 2px 6px rgba(10, 22, 49, .35) !important;
	transition: background-color .15s ease, color .15s ease;
}

html body .px-th-acciones .px-boton-acciones > i {
	color: var(--px-navy-800) !important;
	font-size: 13px;
}

html body .px-th-acciones .px-boton-acciones:hover {
	background: var(--px-blue-200) !important;
}

html body .px-th-acciones .px-boton-acciones:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .35) !important;
}

html body .px-mas-acciones {
	background: var(--px-tint) !important;
	border-color: var(--px-blue-200) !important;
	color: var(--px-blue-700) !important;
}

/* Scroll progresivo: sin paginador (se carga al bajar) */
.px-scroll-progresivo .dataTables_paginate {
	display: none !important;
}

.px-scroll-progresivo .dataTables_processing {
	position: absolute;
	top: auto !important;
	bottom: 70px;
	left: 50% !important;
	margin-left: -90px !important;
	width: 180px !important;
	z-index: 5;
}

/* --------------------------------------------------------------------------
   11. PAGINACIÓN
   -------------------------------------------------------------------------- */
.pagination {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	border-radius: 0;
}

.dataTables_paginate {
	text-align: right;
}

.dataTables_paginate .pagination {
	float: right;
	margin: 0 !important;
}

.pagination > li > a,
.pagination > li > span {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	margin: 0 !important;
	padding: 0 10px;
	border: 1px solid var(--px-line) !important;
	border-radius: var(--px-r-sm) !important;
	background: #fff !important;
	color: var(--px-ink-700) !important;
	font-size: 12.5px;
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus {
	background: var(--px-tint) !important;
	border-color: var(--px-blue-200) !important;
	color: var(--px-blue-700) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
	background: var(--px-primary-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(29, 78, 216, .28);
}

.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover {
	background: #fff !important;
	color: #c0cad8 !important;
	border-color: var(--px-line-soft) !important;
	cursor: not-allowed;
}

.pager li > a,
.pager li > span {
	border-radius: var(--px-r-pill);
	border-color: var(--px-line);
	color: var(--px-ink-700);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. MODALES
   -------------------------------------------------------------------------- */
.modal-backdrop,
.modal-backdrop.fade.in,
.modal-backdrop.in {
	background-color: #0a1631 !important;
	opacity: .55 !important;
	filter: none !important;
}

.modal-content {
	border: none !important;
	border-radius: var(--px-r-xl) !important;
	box-shadow: var(--px-shadow-lg) !important;
	overflow: hidden;
	background: #fff;
}

/* Bootstrap-modal extendido del tema (el .modal es la caja) */
.modal.container,
.modal.modal-overflow,
div.modal:not(.fade):not(.in) > .modal-header {
	border-radius: var(--px-r-xl);
}

.modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding: 14px 20px !important;
	background: var(--px-header-grad) !important;
	border: none !important;
	color: #fff;
}

.modal-header:before,
.modal-header:after {
	display: none !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h3 {
	flex: 1 1 auto;
	order: 1;
	margin: 0;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1px;
}

.modal-header .modal-title i,
.modal-header h4 i {
	color: var(--px-blue-200) !important;
	margin-right: 6px;
}

.modal-header .close {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--px-r-md);
	background: rgba(255, 255, 255, .14) !important;
	background-image: none !important;
	color: #fff !important;
	opacity: 1 !important;
	text-shadow: none !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	text-indent: 0 !important;
	transition: background-color .15s ease;
}

.modal-header .close:hover {
	background: rgba(255, 255, 255, .28) !important;
}

/* El tema usa una imagen para la X: se reemplaza por el caracter */
.modal-header .close:empty:before {
	content: "\00d7";
}

.modal-body {
	padding: 20px !important;
	color: var(--px-ink-700);
}

.modal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 14px 20px !important;
	background: var(--px-surface-2) !important;
	border-top: 1px solid var(--px-line) !important;
}

.modal-footer:before,
.modal-footer:after {
	display: none !important;
}

.modal-footer .btn + .btn {
	margin-left: 0 !important;
}

/* Animación de entrada suave */
.modal.fade .modal-dialog {
	transform: translate(0, 18px) scale(.98);
	transition: transform .25s var(--px-ease), opacity .25s ease;
	opacity: 0;
}

.modal.in .modal-dialog {
	transform: none;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   13. TABS
   -------------------------------------------------------------------------- */
.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--px-line) !important;
}

.nav-tabs:before,
.nav-tabs:after {
	display: none !important;
}

.nav-tabs > li {
	float: none !important;
	margin-bottom: -1px !important;
}

.nav-tabs > li > a {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	padding: 10px 16px !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	border-radius: var(--px-r-md) var(--px-r-md) 0 0 !important;
	background: transparent !important;
	color: var(--px-ink-500) !important;
	font-size: 13px;
	font-weight: 600;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
	background: var(--px-tint) !important;
	color: var(--px-blue-700) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background: transparent !important;
	border-bottom-color: var(--px-blue-600) !important;
	color: var(--px-blue-700) !important;
}

.nav-tabs > li.disabled > a {
	color: #c0cad8 !important;
	background: transparent !important;
}

.nav-tabs > li > a .badge {
	margin-left: 2px;
}

/* Tabs del tema (tabbable-custom / tabbable-line / portlet-tabs) */
.tabbable-custom > .nav-tabs > li,
.tabbable-custom > .nav-tabs > li.active,
.tabbable-line > .nav-tabs > li,
.tabbable-line > .nav-tabs > li.active {
	border-top: none !important;
	background: transparent !important;
}

.tabbable-custom > .tab-content,
.tabbable-custom.boxless > .tab-content {
	padding: 4px 0 0 0 !important;
	border: none !important;
	background: transparent;
}

.portlet-tabs > .nav-tabs > li > a {
	color: rgba(255, 255, 255, .75) !important;
}

.portlet-tabs > .nav-tabs > li.active > a {
	color: #fff !important;
	border-bottom-color: #fff !important;
}

/* Pills */
.nav-pills > li > a {
	border-radius: var(--px-r-pill);
	color: var(--px-ink-700);
	font-weight: 600;
	font-size: 13px;
}

.nav-pills > li > a:hover {
	background: var(--px-tint);
	color: var(--px-blue-700);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	background: var(--px-primary-grad) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(29, 78, 216, .25);
}

/* --------------------------------------------------------------------------
   14. ETIQUETAS Y BADGES  (pills suaves)
   -------------------------------------------------------------------------- */
.label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: var(--px-r-pill);
	font-family: var(--px-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .2px;
	text-shadow: none !important;
	vertical-align: middle;
	white-space: nowrap;
	background: #e2e8f0;
	color: var(--px-ink-700);
}

.label.label-sm {
	padding: 3px 8px;
	font-size: 10.5px;
}

.label-default { background: #e2e8f0 !important; color: var(--px-ink-700) !important; }
.label-primary { background: #dbeafe !important; color: var(--px-blue-700) !important; }
.label-success { background: var(--px-success-soft) !important; color: var(--px-success-ink) !important; }
.label-info    { background: var(--px-info-soft) !important; color: var(--px-info-ink) !important; }
.label-warning { background: var(--px-warning-soft) !important; color: var(--px-warning-ink) !important; }
.label-danger  { background: var(--px-danger-soft) !important; color: var(--px-danger-ink) !important; }

a.label:hover {
	filter: brightness(.96);
	text-decoration: none;
}

.badge {
	min-width: 20px;
	padding: 3px 7px;
	border-radius: var(--px-r-pill);
	font-family: var(--px-font);
	font-size: 11px;
	font-weight: 700;
	text-shadow: none !important;
	background: var(--px-primary-grad);
	color: #fff;
}

.badge-default { background: #e2e8f0 !important; color: var(--px-ink-700) !important; }
.badge-primary { background: var(--px-primary-grad) !important; color: #fff !important; }
.badge-success { background: var(--px-success-grad) !important; color: #fff !important; }
.badge-info    { background: var(--px-info-grad) !important; color: #fff !important; }
.badge-warning { background: var(--px-warning-grad) !important; color: #fff !important; }
.badge-danger  { background: var(--px-danger-grad) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   15. ALERTAS Y NOTAS
   -------------------------------------------------------------------------- */
.alert {
	position: relative;
	padding: 13px 16px 13px 18px;
	border: 1px solid transparent;
	border-left-width: 4px !important;
	border-radius: var(--px-r-md) !important;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: var(--px-shadow-xs);
	text-shadow: none;
}

.alert h4,
.alert strong,
.alert b {
	color: inherit;
}

.alert-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; border-left-color: var(--px-success) !important; color: #065f46 !important; }
.alert-info    { background: #ecfeff !important; border-color: #a5f3fc !important; border-left-color: var(--px-info) !important; color: #155e75 !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; border-left-color: var(--px-warning) !important; color: #92400e !important; }
.alert-danger  { background: #fef2f2 !important; border-color: #fecaca !important; border-left-color: var(--px-danger) !important; color: #991b1b !important; }

.alert .close {
	top: 0;
	right: -4px;
	opacity: .45;
	text-shadow: none;
	color: inherit;
	background-image: none !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
}

.alert .close:empty:before {
	content: "\00d7";
	font-size: 18px;
}

.alert .close:hover {
	opacity: .8;
}

.alert .alert-link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Notas del tema (.note) */
.note {
	margin: 0 0 18px 0;
	padding: 14px 18px 14px 18px !important;
	border: 1px solid var(--px-line) !important;
	border-left: 4px solid var(--px-blue-500) !important;
	border-radius: var(--px-r-md) !important;
	background: var(--px-tint) !important;
	color: var(--px-ink-700);
	box-shadow: var(--px-shadow-xs);
}

.note h4,
.note .block {
	margin-top: 0;
	color: var(--px-ink-900);
	font-weight: 700;
	font-size: 14px;
}

.note p:last-child {
	margin-bottom: 0;
}

.note.note-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; border-left-color: var(--px-success) !important; }
.note.note-info    { background: #ecfeff !important; border-color: #a5f3fc !important; border-left-color: var(--px-info) !important; }
.note.note-warning { background: #fffbeb !important; border-color: #fde68a !important; border-left-color: var(--px-warning) !important; }
.note.note-danger  { background: #fef2f2 !important; border-color: #fecaca !important; border-left-color: var(--px-danger) !important; }

/* --------------------------------------------------------------------------
   16. PANELES, WELL, LISTAS, PROGRESO
   -------------------------------------------------------------------------- */
.panel {
	border: 1px solid #dfe7f3 !important;
	border-radius: var(--px-r-lg) !important;
	box-shadow: var(--px-shadow-sm) !important;
	overflow: hidden;
}

.panel > .panel-heading {
	padding: 12px 16px;
	border-bottom: 1px solid var(--px-line) !important;
	border-radius: 0 !important;
	font-weight: 700;
}

.panel-default > .panel-heading { background: var(--px-surface-2) !important; color: var(--px-ink-900) !important; }
.panel-primary > .panel-heading { background: var(--px-header-grad) !important; color: #fff !important; border: none !important; }
.panel-success > .panel-heading { background: var(--px-success-grad) !important; color: #fff !important; border: none !important; }
.panel-info > .panel-heading    { background: var(--px-info-grad) !important; color: #fff !important; border: none !important; }
.panel-warning > .panel-heading { background: var(--px-warning-grad) !important; color: #fff !important; border: none !important; }
.panel-danger > .panel-heading  { background: var(--px-danger-grad) !important; color: #fff !important; border: none !important; }

.panel-primary > .panel-heading .panel-title,
.panel-success > .panel-heading .panel-title,
.panel-info > .panel-heading .panel-title,
.panel-warning > .panel-heading .panel-title,
.panel-danger > .panel-heading .panel-title,
.panel-primary > .panel-heading a,
.panel-success > .panel-heading a,
.panel-info > .panel-heading a {
	color: #fff !important;
}

.panel-title {
	font-size: 14px;
	font-weight: 700;
}

.panel > .panel-footer {
	background: var(--px-surface-2);
	border-top: 1px solid var(--px-line);
}

.panel-group .panel + .panel {
	margin-top: 8px;
}

.well {
	padding: 16px 18px;
	border: 1px solid var(--px-line) !important;
	border-radius: var(--px-r-lg) !important;
	background: var(--px-surface-2) !important;
	box-shadow: none !important;
}

.list-group-item {
	border-color: var(--px-line-soft) !important;
	color: var(--px-ink-700);
}

.list-group-item:first-child {
	border-top-left-radius: var(--px-r-md) !important;
	border-top-right-radius: var(--px-r-md) !important;
}

.list-group-item:last-child {
	border-bottom-left-radius: var(--px-r-md) !important;
	border-bottom-right-radius: var(--px-r-md) !important;
}

a.list-group-item:hover {
	background: var(--px-tint) !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
	background: var(--px-primary-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.progress {
	height: 10px;
	margin-bottom: 14px;
	border-radius: var(--px-r-pill) !important;
	background: #e7ecf4 !important;
	box-shadow: none !important;
	overflow: hidden;
}

.progress .progress-bar,
.progress-bar {
	background-color: var(--px-blue-600);
	background-image: var(--px-primary-grad);
	box-shadow: none;
	font-size: 10px;
	font-weight: 700;
	line-height: 10px;
}

.progress-bar-success { background-image: var(--px-success-grad) !important; }
.progress-bar-info    { background-image: var(--px-info-grad) !important; }
.progress-bar-warning { background-image: var(--px-warning-grad) !important; }
.progress-bar-danger  { background-image: var(--px-danger-grad) !important; }

.progress-striped .progress-bar {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%, transparent), var(--px-primary-grad);
	background-size: 20px 20px, 100% 100%;
}

/* --------------------------------------------------------------------------
   17. DROPDOWNS, TOOLTIPS, POPOVERS
   -------------------------------------------------------------------------- */
.page-content .dropdown-menu,
.modal .dropdown-menu,
.btn-group > .dropdown-menu {
	min-width: 180px;
	margin-top: 6px;
	padding: 6px !important;
	border: 1px solid #dfe7f3 !important;
	border-radius: var(--px-r-lg) !important;
	background: #fff;
	box-shadow: var(--px-shadow-md) !important;
	font-size: 13px;
}

.page-content .dropdown-menu:before,
.page-content .dropdown-menu:after,
.btn-group > .dropdown-menu:before,
.btn-group > .dropdown-menu:after {
	display: none !important;
}

.page-content .dropdown-menu > li > a,
.modal .dropdown-menu > li > a,
.btn-group > .dropdown-menu > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px !important;
	border-radius: var(--px-r-sm);
	color: var(--px-ink-700) !important;
	font-weight: 500;
	transition: background-color .12s ease, color .12s ease;
}

.page-content .dropdown-menu > li > a > i,
.btn-group > .dropdown-menu > li > a > i {
	width: 16px;
	text-align: center;
	color: var(--px-ink-400);
}

.page-content .dropdown-menu > li > a:hover,
.page-content .dropdown-menu > li > a:focus,
.modal .dropdown-menu > li > a:hover,
.btn-group > .dropdown-menu > li > a:hover {
	background: var(--px-tint) !important;
	background-image: none !important;
	color: var(--px-blue-700) !important;
}

.page-content .dropdown-menu > li > a:hover > i,
.btn-group > .dropdown-menu > li > a:hover > i {
	color: var(--px-blue-600);
}

.page-content .dropdown-menu > .active > a,
.btn-group > .dropdown-menu > .active > a {
	background: var(--px-primary-grad) !important;
	color: #fff !important;
}

.page-content .dropdown-menu .divider,
.btn-group > .dropdown-menu .divider {
	margin: 5px 4px;
	background: var(--px-line-soft);
}

.dropdown-header {
	padding: 6px 12px;
	color: var(--px-ink-400);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.tooltip {
	font-size: 12px;
}

.tooltip.in {
	opacity: 1;
}

.tooltip-inner {
	max-width: 260px;
	padding: 6px 10px;
	border-radius: var(--px-r-sm);
	background: var(--px-navy-900);
	color: #fff;
	font-weight: 500;
	box-shadow: 0 6px 18px rgba(10, 22, 49, .25);
}

.tooltip.top .tooltip-arrow { border-top-color: var(--px-navy-900); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--px-navy-900); }
.tooltip.left .tooltip-arrow { border-left-color: var(--px-navy-900); }
.tooltip.right .tooltip-arrow { border-right-color: var(--px-navy-900); }

.popover {
	padding: 0;
	border: 1px solid #dfe7f3;
	border-radius: var(--px-r-lg);
	box-shadow: var(--px-shadow-md);
	font-family: var(--px-font);
}

.popover-title {
	padding: 10px 14px;
	border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
	background: var(--px-surface-2);
	border-bottom: 1px solid var(--px-line);
	color: var(--px-ink-900);
	font-size: 13px;
	font-weight: 700;
}

.popover-content {
	padding: 12px 14px;
	color: var(--px-ink-700);
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   18. TOASTR  (notificaciones flotantes)
   -------------------------------------------------------------------------- */
/* Debajo del header fijo, no encima */
#toast-container.toast-top-right,
#toast-container.toast-top-left,
#toast-container.toast-top-center,
#toast-container.toast-top-full-width {
	top: calc(var(--px-header-h) + 14px);
}

#toast-container > div {
	width: 340px;
	padding: 14px 16px 14px 52px !important;
	border-radius: var(--px-r-lg) !important;
	background-position: 18px center !important;
	box-shadow: var(--px-shadow-lg) !important;
	opacity: 1 !important;
	font-family: var(--px-font);
	font-size: 13px;
	line-height: 1.45;
}

#toast-container > div:hover {
	box-shadow: 0 28px 64px rgba(10, 22, 49, .3) !important;
}

#toast-container .toast-title {
	margin-bottom: 2px;
	font-weight: 700;
	font-size: 13.5px;
}

#toast-container > .toast-success { background-color: #047857 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"), var(--px-success-grad) !important; background-repeat: no-repeat !important; }
#toast-container > .toast-info    { background-color: #0e7490 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"), var(--px-header-grad) !important; background-repeat: no-repeat !important; }
#toast-container > .toast-warning { background-color: #b45309 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"), var(--px-warning-grad) !important; background-repeat: no-repeat !important; }
#toast-container > .toast-error   { background-color: #b91c1c !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"), var(--px-danger-grad) !important; background-repeat: no-repeat !important; }

#toast-container > div {
	background-position: 16px center, 0 0 !important;
	background-size: 22px 22px, 100% 100% !important;
}

#toast-container .toast-close-button {
	opacity: .7;
	text-shadow: none;
	color: #fff;
}

#toast-container .toast-progress {
	background: #fff;
	opacity: .3;
}

/* --------------------------------------------------------------------------
   19. ARCHIVOS, IMÁGENES, VARIOS
   -------------------------------------------------------------------------- */
.fileupload .thumbnail,
.fileupload-new .thumbnail,
.thumbnail {
	padding: 6px;
	border: 1px solid var(--px-line) !important;
	border-radius: var(--px-r-lg) !important;
	background: #fff;
	box-shadow: var(--px-shadow-xs);
}

.fileupload .uneditable-input {
	border-radius: var(--px-r-md) 0 0 var(--px-r-md) !important;
	background: var(--px-field-bg);
	border-color: var(--px-field-border);
}

.btn-file {
	overflow: hidden;
	position: relative;
}

/* Multi-select (dos columnas) */
.ms-container .ms-selectable,
.ms-container .ms-selection {
	color: var(--px-ink-700);
}

.ms-container .ms-list {
	border: 1px solid var(--px-field-border) !important;
	border-radius: var(--px-r-md) !important;
	box-shadow: none !important;
}

.ms-container .ms-list.ms-focus {
	border-color: var(--px-blue-500) !important;
	box-shadow: var(--px-ring) !important;
}

.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover {
	background: var(--px-primary-grad) !important;
	color: #fff !important;
}

.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection {
	border-bottom-color: var(--px-line-soft);
	font-size: 12.5px;
	padding: 6px 10px;
}

/* Spinner (fuelux) y touchspin */
.spinner-buttons.btn-group-vertical > .btn {
	min-height: 0;
	padding: 1px 8px;
}

/* Cargando bloqueante (blockUI) */
.blockUI.blockOverlay {
	background-color: rgba(10, 22, 49, .35) !important;
	backdrop-filter: blur(1.5px);
}

.blockUI.blockMsg {
	border: none !important;
	border-radius: var(--px-r-lg) !important;
	box-shadow: var(--px-shadow-lg) !important;
	font-family: var(--px-font);
}

/* Pie de página: el sidebar es fijo, así que el texto quedaba debajo de él */
.footer {
	color: var(--px-ink-500);
	font-size: 12px;
	padding: 10px 20px;
	background: transparent;
}

.page-sidebar-fixed .footer,
.page-container + .footer,
body.page-header-fixed .footer {
	margin-left: var(--px-sidebar-w);
}

.page-sidebar-closed .footer {
	margin-left: var(--px-sidebar-w-min);
}

.footer .footer-inner {
	color: var(--px-ink-500);
	padding: 0;
}

@media (max-width: 991px) {
	.page-sidebar-fixed .footer,
	.page-container + .footer,
	body.page-header-fixed .footer,
	.page-sidebar-closed .footer {
		margin-left: 0;
	}
}

.scroll-to-top > i,
.footer .go-top {
	border-radius: var(--px-r-md);
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.portlet > .portlet-body,
	.portlet.box > .portlet-body {
		padding: 14px !important;
	}

	.form-actions {
		margin: 16px -14px -14px -14px !important;
		padding: 12px 14px !important;
	}

	.dataTables_filter,
	.dataTables_paginate {
		text-align: left;
		margin-top: 8px;
	}

	.dataTables_filter input,
	.dataTables_filter input:focus {
		width: 100% !important;
	}

	.dataTables_paginate .pagination {
		float: none;
	}

	.modal-dialog {
		margin: 10px;
	}
}