/* Verificador de precios — se monta sobre css/app.css.
   Es una pantalla de caja: se lee de pie, a un brazo de distancia y muchas veces
   de reojo mientras el cliente espera. Todo gira alrededor de un solo número, y
   lo demás está para no estorbarlo. */

/* ===== Colores de la casa =====
   De los cuatro de la marca —rojo, naranja, amarillo y azul— la pantalla usa
   sobre todo el rojo y el naranja, y en dosis pequeñas: un filo, un rótulo, el
   número. Llenar bloques enteros de color es lo que hacía que la ficha se viera
   ruidosa en vez de elegante. */
.cuerpo-verificador{
	--marca-naranja: #F07019;
	--marca-rojo: #C2181B;
	--marca-amarillo: #FFC72C;
	/* Cálido oscuro para texto pequeño sobre blanco: el naranja puro no tiene
	   contraste suficiente a 13px */
	--marca-calido: #B3400C;
	/* Rojo profundo para el precio: el de la marca a 80px se ve encendido, este
	   se ve caro */
	--marca-vino: #A3161A;
	--marca-crema: #FFF8F1;
	--marca-linea: rgba(179,64,12,0.12);
}

.cuerpo-verificador .topbar-icono{
	background: linear-gradient(145deg, #F79B2E 0%, var(--marca-naranja) 55%, var(--marca-rojo) 100%);
	box-shadow: 0 2px 6px rgba(194,24,27,0.30);
}

/* El filo bajo la barra es el único sitio donde salen los tres cálidos juntos:
   es una cinta de un pixel, ahí sí funciona como firma */
.cuerpo-verificador .topbar::after{
	background: linear-gradient(90deg, var(--marca-rojo) 0%, var(--marca-naranja) 38%, var(--marca-amarillo) 68%, rgba(255,199,44,0) 100%);
}

.cuerpo-verificador .campo-buscar{ height: 56px; }

.cuerpo-verificador .campo-buscar:focus-within{
	border-color: var(--marca-naranja);
	box-shadow: 0 0 0 4px rgba(240,112,25,0.16);
}

.cuerpo-verificador .campo-buscar input{
	font-size: 16px;
	caret-color: var(--marca-naranja);
}

@media (min-width: 768px){
	.cuerpo-verificador .campo-buscar input{
		font-size: 26px;
	}
}

.cuerpo-verificador .spinner{
	border-color: rgba(240,112,25,0.22);
	border-top-color: var(--marca-naranja);
}

.cuerpo-verificador .chip-filtro.activo{
	background: var(--marca-naranja);
	border-color: var(--marca-naranja);
}

/* En la lista el precio es dato de apoyo, no el titular: cálido pero discreto */
.cuerpo-verificador .sugerencia-precio{ color: var(--marca-calido); }

.cuerpo-verificador .btn-cargar-mas{ color: var(--marca-calido); }

/* Fila resaltada. Aquí casi siempre es la del código que se acaba de digitar,
   así que va en el color de la casa y no en el azul de los inventarios. */
.cuerpo-verificador .sugerencia.activa{
	background: #FFF4E8;
	box-shadow: inset 3px 0 0 var(--marca-naranja);
}

/* Aviso de que lo escrito se interpretó como precio. Va en amarillo, que es el
   color de aviso de la casa, y con el ícono de moneda para que se entienda de
   un vistazo qué fue lo que pasó. */
.nota-precio{
	display: flex;
	align-items: center;
	gap: 7px;
}

.nota-precio svg{ flex-shrink: 0; }

/* Salida del filtro, dentro del mismo aviso que explica por qué no hay nada */
.nota-lista-boton{
	display: block;
	margin-top: 6px;
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--marca-calido);
	text-decoration: underline;
	cursor: pointer;
}

/* ===== La ficha =====
   Tres zonas y una sola tinta de contenido: quién es el artículo, cuánto vale y
   el detalle fino. El color aparece nada más donde ayuda a encontrar el precio;
   el resto es aire y alguna línea de un pixel. */
.ficha{
	position: relative;
	margin-top: 14px;
	background: var(--tarjeta);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(60,35,20,0.06), 0 16px 36px -14px rgba(120,45,15,0.30);
	animation: entrar 0.22s ease-out;
}

/* Los colores de la marca entran por un filo de tres pixeles arriba. Es toda la
   marca que la tarjeta necesita. */
.ficha::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--marca-rojo) 0%, var(--marca-naranja) 52%, var(--marca-amarillo) 100%);
}

.ficha-cabecera{
	padding: 20px 20px 16px;
	text-align: center;
}

/* El código es el otro dato que se pregunta en caja —el que la cajera compara
   con la etiqueta—, así que se lee de lejos: más grande, más oscuro y sobre un
   gris muy tenue que lo despega de la descripción. El fondo va sin color de la
   marca a propósito: el naranja y el rojo son del precio, y un relleno de color
   aquí volvería a disputarle la atención, que fue justo lo que se quitó antes. */
.ficha-codigo{
	display: inline-block;
	max-width: 100%;
	padding: 4px 12px;
	border-radius: 10px;
	background: rgba(60,60,67,0.05);
	border: 1px solid rgba(60,60,67,0.10);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: var(--texto-2);
	font-variant-numeric: tabular-nums;
}

.ficha-desc{
	margin: 9px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.3px;
	color: var(--texto);
}

/* ===== El número =====
   Zona propia en crema para que el precio no flote en el mismo blanco que todo
   lo demás, y el número en el rojo de la casa: a un brazo de distancia el color
   dice cuál es el precio antes de que se alcancen a leer las cifras. */
.ficha-hero{
	padding: 18px 16px 20px;
	text-align: center;
	background: var(--marca-crema);
	border-top: 1px solid var(--marca-linea);
	border-bottom: 1px solid var(--marca-linea);
}

.ficha-hero-rotulo{
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: var(--marca-calido);
}

.ficha-monto{
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 7px;
	color: var(--marca-vino);
}

/* La moneda, más chica y en otro tono: acompaña al número sin quitarle ancho */
.ficha-moneda{
	font-size: clamp(20px, 6vw, 30px);
	font-weight: 700;
	color: var(--marca-naranja);
}

.ficha-numero{
	font-size: clamp(50px, 18vw, 88px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2.5px;
	/* Cifras de ancho fijo: el precio no baila al pasar de 9.99 a 10.00 */
	font-variant-numeric: tabular-nums;
}

/* Un refresco cabe en cuatro cifras; una refrigeradora necesita siete y el doble
   de ancho. El tamaño baja por tramos para que el número siga siendo lo más
   grande de la pantalla sin salirse del borde en el aparato más angosto. */
.ficha-numero-medio{ font-size: clamp(40px, 16.5vw, 72px); letter-spacing: -2px; }
.ficha-numero-corto{ font-size: clamp(34px, 15vw, 62px); letter-spacing: -1.5px; }

.ficha-hero-pie{
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--texto-3);
}

/* ===== Lo secundario =====
   Un pie apenas más gris que la tarjeta: se nota que es otra cosa sin necesidad
   de una línea gruesa que lo separe. */
.ficha-datos{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #FCFBFA;
}

.ficha-dato{
	padding: 13px 6px 15px;
	text-align: center;
	min-width: 0;
}

.ficha-dato + .ficha-dato{ border-left: 1px solid rgba(60,60,67,0.10); }

.ficha-dato-rotulo{
	display: block;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	color: var(--texto-3);
}

.ficha-dato-valor{
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--texto-2);
	font-variant-numeric: tabular-nums;
}

/* Sin existencia: no es un dato nuevo, es el mismo cero de siempre pero visible
   antes de que la cajera lo lea */
.ficha-dato-valor.agotado{ color: var(--rojo); }

/* ===== Pantalla en reposo =====
   Es lo que se ve la mayor parte del turno, así que en vez de decorar enseña las
   tres maneras de llegar a un precio. */
.verificador-vacio{
	padding: 36px 20px;
	text-align: center;
}

.verificador-vacio > svg{ color: #E3C9B6; }

.verificador-vacio-titulo{
	margin: 12px 0 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--texto-2);
}

.verificador-pistas{
	display: inline-flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
	text-align: left;
}

.verificador-pista{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 320px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--texto-3);
}

.verificador-pista svg{
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--marca-naranja);
}

/* ===== Ajustes de tamaño ===== */

/* Monitor de caja: la ficha puede respirar más que en el aparato de mano */
@media (min-width: 700px){
	.cuerpo-verificador .contenido{ max-width: 620px; }
	.ficha-cabecera{ padding: 24px 24px 18px; }
	.ficha-desc{ font-size: 26px; }
	.ficha-codigo{ font-size: 24px; }
	.ficha-dato-valor{ font-size: 22px; }
}

/* Pantalla baja (apaisada, o un monitor pequeño acostado): el número cede altura
   para que la descripción y los datos no queden fuera de la vista */
@media (max-height: 540px){
	.ficha-numero{ font-size: clamp(38px, 11vw, 60px); }
	.ficha-numero-medio{ font-size: clamp(32px, 10vw, 52px); }
	.ficha-numero-corto{ font-size: clamp(28px, 9vw, 46px); }
	.ficha-desc{ font-size: 19px; }
	.ficha-cabecera{ padding: 14px 18px 12px; }
	.ficha-hero{ padding: 13px 16px 15px; }
	.ficha-hero-pie{ margin-top: 7px; }
	.verificador-vacio{ padding: 20px; }
	.verificador-pistas{ margin-top: 14px; gap: 9px; }
}

/* ===== Candado =====
   Lo que se ve una sola vez por aparato, el día que se instala. No compite con
   nada: una tarjeta al centro, el nombre de la tienda para saber que se llegó a
   la puerta correcta y un campo. */
.candado{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 18px;
}

.candado-caja{
	width: 100%;
	max-width: 340px;
	padding: 28px 22px 24px;
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: 0 1px 2px rgba(60,35,20,0.06), 0 16px 36px -14px rgba(120,45,15,0.30);
	text-align: center;
}

.candado-icono{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 17px;
	background: linear-gradient(145deg, #F79B2E 0%, var(--marca-naranja) 55%, var(--marca-rojo) 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(194,24,27,0.28);
}

.candado-titulo{
	margin: 16px 0 0;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--texto);
}

.candado-tienda{ margin: 9px 0 0; }

.candado-texto{
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--texto-3);
}

/* Cifras separadas y grandes: se escribe de pie y muchas veces a ciegas, porque
   el campo va tapado */
.candado-campo{
	width: 100%;
	height: 56px;
	margin-top: 18px;
	padding: 0 14px;
	border: 1px solid var(--separador);
	border-radius: 14px;
	background: var(--fondo);
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 6px;
	text-align: center;
	color: var(--texto);
	caret-color: var(--marca-naranja);
}

.candado-campo:focus{
	outline: none;
	border-color: var(--marca-naranja);
	box-shadow: 0 0 0 4px rgba(240,112,25,0.16);
}

.candado-boton{
	width: 100%;
	margin-top: 12px;
	background: var(--marca-naranja);
}

/* El aviso de app.css viene alineado a la izquierda para ir bajo un formulario;
   dentro de la tarjeta va centrado como todo lo demás */
.candado-caja .aviso{ justify-content: center; text-align: center; }