/**
 * Recolección COPAMEX — Refinamiento visual global (tablas, formularios, widgets, modales).
 * Alineado exactamente con el look & feel de Mantenimiento (mtto / imagen1).
 * Headers oscuros charcoal (#3a3f51), tablas en gris pastel (#f7f8fa a #eef0f4) y píldoras vibrantes.
 */
:root {
	--mf-radius-sm: 5px;
	--mf-radius-md: 6px;
	--mf-radius-lg: 8px;
	--mf-shadow-sm: 0 1px 2px rgba(37, 40, 48, 0.05);
	--mf-shadow-md: 0 2px 10px rgba(37, 40, 48, 0.07);
	--mf-shadow-lg: 0 6px 18px rgba(37, 40, 48, 0.09);
	--mf-border: #d5d8e0;
	--mf-border-soft: #e6e8ed;
	--mf-surface: #ffffff;
	--mf-surface-muted: #f5f6f8;
	--mf-table-hover: #f0f2f5;
	--mf-transition: 0.18s ease;
}

/* -------- Contenido y títulos -------- */
#content {
	padding-bottom: 2rem;
}

.page-title.txt-color-blueDark,
.page-title {
	color: var(--mf-ink, #0f172a) !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 0.35em;
}

.page-title.txt-color-blueDark > span,
.page-title > span {
	color: var(--mf-ink-soft, #475569) !important;
	font-weight: 500;
	font-size: 0.92em;
}

/* -------- Tarjetas / Jarviswidget -------- */
.jarviswidget {
	border: 1px solid var(--mf-border-soft) !important;
	border-radius: var(--mf-radius-md) !important;
	box-shadow: var(--mf-shadow-md) !important;
	margin-bottom: 1.5rem !important;
	overflow: visible;
	background: var(--mf-surface) !important;
}

.jarviswidget > div,
.jarviswidget .widget-body {
	overflow: visible !important;
}

.jarviswidget > header {
	border-radius: var(--mf-radius-md) var(--mf-radius-md) 0 0 !important;
	padding: 0.55rem 0.9rem !important;
	background: linear-gradient(180deg, #44495c 0%, var(--mf-primary, #3a3f51) 100%) !important;
	border: none !important;
}

.jarviswidget[style*="1A8741"],
.jarviswidget[style*="1a8741"] {
	background-color: transparent !important;
}

.jarviswidget > header h2 {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	color: #fff !important;
}

.jarviswidget .widget-body {
	border-radius: 0 0 var(--mf-radius-md) var(--mf-radius-md);
}

.jarviswidget .widget-body.no-padding {
	background: var(--mf-surface);
}

/* Barra de filtros sobre tablas (toolbar como en imagen1) */
.widget-body-toolbar {
	background: var(--mf-surface-muted) !important;
	border-bottom: 1px solid var(--mf-border-soft) !important;
	padding: 12px 14px !important;
	margin: 0 !important;
}

.widget-body-toolbar label {
	font-weight: 600;
	color: var(--mf-ink, #2a2f3a);
	font-size: 12px;
	margin-bottom: 4px;
}

.widget-body-toolbar .form-control,
.widget-body-toolbar .select2-container .select2-choice {
	border-radius: var(--mf-radius-sm) !important;
	border-color: var(--mf-border) !important;
	min-height: 34px;
	transition: border-color var(--mf-transition), box-shadow var(--mf-transition);
}

.widget-body-toolbar .form-control:focus {
	border-color: var(--mf-primary, #3a3f51) !important;
	box-shadow: var(--mf-focus-ring, 0 0 0 3px rgba(58, 63, 81, 0.25)) !important;
}

.widget-body-toolbar .btn {
	border-radius: var(--mf-radius-sm);
	font-weight: 600;
	transition: transform var(--mf-transition), box-shadow var(--mf-transition);
}

.widget-body-toolbar .btn:active {
	transform: translateY(1px);
}

/* -------- Tablas (Bootstrap + DataTables + AJAX) -------- */
.table,
table.table,
.outer_div table,
.dataTables_wrapper table {
	border-collapse: separate !important;
	border-spacing: 0;
}

.table > thead > tr > th,
.table > thead > tr > td,
.outer_div .table thead th,
.dataTables_wrapper .table thead th {
	background: linear-gradient(180deg, #f7f8fa 0%, #eef0f4 100%) !important;
	color: var(--mf-ink, #2a2f3a) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: none;
	letter-spacing: 0.02em;
	border-bottom: 2px solid #c5cad3 !important;
	border-top: none !important;
	padding: 9px 11px !important;
	vertical-align: middle !important;
	white-space: nowrap;
}

.table > tbody > tr > td,
.outer_div .table tbody td,
.dataTables_wrapper .table tbody td {
	padding: 9px 12px !important;
	font-size: 13px;
	color: var(--mf-ink-soft, #334155);
	border-color: var(--mf-border-soft) !important;
	vertical-align: middle !important;
	transition: background-color var(--mf-transition);
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > td {
	background-color: #fafafa !important;
}

.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover > td,
.outer_div .table tbody tr:hover td,
.dataTables_wrapper .table tbody tr:hover td {
	background-color: var(--mf-table-hover) !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
	border-color: var(--mf-border-soft) !important;
}

/* DataTables Contenedor y Paginación */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	padding: 10px 14px;
	font-size: 13px;
	color: var(--mf-ink-soft, #475569);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--mf-border) !important;
	border-radius: var(--mf-radius-sm) !important;
	padding: 6px 10px !important;
	background: #fff !important;
	transition: border-color var(--mf-transition), box-shadow var(--mf-transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
	border-color: var(--mf-primary, #3a3f51) !important;
	outline: none;
	box-shadow: var(--mf-focus-ring, 0 0 0 3px rgba(58, 63, 81, 0.2)) !important;
}

.dataTables_wrapper .dataTables_paginate {
	text-align: right;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination > li {
	border-radius: var(--mf-radius-sm) !important;
	margin: 0 !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	list-style: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > span {
	display: inline-block;
	border-radius: var(--mf-radius-sm) !important;
	margin: 0 !important;
	border: 1px solid var(--mf-border) !important;
	padding: 5px 11px !important;
	background: #fff !important;
	color: var(--mf-ink-soft, #475569) !important;
	line-height: 1.3;
	transition: background var(--mf-transition), color var(--mf-transition), border-color var(--mf-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate ul.pagination > .active > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > .active > span {
	background: var(--mf-primary, #3a3f51) !important;
	border-color: var(--mf-primary-hover, #2c303c) !important;
	color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a:hover {
	background: var(--mf-primary-muted, #eef0f4) !important;
	border-color: var(--mf-primary, #3a3f51) !important;
	color: var(--mf-ink, #2a2f3a) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
.dataTables_wrapper .dataTables_paginate ul.pagination > .disabled > a {
	opacity: 0.45;
	cursor: default;
}

/* Menú Desplegable en tablas */
.outer_div,
.outer_div .dataTables_wrapper,
.outer_div .dataTables_scroll,
.outer_div .dataTables_scrollBody,
.outer_div table.dataTable tbody,
.outer_div table.dataTable tbody tr,
#dt_basic2_wrapper,
#dt_basic3_wrapper {
	overflow: visible !important;
}

.table .btn-group .btn-default {
	border-color: var(--mf-border) !important;
	background: #fff !important;
	font-size: 12px;
}

.table .btn-group .btn-default:hover {
	background: var(--mf-primary-muted, #eef0f4) !important;
	border-color: var(--mf-primary, #3a3f51) !important;
}

/* Menú Desplegable en tablas (Acciones / Engrane) */
.table .dropdown-menu,
.outer_div .dropdown-menu,
td .btn-group .dropdown-menu {
	border-radius: var(--mf-radius-sm);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16) !important;
	border: 1px solid var(--mf-border) !important;
	background: #fff !important;
	padding: 5px 0 !important;
	z-index: 1060 !important;
	list-style: none !important;
}

.table .dropdown-menu > li > a,
.outer_div .dropdown-menu > li > a,
td .btn-group .dropdown-menu > li > a {
	padding: 8px 16px !important;
	font-size: 13px !important;
	color: #334155 !important;
	display: block !important;
	text-decoration: none !important;
	clear: both !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

.table .dropdown-menu > li > a:hover,
.outer_div .dropdown-menu > li > a:hover,
td .btn-group .dropdown-menu > li > a:hover {
	background-color: var(--mf-primary-muted, #eef0f4) !important;
	color: var(--mf-primary, #3a3f51) !important;
}

.table .dropdown-menu .divider,
.outer_div .dropdown-menu .divider,
td .btn-group .dropdown-menu .divider {
	height: 1px;
	margin: 5px 0;
	overflow: hidden;
	background-color: var(--mf-border-soft, #e6e8ed) !important;
}

/* -------- Formularios smart-form -------- */
.smart-form {
	padding: 8px 4px 4px;
}

.smart-form fieldset {
	border: none;
	padding: 0.5rem 0.25rem 1rem;
}

.smart-form section {
	margin-bottom: 0.35rem;
}

/* Etiquetas de formulario: texto plano (sin píldora ni sombra) */
.smart-form .label,
.smart-form label.label,
label.label {
	color: var(--mf-ink-soft, #475569) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	margin-bottom: 4px;
	display: block !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
}

.smart-form .input input,
.smart-form .input select,
.smart-form .input textarea,
.smart-form .select select {
	border-radius: var(--mf-radius-sm) !important;
	border: 1px solid var(--mf-border) !important;
	background: #fff !important;
	box-shadow: var(--mf-shadow-sm);
	transition: border-color var(--mf-transition), box-shadow var(--mf-transition);
}

.smart-form .input input:focus,
.smart-form .input select:focus,
.smart-form .input textarea:focus {
	border-color: var(--mf-primary, #3a3f51) !important;
	box-shadow: var(--mf-focus-ring) !important;
}

.smart-form footer {
	background: var(--mf-surface-muted);
	border-top: 1px solid var(--mf-border-soft);
	border-radius: 0 0 var(--mf-radius-sm) var(--mf-radius-sm);
	padding: 14px 16px !important;
	margin-top: 8px;
}

.smart-form footer .btn {
	border-radius: var(--mf-radius-sm);
	font-weight: 600;
	min-width: 100px;
}

/* -------- Botones globales -------- */
.btn {
	border-radius: var(--mf-radius-sm) !important;
	font-weight: 600;
	transition: background-color var(--mf-transition), border-color var(--mf-transition), box-shadow var(--mf-transition), transform 0.12s ease;
}

.btn-sm {
	border-radius: 5px !important;
}

.btn-default {
	background: #fff !important;
	border-color: var(--mf-border) !important;
	color: var(--mf-ink-soft, #475569) !important;
}

.btn-default:hover {
	background: var(--mf-surface-muted) !important;
	border-color: var(--mf-primary, #3a3f51) !important;
	color: var(--mf-primary-hover, #2c303c) !important;
}

/* -------- Alertas -------- */
.alert {
	border-radius: var(--mf-radius-md) !important;
	border-width: 1px !important;
	border-left-width: 4px !important;
	box-shadow: var(--mf-shadow-sm);
}

.alert-danger {
	border-left-color: #dc2626 !important;
	background: #fef2f2 !important;
	color: #991b1b !important;
}

.alert-success {
	border-left-color: var(--mf-success, #3d8b54) !important;
	background: #f3faf5 !important;
	color: #1f5c32 !important;
}

.alert-warning {
	border-left-color: #d97706 !important;
	background: #fffbeb !important;
}

/* -------- Badges de estado (solo span.label / label-*) — no etiquetas de form -------- */
span.label,
.label.label-success,
.label.label-danger,
.label.label-warning,
.label.label-info,
.label.label-primary,
.label.label-default {
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 4px 12px !important;
	font-size: 11px !important;
	display: inline-block !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	border: none !important;
	text-shadow: none !important;
}

/* Píldora roja (Pendiente, etc.) */
.label-danger,
span.label-danger,
span.label[style*="#b91c1c"],
span.label[style*="#dc2626"],
span.label[style*="#cc0000"] {
	background-color: #d92525 !important;
	color: #fff !important;
}

/* Píldora naranja (En Proceso, etc.) */
.label-warning,
span.label-warning,
span.label[style*="#ff6600"],
span.label[style*="#e65100"],
span.label[style*="#FF6600"],
span.label[style*="#d97706"] {
	background-color: #e65100 !important;
	color: #fff !important;
}

/* Píldora verde (Activo, Completado, Disponible) */
.label-success,
span.label-success,
span.label[style*="#009900"],
span.label[style*="#16a34a"],
span.label[style*="#3d8b54"] {
	background-color: #009900 !important;
	color: #fff !important;
}

/* Píldora neutra / suspendida */
.label-default,
span.label-default {
	background-color: #64748b !important;
	color: #fff !important;
}

/* -------- Modales -------- */
.modal-content {
	border-radius: var(--mf-radius-md) !important;
	border: none !important;
	box-shadow: var(--mf-shadow-lg) !important;
	overflow: hidden;
}

.modal-header {
	border-radius: var(--mf-radius-md) var(--mf-radius-md) 0 0 !important;
	background: linear-gradient(180deg, #44495c 0%, var(--mf-primary, #3a3f51) 100%) !important;
	color: #fff !important;
}

.modal-header .modal-title,
.modal-header h4 {
	color: #fff !important;
	font-weight: 600;
}

.modal-header .close {
	color: #fff !important;
	opacity: 0.85;
}

.modal-footer {
	border-top: 1px solid var(--mf-border-soft) !important;
	background: var(--mf-surface-muted) !important;
}

/* -------- Select2 4.x (JS 4.0.1 + CSS SmartAdmin 3.x) --------
 * Sin esto el <select> nativo queda visible junto al widget → “campos duplicados”.
 */
select.select2-hidden-accessible {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
}

.select2-container {
	width: 100% !important;
	max-width: 100%;
	display: block;
	margin-bottom: 4px;
}

.select2-container .select2-selection--single {
	height: 34px !important;
	border: 1px solid var(--mf-border, #dbe8e0) !important;
	border-radius: var(--mf-radius-sm, 6px) !important;
	background: #fff !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 32px !important;
	padding-left: 10px !important;
	color: #334155 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
	height: 32px !important;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
	border-color: var(--mf-primary, #3a3f51) !important;
	box-shadow: var(--mf-focus-ring, 0 0 0 3px rgba(58, 63, 81, 0.18));
}

.select2-container .select2-choice {
	border-radius: var(--mf-radius-sm) !important;
	border-color: var(--mf-border) !important;
	min-height: 34px;
	line-height: 32px !important;
}

.select2-dropdown-open .select2-choice {
	border-color: var(--mf-primary, #3a3f51) !important;
}

.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--mf-primary, #3a3f51) !important;
	color: #fff !important;
}

.select2-dropdown {
	border-color: var(--mf-border, #dbe8e0) !important;
	border-radius: var(--mf-radius-sm, 6px) !important;
	z-index: 1080 !important;
}

/* -------- Enlaces en celdas -------- */
.table a,
.outer_div a,
.dataTables_wrapper a {
	font-weight: 500;
	text-decoration: none;
}

.table a:hover,
.outer_div a:hover {
	text-decoration: underline;
}

/* -------- Ribbon -------- */
#ribbon {
	box-shadow: var(--mf-shadow-sm);
	border-radius: 0 0 var(--mf-radius-sm) var(--mf-radius-sm);
	margin-bottom: 4px;
}

#ribbon .breadcrumb {
	background: transparent !important;
	font-size: 13px;
}

/* Scrollbar sutil (WebKit) */
::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}

::-webkit-scrollbar-thumb {
	background: #b8d4c4;
	border-radius: 8px;
}