/* ==========================================================================
   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-X > form-group).
   Escritorio: cada campo conserva su tamaño relativo, pero si la fila no suma
   12 columnas (o hay un campo oculto, como "Evento" en la cabecera de la
   cotización) los campos visibles crecen hasta llenar el ancho, en proporción
   a su tamaño. Si la fila ya suma 12, no cambia nada.
   Nunca bajan de línea: se encogen dentro de su columna. */
@media (min-width: 1200px) {
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) {
		display: flex;
		flex-wrap: wrap;
	}

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

	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > :is([class*="col-md-"], [class*="col-sm-"]) {
		float: none;
		min-width: 0;
		max-width: none;
	}

	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-1 {
		flex: 1 1 8.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-2 {
		flex: 2 1 16.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-3 {
		flex: 3 1 25%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-4 {
		flex: 4 1 33.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-5 {
		flex: 5 1 41.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-6 {
		flex: 6 1 50%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-7 {
		flex: 7 1 58.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-8 {
		flex: 8 1 66.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-9 {
		flex: 9 1 75%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-10 {
		flex: 10 1 83.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-11 {
		flex: 11 1 91.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-12 {
		flex: 12 1 100%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-1 {
		flex: 1 1 8.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-2 {
		flex: 2 1 16.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-3 {
		flex: 3 1 25%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-4 {
		flex: 4 1 33.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-5 {
		flex: 5 1 41.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-6 {
		flex: 6 1 50%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-7 {
		flex: 7 1 58.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-8 {
		flex: 8 1 66.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-9 {
		flex: 9 1 75%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-10 {
		flex: 10 1 83.3333%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-11 {
		flex: 11 1 91.6667%;
	}
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-12 {
		flex: 12 1 100%;
	}
}

/* Pantallas medianas (tablet y portátiles chicos): de a DOS por fila, y si un
   campo queda solo en su línea, ocupa todo el ancho. */
@media (min-width: 768px) and (max-width: 1199px) {
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) {
		display: flex;
		flex-wrap: wrap;
	}

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

	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > :is([class*="col-md-"], [class*="col-sm-"]) {
		float: none;
		width: auto;
		flex: 1 1 50%;
		max-width: none;
		min-width: 0;
	}

	/* los campos que ocupaban la fila entera la siguen ocupando */
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-md-12,
	.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > .col-sm-12 {
		flex-basis: 100%;
	}
}

/* En cualquier ancho: nada se sale de su columna */
.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > :is([class*="col-md-"], [class*="col-sm-"]) .form-control,
.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > :is([class*="col-md-"], [class*="col-sm-"]) .select2-container,
.row:has(> :is([class*="col-md-"], [class*="col-sm-"]) > .form-group) > :is([class*="col-md-"], [class*="col-sm-"]) .input-group {
	max-width: 100%;
}

/* Hay vistas donde falta el </label> y el campo queda DENTRO de la etiqueta.
   Sin esto el campo se pega al texto de la etiqueta y se recorta. */
.form-group > .control-label:has(.form-control, .select2-container, .input-icon, .input-group) {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.control-label > .form-control,
.control-label > .select2-container,
.control-label > .input-icon,
.control-label > .input-group {
	display: block;
	width: 100% !important;
	margin-top: 6px;
	font-weight: 400;
}

/* 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;
}

/* El "+" que abre el detalle de la fila pasó a la columna de Acción (antes
   tenía una columna entera para él solo). Se dibuja como un botón más, en vez
   del cuadrito de imagen del tema. */
html body .dataTable tbody td .row-details {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 24px;
	margin: 0 4px 0 0;
	vertical-align: middle;
	border: 1px solid var(--px-line);
	border-radius: var(--px-r-sm);
	background-color: #fff;
	background-image: none !important;
	color: var(--px-blue-700);
	transition: background-color .16s ease, border-color .16s ease;
}

html body .dataTable tbody td .row-details:hover {
	background-color: var(--px-tint);
	border-color: var(--px-blue-200);
}

/* la rayita horizontal siempre; la vertical solo cuando está cerrado (+ / −) */
html body .dataTable tbody td .row-details:before,
html body .dataTable tbody td .row-details.row-details-close:after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 1px;
}

html body .dataTable tbody td .row-details:before {
	width: 10px;
	height: 2px;
}

html body .dataTable tbody td .row-details.row-details-close:after {
	width: 2px;
	height: 10px;
}

/* 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;
	}
}