/**
 * Citas Copamex — refinamiento visual global (tablas, formularios, widgets).
 * Carga después de SmartAdmin y app-master-fibers.css.
 */
:root {
	--mf-radius-sm: 6px;
	--mf-radius-md: 10px;
	--mf-radius-lg: 12px;
	--mf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--mf-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
	--mf-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);
	--mf-border: #dbe8e0;
	--mf-border-soft: #e8f0eb;
	--mf-surface: #ffffff;
	--mf-surface-muted: #f6faf7;
	--mf-table-hover: #edf7f0;
	--mf-transition: 0.18s ease;
}

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

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

.page-title.txt-color-blueDark > 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.65rem 1rem !important;
	background: linear-gradient(135deg, var(--mf-primary, #1a8741) 0%, var(--mf-accent, #008f39) 100%) !important;
	border: none !important;
}

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

.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 */
.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 .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, #1a8741) !important;
	box-shadow: var(--mf-focus-ring, 0 0 0 3px rgba(26, 135, 65, 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, #f0f7f2 0%, #e8f2eb 100%) !important;
	color: var(--mf-ink, #0f172a) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: none;
	letter-spacing: 0.02em;
	border-bottom: 2px solid var(--mf-primary, #1a8741) !important;
	border-top: none !important;
	padding: 10px 12px !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: #fafcfb !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;
}

/* Contenedor con scroll suave en tablas anchas */
.outer_div,
.dataTables_wrapper {
	border-radius: 0 0 var(--mf-radius-sm) var(--mf-radius-sm);
}

.outer_div .table-responsive,
.dataTables_wrapper .dataTables_scroll {
	border-radius: var(--mf-radius-sm);
}

/* DataTables controles */
.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, #1a8741) !important;
	outline: none;
	box-shadow: var(--mf-focus-ring, 0 0 0 3px rgba(26, 135, 65, 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, #1a8741) !important;
	border-color: var(--mf-primary-hover, #156f36) !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, #e8f5ed) !important;
	border-color: var(--mf-primary, #1a8741) !important;
	color: var(--mf-ink, #0f172a) !important;
}

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

/* Evitar cuadros vacíos en paginación (artefacto DataTables/Bootstrap) */
.dataTables_wrapper .dataTables_paginate .paginate_button:empty,
.dataTables_wrapper .dataTables_paginate li.paginate_button:not(.previous):not(.next):not(.active):empty {
	display: none !important;
}

/* Menú Opción en tablas (agendar, autorizar, recepciones…) */
.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 {
	overflow: visible !important;
}

.outer_div table.dataTable tbody td {
	overflow: visible !important;
	position: relative;
	vertical-align: middle;
}

.outer_div .btn-group.mf-tabla-acciones,
.outer_div table.dataTable .btn-group {
	position: relative !important;
	display: inline-flex !important;
	vertical-align: middle;
}

.outer_div .btn-group.mf-tabla-acciones > .dropdown-menu,
.outer_div table.dataTable .btn-group > .dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	bottom: auto !important;
	right: 0 !important;
	left: auto !important;
	float: none !important;
	z-index: 1060 !important;
	min-width: 200px;
	margin-top: 2px;
}

.outer_div .btn-group.open > .dropdown-menu {
	display: block !important;
}

/* Contador legado bajo tabla (no aplicar a tablas hermanas de DataTables) */
.mf-dt-legacy-total,
.outer_div > table.mf-dt-legacy-total {
	display: none !important;
}

/* Diálogo de cita cancelada */
.mf-cita-cancel-modal .modal-content {
	border-radius: 6px;
	overflow: hidden;
}
.mf-cita-flash-modal .mf-cita-flash-folio,
.mf-cita-cancel-modal .mf-cita-cancel-folio {
	color: #1A8741;
}

/* SmartAdmin no incluye .col-11 / .col-12 en smart-form (solo hasta col-10) */
.smart-form .col-11 {
	width: 91.66%;
}
.smart-form .col-12 {
	width: 100%;
}

/* Configuración del sistema (config.php) */
.smart-form.mf-config-form fieldset {
	padding-left: 16px;
	padding-right: 16px;
}

.smart-form.mf-config-form .row,
.smart-form.mf-config-form section.col {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	display: block !important;
	box-sizing: border-box;
}

.smart-form.mf-config-form .mf-config-aviso-row,
.smart-form.mf-config-form .mf-config-aviso-section {
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.smart-form.mf-config-form textarea.mf-config-aviso {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0;
	height: auto;
	resize: none;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.45;
	box-sizing: border-box;
	padding: 10px 12px !important;
	border-radius: var(--mf-radius-sm, 6px) !important;
	border: 1px solid var(--mf-border, #cbd5e1) !important;
	background: #fff !important;
}

.smart-form.mf-config-form textarea.mf-config-aviso:focus {
	border-color: var(--mf-primary, #1a8741) !important;
	box-shadow: var(--mf-focus-ring, 0 0 0 3px rgba(26, 135, 65, 0.2)) !important;
	outline: none;
}

.smart-form.mf-config-form input#tam {
	max-width: 200px;
}

/* Folio en reprogramación de cita (reagendar_cita.php) */
.smart-form header.mf-reagendar-folio {
	display: block;
	margin: 0;
	padding: 14px 16px !important;
	min-height: 0;
	background: #fff !important;
	background-image: none !important;
	border: none !important;
	border-bottom: 1px solid #e5e7eb !important;
	box-shadow: none !important;
}

.smart-form header.mf-reagendar-folio strong {
	color: #111827 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-shadow: none !important;
}

/* Aviso amarillo de confirmación (cancelar.php, nosepresento.php) */
.smart-form header.mf-cancelar-aviso {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent !important;
	min-height: 0;
}

.mf-cancelar-aviso-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
	border: 2px solid #f59e0b !important;
	border-left: 6px solid #d97706 !important;
	border-radius: var(--mf-radius-md, 10px);
	box-shadow: 0 2px 10px rgba(217, 119, 6, 0.15);
}

.mf-cancelar-aviso-text {
	flex: 1 1 280px;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: #92400e !important;
	font-weight: 500;
}

.mf-cancelar-aviso-text .fa-exclamation-triangle {
	color: #d97706;
	margin-right: 8px;
	font-size: 20px;
	vertical-align: middle;
}

.mf-cancelar-aviso-btn {
	flex: 0 0 auto;
	background-color: #d97706 !important;
	border-color: #b45309 !important;
	color: #fff !important;
	font-weight: 600;
	white-space: nowrap;
}

.mf-cancelar-aviso-btn:hover,
.mf-cancelar-aviso-btn:focus {
	background-color: #b45309 !important;
	border-color: #92400e !important;
	color: #fff !important;
}

/* Documento actual en editar/agregar cita */
.mf-archivo-hint {
	color: #b45309;
	font-size: 12px;
	display: block;
	margin-top: 6px;
}

.mf-archivo-actual-wrap {
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--mf-surface-muted, #f6faf7);
	border: 1px solid var(--mf-border-soft, #e8f0eb);
	border-radius: var(--mf-radius-sm, 6px);
}

.mf-archivo-actual-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--mf-ink-soft, #475569);
	margin-bottom: 6px;
}

.mf-archivo-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mf-primary-hover, #156f36) !important;
	text-decoration: none !important;
	padding: 4px 8px;
	border-radius: var(--mf-radius-sm, 6px);
	transition: background var(--mf-transition, 0.18s ease);
}

.mf-archivo-link:hover {
	background: var(--mf-primary-muted, #e8f5ed);
	text-decoration: underline !important;
}

.mf-archivo-link .fa {
	font-size: 18px;
}

/* Botón Opción en filas */
.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) !important;
	border-color: var(--mf-primary) !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;
}

.smart-form .label,
.smart-form label.label {
	color: var(--mf-ink-soft, #475569);
	font-weight: 600;
	font-size: 12px;
	margin-bottom: 4px;
}

.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, #1a8741) !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;
}

/* Campos solo lectura en confirmación */
.smart-form .input[style*="background-color"],
.smart-form label.input[style*="background-color"] {
	background-color: var(--mf-surface-muted) !important;
	border-radius: var(--mf-radius-sm);
	border: 1px solid var(--mf-border-soft) !important;
}

/* -------- 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, #1a8741) !important;
	color: var(--mf-primary-hover, #156f36) !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-primary, #1a8741) !important;
	background: #f0fdf4 !important;
	color: #166534 !important;
}

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

/* -------- Badges de estado (suavizados) -------- */
.cita-estado-badge,
.label[class*="estado"],
span.label {
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 5px 10px !important;
	box-shadow: var(--mf-shadow-sm);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* -------- 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(135deg, #1a6b8a 0%, #57889c 100%) !important;
}

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

/* -------- Select2 -------- */
.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, #1a8741) !important;
}

.select2-results .select2-highlighted {
	background: var(--mf-primary, #1a8741) !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;
}

/* -------- Utilidades -------- */
.mf-panel-soft {
	background: var(--mf-surface);
	border: 1px solid var(--mf-border-soft);
	border-radius: var(--mf-radius-md);
	padding: 1rem 1.25rem;
	box-shadow: var(--mf-shadow-sm);
}

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

.outer_div::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
	background: #b8d4c4;
	border-radius: 8px;
}

/* Responsive: tablas en móvil */
@media (max-width: 767px) {
	.widget-body-toolbar {
		padding: 10px !important;
	}

	.widget-body-toolbar .col-sm-2,
	.widget-body-toolbar .col-sm-3,
	.widget-body-toolbar .col-sm-5 {
		margin-bottom: 8px;
	}

	.table > thead > tr > th,
	.table > tbody > tr > td {
		padding: 8px 8px !important;
		font-size: 12px !important;
	}
}