/* ============================================================
   Pantalla de fichar

   Va en una tableta colgada en la puerta del personal, que se usa de
   pie, con prisa y a veces con las manos mojadas. Teclas grandes,
   contraste alto y nada más en pantalla.
   ============================================================ */

.xpos-fichaje,
.xpos-fichaje * {
	box-sizing: border-box;
}

/* Los rótulos que solo lee el lector de pantalla.

   En el escritorio de WordPress esta clase la define el propio
   WordPress, pero esta pantalla vive en el sitio público, donde la
   define **el tema**. Con un tema que no la traiga, «Cifras
   introducidas» y «Borrar» se pintaban de verdad: el teclado se
   descuadraba y en un móvil de 360 px aparecía barra horizontal. No se
   puede depender del tema para algo así. */
.xpos-fichaje .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.xpos-fichaje {
	max-width: 24rem;
	margin: 0 auto;
	padding: 1.5rem;
	background: #1a2e1a;
	border-radius: 20px;
	color: #fff;
	font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-align: center;
}

.xpos-fichaje__reloj {
	margin: 0;
	font-size: clamp(2.5rem, 14vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.xpos-fichaje__fecha {
	margin: .2rem 0 1.25rem;
	font-size: .9375rem;
	opacity: .7;
	text-transform: capitalize;
}

.xpos-fichaje__instruccion {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	opacity: .85;
}

/* Los puntos del PIN: nunca se ven las cifras. */
.xpos-fichaje__pin {
	min-height: 2.25rem;
	margin: 0 0 1rem;
	font-size: 2rem;
	letter-spacing: .35em;
	line-height: 1;
}

.xpos-fichaje__pin::after {
	content: attr(data-valor);
}

.xpos-fichaje__teclado {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
}

.xpos-fichaje__tecla {
	padding: 1.1rem .5rem;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	color: #fff;
	font: inherit;
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	/* Sin resaltado azul al tocar en móvil. */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.xpos-fichaje__tecla:active {
	background: rgba(255, 255, 255, .18);
}

.xpos-fichaje__tecla--sec {
	font-size: 1.25rem;
	opacity: .8;
}

.xpos-fichaje__tecla--ok {
	background: #2e7d32;
	border-color: #2e7d32;
	font-size: 1.05rem;
}

.xpos-fichaje__aviso {
	min-height: 3rem;
	margin: 1rem 0 0;
	padding: .75rem .5rem 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.xpos-fichaje__aviso.es-bien   { color: #8bd68f; font-weight: 600; }
.xpos-fichaje__aviso.es-salida { color: #ffd479; font-weight: 600; }
.xpos-fichaje__aviso.es-mal    { color: #ff9a9a; }

/* En una tableta grande el teclado no debe estirarse a lo ancho: se
   marca con una mano y las teclas quedarían lejísimos. */
@media (min-width: 48rem) {
	.xpos-fichaje {
		padding: 2rem;
	}
}