/*
 * Mostrador del vendedor. Rejilla de productos como la tienda. Usa las clases de
 * MDB del tema (form-control, form-select, btn, form-outline); aquí solo se
 * maqueta, se acotan los campos de cantidad y se marcan los estados de inventario.
 */
.vendedor-mostrador { max-width: 100%; }
.vendedor-intro { opacity: .8; }

/*
 * En ESCRITORIO (a partir de 1025px) el carrito va a la derecha, en dos columnas:
 * productos a la izquierda; carrito, cliente y el botón de crear a la derecha. En
 * TABLET y MÓVIL (1024px o menos) el carrito se esconde y se abre en un modal a
 * pantalla completa desde una burbuja (más abajo).
 */
.vendedor-cols { display: block; }
.vendedor-col-pedido > h3:first-child { margin-top: 0; }
@media (min-width: 1025px) {
	.vendedor-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5em; align-items: start; }
	.vendedor-col-pedido { position: sticky; top: 1rem; }
}

.vendedor-buscador { display: flex; flex-wrap: wrap; gap: .5em; margin: 1em 0; align-items: center; }
.vendedor-buscador .form-control { flex: 1; min-width: 12em; }
.vendedor-buscador .form-select { flex: 0 0 auto; max-width: 15em; }

/* Rejilla de productos */
.vendedor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: .75em;
	margin-bottom: 1em;
}
.vendedor-card {
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	min-width: 0; /* que la tarjeta pueda encoger a su columna del grid */
	/* Sin overflow:hidden, para que el desplegable de MDB Select no se recorte. */
}
.vendedor-card-img { aspect-ratio: 1 / 1; background: rgba(0,0,0,.04); border-radius: 8px 8px 0 0; overflow: hidden; }
.vendedor-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vendedor-card-body { padding: .5em .6em; display: flex; flex-direction: column; gap: .25em; flex: 1; min-width: 0; }
.vendedor-card-nombre { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vendedor-card-sku { font-size: 10px; opacity: .55; }
.vendedor-card-precio { opacity: .85; }
.vendedor-card .vendedor-var { width: 100%; max-width: 100%; font-size: 12px; margin: .1em 0; box-sizing: border-box; }
/* La fila de cantidad + botón: se ajusta al ancho de la tarjeta y, si no cabe en
 * una línea, el botón baja debajo (nunca se sale). */
.vendedor-card-acc { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin-top: auto; padding-top: .4em; }
.vendedor-card-acc .vendedor-add { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding-left: .6em; padding-right: .6em; }

/* Los campos de cantidad son pequeños: el tema pone los number a ancho completo,
 * así que se acotan con más especificidad. */
.vendedor-mostrador input.vendedor-qty,
.vendedor-mostrador input.vendedor-cqty {
	width: 3.5rem;
	min-width: 3.5rem;
	max-width: 3.5rem;
	flex: 0 0 auto;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
}

.vendedor-stock { font-size: 12px; }
.vendedor-stock-ok { color: #1a7f37; }
.vendedor-stock-no { color: #b32d2e; }

/* Paginación */
.vendedor-paginacion { display: flex; gap: .6em; align-items: center; justify-content: center; margin: 0 0 1.5em; }
.vendedor-pag-info { opacity: .8; }

/* Carrito. Las filas se ajustan al ancho de la columna: el nombre ocupa la
 * primera línea (y parte si es largo) y debajo van cantidad, subtotal y quitar,
 * para que el botón nunca se salga de la caja. */
.vendedor-carrito { margin: .5em 0 1.5em; }
.vendedor-cfila { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .6em;
	border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: .5em .75em; margin-bottom: .4em; }
.vendedor-cprod { flex: 1 1 100%; display: flex; align-items: center; gap: .5em; min-width: 0; }
.vendedor-cnombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Las dos cantidades (venta y cambio), cada una con su rotulito encima. */
.vendedor-cants { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5em 1.2em; align-items: flex-end; }
.vendedor-cant { display: flex; flex-direction: column; gap: .15em; }
.vendedor-cant-tit { font-size: 11px; opacity: .7; }
.vendedor-csub { min-width: 0; text-align: right; white-space: nowrap; }
.vendedor-sub-k { display: block; font-size: 11px; opacity: .7; font-weight: 400; }
.vendedor-cfila .vendedor-quitar { flex: 0 0 auto; min-width: 0; margin-left: auto; }

/* Miniatura circular del producto, con borde del color del tema (el de los botones). */
.vendedor-cimg {
	width: 40px; height: 40px; flex: 0 0 auto;
	border-radius: 50%; object-fit: cover;
	border: 2px solid var(--mdb-primary, #7a1f2b);
	background: rgba(0,0,0,.04);
}
.vendedor-vacio { opacity: .6; }
.vendedor-total { text-align: right; margin-top: .5em; }

/* Cliente */
.vendedor-cliente { border-top: 1px solid rgba(0,0,0,.12); padding-top: 1em; margin-top: 1em; }
.vendedor-cliente-tit { margin-bottom: .2em; }
.vendedor-cliente-outline { max-width: 100%; }
/* Respaldo (sin MDB autocomplete): lista de resultados como un desplegable. */
.vendedor-cliente-res { max-width: 100%; }
.vendedor-cliente-res button { display: block; width: 100%; text-align: left; padding: .35em .5em; border-radius: 6px; }
.vendedor-cliente-res button:hover { background: rgba(0,0,0,.05); }
.vendedor-cli-sel { display: inline-block; margin-top: .5em; color: #1a7f37; font-weight: 600; }

/* Nota del pedido */
.vendedor-nota-fila { margin-top: 1em; }
.vendedor-nota-tit { display: block; margin-bottom: .25em; }
.vendedor-nota-fila textarea { width: 100%; box-sizing: border-box; }

/* Etiqueta de tipo (venta/cambio) en el detalle del pedido */
.vendedor-tipo { opacity: .65; font-size: 11px; }

/* El botón de crear, separado del buscador de cliente que tiene encima. */
.vendedor-crear-fila { margin-top: 1.5em; }

.vendedor-aviso { margin-top: 1em; }
.vendedor-msg-no { color: #b32d2e; }
.vendedor-ok { border: 1px solid rgba(26,127,55,.4); border-radius: 8px; padding: .75em 1em; }
.vendedor-ok-tit { font-weight: 700; color: #1a7f37; margin: 0 0 .4em; }
/*
 * Los botones del final («Ver pedido», «Ver mis pedidos», «Montar otro pedido»)
 * en una fila que envuelve: se reparten por el ancho que queda y, cuando no caben,
 * bajan de línea con separación —en vez de solaparse, que es lo que pasaba al ir
 * sueltos en línea con el relleno ancho de los botones del tema—. El texto largo
 * parte dentro del botón antes que desbordar la caja estrecha.
 */
.vendedor-ok-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6em; }
.vendedor-ok-acciones .button { margin: 0; white-space: normal; }
.vendedor-cargando { opacity: .6; }

/* Aviso de que estamos editando un pedido existente */
.vendedor-editando {
	display: flex; flex-wrap: wrap; gap: .75em; align-items: center; justify-content: space-between;
	border: 1px solid rgba(0,0,0,.15); border-left: 4px solid #1a7f37;
	border-radius: 8px; padding: .5em .85em; margin-bottom: 1em; background: rgba(26,127,55,.06);
}

/* Listado y detalle de «Pedidos montados» */
.vendedor-lista { width: 100%; border-collapse: collapse; margin: .5em 0 1em; }
.vendedor-lista th, .vendedor-lista td { padding: .5em .6em; border-bottom: 1px solid rgba(0,0,0,.1); text-align: left; vertical-align: middle; }
.vendedor-lista thead th { font-weight: 600; }
.vendedor-acc-col { white-space: nowrap; }
.vendedor-seg { display: flex; flex-wrap: wrap; gap: .3em; }
.vendedor-detalle-meta { line-height: 1.7; }
/* El botón «Editar» del detalle, despegado de la tarjeta de productos de arriba. */
.vendedor-detalle-acciones { margin-top: 1.5rem; }

/* Pastillas de estado de seguimiento */
.vendedor-pill { display: inline-block; font-size: 12px; padding: .1em .55em; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.vendedor-pill-si { color: #1a7f37; border-color: rgba(26,127,55,.4); background: rgba(26,127,55,.08); }
.vendedor-pill-no { color: #666; border-color: rgba(0,0,0,.15); background: rgba(0,0,0,.03); }

/* En móvil, la tabla se apila y cada celda muestra su título */
@media (max-width: 600px) {
	.vendedor-lista, .vendedor-lista tbody, .vendedor-lista tr, .vendedor-lista td { display: block; width: 100%; }
	.vendedor-lista thead { display: none; }
	.vendedor-lista tr { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: .35em .5em; margin-bottom: .6em; }
	.vendedor-lista td { border: 0; padding: .25em 0; }
	.vendedor-lista td::before { content: attr(data-title) ": "; font-weight: 600; }
	.vendedor-lista tfoot { display: none; }
}

/* ─────────── Móvil: burbuja del carrito + modal ── */

/* Selector de cantidad con botones − / + (todos los dispositivos) */
.vendedor-stepper { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.vendedor-step {
	width: 1.9rem; min-width: 1.9rem; padding: 0;
	border: 1px solid rgba(0,0,0,.2); background: rgba(0,0,0,.03); color: inherit;
	cursor: pointer; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.vendedor-step-m { border-radius: 6px 0 0 6px; }
.vendedor-step-p { border-radius: 0 6px 6px 0; }
.vendedor-step:hover { background: rgba(0,0,0,.08); }
.vendedor-stepper input.vendedor-qty,
.vendedor-stepper input.vendedor-cqty {
	width: 2.6rem; min-width: 2.6rem; max-width: 2.6rem;
	border-radius: 0; border-left: 0; border-right: 0;
}
/* Sin las flechitas nativas del number: ya están los botones − / +. */
.vendedor-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.vendedor-stepper input[type=number]::-webkit-outer-spin-button,
.vendedor-stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* La burbuja y el modal solo existen en tablet y móvil. En escritorio, el carrito
 * va en su columna y estos controles se ocultan. */
.vendedor-burbuja,
.vendedor-modal-x,
.vendedor-modal-seguir { display: none; }

@media (max-width: 1024px) {
	/* El carrito no se muestra en línea: vive en el modal. */
	.vendedor-cols > .vendedor-col-pedido { display: none; }

	/* Burbuja flotante, encima de donde sale la insignia de reCAPTCHA. */
	.vendedor-burbuja {
		position: fixed; right: 16px; bottom: 92px; z-index: 99998;
		width: 56px; height: 56px; border-radius: 50%; border: 0;
		display: flex; align-items: center; justify-content: center;
		background: var(--mdb-primary, #7a1f2b); color: #fff; cursor: pointer;
		box-shadow: 0 4px 14px rgba(0,0,0,.3);
	}
	.vendedor-burbuja-badge {
		position: absolute; top: -4px; right: -4px; box-sizing: border-box;
		min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
		background: #fff; color: var(--mdb-primary, #7a1f2b);
		border: 2px solid var(--mdb-primary, #7a1f2b);
		font-size: 12px; font-weight: 700; line-height: 16px; text-align: center;
	}
	.vendedor-burbuja-cero .vendedor-burbuja-badge { display: none; }

	/* El propio carrito, a pantalla completa como modal (sin moverlo del DOM, para
	 * conservar el estilo del tema y el autocompletar del cliente). */
	body.vendedor-modal-abierto { overflow: hidden; }
	body.vendedor-modal-abierto .vendedor-cols > .vendedor-col-pedido {
		display: block; position: fixed; inset: 0; z-index: 99999;
		margin: 0; border: 0; border-radius: 0;
		background: var(--mdb-body-bg, #fff);
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 3.2em 1em 1.5em;
	}
	/* La X, fija arriba a la derecha. */
	body.vendedor-modal-abierto .vendedor-col-pedido .vendedor-modal-x {
		display: block; position: fixed; top: .3em; right: .5em; z-index: 100000;
		background: none; border: 0; font-size: 34px; line-height: 1;
		padding: .05em .3em; cursor: pointer; color: inherit;
	}
	/* «Agregar otro producto», a lo ancho al final. */
	body.vendedor-modal-abierto .vendedor-col-pedido .vendedor-modal-seguir {
		display: block; width: 100%; margin-top: 1.5em;
	}
}

/* El desplegable del autocompletar del cliente (MDB lo cuelga del body) tiene que
 * quedar por ENCIMA del modal, o no se ve. Solo cuando el modal está abierto. */
body.vendedor-modal-abierto .autocomplete-dropdown-container { z-index: 100050; }