/* =====================================================================
   Nota de Pedidos Fundas - Panther Distribuciones
   Hoja de estilos única del proyecto (CSS3 nativo, sin frameworks).
   Mobile-first: los estilos base son para celular, los breakpoints
   @media agregan/ajustan para pantallas más grandes.
   ===================================================================== */

/* ---------- Variables de marca y diseño ---------- */
:root {
  /* Color principal de la marca (botones, destacados, títulos) */
  --color-primary: #3e863c;
  --color-primary-dark: #2f6830;
  --color-primary-light: #e9f7e9;

  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #1f2937;
  --color-text-light: #6b7280;

  --color-danger: #dc2626;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

  --transition: all 0.2s ease;

  /* Tipografía: par "Corporate Trust" (Lexend para títulos, Source Sans 3
     para el resto), cargada por Google Fonts en el <head> de cada
     página. El stack del sistema queda como respaldo si la fuente
     todavía no cargó o falla la red. */
  --font-heading: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset básico ---------- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
}

a {
  color: var(--color-primary);
}

/* ---------- Layout general ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 6rem;
}

/* Oculta contenido visualmente pero lo deja disponible para lectores de
   pantalla (ej. el <h1> real de la página, que el header ya no muestra
   como texto porque el logo cumple esa función visualmente). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.site-search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 0 0.85rem;
  transition: var(--transition);
}

.site-search-wrap:focus-within {
  border-color: var(--color-primary);
}

.site-search-icon {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-right: 0.4rem;
  flex: 0 0 auto;
}

.site-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0.55rem 0;
  font-size: 0.88rem;
  color: var(--color-text);
}

.site-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-admin-link {
  color: #9ca3af;
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
}

.site-updated-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 0.5rem;
  text-align: right;
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.site-updated-bar span {
  color: var(--color-primary);
  font-weight: 700;
}

/* Botón "Ver Pedido" del header: ícono de carrito con contador siempre
   visible (el contador muestra "0" en vez de esconderse, como en el
   sitio de referencia), en vez del botón con texto que aparecía/
   desaparecía según si había algo cargado. */
.header-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  border: none;
  font-size: 1.2rem;
  transition: var(--transition);
}

.header-cart-btn:hover {
  background: var(--color-primary);
}

.header-cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* ---------- Botones compartidos ---------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition: var(--transition);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: #f3f4f6;
}

/* Botones de "Agarrar pedido"/"Marcar preparado"/"Marcar pagado" en
   Gestión Pedidos: a diferencia de los botones chicos de las tablas del
   admin (pensados para mouse), estos los toca una vendedora con el
   celular en la mano, así que necesitan un área de toque cómoda
   (mínimo recomendado ~44px). */
.btn-accion-vendedora {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-light);
  padding: 0.25rem 0.5rem;
}

.btn-close:hover {
  color: var(--color-text);
}

/* ---------- Pantalla de carga inicial ---------- */
.app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.app-loading-overlay p {
  margin: 0;
  color: var(--color-text-light);
  font-weight: 600;
  font-size: 0.9rem;
}

.spinner {
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-lg {
  width: 42px;
  height: 42px;
  border-width: 4px;
}

.spinner-inline {
  width: 14px;
  height: 14px;
  border-width: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}

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

/* ---------- Modal de bienvenida ---------- */
.welcome-modal-content {
  text-align: center;
}

.welcome-title {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  color: var(--color-text);
}

.welcome-subtitle {
  margin: 0 0 1.25rem;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.welcome-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.welcome-form {
  text-align: left;
}

.welcome-back {
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.75rem;
}

.welcome-back:hover {
  color: var(--color-text);
}

/* ---------- Catálogo ---------- */
.catalog-section {
  margin-top: 1rem;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* ---------- Fila de destacados (Promos del Día) ----------
   Fila estática con scroll horizontal nativo (sin animación 3D ni swipe a
   mano): el navegador resuelve el arrastre táctil/mouse por su cuenta. */
.carousel-wrap {
  margin-bottom: 1.75rem;
}

.carousel-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}

.destacados-scroll-wrap {
  position: relative;
}

.destacados-scroll {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.destacados-scroll::-webkit-scrollbar {
  display: none;
}

/* Flechas de navegación del carrusel: el scroll táctil/con mouse ya
   funciona solo, pero en desktop (sin touch) no siempre es obvio que
   hay más contenido para el costado sin este empujón visual. */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0.92;
}

.carousel-nav-izq {
  left: 0.25rem;
}

.carousel-nav-der {
  right: 0.25rem;
}

.destacado-card {
  flex: 0 0 auto;
  width: 150px;
  cursor: pointer;
}

/* ---------- Barra de herramientas del catálogo: filtro de marca a la
   izquierda (independiente de las categorías, ver app.js) y el toggle
   de vista a la derecha ---------- */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.filtro-marca-select {
  flex: 0 1 190px;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
}

/* ---------- Tarjetas grandes de categoría ----------
   Grilla de botones rectangulares con la silueta de la categoría
   (imagen sin fondo, cargada desde el admin) arriba centrada y el
   nombre debajo, también centrado. */
/* Cartel "Resultados para..." que reemplaza a Categorías/Promociones
   mientras se está buscando (ver actualizarVisibilidadPorBusqueda en
   app.js), para que el buscador del header dé feedback inmediato. */
.search-results-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.btn-clear-search {
  flex: 0 0 auto;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.category-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
}
.category-card-image {
  flex: 1;
  min-height: 0;
  max-width: 75%;
  object-fit: contain;
}
.category-card-icon {
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0.85;
}
.category-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}
.category-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1.5px var(--color-primary);
  background: var(--color-primary-light);
}

.view-toggle {
  flex: 0 0 auto;
  display: flex;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.2rem;
  gap: 0.2rem;
}

.view-toggle-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Vista de Lista (tabla) ---------- */
.catalog-list-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.catalog-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 560px;
}

.catalog-list-table thead th {
  text-align: left;
  padding: 0.5rem 0.9rem;
  background: var(--color-bg);
  color: var(--color-text-light);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}

.catalog-list-table td {
  padding: 0.3rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: 0.82rem;
}

.catalog-list-table tbody tr:last-child td {
  border-bottom: none;
}

/* Código de la variante repetido chiquito debajo de la descripción,
   solo visible en mobile (ver media query abajo): en desktop ya tiene
   su propia columna, mostrarlo dos veces sería ruido. */
.list-col-codigo-mobile {
  display: none;
}

/* En una pantalla angosta, Código y Categoría (columnas 1 y 3 de 5) no
   entran junto con Precio/Agregar sin forzar scroll horizontal. Se
   ocultan esas dos columnas: el código pasa a mostrarse como sub-texto
   dentro de Descripción (list-col-codigo-mobile) y la categoría no hace
   falta repetirla fila por fila porque el cliente ya filtró por
   categoría con las tarjetas de arriba. Se mantiene la fila densa
   (nada de layout de tarjeta apilada) para no perder la compacidad que
   se pidió para esta vista. */
@media (max-width: 640px) {
  .catalog-list-table {
    min-width: 0;
  }
  .list-col-codigo,
  .list-col-categoria {
    display: none;
  }
  .list-col-codigo-mobile {
    display: block;
    color: var(--color-text-light);
    font-size: 0.72rem;
  }
}

/* Fila de título del producto: agrupa sus variantes debajo, con el
   mismo look que el resto de la tabla pero destacada (fondo tenue). */
.list-title-row td {
  background: var(--color-primary-light);
  padding: 0.35rem 0.9rem;
}

.list-title-row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.list-title-row-name {
  font-weight: 800;
  color: var(--color-text);
}

.btn-ver-funda {
  flex: 0 0 auto;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.btn-ver-funda:hover {
  background: var(--color-primary);
  color: #fff;
}

.list-col-codigo {
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

.list-precio-old {
  display: block;
  color: var(--color-text-light);
  text-decoration: line-through;
  font-size: 0.72rem;
}

.list-precio-actual {
  display: block;
  font-weight: 800;
  color: var(--color-primary);
}

.qty-control-compact {
  gap: 0.3rem;
}

.qty-btn-sm {
  width: 24px;
  height: 24px;
  font-size: 0.9rem;
}

.qty-control-compact .qty-value {
  min-width: 1.1rem;
  font-size: 0.82rem;
}

.catalog-load-status {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
  margin: 1.5rem 0;
}

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Tarjeta de un producto marcado "en_promo" desde el admin: antes tenía
   un borde+anillo grueso (border-color + box-shadow duplicado). Se
   cambia por una franja fina ABAJO de la tarjeta (no arriba), más
   elegante, que alcanza para diferenciarla sin "gritar" (el cartel
   🔥 PROMO sobre la foto ya hace la mayor parte de esa señal). */
.product-card-promo {
  border-bottom: 3px solid #f59e0b;
}

.product-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.85;
  background: #f3f4f6;
  overflow: hidden;
}

/* Cartel "🔥 PROMO", esquina inferior derecha de la foto (para no
   taparle la cara al producto, que suele estar centrado/arriba). */
.promo-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  background: #f59e0b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* Cartel "🆕 NUEVO", esquina superior izquierda (color distinto al de
   PROMO para poder distinguirlos de un vistazo si coinciden). */
.nuevo-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  background: #2563eb;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.product-card-image-wrap img {
  width: 100%;
  height: 100%;
  /* "contain" (no "cover"): la foto se ve completa dentro del recuadro,
     sin recortar ningún borde del producto, aunque queden franjas del
     fondo gris a los costados en fotos que no son cuadradas. */
  object-fit: contain;
}

.product-card-body {
  padding: 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.product-card-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
  /* Corta en 2 líneas: sin esto, un nombre largo estira la tarjeta y
     rompe la alineación de precios entre tarjetas vecinas de la grilla. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bloque de precio de la tarjeta: "Desde" arriba (si hay precio
   tachado) y, debajo, precio viejo y precio actual lado a lado en vez
   de apilados uno abajo del otro — ocupa menos alto sin sacrificar el
   tamaño de la foto. Todo centrado, a diferencia del nombre que queda
   alineado a la izquierda. */
.product-card-price-block {
  text-align: center;
  margin-top: auto;
  padding-top: 0.15rem;
}

.product-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
}

.product-card-price {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0;
}

.product-card-price-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--color-text-light);
}

/* Precio "de antes" tachado (ver calcularPrecioTachado en app.js): en
   rojo para que se note de un vistazo que es el precio viejo, ya no
   vigente, distinto del actual en verde. */
.product-card-price-old {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-danger);
  text-decoration: line-through;
}

/* ---------- Checkout ---------- */
.checkout-section,
.catalog-section {
  display: none;
}

.checkout-section.active,
.catalog-section.active {
  display: block;
}

.notice {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  margin: 1rem 0 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.form-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  /* 16px (1rem): por debajo de eso, iOS Safari hace zoom automático de
     toda la página al tocar el campo, algo molesto en el checkout. */
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: var(--transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-error {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--color-danger);
}

/* Caja destacada del selector de vendedor/a en el checkout: sin esto
   quedaba igual que cualquier otro campo del form y pasaba
   desapercibida entre nombre/teléfono. */
.vendor-select-box {
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
}

.vendor-select-box .form-label {
  color: var(--color-primary-dark);
  font-size: 0.95rem;
}

.vendor-select-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-light);
}

/* ---------- pedido.html: datos del pedido y tabla estilo planilla ---------- */
.pedido-info-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
}

.pedido-info-box p {
  margin: 0 0 0.35rem;
}

.pedido-info-box p:last-child {
  margin-bottom: 0;
}

.table-pedido {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.table-pedido th,
.table-pedido td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border: 1px solid var(--color-border);
}

.table-pedido th {
  background: #f9fafb;
  font-weight: 700;
  color: var(--color-text-light);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Cantidad y precio alineados a la derecha, como en una planilla real
   (columnas 4 y 5: check/SKU/Descripción van antes). */
.table-pedido th:nth-child(4),
.table-pedido th:nth-child(5),
.table-pedido td:nth-child(4),
.table-pedido td:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

/* Fila "encabezado" de cada funda dentro de la tabla: separa
   visualmente sus variantes del resto, en el verde de marca. */
.pedido-producto-header td {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 800;
}

.pedido-total-row td {
  background: #f9fafb;
  font-weight: 800;
  border-top: 2px solid var(--color-primary);
}

/* Detalle que dejó el cliente para esa variante (color, género,
   diseño puntual, etc.), dentro de la misma celda de descripción. */
.pedido-item-nota {
  margin-top: 0.3rem;
  padding: 0.3rem 0.5rem;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #854d0e;
  white-space: normal;
}

/* Columna del check de armado: angosta y centrada, casillas más
   grandes para tocar bien desde el celular. */
.table-pedido th:first-child,
.table-pedido td.celda-check {
  width: 2.6rem;
  text-align: center;
}

.celda-check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-primary);
}

/* Checkbox de armado + botón de sacar el artículo, uno debajo del
   otro para que entren en la columna angosta del check. */
.celda-check-controles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.btn-quitar-item {
  background: #fee2e2;
  color: #991b1b;
  border: none;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.btn-quitar-item:hover {
  background: #fecaca;
}

/* Variante ya controlada por la vendedora al armar el pedido: se
   atenúa y tacha para que salte a la vista lo que falta. */
.item-marcado td:not(.celda-check) {
  background: #f3f4f6;
  color: var(--color-text-light);
  text-decoration: line-through;
}

/* Una vez finalizado el armado, "Ver Pedido" marca en rojo tachado lo
   que no había en stock (no se cuenta en el total a pagar). */
.item-sin-stock td:not(.celda-check) {
  background: #fef2f2;
  color: var(--color-text-light);
  text-decoration: line-through;
}

/* Pantalla inicial de pedido.html: elegir entre ver el pedido o
   entrar a prepararlo (requiere N° de vendedor/a). */
.pedido-selector-modo {
  text-align: center;
  margin-bottom: 1.25rem;
}

.pedido-selector-modo-texto {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin: 0 0 0.75rem;
}

.pedido-selector-modo-botones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .pedido-selector-modo-botones {
    flex-direction: row;
  }
}

.pedido-aviso-bloqueado {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Al imprimir (o "Guardar como PDF") solo interesa el detalle del
   pedido para control físico: se ocultan los botones de acción y los
   avisos transitorios de pantalla, y todo se comprime para que entre
   en una sola hoja A4. El logo (dentro de <header>) y los datos del
   pedido (.pedido-info-box, dentro de <main>) no son hermanos en el
   HTML, así que en vez de reordenarlos con flex/grid se posicionan
   ambos con position:absolute: sin ningún ancestro con position
   propia, cada uno queda anclado directamente a la hoja (arriba a la
   izquierda y arriba a la derecha), sin importar dónde vivan en el DOM. */
@media print {
  @page {
    size: A4;
    margin: 10mm 12mm;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff;
    font-size: 11px;
  }

  .pedido-acciones-no-imprimir {
    display: none !important;
  }

  #pedido-contenido > h2 {
    display: none !important;
  }

  header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 45% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  header > div {
    justify-content: flex-start !important;
  }

  header img {
    height: 40px !important;
    max-height: 40px !important;
  }

  main.container {
    max-width: 100% !important;
    padding: 4.6rem 0 0 !important;
    margin: 0 !important;
  }

  .pedido-info-box {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 52% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    text-align: right;
  }

  .pedido-info-box p {
    margin: 0 0 0.1rem !important;
  }

  /* Celdas más chicas y ajustadas para que la planilla ocupe el ancho
     completo de la hoja sin desperdiciar espacio. */
  .table-pedido {
    font-size: 0.72rem;
    margin-bottom: 0.5rem;
  }

  .table-pedido th,
  .table-pedido td {
    padding: 0.2rem 0.35rem;
    line-height: 1.2;
  }

  .table-pedido tr {
    page-break-inside: avoid;
  }

  .celda-check input[type="checkbox"] {
    width: 0.85rem;
    height: 0.85rem;
  }

  .btn-quitar-item {
    display: none !important;
  }
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.cart-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.cart-summary-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cart-summary-item-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.cart-summary-item-model {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.1rem;
  padding-top: 0.75rem;
  border-top: 1.5px dashed var(--color-border);
}

.action-buttons {
  display: flex;
  gap: 0.75rem;
}

/* ---------- Contador de cantidad (+/-) ---------- */
.qty-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-btn {
  /* 40px: área de toque cómoda para el dedo (Apple/Google recomiendan
     un mínimo de ~40-44px), este control se usa mucho al armar el
     pedido desde el celular. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.qty-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.qty-value {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
}

/* ---------- Botón flotante "Terminar Pedido" ---------- */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.85rem 1.25rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 500;
}

.sticky-footer.visible {
  display: block;
}

.sticky-footer .btn-primary {
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
}

/* ---------- Modales ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: 0;
}

.modal-overlay.visible {
  display: flex;
}

.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.modal-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--color-text);
}

.modal-body-scroll {
  overflow-y: auto;
  flex: 1;
}

.modal-product-image {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  background: #f3f4f6;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.modal-footer-sticky {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}

.variant-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.variant-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.variant-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

/* Detalle opcional para la vendedora (color, género, diseño, etc.):
   no se exporta al Excel de picking, pero sí se ve en pedido.html y al
   imprimir/guardar como PDF. */
.variant-item-nota {
  border-top: 1px dashed var(--color-border);
  padding-top: 0.5rem;
}

.variant-item-nota-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-bottom: 0.3rem;
}

.variant-item-nota-input {
  width: 100%;
  resize: vertical;
  min-height: 2.4rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.variant-item-nota-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.variant-item-nota-contador {
  margin: 0.25rem 0 0;
  font-size: 0.7rem;
  color: var(--color-text-light);
  text-align: right;
}

.variant-item-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.variant-item-image {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #f3f4f6;
  border-radius: var(--radius-sm);
}

.variant-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.variant-item-model {
  font-weight: 700;
  font-size: 0.88rem;
}

.variant-item-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.variant-item-price {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.9rem;
}

.variant-item-price-old {
  color: var(--color-text-light);
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: line-through;
}

.variant-item-stock {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 12px;
  width: fit-content;
}

/* ---------- Insignias de stock (compartidas catálogo + admin) ---------- */
.stock-badge.hay-stock {
  background: #dcfce7;
  color: #166534;
}

.stock-badge.poco-stock {
  background: #fef9c3;
  color: #854d0e;
}

.stock-badge.por-agotarse {
  background: #ffedd5;
  color: #9a3412;
}

.stock-badge.sin-stock {
  background: #fee2e2;
  color: #991b1b;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .destacado-card {
    width: 175px;
  }

  .category-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .modal-overlay {
    align-items: center;
  }

  .modal-content {
    border-radius: var(--radius-lg);
  }
}

@media (min-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .category-cards {
    grid-template-columns: repeat(6, 1fr);
  }
}