/* Sistema visual de INFI para pantallas internas — estilo Apple, modo claro.
   Optimizado para Zebra TC21 (~360px CSS) y lectura bajo el sol. */

:root{
	--fondo: #F2F2F7;
	--tarjeta: #FFFFFF;
	--texto: #000000;
	--texto-2: #3C3C43;
	--texto-3: #6C6C70;
	--separador: rgba(60,60,67,0.20);
	--azul: #007AFF;
	--azul-oscuro: #0060DF;
	--azul-suave: #E8F1FF;
	--verde: #1E7B34;
	--rojo: #C9021A;
	--sombra: 0 1px 2px rgba(0,0,0,0.10);
	--sombra-media: 0 4px 16px rgba(0,0,0,0.10);
	/* alto fijo de la barra superior: el buscador se ancla justo debajo */
	--alto-barra: 74px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html{ background: var(--fondo); }

body{
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior: none;
}

/* ===== Barra superior ===== */
.topbar{
	position: sticky;
	top: 0;
	z-index: 20;
	height: calc(var(--alto-barra) + env(safe-area-inset-top));
	/* 7 y no 10: con el título en dos renglones el contenido pedía 59px y solo
	   había 54, así que las pastillas se salían por debajo del filo. La barra
	   sigue midiendo --alto-barra (el buscador y el menú se anclan a esa
	   variable), esto solo le devuelve 6px de interior. Donde el título es de un
	   renglón no se nota: el contenido va centrado y le sobra sitio igual. */
	padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
	background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,248,251,0.94) 100%);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	box-shadow: 0 1px 0 var(--separador), 0 2px 12px rgba(0,0,0,0.04);
}

/* filo de color bajo la barra: detalle de marca */
.topbar::after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: linear-gradient(90deg, var(--azul) 0%, #5AC8FA 45%, rgba(90,200,250,0) 100%);
}

.topbar-fila{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
}

/* Ícono de la pantalla, en cuadrado redondeado estilo icono de app */
.topbar-icono{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 11px;
	background: linear-gradient(145deg, #2E9BFF 0%, #007AFF 60%, #0060DF 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 6px rgba(0,96,223,0.32);
}

.topbar-textos{ flex: 1; min-width: 0; }

.topbar-titulo{
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Títulos que pueden ocupar dos líneas (nombre de la hoja de conteo) */
.topbar-titulo-largo{
	font-size: 15.5px;
	line-height: 1.15;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Barra más alta para que quepan las dos líneas del título */
.cuerpo-barra-alta{ --alto-barra: 92px; }

.pastilla-hoja{ background: #FFF0D6; color: #7A5A00; }

.topbar-contexto{
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 2px 0 0;
}

.pastilla{
	display: inline-block;
	max-width: 130px;
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--azul-suave);
	color: var(--azul-oscuro);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pastilla-suave{
	background: rgba(60,60,67,0.10);
	color: var(--texto-2);
}

/* ===== Modo parcial =====
   Contar una hoja parcial se ve igual que contar el inventario completo y
   equivocarse de pantalla cuesta un recuento entero, así que esta cambia de
   color. El ámbar no es nuevo: es el de .pastilla-hoja, que ya estaba ahí
   mismo; solo se le suman los otros detalles de la barra. Nada de esto agrega
   altura ni renglones, que en la TC21 no sobran. */
.cuerpo-parcial .topbar-icono{
	background: linear-gradient(145deg, #FFB446 0%, #F08C00 60%, #A05F00 100%);
	box-shadow: 0 2px 6px rgba(160,95,0,0.32);
}

.cuerpo-parcial .topbar::after{
	background: linear-gradient(90deg, #A05F00 0%, #FFB446 45%, rgba(255,180,70,0) 100%);
}

/* El buscador nace enfocado y no se suelta en todo el conteo, así que el aro de
   foco es el detalle que el contador tiene enfrente todo el día */
.cuerpo-parcial .campo-buscar:focus-within{
	border-color: #F08C00;
	box-shadow: 0 0 0 4px rgba(240,140,0,0.14);
}

.cuerpo-parcial .campo-buscar input{ caret-color: #F08C00; }

/* Etiqueta de modo de conteo, metida dentro del <h1> del título.

   Va flotada a la derecha, no suelta al final del texto: al final del texto se
   la come el recorte de dos renglones en cuanto el nombre de la hoja es largo
   —de las nueve hojas reales de inventario completo, seis la dejaban fuera— y
   una etiqueta de seguridad que aparece en unas pantallas sí y en otras no es
   peor que no tenerla. Flotada siempre se ve, y solo le quita ancho al primer
   renglón.

   Por eso en el HTML va antes del texto aunque se dibuje a la derecha: un float
   solo reserva espacio en los renglones que vienen después de él.

   Relleno sólido y no pastilla clara porque tiene que ganarle al título, que
   está en negrita y tres puntos más grande. El line-height fijo es lo que
   impide que la caja estire el renglón. */
.etiqueta-modo{
	float: right;
	margin-left: 6px;
	padding: 0 7px;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	line-height: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.etiqueta-modo-parcial{ background: #A05F00; }
.etiqueta-modo-completo{ background: var(--azul-oscuro); }

.btn-icono{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: var(--azul);
	cursor: pointer;
}

.btn-icono:active{ background: rgba(0,0,0,0.06); }

/* ===== Menú ===== */
.menu-fondo{
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(0,0,0,0.18);
}

.menu{
	position: fixed;
	z-index: 31;
	left: 10px;
	right: 10px;
	bottom: 0;
	top: auto;
	width: auto;
	max-width: none;
	max-height: calc(100vh - var(--alto-barra) - env(safe-area-inset-top));
	padding: 14px 8px calc(10px + env(safe-area-inset-bottom));
	background: var(--tarjeta);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	animation: aparecer-menu 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

@supports (height: 100dvh){
	.menu{ max-height: calc(100dvh - var(--alto-barra) - env(safe-area-inset-top)); }
}

@keyframes aparecer-menu{
	from{ opacity: 0; transform: translateY(40px); }
	to{ opacity: 1; transform: none; }
}

.menu::before{
	content: "";
	display: block;
	width: 36px;
	height: 5px;
	margin: 0 auto 10px;
	border-radius: 3px;
	background: var(--separador);
}

.menu .menu-cerrar{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 16px;
	background: rgba(0,0,0,0.08);
	color: var(--texto-2);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s, color 0.15s, transform 0.1s;
}
.menu .menu-cerrar:hover{ background: rgba(0,0,0,0.12); color: var(--texto); }
.menu .menu-cerrar:active{ background: rgba(0,0,0,0.18); color: var(--texto); transform: scale(0.94); }
.menu .menu-cerrar svg{ width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }

@media (min-width: 700px){
	.menu-cerrar{ display: none; }
	.menu{
		left: auto;
		right: 16px;
		bottom: auto;
		top: calc(var(--alto-barra) + env(safe-area-inset-top) - 4px);
		width: 300px;
		padding: 8px;
		border-radius: 16px;
		box-shadow: 0 18px 50px rgba(0,0,0,0.22), 0 0 0 0.5px var(--separador);
		max-height: calc(100vh - var(--alto-barra) - 24px);
		animation-name: aparecer-menu-popover;
	}
	.menu::before{ display: none; }
}

@keyframes aparecer-menu-popover{
	from{ opacity: 0; transform: scale(0.96) translateY(-6px); }
	to{ opacity: 1; transform: none; }
}

.menu a,
.menu button{
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 0 12px;
	border: none;
	border-radius: 10px;
	background: none;
	color: var(--texto);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.menu a:active,
.menu button:active{ background: var(--azul-suave); }

.menu svg{ color: var(--texto-3); flex-shrink: 0; }

.menu .peligro{ color: var(--rojo); }
.menu .peligro svg{ color: var(--rojo); }

.menu-separador{
	height: 0.5px;
	margin: 6px 10px;
	background: var(--separador);
}

/* ===== Contenido ===== */
.contenido{
	max-width: 560px;
	margin: 0 auto;
	padding: 4px 12px calc(24px + env(safe-area-inset-bottom));
}

/* ===== Buscador ===== */
.buscador{
	position: sticky;
	top: calc(var(--alto-barra) + env(safe-area-inset-top));
	z-index: 10;
	padding: 10px 0 8px;
	background: var(--fondo);
}

.campo-buscar{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 12px;
	background: var(--tarjeta);
	border: 1.5px solid transparent;
	border-radius: 14px;
	box-shadow: var(--sombra);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.campo-buscar:focus-within{
	border-color: var(--azul);
	box-shadow: 0 0 0 4px rgba(0,122,255,0.12);
}

.campo-buscar > svg{ color: var(--texto-3); flex-shrink: 0; }

.campo-buscar input{
	flex: 1;
	min-width: 0;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	color: var(--texto);
	caret-color: var(--azul);
}

.campo-buscar input::placeholder{ color: var(--texto-3); font-weight: 400; }

.btn-limpiar{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: none;
	color: var(--texto-3);
	cursor: pointer;
}

.btn-limpiar:active{ background: rgba(0,0,0,0.06); }

/* Indicador de carga dentro del buscador */
.spinner{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 2.5px solid rgba(0,122,255,0.22);
	border-top-color: var(--azul);
	border-radius: 50%;
	animation: girar 0.7s linear infinite;
}

@keyframes girar{ to{ transform: rotate(360deg); } }

/* ===== Filtros rápidos ===== */
.filtros{
	display: flex;
	gap: 8px;
	margin-top: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.filtros::-webkit-scrollbar{ display: none; }

.chip-filtro{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	min-height: 36px;
	padding: 0 13px;
	border: 1px solid var(--separador);
	border-radius: 18px;
	background: var(--tarjeta);
	color: var(--texto-2);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.chip-filtro svg{ flex-shrink: 0; }

.chip-filtro.activo{
	background: var(--azul);
	border-color: var(--azul);
	color: #FFFFFF;
}

/* Chip de dos renglones: rótulo pequeño arriba y valor abajo.
   El chip de orden decía solo "Relevancia" y no se entendía qué era. El rótulo
   va encima del valor y no al lado porque apilado no cuesta ancho: el chip mide
   lo que mida el renglón más largo, y "ORDENAR POR" es más corto que
   "Relevancia", que es el valor por omisión. Tampoco cuesta alto: los dos
   renglones suman 27px y el chip ya reservaba 34px de interior. */
.chip-doble{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

/* 9px es el tamaño al que "ORDENAR POR" mide menos que "Relevancia", que es el
   valor por omisión y el más largo de los tres: así el chip no crece ni un pixel
   respecto a como estaba */
.chip-rotulo{
	font-size: 9px;
	font-weight: 700;
	line-height: 11px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--texto-3);
}

/* el valor va con interlineado ajustado: es lo que hace que los dos quepan */
.chip-valor{ line-height: 16px; }

/* sobre el azul del chip activo el gris del rótulo desaparece. Casi blanco y no
   blanco a secas: a 9px bajo el sol no sobra contraste, y el tamaño ya basta
   para que no le compita al valor */
.chip-filtro.activo .chip-rotulo{ color: rgba(255,255,255,0.88); }

/* ===== Lista de sugerencias ===== */
.sugerencias{
	margin-top: 8px;
	margin-bottom: 14px;
	background: var(--tarjeta);
	border-radius: 14px;
	box-shadow: var(--sombra);
	overflow: hidden;
}

.sugerencias:empty{ display: none; }

.sugerencia{
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 60px;
	padding: 10px 14px;
	border: none;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.12s;
}

.sugerencia + .sugerencia{ border-top: 0.5px solid var(--separador); }
.sugerencia:active{ background: var(--azul-suave); }

/* fila resaltada con las flechas del teclado */
.sugerencia.activa{
	background: var(--azul-suave);
	box-shadow: inset 3px 0 0 var(--azul);
}

.sugerencia-texto{ flex: 1; min-width: 0; }

.sugerencia-linea-codigo{
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sugerencia-codigo{
	font-size: 15px;
	font-weight: 700;
	color: var(--azul);
}

.etiqueta-mini{
	flex-shrink: 0;
	padding: 1px 6px;
	border-radius: 5px;
	background: #FFF6DC;
	color: #7A5A00;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

/* Columna derecha: existencia arriba, precio debajo en menor jerarquía.
   El rótulo "Inv." solo se muestra en móvil, donde la existencia comparte
   renglón con el precio junto al código. */
.sugerencia-exist-rotulo{ display: none; }

.sugerencia-cifras{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	line-height: 1.15;
}

.sugerencia-exist{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--texto-2);
}

.sugerencia-precio{
	margin-top: 3px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--verde);
	white-space: nowrap;
}

/* Listas en móvil (verificador, consulta, inventarios): el código comparte
   renglón con existencia y precio, y la descripción se queda sola abajo con
   todo el ancho. display:contents suelta los hijos de sugerencia-texto para
   poder repartirlos en la grilla. */
@media (max-width: 639px){
	.sugerencia{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"linea  cifras"
			"desc   desc";
		column-gap: 12px;
		row-gap: 2px;
		align-items: center;
	}

	.sugerencia-texto{ display: contents; }

	.sugerencia-linea-codigo{ grid-area: linea; min-width: 0; }

	.sugerencia-desc{ grid-area: desc; max-width: 100%; }

	.sugerencia-cifras{
		grid-area: cifras;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		opacity: 0.75;
	}

	.sugerencia-exist{ font-size: 13px; }

	.sugerencia-exist-rotulo{
		display: inline;
		font-size: 10.5px;
		font-weight: 600;
		color: var(--texto-3);
	}

	.sugerencia-precio{
		margin-top: 0;
		padding-left: 9px;
		border-left: 1px solid var(--separador);
		font-size: 13px;
	}
}

.sugerencia-desc{
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--texto);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sugerencia-desc mark{
	background: rgba(255,214,10,0.28);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
}

/* Aviso sobre la lista: resultados aproximados */
.nota-lista{
	padding: 9px 14px;
	background: #FFF6DC;
	border-bottom: 0.5px solid var(--separador);
	font-size: 14px;
	font-weight: 600;
	color: #7A5A00;
}

/* Marca en la ficha cuando se encontró por código alterno */
.etiqueta-alterno{
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 6px;
	background: #FFF6DC;
	color: #7A5A00;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	vertical-align: middle;
}

/* ===== Esqueleto de carga ===== */
.esqueleto-fila{
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 10px 14px;
}

.esqueleto-fila + .esqueleto-fila{ border-top: 0.5px solid var(--separador); }

.esqueleto{
	background: linear-gradient(90deg, #E9E9EE 25%, #F6F6F9 37%, #E9E9EE 63%);
	background-size: 400px 100%;
	border-radius: 6px;
	animation: brillo 1.3s ease-in-out infinite;
}

@keyframes brillo{
	from{ background-position: -200px 0; }
	to{ background-position: calc(200px + 100%) 0; }
}

.esqueleto-linea-corta{ width: 34%; height: 12px; margin-bottom: 8px; }
.esqueleto-linea-larga{ width: 78%; height: 15px; }
.esqueleto-bloque{ width: 44px; height: 20px; flex-shrink: 0; }

/* ===== Tarjeta de producto ===== */
/* Se distingue de la lista por elevación y espacio, no por color:
   sombra más profunda, esquinas más amplias y aire alrededor. */
.producto{
	background: var(--tarjeta);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 10px 26px rgba(0,0,0,0.10);
	overflow: hidden;
	animation: entrar 0.22s ease-out;
}

.producto-etiqueta{
	margin: 22px 4px 8px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--texto-3);
}

@keyframes entrar{
	from{ opacity: 0; transform: translateY(8px); }
	to{ opacity: 1; transform: none; }
}

.producto-encabezado{
	padding: 16px;
	border-bottom: 0.5px solid var(--separador);
}

.producto-codigo{
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 10px;
	background: var(--azul-suave);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--azul-oscuro);
}

/* Cuando el código es botón abre la ficha ampliada del artículo */
button.producto-codigo{
	border: none;
	font-family: inherit;
	padding: 5px 11px;
	cursor: pointer;
}

button.producto-codigo:active{ background: #D3E6FF; }

.producto-desc{
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

/* Dos cifras protagonistas */
.destacados{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.destacado{
	padding: 14px 16px;
	text-align: center;
}

.destacado + .destacado{ border-left: 0.5px solid var(--separador); }

.destacado-etiqueta{
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--texto-3);
}

.destacado-valor{
	display: block;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.5px;
}

.destacado-valor.precio{ color: var(--verde); }

/* Detalles secundarios */
.detalles{
	border-top: 0.5px solid var(--separador);
	padding: 4px 16px 10px;
}

.detalle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 42px;
}

.detalle + .detalle{ border-top: 0.5px solid var(--separador); }

.detalle-etiqueta{
	font-size: 16px;
	font-weight: 500;
	color: var(--texto-2);
}

.detalle-valor{
	font-size: 17px;
	font-weight: 700;
}

/* ===== Más información (plegable) ===== */
.mas-info{
	border-top: 0.5px solid var(--separador);
}

.mas-info-boton{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: none;
	background: none;
	color: var(--azul);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.mas-info-boton:active{ background: var(--azul-suave); }

.mas-info-boton svg{ transition: transform 0.18s ease; }
.mas-info-boton[aria-expanded="true"] svg{ transform: rotate(180deg); }

.mas-info-cuerpo{
	padding: 0 16px 10px;
	border-top: 0.5px solid var(--separador);
	animation: entrar 0.18s ease-out;
}

.mas-info-cargando{
	padding: 14px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--texto-3);
}

/* ===== Recientes y estado vacío ===== */
.seccion-titulo{
	margin: 16px 4px 8px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--texto-3);
}

.recientes-cabecera{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 16px 4px 8px;
}

.recientes-cabecera .seccion-titulo{
	margin: 0;
}

.btn-limpiar-recientes{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: rgba(201,2,26,0.08);
	color: var(--rojo);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s;
}

.btn-limpiar-recientes:active{
	background: rgba(201,2,26,0.2);
}

.recientes{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-height: 40px;
	padding: 0 14px;
	border: none;
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	color: var(--texto);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chip:active{ background: var(--azul-suave); }
.chip svg{ color: var(--texto-3); flex-shrink: 0; }

.vacio{
	padding: 34px 20px;
	text-align: center;
	color: var(--texto-3);
}

.vacio svg{ color: #C7C7CC; }

.vacio p{
	margin: 10px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

/* Botón discreto bajo un aviso */
.boton-secundario{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin-top: 10px;
	padding: 0 16px;
	border: 1px solid var(--separador);
	border-radius: 12px;
	background: var(--tarjeta);
	color: var(--azul);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.boton-secundario:active{ background: var(--azul-suave); }

/* ===== Avisos ===== */
.aviso{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 600;
	animation: entrar 0.2s ease-out;
}

.aviso-error{ background: #FFE5E7; color: var(--rojo); }
.aviso-info{ background: var(--tarjeta); color: var(--texto-3); box-shadow: var(--sombra); }

/* Refuerzo para avisos que no pueden pasar inadvertidos: borde marcado y
   letra grande. Se lee de pie, a un brazo de la caja, en PC o en móvil. */
.aviso-notorio{
	padding: 18px 20px;
	border: 2px solid currentColor;
	font-size: 19px;
	font-weight: 800;
}

/* ===== Botón principal ===== */
.btn-principal{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1;
	min-height: 46px;
	padding: 0 18px;
	border: none;
	border-radius: 12px;
	background: var(--azul);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.btn-principal:active{ opacity: 0.7; }

.btn-nuevo{
	display: flex;
	width: 100%;
	margin: 12px 0 4px;
	background: var(--azul-suave);
	color: var(--azul);
	border: 1px solid rgba(0,122,255,0.2);
}

.btn-nuevo:active{
	background: #D6E8FF;
}

/* ===== Lista de hojas de conteo ===== */
.hojas{ margin-top: 12px; }

.hoja{
	margin-bottom: 12px;
	padding: 14px 16px 12px;
	background: var(--tarjeta);
	border-radius: 16px;
	box-shadow: var(--sombra);
}

.hoja-cabecera{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.hoja-id{
	font-size: 14px;
	font-weight: 800;
	color: var(--texto-3);
	letter-spacing: 0.4px;
}

.estado{
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.estado-abierto{ background: #E2F5E7; color: #14682C; }
.estado-cerrado{ background: rgba(60,60,67,0.10); color: var(--texto-2); }

.hoja-titulo{
	margin: 8px 0 4px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

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

.hoja-acciones{
	display: flex;
	align-items: center;
	gap: 8px;
}

.btn-accion{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border: 1px solid var(--separador);
	border-radius: 12px;
	background: var(--tarjeta);
	color: var(--texto-2);
	cursor: pointer;
	transition: background-color 0.15s;
}

.btn-accion:active{ background: rgba(0,0,0,0.06); }
.btn-accion-generar{ color: #9A6300; }
.btn-accion-peligro{ color: var(--rojo); }

/* Hoja activa en la pantalla de conteo */
.hoja-activa{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 14px;
	background: var(--tarjeta);
	border-radius: 12px;
	box-shadow: var(--sombra);
}

.hoja-activa-id{
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 800;
	color: var(--texto-3);
}

.hoja-activa-nombre{
	flex: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===== Conteo del producto (compacto: todo visible sin desplazar) ===== */
.producto-compacto .producto-encabezado{ padding: 10px 14px; }

.producto-linea-superior{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.producto-precio-chip{
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--verde);
}

/* Precio y "Limpiar", juntos al final de la línea del código */
.producto-superior-fin{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
}

/* Deja la pantalla en blanco y el foco en el buscador. Va discreto —contorno y
   gris— para que no compita con el botón de sumar, que es la acción de verdad de
   esta pantalla. Cabe dentro del alto que ya ocupa el chip del código, así que en
   el handheld no roba ni un pixel. */
.btn-limpiar-ficha{
	flex-shrink: 0;
	padding: 4px 11px;
	border: 1px solid var(--separador);
	border-radius: 999px;
	background: var(--tarjeta);
	color: var(--texto-3);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}

.btn-limpiar-ficha:active{
	background: var(--fondo);
	color: var(--texto-2);
}

.producto-compacto .producto-desc{
	font-size: 17px;
	line-height: 1.22;
	max-height: 2.5em;
	overflow: hidden;
}

/* Existencia y cantidad contada, lado a lado */
.conteo-panel{
	display: flex;
	align-items: stretch;
	border-top: 0.5px solid var(--separador);
}

.conteo-existencia{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 108px;
	padding: 8px 6px;
	border-right: 0.5px solid var(--separador);
	background: #FAFAFC;
}

.conteo-entrada{
	flex: 1;
	min-width: 0;
	padding: 8px 12px 10px;
}

.conteo-etiqueta{
	display: block;
	margin-bottom: 4px;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--texto-3);
	text-align: center;
}

.conteo-entrada .conteo-etiqueta{ text-align: left; }

.conteo-valor{
	font-size: 28px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.5px;
}

.conteo-fila{
	display: flex;
	align-items: center;
	gap: 8px;
}

.conteo-input{
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 10px;
	border: 1.5px solid var(--separador);
	border-radius: 11px;
	background: var(--tarjeta);
	font-family: inherit;
	font-size: 24px;
	font-weight: 800;
	text-align: center;
	color: var(--texto);
	caret-color: var(--azul);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.conteo-input:focus{
	border-color: var(--azul);
	box-shadow: 0 0 0 4px rgba(0,122,255,0.12);
}

.btn-guardar{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border: none;
	border-radius: 11px;
	background: #1E7B34;
	color: #FFFFFF;
	cursor: pointer;
	transition: opacity 0.15s;
}

.btn-guardar:active{ opacity: 0.7; }

/* Bloqueado mientras el conteo va al servidor: evita sumarlo dos veces */
.btn-guardar:disabled{
	opacity: 0.45;
	cursor: default;
}

/* Avisos dentro de la ficha: conteo previo y movimientos */
.alerta{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 9px 14px;
	border-top: 0.5px solid var(--separador);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.alerta svg{ flex-shrink: 0; margin-top: 1px; }
.alerta-cuerpo{ flex: 1; min-width: 0; }

.alerta-previo{ background: #FFF6DC; color: #6B4E00; }
.alerta-movimiento{ background: #FFEDE8; color: #8A2B12; }
/* Informativo, no un problema: la caja se distingue de los dos avisos de arriba */
.alerta-caja{ background: #E8F1FD; color: #14427F; }

/* Un código dentro del aviso: lleva a contarlo sin tener que buscarlo de nuevo */
.enlace-codigo{
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.alerta-pie{
	margin-top: 1px;
	font-size: 12.5px;
	font-weight: 500;
	opacity: 0.85;
}

.btn-borrar-conteo{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: none;
	border-radius: 9px;
	background: rgba(201,2,26,0.10);
	color: var(--rojo);
	cursor: pointer;
}

.btn-borrar-conteo:active{ background: rgba(201,2,26,0.2); }

.diferencia-positivo{ color: var(--verde); }
.diferencia-negativo{ color: var(--rojo); }
.diferencia-cero{ color: var(--texto-3); }

.historial-badge{
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	margin: 4px 0 2px;
}
.historial-badge.diferencia-positivo{ background: rgba(52,199,89,0.12); color: var(--verde); }
.historial-badge.diferencia-negativo{ background: rgba(201,2,26,0.10); color: var(--rojo); }
.historial-badge.diferencia-cero{ background: rgba(60,60,67,0.06); color: var(--texto-3); }

/* Aviso de guardado */
.guardado{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 12px 14px;
	background: #E2F5E7;
	border-radius: 14px;
	animation: entrar 0.2s ease-out;
}

.guardado svg{ flex-shrink: 0; color: #14682C; }
.guardado-cuerpo{ flex: 1; min-width: 0; }

.guardado-titulo{
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: #14682C;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.guardado-datos{
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--texto-2);
}

.btn-volver-producto{
	flex-shrink: 0;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(0,122,255,0.3);
	border-radius: 9px;
	background: var(--tarjeta);
	color: var(--azul);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* ===== Ventana a pantalla completa (solo con ratón) ===== */
@media (min-width: 900px){
	.modal-completa{
		max-width: none;
		width: 94vw;
		height: 92vh;
		display: flex;
		flex-direction: column;
	}

	.modal-completa .historial-lista{
		flex: 1;
		max-height: none;
	}
}

/* ===== Paginador ===== */
.paginador{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 10px;
	border-top: 0.5px solid var(--separador);
}

.paginador-rango{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--texto-3);
}

.paginador-controles{
	display: flex;
	align-items: center;
	gap: 6px;
}

.paginador-boton{
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--separador);
	border-radius: 9px;
	background: var(--tarjeta);
	color: var(--azul);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.paginador-boton:disabled{ color: #C0C0C4; cursor: default; }
.paginador-boton:not(:disabled):active{ background: var(--azul-suave); }

.paginador-pagina{
	width: 56px;
	height: 38px;
	border: 1px solid var(--separador);
	border-radius: 9px;
	background: var(--tarjeta);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--texto);
	outline: none;
}

.paginador-pagina:focus{ border-color: var(--azul); }

.paginador-de{
	font-size: 14px;
	font-weight: 600;
	color: var(--texto-3);
	white-space: nowrap;
}

.paginador-tamano{
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--separador);
	border-radius: 9px;
	background: var(--tarjeta);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--texto);
	cursor: pointer;
}

.btn-refrescar{
	border-color: rgba(0,122,255,0.35);
	color: var(--azul);
}

/* ===== Tabla (solo en pantallas con ratón) ===== */
.tabla{
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.tabla th{
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 9px 10px;
	background: var(--fondo);
	border-bottom: 1px solid var(--separador);
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--texto-3);
	text-align: left;
	white-space: nowrap;
}

.tabla th.ordenable{ cursor: pointer; user-select: none; }
.tabla th.ordenable:hover{ color: var(--azul); }

.tabla th .flecha{
	display: inline-block;
	margin-left: 4px;
	font-size: 10px;
	opacity: 0;
}

.tabla th.activa{ color: var(--azul); }
.tabla th.activa .flecha{ opacity: 1; }

.tabla td{
	padding: 9px 10px;
	border-bottom: 0.5px solid var(--separador);
	vertical-align: middle;
}

.tabla tbody tr{ transition: background-color 0.12s; }
.tabla tbody tr:hover{ background: var(--azul-suave); }
.tabla tbody tr.clicable{ cursor: pointer; }

/* La alineación sí la comparten encabezado y celda: la columna numérica tiene que
   quedar a la derecha en las dos. El peso y el color no: van solo en td, porque
   escritos sueltos le ganaban en especificidad a .tabla th y dejaban los
   encabezados con tres pesos distintos (500 en Descripción, 700 en Código, 800 en
   el resto) y dos de ellos en azul. */
.tabla .num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .cod{ white-space: nowrap; }
.tabla td.cod{ font-weight: 700; color: var(--azul); }
.tabla td.desc{ font-weight: 500; }

/* Cada conteo registrado en la bitácora del producto */
.conteo-evento{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.conteo-evento + .conteo-evento{ border-top: 0.5px solid var(--separador); }

.conteo-evento-valor{
	flex-shrink: 0;
	min-width: 56px;
	font-size: 20px;
	font-weight: 800;
	text-align: right;
	color: var(--texto-3);
}

.conteo-evento-vigente .conteo-evento-valor{ color: var(--texto); }

.conteo-evento-datos{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.conteo-evento-tipo{
	font-size: 14.5px;
	font-weight: 700;
	color: var(--texto-2);
}

.conteo-evento-vigente .conteo-evento-tipo{ color: var(--verde); }

.conteo-evento-pie{
	font-size: 12.5px;
	font-weight: 500;
	color: var(--texto-3);
}

/* Cargar más en los historiales */
.btn-cargar-mas:disabled{
	opacity: 0.5;
	cursor: default;
}

.btn-cargar-mas{
	width: 100%;
	min-height: 44px;
	margin-top: 10px;
	border: 1px solid var(--separador);
	border-radius: 11px;
	background: var(--tarjeta);
	color: var(--azul);
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
}

.historial-total{
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--texto-3);
}

.historial-movimiento{
	color: #8A2B12;
	font-weight: 700;
}

/* ===== Historial ===== */
.historial-barra{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.historial-barra input{
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--separador);
	border-radius: 10px;
	background: var(--fondo);
	font-family: inherit;
	font-size: 16px;
	color: var(--texto);
	outline: none;
}

.historial-barra input:focus{ border-color: var(--azul); }

.btn-pdf{
	height: 42px;
	padding: 0 14px;
	border: 1px solid rgba(201,2,26,0.35);
	border-radius: 10px;
	background: none;
	color: var(--rojo);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.btn-excel{
	border-color: rgba(30,123,52,0.4);
	color: var(--verde);
}

.historial-lista{
	max-height: 52vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
}

.historial-fila{
	padding: 8px 2px;
	border-bottom: 0.5px solid var(--separador);
}

.historial-codigo{
	font-size: 14px;
	font-weight: 700;
	color: var(--azul);
}

.historial-desc{
	margin: 1px 0 5px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
}

.historial-cifras{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--texto-2);
}

.historial-pie{
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--texto-3);
}

/* ===== Modal ===== */
.modal-fondo{
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0,0,0,0.35);
}

.modal{
	width: 100%;
	max-width: 320px;
	padding: 22px 20px 16px;
	background: var(--tarjeta);
	border-radius: 18px;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0,0,0,0.3);
	animation: entrar 0.2s ease-out;
}

.modal img{ width: 84px; height: auto; }

.modal h2{ margin: 10px 0 4px; font-size: 20px; font-weight: 700; }
.modal p{ margin: 0; font-size: 15px; color: var(--texto-2); }

.modal-boton{
	width: 100%;
	height: 48px;
	margin-top: 18px;
	border: none;
	border-radius: 12px;
	background: var(--azul);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.modal-boton:active{ opacity: 0.7; }

/* Variantes del modal */
.modal-ancho{ max-width: 520px; }
.modal-formulario{ text-align: left; }

.modal-historico .modal-x svg{ pointer-events: none; }

.modal-historico .modal-x{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(60,60,67,0.08);
	color: var(--texto-2);
	cursor: pointer;
	flex-shrink: 0;
}

.modal-historico .historial-cabecera{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.modal-historico .historial-cabecera h2{
	flex: 1;
	margin: 0;
	font-size: 20px;
}
.modal-historico .historial-cabecera form{ margin: 0; }

.modal-destacado{
	margin-top: 10px !important;
	font-size: 17px !important;
	font-weight: 700;
	color: var(--texto) !important;
}

.campo-formulario{
	display: block;
	margin-top: 14px;
	text-align: left;
}

.campo-formulario span{
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--texto-2);
}

.campo-formulario input,
.campo-formulario select{
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--separador);
	border-radius: 12px;
	background: var(--tarjeta);
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	color: var(--texto);
	outline: none;
}

.campo-formulario input:focus,
.campo-formulario select:focus{
	border-color: var(--azul);
	box-shadow: 0 0 0 4px rgba(0,122,255,0.12);
}

.modal-botones{
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.modal-botones .modal-boton{ margin-top: 0; }

.modal-boton-secundario{
	background: rgba(60,60,67,0.10);
	color: var(--texto);
}

.modal-boton-peligro{ background: var(--rojo); }

.aviso-exito{ background: #E2F5E7; color: #14682C; }

/* En móvil: más altura para las modales */
@media (pointer: coarse) {
	.modal-fondo{
		align-items: flex-start;
		padding-top: 4px;
		padding-bottom: 8px;
		/* La barra de direcciones del navegador no entra en 100vh: vh mide la
		   pantalla como si la barra no estuviera, así que el modal se dibujaba en
		   una caja más alta que lo que de verdad se ve y el final de la lista
		   —donde está "Cargar más"— quedaba debajo del filo, sin manera de
		   alcanzarlo. dvh mide lo visible y se ajusta si la barra aparece o se va.
		   En pantalla completa y en Fully Kiosk vale lo mismo que antes. */
		height: 100dvh;
	}
	.modal-fondo .modal{
		padding: 12px 12px 8px;
		/* red de seguridad para el resto de las ventanas: ninguna se sale de lo que
		   se ve, y si su contenido no cabe se desplaza dentro de sí misma */
		max-height: 100%;
		overflow-y: auto;
	}
	/* El histórico se arma en columna y solo la lista se desplaza. Así la altura la
	   reparte el navegador y no una resta a ojo: la cabecera, el buscador y el pie
	   quedan siempre dentro de la pantalla, mida lo que mida. */
	.modal-fondo .modal-historico{
		display: flex;
		flex-direction: column;
		max-height: 100%;
	}
	.modal-fondo .historial-lista{
		flex: 1;
		min-height: 0;
		max-height: none;
	}
}

/* Historial modal en PC: más ancho, más filas de golpe */
@media (pointer: fine) {
	.modal-historico{
		max-width: 960px;
		max-height: calc(100vh - 40px);
		display: flex;
		flex-direction: column;
	}
	.modal-historico .modal-x:hover{ background: rgba(60,60,67,0.15); }
	.modal-historico .modal-x:active{ background: rgba(60,60,67,0.25); }
	.modal-historico .historial-lista{
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}
	.modal-historico .tabla th,
	.modal-historico .tabla td{
		padding: 5px 8px;
	}
	.modal-historico .tabla th{ font-size: 11px; }
	.modal-historico .tabla td{ font-size: 12.5px; }
	.modal-historico .tabla .cod{
		font-size: 12px;
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.modal-historico .tabla .desc{
		max-width: 220px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

[hidden]{ display: none !important; }

/* ===== Escáner por cámara =====
   El botón vive dentro de .campo-buscar; la ventana la arma js/escaner_camara.js
   y no lleva marcado en la pantalla. */
.btn-camara{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: var(--azul);
	cursor: pointer;
	transition: background-color 0.15s;
}

.btn-camara:active{ background: rgba(0,0,0,0.06); }
.btn-camara[hidden]{ display: none; }

/* ===== Ventana del escáner (INFI.escaner) ===== */
.escaner{
	position: fixed;
	inset: 0;
	z-index: 60;
	/* dvh y no vh, por lo mismo que las modales: con la barra de direcciones a la
	   vista vh mide de más y el botón Cancelar cae por debajo del filo, donde no
	   hay manera de tocarlo */
	height: 100vh;
	height: 100dvh;
	background: #000000;
	overflow: hidden;
	animation: entrar 0.2s ease-out;
	-webkit-user-select: none;
	user-select: none;
}

.escaner-video{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.escaner-titulo{
	position: absolute;
	top: calc(18px + env(safe-area-inset-top));
	left: 0;
	right: 0;
	z-index: 2;
	text-align: center;
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* 44% y no la mitad: deja sitio abajo para la linterna y el zoom sin que el
   recuadro se suba tanto que estire el brazo */
.escaner-centro{
	position: absolute;
	left: 50%;
	top: 44%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

/* El oscurecido de alrededor es una sombra enorme del propio recuadro. Así el
   hueco siempre cae exacto —es el elemento mismo— y no hacen falta cuatro
   paneles ni un SVG que haya que mantener en su sitio. */
/* Ancho y alto de sobra. Con una banda estrecha hay que apuntar, y nadie apunta:
   se sujeta el aparato como con el lector láser y el código cae donde cae. Y lo
   que queda fuera del recuadro no se lee, así que estrecho significa no leer. */
.escaner-ventana{
	position: relative;
	width: 330px;
	width: min(92vw, 420px);
	height: 200px;
	border-radius: 18px;
	box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55);
	transition: box-shadow 0.18s;
}

.escaner-esquina{
	position: absolute;
	width: 26px;
	height: 26px;
	border: 3px solid #ffffff;
}

.escaner-esquina.ei{ top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 16px; }
.escaner-esquina.ed{ top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 16px; }
.escaner-esquina.ii{ bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 16px; }
.escaner-esquina.id{ bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 16px; }

/* Va con transform y no moviendo top: así el barrido no obliga a recalcular
   nada en cada cuadro mientras el escáner trabaja */
.escaner-rayo{
	position: absolute;
	top: 12px;
	left: 10px;
	right: 10px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(90,200,250,0) 0%, #5AC8FA 50%, rgba(90,200,250,0) 100%);
	box-shadow: 0 0 10px rgba(90,200,250,0.85);
	animation: escaner-barrido 2.2s ease-in-out infinite;
}

@keyframes escaner-barrido{
	0%, 100%{ transform: translateY(0); opacity: 0.3; }
	50%{ transform: translateY(174px); opacity: 1; }
}

/* relative para que el texto quede por encima del oscurecido, que lo pinta el
   recuadro de arriba */
.escaner-pista{
	position: relative;
	margin: 0;
	color: rgba(255,255,255,0.75);
	font-size: 14.5px;
	font-weight: 500;
	text-align: center;
	text-shadow: 0 1px 5px rgba(0,0,0,0.6);
}

.escaner-ventana.exito{
	box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55), inset 0 0 0 3px #30D158, 0 0 26px rgba(48,209,88,0.55);
}

.escaner-ventana.exito .escaner-esquina{ border-color: #30D158; }
.escaner-ventana.exito .escaner-rayo{ display: none; }

.escaner-pie{
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(26px + env(safe-area-inset-bottom));
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 0 18px;
}

/* Una barra y no dos botones: con el paso que declaran la mayoría de las cámaras
   (0.1) llegar a 4x eran treinta toques */
.escaner-zoom{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 320px;
	height: 44px;
	padding: 0 14px;
	border-radius: 22px;
	background: rgba(0,0,0,0.35);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.escaner-zoom > svg{ color: rgba(255,255,255,0.7); flex-shrink: 0; }

.escaner-zoom input{
	flex: 1;
	min-width: 0;
	height: 4px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 2px;
	background: rgba(255,255,255,0.35);
	outline: none;
}

.escaner-zoom input::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.escaner-zoom input::-moz-range-thumb{
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.escaner-zoom-valor{
	min-width: 42px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Tres columnas y no flex con separación: así Cancelar queda centrado en la
   pantalla aunque el aparato no tenga linterna y esa casilla vaya vacía */
.escaner-acciones{
	display: grid;
	grid-template-columns: 56px 1fr 56px;
	align-items: center;
	width: 100%;
	max-width: 320px;
}

.escaner-luz{
	justify-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.35);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.escaner-luz.activo{ background: #FFD60A; color: #1C1C1E; }

.escaner-cancelar{
	grid-column: 2;
	justify-self: center;
	min-width: 150px;
	height: 52px;
	padding: 0 26px;
	border: none;
	border-radius: 26px;
	background: rgba(255,255,255,0.20);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: #ffffff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.escaner-cancelar:active{ background: rgba(255,255,255,0.34); }

.escaner-toast{
	position: absolute;
	left: 50%;
	bottom: calc(160px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 3;
	padding: 9px 16px;
	border-radius: 18px;
	background: rgba(0,0,0,0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	animation: entrar 0.2s ease-out;
}

.escaner-aviso{
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0,0,0,0.6);
}

.escaner-aviso-caja{
	width: 100%;
	max-width: 300px;
	padding: 22px 20px 16px;
	border-radius: 18px;
	background: rgba(38,38,42,0.94);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	text-align: center;
	color: #ffffff;
	animation: entrar 0.2s ease-out;
}

.escaner-aviso-caja > svg{ color: #FFD60A; }

.escaner-aviso-texto{
	margin: 10px 0 18px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255,255,255,0.9);
}

.escaner-aviso-boton{
	width: 100%;
	height: 46px;
	border: none;
	border-radius: 12px;
	background: var(--azul);
	color: #ffffff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

/* Explicación corta dentro de una modal de listado */
.historial-nota{
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--texto-2);
}

/* ===== Aviso de conexión perdida =====
   Va abajo, fija y con el rojo más fuerte: tiene que leerse bajo el sol */
.barra-conexion{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--rojo);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
	letter-spacing: 0.2px;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
}

.barra-conexion[hidden]{ display: none; }

/* Para que la barra no tape el final del contenido */
.con-barra-conexion .contenido{ padding-bottom: 72px; }

/* ===== Inventario completo ===== */
/* La hoja se elige tocando la tarjeta completa */
.hoja-elegible{
	display: block;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s;
}

.hoja-elegible:active{ background: var(--azul-suave); }

/* Sistema, contado y diferencia: las tres cifras del conteo acumulativo */
.destacados-tres{
	grid-template-columns: 1fr 1fr 1fr;
	border-top: 0.5px solid var(--separador);
}

.destacados-tres .destacado{ padding: 11px 4px; }

.destacados-tres .destacado-etiqueta{
	font-size: 11.5px;
	letter-spacing: 0.4px;
}

.destacados-tres .destacado-valor{
	font-size: 25px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Movimiento que ya fue compensado con uno negativo */
.conteo-evento-anulado{ opacity: 0.55; }
.conteo-evento-anulado .conteo-evento-valor{ text-decoration: line-through; }

/* ===== Conversiones a transferencia (cotizaciones y órdenes de compra) ===== */

/* Mes y año: lo que decide cuánto trae el servidor */
.periodo{
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.periodo select,
.periodo input{
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--separador);
	border-radius: 10px;
	background: var(--tarjeta);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--texto);
	outline: none;
}

.periodo select{ flex: 1; min-width: 0; }
.periodo input{ width: 96px; }

.periodo select:focus,
.periodo input:focus{ border-color: var(--azul); }

/* El listado de la pantalla completa, no el de dentro de una modal */
.listado{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.acciones-fila{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

/* En el handheld las acciones van a lo ancho de la tarjeta: dedos, no puntero */
.historial-fila > .acciones-fila{
	margin-top: 8px;
	justify-content: stretch;
}

.historial-fila > .acciones-fila .btn-tabla{
	flex: 1;
	height: 40px;
	font-size: 15px;
}

.btn-tabla{
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--azul);
	border-radius: 8px;
	background: none;
	color: var(--azul);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.btn-tabla:active{ background: var(--azul-suave); }

.btn-tabla-verde{
	border-color: rgba(30,123,52,0.55);
	color: var(--verde);
}

.btn-tabla-verde:active{ background: rgba(30,123,52,0.10); }

/* ===== Pantalla de listado a pantalla completa (solo con ratón) =====
   El resto de la aplicación vive en una columna de 560px porque está hecha para el
   handheld. Una pantalla que existe para revisar cientos de renglones necesita lo
   contrario: todo el ancho, los filtros en un solo renglón y la tabla ocupando lo
   que sobra de la ventana, con su propio scroll. Así el encabezado de la tabla y el
   paginador se quedan siempre a la vista y no hay que bajar la página para cambiar
   de hoja.

   El corte son 700px, el mismo con el que listados.js decide dibujar tabla en lugar
   de tarjetas: por debajo de ese ancho no hay tabla que acomodar. */
@media (min-width: 700px){

	.contenido-listado{
		max-width: none;
		height: calc(100vh - var(--alto-barra));
		display: flex;
		flex-direction: column;
		padding: 10px 16px 12px;
	}

	/* Un solo renglón: período, búsqueda, estado y el contador al extremo */
	.contenido-listado .barra-herramientas{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}

	.contenido-listado .periodo{ margin: 0; flex: 0 0 auto; }
	.contenido-listado .periodo select{ flex: 0 0 auto; width: 160px; }

	.contenido-listado .historial-barra{
		margin: 0;
		flex: 1 1 300px;
		min-width: 240px;
	}

	/* El gris del buscador es el mismo gris del fondo de la página: dentro de una
	   modal se ve como campo porque atrás hay blanco, pero acá desaparecía.
	   Blanco, igual que el mes y el año que tiene al lado. */
	.contenido-listado .historial-barra input{ background: var(--tarjeta); }

	.contenido-listado .filtros{ margin: 0; flex: 0 0 auto; overflow: visible; }

	.contenido-listado .historial-total{ margin: 0 0 0 auto; padding-left: 10px; }

	/* La nota del tope es una frase larga: se lleva su propio renglón */
	.contenido-listado .historial-nota{ flex-basis: 100%; margin: 0; }

	/* La tabla se queda con toda la altura que sobre y scrollea por dentro */
	.contenido-listado .listado{
		flex: 1;
		min-height: 0;
		overflow: auto;
		background: var(--tarjeta);
		border-radius: 12px;
		box-shadow: var(--sombra);
	}

	.contenido-listado .paginador{
		flex-shrink: 0;
		margin-top: 10px;
		padding-top: 10px;
	}

	/* Renglones apretados: la idea es ver muchos de golpe, como en los historiales */
	.contenido-listado .tabla th{
		padding: 7px 10px;
		font-size: 11px;
		box-shadow: 0 1px 0 var(--separador);
	}

	.contenido-listado .tabla td{
		padding: 3px 10px;
		font-size: 13px;
	}

	.contenido-listado .tabla tbody tr:nth-child(even){ background: rgba(60,60,67,0.028); }
	.contenido-listado .tabla tbody tr:hover{ background: var(--azul-suave); }

	/* El alto del renglón lo fija el botón, no el texto: por eso va tan justo */
	.contenido-listado .btn-tabla{
		height: 23px;
		padding: 0 10px;
		font-size: 12.5px;
	}

	.contenido-listado .btn-tabla:hover{ background: var(--azul-suave); }
	.contenido-listado .btn-tabla-verde:hover{ background: rgba(30,123,52,0.10); }

	/* Reparto fijo: con el reparto automático el navegador reacomodaba las columnas
	   según el contenido de cada página, y los renglones cambiaban de alto al pasar
	   de página. Cada pantalla declara abajo su propio min-width; por debajo de él la
	   tabla scrollea de lado en vez de aplastarse.
	   Las acciones no se parten en dos líneas: eso duplicaba el alto del renglón. */
	.contenido-listado .tabla{ table-layout: fixed; }
	.contenido-listado .acciones-fila{ flex-wrap: nowrap; }

	/* Red de seguridad: un dato más largo de lo visto no puede partir el renglón */
	.contenido-listado .tabla .desc,
	.contenido-listado .tabla .cod{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Sin azul en las columnas de código: son columnas enteras de texto de color y
	   pesaban más que el nombre, que es lo que uno lee. Las dos pantallas tienen la
	   misma estructura: la segunda columna es el número que identifica el renglón
	   (N° OC / Cotización) y la cuarta es un documento de referencia
	   (Factura / Guía), que va como dato de apoyo. */
	.contenido-listado .tabla td.cod{ color: var(--texto); font-weight: 600; }
	.contenido-listado .tabla td:nth-child(4){ color: var(--texto-2); font-weight: 500; }

	/* ----- Anchos de columna -----
	   Medidos sobre el dato real de la base, no a ojo. Suman menos que la ventana a
	   propósito: el reparto fijo agranda las columnas en proporción, así el espacio
	   que sobra en una pantalla grande se reparte entre todas en vez de amontonarse
	   en una sola.

	   Ojo al tocar estos números: el ancho no lo manda solo el dato. El encabezado
	   va en mayúsculas y con letter-spacing, y la columna por la que se está
	   ordenando le suma la flecha, así que un título corto como 'Cotización' pide
	   108px aunque el dato ('24527') no llegue a 60. Con reparto fijo el que se
	   queda corto no empuja: se corta con puntos suspensivos y nadie se entera. */

	/* Órdenes de compra: N° OC llega a 16 caracteres, Factura a 20
	   ('0002-001-01-00690487') y el proveedor a 30. */
	.listado-ordenes .tabla{ min-width: 1030px; }
	.listado-ordenes .tabla th:nth-child(1){ width: 46px; }   /* # */
	.listado-ordenes .tabla th:nth-child(2){ width: 130px; }  /* N° OC */
	.listado-ordenes .tabla th:nth-child(3){ width: 150px; }  /* Modificada */
	.listado-ordenes .tabla th:nth-child(4){ width: 180px; }  /* Factura */
	.listado-ordenes .tabla th:nth-child(5){ width: 240px; }  /* Proveedor */
	.listado-ordenes .tabla th:nth-child(6){ width: 110px; }  /* Hoja */
	.listado-ordenes .tabla th:nth-child(7){ width: 170px; }  /* acciones */

	/* Cotizaciones: nueve columnas en vez de siete y una de ellas no entra de
	   ninguna manera. Como Company guarda el RTN, el cliente que se dibuja es
	   'NOMBRE APELLIDO (RTN: 08019019171402)': medido sobre 400 filas reales, la
	   mitad necesita 471px y el 90% necesita 562px.
	   Por eso acá el sobrante NO se reparte entre todas como en órdenes de compra:
	   las otras ocho columnas van a su mínimo medido y la de cliente se deja sin
	   ancho, que en reparto fijo es la manera de decir "quedate con todo lo que
	   sobre". En 1536px le tocan ~540px, o sea el nombre completo en la enorme
	   mayoría de las filas y el RTN cortado en las más largas; el dato completo
	   sigue estando en el buscador y en el detalle. */
	/* 1225 y no más: a 1280px de ventana quedan 1233px útiles descontando el margen
	   y la barra de scroll de la tabla. Un pixel más y aparece scroll horizontal en
	   la resolución de laptop más común. */
	.listado-cotizaciones .tabla{ min-width: 1225px; }
	.listado-cotizaciones .tabla th:nth-child(1){ width: 46px; }   /* # */
	.listado-cotizaciones .tabla th:nth-child(2){ width: 115px; }  /* Cotización */
	.listado-cotizaciones .tabla th:nth-child(3){ width: 150px; }  /* Modificada */
	.listado-cotizaciones .tabla th:nth-child(4){ width: 158px; }  /* Guía */
	/* Cliente (5) sin ancho a propósito: absorbe todo el espacio libre */
	.listado-cotizaciones .tabla th:nth-child(6){ width: 225px; }  /* Comentario */
	.listado-cotizaciones .tabla th:nth-child(7){ width: 94px; }   /* Total */
	.listado-cotizaciones .tabla th:nth-child(8){ width: 75px; }   /* Hoja */
	.listado-cotizaciones .tabla th:nth-child(9){ width: 170px; }  /* acciones */
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}