/* Teclado en pantalla para modo TPV. Ver tpv_keyboard.js. */

.tpvk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20000; /* por encima de modales de Bootstrap (~1050) */
	background: #2b2b30;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
	display: none;
	flex-direction: column;
	gap: 7px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.tpvk.is-open { display: flex; }

.tpvk-row {
	display: flex;
	justify-content: center;
	gap: 7px;
}

.tpvk-key {
	flex: 1 1 0;
	min-width: 0;
	max-width: 96px;
	height: 56px;
	border: none;
	border-radius: 9px;
	background: #45454d;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
	transition: background 0.08s ease, transform 0.05s ease;
}
.tpvk-key:active {
	background: #ff8024;
	transform: translateY(1px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Teclas funcionales / anchas */
.tpvk-key.k-fn {
	background: #35353b;
	font-size: 1.05rem;
	color: #e8e8ea;
}
.tpvk-key.k-wide { flex: 1.5 1 0; max-width: 150px; }
.tpvk-key.k-space { flex: 4 1 0; max-width: none; font-size: 0.95rem; color: #cfcfd4; }
.tpvk-key.k-close { background: #7a3b2a; }
.tpvk-key.is-active { background: #ff8024; }

/* En pantallas anchas, limitar el ancho total y centrar. */
@media (min-width: 1024px) {
	.tpvk { padding-left: 4vw; padding-right: 4vw; }
	.tpvk-key { height: 60px; }
}

/* Pantallas bajas (TPV horizontal pequeño): teclas algo más compactas. */
@media (max-height: 620px) {
	.tpvk-key { height: 46px; font-size: 1.1rem; }
}