html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #eceff1;
}

.app-version-span {
	font-size: x-small;
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 100%;
	text-align: center;
	display: block;
	pointer-events: none;
}

.km-nova .km-back {
	display: none;
}

/* Navegación con el mismo estilo que mobile. */
.km-header,
.km-nova .km-header,
.km-on-ios .km-header {
	display: block !important;
	z-index: 1002;
	padding-top: env(safe-area-inset-top, 0px);
	background: rgba(255, 255, 255, 0.42) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	border-bottom: 1px solid rgba(26, 35, 126, 0.06);
	box-shadow: 0 4px 18px rgba(26, 35, 126, 0.05);
}

.km-navbar,
.km-nova .km-navbar,
.km-on-ios .km-navbar,
.km-header .km-navbar {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	position: relative !important;
	z-index: 2;
	height: 3em;
	overflow: visible;
	padding: 0 0.45em;
	box-sizing: border-box;
	background: transparent !important;
	border: none !important;
	color: #1a237e !important;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.km-leftitem,
.km-nova .km-leftitem,
.km-on-ios .km-leftitem,
.km-navbar .km-leftitem {
	display: flex !important;
	align-items: center;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	max-width: none;
	margin: 0 !important;
	float: none !important;
	flex: 0 0 auto;
	order: 1;
	z-index: 3;
	-webkit-transform: none !important;
	transform: none !important;
}

.km-rightitem,
.km-nova .km-rightitem,
.km-on-ios .km-rightitem,
.km-navbar .km-rightitem {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	position: relative !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	max-width: none;
	margin: 0 0 0 auto !important;
	float: none !important;
	flex: 0 0 auto;
	order: 3;
	z-index: 3;
	-webkit-transform: none !important;
	transform: none !important;
}

.km-view-title,
.km-nova .km-view-title,
.km-on-ios .km-view-title,
.km-navbar .km-view-title,
.km-header .km-view-title {
	display: block !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 0.4em 0 0.35em !important;
	float: none !important;
	flex: 1 1 auto;
	order: 2;
	min-width: 0;
	text-align: left !important;
	line-height: 3em !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none !important;
	z-index: 1;
	-webkit-transform: none !important;
	transform: none !important;
	color: #1a237e !important;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
	font-size: 1.08em !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
}

.km-navbar .km-button,
.km-header .km-button,
.km-navbar .m-nav-btn {
	position: relative;
	z-index: 3;
	pointer-events: auto !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	background: transparent !important;
	border: none !important;
	border-radius: 999px !important;
	color: #1a237e !important;
	box-shadow: none !important;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
	font-weight: 600 !important;
	min-height: 2.15em;
	opacity: 0.88;
}

.km-navbar .km-button:active,
.km-header .km-button:active,
.km-navbar .m-nav-btn:active {
	background: rgba(26, 35, 126, 0.1) !important;
	opacity: 1;
}

.km-navbar .m-nav-icon .km-text {
	display: none !important;
}

.km-navbar .m-nav-icon {
	min-width: 2.2em;
	padding-left: 0.4em !important;
	padding-right: 0.4em !important;
}

.km-navbar .m-nav-icon::after {
	content: "";
	display: inline-block;
	width: 1.28em;
	height: 1.28em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.km-navbar .m-nav-icon-back::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}


.mp-gira {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #263238;
	color: #fff;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2em;
	font-size: 1.4em;
	font-weight: bold;
}

.mp-gira-box {
	max-width: 16em;
	line-height: 1.4;
}

@media (orientation: portrait) {
	.mp-gira {
		display: flex;
	}
}

#login-view.km-view > .km-header,
.km-nova #login-view > .km-header,
.km-on-ios #login-view > .km-header {
	display: none !important;
	height: 0 !important;
	padding: 0 !important;
}

#login-view.km-view,
.km-nova #login-view.km-view,
.km-on-ios #login-view.km-view {
	background-color: #c5cae9;
	background-image:
		radial-gradient(ellipse 85% 65% at 82% 8%, rgba(255, 255, 255, 0.78) 0%, transparent 52%),
		radial-gradient(ellipse 55% 50% at 96% 92%, rgba(178, 235, 242, 0.45) 0%, transparent 48%),
		linear-gradient(148deg, #9fa8da 0%, #c5cae9 38%, #e8eaf6 72%, #f5f7ff 100%);
}

#login-view.km-view > .km-content,
.km-nova #login-view > .km-content,
.km-on-ios #login-view > .km-content,
#login-view .km-native-scroller {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 2vh) 0 calc(1.2em + env(safe-area-inset-bottom, 0px));
	background: transparent;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.m-login {
	width: 100%;
	max-width: 24em;
	margin: 0 auto;
	padding: 1.2em 1.25em 1.4em;
	box-sizing: border-box;
}

.m-login-brand {
	text-align: center;
	margin: 0 0 1.05em;
}

.m-login-logo-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4em;
	height: 4.4em;
	margin: 0 0 0.7em;
	background: #fff;
	border-radius: 1.15em;
	box-shadow: 0 8px 22px rgba(26, 35, 126, 0.16);
}

.m-login-logo {
	display: block;
	width: 2.7em;
	height: 2.7em;
	object-fit: contain;
}

.m-login-title {
	margin: 0;
	font-size: 1.7em;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #1a237e;
	line-height: 1.15;
}

.m-login-sub {
	margin: 0.28em 0 0;
	font-size: 0.98em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5c6bc0;
}

.m-login-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(26, 35, 126, 0.12), 0 1px 4px rgba(38, 50, 56, 0.1);
	padding: 1.25em 1.15em 1.2em;
	box-sizing: border-box;
}

#login-error-ul {
	margin: 0 0 0.85em;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.km-nova #login-error-ul > li,
#login-error-ul li {
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(198, 40, 40, 0.22);
	text-align: center;
	font-weight: 700;
	font-size: 0.95em;
}

.m-login-field {
	display: block;
	margin: 0 0 0.85em;
}

.m-login-field span {
	display: block;
	margin: 0 0 0.35em;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #546e7a;
}

.m-login-field input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 2.85em;
	padding: 0 0.9em;
	font-size: 1.05em;
	font-family: inherit;
	color: #263238;
	background: #f4f6fb;
	border: 1px solid #d5dbe8;
	border-radius: 10px;
	-webkit-appearance: none;
	appearance: none;
}

.m-login-field input:focus {
	outline: none;
	background: #fff;
	border-color: #3f51b5;
	box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.18);
}

.login-entrar-btn,
.login-cancelar-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0.35em 0 0;
	padding: 0.95em 0.5em;
	font-size: 1.08em;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: #3f51b5;
	border: none;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(63, 81, 181, 0.32);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.login-entrar-btn:active {
	background: #303f9f;
	box-shadow: 0 2px 8px rgba(63, 81, 181, 0.28);
}

.login-cancelar-btn {
	display: none;
	margin-top: 0.7em;
	background: #78909c;
	box-shadow: 0 4px 12px rgba(84, 110, 122, 0.28);
}

.login-cancelar-btn:active {
	background: #607d8b;
}

.mp-config-intro {
	margin: 1em 1.2em 0.4em;
	font-size: 1.15em;
	color: #37474f;
	text-align: center;
}

.m01-generic-error-message-ul {
	display: none;
	margin: 0.5em 1.2em;
	flex-shrink: 0;
}

.mp-accion-lado .m01-generic-error-message-ul {
	margin: 0 0 0.45em;
}

.m01-generic-error-message-ul li {
	padding: 0.6em 0.8em;
	color: #fff;
	border-radius: 4px;
}

.km-nova .m01-generic-error-message-ul > li.home-mensaje-error,
.m01-generic-error-message-ul li.home-mensaje-error {
	background: #c62828;
	color: #fff;
}

.km-nova .m01-generic-error-message-ul > li.home-mensaje-ok,
.m01-generic-error-message-ul li.home-mensaje-ok {
	background: #2e7d32;
	color: #fff;
}

#home-mensaje-ul {
	position: absolute;
	top: 1em;
	right: 1em;
	z-index: 100;
	width: max-content;
	max-width: calc(100% - 2em);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	font-size: 0.85em;
	text-align: center;
	box-sizing: border-box;
}

.mp-offline-banner {
	position: absolute;
	top: 0.55em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 110;
	max-width: calc(100% - 10em);
	padding: 0.4em 0.9em;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	pointer-events: none;
}

.mp-offline-banner-off {
	background: #5d4037;
	color: #fff;
}

.mp-offline-banner-pend {
	background: #ef6c00;
	color: #fff;
}

.mp-trabajador-sync .mp-trabajador-sync-txt {
	color: #ef6c00;
	font-weight: 700;
}

#home-mensaje-ul > li {
	padding: 0.55em 1em;
	border: 0;
	border-radius: 14px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mp-home-cabecera {
	padding: 0.7em 1.2em 0;
	flex-shrink: 0;
}

.mp-home-centro {
	font-size: 1.05em;
	font-weight: bold;
	color: #37474f;
}

#home-view {
	background: #c5cae9;
}

#home-view .km-content,
.km-nova #home-view .km-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	padding: 0;
	background-color: #c5cae9;
	background-image:
		radial-gradient(ellipse 85% 65% at 82% 8%, rgba(255, 255, 255, 0.78) 0%, transparent 52%),
		radial-gradient(ellipse 55% 50% at 96% 92%, rgba(178, 235, 242, 0.55) 0%, transparent 48%),
		linear-gradient(148deg, #9fa8da 0%, #c5cae9 38%, #e8eaf6 72%, #f5f7ff 100%);
}

.mp-app-version {
	position: fixed;
	right: 1.2em;
	bottom: 0.55em;
	z-index: 5000;
	margin: 0;
	padding: 0;
	color: #b0bec5;
	font-size: 0.65em;
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.mp-home-cuerpo {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	min-height: 0;
	align-items: stretch;
}

.mp-home-izquierda {
	width: 25%;
	max-width: 25%;
	flex: 0 0 25%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 0;
	min-width: 0;
	box-sizing: border-box;
	height: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 100%);
}

.mp-home-lista {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mp-home-derecha {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em 1.4em;
	box-sizing: border-box;
}

.mp-home-fecha {
	text-align: center;
	color: #1a237e;
}

.mp-home-fecha-dia {
	font-size: 5.4em;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.05;
}

.mp-home-fecha-num {
	margin-top: 0.12em;
	font-size: 2.6em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #3949ab;
}

.mp-centros-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 0.9em;
	padding: 1em 1.2em 1.5em;
}

.mp-trabajadores-grid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: 0.55em;
	padding: 0.6em 0.7em 0.9em;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

.mp-trabajador-seccion {
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 2;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #3949ab;
	background: rgba(255, 255, 255, 0.72);
	padding: 0.45em 0.7em 0.35em;
	border-radius: 10px;
}

.mp-centro-btn,
.mp-trabajador-btn {
	min-height: 5.2em;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.25;
	border: none;
	border-radius: 10px;
	background: #3f51b5;
	color: #fff;
	cursor: pointer;
	padding: 0.8em 1em;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
}

.mp-trabajador-btn {
	width: 100%;
	flex-shrink: 0;
	box-sizing: border-box;
	min-height: 4.4em;
	font-size: 1.05em;
	padding: 0.45em 0.7em 0.45em 0.5em;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.65em;
	text-align: left;
	background: #757575;
	color: #fff;
	scroll-margin-top: 2.2em;
}

.mp-trabajador-avatar {
	width: 2.6em;
	height: 2.6em;
	flex: 0 0 2.6em;
	border-radius: 8px;
	background: #5c6bc0;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.mp-trabajador-icono {
	width: 1.45em;
	height: 1.45em;
	display: block;
}

.mp-trabajador-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.15em;
	min-width: 0;
	flex: 1 1 auto;
}

.mp-trabajador-nombre {
	display: block;
	font-size: 1.15em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.mp-trabajador-estado {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.92;
}

.mp-trabajador-pendiente-txt {
	color: #ff1744;
	font-weight: 800;
	opacity: 1;
	animation: mp-hora-parpadeo 1s steps(1, end) infinite;
}

.mp-trabajador-en-jornada {
	background: #2e7d32;
}

.mp-trabajador-en-salida {
	background: #ef6c00;
}

.mp-trabajador-finalizada {
	background: #757575;
}

.mp-trabajador-en-salida .mp-trabajador-hora {
	animation: mp-hora-parpadeo 1s steps(1, end) infinite;
}

.mp-trabajador-en-salida.mp-trabajador-salida-computa {
	background: #00838f;
}

.mp-trabajador-salida-computa .mp-trabajador-hora {
	-webkit-animation: none;
	animation: none;
}

@keyframes mp-hora-parpadeo {
	0%, 49% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}

.mp-centro-btn {
	background: #455a64;
}

.mp-centro-btn.mp-centro-sel {
	background: #2e7d32;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.mp-centro-btn:active {
	background: #37474f;
}

.mp-trabajador-btn:active,
.mp-trabajador-btn.mp-trabajador-sel {
	background: #616161;
}

.mp-trabajador-btn.mp-trabajador-en-jornada:active,
.mp-trabajador-btn.mp-trabajador-en-jornada.mp-trabajador-sel {
	background: #1b5e20;
}

.mp-trabajador-btn.mp-trabajador-en-salida:active,
.mp-trabajador-btn.mp-trabajador-en-salida.mp-trabajador-sel {
	background: #e65100;
}

.mp-trabajador-btn.mp-trabajador-salida-computa:active,
.mp-trabajador-btn.mp-trabajador-salida-computa.mp-trabajador-sel {
	background: #006064;
}

.mp-vacio {
	margin: 1.5em 1.2em;
	text-align: center;
	color: #78909c;
	font-size: 1.1em;
	flex-shrink: 0;
}

#home-view .mp-vacio {
	color: #5c6bc0;
}

#pin-view .km-content,
.km-nova #pin-view .km-content {
	padding: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.mp-pin-pantalla {
	display: flex;
	flex-direction: row;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
}

.mp-pin-lado {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1em 1.5em;
	box-sizing: border-box;
}

.mp-pin-nombre {
	font-size: 1.8em;
	font-weight: 700;
	color: #263238;
	text-align: center;
	margin-bottom: 0.2em;
	line-height: 1.2;
}

.mp-pin-accion {
	font-size: 1.45em;
	font-weight: 700;
	color: #1a237e;
	text-align: center;
	margin-bottom: 0.45em;
	line-height: 1.25;
}

.mp-pin-accion-definir {
	background: #000;
	color: #fff;
	padding: 0.35em 0.7em;
	border-radius: 8px;
}

.mp-pin-ayuda {
	font-size: 1.1em;
	color: #607d8b;
	margin-bottom: 1em;
}

.mp-pin-dots {
	display: flex;
	gap: 1.1em;
	margin-bottom: 1em;
}

.mp-pin-dot {
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	border: 3px solid #3f51b5;
	background: transparent;
	box-sizing: border-box;
}

.mp-pin-dot-lleno {
	background: #3f51b5;
}

.mp-pin-cancelar {
	margin-top: 1.2em;
	min-width: 10em;
	min-height: 3.4em;
	padding: 0.7em 1.2em;
	font-size: 1.15em;
	font-weight: 600;
	border: none;
	border-radius: 10px;
	background: #78909c;
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.mp-pin-olvidar {
	display: none;
	margin-top: 1.5em;
	min-width: 12em;
	min-height: 3.4em;
	padding: 0.7em 1.2em;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#pin-olvidar-btn .mp-accion-hold-fill {
	background: #1565c0;
}

.mp-pin-teclado {
	flex: 1;
	margin-top: 1em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-self: center;
	gap: 0.7em;
	padding: 0 1.4em;
	align-content: center;
	max-width: 28em;
	box-sizing: border-box;
}

.mp-pin-key {
	min-height: 4.4em;
	font-size: 1.8em;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	background: #3f51b5;
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
}

.mp-pin-key:active {
	background: #283593;
}

.mp-pin-key-acc {
	background: #546e7a;
	font-size: 1.4em;
}

.mp-pin-key-acc:active {
	background: #37474f;
}

.mp-pin-fuera {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(38, 50, 56, 0.92);
	z-index: 20;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 1.4em;
	box-sizing: border-box;
	text-align: center;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mp-pin-fuera.mp-visible {
	display: flex;
}

.mp-pin-fuera-txt {
	color: #fff;
	font-size: 1.4em;
	font-weight: 600;
	max-width: 22em;
	margin: 0 0 1.4em;
	line-height: 1.35;
}

.mp-pin-fuera-acciones {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	justify-content: center;
}

.mp-pin-fuera-ok,
.mp-pin-fuera-no {
	min-width: 10em;
	min-height: 3.6em;
	padding: 0.8em 1.4em;
	font-size: 1.2em;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
}

.mp-pin-fuera-ok {
	background: #2e7d32;
}

.mp-pin-fuera-no {
	background: #c62828;
}

.mp-fuera-just-lab {
	color: #cfd8dc;
	font-weight: 600;
	margin: 0 0 0.45em;
	width: 100%;
	max-width: 28em;
	text-align: left;
	font-size: 1em;
}

.mp-fuera-justs {
	width: 100%;
	max-width: 28em;
	max-height: 36vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 0.7em;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	text-align: left;
}

.mp-fuera-just-libre {
	display: none;
	width: 100%;
	max-width: 28em;
	margin: 0 0 0.7em;
}

.mp-fuera-just-libre textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 4.2em;
	padding: 0.7em;
	font-size: 1.05em;
	border: 1px solid #b0bec5;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
}

.mp-fuera-error {
	display: none;
	color: #ffcdd2;
	font-weight: 600;
	margin: 0 0 0.8em;
	max-width: 28em;
}

#accion-view > .km-content,
.km-nova #accion-view > .km-content {
    position: absolute !important;
    top: var(--accion-header-height, 3em) !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    height: auto !important;
    padding: 0;
    overflow: hidden;
}
#accion-view .km-native-scroller,
#accion-view .km-scroll-container {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}


.mp-accion-pantalla {
	display: flex;
	height: 100%;
	min-height: 22em;
	box-sizing: border-box;
}

.mp-accion-lado {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0.8em 1.2em 1em;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
}

.mp-accion-resumen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-content: center;
	align-items: center;
	gap: 0.25em 0.75em;
	/* 4.2em del boton, con su fuente de 1.25em. */
	height: 5.25em;
	box-sizing: border-box;
	flex-shrink: 0;
	margin-bottom: 0.85em;
	padding: 0.6em 0.9em;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(26, 35, 126, 0.08);
	border: 1px solid rgba(26, 35, 126, 0.08);
	text-align: left;
}

.mp-accion-nombre {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	font-size: 1.28em;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1a237e;
	margin: 0;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mp-accion-estado {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	max-width: 100%;
	padding: 0.22em 0.72em;
	border-radius: 999px;
	background: #eceff1;
	color: #546e7b;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
	box-sizing: border-box;
}

.mp-accion-estado:empty {
	display: none;
}

.mp-accion-estado.mp-accion-estado-jornada {
	color: #1b5e20;
	background: #e8f5e9;
}

.mp-accion-estado.mp-accion-estado-salida {
	color: #e65100;
	background: #fff3e0;
}

.mp-accion-estado.mp-accion-estado-salida-computa {
	color: #006064;
	background: #e0f7fa;
}

.mp-accion-tiempo {
	display: none;
	grid-column: 2;
	grid-row: 1 / 3;
	justify-self: end;
	text-align: right;
	white-space: nowrap;
	margin: 0;
	font-size: 2em;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: #2e7d32;
	line-height: 1.15;
}

.mp-accion-tiempo.mp-accion-tiempo-pausa {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4em;
	color: #ef6c00;
	animation: mp-hora-parpadeo 1s steps(1, end) infinite;
}

.mp-accion-tiempo.mp-accion-tiempo-pausa.mp-accion-tiempo-computa {
	color: #00838f;
	-webkit-animation: none;
	animation: none;
}

.mp-accion-tiempo.mp-accion-tiempo-fuera {
	color: #c62828;
	animation: mp-hora-parpadeo 1s steps(1, end) infinite;
}

.mp-accion-tiempo.mp-accion-tiempo-computa {
	-webkit-animation: none !important;
	animation: none !important;
}

.mp-accion-pausa-icon {
	display: inline-block;
	width: 0.72em;
	height: 1em;
	position: relative;
	flex-shrink: 0;
}

.mp-accion-pausa-icon:before,
.mp-accion-pausa-icon:after {
	content: "";
	position: absolute;
	top: 0.12em;
	width: 0.22em;
	height: 0.76em;
	background: currentColor;
	border-radius: 1px;
}

.mp-accion-pausa-icon:before {
	left: 0.08em;
}

.mp-accion-pausa-icon:after {
	right: 0.08em;
}

.mp-accion-estado-hora {
	animation: mp-hora-parpadeo 1s steps(1, end) infinite;
}

.mp-accion-estado-salida-computa .mp-accion-estado-hora {
	-webkit-animation: none;
	animation: none;
}

.mp-accion-historial {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 0.7em;
	padding: 0.2em 0.2em 0.4em;
}

.mp-hist-tit {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #607d8b;
	margin: 0 0 0.45em;
}

.mp-hist-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mp-hist-lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.7em;
	padding: 0.45em 0.5em;
	margin: 0 0 0.35em;
	border-radius: 8px;
	background: #fff;
	border-left: 4px solid #90a4ae;
}

.mp-hist-entrada {
	border-left-color: #2e7d32;
}

.mp-hist-salida {
	border-left-color: #ef6c00;
}

.mp-hist-retorno {
	border-left-color: #1565c0;
}

.mp-hist-lista li.mp-hist-incidencia {
	border-left-color: #c62828;
}

.mp-hist-fin {
	border-left-color: #c62828;
}

.mp-hist-hora {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #263238;
	min-width: 3.2em;
}

.mp-hist-txt {
	flex: 1 1 auto;
	color: #37474f;
	font-size: 0.95em;
}

.mp-hist-just {
	flex: 1 1 100%;
	font-size: 0.85em;
	color: #607d8b;
}

#accion-historial .mp-hist-tit {
	display: inline-block;
	margin: 0 0 0.8em;
	padding: 0.5em 0.8em;
	border-radius: 12px;
	background: #c5cae9;
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #1a237e;
	line-height: 1.4;
}

#accion-historial .mp-hist-lista li {
	align-items: center;
	gap: 0.7em;
	width: 100%;
	min-height: 3.2em;
	margin: 0 0 0.45em;
	padding: 0.55em 0.8em;
	border-radius: 10px;
	border-left-width: 6px;
	font-size: 1.05em;
	font-weight: 600;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(38, 50, 56, 0.1);
}

#accion-historial .mp-hist-lista li:last-child {
	margin-bottom: 0;
}

#accion-historial .mp-hist-entrada { border-left-color: #2e7d32; }
#accion-historial .mp-hist-salida { border-left-color: #ef6c00; }
#accion-historial .mp-hist-salida-computa { border-left-color: #00838f; }
#accion-historial .mp-hist-retorno { border-left-color: #1565c0; }
#accion-historial .mp-hist-fin { border-left-color: #c62828; }

#accion-historial .mp-hist-hora {
	font-weight: 800;
	min-width: 3.4em;
}

#accion-historial .mp-hist-txt {
	font-size: inherit;
	color: #263238;
}

#accion-historial .mp-hist-lista li.mp-hist-incidencia {
	min-height: 2.35em;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
	background: #fdecee;
	font-weight: 400;
}

#accion-historial .mp-hist-incidencia .mp-hist-hora {
	font-weight: 400;
	min-width: 3em;
}

#accion-historial .mp-hist-lista.mp-hist-finalizada li {
	border-left-color: #9e9e9e;
	background: #f5f5f5;
	color: #757575;
}

#accion-historial .mp-hist-finalizada .mp-hist-hora,
#accion-historial .mp-hist-finalizada .mp-hist-txt,
#accion-historial .mp-hist-finalizada .mp-hist-just {
	color: #757575;
}

.mp-hist-vacio {
	color: #90a4ae;
	font-size: 0.95em;
	text-align: center;
	padding: 0.8em 0;
}

.mp-accion-lado .mp-pin-cancelar {
	align-self: center;
	flex-shrink: 0;
	margin-top: 0;
}

.mp-accion-botones,
.mp-accion-tipos {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.7em;
	padding: 1em 1.3em;
	box-sizing: border-box;
	max-width: 28em;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mp-accion-tipos {
	display: none;
}

.mp-accion-tipos.mp-visible {
	display: flex;
}

.mp-accion-btn {
	min-height: 4.2em;
	width: 100%;
	font-size: 1.25em;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
	box-sizing: border-box;
}

.mp-accion-salida {
	background: #ef6c00;
}

.mp-accion-tipo {
	background: #ef6c00;
}

.mp-accion-terminar {
	background: #c62828;
}

.mp-accion-hold,
.mp-accion-hold * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.mp-accion-hold {
	position: relative;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	border: 3px solid #90a4ae;
	background-color: #546e7a;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.16) 0,
		rgba(255, 255, 255, 0.16) 8px,
		rgba(0, 0, 0, 0.08) 8px,
		rgba(0, 0, 0, 0.08) 16px
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
}

#accion-iniciar-btn.mp-accion-hold {
	border-color: #2e7d32;
	background-color: #546e7a;
}

#accion-retorno-btn.mp-accion-hold {
	border-color: #1565c0;
	background: #546e7a repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 8px, rgba(0, 0, 0, 0.08) 8px, rgba(0, 0, 0, 0.08) 16px);
}

#accion-terminar-btn.mp-accion-hold,
#accion-tipos-terminar-btn.mp-accion-hold {
	border-color: #c62828;
}

#accion-tipos .mp-accion-tipo.mp-accion-hold {
	border-color: #ef6c00;
	background-color: #f4b06a;
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.34) 8px, rgba(239, 108, 0, 0.2) 8px, rgba(239, 108, 0, 0.2) 16px);
}

#accion-tipos .mp-accion-tipo-trabajo.mp-accion-hold {
	border-color: #00838f;
	background-color: #4dd0e1;
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.34) 8px, rgba(0, 131, 143, 0.22) 8px, rgba(0, 131, 143, 0.22) 16px);
}

#pin-olvidar-btn.mp-accion-hold {
	border-color: #1565c0;
}

#incidencia-enviar-btn.mp-accion-hold {
	border-color: #6a1b9a;
	background-color: #546e7a;
}

.mp-accion-tipos-no,
.mp-accion-tipos-si {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	flex-shrink: 0;
}

.mp-accion-tipos-no:empty,
.mp-accion-tipos-si:empty {
	display: none;
}

.mp-accion-tipos-no:not(:empty) {
	padding-bottom: 0.7em;
}

.mp-accion-tipos-si:not(:empty) {
	padding-top: 0.7em;
}

.mp-accion-hold-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	pointer-events: none;
	z-index: 0;
}

#accion-iniciar-btn .mp-accion-hold-fill {
	background: #2e7d32;
}

#accion-retorno-btn .mp-accion-hold-fill {
	background: #1565c0;
}

#accion-terminar-btn .mp-accion-hold-fill,
#accion-tipos-terminar-btn .mp-accion-hold-fill {
	background: #c62828;
}

#accion-tipos .mp-accion-tipo .mp-accion-hold-fill {
	background: #ef6c00;
}

#accion-tipos .mp-accion-tipo-trabajo .mp-accion-hold-fill {
	background: #00838f;
}

#incidencia-enviar-btn .mp-accion-hold-fill {
	background: #6a1b9a;
}

.mp-accion-hold-txt {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
}

.mp-accion-hold-txt::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	background: radial-gradient(circle, #fff 0 26%, transparent 28%);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
	animation: mp-hold-pulse 1.7s ease-in-out infinite;
}

@keyframes mp-hold-pulse {
	0%, 100% {
		opacity: 0.72;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.12);
	}
}

.mp-accion-incidencia {
	background-color: #6a1b9a;
}

#historial-botones {
	min-height: 0;
	overflow: hidden;
}

.mp-hist-calendario {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(38, 50, 56, 0.18);
}

.mp-hist-calendario .k-calendar {
	width: 100%;
	border: none;
	background: transparent;
	font-size: 0.82em;
}

.mp-hist-calendario .k-calendar .k-header {
	padding: 0.2em 0.15em;
}

.mp-hist-calendario .k-calendar th,
.mp-hist-calendario .k-calendar td {
	padding: 0;
}

.mp-hist-calendario .k-calendar .k-link {
	min-width: 1.7em;
	min-height: 1.7em;
	line-height: 1.7em;
	font-size: 1em;
}

#historial-incidencia-btn {
	flex: 0 0 auto;
}

#historial-cancelar-btn {
	align-self: center;
	flex: 0 0 auto;
	max-width: 100%;
	margin-top: 0;
}

.mp-hist-meses {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	margin: 0 auto 0.9em;
	align-self: center;
}

#historial-view .mp-hist-meses.k-button-group,
#historial-view .mp-hist-meses .k-button-group,
#historial-view .k-button-group.mp-hist-meses {
	display: flex;
	justify-content: center;
	width: auto;
	margin: 0 auto 0.9em;
	border: none;
	box-shadow: none;
}

#historial-view .mp-hist-meses .k-button {
	flex: 0 0 auto;
	min-width: 3.4em;
	font-size: 0.85em;
	font-weight: 700;
	padding: 0.45em 0.75em;
}

#historial-view .mp-hist-meses .k-button.mp-hist-mes-flecha {
	flex: 0 0 2.6em;
}

#historial-view .mp-hist-meses .k-selected,
#historial-view .mp-hist-meses .k-state-active,
#historial-view .mp-hist-meses .k-button.k-selected {
	background: #6a1b9a;
	border-color: #6a1b9a;
	color: #fff;
}

.mp-hist-meses-plain {
	display: flex;
	justify-content: center;
	width: auto;
	margin: 0 auto;
	gap: 0;
}

.mp-hist-mes-btn {
	flex: 0 0 auto;
	min-width: 3.4em;
	font-size: 0.85em;
	font-weight: 700;
	padding: 0.45em 0.75em;
	border: 1px solid #cfd8dc;
	background: #eceff1;
	color: #37474f;
	cursor: pointer;
}

.mp-hist-mes-btn + .mp-hist-mes-btn {
	border-left: none;
}

.mp-hist-mes-btn:first-child {
	border-radius: 8px 0 0 8px;
}

.mp-hist-mes-btn:last-child {
	border-radius: 0 8px 8px 0;
}

.mp-hist-mes-flecha {
	flex: 0 0 2.6em;
	font-size: 1.15em;
}

.mp-hist-mes-on {
	background: #6a1b9a;
	border-color: #6a1b9a;
	color: #fff;
}

.mp-hist-lista-box {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 0.55em;
	padding: 0.1em 0.1em 0.3em;
}

.mp-hist-resumen:empty {
	display: none;
}

.mp-hist-resumen {
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1em;
}

.mp-hist-res-item {
	cursor: default;
}

.mp-accion-off {
	opacity: 0.45;
}

.mp-accion-historial-btn {
	background: #111;
}

.mp-accion-pin-btn {
	background: #546e7a;
}

.mp-histj-item {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	border-radius: 10px;
	background: #fff;
	padding: 0.5em 0.55em 0.3em;
	margin: 0 0 0.7em;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: 0 1px 4px rgba(38, 50, 56, 0.18);
}

.mp-histj-item.mp-histj-sel {
	background: #f3e5f5;
	box-shadow: inset 0 0 0 3px #6a1b9a, 0 1px 4px rgba(106, 27, 154, 0.28);
}

.mp-histj-cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	margin: 0 0 0.35em;
}

.mp-histj-fecha {
	font-weight: 800;
	color: #263238;
	font-size: 1.05em;
}

.mp-histj-suma {
	font-weight: 700;
	color: #1565c0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mp-histj-item .mp-hist-lista li {
	margin: 0 0 0.25em;
	padding: 0.3em 0.4em;
}

.mp-histj-item .mp-hist-lista li.mp-hist-incidencia {
	border-left-color: #c62828;
}

#historial-view .km-content,
.km-nova #historial-view .km-content {
	padding: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.mp-incidencia-retorno {
	background: #1565c0;
}

.mp-incidencia-iniciar {
	background-color: #2e7d32;
}

.mp-incidencia-inicio-error {
	background: #ad1457;
}

.mp-accion-btn:active {
	opacity: 0.88;
}

.mp-incidencia-sel {
	background: #eceff1;
	box-shadow: inset 0 0 0 2px #3f51b5;
}

#incidencia-view .km-content,
.km-nova #incidencia-view .km-content {
	padding: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.mp-incidencia-pantalla {
	display: grid;
	grid-template-columns: 32% minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	height: 100%;
	min-height: 22em;
	box-sizing: border-box;
}

.mp-incidencia-lado {
	flex: 0 0 32%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1em 1.2em;
	box-sizing: border-box;
}

button.mp-incidencia-fecha {
	display: block;
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid #c5cae9;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	cursor: pointer;
}

button.mp-incidencia-fecha:disabled {
	opacity: 0.6;
	cursor: default;
}

.mp-incidencia-fecha {
	font-size: 1.15em;
	font-weight: 700;
	color: #1a237e;
	text-align: center;
	margin: 0.15em 0 0.45em;
	line-height: 1.25;
}

.mp-incidencia-sel-resumen {
	display: none;
	margin: 0.4em 0 0.7em;
	padding: 0.55em 0.75em;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	border-left: 5px solid #6a1b9a;
	font-weight: 700;
	color: #37474f;
	text-align: left;
}

.mp-incidencia-sel-resumen .mp-inc-hora {
	margin-right: 0.5em;
	color: #6a1b9a;
}

.mp-incidencia-form {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.8em 1.2em 1.2em;
	box-sizing: border-box;
}

.mp-incidencia-paso {
	font-size: 0.95em;
	font-weight: 700;
	color: #546e7a;
	margin: 0 0 0.55em;
}

.mp-incidencia-tipos {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	margin-bottom: 0.6em;
}

.mp-inc-item {
	display: flex;
	align-items: center;
	gap: 0.7em;
	width: 100%;
	min-height: 3.2em;
	padding: 0.55em 0.8em;
	border: none;
	border-radius: 10px;
	border-left: 6px solid #90a4ae;
	background: #fff;
	color: #263238;
	font-size: 1.05em;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.mp-inc-hora {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	min-width: 3.4em;
	color: #263238;
}

.mp-inc-hora-vacia {
	min-width: 0;
}

.mp-inc-txt {
	flex: 1 1 auto;
}

.mp-inc-entrada {
	border-left-color: #2e7d32;
}

.mp-inc-salida {
	border-left-color: #ef6c00;
}

.mp-inc-retorno {
	border-left-color: #1565c0;
}

.mp-inc-fin {
	border-left-color: #c62828;
}

.mp-inc-error {
	border-left-color: #ad1457;
	color: #ad1457;
}

.mp-inc-item.mp-incidencia-sel {
	background: #3f51b5;
	color: #fff;
	box-shadow: none;
	border-left-color: #283593;
}

.mp-inc-item.mp-incidencia-sel .mp-inc-hora,
.mp-inc-item.mp-incidencia-sel .mp-inc-txt {
	color: #fff;
}

.mp-inc-item.mp-inc-error.mp-incidencia-sel {
	background: #ad1457;
	border-left-color: #880e4f;
}

.mp-inc-sep {
	height: 0;
	border: none;
	border-top: 2px solid #cfd8dc;
	margin: 0.25em 0.1em;
}

.mp-incidencia-detalle {
	display: none;
	margin-top: 0.5em;
	padding-top: 0.7em;
	border-top: 2px solid #cfd8dc;
}

.mp-incidencia-detalle.mp-visible {
	display: block;
}

.mp-incidencia-hora-box,
.mp-incidencia-justificacion-box {
	margin: 0 0 0.8em;
}

.mp-incidencia-justs {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	margin: 0 0 0.45em;
}

.mp-incidencia-justificacion-libre {
	display: none;
}

.mp-inc-item.mp-inc-otro {
	border-left-color: #546e7a;
	font-weight: 600;
}

.mp-incidencia-hora-lab,
.mp-incidencia-justificacion-lab {
	display: block;
	margin: 0 0 0.35em;
	font-size: 0.95em;
	color: #546e7a;
	font-weight: 600;
}

#incidencia-hora-input,
#incidencia-justificacion-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.8em 0.7em;
	font-size: 1.15em;
	border: 1px solid #b0bec5;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
}

.mp-incidencia-hora-aviso {
	display: none;
	margin: 0.35em 0 0;
	font-size: 0.95em;
	color: #e65100;
	font-weight: 600;
}

#incidencia-justificacion-input {
	min-height: 4.2em;
	resize: vertical;
}

#incidencia-enviar-btn {
	width: 100%;
	min-height: 3.6em;
}

@media (min-width: 1100px) {
	.mp-centros-grid {
		grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
		gap: 1.1em;
	}

	.mp-centro-btn {
		min-height: 5.8em;
		font-size: 1.3em;
	}

	.mp-trabajador-btn {
		min-height: 4.6em;
		font-size: 1.05em;
	}
}

/* Confirmación de fichaje fuera de horario. */
#accion-fuera-box {
    padding: 20px;
    justify-content: flex-start;
    background: rgba(26, 35, 65, .42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}
#accion-fuera-box .mp-fuera-card {
    flex: 0 0 auto;
    width: min(100%, 620px);
    box-sizing: border-box;
    margin: auto;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(26,35,65,.25);
    text-align: left;
}
#accion-fuera-box .mp-fuera-incidencia {
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e8eaf1;
}
#accion-fuera-box .mp-fuera-incidencia-titulo {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 7px;
    background: #fff4df;
    color: #865500;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    font-weight: 700;
}
#accion-fuera-box .mp-pin-fuera-txt {
    max-width: none;
    margin: 0;
    color: #263250;
    font-size: 21px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -.4px;
}
#accion-fuera-box .mp-fuera-just-lab { max-width: none; color: #536079; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
#accion-fuera-box .mp-fuera-justs { max-width: none; max-height: none; overflow: visible; gap: 9px; margin-bottom: 16px; }
#accion-fuera-box .mp-inc-item {
    min-height: 48px;
    padding: 13px 16px;
    background: #f6f7fb;
    border: 1px solid #e0e4ee;
    border-radius: 10px;
    box-shadow: none;
    color: #38445d;
    font-size: 14px;
}
#accion-fuera-box .mp-inc-item .mp-inc-txt { color: inherit; }
#accion-fuera-box .mp-inc-item:hover { background: #eef0f9; border-color: #9fa8da; }
#accion-fuera-box .mp-inc-item.mp-incidencia-sel { background: #e8eaf6; border-color: #3f51b5; color: #283593; box-shadow: inset 3px 0 #3f51b5; }
#accion-fuera-box .mp-fuera-just-libre { max-width: none; }
#accion-fuera-box textarea { background: #f8f9fc; border-color: #d5dbe8; color: #263250; font-size: 15px; padding: 13px; border-radius: 10px; }
#accion-fuera-box .mp-fuera-error { max-width: none; padding: 10px 12px; background: #fff1f0; color: #b3261e; border-radius: 8px; font-size: 13px; }
#accion-fuera-box .mp-pin-fuera-acciones { justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e8eaf1; }
#accion-fuera-box .mp-pin-fuera-acciones button { min-width: 120px; min-height: 46px; padding: 12px 20px; font-family: inherit; font-size: 14px; border-radius: 10px; }
#accion-fuera-box .mp-pin-fuera-ok { order: 2; background: #3f51b5; box-shadow: 0 4px 12px rgba(63,81,181,.2); }
#accion-fuera-box .mp-pin-fuera-ok:hover { background: #283593; }
#accion-fuera-box .mp-pin-fuera-no { order: 1; background: #f0f2f7; color: #536079; }
#accion-fuera-box button:focus-visible,
#accion-fuera-box textarea:focus-visible { outline: 3px solid #9fa8da; outline-offset: 3px; }
@media (max-height: 550px), (max-width: 480px) {
    #accion-fuera-box { padding: 12px; }
    #accion-fuera-box .mp-fuera-card { padding: 20px; border-radius: 16px; }
    #accion-fuera-box .mp-pin-fuera-txt { font-size: 18px; }
}

.mp-incidencia-combo-box {
	position: relative;
	margin: 0 0 0.8em;
}

.mp-incidencia-combo-box label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 700;
}

.mp-accion-eliminar-dia {
	border-color: #b71c1c;
	background-color: #546e7a;
	color: #fff;
	margin: 0.8em 0;
}

#incidencia-eliminar-dia-btn .mp-accion-hold-fill,
#incidencia-eliminar-fichaje-btn .mp-accion-hold-fill {
	background: #b71c1c;
}

#incidencia-eliminar-dia-link,
#incidencia-eliminar-fichaje-link {
	display: block;
	width: 100%;
	text-align: center;
	margin: 1.8em 0 0.8em;
	color: #b71c1c;
	text-decoration: underline;
}

.mp-incidencia-bottom {
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	text-align: center;
}

.mp-incidencia-pantalla > .mp-incidencia-bottom {
	grid-column: 1 / -1;
	padding: 0 1.2em 0.8em;
}