/**
 * Pyrocol Puntos POS — estilos de la pantalla de mostrador.
 *
 * Pensada para usarse de pie, con prisa y a veces desde un móvil:
 * objetivos táctiles grandes, saldo legible de un vistazo y el botón de
 * confirmar claramente separado del de cancelar.
 */

.pyp {
	--pyp-rojo: #d62828;
	--pyp-borde: #e2e2e2;
	--pyp-texto: #1d1d1d;
	--pyp-suave: #6b6b6b;
	--pyp-fondo: #fff;

	max-width: 760px;
	margin: 0 auto;
	color: var(--pyp-texto);
	font-size: 16px;
	line-height: 1.5;
}

.pyp-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--pyp-rojo);
}

.pyp-cabecera strong {
	font-size: 20px;
}

.pyp-operador {
	background: #fdf3d8;
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 14px;
	color: var(--pyp-suave);
}

.pyp-caja {
	background: var(--pyp-fondo);
	border: 1px solid var(--pyp-borde);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 16px;
}

.pyp-caja h3 {
	margin: 0 0 14px;
	font-size: 17px;
}

.pyp-nota {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--pyp-suave);
}

.pyp-fila {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.pyp-fila > * {
	flex: 1 1 220px;
}

.pyp-campo {
	margin-bottom: 14px;
}

.pyp-campo label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}

.pyp-campo input[type="radio"] {
	margin-right: 6px;
}

.pyp-campo label:has(input[type="radio"]) {
	display: inline-block;
	margin-right: 18px;
	font-weight: 400;
}

.pyp input[type="text"],
.pyp input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #c9c9c9;
	border-radius: 8px;
	font-size: 17px;
}

.pyp input[type="text"]:focus,
.pyp input[type="number"]:focus {
	border-color: var(--pyp-rojo);
	outline: 2px solid rgba( 214, 40, 40, 0.15 );
}

.pyp-boton {
	display: inline-block;
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	background: #2b2b2b;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.pyp-boton:hover {
	opacity: 0.9;
	color: #fff;
}

.pyp-boton-principal {
	background: var(--pyp-rojo);
}

.pyp-boton-plano {
	background: transparent;
	color: var(--pyp-suave);
	border: 1px solid var(--pyp-borde);
}

.pyp-boton-plano:hover {
	color: var(--pyp-texto);
}

.pyp-buscador .pyp-fila {
	align-items: stretch;
}

.pyp-buscador button {
	flex: 0 0 auto;
}

/* Ficha del cliente */

.pyp-cliente {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-left: 4px solid var(--pyp-rojo);
}

.pyp-cliente h3 {
	margin: 0;
}

.pyp-saldo {
	text-align: right;
	line-height: 1.1;
}

.pyp-saldo strong {
	display: block;
	font-size: 38px;
	color: var(--pyp-rojo);
}

.pyp-saldo span {
	font-size: 13px;
	color: var(--pyp-suave);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Listado cuando la cédula está repetida */

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

.pyp-lista li + li {
	margin-top: 8px;
}

.pyp-lista a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--pyp-borde);
	border-radius: 8px;
	text-decoration: none;
	color: var(--pyp-texto);
}

.pyp-lista a:hover {
	border-color: var(--pyp-rojo);
	background: #fff8f8;
}

.pyp-lista span {
	color: var(--pyp-suave);
	font-size: 14px;
}

/* Confirmación */

.pyp-confirmar {
	border: 2px solid var(--pyp-rojo);
	background: #fffafa;
}

.pyp-resumen {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}

.pyp-resumen th,
.pyp-resumen td {
	padding: 10px 8px;
	text-align: left;
	border-bottom: 1px solid #f0dede;
	vertical-align: top;
}

.pyp-resumen th {
	width: 34%;
	color: var(--pyp-suave);
	font-weight: 600;
	font-size: 14px;
}

.pyp-resumen .pyp-destacado td {
	font-size: 19px;
}

/* Movimientos */

.pyp-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.pyp-tabla th,
.pyp-tabla td {
	padding: 9px 8px;
	text-align: left;
	border-bottom: 1px solid #efefef;
}

.pyp-tabla th {
	color: var(--pyp-suave);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pyp-suma {
	color: #1a7f37;
	font-weight: 700;
}

.pyp-resta {
	color: var(--pyp-rojo);
	font-weight: 700;
}

/* Avisos */

.pyp-ok {
	border-left: 4px solid #1a7f37;
	background: #f2fbf4;
}

.pyp-error {
	border-left: 4px solid var(--pyp-rojo);
	background: #fff5f5;
}

.pyp-aviso {
	border-left: 4px solid #b58900;
	background: #fffdf3;
}

@media ( max-width: 600px ) {

	.pyp-saldo {
		text-align: left;
	}

	.pyp-boton {
		width: 100%;
		text-align: center;
	}

	.pyp-buscador button {
		flex: 1 1 100%;
	}
}

/* Cada opción de la lista de coincidencias: quién es, arriba; datos, al lado */

.pyp-lista-quien {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pyp-lista-quien small {
	color: var( --pyp-suave );
	font-size: 13px;
}