.map-input-google:after {
	width: 40px;
	height: 40px;
	display: block;
	content: " ";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -40px 0 0 -11px;
	background: url("../assets/images/icons/marker.png") no-repeat;
	background-size: 40px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
	pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}

.bg-purple {
	background-color: #592d5f !important;
}

.btn-circle {
	border-radius: 100%;
	height: 2.5rem;
	width: 2.5rem;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-circle.btn-sm,
.btn-group-sm > .btn-circle.btn {
	height: 1.8rem;
	width: 1.8rem;
	font-size: 0.75rem;
}

.btn-circle.btn-lg,
.btn-group-lg > .btn-circle.btn {
	height: 3.5rem;
	width: 3.5rem;
	font-size: 1.35rem;
}

.text-purple-mac {
	color: #592f5f !important;
}

.text-green-mac {
	color: rgb(221, 252, 250) !important;
}

.text-blue-mac {
	color: #009fe3;
}

.text-blue-dark {
	color: #366092 !important;
}

.text-green-sapg {
	color: #a9d08e !important;
}

.text-green-light-sapg {
	color: #e2efda !important;
}

.text-green-dark-sapg {
	color: #82a36b !important;
}

.text-primary {
	color: #5d9cec !important;
}

.text-primary-light {
	color: #8bb8f1 !important;
}

.text-primary-dark {
	color: #2f80e7 !important;
}

.text-success {
	color: #27c24c !important;
}

.text-success-light {
	color: #43d967 !important;
}

.text-success-dark {
	color: #1e983b !important;
}

.text-info {
	color: #23b7e5 !important;
}

.text-info-light {
	color: #51c6ea !important;
}

.text-info-dark {
	color: #1797be !important;
}

.text-warning {
	color: #ff902b !important;
}

.text-warning-light {
	color: #ffab5e !important;
}

.text-warning-dark {
	color: #f77600 !important;
}

.text-danger {
	color: #f05050 !important;
}

.text-danger-light {
	color: #f47f7f !important;
}

.text-danger-dark {
	color: #ec2121 !important;
}

.text-green {
	color: #37bc9b !important;
}

.text-green-light {
	color: #58ceb1 !important;
}

.text-green-dark {
	color: #2b957a !important;
}

.text-pink {
	color: #f532e5 !important;
}

.text-pink-light {
	color: #f763eb !important;
}

.text-pink-dark {
	color: #e90bd6 !important;
}

.text-purple {
	color: #7266ba !important;
}

.text-purple-light {
	color: #9289ca !important;
}

.text-purple-dark {
	color: #564aa3 !important;
}

.text-inverse {
	color: #131e26 !important;
}

.text-inverse-light {
	color: #243948 !important;
}

.text-inverse-dark {
	color: #020304 !important;
}

.text-yellow {
	color: #fad732 !important;
}

.text-yellow-light {
	color: #fbe164 !important;
}

.text-yellow-dark {
	color: #f3ca06 !important;
}

.text-white {
	color: #fff !important;
}

.text-gray-darker {
	color: #232735 !important;
}

.text-gray-dark {
	color: #3a3f51 !important;
}

.text-gray {
	color: #dde6e9 !important;
}

.text-gray-light {
	color: #e4eaec !important;
}

.text-gray-lighter {
	color: #edf1f2 !important;
}

.bg-green-mac {
	background-color: rgb(221, 252, 250) !important;
	color: #592f5f !important;
}

.bg-blue-mac {
	background-color: #009fe3 !important;
	color: #592f5f;
}

.bg-purple-mac {
	background-color: #592f5f !important;
	color: #ffff !important;
}

.bg-blue {
	background-color: #9bc2e6;
	color: #000 !important;
}

.bg-blue small {
	color: inherit;
}

.bg-blue-dark {
	background-color: #366092;
	color: #fff !important;
}

.bg-blue-dark small {
	color: inherit;
}

.bg-green-sapg {
	background-color: #a9d08e;
	color: #fff !important;
}

.bg-green-light-sapg {
	background-color: #e2efda;
	color: #000 !important;
}

.bg-green-dark-sapg {
	background-color: #82a36b;
	color: #fff !important;
}

.bg-green small {
	color: inherit;
}

.bg-primary {
	background-color: #5d9cec;
	color: #fff !important;
}

.bg-primary-light {
	background-color: #8bb8f1;
	color: #fff !important;
}

.bg-primary-dark {
	background-color: #2f80e7;
	color: #fff !important;
}

.bg-primary small {
	color: inherit;
}

.bg-success {
	background-color: #27c24c;
	color: #fff !important;
}

.bg-success-light {
	background-color: #43d967;
	color: #fff !important;
}

.bg-success-dark {
	background-color: #1e983b;
	color: #fff !important;
}

.bg-success small {
	color: inherit;
}

.bg-info {
	background-color: #23b7e5;
	color: #fff !important;
}

.bg-info-light {
	background-color: #51c6ea;
	color: #fff !important;
}

.bg-info-dark {
	background-color: #1797be;
	color: #fff !important;
}

.bg-info small {
	color: inherit;
}

.bg-warning {
	background-color: #ff902b !important;
	color: #fff !important;
}

.bg-warning-light {
	background-color: #ffab5e !important;
	color: #fff !important;
}

.bg-warning-dark {
	background-color: #f77600 !important;
	color: #fff !important;
}

.bg-warning-pastel {
	background-color: #fceec9 !important;
	color: #000;
}

.bg-warning small {
	color: inherit;
}

.bg-danger {
	background-color: #f05050;
	color: #fff !important;
}

.bg-danger-light {
	background-color: #f47f7f !important;
	color: #fff !important;
}

.bg-danger-dark {
	background-color: #ec2121;
	color: #fff !important;
}

.bg-danger-pastel {
	background-color: #f8ccc8 !important;
	color: #000;
}

.bg-danger small {
	color: inherit;
}

.bg-green {
	background-color: #37bc9b;
	color: #fff !important;
}

.bg-green-light {
	background-color: #58ceb1;
	color: #fff !important;
}

.bg-green-dark {
	background-color: #2b957a;
	color: #fff !important;
}

.bg-green small {
	color: inherit;
}

.bg-pink {
	background-color: #f532e5;
	color: #fff !important;
}

.bg-pink-light {
	background-color: #f763eb;
	color: #fff !important;
}

.bg-pink-dark {
	background-color: #e90bd6;
	color: #fff !important;
}

.bg-pink small {
	color: inherit;
}

.bg-purple {
	background-color: #7266ba;
	color: #fff !important;
}

.bg-purple-light {
	background-color: #9289ca !important;
	color: #fff !important;
}

.bg-purple-dark {
	background-color: #564aa3;
	color: #fff !important;
}

.bg-purple small {
	color: inherit;
}

.bg-inverse {
	background-color: #131e26;
	color: #fff !important;
}

.bg-inverse-light {
	background-color: #243948;
	color: #fff !important;
}

.bg-inverse-dark {
	background-color: #020304;
	color: #fff !important;
}

.bg-inverse small {
	color: inherit;
}

.bg-yellow {
	background-color: #fad732;
	color: #fff !important;
}

.bg-yellow-light {
	background-color: #fbe164;
	color: #fff !important;
}

.bg-yellow-dark {
	background-color: #f3ca06;
	color: #fff !important;
}

.bg-yellow small {
	color: inherit;
}

.bg-white {
	background-color: #fff;
	color: inherit !important;
}

.bg-gray-darker {
	background-color: #232735;
	color: #fff !important;
}

.bg-gray-dark {
	background-color: #3a3f51;
	color: #fff !important;
}

.bg-gray {
	background-color: #dde6e9;
	color: #656565 !important;
}

.bg-gray-light {
	background-color: #e4eaec;
	color: #656565 !important;
}

.bg-gray-lighter {
	background-color: #edf1f2;
	color: #656565 !important;
}

.bg-transparent {
	background-color: transparent !important;
}

.bg-cover {
	background-size: cover;
}

/*Estilos botones personalizados*/
.btn-purple {
	color: #fff !important;
	background-color: #7266ba !important;
	border-color: #7266ba !important;
}

.btn-purple:hover {
	color: #fff !important;
	background-color: #564aa3 !important;
	border-color: #564aa3 !important;
}

.btn-purple:focus,
.btn-purple.focus {
	box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5) !important;
}

.btn-purple.disabled,
.btn-purple:disabled {
	color: #fff !important;
	background-color: #7266ba !important;
	border-color: #7266ba !important;
}

.btn-purple:not(:disabled):not(.disabled):active,
.btn-purple:not(:disabled):not(.disabled).active,
.show > .btn-purple.dropdown-toggle {
	color: #fff !important;
	background-color: #7266ba !important;
	border-color: #564aa3 !important;
}

.btn-purple:not(:disabled):not(.disabled):active:focus,
.btn-purple:not(:disabled):not(.disabled).active:focus,
.show > .btn-purple.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5) !important;
}

.btn-green {
	color: #fff !important;
	background-color: #37bc9b !important;
	border-color: #37bc9b !important;
}

.btn-green:hover {
	color: #fff !important;
	background-color: #2b957a !important;
	border-color: #2b957a !important;
}

.btn-green:focus,
.btn-green.focus {
	box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5) !important;
}

.btn-green.disabled,
.btn-green:disabled {
	color: #fff !important;
	background-color: #37bc9b !important;
	border-color: #37bc9b !important;
}

.btn-green:not(:disabled):not(.disabled):active,
.btn-green:not(:disabled):not(.disabled).active,
.show > .btn-green.dropdown-toggle {
	color: #fff !important;
	background-color: #2b957a !important;
	border-color: #10707f !important;
}

.btn-green-aquarium {
	color: #fff !important;
	background-color: #21f591 !important;
	border-color: #18d67e !important;
}

.btn-green-aquarium:hover {
	color: #fff !important;
	background-color: #21f591 !important;
	border-color: #18d67e !important;
}
.btn-green-aquarium.disabled,
.btn-green-aquarium:disabled {
	color: #fff !important;
	background-color: #64edad !important;
	border-color: #54ce95 !important;
}
/*Estilos de tabla estilo purpura*/
.btn-green:not(:disabled):not(.disabled):active:focus,
.btn-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-green.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5) !important;
}

.btn-outline-purple {
	color: #7266ba !important;
	border-color: #564aa3 !important;
}

.btn-outline-purple:hover {
	color: #fff !important;
	background-color: #7266ba !important;
	border-color: #564aa3 !important;
}

.btn-outline-purple:focus,
.btn-outline-purple.focus {
	box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5) !important;
}

.btn-outline-purple.disabled,
.btn-outline-purple:disabled {
	color: #7266ba;
	background-color: transparent;
}

.btn-outline-purple:not(:disabled):not(.disabled):active,
.btn-outline-purple:not(:disabled):not(.disabled).active,
.show > .btn-outline-purple.dropdown-toggle {
	color: #fff;
	background-color: #7266ba;
	border-color: #564aa3;
}

.btn-outline-purple:not(:disabled):not(.disabled):active:focus,
.btn-outline-purple:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-purple.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(114, 102, 186, 0.5);
}

.badge-purple {
	color: #fff;
	background-color: #7266ba;
}

a.badge-purple:hover,
a.badge-purple:focus {
	color: #fff;
	background-color: #9289ca;
}

a.badge-purple:focus,
a.badge-purple.focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.bg-purple-gradient {
	background: #9289ca;
	background: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #9289ca),
		color-stop(1, #7266ba)
	);
	background: -ms-linear-gradient(bottom, #9289ca, #7266ba);
	background: -moz-linear-gradient(center bottom, #9289ca 0%, #564aa3 100%);
	background: -o-linear-gradient(#564aa3, #9289ca);
	color: #ffffff;
}

.images {
	width: 100%;
	flex-wrap: wrap;
	height: auto;
	position: relative;
	overflow-y: auto;
}

.card-image {
	overflow: hidden !important;
	position: relative !important;
	padding: 0.5rem !important;
}

.img-actions {
	position: absolute !important;
	right: 0.5rem !important;
	top: 0.5rem !important;
	margin: 0.5rem 0.5rem !important;
}

.counter {
	position: relative;
	top: -10px;
	right: 5px;
	z-index: 2;
	padding: 1px 9px;
	margin-right: -23px;
	font-size: 11px;
	color: #fff;
	background-color: #fe1212;
	border-radius: 10em;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
		0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
		0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.counter.counter-sm {
	font-size: 8px;
}

.counter.counter-lg {
	font-size: 12px;
}

.img-wrapper {
	position: relative;
	text-align: center;
}

.img-responsive {
	height: auto;
}

.img-overlay {
	position: absolute;
	top: 10px;
	left: 0px;
	right: 0px;
}

.img-overlay:before {
	content: " ";
	display: block;
	/* adjust 'height' to position overlay content vertically */
	height: 50%;
}

.btn-icon {
	cursor: pointer;
}

.btn-icon-danger {
	color: #fd3550;
	border-color: #fd3550;
}

.btn-icon-danger:hover {
	color: #d10b1e;
	border-color: #b02a37;
}

.btn-icon-success {
	color: #15ca20;
	border-color: #15ca20;
}

.btn-icon-success:hover {
	color: #0eb018;
	border-color: #0eb018;
}

/* =====================================================
   Portales móviles (Colaboradores y Pacientes)
   ===================================================== */

/* Tarjetas del dashboard */
.dash-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	padding: 1rem;
	border: 0;
	border-radius: 1rem;
	background-color: transparent;
	color: #fff !important;
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.18);
}

.dash-card img {
	width: 56px;
	height: 56px;
	filter: invert(1) grayscale(100%) brightness(200%);
}

.dash-card-text {
	margin-top: 0.65rem;
	font-weight: bold;
}

.dash-card-purple {
	background-color: #6f42c1;
}

.dash-card-blue {
	background-color: #0d6efd;
}

/* Tarjetas de acción del dashboard (tiles Material) */
.dash-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	min-height: 170px;
	padding: 1.25rem 1rem;
	border: 0;
	border-radius: 1rem;
	background: #fff;
	color: #232735;
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
}

.dash-tile-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin-bottom: 0.35rem;
}

.dash-tile-icon img {
	width: 30px;
	height: 30px;
	filter: invert(1) grayscale(100%) brightness(200%);
}

.dash-tile-title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	color: #232735;
}

.dash-tile-subtitle {
	font-size: 0.8rem;
	color: #6c757d;
}

.dash-tile-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 600;
	font-size: 0.85rem;
}

.dash-tile-purple .dash-tile-icon {
	background: linear-gradient(135deg, #7266ba, #564aa3);
}

.dash-tile-purple .dash-tile-cta {
	color: #7266ba;
}

.dash-tile-blue .dash-tile-icon {
	background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

.dash-tile-blue .dash-tile-cta {
	color: #0d6efd;
}

html.dark-theme .dash-tile {
	background: #1c2427;
	color: #e7e9ec;
}

html.dark-theme .dash-tile-title {
	color: #e7e9ec;
}

html.dark-theme .dash-tile-subtitle {
	color: #9ea4aa;
}

html.dark-theme .dash-tile-purple .dash-tile-cta {
	color: #9289ca;
}

html.dark-theme .dash-tile-blue .dash-tile-cta {
	color: #5d9cec;
}

/* Tarjetas de desprendibles de nómina (estilo Android/Material) */
.payroll-card {
	overflow: hidden;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.payroll-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
}

.payroll-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.9rem;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
}

.payroll-card-top-ready {
	background: linear-gradient(135deg, #27c24c, #1e983b);
}

.payroll-card-top-pending {
	background: linear-gradient(135deg, #ff902b, #f77600);
}

.payroll-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1rem;
	text-align: center;
}

.payroll-card-month {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: #232735;
	text-transform: capitalize;
}

.payroll-card-status {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
}

html.dark-theme .payroll-card {
	background: #1c2427;
}

html.dark-theme .payroll-card-month {
	color: #e7e9ec;
}

/* Botón de acción flotante (FAB) y menú flotante */
.fab-menu {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 40;
}

.fab-menu-btn {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	color: #fff;
	background: linear-gradient(135deg, #7266ba 0%, #564aa3 100%);
	box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab-menu-btn i {
	transition: transform 0.2s ease;
}

.fab-menu.open .fab-menu-btn {
	transform: rotate(45deg);
}

.fab-menu-btn:active {
	transform: scale(0.95);
}

.fab-menu-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.75rem);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.5rem) scale(0.95);
	transform-origin: bottom right;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.fab-menu.open .fab-menu-panel {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.fab-menu-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.1rem;
	border-radius: 2rem;
	background: #fff;
	color: #232735;
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.18);
	transition: background 0.15s ease, color 0.15s ease;
}

.fab-menu-item i {
	width: 1rem;
	text-align: center;
}

.fab-menu-item:hover,
.fab-menu-item:focus {
	background: #f1f2f6;
	color: #7266ba;
	text-decoration: none;
}

.fab-menu-item.active {
	color: #7266ba;
}

.fab-menu-item-danger {
	color: #d10b1e;
}

.fab-menu-item-danger:hover,
.fab-menu-item-danger:focus {
	background: #fff0f1;
	color: #d10b1e;
}

.fab-menu-backdrop {
	position: fixed;
	inset: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.fab-menu.open .fab-menu-backdrop {
	opacity: 1;
	pointer-events: auto;
}

@supports (padding: max(0px)) {
	.fab-menu {
		right: max(1.25rem, env(safe-area-inset-right));
		bottom: max(1.25rem, env(safe-area-inset-bottom));
	}
}

/* Header: mostrar el logo también en móvil (se eliminó la hamburguesa) */
.header-wrapper .topbar-logo-header {
	display: flex;
}

/* Responsive */
@media (max-width: 420px) {
	.header-wrapper .search-bar .navbar-text {
		display: none;
	}

	.dash-card {
		min-height: 120px;
		padding: 0.75rem;
	}

	.dash-card img {
		width: 48px;
		height: 48px;
	}

	.dash-card-text {
		font-size: 0.9rem;
	}
}

/* Móvil: tiles de acción y tarjetas de nómina uno por fila, centrados */
@media (max-width: 767.98px) {
	.dash-tile,
	.payroll-card {
		width: 100%;
		max-width: 340px;
		margin-inline: auto;
	}

	.dash-tile {
		min-height: 190px;
		padding: 1.5rem 1.25rem;
	}

	.dash-tile-icon {
		width: 64px;
		height: 64px;
		margin-bottom: 0.5rem;
	}

	.dash-tile-icon img {
		width: 34px;
		height: 34px;
	}

	.dash-tile-title {
		font-size: 1.15rem;
	}

	.dash-tile-subtitle {
		font-size: 0.9rem;
	}

	.dash-tile-cta {
		font-size: 0.95rem;
	}
}

/* Modo oscuro */
html.dark-theme .fab-menu-item {
	background: #12181a;
	color: #e7e9ec;
}

html.dark-theme .fab-menu-item:hover,
html.dark-theme .fab-menu-item:focus {
	background: #1c2427;
	color: #fff;
}

html.dark-theme .fab-menu-item.active {
	color: #9289ca;
}

html.dark-theme .fab-menu-item-danger {
	color: #f47f7f;
}

html.dark-theme .fab-menu-item-danger:hover,
html.dark-theme .fab-menu-item-danger:focus {
	background: rgba(240, 80, 80, 0.15);
	color: #f47f7f;
}